function VpcSelect()

in frontend/src/pages/Configure/Cluster.js [251:311]
55 lines of code
14 McCabe index (conditional complexity)

function VpcSelect() {
  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) => {
    if(!vpc)
      return null;
    var tags = vpc.Tags;
    if(!tags) {
      return null;
    }
    tags = vpc.Tags.filter((t) => {return t.Key === "Name"})
    return (tags.length > 0) ? tags[0].Value : null
  }

  const vpcToDisplayOption = vpc => {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 => {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) => {
    setState(['app', 'wizard', 'vpc'], vpcId);
    setState([...errorsPath, 'vpc'], null);
    const headNodeSubnetPath = ['app', 'wizard', 'config', 'HeadNode', 'Networking', 'SubnetId'];

    const filteredSubnets = subnets && subnets.filter((s) => {return s.VpcId === vpcId})
    if(filteredSubnets.length > 0) {
      const subnetSet = new Set(filteredSubnets);
      var subnet = filteredSubnets[0];
      if(!subnetSet.has(getState(headNodeSubnetPath)))
        setState(headNodeSubnetPath, subnet.SubnetId);
      if(queues)
        queues.forEach((queue, i) => {
          const queueSubnetPath = ['app', 'wizard', 'config', 'Scheduling', 'SlurmQueues', i, "Networking", "SubnetIds"];
          if(!subnetSet.has(getState(queueSubnetPath)))
            setState(queueSubnetPath, [subnet.SubnetId]);
        })
    }
  }

  return (<FormField errorText={error}>
    <Header variant="h4" description="VPC where the cluster instances will reside."
      actions={
        <Select
          disabled={editing}
          selectedOption={vpcToDisplayOption(findFirst(vpcs, x => {return x.VpcId === vpc}))}
          onChange={({detail}) => {console.log(detail); setVpc(detail.selectedOption.value)}}
          options={vpcs.map(vpcToOption)}
          selectedAriaLabel="Selected"
        />
      }
    >VPC</Header>
  </FormField>);
}