Simplified code block

project-koku · Sep 30, 2023 · 997e5eb · 997e5eb
1 parent 6a55090
commit 997e5eb
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 48 deletions.
diff --git a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.scss b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.scss
@@ -1,12 +1,5 @@
 @import url("~@patternfly/patternfly/base/patternfly-variables.css");
 
-.leftCodeBlockOverride {
-  .pf-c-code-block__header,
-  .pf-c-code-block__content {
-    padding-right: 0;
-  }
-}
-
 .optimizationsOverride {
   div {
     display: block;

diff --git a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.styles.ts b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.styles.ts
@@ -14,9 +14,4 @@ export const styles = {
   currentActions: {
     height: '36px',
   },
-  rightCodeBlock: {
-    display: 'flex',
-    flexGrow: 1,
-    flexDirection: 'column',
-  },
 } as { [className: string]: React.CSSProperties };
diff --git a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownConfiguration.tsx b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownConfiguration.tsx
@@ -91,7 +91,17 @@ const OptimizationsBreakdownConfiguration: React.FC<OptimizationsBreakdownConfig
     }
     return (
       <CodeBlock actions={getEmptyActions()}>
-        <CodeBlockCode>{code}</CodeBlockCode>
+        <CodeBlockCode>
+          {hasMissingValue('current') ? (
+            <span style={styles.codeBlock}>
+              <span>{getWarningConfig('current')}</span>
+              <span>&nbsp;</span>
+              <span>{code}</span>
+            </span>
+          ) : (
+            code
+          )}
+        </CodeBlockCode>
       </CodeBlock>
     );
   };
@@ -149,7 +159,17 @@ const OptimizationsBreakdownConfiguration: React.FC<OptimizationsBreakdownConfig
     }
     return (
       <CodeBlock actions={getRecommendedActions()}>
-        <CodeBlockCode>{code}</CodeBlockCode>
+        <CodeBlockCode>
+          {hasMissingValue('config') ? (
+            <span style={styles.codeBlock}>
+              <span>{getWarningConfig('config')}</span>
+              <span>&nbsp;</span>
+              <span>{code}</span>
+            </span>
+          ) : (
+            code
+          )}
+        </CodeBlockCode>
       </CodeBlock>
     );
   };
@@ -239,8 +259,8 @@ const OptimizationsBreakdownConfiguration: React.FC<OptimizationsBreakdownConfig
     return `${spacing}${value}`;
   };
 
-  const getWarningConfig = () => {
-    const config = getConfig('config', false);
+  const getWarningConfig = (key: 'current' | 'config') => {
+    const config = getConfig(key, false);
 
     const getWarning = value => {
       return !value ? <ExclamationTriangleIcon color="orange" /> : null;
@@ -267,18 +287,6 @@ const OptimizationsBreakdownConfiguration: React.FC<OptimizationsBreakdownConfig
     );
   };
 
-  const getWarningCodeBlock = () => {
-    const code = getWarningConfig();
-    if (code === null) {
-      return null;
-    }
-    return (
-      <CodeBlock actions={getEmptyActions()}>
-        <CodeBlockCode>{code}</CodeBlockCode>
-      </CodeBlock>
-    );
-  };
-
   const handleClipboardCopyOnClick = (event, text) => {
     navigator.clipboard.writeText(text.toString());
     setCopied(true);
@@ -308,16 +316,7 @@ const OptimizationsBreakdownConfiguration: React.FC<OptimizationsBreakdownConfig
               {intl.formatMessage(messages.currentConfiguration)}
             </Title>
           </CardTitle>
-          <CardBody>
-            {hasMissingValue('current') ? (
-              <div style={styles.codeBlock}>
-                <div className="leftCodeBlockOverride">{getWarningCodeBlock()}</div>
-                <div style={styles.rightCodeBlock}>{getCurrentConfigCodeBlock()}</div>
-              </div>
-            ) : (
-              getRecommendedConfigCodeBlock()
-            )}
-          </CardBody>
+          <CardBody>{getCurrentConfigCodeBlock()}</CardBody>
         </Card>
       </GridItem>
       <GridItem xl={6}>
@@ -327,16 +326,7 @@ const OptimizationsBreakdownConfiguration: React.FC<OptimizationsBreakdownConfig
               {intl.formatMessage(messages.recommendedConfiguration)}
             </Title>
           </CardTitle>
-          <CardBody>
-            {hasMissingValue('config') ? (
-              <div style={styles.codeBlock}>
-                <div className="leftCodeBlockOverride">{getWarningCodeBlock()}</div>
-                <div style={styles.rightCodeBlock}>{getRecommendedConfigCodeBlock()}</div>
-              </div>
-            ) : (
-              getRecommendedConfigCodeBlock()
-            )}
-          </CardBody>
+          <CardBody>{getRecommendedConfigCodeBlock()}</CardBody>
         </Card>
       </GridItem>
     </Grid>