Add cli command modal

Author: Assem-Hafez

src/components/copy-text-button/__tests__/copyt-text-button.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import copy from 'copy-to-clipboard';
+
+import { render, fireEvent, screen, act } from '@/test-utils/rtl';
+
+import CopyTextButton from '../copy-text-button';
+
+jest.mock('copy-to-clipboard', jest.fn);
+
+describe('CopyTextButton', () => {
+  const text = 'text to copy';
+
+  it('copies JSON to clipboard', () => {
+    render(<CopyTextButton textToCopy={text} />);
+
+    const copyButton = screen.getByRole('button');
+    fireEvent.click(copyButton);
+
+    expect(copy).toHaveBeenCalledWith(text);
+  });
+
+  it('show tooltip for 1 second and remove it', () => {
+    jest.useFakeTimers();
+
+    render(<CopyTextButton textToCopy={text} />);
+
+    const copyButton = screen.getByRole('button');
+    fireEvent.click(copyButton);
+    const visibleTooltip = screen.getByText('Copied');
+    expect(visibleTooltip).toBeInTheDocument();
+
+    act(() => {
+      jest.advanceTimersByTime(1000 + 500); //hide + animation duration
+    });
+
+    // Ensure the tooltip is hidden after 1000ms
+    const hiddenTooltip = screen.queryByText('Copied');
+    expect(hiddenTooltip).not.toBeInTheDocument();
+
+    jest.useRealTimers();
+  });
+});

src/components/copy-text-button/copy-text-button.tsx

