Split workflow summary JSON into two on wide screens (#1037)

* Add new props to WorkflowSummaryJsonView (defaultTab: Default tab that is opened on load, hideTabToggle: Replaces the tab toggle with a static title when true)
* Add two static title JSON views to workflow summary (one for input and one for result) that show up only on wide screens
* Show the result by default for a completed workflow on narrower screens where we don't show both input and result

Author: adhityamamallan

src/views/workflow-summary/__tests__/workflow-summary.test.tsx

@@ -14,7 +14,9 @@ jest.mock('../workflow-summary-details/workflow-summary-details', () =>
 );
 
 jest.mock('../workflow-summary-json-view/workflow-summary-json-view', () =>
-  jest.fn(() => <div>MockWorkflowSummaryJsonView</div>)
+  jest.fn(({ hideTabToggle }) => (
+    <div>{`MockWorkflowSummaryJsonView ${hideTabToggle ? 'without toggle' : 'with toggle'}`}</div>
+  ))
 );
 
 jest.mock(
@@ -35,7 +37,7 @@ describe('WorkflowSummary', () => {
     workflowTab: 'summary',
   };
 
-  it('should render tab deatils, JSON view, and diagnostics banner', async () => {
+  it('should render tab details, JSON view, and diagnostics banner', async () => {
     render(
       <Suspense>
         <WorkflowSummary params={params} />
@@ -71,9 +73,16 @@ describe('WorkflowSummary', () => {
     expect(
       await screen.findByText('MockWorkflowSummaryDetails')
     ).toBeInTheDocument();
+
+    // This will be hidden on wide screens
     expect(
-      await screen.findByText('MockWorkflowSummaryJsonView')
-    ).toBeInTheDocument();
+      await screen.findAllByText('MockWorkflowSummaryJsonView with toggle')
+    ).toHaveLength(1);
+    // These will be hidden on narrow screens
+    expect(
+      await screen.findAllByText('MockWorkflowSummaryJsonView without toggle')
+    ).toHaveLength(2);
+
     expect(
       await screen.findByText('MockWorkflowSummaryDiagnosticsBanner')
     ).toBeInTheDocument();

src/views/workflow-summary/workflow-summary-json-view/__tests__/workflow-summary-json-view.test.tsx

@@ -97,6 +97,49 @@ describe('WorkflowSummaryJsonView Component', () => {
       queryByText('Workflow is archived, result is only available in')
     ).toBeInTheDocument();
   });
+
+  it('should default to input tab when defaultTab is not provided', () => {
+    const { getByText } = setup({});
+    // With the mocked copy button, we can check if the text contains input data
+    const copyButton = getByText(/Copy Button/);
+    expect(copyButton.innerHTML).toMatch(
+      losslessJsonStringify(losslessInputJson, null, '\t')
+    );
+  });
+
+  it('should initialize with input tab when defaultTab is "input"', () => {
+    const { getByText } = setup({ defaultTab: 'input' });
+    const copyButton = getByText(/Copy Button/);
+    expect(copyButton.innerHTML).toMatch(
+      losslessJsonStringify(losslessInputJson, null, '\t')
+    );
+  });
+
+  it('should initialize with result tab when defaultTab is "result"', () => {
+    const { getByText } = setup({ defaultTab: 'result' });
+    const copyButton = getByText(/Copy Button/);
+    expect(copyButton.innerHTML).toMatch(
+      losslessJsonStringify(losselessResultJson, null, '\t')
+    );
+  });
+
+  it('should hide segmented control and show static title when hideTabToggle is true with input tab', () => {
+    const { queryByText, getByText } = setup({
+      hideTabToggle: true,
+      defaultTab: 'input',
+    });
+    expect(queryByText('SegmentedControlRounded Mock')).not.toBeInTheDocument();
+    expect(getByText('Input')).toBeInTheDocument();
+  });
+
+  it('should hide segmented control and show static title when hideTabToggle is true with result tab', () => {
+    const { queryByText, getByText } = setup({
+      hideTabToggle: true,
+      defaultTab: 'result',
+    });
+    expect(queryByText('SegmentedControlRounded Mock')).not.toBeInTheDocument();
+    expect(getByText('Result')).toBeInTheDocument();
+  });
 });
 
 const losslessInputJson = {
@@ -113,13 +156,17 @@ const setup = ({
   resultJson = losselessResultJson,
   isWorkflowRunning = false,
   isArchived = false,
+  defaultTab,
+  hideTabToggle = false,
 }: Partial<Props>) => {
   return render(
     <WorkflowSummaryJsonView
       inputJson={inputJson}
       resultJson={resultJson}
       isWorkflowRunning={isWorkflowRunning}
       isArchived={isArchived}
+      defaultTab={defaultTab}
+      hideTabToggle={hideTabToggle}
       domain="test-domain"
       cluster="test-cluster"
       runId="test-run-id"

src/views/workflow-summary/workflow-summary-json-view/workflow-summary-json-view.constants.tsx

@@ -1,10 +1,6 @@
-export const jsonViewTabsOptions = [
-  {
-    key: 'input',
-    label: 'Input',
-  },
-  {
-    key: 'result',
-    label: 'Result',
-  },
-];
+import { type WorkflowSummaryJsonTab } from './workflow-summary-json-view.types';
+
+export const jsonTabLabelMap: Record<WorkflowSummaryJsonTab, string> = {
+  input: 'Input',
+  result: 'Result',
+};

src/views/workflow-summary/workflow-summary-json-view/workflow-summary-json-view.styles.ts

@@ -6,6 +6,9 @@ import type {
 } from '@/hooks/use-styletron-classes';
 
 const cssStylesObj = {
+  jsonStaticTitle: (theme) => ({
+    ...theme.typography.LabelSmall,
+  }),
   jsonViewContainer: (theme) => ({
     padding: theme.sizing.scale600,
     backgroundColor: theme.colors.backgroundSecondary,

src/views/workflow-summary/workflow-summary-json-view/workflow-summary-json-view.tsx

@@ -10,9 +10,12 @@ import SegmentedControlRounded from '@/components/segmented-control-rounded/segm
 import useStyletronClasses from '@/hooks/use-styletron-classes';
 import losslessJsonStringify from '@/utils/lossless-json-stringify';
 
-import { jsonViewTabsOptions } from './workflow-summary-json-view.constants';
+import { jsonTabLabelMap } from './workflow-summary-json-view.constants';
 import { cssStyles, overrides } from './workflow-summary-json-view.styles';
-import type { Props } from './workflow-summary-json-view.types';
+import type {
+  Props,
+  WorkflowSummaryJsonTab,
+} from './workflow-summary-json-view.types';
 
 export default function WorkflowSummaryJsonView({
   inputJson,
@@ -23,6 +26,8 @@ export default function WorkflowSummaryJsonView({
   cluster,
   runId,
   workflowId,
+  defaultTab = 'input',
+  hideTabToggle,
 }: Props) {
   const { cls } = useStyletronClasses(cssStyles);
   const jsonMap: Record<string, PrettyJsonValue> = useMemo(
@@ -32,9 +37,8 @@ export default function WorkflowSummaryJsonView({
     }),
     [inputJson, resultJson]
   );
-  const [activeTab, setActiveTab] = useState<string>(
-    jsonViewTabsOptions[0].key
-  );
+  const [activeTab, setActiveTab] =
+    useState<WorkflowSummaryJsonTab>(defaultTab);
 
   const textToCopy = useMemo(() => {
     return losslessJsonStringify(jsonMap[activeTab], null, '\t');
@@ -43,11 +47,23 @@ export default function WorkflowSummaryJsonView({
   return (
     <div className={cls.jsonViewContainer}>
       <div className={cls.jsonViewHeader}>
-        <SegmentedControlRounded
-          activeKey={activeTab}
-          options={jsonViewTabsOptions}
-          onChange={({ activeKey }) => setActiveTab(activeKey.toString())}
-        />
+        {hideTabToggle ? (
+          <div className={cls.jsonStaticTitle}>
+            {jsonTabLabelMap[activeTab]}
+          </div>
+        ) : (
+          <SegmentedControlRounded
+            activeKey={activeTab}
+            options={Object.entries(jsonTabLabelMap).map(([key, label]) => ({
+              key,
+              label,
+            }))}
+            onChange={({ activeKey }) =>
+              setActiveTab(activeKey === 'result' ? 'result' : 'input')
+            }
+          />
+        )}
+
         <CopyTextButton
           textToCopy={textToCopy}
           overrides={overrides.copyButton}

src/views/workflow-summary/workflow-summary-json-view/workflow-summary-json-view.types.ts

@@ -1,9 +1,13 @@
 import { type PrettyJsonValue } from '@/components/pretty-json/pretty-json.types';
 import { type WorkflowPageParams } from '@/views/workflow-page/workflow-page.types';
 
+export type WorkflowSummaryJsonTab = 'input' | 'result';
+
 export type Props = {
   inputJson: PrettyJsonValue;
   resultJson: PrettyJsonValue;
   isWorkflowRunning: boolean;
   isArchived: boolean;
+  defaultTab?: WorkflowSummaryJsonTab;
+  hideTabToggle?: boolean;
 } & WorkflowPageParams;

src/views/workflow-summary/workflow-summary.styles.ts

@@ -15,9 +15,19 @@ const cssStylesObj = {
     flexDirection: 'column',
     gap: theme.sizing.scale800,
   }),
-  jsonArea: {
+  jsonPanel: (theme) => ({
     flex: '1 0 300px',
-  },
+    [theme.mediaQuery.large]: {
+      display: 'none',
+    },
+  }),
+  jsonPanelWide: (theme) => ({
+    display: 'none',
+    [theme.mediaQuery.large]: {
+      display: 'block',
+      flex: '1 0 300px',
+    },
+  }),
 } satisfies StyletronCSSObject;
 
 export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> =

src/views/workflow-summary/workflow-summary.tsx

@@ -24,6 +24,7 @@ import getWorkflowResultJson from './helpers/get-workflow-result-json';
 import WorkflowSummaryDetails from './workflow-summary-details/workflow-summary-details';
 import WorkflowSummaryDiagnosticsBanner from './workflow-summary-diagnostics-banner/workflow-summary-diagnostics-banner';
 import WorkflowSummaryJsonView from './workflow-summary-json-view/workflow-summary-json-view';
+import { type Props as JsonViewProps } from './workflow-summary-json-view/workflow-summary-json-view.types';
 import { cssStyles } from './workflow-summary.styles';
 
 export default function WorkflowSummary({
@@ -84,6 +85,17 @@ export default function WorkflowSummary({
     !closeEvent.attributes ||
     !getWorkflowIsCompleted(closeEvent.attributes);
 
+  const baseJsonViewProps: JsonViewProps = {
+    inputJson:
+      formattedStartEvent && 'input' in formattedStartEvent
+        ? (formattedStartEvent?.input as PrettyJsonValue)
+        : [],
+    resultJson,
+    isWorkflowRunning,
+    isArchived,
+    ...params,
+  };
+
   return (
     <PageSection>
       <div className={cls.pageContainer}>
@@ -97,22 +109,27 @@ export default function WorkflowSummary({
             workflowDetails={workflowDetails}
             decodedPageUrlParams={decodedParams}
           />
-          {/*  <div>Taskslist</div> */}
         </div>
-        <div className={cls.jsonArea}>
+        {/* On narrow screens */}
+        <div className={cls.jsonPanel}>
+          <WorkflowSummaryJsonView
+            {...baseJsonViewProps}
+            defaultTab={isWorkflowRunning ? 'input' : 'result'}
+          />
+        </div>
+        {/* On wide screens */}
+        <div className={cls.jsonPanelWide}>
+          <WorkflowSummaryJsonView
+            {...baseJsonViewProps}
+            defaultTab="input"
+            hideTabToggle
+          />
+        </div>
+        <div className={cls.jsonPanelWide}>
           <WorkflowSummaryJsonView
-            inputJson={
-              formattedStartEvent && 'input' in formattedStartEvent
-                ? (formattedStartEvent?.input as PrettyJsonValue)
-                : []
-            }
-            resultJson={resultJson}
-            isWorkflowRunning={isWorkflowRunning}
-            isArchived={isArchived}
-            domain={params.domain}
-            cluster={params.cluster}
-            runId={params.runId}
-            workflowId={params.workflowId}
+            {...baseJsonViewProps}
+            defaultTab="result"
+            hideTabToggle
           />
         </div>
       </div>