feat: Add buttons to toggle between legacy and new views in Workflow History (#1133)

* Add buttons next to "Workflow History" to toggle between legacy and new History views
* Add tooltips on these buttons, explaining the changes and providing links to share feedback

Signed-off-by: Adhitya Mamallan <adhitya.mamallan@uber.com>

Author: adhityamamallan

src/views/workflow-history-v2/config/workflow-history-switch-to-v1-button-tooltip-content.config.ts

@@ -0,0 +1,23 @@
+import { MdOutlineChat } from 'react-icons/md';
+
+import { type ViewToggleTooltipContentConfig } from '../workflow-history-view-toggle-button/workflow-history-view-toggle-button.types';
+
+const workflowHistorySwitchToV1ButtonTooltipContentConfig: ViewToggleTooltipContentConfig =
+  {
+    content: [
+      `The new History view provides a more compact overview with a table-based 
+          format designed for information density and easier scanning, helping you 
+          find important events faster.`,
+      `Please feel free to share any feedback if you encounter anything 
+          that seems suboptimal in the new History view.`,
+    ],
+    linkButtons: [
+      {
+        label: 'Provide feedback',
+        startEnhancer: MdOutlineChat,
+        href: 'https://cloud-native.slack.com/archives/C09J2FQ7XU3',
+      },
+    ],
+  };
+
+export default workflowHistorySwitchToV1ButtonTooltipContentConfig;

src/views/workflow-history-v2/workflow-history-header/__tests__/workflow-history-header.test.tsx

@@ -23,6 +23,11 @@ jest.mock(
     ))
 );
 
