plane/web/components/api-token/ApiTokenForm/ApiTokenExpiry.tsx

import { Menu, Transition } from "@headlessui/react";
import { ToggleSwitch } from "@plane/ui";
import { Dispatch, Fragment, SetStateAction } from "react";
import { Control, Controller } from "react-hook-form";
import { IApiFormFields } from "./types";

interface IApiTokenExpiry {
  neverExpires: boolean;
  selectedExpiry: number;
  setSelectedExpiry: Dispatch<SetStateAction<number>>;
  setNeverExpire: Dispatch<SetStateAction<boolean>>;
  renderExpiry: () => string;
  control: Control<IApiFormFields, any>;
}

export const expiryOptions = [
  {
    title: "7 Days",
    days: 7,
  },
  {
    title: "30 Days",
    days: 30,
  },
  {
    title: "1 Month",
    days: 30,
  },
  {
    title: "3 Months",
    days: 90,
  },
  {
    title: "1 Year",
    days: 365,
  },
];

export const ApiTokenExpiry = ({
  neverExpires,
  selectedExpiry,
  setSelectedExpiry,
  setNeverExpire,
  renderExpiry,
  control,
}: IApiTokenExpiry) => (
  <>
    <Menu>
      <p className="text-sm font-medium mb-2"> Expiration Date</p>
      <Menu.Button className={"w-[40%]"} disabled={neverExpires}>
        <div className="py-3 w-full font-medium px-3 flex border border-custom-border-200 rounded-md justify-center items-baseline">
          <p className={`text-base ${neverExpires ? "text-custom-text-400/40" : ""}`}>
            {expiryOptions[selectedExpiry].title.toLocaleLowerCase()}
          </p>
          <p className={`text-sm mr-auto ml-2 text-custom-text-400${neverExpires ? "/40" : ""}`}>({renderExpiry()})</p>
        </div>
      </Menu.Button>
      <Transition
        as={Fragment}
        enter="transition ease-out duration-100"
        enterFrom="transform opacity-0 scale-95"
        enterTo="transform opacity-100 scale-100"
        leave="transition ease-in duration-75"
        leaveFrom="transform opacity-100 scale-100"
        leaveTo="transform opacity-0 scale-95"
      >
        <Menu.Items className="absolute z-10 overflow-y-scroll whitespace-nowrap rounded-sm max-h-36 border origin-top-right mt-1 overflow-auto min-w-[10rem] border-custom-border-100 p-1 shadow-lg focus:outline-none bg-custom-background-100">
          {expiryOptions.map((option, index) => (
            <Menu.Item key={index}>
              {({ active }) => (
                <div className="py-1">
                  <button
                    type="button"
                    onClick={() => {
                      setSelectedExpiry(index);
                    }}
                    className={`w-full text-sm select-none truncate rounded px-3 py-1.5 text-left text-custom-text-300 hover:bg-custom-background-80 ${
                      active ? "bg-custom-background-80" : ""
                    }`}
                  >
                    {option.title}
                  </button>
                </div>
              )}
            </Menu.Item>
          ))}
        </Menu.Items>
      </Transition>
    </Menu>

    <div className="mt-4 mb-6 flex items-center">
      <span className="text-sm font-medium"> Never Expires</span>
      <Controller
        control={control}
        name="never_expires"
        render={({ field: { onChange, value } }) => (
          <ToggleSwitch
            className="ml-3"
            value={value}
            onChange={(val) => {
              onChange(val);
              setNeverExpire(val);
            }}
            size="sm"
          />
        )}
      />
    </div>
  </>
);