[UIE-51] Move InfoBox to components package (#4367)

Author: nawatts

packages/components/src/InfoBox.test.ts

@@ -0,0 +1,45 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { h } from 'react-hyperscript-helpers';
+
+import { InfoBox } from './InfoBox';
+import { renderWithTheme } from './internal/test-utils';
+
+describe('InfoBox', () => {
+  it('renders an icon button', async () => {
+    // Act
+    renderWithTheme(h(InfoBox, ['More information about the thing.']));
+    const trigger = screen.getByRole('button');
+
+    // Assert
+    expect(trigger).toHaveAccessibleName('More info');
+
+    const icon = trigger.querySelector('svg')!;
+    expect(icon).toHaveAttribute('data-icon', 'info-circle');
+  });
+
+  it('allows overriding the default icon', async () => {
+    // Act
+    renderWithTheme(h(InfoBox, { icon: 'error-standard' }, ['More information about the thing.']));
+    const trigger = screen.getByRole('button');
+
+    // Assert
+    const icon = trigger.querySelector('svg')!;
+    expect(icon).toHaveAttribute('data-icon', 'error-standard');
+  });
+
+  it('renders children in a dialog', async () => {
+    // Arrange
+    const user = userEvent.setup();
+
+    renderWithTheme(h(InfoBox, ['More information about the thing.']));
+
+    // Act
+    const trigger = screen.getByRole('button');
+    await user.click(trigger);
+
+    // Assert
+    const dialog = screen.getByRole('dialog');
+    expect(dialog).toHaveTextContent('More information about the thing.');
+  });
+});

packages/components/src/InfoBox.ts

@@ -0,0 +1,42 @@
+import { CSSProperties, ReactNode } from 'react';
+import { div, h } from 'react-hyperscript-helpers';
+
+import { Clickable } from './Clickable';
+import { icon } from './icon';
+import { IconId } from './icon-library';
+import { PopupTrigger, PopupTriggerProps } from './PopupTrigger';
+import { useThemeFromContext } from './theme';
+
+export interface InfoBoxProps {
+  children?: ReactNode;
+  icon?: IconId;
+  side?: PopupTriggerProps['side'];
+  size?: number;
+  style?: CSSProperties;
+  tooltip?: ReactNode;
+}
+
+export const InfoBox = (props: InfoBoxProps): ReactNode => {
+  const { children, icon: iconId = 'info-circle', side, size, style, tooltip } = props;
+
+  const { colors } = useThemeFromContext();
+
+  return h(
+    PopupTrigger,
+    {
+      side,
+      content: div({ style: { padding: '0.5rem', width: 300 } }, [children]),
+    },
+    [
+      h(
+        Clickable,
+        {
+          'aria-label': 'More info',
+          tagName: 'span',
+          tooltip,
+        },
+        [icon(iconId, { size, style: { color: colors.accent(), cursor: 'pointer', ...style } })]
+      ),
+    ]
+  );
+};

packages/components/src/index.ts

@@ -7,6 +7,7 @@ export * from './hooks/useUniqueId';
 export * from './hooks/useWindowDimensions';
 export * from './icon';
 export type { IconId } from './icon-library';
+export * from './InfoBox';
 export { Interactive } from './Interactive';
 export * from './Link';
 export * from './PopupTrigger';

src/components/InfoBox.ts

@@ -1,41 +1 @@
-import { IconId } from '@terra-ui-packages/components';
-import { CSSProperties, PropsWithChildren, ReactNode, useState } from 'react';
-import { div, h } from 'react-hyperscript-helpers';
-import { Clickable } from 'src/components/common';
-import { icon } from 'src/components/icons';
-import PopupTrigger from 'src/components/PopupTrigger';
-import colors from 'src/libs/colors';
-
-interface InfoBoxProps {
-  size?: number;
-  style?: CSSProperties;
-  side?: 'top' | 'bottom' | 'left' | 'right';
-  tooltip?: ReactNode;
-  iconOverride?: IconId;
-}
-
-export const InfoBox = (props: PropsWithChildren<InfoBoxProps>) => {
-  const { size, children, style, side, tooltip, iconOverride } = props;
-  const [open, setOpen] = useState(false);
-  return h(
-    PopupTrigger,
-    {
-      side,
-      onChange: setOpen,
-      content: div({ style: { padding: '0.5rem', width: 300 } }, [children]),
-    },
-    [
-      h(
-        Clickable,
-        {
-          tooltip,
-          tagName: 'span',
-          'aria-label': 'More info',
-          'aria-expanded': open,
-          'aria-haspopup': true,
-        },
-        [icon(iconOverride || 'info-circle', { size, style: { cursor: 'pointer', color: colors.accent(), ...style } })]
-      ),
-    ]
-  );
-};
+export { InfoBox } from '@terra-ui-packages/components';

src/pages/workspaces/migration/WorkspaceItem.ts

@@ -90,7 +90,6 @@ export const WorkspaceItem = (props: WorkspaceItemProps): ReactNode => {
                 side: 'bottom',
                 tooltip: 'Failure information',
                 size: 18,
-                iconOverride: undefined,
               },
               [workspaceInfo.failureReason]
             ),

