Add Help button to Domain Page (#899)

- Add Help button to Domain Page, with useful links
- Gate it behind the Extended Domain Info feature flag for now
- Fix typo in CLI commands modal
- Set default border radius for popovers to 12px

Author: adhityamamallan

src/config/theme/theme-light.config.ts

@@ -18,6 +18,7 @@ const themeLight = {
   },
   borders: {
     buttonBorderRadiusMini: '8px',
+    popoverBorderRadius: '12px',
   },
 } satisfies DeepPartial<MakeExtendable<Theme>>;
 

src/views/domain-page/__fixtures__/domain-page-help-menu-config.ts

@@ -0,0 +1,40 @@
+import { createElement } from 'react';
+
+import { type DomainPageHelpMenuConfig } from '../domain-page-help/domain-page-help.types';
+
+export const mockDomainPageHelpMenuConfig = [
+  {
+    title: 'Documentation',
+    items: [
+      {
+        kind: 'link',
+        text: 'Get started (docs)',
+        icon: () => createElement('span', {}, 'Docs Icon'),
+        href: 'https://mock.docs.link',
+      },
+    ],
+  },
+  {
+    title: 'Commands',
+    items: [
+      {
+        kind: 'modal',
+        text: 'Domain commands',
+        icon: () => createElement('span', {}, 'Cmds Icon'),
+        modal: ({ isOpen }) =>
+          createElement('div', {}, isOpen ? 'Open modal' : 'Closed modal'),
+      },
+    ],
+  },
+  {
+    title: 'Actions',
+    items: [
+      {
+        kind: 'other',
+        text: 'Custom action',
+        icon: () => createElement('span', {}, 'Other Icon'),
+        onClick: jest.fn(),
+      },
+    ],
+  },
+] as const satisfies DomainPageHelpMenuConfig;

src/views/domain-page/config/domain-page-help-menu.config.ts

@@ -0,0 +1,50 @@
+import { FaSlack } from 'react-icons/fa';
+import { MdArticle, MdTerminal } from 'react-icons/md';
+
+import WorkflowPageCliCommandsModal from '@/views/workflow-page/workflow-page-cli-commands-modal/workflow-page-cli-commands-modal';
+
+import { type DomainPageHelpMenuConfig } from '../domain-page-help/domain-page-help.types';
+
+const domainPageHelpMenuConfig = [
+  {
+    title: 'Getting started',
+    items: [
+      {
+        kind: 'link',
+        text: 'Get started (docs)',
+        icon: MdArticle,
+        href: 'https://cadenceworkflow.io/docs/get-started',
+      },
+    ],
+  },
+  {
+    title: 'CLI Commands',
+    items: [
+      {
+        kind: 'modal',
+        text: 'Domain commands',
+        icon: MdTerminal,
+        modal: WorkflowPageCliCommandsModal,
+      },
+    ],
+  },
+  {
+    title: 'Other',
+    items: [
+      {
+        kind: 'link',
+        text: 'Cadence Docs',
+        icon: MdArticle,
+        href: 'https://cadenceworkflow.io/docs/concepts',
+      },
+      {
+        kind: 'link',
+        text: 'Cadence on Slack',
+        icon: FaSlack,
+        href: 'http://t.uber.com/cadence-slack',
+      },
+    ],
+  },
+] as const satisfies DomainPageHelpMenuConfig;
+
+export default domainPageHelpMenuConfig;

