Repository: hasura/graphql-engine
File: console/src/components/Services/Data/Function/Modify/SessionVarSection.tsx (TypeScript)

Code before:
import React, { useState } from 'react';
import styles from './ModifyCustomFunction.scss';
import ToolTip from '../../../../Common/Tooltip/Tooltip';
import Button from '../../../../Common/Button';
import EditorInput from './EditorInput';

type ConfigurationType = {
  session_argument: string;
};

export interface SessionVarSectionProps {
  functionName?: string;
  onSessVarUpdate: (s: string) => void;
  configuration?: ConfigurationType;
}
const SessionVarSection: React.FC<SessionVarSectionProps> = ({
  onSessVarUpdate,
  configuration,
  functionName,
}) => {
  const [sessVar, setSessVar] = useState('');
  const [isEditing, setIsEditing] = useState(false);
  const toggleIsEditting = () => setIsEditing(b => !b);

  const onSessVarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSessVar(e.target.value);
  };
  const onSave = () => {
    if (sessVar) onSessVarUpdate(sessVar);
  };

  return (
    <>
      <hr />
      <h4 className={styles.subheading_text}>
        Session Variable Argument
        <ToolTip message="Use Session Variable argument as SQL function input argument." />
      </h4>
      <div
        className={`${
          isEditing ? styles.editorExpanded : styles.editorCollapsed
        }`}
      >
        <div
          className={`${styles.display_flex} ${styles.add_mar_bottom_mid}`}
          data-test={`${functionName}-session-argument`}
        >
          <Button

Review comment (suggestion):
Maybe
```suggestion
  const toggleIsEditting = () => setIsEditing(prev => !prev);
```

Code after:
import React, { useState } from 'react';
import styles from './ModifyCustomFunction.scss';
import ToolTip from '../../../../Common/Tooltip/Tooltip';
import Button from '../../../../Common/Button';
import EditorInput from './EditorInput';
import KnowMoreLink from '../../../../Common/KnowMoreLink/KnowMoreLink';

type ConfigurationType = {
  session_argument: string;
};
export type FunctionLoadingType = {
  isRequesting?: boolean;
  isDeleting?: boolean;
  isUntracking?: boolean;
  isFetching?: boolean;
} | null;
export interface SessionVarSectionProps {
  functionName?: string;
  onSessVarUpdate: (s: string) => Promise<void>;
  configuration?: ConfigurationType;
  loading: FunctionLoadingType;
}
const SessionVarSection: React.FC<SessionVarSectionProps> = ({
  onSessVarUpdate,
  configuration,
  functionName,
}) => {
  const [sessVar, setSessVar] = useState(configuration?.session_argument || '');
  const [isEditing, setIsEditing] = useState(false);
  const toggleIsEditting = () => setIsEditing(prev => !prev);

  const onSessVarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSessVar(e.target.value);
  };
  const closeEditPopUp = React.useCallback(() => setIsEditing(false), [
    setIsEditing,
  ]);
  const onSave = () => {
    if (sessVar !== (configuration?.session_argument || ''))
      onSessVarUpdate(sessVar).then(closeEditPopUp);
  };

  return (
    <>
      <hr />
      <h4 className={styles.subheading_text}>
        Session argument
        <ToolTip message="the function argument into which hasura session variables will be passed" />