FI-2040: Fix JSON parse error for OAuth inputs (#377)

* resolve oauth verification errors in json * remove extra comments * fix minor footer display bug * revert validation for json --------- Co-authored-by: Alyssa Wang <[email protected]>
inferno-framework · Aug 2, 2023 · 8eb2fc4 · 8eb2fc4
1 parent 990a1ab
commit 8eb2fc4
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 53 deletions.
diff --git a/client/src/components/Footer/Footer.tsx b/client/src/components/Footer/Footer.tsx
@@ -152,7 +152,13 @@ const Footer: FC<FooterProps> = ({ version, linkList }) => {
         maxHeight: `${footerHeight}px`,
       }}
     >
-      <Box display="flex" flexDirection="row" justifyContent="space-between" overflow="auto">
+      <Box
+        display="flex"
+        flexDirection="row"
+        justifyContent="space-between"
+        overflow="auto"
+        width="100%"
+      >
         <Box display="flex" alignItems="center" px={2}>
           <Link
             href="https://inferno-framework.github.io/inferno-core"

diff --git a/client/src/components/InputsModal/InputOAuthCredentials.tsx b/client/src/components/InputsModal/InputOAuthCredentials.tsx
@@ -35,19 +35,23 @@ const InputOAuthCredentials: FC<InputOAuthCredentialsProps> = ({
   setInputsMap,
 }) => {
   const { classes } = useStyles();
-  const template = {
-    access_token: '',
-    refresh_token: '',
-    expires_in: '',
-    client_id: '',
-    client_secret: '',
-    token_url: '',
-  };
+
+  // Convert OAuth string to Object
+  // OAuth should be an Object while in this component but should be converted to a string
+  // before being updated in the inputs map
   const oAuthCredentials = (
     inputsMap.get(requirement.name)
       ? JSON.parse(inputsMap.get(requirement.name) as string)
-      : template
+      : {
+          access_token: '',
+          refresh_token: '',
+          expires_in: '',
+          client_id: '',
+          client_secret: '',
+          token_url: '',
+        }
   ) as OAuthCredentials;
+
   const showRefreshDetails = !!oAuthCredentials.refresh_token;
 
   const oAuthFields: InputOAuthField[] = [

diff --git a/client/src/components/InputsModal/InputsModal.tsx b/client/src/components/InputsModal/InputsModal.tsx
@@ -79,6 +79,7 @@ const InputsModal: FC<InputsModalProps> = ({
         enqueueSnackbar(`Checkbox input incorrectly formatted: ${errorMessage}`, {
           variant: 'error',
         });
+        return true;
       }
     }
 
@@ -87,7 +88,7 @@ const InputsModal: FC<InputsModalProps> = ({
     if (input.type === 'oauth_credentials') {
       try {
         const oAuthJSON = JSON.parse(
-          (inputsMap.get(input.name) as string) || '{}'
+          (inputsMap.get(input.name) as string) || '{ "access_token": null }'
         ) as OAuthCredentials;
         const accessTokenIsEmpty = oAuthJSON.access_token === '';
         const refreshIsEmpty =
@@ -99,49 +100,13 @@ const InputsModal: FC<InputsModalProps> = ({
         enqueueSnackbar(`OAuth credentials incorrectly formatted: ${errorMessage}`, {
           variant: 'error',
         });
+        return true;
       }
     }
 
     return (!input.optional && !inputsMap.get(input.name)) || oAuthMissingRequiredInput;
   });
 
-  useEffect(() => {
-    inputsMap.clear();
-    inputs.forEach((requirement: TestInput) => {
-      inputsMap.set(
-        requirement.name,
-        sessionData.get(requirement.name) || (requirement.default as string) || ''
-      );
-    });
-    setInputsMap(new Map(inputsMap));
-  }, [inputs, sessionData]);
-
-  useEffect(() => {
-    setInvalidInput(false);
-    setBaseInput(serializeMap(inputsMap));
-  }, [inputType, open]);
-
-  const handleSubmitKeydown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (
-      open &&
-      e.key === 'Enter' &&
-      (e.metaKey || e.ctrlKey) &&
-      !missingRequiredInput &&
-      !invalidInput
-    ) {
-      submitClicked();
-    }
-  };
-
-  const submitClicked = () => {
-    const inputs_with_values: TestInput[] = [];
-    inputsMap.forEach((input_value, input_name) => {
-      inputs_with_values.push({ name: input_name, value: input_value, type: 'text' });
-    });
-    createTestRun(runnableType, runnableId, inputs_with_values);
-    closeModal();
-  };
-
   const instructions =
     inputInstructions ||
     `Please fill out required fields in order to run the ${runnableTypeReadable(runnableType)}.`;
@@ -201,12 +166,55 @@ const InputsModal: FC<InputsModalProps> = ({
     }
   });
 
+  useEffect(() => {
+    inputsMap.clear();
+    inputs.forEach((requirement: TestInput) => {
+      inputsMap.set(
+        requirement.name,
+        sessionData.get(requirement.name) || (requirement.default as string) || ''
+      );
+    });
+    setInputsMap(new Map(inputsMap));
+  }, [inputs, sessionData]);
+
+  useEffect(() => {
+    setInvalidInput(false);
+    setBaseInput(serializeMap(inputsMap));
+  }, [inputType, open]);
+
+  const handleInputTypeChange = (e: React.MouseEvent, value: string) => {
+    if (value !== null) setInputType(value);
+  };
+
+  const handleSubmitKeydown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (
+      open &&
+      e.key === 'Enter' &&
+      (e.metaKey || e.ctrlKey) &&
+      !missingRequiredInput &&
+      !invalidInput
+    ) {
+      submitClicked();
+    }
+  };
+
+  const submitClicked = () => {
+    const inputs_with_values: TestInput[] = [];
+    inputsMap.forEach((input_value, input_name) => {
+      inputs_with_values.push({ name: input_name, value: input_value, type: 'text' });
+    });
+    createTestRun(runnableType, runnableId, inputs_with_values);
+    closeModal();
+  };
+
   const serializeMap = (map: Map<string, unknown>): string => {
     const flatObj = inputs.map((requirement: TestInput) => {
       if (requirement.type === 'oauth_credentials') {
         return {
           ...requirement,
-          value: JSON.parse((map.get(requirement.name) as string) || '{}') as OAuthCredentials,
+          value: JSON.parse(
+            (map.get(requirement.name) as string) || '{ "access_token": "" }'
+          ) as OAuthCredentials,
         };
       } else if (requirement.type === 'radio') {
         const firstVal =
@@ -224,10 +232,6 @@ const InputsModal: FC<InputsModalProps> = ({
     return inputType === 'JSON' ? JSON.stringify(flatObj, null, 3) : YAML.dump(flatObj);
   };
 
-  const handleInputTypeChange = (e: React.MouseEvent, value: string) => {
-    if (value !== null) setInputType(value);
-  };
-
   const parseSerialChanges = (changes: string): TestInput[] | undefined => {
     let parsed: TestInput[];
     try {
@@ -236,6 +240,12 @@ const InputsModal: FC<InputsModalProps> = ({
       } else {
         parsed = YAML.load(changes) as TestInput[];
       }
+      // Convert OAuth input values to strings
+      parsed.forEach((input) => {
+        if (input.type === 'oauth_credentials') {
+          input.value = JSON.stringify(input.value);
+        }
+      });
       setInvalidInput(false);
       return parsed;
     } catch (e) {