src/views/domain-page/domain-page-help-item-button/__tests__/domain-page-help-item-button.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen, userEvent } from '@/test-utils/rtl';
+
+import { mockDomainPageHelpMenuConfig } from '../../__fixtures__/domain-page-help-menu-config';
+import DomainPageHelpItemButton from '../domain-page-help-item-button';
+
+const linkItem = mockDomainPageHelpMenuConfig[0].items[0];
+const modalItem = mockDomainPageHelpMenuConfig[1].items[0];
+const otherItem = mockDomainPageHelpMenuConfig[2].items[0];
+
+describe(DomainPageHelpItemButton.name, () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders a link button correctly', () => {
+    render(<DomainPageHelpItemButton {...linkItem} />);
+
+    const linkItemButton = screen.getByRole('link');
+    expect(linkItemButton).toBeInTheDocument();
+
+    expect(linkItemButton).toHaveTextContent('Get started (docs)');
+    expect(linkItemButton).toHaveAttribute('target', '_blank');
+    expect(linkItemButton).toHaveAttribute('rel', 'noreferrer');
+    expect(linkItemButton).toHaveAttribute('href', 'https://mock.docs.link');
+
+    expect(screen.getByText('Docs Icon')).toBeInTheDocument();
+  });
+
+  it('renders a modal button correctly and opens the modal on click', async () => {
+    const user = userEvent.setup();
+    render(<DomainPageHelpItemButton {...modalItem} />);
+
+    const buttonElement = screen.getByText('Domain commands');
+    expect(buttonElement).toBeInTheDocument();
+
+    expect(screen.getByText('Cmds Icon')).toBeInTheDocument();
+
+    expect(screen.getByText('Closed modal')).toBeInTheDocument();
+
+    await user.click(buttonElement);
+
+    expect(await screen.findByText('Open modal')).toBeInTheDocument();
+  });
+
+  it('renders an action button correctly and calls onClick handler', async () => {
+    const user = userEvent.setup();
+    render(<DomainPageHelpItemButton {...otherItem} />);
+
+    const button = screen.getByText('Custom action');
+    expect(button).toBeInTheDocument();
+
+    expect(screen.getByText('Other Icon')).toBeInTheDocument();
+
+    await user.click(button);
+
+    expect(otherItem.onClick).toHaveBeenCalledTimes(1);
+  });
+});

src/views/domain-page/domain-page-help-item-button/domain-page-help-item-button.styles.ts

@@ -0,0 +1,25 @@
+import { type Theme, styled as createStyled } from 'baseui';
+import { type ButtonOverrides } from 'baseui/button';
+import type { StyleObject } from 'styletron-react';
+
+export const overrides = {
+  button: {
+    BaseButton: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        ...$theme.typography.LabelSmall,
+        justifyContent: 'flex-start',
+        whiteSpace: 'nowrap',
+      }),
+    },
+  } satisfies ButtonOverrides,
+};
+
+export const styled = {
+  ExternalLinkButtonContent: createStyled('div', ({ $theme }) => ({
+    display: 'flex',
+    gap: $theme.sizing.scale500,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexGrow: 1,
+  })),
+};

src/views/domain-page/domain-page-help-item-button/domain-page-help-item-button.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+
+import { Button, type ButtonProps } from 'baseui/button';
+import Link from 'next/link';
+import { MdOpenInNew } from 'react-icons/md';
+
+import { overrides, styled } from './domain-page-help-item-button.styles';
+import { type DomainPageHelpItem } from './domain-page-help-item-button.types';
+
+export default function DomainPageHelpItemButton(item: DomainPageHelpItem) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const baseButtonProps: ButtonProps = {
+    kind: 'tertiary',
+    size: 'compact',
+    overrides: overrides.button,
+    startEnhancer: item.icon,
+  };
+
+  if (item.kind === 'link') {
+    return (
+      <Button
+        {...baseButtonProps}
+        $as={Link}
+        target="_blank"
+        rel="noreferrer"
+        href={item.href}
+      >
+        <styled.ExternalLinkButtonContent>
+          {item.text}
+          <MdOpenInNew />
+        </styled.ExternalLinkButtonContent>
+      </Button>
+    );
+  }
+
+  if (item.kind === 'modal') {
+    return (
+      <>
+        <Button {...baseButtonProps} onClick={() => setIsModalOpen(true)}>
+          {item.text}
+        </Button>
+        <item.modal
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+        />
+      </>
+    );
+  }
+
+  return (
+    <Button {...baseButtonProps} onClick={item.onClick}>
+      {item.text}
+    </Button>
+  );
+}

src/views/domain-page/domain-page-help-item-button/domain-page-help-item-button.types.ts

@@ -0,0 +1,33 @@
+import { type IconProps } from 'baseui/icon';
+
+interface DomainPageHelpBaseItem {
+  kind: 'link' | 'modal' | 'other';
+  text: string;
+  icon: React.ComponentType<{
+    size: IconProps['size'];
+    color: IconProps['color'];
+  }>;
+}
+
+interface DomainPageHelpLinkItem extends DomainPageHelpBaseItem {
+  kind: 'link';
+  href: string;
+}
+
+interface DomainPageHelpModalItem extends DomainPageHelpBaseItem {
+  kind: 'modal';
+  modal: React.ComponentType<{
+    isOpen: boolean;
+    onClose: () => void;
+  }>;
+}
+
+interface DomainPageHelpOtherItem extends DomainPageHelpBaseItem {
+  kind: 'other';
+  onClick: () => void;
+}
+
+export type DomainPageHelpItem =
+  | DomainPageHelpLinkItem
+  | DomainPageHelpModalItem
+  | DomainPageHelpOtherItem;