chore: DH-1469 Move ACL Editor Components (#1501)

Copied common ACL Editor components to Community.

resolves #1469

Author: bmingles

package-lock.json

@@ -23,6 +23,7 @@
     "build:sass": "sass --embed-sources --load-path=../../node_modules ./src:./dist ./scss/BaseStyleSheet.scss:./css/BaseStyleSheet.css"
   },
   "dependencies": {
+    "@adobe/react-spectrum": "^3.29.0",
     "@deephaven/icons": "file:../icons",
     "@deephaven/log": "file:../log",
     "@deephaven/react-hooks": "file:../react-hooks",

packages/components/package.json

@@ -0,0 +1,30 @@
+import { ActionBar } from '@adobe/react-spectrum';
+import type { StyleProps } from '@react-types/shared';
+import commonStyles from './SpectrumComponent.module.scss';
+
+export interface BulkActionBarProps {
+  styleProps?: StyleProps;
+  selectedItemCount: 'all' | number;
+  onClearSelection: () => void;
+}
+
+export function BulkActionBar({
+  styleProps,
+  selectedItemCount,
+  onClearSelection,
+}: BulkActionBarProps) {
+  return (
+    <ActionBar
+      UNSAFE_className={commonStyles.spectrumActionBar}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...styleProps}
+      isEmphasized
+      selectedItemCount={selectedItemCount}
+      onClearSelection={onClearSelection}
+    >
+      {/* */}
+    </ActionBar>
+  );
+}
+
+export default BulkActionBar;

packages/components/src/BulkActionBar.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { Key, useCallback } from 'react';
+import { ComboBox, Item, SpectrumComboBoxProps } from '@adobe/react-spectrum';
+import type { FocusableRef } from '@react-types/shared';
+import type { ReactSpectrumComponent } from '@deephaven/react-hooks';
+import TextWithTooltip from './TextWithTooltip';
+
+export interface SearchableComboboxProps<TItem, TKey extends Key>
+  extends Omit<
+    SpectrumComboBoxProps<TItem>,
+    'children' | 'menuTrigger' | 'onSelectionChange'
+  > {
+  getItemDisplayText: (item: TItem | null | undefined) => string | null;
+  getKey: (item: TItem | null | undefined) => TKey | null;
+  scrollRef: React.RefObject<ReactSpectrumComponent<HTMLElement>>;
+  onSelectionChange: (key: TKey | null) => void;
+}
+
+export function SearchableCombobox<TItem, TKey extends Key>({
+  scrollRef,
+  getItemDisplayText,
+  getKey,
+  ...props
+}: SearchableComboboxProps<TItem, TKey>) {
+  const renderItem = useCallback(
+    item => {
+      const key = getKey(item);
+      const displayText = getItemDisplayText(item);
+
+      return (
+        <Item key={key} textValue={displayText ?? String(key)}>
+          <TextWithTooltip text={displayText} />
+        </Item>
+      );
+    },
+    [getItemDisplayText, getKey]
+  );
+
+  return (
+    <ComboBox
+      {...props}
+      // The `ref`prop type defined by React Spectrum is incorrect here
+      ref={scrollRef as unknown as FocusableRef<HTMLElement>}
+      menuTrigger="focus"
+      // Type assertion is necessary since <ComboBox> types don't recognize the
+      // generic key arg
+      onSelectionChange={props.onSelectionChange as (key: Key | null) => void}
+    >
+      {renderItem}
+    </ComboBox>
+  );
+}
+
+export default SearchableCombobox;

packages/components/src/SearchableCombobox.tsx

@@ -0,0 +1,20 @@
+/**
+ * The Spectrum ActionBar hard codes a max-width: 960px for the content area.
+ * Overriding so the bar fills the same width as its associated list component.
+ */
+.spectrumActionBar {
+  [class^='react-spectrum-ActionBar-bar'] {
+    max-width: none;
+  }
+}
+
+.spectrumDialogComponentHeading {
+  font-weight: normal;
+  overflow-wrap: break-word;
+}
+
+.spectrumEllipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