src/pages/workspaces/workspace/Dashboard/OwnerNotice.ts

@@ -44,7 +44,7 @@ export const OwnerNotice = (props: OwnerNoticeProps): ReactNode => {
     : h(
         InfoBox,
         {
-          iconOverride: 'error-standard',
+          icon: 'error-standard',
           style: { color: colors.accent() },
         },
         [notice]

src/pages/workspaces/workspace/jobHistory/SubmissionDetails.js

@@ -43,13 +43,13 @@ const deletionDelayYears = 1;
 const deletionDelayString = `${deletionDelayYears} year${deletionDelayYears > 1 ? 's' : ''}`;
 const isDeleted = (statusLastChangedDate) => differenceInDays(parseISO(statusLastChangedDate), Date.now()) > deletionDelayYears * 365;
 
-const deletedInfoIcon = ({ name, iconOverride }) => {
+const deletedInfoIcon = ({ name, icon }) => {
   return h(
     InfoBox,
     {
       style: { color: colors.secondary(), margin: '0.5rem' },
       tooltip: `${name} unavailable. Click to learn more.`,
-      iconOverride,
+      icon,
     },
     [
       div({ style: Style.elements.sectionHeader }, 'Workflow Details Archived'),
@@ -208,8 +208,8 @@ const SubmissionWorkflowsTable = ({ workspace, submission }) => {
                     h(Fragment, [
                       isDeleted(filteredWorkflows[rowIndex].statusLastChangedDate)
                         ? [
-                            deletedInfoIcon({ name: 'Job Manager', iconOverride: 'tasks' }),
-                            deletedInfoIcon({ name: 'Workflow Dashboard', iconOverride: 'tachometer' }),
+                            deletedInfoIcon({ name: 'Job Manager', icon: 'tasks' }),
+                            deletedInfoIcon({ name: 'Workflow Dashboard', icon: 'tachometer' }),
                           ]
                         : [
                             h(

src/pages/workspaces/workspace/workflows/WorkflowView.js

@@ -1091,7 +1091,7 @@ const WorkflowView = _.flow(
                 // We show either an info message or a warning, based on whether increasing memory on retries is
                 // enabled and the value of the retry multiplier.
                 retryWithMoreMemory && retryMemoryFactor > 2
-                  ? h(InfoBox, { style: { color: colors.warning() }, iconOverride: 'warning-standard' }, [
+                  ? h(InfoBox, { style: { color: colors.warning() }, icon: 'warning-standard' }, [
                       'Retry factors above 2 are not recommended. The retry factor compounds and may substantially increase costs. ',
                       h(Link, { href: this.getSupportLink('4403215299355'), ...Utils.newTabLinkProps }, [clickToLearnMore]),
                     ])

src/workflows-app/components/LogViewer.ts

@@ -150,7 +150,6 @@ export const LogViewer = ({ modalTitle, logs, onDismiss }: LogViewerProps) => {
           tooltip: undefined,
           size: undefined,
           side: undefined,
-          iconOverride: undefined,
         },
         [
           dl([