function VpcSelect()

in frontend/src/old-pages/Configure/Cluster.tsx [265:343]
74 lines of code
10 McCabe index (conditional complexity)

function VpcSelect() {
  const {t} = useTranslation()
  const vpcs = useState(['aws', 'vpcs']) || []
  const vpc = useSelector(selectVpc) || ''
  const error = useState([...errorsPath, 'vpc'])
  const subnets = useSelector(selectAwsSubnets)
  const queues = useSelector(selectQueues)
  const editing = useState(['app', 'wizard', 'editing'])

  const VpcName = (vpc: any) => {
    if (!vpc) return null
    var tags = vpc.Tags
    if (!tags) {
      return null
    }
    tags = vpc.Tags.filter((t: any) => {
      return t.Key === 'Name'
    })
    return tags.length > 0 ? tags[0].Value : null
  }

  const vpcToDisplayOption = (vpc: any) => {
    return vpc
      ? {
          label: (
            <div style={{minWidth: '200px'}}>
              {VpcName(vpc) ? VpcName(vpc) : vpc.VpcId}
            </div>
          ),
          value: vpc.VpcId,
        }
      : {
          label: <div style={{minWidth: '200px'}}>Select a VPC</div>,
          value: null,
        }
  }

  const vpcToOption = (vpc: any) => {
    return vpc
      ? {
          label: (
            <div style={{minWidth: '200px'}}>
              {vpc.VpcId} {VpcName(vpc) && `(${VpcName(vpc)})`}
            </div>
          ),
          value: vpc.VpcId,
        }
      : {
          label: <div style={{minWidth: '200px'}}>Select a VPC</div>,
          value: null,
        }
  }

  const setVpc = (vpcId: any) => {
    setState(['app', 'wizard', 'vpc'], vpcId)
    setState([...errorsPath, 'vpc'], null)
  }

  return (
    <FormField
      errorText={error}
      description={t('wizard.cluster.vpc.description')}
      label={t('wizard.cluster.vpc.label')}
    >
      <Select
        disabled={editing}
        // @ts-expect-error TS(2322) FIXME: Type '{ label: JSX.Element; value: any; }' is not ... Remove this comment to see the full error message
        selectedOption={vpcToDisplayOption(
          findFirst(vpcs, x => x.VpcId === vpc),
        )}
        onChange={({detail}) => {
          setVpc(detail.selectedOption.value)
        }}
        options={vpcs.map(vpcToOption)}
        selectedAriaLabel={t('wizard.cluster.vpc.selectedAriaLabel')}
      />
    </FormField>
  )
}