packages/components/src/SpectrumComponent.module.scss

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  Content,
+  Heading,
+  Icon,
+  IllustratedMessage,
+} from '@adobe/react-spectrum';
+import { vsEmptyWindow } from '@deephaven/icons';
+
+const DEFAULT_DELAY_MS = 500;
+
+export interface TableViewEmptyStateProps {
+  heading: string;
+  content?: string;
+  delayMs?: number;
+}
+
+export function TableViewEmptyState({
+  heading,
+  content,
+  delayMs = DEFAULT_DELAY_MS,
+}: TableViewEmptyStateProps) {
+  const [show, setShow] = useState(false);
+
+  // Spectrum `TableView` will render the result of `renderEmptyState` prop
+  // immediately, and it will be hidden once data loads. In cases where the data
+  // load is quick, there is a jarring flicker, and the empty data message is
+  // not helpful. This delay will avoid showing the message if data loads within
+  // the `delayMs`.
+  useEffect(() => {
+    window.setTimeout(() => {
+      setShow(true);
+    }, delayMs);
+  }, [delayMs]);
+
+  return show ? (
+    <IllustratedMessage>
+      <Icon size="XXL">
+        <FontAwesomeIcon icon={vsEmptyWindow} />
+      </Icon>
+      <Heading>{heading}</Heading>
+      {content == null ? null : <Content>{content}</Content>}
+    </IllustratedMessage>
+  ) : null;
+}
+
+export default TableViewEmptyState;

packages/components/src/TableViewEmptyState.tsx

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import { Text } from '@adobe/react-spectrum';
+import stylesCommon from './SpectrumComponent.module.scss';
+import { PopperOptions, Tooltip } from './popper';
+
+export interface TextWithTooltipProps {
+  text?: string | null;
+  placement?: PopperOptions['placement'];
+}
+
+export function TextWithTooltip({
+  text,
+  placement = 'top-start',
+}: TextWithTooltipProps) {
+  const options = useMemo(() => ({ placement }), [placement]);
+
+  return (
+    <>
+      <Text UNSAFE_className={stylesCommon.spectrumEllipsis}>
+        {text ?? (
+          /* &nbsp; so that height doesn't collapse when empty */
+          <>&nbsp;</>
+        )}
+      </Text>
+      {text == null || text === '' ? null : (
+        <Tooltip options={options}>{text}</Tooltip>
+      )}
+    </>
+  );
+}
+
+export default TextWithTooltip;

packages/components/src/TextWithTooltip.tsx

@@ -0,0 +1,56 @@
+import { ReactElement, ReactNode, useCallback } from 'react';
+import type { SpectrumLabelableProps } from '@react-types/shared';
+import { vsTrash } from '@deephaven/icons';
+import { ACTION_ICON_HEIGHT } from '@deephaven/utils';
+import { ActionButtonDialogTrigger, ConfirmationDialog } from '../dialogs';
+
+export interface ConfirmActionButtonProps {
+  ariaLabel: string;
+  heading: ReactNode;
+  confirmationButtonLabel: string;
+  children:
+    | ReactElement<SpectrumLabelableProps>
+    | ReactElement<SpectrumLabelableProps>[];
+  isHidden?: boolean;
+  onConfirm: () => void;
+}
+
+export function ConfirmActionButton({
+  ariaLabel,
+  heading,
+  confirmationButtonLabel,
+  isHidden,
+  children,
+  onConfirm,
+}: ConfirmActionButtonProps) {
+  const renderDialog = useCallback(
+    close => (
+      <ConfirmationDialog
+        heading={heading}
+        confirmationButtonLabel={confirmationButtonLabel}
+        onCancel={close}
+        onConfirm={() => {
+          close();
+          onConfirm();
+        }}
+      >
+        {children}
+      </ConfirmationDialog>
+    ),
+    [children, confirmationButtonLabel, heading, onConfirm]
+  );
+
+  return (
+    <ActionButtonDialogTrigger
+      ariaLabel={ariaLabel}
+      icon={vsTrash}
+      isHidden={isHidden}
+      isQuiet
+      height={ACTION_ICON_HEIGHT}
+    >
+      {renderDialog}
+    </ActionButtonDialogTrigger>
+  );
+}
+
+export default ConfirmActionButton;

packages/components/src/actions/ConfirmActionButton.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import {
+  ActionButton,
+  Icon,
+  SpectrumActionButtonProps,
+} from '@adobe/react-spectrum';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { ACTION_ICON_HEIGHT } from '@deephaven/utils';
+
+export interface IconActionButtonProps
+  extends Omit<SpectrumActionButtonProps, 'aria-label' | 'isQuiet' | 'height'> {
+  icon: IconProp;
+  label: string;
+}
+
+export function IconActionButton({
+  icon,
+  label,
+  ...props
+}: IconActionButtonProps) {
+  return (
+    <ActionButton
+      {...props}
+      aria-label={label}
+      isQuiet
+      height={ACTION_ICON_HEIGHT}
+    >
+      <Icon>
+        <FontAwesomeIcon icon={icon} />
+      </Icon>
+    </ActionButton>
+  );
+}
+IconActionButton.displayName = 'IconActionButton';
+
+export default IconActionButton;

packages/components/src/actions/IconActionButton.tsx

@@ -0,0 +1,2 @@
+export * from './ConfirmActionButton';
+export * from './IconActionButton';