function IamTab()

in packages/dashboard-app/src/components/installs/modal/login/tabs.tsx [66:219]
149 lines of code
2 McCabe index (conditional complexity)

function IamTab({
  handleLogin,
  toggleTab,
  signInText,
}: {
  handleLogin: (startUrl: string, region: string) => void;
  toggleTab: () => void;
  signInText: string;
}) {
  const midway = window?.fig?.constants?.midway;

  // TODO: this should be fetched from https://idetoolkits.amazonwebservices.com/endpoints.json
  const REGIONS = {
    "af-south-1": {
      description: "Africa (Cape Town)",
    },
    "ap-east-1": {
      description: "Asia Pacific (Hong Kong)",
    },
    "ap-northeast-1": {
      description: "Asia Pacific (Tokyo)",
    },
    "ap-northeast-2": {
      description: "Asia Pacific (Seoul)",
    },
    "ap-northeast-3": {
      description: "Asia Pacific (Osaka)",
    },
    "ap-south-1": {
      description: "Asia Pacific (Mumbai)",
    },
    "ap-south-2": {
      description: "Asia Pacific (Hyderabad)",
    },
    "ap-southeast-1": {
      description: "Asia Pacific (Singapore)",
    },
    "ap-southeast-2": {
      description: "Asia Pacific (Sydney)",
    },
    "ap-southeast-3": {
      description: "Asia Pacific (Jakarta)",
    },
    "ap-southeast-4": {
      description: "Asia Pacific (Melbourne)",
    },
    "ca-central-1": {
      description: "Canada (Central)",
    },
    "ca-west-1": {
      description: "Canada West (Calgary)",
    },
    "eu-central-1": {
      description: "Europe (Frankfurt)",
    },
    "eu-central-2": {
      description: "Europe (Zurich)",
    },
    "eu-north-1": {
      description: "Europe (Stockholm)",
    },
    "eu-south-1": {
      description: "Europe (Milan)",
    },
    "eu-south-2": {
      description: "Europe (Spain)",
    },
    "eu-west-1": {
      description: "Europe (Ireland)",
    },
    "eu-west-2": {
      description: "Europe (London)",
    },
    "eu-west-3": {
      description: "Europe (Paris)",
    },
    "il-central-1": {
      description: "Israel (Tel Aviv)",
    },
    "me-central-1": {
      description: "Middle East (UAE)",
    },
    "me-south-1": {
      description: "Middle East (Bahrain)",
    },
    "sa-east-1": {
      description: "South America (Sao Paulo)",
    },
    "us-east-1": {
      description: "US East (N. Virginia)",
    },
    "us-east-2": {
      description: "US East (Ohio)",
    },
    "us-west-1": {
      description: "US West (N. California)",
    },
    "us-west-2": {
      description: "US West (Oregon)",
    },
  } as const;

  const DEFAULT_SSO_REGION = "us-east-1";

  const [startUrl, setStartUrl] = useLocalStateZodDefault(
    "auth.idc.start-url",
    z.string(),
    midway ? AMZN_START_URL : "",
  );
  const [region, setRegion] = useLocalStateZodDefault(
    "auth.idc.region",
    z.string(),
    DEFAULT_SSO_REGION,
  );

  return (
    <div className="border rounded p-4 flex flex-col bg-black/20 gap-4">
      <div>
        <p className="font-bold text-lg">
          Sign in with AWS IAM Identity Center
        </p>
      </div>
      <IamInput
        title="Start URL"
        description="Provided by your admin or help desk"
        input={
          <Input
            value={startUrl}
            onChange={(e) => setStartUrl(e.target.value)}
            className="text-black dark:text-white"
            type="url"
          />
        }
      />
      <IamInput
        title="Region"
        description="AWS Region that hosts identity directory"
        input={
          <Select onValueChange={(value) => setRegion(value)} value={region}>
            <SelectTrigger className="w-full text-black dark:text-white">
              <SelectValue placeholder="Theme" />
            </SelectTrigger>
            <SelectContent className="h-96">
              {Object.entries(REGIONS).map(([key, value]) => (
                <SelectItem key={key} value={key}>
                  <span className="font-mono mr-2">{key}</span>
                  <span className="text-xs opacity-70">
                    {value.description}
                  </span>
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        }