WOR-1235 common types (#4319)

Co-authored-by: Nick Watts <1156625+nawatts@users.noreply.github.com>
DataBiosphere · Oct 6, 2023 · 8346188 · 8346188
1 parent 30cd302
commit 8346188
Show file tree

Hide file tree

Showing 23 changed files with 148 additions and 87 deletions.
diff --git a/src/analysis/modals/ComputeModal/AzureComputeModal/AzureComputeModal.js b/src/analysis/modals/ComputeModal/AzureComputeModal/AzureComputeModal.js
@@ -18,9 +18,9 @@ import {
 import { runtimeToolLabels } from 'src/analysis/utils/tool-utils';
 import { ButtonOutline, ButtonPrimary, IdContainer, LabeledCheckbox, Link, Select, spinnerOverlay } from 'src/components/common';
 import { icon } from 'src/components/icons';
+import { InfoBox } from 'src/components/InfoBox';
 import { NumberInput } from 'src/components/input';
 import { withModalDrawer } from 'src/components/ModalDrawer';
-import { InfoBox } from 'src/components/PopupTrigger';
 import TitleBar from 'src/components/TitleBar';
 import { Ajax } from 'src/libs/ajax';
 import {

diff --git a/src/analysis/modals/ComputeModal/GcpComputeModal/GcpComputeModal.js b/src/analysis/modals/ComputeModal/GcpComputeModal/GcpComputeModal.js
@@ -47,9 +47,9 @@ import { ClipboardButton } from 'src/components/ClipboardButton';
 import { ButtonOutline, ButtonPrimary, IdContainer, LabeledCheckbox, Link, Select, spinnerOverlay } from 'src/components/common';
 import { icon } from 'src/components/icons';
 import { ImageDepViewer } from 'src/components/ImageDepViewer';
+import { InfoBox } from 'src/components/InfoBox';
 import { NumberInput, TextInput, ValidatedInput } from 'src/components/input';
 import { withModalDrawer } from 'src/components/ModalDrawer';
-import { InfoBox } from 'src/components/PopupTrigger';
 import { getAvailableComputeRegions, getLocationType, getRegionInfo, isLocationMultiRegion, isUSLocation } from 'src/components/region-common';
 import TitleBar from 'src/components/TitleBar';
 import { Ajax } from 'src/libs/ajax';

diff --git a/src/components/ClipboardButton.js → src/components/ClipboardButton.ts b/src/components/ClipboardButton.js → src/components/ClipboardButton.ts
@@ -1,20 +1,26 @@
 import { delay } from '@terra-ui-packages/core-utils';
 import * as clipboard from 'clipboard-polyfill/text';
 import _ from 'lodash/fp';
-import { useState } from 'react';
+import { PropsWithChildren, ReactNode, useState } from 'react';
 import { h } from 'react-hyperscript-helpers';
-import { Link } from 'src/components/common';
+import { Link, LinkProps } from 'src/components/common';
 import { icon } from 'src/components/icons';
 import { withErrorReporting } from 'src/libs/error';
 import * as Utils from 'src/libs/utils';
 
-export const ClipboardButton = ({ text, onClick, children, iconSize = undefined, ...props }) => {
+interface ClipboardButtonProps extends PropsWithChildren<LinkProps> {
+  text: string;
+  iconSize?: number;
+}
+
+export const ClipboardButton = (props: ClipboardButtonProps): ReactNode => {
+  const { text, onClick, children, iconSize, ...rest } = props;
   const [copied, setCopied] = useState(false);
   return h(
     Link,
     {
       tooltip: copied ? 'Copied to clipboard' : 'Copy to clipboard',
-      ...props,
+      ...rest,
       onClick: _.flow(
         withErrorReporting('Error copying to clipboard'),
         Utils.withBusyState(setCopied)
@@ -24,6 +30,12 @@ export const ClipboardButton = ({ text, onClick, children, iconSize = undefined,
         await delay(1500);
       }),
     },
-    [children, icon(copied ? 'check' : 'copy-to-clipboard', { size: iconSize, ...(!!children && { style: { marginLeft: '0.5rem' } }) })]
+    [
+      children,
+      icon(copied ? 'check' : 'copy-to-clipboard', {
+        size: iconSize,
+        ...(!!children && { style: { marginLeft: '0.5rem' } }),
+      }),
+    ]
   );
 };
diff --git a/src/components/Collapse.js → src/components/Collapse.ts b/src/components/Collapse.js → src/components/Collapse.ts
@@ -1,29 +1,47 @@
 import { useUniqueId } from '@terra-ui-packages/components';
 import _ from 'lodash/fp';
-import { useEffect, useRef, useState } from 'react';
+import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
 import { div, h } from 'react-hyperscript-helpers';
-import { Link } from 'src/components/common';
+import { Link, LinkProps } from 'src/components/common';
 import { icon } from 'src/components/icons';
 import colors from 'src/libs/colors';
 import * as Style from 'src/libs/style';
 
-const Collapse = ({
-  title,
-  hover,
-  tooltip,
-  tooltipDelay,
-  summaryStyle,
-  detailsStyle,
-  initialOpenState,
-  children,
-  titleFirst,
-  afterTitle,
-  onFirstOpen = () => {},
-  noTitleWrap,
-  disabled = false,
-  ...props
-}) => {
-  const [isOpened, setIsOpened] = useState(initialOpenState);
+type DivProps = JSX.IntrinsicElements['div'];
+
+interface CollapseProps extends Omit<DivProps, 'title'> {
+  title?: ReactNode;
+  hover?: LinkProps['hover'];
+  tooltip?: string;
+  tooltipDelay?: number;
+  summaryStyle?: CSSProperties;
+  detailsStyle?: CSSProperties;
+  initialOpenState?: boolean;
+  titleFirst?: boolean;
+  afterTitle?: ReactNode;
+  onFirstOpen?: () => void;
+  noTitleWrap?: boolean;
+  disabled?: boolean;
+}
+
+const Collapse = (props: CollapseProps): ReactNode => {
+  const {
+    title,
+    hover,
+    tooltip,
+    tooltipDelay,
+    summaryStyle,
+    detailsStyle,
+    initialOpenState,
+    children,
+    titleFirst,
+    afterTitle,
+    onFirstOpen = () => {},
+    noTitleWrap,
+    disabled = false,
+    ...rest
+  } = props;
+  const [isOpened, setIsOpened] = useState<boolean>(!!initialOpenState);
   const angleIcon = icon(isOpened ? 'angle-down' : 'angle-right', {
     style: {
       flexShrink: 0,
@@ -41,7 +59,7 @@ const Collapse = ({
     }
   }, [firstOpenRef, isOpened]);
 
-  return div(props, [
+  return div(rest, [
     div(
       {
         style: {
@@ -81,7 +99,10 @@ const Collapse = ({
         // display: flex and flex: 1 causes this div to fill available space. This makes it easy to position afterTitle
         // controls just after the summary text or at the right edge of the summary section. height: 0 prevents the unused
         // space in this div from blocking clicks on the summary section.
-        afterTitle && div({ style: { display: 'flex', flex: 1, alignItems: 'center', height: 0, margin: '0 1ch', zIndex: 2 } }, [afterTitle]),
+        afterTitle &&
+          div({ style: { display: 'flex', flex: 1, alignItems: 'center', height: 0, margin: '0 1ch', zIndex: 2 } }, [
+            afterTitle,
+          ]),
         titleFirst && angleIcon,
       ]
     ),

diff --git a/src/components/InfoBox.ts b/src/components/InfoBox.ts
@@ -0,0 +1,42 @@
+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]),
+    },
+    // @ts-expect-error
+    [
+      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 } })]
+      ),
+    ]
+  );
+};
diff --git a/src/components/NewWorkspaceModal.js b/src/components/NewWorkspaceModal.js
@@ -5,9 +5,9 @@ import { cloudProviders, defaultLocation } from 'src/analysis/utils/runtime-util
 import { CloudProviderIcon } from 'src/components/CloudProviderIcon';
 import { ButtonPrimary, IdContainer, LabeledCheckbox, Link, Select, spinnerOverlay } from 'src/components/common';
 import { icon } from 'src/components/icons';
+import { InfoBox } from 'src/components/InfoBox';
 import { TextArea, ValidatedInput } from 'src/components/input';
 import Modal from 'src/components/Modal';
-import { InfoBox } from 'src/components/PopupTrigger';
 import {
   allRegions,
   availableBucketRegions,

diff --git a/src/components/PopupTrigger.js b/src/components/PopupTrigger.js
@@ -3,7 +3,6 @@ import _ from 'lodash/fp';
 import { Children, cloneElement, Fragment, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { div, h, hr } from 'react-hyperscript-helpers';
 import onClickOutside from 'react-onclickoutside';
-import { Clickable } from 'src/components/common';
 import { icon } from 'src/components/icons';
 import { VerticalNavigation } from 'src/components/keyboard-nav';
 import { computePopupPosition, PopupPortal, useDynamicPosition } from 'src/components/popup-utils';
@@ -106,31 +105,6 @@ const PopupTrigger = forwardRefWithName(
 
 export default PopupTrigger;
 
-export const InfoBox = ({ size, children, style, side, tooltip, iconOverride }) => {
-  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 const makeMenuIcon = (iconName, props) => {
   return icon(iconName, _.merge({ size: 15, style: { marginRight: '.3rem' } }, props));
 };

diff --git a/src/components/TitleBar.ts b/src/components/TitleBar.ts
@@ -3,12 +3,12 @@ import { div, h } from 'react-hyperscript-helpers';
 import { Link } from 'src/components/common';
 import { icon } from 'src/components/icons';
 
-interface ITitleBar {
-  id: string;
-  onPrevious: MouseEventHandler | undefined;
+interface TitleBarProps {
+  id?: string;
+  onPrevious?: MouseEventHandler;
   title: ReactNode;
   onDismiss: MouseEventHandler;
-  titleChildren: ReactNode;
+  titleChildren?: ReactNode;
   style?: React.CSSProperties;
   titleStyles?: React.CSSProperties;
   hideCloseButton?: boolean;
@@ -23,7 +23,7 @@ const TitleBar = ({
   style = {},
   titleStyles = {},
   hideCloseButton = false,
-}: ITitleBar) => {
+}: TitleBarProps) => {
   return div(
     {
       id,

diff --git a/src/components/file-browser/DownloadFileCommand.ts b/src/components/file-browser/DownloadFileCommand.ts
@@ -48,7 +48,7 @@ export const DownloadFileCommand = (props: DownloadFileCommandProps) => {
           children: undefined,
           disabled: !downloadCommand,
           style: { marginLeft: '1ch' },
-          text: downloadCommand,
+          text: downloadCommand || ' ',
           onClick: undefined,
         }),
       ]

diff --git a/src/components/group-common.js b/src/components/group-common.js
@@ -3,10 +3,11 @@ import { Fragment, useState } from 'react';
 import { b, div, h, label } from 'react-hyperscript-helpers';
 import { ButtonPrimary, IdContainer, LabeledCheckbox, Link, spinnerOverlay } from 'src/components/common';
 import { icon } from 'src/components/icons';
+import { InfoBox } from 'src/components/InfoBox';
 import { AutocompleteTextInput } from 'src/components/input';
 import { MenuButton } from 'src/components/MenuButton';
 import Modal from 'src/components/Modal';
-import { InfoBox, makeMenuIcon, MenuTrigger } from 'src/components/PopupTrigger';
+import { makeMenuIcon, MenuTrigger } from 'src/components/PopupTrigger';
 import { ariaSort, HeaderRenderer } from 'src/components/table';
 import TooltipTrigger from 'src/components/TooltipTrigger';
 import { Ajax } from 'src/libs/ajax';