FI-2053: Fix inputs dialog overflow (#382)

* adjust word breaksand wraps * remove newlines from descriptions * change dialog size * remove max line iwdth for yaml * reduce json spacing --------- Co-authored-by: Alyssa Wang <awang@mitre.org>
inferno-framework · Aug 14, 2023 · 82efcfc · 82efcfc
1 parent 43c35c4
commit 82efcfc
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/client/src/components/InputsModal/InputsModal.tsx b/client/src/components/InputsModal/InputsModal.tsx
@@ -211,9 +211,12 @@ const InputsModal: FC<InputsModalProps> = ({
 
   const serializeMap = (map: Map<string, unknown>): string => {
     const flatObj = inputs.map((requirement: TestInput) => {
+      // Parse out \n chars from descriptions
+      const parsedDescription = requirement.description?.replaceAll('\n', ' ').trim();
       if (requirement.type === 'oauth_credentials') {
         return {
           ...requirement,
+          description: parsedDescription,
           value: JSON.parse(
             (map.get(requirement.name) as string) || '{ "access_token": "" }'
           ) as OAuthCredentials,
@@ -225,13 +228,20 @@ const InputsModal: FC<InputsModalProps> = ({
             : '';
         return {
           ...requirement,
+          description: parsedDescription,
           value: map.get(requirement.name) || requirement.default || firstVal,
         };
       } else {
-        return { ...requirement, value: map.get(requirement.name) || '' };
+        return {
+          ...requirement,
+          description: parsedDescription,
+          value: map.get(requirement.name) || '',
+        };
       }
     });
-    return inputType === 'JSON' ? JSON.stringify(flatObj, null, 3) : YAML.dump(flatObj);
+    return inputType === 'JSON'
+      ? JSON.stringify(flatObj, null, 2)
+      : YAML.dump(flatObj, { lineWidth: -1 });
   };
 
   const parseSerialChanges = (changes: string): TestInput[] | undefined => {
@@ -287,7 +297,7 @@ const InputsModal: FC<InputsModalProps> = ({
       </DialogTitle>
       <DialogContent>
         <main>
-          <DialogContentText component="div">
+          <DialogContentText component="div" style={{ wordBreak: 'break-word' }}>
             <ReactMarkdown>
               {instructions +
                 (inputType === 'Field'

diff --git a/client/src/components/RequestDetailModal/CodeBlock.tsx b/client/src/components/RequestDetailModal/CodeBlock.tsx
@@ -22,7 +22,9 @@ const CodeBlock: FC<CodeBlockProps> = ({ body, headers }) => {
         data-testid="code-block"
       >
         <pre data-testid="pre">
-          <code data-testid="code">{formatBodyIfJSON(body, headers)}</code>
+          <code data-testid="code" className={classes.code}>
+            {formatBodyIfJSON(body, headers)}
+          </code>
         </pre>
       </Container>
     );

diff --git a/client/src/components/RequestDetailModal/styles.tsx b/client/src/components/RequestDetailModal/styles.tsx
@@ -23,6 +23,9 @@ export default makeStyles()((_theme: Theme) => ({
     fontSize: 'small',
     marginTop: '10px',
   },
+  code: {
+    textWrap: 'wrap',
+  },
   inputIcon: {
     float: 'right',
     verticalAlign: 'middle',