Function EditActionGroupModal

components/actions/editActionTagModal.tsx:9–161

(props: {
  actionTag: ActionTagJoin;
  close: () => void;
  setActionTag: (actionGroup: ActionTagJoin) => void;
})

import { ActionTagJoin } from "../../lib/types";

export default function EditActionGroupModal(props: {
  actionTag: ActionTagJoin;
  close: () => void;
  setActionTag: (actionGroup: ActionTagJoin) => void;
}) {
  const saveRef = useRef(null);
  const [invalid, setInvalid] = React.useState<boolean | null>(null);
  const [localActionGroup, setLocalActionGroup] = React.useState<ActionTagJoin>(
    props.actionTag,
  );

  return (
    <Modal
      open={!!props.actionTag}
      setOpen={props.close}
      classNames={"max-w-xl"}
    >
      <div className="flex flex-row justify-between">
        <div className="flex flex-row place-items-center gap-x-4">
          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-sky-100">
            <PencilSquareIcon
              className="h-6 w-6 text-sky-600"
              aria-hidden="true"
            />
          </div>
          <div>
            <Dialog.Title as="h3" className="text-xl leading-6 text-gray-100">
              Edit Action Group
            </Dialog.Title>
            <p className="mt-1 text-sm text-gray-500">
              These are called <i>tags</i> in OpenAPI terminology.
            </p>
          </div>
        </div>
      </div>

      <div className="relative mt-6 mb-4">
        {localActionGroup.name.length > 30 && (
          <div
            className={classNames(
              "absolute top-4 text-xs -right-10 z-10",
              localActionGroup.name.length === 40
                ? "text-red-500"
                : "text-gray-500",
            )}
          >
            {localActionGroup.name.length}/40
          </div>
        )}
        <FloatingLabelInput
          className={classNames(
            "px-4 text-gray-900 border-gray-200 border focus:border-sky-500 focus:ring-sky-500 focus:ring-1 ",
            invalid && localActionGroup.name === ""
              ? "ring-2 ring-offset-1 ring-red-500"
              : "",
          )}
          floatingClassName={
            invalid && localActionGroup.name === ""