@@ -0,0 +1,51 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+
+import { Button, SHAPE, SIZE, KIND } from 'baseui/button';
+import { ACCESSIBILITY_TYPE, Tooltip } from 'baseui/tooltip';
+import copy from 'copy-to-clipboard';
+import { MdCopyAll } from 'react-icons/md';
+
+import type { Props } from './copy-text-button.types';
+
+export default function CopyTextButton({
+  textToCopy,
+  children,
+  ...buttonProps
+}: Props) {
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  const buttonChildren = children === undefined ? <MdCopyAll /> : children;
+
+  useEffect(() => {
+    if (showTooltip) {
+      const timer = setTimeout(() => {
+        setShowTooltip(false);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [showTooltip]);
+  return (
+    <Tooltip
+      animateOutTime={400}
+      isOpen={showTooltip}
+      showArrow
+      placement="bottom"
+      accessibilityType={ACCESSIBILITY_TYPE.tooltip}
+      content={() => <>Copied</>}
+    >
+      <Button
+        onClick={() => {
+          copy(textToCopy);
+          setShowTooltip(true);
+        }}
+        size={SIZE.mini}
+        shape={SHAPE.circle}
+        kind={KIND.secondary}
+        {...buttonProps}
+      >
+        {buttonChildren}
+      </Button>
+    </Tooltip>
+  );
+}

src/components/copy-text-button/copy-text-button.types.ts

@@ -0,0 +1,5 @@
+import { type ButtonProps } from 'baseui/button';
+
+export type Props = {
+  textToCopy: string;
+} & ButtonProps;

src/components/page-tabs/page-tabs.styles.ts

@@ -28,15 +28,16 @@ export const overrides = {
         alignSelf: 'center',
         ...getMediaQueryMargins($theme, (margin) => ({
           maxWidth: `${$theme.grid.maxWidth + 2 * margin}px`,
+          paddingRight: `${margin}px`,
+          paddingLeft: `${margin}px`,
         })),
       }),
     },
     TabList: {
-      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
-        ...getMediaQueryMargins($theme),
+      style: {
         paddingBottom: 0,
         marginBottom: 0,
-      }),
+      },
     },
     TabBorder: {
       style: {

src/components/page-tabs/page-tabs.tsx

@@ -9,6 +9,7 @@ export default function PageTabs({
   tabList,
   selectedTab,
   setSelectedTab,
+  endEnhancer,
 }: Props) {
   return (
     <Tabs
@@ -17,6 +18,7 @@ export default function PageTabs({
         setSelectedTab(activeKey);
       }}
       overrides={overrides.tabs}
+      endEnhancer={endEnhancer}
     >
       {tabList.map((tab) => (
         <Tab

src/components/page-tabs/page-tabs.types.ts

@@ -1,6 +1,7 @@
 import type React from 'react';
 
 import { type IconProps } from 'baseui/icon';
+import { type TabsProps } from 'baseui/tabs-motion';
 
 export type PageTab = {
   key: string;
@@ -18,4 +19,5 @@ export type Props = {
   tabList: PageTabsList;
   selectedTab: React.Key;
   setSelectedTab: (value: React.Key) => void;
+  endEnhancer?: TabsProps['endEnhancer'];
 };

src/views/workflow-history/workflow-history-event-details-json/__tests__/workflow-summary-tab-json-view.test.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 
-import copy from 'copy-to-clipboard';
-
-import { render, fireEvent, screen, act } from '@/test-utils/rtl';
+import { render } from '@/test-utils/rtl';
 
 import WorkflowSummaryTabJsonView from '../workflow-history-event-details-json';
 
-// Mock dependencies
-jest.mock('copy-to-clipboard', jest.fn);
+jest.mock('@/components/copy-text-button/copy-text-button', () =>
+  jest.fn(({ textToCopy }) => <div>Copy Button: {textToCopy}</div>)
+);
 
 jest.mock('@/components/pretty-json/pretty-json', () =>
   jest.fn(() => <div>PrettyJson Mock</div>)
@@ -24,33 +23,13 @@ describe('WorkflowSummaryTabJsonView Component', () => {
     expect(getByText('PrettyJson Mock')).toBeInTheDocument();
   });
 
-  it('copies JSON to clipboard', () => {
-    render(<WorkflowSummaryTabJsonView entryValue={inputJson} />);
-
-    const copyButton = screen.getByRole('button');
-    fireEvent.click(copyButton);
-
-    expect(copy).toHaveBeenCalledWith(JSON.stringify(inputJson, null, '\t'));
-  });
-
-  it('show tooltip for 1 second and remove it', () => {
-    jest.useFakeTimers();
-
-    render(<WorkflowSummaryTabJsonView entryValue={inputJson} />);
-
-    const copyButton = screen.getByRole('button');
-    fireEvent.click(copyButton);
-    const visibleTooltip = screen.getByText('Copied');
-    expect(visibleTooltip).toBeInTheDocument();
-
-    act(() => {
-      jest.advanceTimersByTime(1000 + 500); //hide + animation duration
-    });
-
-    // Ensure the tooltip is hidden after 1000ms
-    const hiddenTooltip = screen.queryByText('Copied');
-    expect(hiddenTooltip).not.toBeInTheDocument();
+  it('renders copy text button and pass the correct text', () => {
+    const { getByText } = render(
+      <WorkflowSummaryTabJsonView entryValue={inputJson} />
+    );
 
-    jest.useRealTimers();
+    const copyButton = getByText(/Copy Button/);
+    expect(copyButton).toBeInTheDocument();
+    expect(copyButton.innerHTML).toMatch(JSON.stringify(inputJson, null, '\t'));
   });
 });

src/views/workflow-history/workflow-history-event-details-json/workflow-history-event-details-json.tsx

@@ -1,11 +1,7 @@
 'use client';
-import React, { useEffect, useState } from 'react';
-
-import { Button, KIND as BUTTON_KIND, SHAPE, SIZE } from 'baseui/button';
-import { ACCESSIBILITY_TYPE, Tooltip } from 'baseui/tooltip';
-import copy from 'copy-to-clipboard';
-import { MdCopyAll } from 'react-icons/md';
+import React, { useMemo } from 'react';
 
+import CopyTextButton from '@/components/copy-text-button/copy-text-button';
 import PrettyJson from '@/components/pretty-json/pretty-json';
 import useStyletronClasses from '@/hooks/use-styletron-classes';
 
@@ -14,40 +10,15 @@ import type { Props } from './workflow-history-event-details-json.types';
 
 export default function WorkflowHistoryEventDetailsJson({ entryValue }: Props) {
   const { cls } = useStyletronClasses(cssStyles);
-  const [showTooltip, setShowTooltip] = useState(false);
 
-  useEffect(() => {
-    if (showTooltip) {
-      const timer = setTimeout(() => {
-        setShowTooltip(false);
-      }, 1000);
-      return () => clearTimeout(timer);
-    }
-  }, [showTooltip]);
+  const textToCopy = useMemo(() => {
+    return JSON.stringify(entryValue, null, '\t');
+  }, [entryValue]);
   return (
     <div className={cls.jsonViewWrapper}>
       <div className={cls.jsonViewContainer}>
         <div className={cls.jsonViewHeader}>
-          <Tooltip
-            animateOutTime={400}
-            isOpen={showTooltip}
-            showArrow
-            placement="bottom"
-            accessibilityType={ACCESSIBILITY_TYPE.tooltip}
-            content={() => <>Copied</>}
-          >
-            <Button
-              onClick={() => {
-                copy(JSON.stringify(entryValue, null, '\t'));
-                setShowTooltip(true);
-              }}
-              size={SIZE.mini}
-              shape={SHAPE.circle}
-              kind={BUTTON_KIND.secondary}
-            >
-              <MdCopyAll />
-            </Button>
-          </Tooltip>
+          <CopyTextButton textToCopy={textToCopy} />
         </div>
         <PrettyJson json={entryValue} />
       </div>

src/views/workflow-page/config/workflow-page-cli-commands-groups.config.ts

@@ -0,0 +1,14 @@
+import { type CliCommandGroupConfig } from '../workflow-page-cli-commands-modal/workflow-page-cli-commands-modal.types';
+
+const workflowPageCliCommandsGroupsConfig = [
+  {
+    name: 'domain',
+    title: 'Domain',
+  },
+  {
+    name: 'workflow',
+    title: 'Workflow',
+  },
+] as const satisfies CliCommandGroupConfig[];
+
+export default workflowPageCliCommandsGroupsConfig;

src/views/workflow-page/config/workflow-page-cli-commands.config.ts

@@ -0,0 +1,95 @@
+import { type CliCommandConfig } from '../workflow-page-cli-commands-modal/workflow-page-cli-commands-modal.types';
+
+const workflowPageCliCommandsConfig: CliCommandConfig[] = [
+  {
+    label: 'Register a domain (local only)',
+    command:
+      'cadence --domain {domain-name} domain register --global_domain false',
+    group: 'domain',
+  },
+  {
+    label: 'List domain settings',
+    command:
+      'cadence --env {staging|prod|prod02} --domain {domain-name} domain describe',
+    group: 'domain',
+  },
+  {
+    label: 'Update domain active cluster',
+    description: 'Make sure the domain_data has UberIgnoringLisa:true',
+    command:
+      'cadence --env {staging|prod|prod02} --domain {domain-name} domain update -active_cluster {cluster-name}',
+    group: 'domain',
+  },
+  {
+    label: 'Update domain bad binary',
+    command:
+      'cadence --env {staging|prod|prod02} --domain {domain-name} domain update --add_bad_binary {bad-binary-SHA} --reason \'"{reason}"\'',
+    group: 'domain',
+  },
+  // workflow commands
+  {
+    label: 'Run a workflow',
+    command:
+      'cadence --env {staging|prod|prod02} --domain {domain-name} workflow run --tl {task-list-name} --wt {workflow-type-name} --et 60 -i \'"{input-string}"\'',
+    group: 'workflow',
+  },
+  {
+    label: 'See workflow settings',
+    command:
+      'cadence --env {staging|prod|prod02} --domain {domain-name} workflow describe -w {workflow-id} -r {run-id}',
+    group: 'workflow',
+  },
+  {
+    label: 'See workflow history',
+    command:
+      'cadence --env {staging|prod|prod02} --domain {domain-name} workflow show -w {workflow-id} -r {run-id}',
+    group: 'workflow',
+  },
+  {
+    label: 'Signal a workflow',
+    command:
+      'cadence --env {staging|prod|prod02} --domain {domain-name} workflow signal -w {workflow-id} -r {run-id} --name {signal-name} --input \'"{signal-payload}"\'',
+    group: 'workflow',
+  },
+  {
+    label: 'Reset a workflow',
+    command:
+      'cadence workflow reset -w {workflow-id} -r {run-id} --event_id {event-id} --reason \'"{reason}"\' --reset_type {reset-type} --reset_bad_binary_checksum {bad-binary-SHA}',
+    description: `Use event_id to reset from specific event or reset_type with one of the following values BadBinary, DecisionCompletedTime, FirstDecisionScheduled, FirstDecisionCompleted, LastDecisionScheduled, LastDecisionCompleted, LastContinuedAsNew`,
+    group: 'workflow',
+  },
+  {
+    label: 'Reset a batch of workflows',
+    command:
+      'cadence workflow reset-batch --query \'"{query}"\' --only_non_deterministic --reason \'"{reason}"\' --reset_type {reset-type}',
+    description: `Where query can be any query that returns a list of workflows and reset_type can be BadBinary, DecisionCompletedTime, FirstDecisionScheduled, FirstDecisionCompleted, LastDecisionScheduled, LastDecisionCompleted, LastContinuedAsNew`,
+    group: 'workflow',
+  },
+  {
+    label: 'Restart a workflow',
+    command: 'cadence workflow restart -w {workflow-id} -r {run-id}',
+    description:
+      'Starts a new execution using the same input & terminates previous execution',
+    group: 'workflow',
+  },
+  {
+    label: 'List closed workflows',
+    command:
+      'cadence --env {staging|prod|prod02} --domain {domain-name} workflow {list|listall}',
+    group: 'workflow',
+  },
+  {
+    label: 'List open workflows',
+    command:
+      'cadence --env {staging|prod|prod02} --domain {domain-name} workflow {list|listall} --open',
+    group: 'workflow',
+  },
+  {
+    label: 'Query for a workflow',
+    command:
+      'cadence workflow {list|listall} --query \'(CustomKeywordField = "keyword1" and CustomIntField >= 5) or CustomKeywordField = "keyword2" and CloseTime = missing\'',
+    group: 'workflow',
+  },
+];
+
+export default workflowPageCliCommandsConfig;