feat(draggableTabs): Add new draggable tabs component

static/app/components/draggableTabs/draggableTab.tsx

@@ -0,0 +1,68 @@
+import type React from 'react';
+import {forwardRef} from 'react';
+import styled from '@emotion/styled';
+import type {AriaTabProps} from '@react-aria/tabs';
+import {useTab} from '@react-aria/tabs';
+import {useObjectRef} from '@react-aria/utils';
+import type {TabListState} from '@react-stately/tabs';
+import type {Node, Orientation} from '@react-types/shared';
+
+import {BaseTab} from 'sentry/components/tabs/tab';
+
+interface DraggableTabProps extends AriaTabProps {
+  item: Node<any>;
+  orientation: Orientation;
+  /**
+   * Whether this tab is overflowing the TabList container. If so, the tab
+   * needs to be visually hidden. Users can instead select it via an overflow
+   * menu.
+   */
+  overflowing: boolean;
+  state: TabListState<any>;
+}
+
+export const DraggableTab = forwardRef(
+  (
+    {item, state, orientation, overflowing}: DraggableTabProps,
+    forwardedRef: React.ForwardedRef<HTMLLIElement>
+  ) => {
+    const ref = useObjectRef(forwardedRef);
+
+    const {
+      key,
+      rendered,
+      props: {to, hidden},
+    } = item;
+    const {tabProps, isSelected} = useTab({key, isDisabled: hidden}, state, ref);
+
+    return (
+      <StyledBaseTab
+        tabProps={tabProps}
+        isSelected={isSelected}
+        to={to}
+        hidden={hidden}
+        orientation={orientation}
+        overflowing={overflowing}
+        ref={ref}
+        variant="filled"
+      >
+        <TabContentWrap>{rendered}</TabContentWrap>
+      </StyledBaseTab>
+    );
+  }
+);
+
+const StyledBaseTab = styled(BaseTab)`
+  padding: 2px 12px 2px 12px;
+  gap: 8px;
+  border-radius: 6px 6px 0px 0px;
+  border: 1px solid ${p => p.theme.gray200};
+  opacity: 0px;
+`;
+
+const TabContentWrap = styled('span')`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 6px;
+`;

static/app/components/draggableTabs/draggableTabList.tsx

