label: capitalizeFirstLetter()

in src/pages/cdpipeline-details/components/StageListFilter/index.tsx [87:196]
107 lines of code
7 McCabe index (conditional complexity)

    label: capitalizeFirstLetter(status),
    value: status,
  }));

  const permissions = useTypedPermissions();
  const { viewMode, handleChangeViewMode } = useViewModeContext();

  return (
    <Grid container spacing={2} alignItems={'center'} justifyContent={'flex-end'}>
      <Grid item flexGrow={1}>
        <Filter<StagesFilterAllControlNames>
          controls={{
            [stagesFilterControlNames.APPLICATION]: {
              gridXs: 3,
              component: (
                <Autocomplete
                  multiple
                  options={applicationsOptions}
                  getOptionLabel={(option) => option}
                  onChange={handleApplicationChange}
                  value={(filter.values.application as string[]) || []}
                  renderInput={(params) => <TextField {...params} label="Applications" />}
                  ChipProps={{
                    size: 'small',
                    color: 'primary',
                  }}
                />
              ),
            },
            [stagesFilterControlNames.STAGES]: {
              gridXs: 3,
              component: (
                <Autocomplete
                  multiple
                  options={stageSelectOptions}
                  getOptionLabel={(option) => option}
                  onChange={handleStagesChange}
                  value={(filter.values.stages as string[]) || []}
                  renderInput={(params) => (
                    <TextField {...params} label="Stages" placeholder="Stages" />
                  )}
                  ChipProps={{
                    size: 'small',
                    color: 'primary',
                  }}
                />
              ),
            },
            [stagesFilterControlNames.HEALTH]: {
              gridXs: 2,
              component: (
                <FormControl fullWidth>
                  <InputLabel>Health</InputLabel>
                  <Select
                    fullWidth
                    value={filter.values.health || ''}
                    displayEmpty
                    onChange={handleHealthChange}
                    sx={{
                      color: filter.values.health
                        ? theme.palette.text.secondary
                        : theme.palette.text.disabled,
                    }}
                  >
                    <MenuItem value="" disabled>
                      Health
                    </MenuItem>
                    {healthOptions.map(({ label, value }, idx) => {
                      const key = `${label}::${idx}`;

                      return (
                        <MenuItem value={value} key={key}>
                          {label}
                        </MenuItem>
                      );
                    })}
                  </Select>
                </FormControl>
              ),
            },
          }}
        />
      </Grid>
      <Grid item>
        <Stack direction="row" spacing={0} justifyContent={'flex-end'}>
          <Tooltip title={'View Less Details'}>
            <IconButton onClick={() => handleChangeViewMode(VIEW_MODES.COMPACT)} size="large">
              <Icon
                icon={ICONS.VIEW_DETAILS_LESS}
                color={viewMode === VIEW_MODES.COMPACT ? theme.palette.primary.main : 'inherit'}
              />
            </IconButton>
          </Tooltip>
          <Tooltip title={'View More Details'}>
            <IconButton onClick={() => handleChangeViewMode(VIEW_MODES.DETAILED)} size="large">
              <Icon
                icon={ICONS.VIEW_DETAILS_MORE}
                color={viewMode === VIEW_MODES.DETAILED ? theme.palette.primary.main : 'inherit'}
              />
            </IconButton>
          </Tooltip>
        </Stack>
      </Grid>
      <Grid item>
        <ButtonWithPermission
          ButtonProps={{
            startIcon: <Icon icon={'heroicons:view-columns-solid'} />,
            color: 'primary',
            variant: 'contained',
            onClick: () => {