FI-2038: Prevent modal close on edit (#383)

* prevent modal from closing when inputs have been edited * remove log * FI-2003: Add codecov.yml (#384) * add codecov * turn codecov on * modify backend target * add patch coverage --------- Co-authored-by: Alyssa Wang <[email protected]> * add carryforward * check edits on serial inputs * add close modal button to inputs dialog * keep edited status consistent between input types --------- Co-authored-by: Alyssa Wang <[email protected]>
inferno-framework · Aug 24, 2023 · b680f84 · b680f84
1 parent 82efcfc
commit b680f84
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 20 deletions.
diff --git a/client/src/components/InputsModal/InputCheckboxGroup.tsx b/client/src/components/InputsModal/InputCheckboxGroup.tsx
@@ -16,7 +16,7 @@ export interface InputCheckboxGroupProps {
   requirement: TestInput;
   index: number;
   inputsMap: Map<string, unknown>;
-  setInputsMap: (map: Map<string, unknown>) => void;
+  setInputsMap: (map: Map<string, unknown>, edited?: boolean) => void;
 }
 
 const InputCheckboxGroup: FC<InputCheckboxGroupProps> = ({
@@ -64,7 +64,7 @@ const InputCheckboxGroup: FC<InputCheckboxGroupProps> = ({
   useEffect(() => {
     // Make sure starting values get set in inputsMap
     inputsMap.set(requirement.name, transformValuesToJSONArray(values));
-    setInputsMap(new Map(inputsMap));
+    setInputsMap(new Map(inputsMap), false);
   }, []);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {

diff --git a/client/src/components/InputsModal/InputOAuthCredentials.tsx b/client/src/components/InputsModal/InputOAuthCredentials.tsx
@@ -17,7 +17,7 @@ export interface InputOAuthCredentialsProps {
   requirement: TestInput;
   index: number;
   inputsMap: Map<string, unknown>;
-  setInputsMap: (map: Map<string, unknown>) => void;
+  setInputsMap: (map: Map<string, unknown>, edited?: boolean) => void;
 }
 
 export interface InputOAuthField {

diff --git a/client/src/components/InputsModal/InputRadioGroup.tsx b/client/src/components/InputsModal/InputRadioGroup.tsx
@@ -16,7 +16,7 @@ export interface InputRadioGroupProps {
   requirement: TestInput;
   index: number;
   inputsMap: Map<string, unknown>;
-  setInputsMap: (map: Map<string, unknown>) => void;
+  setInputsMap: (map: Map<string, unknown>, edited?: boolean) => void;
 }
 
 const InputRadioGroup: FC<InputRadioGroupProps> = ({

diff --git a/client/src/components/InputsModal/InputTextArea.tsx b/client/src/components/InputsModal/InputTextArea.tsx
@@ -9,7 +9,7 @@ export interface InputTextAreaProps {
   requirement: TestInput;
   index: number;
   inputsMap: Map<string, unknown>;
-  setInputsMap: (map: Map<string, unknown>) => void;
+  setInputsMap: (map: Map<string, unknown>, edited?: boolean) => void;
 }
 
 const InputTextArea: FC<InputTextAreaProps> = ({ requirement, index, inputsMap, setInputsMap }) => {

diff --git a/client/src/components/InputsModal/InputTextField.tsx b/client/src/components/InputsModal/InputTextField.tsx
@@ -9,7 +9,7 @@ export interface InputTextFieldProps {
   requirement: TestInput;
   index: number;
   inputsMap: Map<string, unknown>;
-  setInputsMap: (map: Map<string, unknown>) => void;
+  setInputsMap: (map: Map<string, unknown>, edited?: boolean) => void;
 }
 
 const InputTextField: FC<InputTextFieldProps> = ({

diff --git a/client/src/components/InputsModal/InputsModal.tsx b/client/src/components/InputsModal/InputsModal.tsx
@@ -13,7 +13,9 @@ import {
   Typography,
   Paper,
   Box,
+  IconButton,
 } from '@mui/material';
+import { Close } from '@mui/icons-material';
 import ReactMarkdown from 'react-markdown';
 import YAML from 'js-yaml';
 import { useSnackbar } from 'notistack';
@@ -23,6 +25,7 @@ import InputCheckboxGroup from './InputCheckboxGroup';
 import InputRadioGroup from './InputRadioGroup';
 import InputTextArea from './InputTextArea';
 import InputTextField from './InputTextField';
+import CustomTooltip from '../_common/CustomTooltip';
 import useStyles from './styles';
 
 export interface InputsModalProps {
@@ -60,6 +63,7 @@ const InputsModal: FC<InputsModalProps> = ({
   const { classes } = useStyles();
   const { enqueueSnackbar } = useSnackbar();
   const [open, setOpen] = React.useState<boolean>(true);
+  const [inputsEdited, setInputsEdited] = React.useState<boolean>(false);
   const [inputsMap, setInputsMap] = React.useState<Map<string, unknown>>(new Map());
   const [inputType, setInputType] = React.useState<string>('Field');
   const [baseInput, setBaseInput] = React.useState<string>('');
@@ -121,7 +125,7 @@ const InputsModal: FC<InputsModalProps> = ({
             requirement={requirement}
             index={index}
             inputsMap={inputsMap}
-            setInputsMap={setInputsMap}
+            setInputsMap={(newInputsMap) => handleSetInputsMap(newInputsMap)}
             key={`input-${index}`}
           />
         );
@@ -131,7 +135,9 @@ const InputsModal: FC<InputsModalProps> = ({
             requirement={requirement}
             index={index}
             inputsMap={inputsMap}
-            setInputsMap={setInputsMap}
+            setInputsMap={(newInputsMap, editStatus) =>
+              handleSetInputsMap(newInputsMap, editStatus)
+            }
             key={`input-${index}`}
           />
         );
@@ -141,7 +147,7 @@ const InputsModal: FC<InputsModalProps> = ({
             requirement={requirement}
             index={index}
             inputsMap={inputsMap}
-            setInputsMap={setInputsMap}
+            setInputsMap={(newInputsMap) => handleSetInputsMap(newInputsMap)}
             key={`input-${index}`}
           />
         );
@@ -151,7 +157,7 @@ const InputsModal: FC<InputsModalProps> = ({
             requirement={requirement}
             index={index}
             inputsMap={inputsMap}
-            setInputsMap={setInputsMap}
+            setInputsMap={(newInputsMap) => handleSetInputsMap(newInputsMap)}
             key={`input-${index}`}
           />
         );
@@ -161,7 +167,7 @@ const InputsModal: FC<InputsModalProps> = ({
             requirement={requirement}
             index={index}
             inputsMap={inputsMap}
-            setInputsMap={setInputsMap}
+            setInputsMap={(newInputsMap) => handleSetInputsMap(newInputsMap)}
             key={`input-${index}`}
           />
         );
@@ -188,6 +194,11 @@ const InputsModal: FC<InputsModalProps> = ({
     if (value !== null) setInputType(value);
   };
 
+  const handleSetInputsMap = (inputsMap: Map<string, unknown>, edited?: boolean) => {
+    setInputsMap(inputsMap);
+    setInputsEdited(inputsEdited || edited !== false); // explicit check for false values
+  };
+
   const handleSubmitKeydown = (e: React.KeyboardEvent<HTMLDivElement>) => {
     if (
       open &&
@@ -274,12 +285,15 @@ const InputsModal: FC<InputsModalProps> = ({
           inputsMap.set(change.name, change.value || '');
       });
     }
-    setInputsMap(new Map(inputsMap));
+    handleSetInputsMap(new Map(inputsMap), true);
   };
 
-  const closeModal = () => {
-    setOpen(false);
-    hideModal();
+  const closeModal = (edited = false) => {
+    // For external clicks, check if inputs have been edited first
+    if (!edited) {
+      setOpen(false);
+      hideModal();
+    }
   };
 
   return (
@@ -288,12 +302,27 @@ const InputsModal: FC<InputsModalProps> = ({
       fullWidth
       maxWidth="sm"
       onKeyDown={handleSubmitKeydown}
-      onClose={closeModal}
+      onClose={() => closeModal(inputsEdited)}
     >
       <DialogTitle component="div">
-        <Typography component="h1" variant="h6">
-          {title}
-        </Typography>
+        <Box display="flex" justifyContent="space-between">
+          <Typography component="h1" variant="h6">
+            {title}
+          </Typography>
+          <CustomTooltip title="Cancel - Inputs will be lost">
+            <IconButton
+              onClick={() => closeModal()}
+              aria-label="cancel"
+              sx={{
+                position: 'absolute',
+                right: 8,
+                top: 8,
+              }}
+            >
+              <Close />
+            </IconButton>
+          </CustomTooltip>
+        </Box>
       </DialogTitle>
       <DialogContent>
         <main>
@@ -366,7 +395,12 @@ const InputsModal: FC<InputsModalProps> = ({
           </ToggleButtonGroup>
         </Paper>
         <Box>
-          <Button color="secondary" data-testid="cancel-button" onClick={closeModal} sx={{ mr: 1 }}>
+          <Button
+            color="secondary"
+            data-testid="cancel-button"
+            onClick={() => closeModal()}
+            sx={{ mr: 1 }}
+          >
             Cancel
           </Button>
           <Button

diff --git a/codecov.yml b/codecov.yml
@@ -0,0 +1,32 @@
+coverage:
+  status:
+    project: off
+    patch: off
+
+flag_management:
+  default_rules:
+    carryforward: true;
+  individual_flags:
+    - name: backend
+      paths:
+        - config/
+        - dev_suites/
+        - lib/
+        - spec/
+      statuses:
+        - type: project
+          target: 90%
+          threshold: 1%
+        - type: patch
+          target: 90%
+          threshold: 1%
+    - name: frontend
+      paths:
+        - client/
+      statuses:
+        - type: project
+          target: auto
+          threshold: 1%
+        - type: patch
+          target: auto
+          threshold: 1%