@@ -0,0 +1,251 @@
+import {useContext, useEffect, useMemo, useRef} from 'react';
+import styled from '@emotion/styled';
+import type {AriaTabListOptions} from '@react-aria/tabs';
+import {useTabList} from '@react-aria/tabs';
+import {useCollection} from '@react-stately/collections';
+import {ListCollection} from '@react-stately/list';
+import type {TabListStateOptions} from '@react-stately/tabs';
+import {useTabListState} from '@react-stately/tabs';
+import type {Node, Orientation} from '@react-types/shared';
+import {Reorder} from 'framer-motion';
+
+import type {SelectOption} from 'sentry/components/compactSelect';
+import {TabsContext} from 'sentry/components/tabs';
+import {OverflowMenu, useOverflowTabs} from 'sentry/components/tabs/tabList';
+import {tabsShouldForwardProp} from 'sentry/components/tabs/utils';
+import {space} from 'sentry/styles/space';
+import {browserHistory} from 'sentry/utils/browserHistory';
+import type {Tab} from 'sentry/views/issueList/draggableTabBar';
+
+import {DraggableTab} from './draggableTab';
+import type {DraggableTabListItemProps} from './item';
+import {Item} from './item';
+
+interface BaseDraggableTabListProps extends DraggableTabListProps {
+  items: DraggableTabListItemProps[];
+  setTabs: (tabs: Tab[]) => void;
+  tabs: Tab[];
+}
+
+function BaseDraggableTabList({
+  hideBorder = false,
+  className,
+  outerWrapStyles,
+  tabs,
+  setTabs,
+  ...props
+}: BaseDraggableTabListProps) {
+  const tabListRef = useRef<HTMLUListElement>(null);
+  const {rootProps, setTabListState} = useContext(TabsContext);
+  const {
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    orientation = 'horizontal',
+    keyboardActivation = 'manual',
+    ...otherRootProps
+  } = rootProps;
+
+  // Load up list state
+  const ariaProps = {
+    selectedKey: value,
+    defaultSelectedKey: defaultValue,
+    onSelectionChange: key => {
+      onChange?.(key);
+
+      // If the newly selected tab is a tab link, then navigate to the specified link
+      const linkTo = [...(props.items ?? [])].find(item => item.key === key)?.to;
+      if (!linkTo) {
+        return;
+      }
+      browserHistory.push(linkTo);
+    },
+    isDisabled: disabled,
+    keyboardActivation,
+    ...otherRootProps,
+    ...props,
+  };
+
+  const state = useTabListState(ariaProps);
+
+  const {tabListProps} = useTabList({orientation, ...ariaProps}, state, tabListRef);
+  useEffect(() => {
+    setTabListState(state);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);
+
+  // Detect tabs that overflow from the wrapper and put them in an overflow menu
+  const tabItemsRef = useRef<Record<string | number, HTMLLIElement | null>>({});
+  const overflowTabs = useOverflowTabs({
+    tabListRef,
+    tabItemsRef,
+    tabItems: props.items,
+  });
+
+  const overflowMenuItems = useMemo(() => {
+    // Sort overflow items in the order that they appear in TabList
+    const sortedKeys = [...state.collection].map(item => item.key);
+    const sortedOverflowTabs = overflowTabs.sort(
+      (a, b) => sortedKeys.indexOf(a) - sortedKeys.indexOf(b)
+    );
+
+    return sortedOverflowTabs.flatMap<SelectOption<string | number>>(key => {
+      const item = state.collection.getItem(key);
+
+      if (!item) {
+        return [];
+      }
+
+      return {
+        value: key,
+        label: item.props.children,
+        disabled: item.props.disabled,
+        textValue: item.textValue,
+      };
+    });
+  }, [state.collection, overflowTabs]);
+
+  return (
+    <TabListOuterWrap style={outerWrapStyles}>
+      <Reorder.Group axis="x" values={tabs} onReorder={setTabs} as="div">
+        <TabListWrap
+          {...tabListProps}
+          orientation={orientation}
+          hideBorder={hideBorder}
+          className={className}
+          ref={tabListRef}
+        >
+          {[...state.collection].map(item => (
+            <Reorder.Item
+              key={item.key}
+              value={tabs.find(tab => tab.key === item.key)}
+              style={{display: 'flex', flexDirection: 'row'}}
+            >
+              <DraggableTab
+                key={item.key}
+                item={item}
+                state={state}
+                orientation={orientation}
+                overflowing={
+                  orientation === 'horizontal' && overflowTabs.includes(item.key)
+                }
+                ref={element => (tabItemsRef.current[item.key] = element)}
+              />
+              {state.selectedKey !== item.key &&
+                state.collection.getKeyAfter(item.key) !== state.selectedKey && (
+                  <TabDivider />
+                )}
+            </Reorder.Item>
+          ))}
+        </TabListWrap>
+      </Reorder.Group>
+
+      {orientation === 'horizontal' && overflowMenuItems.length > 0 && (
+        <OverflowMenu
+          state={state}
+          overflowMenuItems={overflowMenuItems}
+          disabled={disabled}
+        />
+      )}
+    </TabListOuterWrap>
+  );
+}
+
+const collectionFactory = (nodes: Iterable<Node<any>>) => new ListCollection(nodes);
+
+export interface DraggableTabListProps
+  extends AriaTabListOptions<DraggableTabListItemProps>,
+    TabListStateOptions<DraggableTabListItemProps> {
+  setTabs: (tabs: Tab[]) => void;
+  tabs: Tab[];
+  className?: string;
+  hideBorder?: boolean;
+  outerWrapStyles?: React.CSSProperties;
+}
+
+/**
+ * To be used as a direct child of the <Tabs /> component. See example usage
+ * in tabs.stories.js
+ */
+export function DraggableTabList({
+  items,
+  tabs,
+  setTabs,
+  ...props
+}: DraggableTabListProps) {
+  const collection = useCollection({items, ...props}, collectionFactory);
+
+  const parsedItems = useMemo(
+    () => [...collection].map(({key, props: itemProps}) => ({key, ...itemProps})),
+    [collection]
+  );
+
+  /**
+   * List of keys of disabled items (those with a `disbled` prop) to be passed
+   * into `BaseTabList`.
+   */
+  const disabledKeys = useMemo(
+    () => parsedItems.filter(item => item.disabled).map(item => item.key),
+    [parsedItems]
+  );
+
+  return (
+    <BaseDraggableTabList
+      tabs={tabs}
+      items={parsedItems}
+      disabledKeys={disabledKeys}
+      setTabs={setTabs}
+      {...props}
+    >
+      {item => <Item {...item} />}
+    </BaseDraggableTabList>
+  );
+}
+
+DraggableTabList.Item = Item;
+
+const TabDivider = styled('div')`
+  height: 50%;
+  width: 1px;
+  border-radius: 6px;
+  background-color: ${p => p.theme.gray200};
+  margin: 9px auto;
+`;
+
+const TabListOuterWrap = styled('div')`
+  position: relative;
+`;
+
+const TabListWrap = styled('ul', {
+  shouldForwardProp: tabsShouldForwardProp,
+})<{
+  hideBorder: boolean;
+  orientation: Orientation;
+}>`
+  position: relative;
+  display: grid;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+  flex-shrink: 0;
+  padding-left: 15px;
+
+  ${p =>
+    p.orientation === 'horizontal'
+      ? `
+        grid-auto-flow: column;
+        justify-content: start;
+        gap: ${space(0.5)};
+        ${!p.hideBorder && `border-bottom: solid 1px ${p.theme.border};`}
+        stroke-dasharray: 4, 3;
+      `
+      : `
+        height: 100%;
+        grid-auto-flow: row;
+        align-content: start;
+        gap: 1px;
+        padding-right: ${space(2)};
+        ${!p.hideBorder && `border-right: solid 1px ${p.theme.border};`}
+      `};
+`;

static/app/components/draggableTabs/index.stories.tsx

@@ -0,0 +1,64 @@
+import {Fragment} from 'react';
+import styled from '@emotion/styled';
+
+import JSXNode from 'sentry/components/stories/jsxNode';
+import SizingWindow from 'sentry/components/stories/sizingWindow';
+import storyBook from 'sentry/stories/storyBook';
+import {DraggableTabBar} from 'sentry/views/issueList/draggableTabBar';
+
+const TabPanelContainer = styled('div')`
+  width: 90%;
+  height: 250px;
+  background-color: white;
+`;
+
+export default storyBook(DraggableTabBar, story => {
+  const TABS = [
+    {
+      key: 'one',
+      label: 'Inbox',
+      content: <TabPanelContainer>This is the Inbox view</TabPanelContainer>,
+    },
+    {
+      key: 'two',
+      label: 'For Review',
+      content: <TabPanelContainer>This is the For Review view</TabPanelContainer>,
+    },
+    {
+      key: 'three',
+      label: 'Regressed',
+      content: <TabPanelContainer>This is the Regressed view</TabPanelContainer>,
+    },
+  ];
+
+  story('Default', () => (
+    <Fragment>
+      <p>
+        You should be using all of <JSXNode name="Tabs" />, <JSXNode name="TabList" />,{' '}
+        <JSXNode name="TabList.Item" />, <JSXNode name="DroppableTabPanels" /> and
+        <JSXNode name="DroppableTabPanels.Item" /> components.
+      </p>
+      <p>
+        This will give you all kinds of accessibility and state tracking out of the box.
+        But you will have to render all tab content, including hooks, upfront.
+      </p>
+      <SizingWindow>
+        <TabBarContainer>
+          <DraggableTabBar
+            tabs={TABS}
+            tempTabContent={
+              <TabPanelContainer>This is a temporary tab</TabPanelContainer>
+            }
+          />
+        </TabBarContainer>
+      </SizingWindow>
+    </Fragment>
+  ));
+});
+
+const TabBarContainer = styled('div')`
+  display: flex;
+  justify-content: start;
+  width: 90%;
+  height: 300px;
+`;

static/app/components/draggableTabs/item.tsx

@@ -0,0 +1,12 @@
+import {Item as _Item} from '@react-stately/collections';
+import type {ItemProps} from '@react-types/shared';
+import type {LocationDescriptor} from 'history';
+
+export interface DraggableTabListItemProps extends ItemProps<any> {
+  key: string | number;
+  disabled?: boolean;
+  hidden?: boolean;
+  to?: LocationDescriptor;
+}
+
+export const Item = _Item as (props: DraggableTabListItemProps) => JSX.Element;