+jest.mock(
+  '../../workflow-history-switch-to-v1-button/workflow-history-switch-to-v1-button',
+  () => jest.fn(() => <button>Switch to V1</button>)
+);
+
 describe(WorkflowHistoryHeader.name, () => {
   it('should render the header with title', () => {
     setup();
@@ -34,6 +39,11 @@ describe(WorkflowHistoryHeader.name, () => {
     expect(screen.getByText('Export JSON')).toBeInTheDocument();
   });
 
+  it('should render switch to V1 button', () => {
+    setup();
+    expect(screen.getByText('Switch to V1')).toBeInTheDocument();
+  });
+
   it('should render segmented control with grouped and ungrouped segments', () => {
     setup();
     expect(screen.getByText('Grouped')).toBeInTheDocument();

src/views/workflow-history-v2/workflow-history-header/workflow-history-header.styles.ts

@@ -51,6 +51,19 @@ export const styled = {
       },
     })
   ),
+  Heading: createStyled(
+    'div',
+    ({ $theme }: { $theme: Theme }): StyleObject => ({
+      display: 'flex',
+      gap: $theme.sizing.scale600,
+      ...$theme.typography.HeadingXSmall,
+      flexDirection: 'column',
+      [$theme.mediaQuery.medium]: {
+        alignItems: 'center',
+        flexDirection: 'row',
+      },
+    })
+  ),
   Actions: createStyled(
     'div',
     ({ $theme }: { $theme: Theme }): StyleObject => ({

src/views/workflow-history-v2/workflow-history-header/workflow-history-header.tsx

@@ -4,13 +4,14 @@ import { Button } from 'baseui/button';
 import { Filter } from 'baseui/icon';
 import { StatefulPopover } from 'baseui/popover';
 import { SegmentedControl, Segment } from 'baseui/segmented-control';
-import { HeadingXSmall } from 'baseui/typography';
 import { useInView } from 'react-intersection-observer';
 
 import PageSection from '@/components/page-section/page-section';
 import WorkflowHistoryExportJsonButton from '@/views/workflow-history/workflow-history-export-json-button/workflow-history-export-json-button';
 import WorkflowHistoryFiltersMenu from '@/views/workflow-history-v2/workflow-history-filters-menu/workflow-history-filters-menu';
 
+import WorkflowHistorySwitchToV1Button from '../workflow-history-switch-to-v1-button/workflow-history-switch-to-v1-button';
+
 import { overrides, styled } from './workflow-history-header.styles';
 import { type Props } from './workflow-history-header.types';
 
@@ -49,7 +50,10 @@ export default function WorkflowHistoryHeader({
       >
         <PageSection>
           <styled.Header>
-            <HeadingXSmall>Workflow history</HeadingXSmall>
+            <styled.Heading>
+              Workflow history
+              <WorkflowHistorySwitchToV1Button />
+            </styled.Heading>
             <styled.Actions>
               <WorkflowHistoryExportJsonButton {...wfHistoryRequestArgs} />
               <SegmentedControl

src/views/workflow-history-v2/workflow-history-switch-to-v1-button/__tests__/workflow-history-switch-to-v1-button.test.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+
+import { HttpResponse } from 'msw';
+
+import { render, screen, userEvent, waitFor } from '@/test-utils/rtl';
+
+import { WorkflowHistoryContext } from '@/views/workflow-history/workflow-history-context-provider/workflow-history-context-provider';
+
+import WorkflowHistorySwitchToV1Button from '../workflow-history-switch-to-v1-button';
+
+jest.mock(
+  '../../workflow-history-view-toggle-button/workflow-history-view-toggle-button',
+  () =>
+    jest.fn(({ onClick, label }) => <button onClick={onClick}>{label}</button>)
+);
+
+describe(WorkflowHistorySwitchToV1Button.name, () => {
+  it('should render button when config is OPT_IN', async () => {
+    setup({ configValue: 'OPT_IN' });
+
+    expect(
+      await screen.findByText('Switch to the legacy History view')
+    ).toBeInTheDocument();
+  });
+
+  it('should render button when config is OPT_OUT', async () => {
+    setup({ configValue: 'OPT_OUT' });
+
+    expect(
+      await screen.findByText('Switch to the legacy History view')
+    ).toBeInTheDocument();
+  });
+
+  it('should not render when config is DISABLED', async () => {
+    setup({ configValue: 'DISABLED' });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByText('Switch to the legacy History view')
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it('should not render when config is ENABLED', async () => {
+    setup({ configValue: 'ENABLED' });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByText('Switch to the legacy History view')
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it('should call setIsWorkflowHistoryV2Selected with false when button is clicked', async () => {
+    const { user, mockSetIsWorkflowHistoryV2Selected } = setup({
+      configValue: 'OPT_OUT',
+    });
+
+    const button = await screen.findByText('Switch to the legacy History view');
+    await user.click(button);
+
+    expect(mockSetIsWorkflowHistoryV2Selected).toHaveBeenCalledTimes(1);
+    expect(mockSetIsWorkflowHistoryV2Selected).toHaveBeenCalledWith(false);
+  });
+});
+
+function setup({ configValue }: { configValue: string }) {
+  const user = userEvent.setup();
+  const mockSetIsWorkflowHistoryV2Selected = jest.fn();
+
+  const contextValue = {
+    ungroupedViewUserPreference: null,
+    setUngroupedViewUserPreference: jest.fn(),
+    isWorkflowHistoryV2Selected: true,
+    setIsWorkflowHistoryV2Selected: mockSetIsWorkflowHistoryV2Selected,
+  };
+
+  const renderResult = render(
+    <WorkflowHistoryContext.Provider value={contextValue}>
+      <WorkflowHistorySwitchToV1Button />
+    </WorkflowHistoryContext.Provider>,
+    {
+      endpointsMocks: [
+        {
+          path: '/api/config',
+          httpMethod: 'GET',
+          mockOnce: false,
+          httpResolver: async () => {
+            return HttpResponse.json(configValue);
+          },
+        },
+      ],
+    }
+  );
+
+  return {
+    user,
+    mockSetIsWorkflowHistoryV2Selected,
+    ...renderResult,
+  };
+}

src/views/workflow-history-v2/workflow-history-switch-to-v1-button/workflow-history-switch-to-v1-button.tsx

@@ -0,0 +1,28 @@
+import { useContext } from 'react';
+
+import useConfigValue from '@/hooks/use-config-value/use-config-value';
+import { WorkflowHistoryContext } from '@/views/workflow-history/workflow-history-context-provider/workflow-history-context-provider';
+
+import workflowHistorySwitchToV1ButtonTooltipContentConfig from '../config/workflow-history-switch-to-v1-button-tooltip-content.config';
+import WorkflowHistoryViewToggleButton from '../workflow-history-view-toggle-button/workflow-history-view-toggle-button';
+
+export default function WorkflowHistorySwitchToV1Button() {
+  const { data: historyPageV2Config } = useConfigValue(
+    'HISTORY_PAGE_V2_ENABLED'
+  );
+
+  const { setIsWorkflowHistoryV2Selected } = useContext(WorkflowHistoryContext);
+
+  if (historyPageV2Config === 'DISABLED' || historyPageV2Config === 'ENABLED') {
+    return null;
+  }
+
+  return (
+    <WorkflowHistoryViewToggleButton
+      kind="secondary"
+      label="Switch to the legacy History view"
+      onClick={() => setIsWorkflowHistoryV2Selected(false)}
+      tooltipContent={workflowHistorySwitchToV1ButtonTooltipContentConfig}
+    />
+  );
+}

src/views/workflow-history-v2/workflow-history-view-toggle-button/__tests__/workflow-history-view-toggle-button.test.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+
+import { render, screen, userEvent, waitFor } from '@/test-utils/rtl';
+
+import WorkflowHistoryViewToggleButton from '../workflow-history-view-toggle-button';
+import { type Props } from '../workflow-history-view-toggle-button.types';
+
+describe(WorkflowHistoryViewToggleButton.name, () => {
+  it('should render button with label', () => {
+    setup();
+
+    expect(screen.getByText('Test Button')).toBeInTheDocument();
+  });
+
+  it('should call onClick when button is clicked', async () => {
+    const { user, mockOnClick } = setup();
+
+    const button = screen.getByText('Test Button');
+    await user.click(button);
+
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render tooltip content when popover is opened on hover', async () => {
+    const { user } = setup();
+
+    const button = screen.getByText('Test Button');
+    await user.hover(button);
+
+    await waitFor(() => {
+      expect(screen.getByText('First paragraph')).toBeInTheDocument();
+      expect(screen.getByText('Second paragraph')).toBeInTheDocument();
+    });
+  });
+
+  it('should render link buttons when provided', async () => {
+    const { user } = setup({
+      tooltipContent: {
+        content: ['Test content'],
+        linkButtons: [
+          {
+            label: 'Learn More',
+            href: '/docs',
+            startEnhancer: null,
+          },
+          {
+            label: 'FAQ',
+            href: '/faq',
+            startEnhancer: null,
+          },
+        ],
+      },
+    });
+
+    const button = screen.getByText('Test Button');
+    await user.hover(button);
+
+    await waitFor(() => {
+      expect(screen.getByText('Learn More')).toBeInTheDocument();
+      expect(screen.getByText('FAQ')).toBeInTheDocument();
+    });
+  });
+
+  it('should not render link buttons when not provided', async () => {
+    const { user } = setup({
+      tooltipContent: {
+        content: ['Test content'],
+      },
+    });
+
+    const button = screen.getByText('Test Button');
+    await user.hover(button);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test content')).toBeInTheDocument();
+    });
+
+    expect(screen.queryByText('Learn More')).not.toBeInTheDocument();
+  });
+
+  it('should render with primary kind', () => {
+    setup({ kind: 'primary' });
+
+    expect(screen.getByText('Test Button')).toBeInTheDocument();
+  });
+
+  it('should render with secondary kind', () => {
+    setup({ kind: 'secondary' });
+
+    expect(screen.getByText('Test Button')).toBeInTheDocument();
+  });
+});
+
+function setup(props: Partial<Props> = {}) {
+  const user = userEvent.setup();
+  const mockOnClick = jest.fn();
+
+  const defaultProps: Props = {
+    kind: 'primary',
+    label: 'Test Button',
+    onClick: mockOnClick,
+    tooltipContent: {
+      content: ['First paragraph', 'Second paragraph'],
+    },
+    ...props,
+  };
+
+  const renderResult = render(
+    <WorkflowHistoryViewToggleButton {...defaultProps} />
+  );
+
+  return {
+    user,
+    mockOnClick,
+    ...renderResult,
+  };
+}