function StateChangeButtonGrid()

in dialogflow-cx/vpc-sc-demo/frontend/src/StateButtonGrid.js [96:240]
138 lines of code
4 McCabe index (conditional complexity)

function StateChangeButtonGrid(props) {
  const webhookAccessState = props.dataModel.allStates.webhookAccessState;
  const webhookIngressState = props.dataModel.allStates.webhookIngressState;
  const cloudfunctionsRestrictedState =
    props.dataModel.allStates.cloudfunctionsRestrictedState;
  const dialogflowRestrictedState =
    props.dataModel.allStates.dialogflowRestrictedState;
  const serviceDirectoryWebhookState =
    props.dataModel.allStates.serviceDirectoryWebhookState;
  const pageMapper = props.dataModel.pageMapper;
  const pageNumber = props.dataModel.pageNumber;
  const liveMode = props.liveMode;
  const dataModel = props.dataModel;

  let connectionEnabled;
  let extraGridItem;
  if (!liveMode) {
    if (
      getPage(dataModel.allStates, dataModel.pageMapper).connectionEnabled ===
      true
    ) {
      connectionEnabled = (
        <Grid item>
          <div style={{color: '#73DC54'}}>Yes</div>
        </Grid>
      );
    } else if (
      getPage(dataModel.allStates, dataModel.pageMapper).connectionEnabled ===
      false
    ) {
      connectionEnabled = (
        <Grid item>
          <div style={{color: 'red'}}>{'No'}</div>
        </Grid>
      );
    } else {
      connectionEnabled = 'TODO';
    }
    extraGridItem = (
      <Grid item>
        <Grid container direction="row" columnSpacing={3} alignItems="center">
          <Grid item>
            <Box sx={{my: 0, width: 58}} variant="string" />
          </Grid>
          <Grid item sx={{width: 335}}>
            <Typography variant="body1" align="right">
              Can Dialogflow contact Cloud Functions?
            </Typography>
          </Grid>
          {connectionEnabled}
        </Grid>
      </Grid>
    );
  } else {
    extraGridItem = <></>;
  }

  return (
    <>
      <Grid container direction="column" rowSpacing={1}>
        <Grid item>
          {getControlElem(
            'Webhook Access Authenticated Only?',
            webhookAccessState,
            3,
            110,
            '/webhook_access_allow_unauthenticated_status',
            '/update_webhook_access',
            cloudfunctionsRestrictedState,
            liveMode,
            dataModel,
            pageMapper,
            pageNumber
          )}
        </Grid>

        <Grid item>
          {getControlElem(
            'Restrict Cloudfunctions Access (VPC-SC)?',
            cloudfunctionsRestrictedState,
            15,
            null,
            '/restricted_services_status_cloudfunctions',
            '/update_security_perimeter_cloudfunctions',
            null,
            liveMode,
            dataModel,
            pageMapper,
            pageNumber
          )}
        </Grid>

        <Grid item>
          {getControlElem(
            'Restrict Dialogflow Access (VPC-SC)?',
            dialogflowRestrictedState,
            15,
            null,
            '/restricted_services_status_dialogflow',
            '/update_security_perimeter_dialogflow',
            null,
            liveMode,
            dataModel,
            pageMapper,
            pageNumber
          )}
        </Grid>

        <Grid item>
          {getControlElem(
            'Webhook Allow Internal Ingress Only?',
            webhookIngressState,
            85,
            110,
            '/webhook_ingress_internal_only_status',
            '/update_webhook_ingress',
            cloudfunctionsRestrictedState,
            liveMode,
            dataModel,
            pageMapper,
            pageNumber
          )}
        </Grid>

        <Grid item>
          {getControlElem(
            'Route Dialogflow Through VPC Proxy?',
            serviceDirectoryWebhookState,
            8,
            110,
            '/service_directory_webhook_fulfillment_status',
            '/update_service_directory_webhook_fulfillment',
            dialogflowRestrictedState,
            liveMode,
            dataModel,
            pageMapper,
            pageNumber
          )}
        </Grid>

        {extraGridItem}
      </Grid>
    </>
  );
}