From 49a0ba15013b00419a63c26d5a122c09ef4c0ee9 Mon Sep 17 00:00:00 2001
From: Jordan Krage <jmank88@gmail.com>
Date: Tue, 29 Nov 2022 20:06:49 -0600
Subject: [PATCH 1/4] dynamic config for legacy vs. TOML

---
 .../ConfigurationCard/ConfigurationCard.tsx   |  2 +-
 .../ConfigurationV2Card.tsx                   | 24 +++++++++++++++----
 .../Configuration/ConfigurationView.test.tsx  |  2 +-
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/screens/Configuration/ConfigurationCard/ConfigurationCard.tsx b/src/screens/Configuration/ConfigurationCard/ConfigurationCard.tsx
index b1bb77ad..623eda0a 100644
--- a/src/screens/Configuration/ConfigurationCard/ConfigurationCard.tsx
+++ b/src/screens/Configuration/ConfigurationCard/ConfigurationCard.tsx
@@ -44,7 +44,7 @@ export const ConfigurationCard = () => {
 
   return (
     <KeyValueListCard
-      title="ENV Configuration (legacy)"
+      title="ENV Configuration"
       error={error?.message}
       loading={loading}
       entries={entries}
diff --git a/src/screens/Configuration/ConfigurationV2Card/ConfigurationV2Card.tsx b/src/screens/Configuration/ConfigurationV2Card/ConfigurationV2Card.tsx
index bb23057d..a7175dd1 100644
--- a/src/screens/Configuration/ConfigurationV2Card/ConfigurationV2Card.tsx
+++ b/src/screens/Configuration/ConfigurationV2Card/ConfigurationV2Card.tsx
@@ -24,6 +24,22 @@ export const ConfigurationV2Card = () => {
     fetchPolicy: 'cache-and-network',
   })
 
+  if (data?.configv2.effective == 'N/A') {
+    return (
+      <>
+        <Grid item xs={12}>
+          <TOMLCard
+            title="TOML Configuration (config dump)"
+            error={error?.message}
+            loading={loading}
+            toml={data?.configv2.user}
+            showHead
+          />
+        </Grid>
+      </>
+    )
+  }
+
   return (
     <>
       <Grid item xs={12}>
@@ -77,14 +93,14 @@ const TOMLCard = ({ loading, toml, error = '', title }: Props) => {
     return <FetchingRow />
   }
 
-  let styles = {marginLeft: '1em'};
+  const styles = { marginLeft: '1em' }
 
   return (
     <Card>
       {title && <CardHeader title={title} />}
-        <pre style={styles}>
-          <code>{toml}</code>
-        </pre>
+      <pre style={styles}>
+        <code>{toml}</code>
+      </pre>
     </Card>
   )
 }
diff --git a/src/screens/Configuration/ConfigurationView.test.tsx b/src/screens/Configuration/ConfigurationView.test.tsx
index 2cc555e6..ee15da94 100644
--- a/src/screens/Configuration/ConfigurationView.test.tsx
+++ b/src/screens/Configuration/ConfigurationView.test.tsx
@@ -18,7 +18,7 @@ describe('ConfigurationView', () => {
       </BuildInfoProvider>,
     )
 
-    expect(await findByText('ENV Configuration (legacy)')).toBeInTheDocument()
+    expect(await findByText('ENV Configuration')).toBeInTheDocument()
     expect(await findByText('Node')).toBeInTheDocument()
     expect(await findByText('Job Runs')).toBeInTheDocument()
     expect(await findByText('Logging')).toBeInTheDocument()

From 20f23147d7f79581693d47af3bff50381c2a7098 Mon Sep 17 00:00:00 2001
From: Jordan Krage <jmank88@gmail.com>
Date: Wed, 30 Nov 2022 08:47:04 -0600
Subject: [PATCH 2/4] TOMLCard syntax highlighting

---
 .../ConfigurationV2Card/ConfigurationV2Card.tsx    | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/screens/Configuration/ConfigurationV2Card/ConfigurationV2Card.tsx b/src/screens/Configuration/ConfigurationV2Card/ConfigurationV2Card.tsx
index a7175dd1..cd430ba0 100644
--- a/src/screens/Configuration/ConfigurationV2Card/ConfigurationV2Card.tsx
+++ b/src/screens/Configuration/ConfigurationV2Card/ConfigurationV2Card.tsx
@@ -8,6 +8,9 @@ import TableCell from '@material-ui/core/TableCell'
 import TableRow from '@material-ui/core/TableRow'
 import Grid from '@material-ui/core/Grid'
 
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { prism } from 'react-syntax-highlighter/dist/esm/styles/prism'
+
 export const CONFIG_V2_QUERY = gql`
   query FetchConfigV2 {
     configv2 {
@@ -29,7 +32,7 @@ export const ConfigurationV2Card = () => {
       <>
         <Grid item xs={12}>
           <TOMLCard
-            title="TOML Configuration (config dump)"
+            title="TOML Configuration (v2 config dump)"
             error={error?.message}
             loading={loading}
             toml={data?.configv2.user}
@@ -93,14 +96,13 @@ const TOMLCard = ({ loading, toml, error = '', title }: Props) => {
     return <FetchingRow />
   }
 
-  const styles = { marginLeft: '1em' }
-
+    //TODO expandable, start collapsed should be possible
   return (
     <Card>
       {title && <CardHeader title={title} />}
-      <pre style={styles}>
-        <code>{toml}</code>
-      </pre>
+      <SyntaxHighlighter language="toml" style={prism}>
+        {toml}
+      </SyntaxHighlighter>
     </Card>
   )
 }

From 2320932d2e11dda1382f23c41ee2709e109442d5 Mon Sep 17 00:00:00 2001
From: Jordan Krage <jmank88@gmail.com>
Date: Wed, 30 Nov 2022 09:23:05 -0600
Subject: [PATCH 3/4] convert TOMLCards to ExpansionPanels

---
 .../ConfigurationV2Card.tsx                   | 81 ++++++++++++-------
 1 file changed, 50 insertions(+), 31 deletions(-)

diff --git a/src/screens/Configuration/ConfigurationV2Card/ConfigurationV2Card.tsx b/src/screens/Configuration/ConfigurationV2Card/ConfigurationV2Card.tsx
index cd430ba0..f3dc04f9 100644
--- a/src/screens/Configuration/ConfigurationV2Card/ConfigurationV2Card.tsx
+++ b/src/screens/Configuration/ConfigurationV2Card/ConfigurationV2Card.tsx
@@ -7,9 +7,13 @@ import CardHeader from '@material-ui/core/CardHeader'
 import TableCell from '@material-ui/core/TableCell'
 import TableRow from '@material-ui/core/TableRow'
 import Grid from '@material-ui/core/Grid'
+import ExpansionPanel from '@material-ui/core/ExpansionPanel'
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
 
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { prism } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
 
 export const CONFIG_V2_QUERY = gql`
   query FetchConfigV2 {
@@ -31,13 +35,16 @@ export const ConfigurationV2Card = () => {
     return (
       <>
         <Grid item xs={12}>
-          <TOMLCard
-            title="TOML Configuration (v2 config dump)"
-            error={error?.message}
-            loading={loading}
-            toml={data?.configv2.user}
-            showHead
-          />
+          <Card>
+            <CardHeader title="TOML Configuration" />
+            <TOMLPanel
+              title="v2 config dump"
+              error={error?.message}
+              loading={loading}
+              toml={data?.configv2.user}
+              showHead
+            />
+          </Card>
         </Grid>
       </>
     )
@@ -46,22 +53,24 @@ export const ConfigurationV2Card = () => {
   return (
     <>
       <Grid item xs={12}>
-        <TOMLCard
-          title="TOML Configuration (user-specified)"
-          error={error?.message}
-          loading={loading}
-          toml={data?.configv2.user}
-          showHead
-        />
-      </Grid>
-      <Grid item xs={12}>
-        <TOMLCard
-          title="TOML Configuration (effective)"
-          error={error?.message}
-          loading={loading}
-          toml={data?.configv2.effective}
-          showHead
-        />
+        <Card>
+          <CardHeader title="TOML Configuration" />
+          <TOMLPanel
+            title="User specified:"
+            error={error?.message}
+            loading={loading}
+            toml={data?.configv2.user}
+            showHead
+            expanded={true}
+          />
+          <TOMLPanel
+            title="Effective (with defaults):"
+            error={error?.message}
+            loading={loading}
+            toml={data?.configv2.effective}
+            showHead
+          />
+        </Card>
       </Grid>
     </>
   )
@@ -73,6 +82,7 @@ interface Props {
   showHead?: boolean
   title?: string
   error?: string
+  expanded?: boolean
 }
 
 const SpanRow: React.FC = ({ children }) => (
@@ -87,7 +97,7 @@ const FetchingRow = () => <SpanRow>...</SpanRow>
 
 const ErrorRow: React.FC = ({ children }) => <SpanRow>{children}</SpanRow>
 
-const TOMLCard = ({ loading, toml, error = '', title }: Props) => {
+const TOMLPanel = ({ loading, toml, error = '', title, expanded }: Props) => {
   if (error) {
     return <ErrorRow>{error}</ErrorRow>
   }
@@ -96,13 +106,22 @@ const TOMLCard = ({ loading, toml, error = '', title }: Props) => {
     return <FetchingRow />
   }
 
-    //TODO expandable, start collapsed should be possible
+  if (!title) {
+    title = 'TOML'
+  }
+
+  const styles = { display: 'block' }
+
   return (
-    <Card>
-      {title && <CardHeader title={title} />}
-      <SyntaxHighlighter language="toml" style={prism}>
-        {toml}
-      </SyntaxHighlighter>
-    </Card>
+    <ExpansionPanel defaultExpanded={expanded}>
+      <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+        {title}
+      </ExpansionPanelSummary>
+      <ExpansionPanelDetails style={styles}>
+        <SyntaxHighlighter language="toml" style={prism}>
+          {toml}
+        </SyntaxHighlighter>
+      </ExpansionPanelDetails>
+    </ExpansionPanel>
   )
 }

From 19eeddadcbd9e4b9539ac85d8b0d9e61a7ab8648 Mon Sep 17 00:00:00 2001
From: Jordan Krage <jmank88@gmail.com>
Date: Wed, 30 Nov 2022 09:42:03 -0600
Subject: [PATCH 4/4] wrap TOMLPanel in Typography; conditional ENV headers

---
 .../ConfigurationCard/ConfigurationCard.tsx   |  3 ++-
 .../ConfigurationV2Card.tsx                   | 25 +++++++++++--------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/screens/Configuration/ConfigurationCard/ConfigurationCard.tsx b/src/screens/Configuration/ConfigurationCard/ConfigurationCard.tsx
index 623eda0a..a3dd781d 100644
--- a/src/screens/Configuration/ConfigurationCard/ConfigurationCard.tsx
+++ b/src/screens/Configuration/ConfigurationCard/ConfigurationCard.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import { gql, useQuery } from '@apollo/client'
 
 import { KeyValueListCard } from 'src/components/Cards/KeyValueListCard'
+import {isNil} from "lodash";
 
 export const CONFIG__ITEMS_FIELDS = gql`
   fragment Config_ItemsFields on ConfigItem {
@@ -48,7 +49,7 @@ export const ConfigurationCard = () => {
       error={error?.message}
       loading={loading}
       entries={entries}
-      showHead
+      showHead={isNil(error?.message)}
     />
   )
 }
diff --git a/src/screens/Configuration/ConfigurationV2Card/ConfigurationV2Card.tsx b/src/screens/Configuration/ConfigurationV2Card/ConfigurationV2Card.tsx
index f3dc04f9..228f9d9b 100644
--- a/src/screens/Configuration/ConfigurationV2Card/ConfigurationV2Card.tsx
+++ b/src/screens/Configuration/ConfigurationV2Card/ConfigurationV2Card.tsx
@@ -14,6 +14,7 @@ import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { prism } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
+import Typography from '@material-ui/core/Typography'
 
 export const CONFIG_V2_QUERY = gql`
   query FetchConfigV2 {
@@ -38,7 +39,7 @@ export const ConfigurationV2Card = () => {
           <Card>
             <CardHeader title="TOML Configuration" />
             <TOMLPanel
-              title="v2 config dump"
+              title="V2 config dump:"
               error={error?.message}
               loading={loading}
               toml={data?.configv2.user}
@@ -113,15 +114,17 @@ const TOMLPanel = ({ loading, toml, error = '', title, expanded }: Props) => {
   const styles = { display: 'block' }
 
   return (
-    <ExpansionPanel defaultExpanded={expanded}>
-      <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
-        {title}
-      </ExpansionPanelSummary>
-      <ExpansionPanelDetails style={styles}>
-        <SyntaxHighlighter language="toml" style={prism}>
-          {toml}
-        </SyntaxHighlighter>
-      </ExpansionPanelDetails>
-    </ExpansionPanel>
+    <Typography>
+      <ExpansionPanel defaultExpanded={expanded}>
+        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+          {title}
+        </ExpansionPanelSummary>
+        <ExpansionPanelDetails style={styles}>
+          <SyntaxHighlighter language="toml" style={prism}>
+            {toml}
+          </SyntaxHighlighter>
+        </ExpansionPanelDetails>
+      </ExpansionPanel>
+    </Typography>
   )
 }