Function EditActionModal

components/actions/editActionModal.tsx:99–494

(props: {
  action: Action;
  close: () => void;
  setAction: (action: Action) => void;
})

  },
];
export default function EditActionModal(props: {
  action: Action;
  close: () => void;
  setAction: (action: Action) => void;
}) {
  const saveRef = useRef(null);
  const [nameValid, setNameValid] = useState<boolean>(
    props.action.name.length > 0 && isAlphaNumericUnderscore(props.action.name),
  );

  const [localAction, setLocalAction] = useState<Action>(props.action);

  const [parametersValidJSON, setParameterValidJSON] = useState<boolean>(true);

  const [bodyValidJSON, setBodyValidJSON] = useState<boolean>(true);

  const [responsesValidJSON, setResponsesValidJSON] = useState<boolean>(true);
  const [includeAllInResposes, setIncludeAllInResponses] = useState<boolean>(
    localAction.keys_to_keep === null,
  );
  const [inclInResponsesValidJSON, setInclInResponsesValidJSON] =
    useState<boolean>(true);

  // State variable useful for caching the keys to keep when the checkbox is checked
  const [cacheKeysToKeep, setCacheKeysToKeep] = useState<string[]>(
    localAction.keys_to_keep as string[],
  );
  const [showAdvanced, setShowAdvanced] = useState<boolean | null>(null);
  useEffect(() => {
    if (showAdvanced !== null) {
      let ele = document.getElementById("scroll-modal");
      // If the element exists, scroll to the bottom
      if (ele) {
        ele.scrollTop = ele.scrollHeight;
      }
    }
  }, [showAdvanced]);

  return (
    <Modal open={!!props.action} setOpen={props.close} classNames={"max-w-4xl"}>
      <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>
          <Dialog.Title as="h3" className="text-xl leading-6 text-gray-100">
            Edit Action
          </Dialog.Title>
        </div>
      </div>

      <div className="mt-10 mb-7 grid grid-cols-2 gap-x-6">
        <div className="relative">
          <FloatingLabelInput
            className={classNames(