plane/web/components/api-token/form/token-expiry.tsx

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

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

export const EXPIRY_OPTIONS = [
  {
    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: FC<APITokenExpiryProps> = (props) => {
  const { neverExpires, selectedExpiry, setSelectedExpiry, setNeverExpire, renderExpiry, control } = props;

  return (
    <>
      <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" : ""}`}>
              {EXPIRY_OPTIONS[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">
            {EXPIRY_OPTIONS.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>
    </>
  );
};