[dagster-io/ui] Eliminate RR dependency (#7285)

js_modules/dagit/packages/core/src/assets/AssetTable.tsx

@@ -7,7 +7,6 @@ import {
   IconWIP,
   markdownToPlaintext,
   MenuItemWIP,
-  MenuLink,
   MenuWIP,
   Popover,
   Table,
@@ -21,6 +20,7 @@ import {tokenForAssetKey} from '../app/Util';
 import {useSelectionReducer} from '../hooks/useSelectionReducer';
 import {RepositoryLink} from '../nav/RepositoryLink';
 import {instanceAssetsExplorerPathToURL} from '../pipelines/PipelinePathUtils';
+import {MenuLink} from '../ui/MenuLink';
 
 import {AssetLink} from './AssetLink';
 import {AssetWipeDialog} from './AssetWipeDialog';

js_modules/dagit/packages/core/src/instance/InstanceOverviewPage.tsx

@@ -1,7 +1,6 @@
 import {gql, useLazyQuery, useQuery} from '@apollo/client';
 import {
   Box,
-  AnchorButton,
   ButtonWIP,
   ButtonGroup,
   ColorsWIP,
@@ -36,6 +35,7 @@ import {RunTimeFragment} from '../runs/types/RunTimeFragment';
 import {SCHEDULE_SWITCH_FRAGMENT} from '../schedules/ScheduleSwitch';
 import {SENSOR_SWITCH_FRAGMENT} from '../sensors/SensorSwitch';
 import {RunStatus} from '../types/globalTypes';
+import {AnchorButton} from '../ui/AnchorButton';
 import {REPOSITORY_INFO_FRAGMENT} from '../workspace/RepositoryInformation';
 import {WorkspaceContext} from '../workspace/WorkspaceContext';
 import {__ASSET_GROUP} from '../workspace/asset-graph/Utils';

js_modules/dagit/packages/core/src/instance/InstanceTabs.tsx

@@ -1,8 +1,9 @@
 import {QueryResult} from '@apollo/client';
-import {Box, Tab, Tabs} from '@dagster-io/ui';
+import {Box, Tabs} from '@dagster-io/ui';
 import * as React from 'react';
 
 import {QueryRefreshCountdown, QueryRefreshState} from '../app/QueryRefresh';
+import {TabLink} from '../ui/TabLink';
 
 import {useCanSeeConfig} from './useCanSeeConfig';
 
@@ -22,12 +23,12 @@ export const InstanceTabs = <TData extends Record<string, any>>(props: Props<TDa
   return (
     <Box flex={{direction: 'row', justifyContent: 'space-between', alignItems: 'flex-end'}}>
       <Tabs selectedTabId={tab}>
-        <Tab id="overview" title="Overview" to="/instance/overview" />
-        <Tab id="health" title={healthTitle} to="/instance/health" />
-        <Tab id="schedules" title="Schedules" to="/instance/schedules" />
-        <Tab id="sensors" title="Sensors" to="/instance/sensors" />
-        <Tab id="backfills" title="Backfills" to="/instance/backfills" />
-        {canSeeConfig ? <Tab id="config" title="Configuration" to="/instance/config" /> : null}
+        <TabLink id="overview" title="Overview" to="/instance/overview" />
+        <TabLink id="health" title={healthTitle} to="/instance/health" />
+        <TabLink id="schedules" title="Schedules" to="/instance/schedules" />
+        <TabLink id="sensors" title="Sensors" to="/instance/sensors" />
+        <TabLink id="backfills" title="Backfills" to="/instance/backfills" />
+        {canSeeConfig ? <TabLink id="config" title="Configuration" to="/instance/config" /> : null}
       </Tabs>
       {refreshState ? (
         <Box padding={{bottom: 8}}>

js_modules/dagit/packages/core/src/instance/JobMenu.tsx

@@ -1,11 +1,12 @@
 import {gql, useLazyQuery} from '@apollo/client';
-import {ButtonWIP, IconWIP, MenuWIP, MenuLink, MenuItemWIP, Popover, Tooltip} from '@dagster-io/ui';
+import {ButtonWIP, IconWIP, MenuWIP, MenuItemWIP, Popover, Tooltip} from '@dagster-io/ui';
 import * as React from 'react';
 
 import {DISABLED_MESSAGE, usePermissions} from '../app/Permissions';
 import {canRunAllSteps, canRunFromFailure} from '../runs/RunActionButtons';
 import {RunFragments} from '../runs/RunFragments';
 import {useJobReExecution} from '../runs/useJobReExecution';
+import {MenuLink} from '../ui/MenuLink';
 import {RepoAddress} from '../workspace/types';
 import {workspacePipelinePath} from '../workspace/workspacePath';
 

js_modules/dagit/packages/core/src/nav/PipelineNav.tsx

@@ -1,5 +1,5 @@
 import {IconName} from '@blueprintjs/core';
-import {Box, PageHeader, Tab, Tabs, TagWIP, Heading, Tooltip} from '@dagster-io/ui';
+import {Box, PageHeader, Tabs, TagWIP, Heading, Tooltip} from '@dagster-io/ui';
 import React from 'react';
 import {useRouteMatch} from 'react-router-dom';
 
@@ -9,6 +9,7 @@ import {
   explorerPathToString,
   ExplorerPath,
 } from '../pipelines/PipelinePathUtils';
+import {TabLink} from '../ui/TabLink';
 import {isThisThingAJob, useRepository} from '../workspace/WorkspaceContext';
 import {RepoAddress} from '../workspace/types';
 import {workspacePathFromAddress} from '../workspace/workspacePath';
@@ -131,7 +132,7 @@ export const PipelineNav: React.FC<Props> = (props) => {
               ) : (
                 text
               );
-              return <Tab key={text} id={text} title={title} disabled={disabled} to={href} />;
+              return <TabLink key={text} id={text} title={title} disabled={disabled} to={href} />;
             })}
           </Tabs>
         }

js_modules/dagit/packages/core/src/partitions/PartitionRunMatrix.tsx

@@ -7,7 +7,6 @@ import {
   DialogWIP,
   IconWIP,
   MenuItemWIP,
-  MenuLink,
   MenuWIP,
   Popover,
   FontFamily,
@@ -21,6 +20,7 @@ import {useViewport} from '../gantt/useViewport';
 import {QueryPersistedStateConfig, useQueryPersistedState} from '../hooks/useQueryPersistedState';
 import {GRAPH_EXPLORER_SOLID_HANDLE_FRAGMENT} from '../pipelines/GraphExplorer';
 import {RunFilterToken} from '../runs/RunsFilterInput';
+import {MenuLink} from '../ui/MenuLink';
 import {repoAddressToSelector} from '../workspace/repoAddressToSelector';
 import {RepoAddress} from '../workspace/types';
 

js_modules/dagit/packages/core/src/pipelines/SidebarTabbedContainer.tsx

@@ -1,10 +1,11 @@
 import {gql} from '@apollo/client';
-import {Box, ColorsWIP, Tab, Tabs} from '@dagster-io/ui';
+import {Box, ColorsWIP, Tabs} from '@dagster-io/ui';
 import * as React from 'react';
 
 import {OpNameOrPath} from '../ops/OpNameOrPath';
 import {TypeExplorerContainer} from '../typeexplorer/TypeExplorerContainer';
 import {TypeListContainer} from '../typeexplorer/TypeListContainer';
+import {TabLink} from '../ui/TabLink';
 import {RepoAddress} from '../workspace/types';
 
 import {RightInfoPanelContent} from './GraphExplorer';
@@ -114,7 +115,7 @@ export const SidebarTabbedContainer: React.FC<ISidebarTabbedContainerProps> = (p
       >
         <Tabs selectedTabId={activeTab}>
           {TabDefinitions.map(({name, key}) => (
-            <Tab id={key} key={key} to={{search: `?tab=${key}`}} title={name} />
+            <TabLink id={key} key={key} to={{search: `?tab=${key}`}} title={name} />
           ))}
         </Tabs>
       </Box>

js_modules/dagit/packages/core/src/runs/RunActionsMenu.tsx

@@ -6,7 +6,6 @@ import {
   MenuDividerWIP,
   MenuExternalLink,
   MenuItemWIP,
-  MenuLink,
   MenuWIP,
   Popover,
   Tooltip,
@@ -18,6 +17,7 @@ import * as yaml from 'yaml';
 import {AppContext} from '../app/AppContext';
 import {showCustomAlert} from '../app/CustomAlertProvider';
 import {usePermissions} from '../app/Permissions';
+import {MenuLink} from '../ui/MenuLink';
 import {isThisThingAJob} from '../workspace/WorkspaceContext';
 import {useRepositoryForRun} from '../workspace/useRepositoryForRun';
 import {workspacePipelinePath, workspacePipelinePathGuessRepo} from '../workspace/workspacePath';

js_modules/dagit/packages/core/src/schedules/SchedulesNextTicks.tsx

@@ -11,7 +11,6 @@ import {
   HighlightedCodeBlock,
   IconWIP,
   MenuItemWIP,
-  MenuLink,
   MenuWIP,
   NonIdealState,
   Popover,
@@ -29,6 +28,7 @@ import {PythonErrorInfo, PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorInfo';
 import {PipelineReference} from '../pipelines/PipelineReference';
 import {RunTags} from '../runs/RunTags';
 import {InstigationStatus} from '../types/globalTypes';
+import {MenuLink} from '../ui/MenuLink';
 import {
   findRepositoryAmongOptions,
   isThisThingAJob,

js_modules/dagit/packages/core/src/schedules/SchedulesTable.tsx

@@ -3,7 +3,6 @@ import {
   ButtonWIP,
   ColorsWIP,
   IconWIP,
-  MenuLink,
   MenuWIP,
   Popover,
   Table,
@@ -18,6 +17,7 @@ import {TickTag} from '../instigation/InstigationTick';
 import {InstigatedRunStatus} from '../instigation/InstigationUtils';
 import {PipelineReference} from '../pipelines/PipelineReference';
 import {InstigationStatus, InstigationType} from '../types/globalTypes';
+import {MenuLink} from '../ui/MenuLink';
 import {isThisThingAJob, useRepository} from '../workspace/WorkspaceContext';
 import {RepoAddress} from '../workspace/types';
 import {workspacePathFromAddress} from '../workspace/workspacePath';

js_modules/dagit/packages/core/src/snapshots/SnapshotNav.tsx

@@ -1,9 +1,10 @@
 import {gql, useQuery} from '@apollo/client';
-import {PageHeader, Tab, Tabs, TagWIP, Heading, FontFamily} from '@dagster-io/ui';
+import {PageHeader, Tabs, TagWIP, Heading, FontFamily} from '@dagster-io/ui';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
 
 import {explorerPathToString, ExplorerPath} from '../pipelines/PipelinePathUtils';
+import {TabLink} from '../ui/TabLink';
 import {useActivePipelineForName} from '../workspace/WorkspaceContext';
 import {workspacePipelinePathGuessRepo} from '../workspace/workspacePath';
 
@@ -105,7 +106,7 @@ export const SnapshotNav = (props: SnapshotNavProps) => {
         <Tabs selectedTabId={activeTab}>
           {tabs.map((tab) => {
             const {href, text, pathComponent} = tab;
-            return <Tab key={text} id={pathComponent} title={text} to={href} />;
+            return <TabLink key={text} id={pathComponent} title={text} to={href} />;
           })}
         </Tabs>
       }

js_modules/dagit/packages/ui/src/components/AnchorButton.stories.tsx → js_modules/dagit/packages/core/src/ui/AnchorButton.stories.tsx

@@ -1,9 +1,8 @@
+import {ExternalAnchorButton, Group, Icon} from '@dagster-io/ui';
 import {Meta} from '@storybook/react/types-6-0';
 import * as React from 'react';
 
-import {AnchorButton, ExternalAnchorButton} from './Button';
-import {Group} from './Group';
-import {Icon as Icon} from './Icon';
+import {AnchorButton} from './AnchorButton';
 
 // eslint-disable-next-line import/no-default-export
 export default {

js_modules/dagit/packages/core/src/ui/AnchorButton.tsx

@@ -0,0 +1,39 @@
+// eslint-disable-next-line no-restricted-imports
+import {AnchorButton as BlueprintAnchorButton} from '@blueprintjs/core';
+import {
+  intentToFillColor,
+  intentToStrokeColor,
+  intentToTextColor,
+  StyledButton,
+  StyledButtonText,
+} from '@dagster-io/ui';
+import * as React from 'react';
+import {Link, LinkProps} from 'react-router-dom';
+
+interface AnchorButtonProps
+  extends Omit<React.ComponentProps<typeof BlueprintAnchorButton>, 'loading' | 'onClick' | 'type'>,
+    LinkProps {
+  label?: React.ReactNode;
+}
+
+export const AnchorButton = React.forwardRef(
+  (props: AnchorButtonProps, ref: React.ForwardedRef<HTMLAnchorElement>) => {
+    const {children, icon, intent, outlined, rightIcon, ...rest} = props;
+    return (
+      <StyledButton
+        {...rest}
+        as={Link}
+        $fillColor={intentToFillColor(intent, outlined)}
+        $strokeColor={intentToStrokeColor(intent, outlined)}
+        $textColor={intentToTextColor(intent, outlined)}
+        ref={ref}
+      >
+        {icon || null}
+        {children ? <StyledButtonText>{children}</StyledButtonText> : null}
+        {rightIcon || null}
+      </StyledButton>
+    );
+  },
+);
+
+AnchorButton.displayName = 'AnchorButton';

js_modules/dagit/packages/core/src/ui/MenuLink.tsx

@@ -1,3 +1,63 @@
-// todo dish: Move implementation from `ui`
+// eslint-disable-next-line no-restricted-imports
+import {MenuItem} from '@blueprintjs/core';
+import {Box, ColorsWIP, CommonMenuItemProps, IconWrapper, iconWithColor} from '@dagster-io/ui';
+import * as React from 'react';
+import {Link, LinkProps} from 'react-router-dom';
+import styled from 'styled-components/macro';
 
-export {MenuLink} from '@dagster-io/ui';
+interface MenuLinkProps
+  extends CommonMenuItemProps,
+    Omit<React.ComponentProps<typeof MenuItem>, 'icon' | 'onClick'>,
+    LinkProps {}
+
+/**
+ * If you want to use a menu item as a link, use `MenuLink` and provide a `to` prop.
+ */
+export const MenuLink: React.FC<MenuLinkProps> = (props) => {
+  const {icon, intent, text, ...rest} = props;
+
+  return (
+    <StyledMenuLink {...rest}>
+      <Box flex={{direction: 'row', gap: 8, alignItems: 'center'}}>
+        {iconWithColor(icon, intent)}
+        <div>{text}</div>
+      </Box>
+    </StyledMenuLink>
+  );
+};
+
+const StyledMenuLink = styled(Link)`
+  text-decoration: none;
+
+  border-radius: 4px;
+  display: block;
+  line-height: 20px;
+  padding: 6px 8px 6px 12px;
+  transition: background-color 50ms, box-shadow 150ms;
+  align-items: flex-start;
+  user-select: none;
+
+  /**
+   * Use margin instead of align-items: center because the contents of the menu item may wrap 
+   * in unusual circumstances.
+   */
+  ${IconWrapper} {
+    margin-top: 2px;
+  }
+
+  ${IconWrapper}:first-child {
+    margin-left: -4px;
+  }
+
+  &&&:link,
+  &&&:visited,
+  &&&:hover,
+  &&&:active {
+    color: ${ColorsWIP.Gray900};
+    text-decoration: none;
+  }
+
+  &&&:hover {
+    background: ${ColorsWIP.Gray100};
+  }
+`;

js_modules/dagit/packages/core/src/ui/TabLink.tsx

@@ -0,0 +1,24 @@
+import {TabStyleProps, getTabA11yProps, getTabContent, tabCSS} from '@dagster-io/ui';
+import * as React from 'react';
+import {Link, LinkProps} from 'react-router-dom';
+import styled from 'styled-components/macro';
+
+interface TabLinkProps extends TabStyleProps, Omit<LinkProps, 'title'> {
+  title?: React.ReactNode;
+}
+
+export const TabLink = styled((props: TabLinkProps) => {
+  const {to, title, ...rest} = props;
+  const containerProps = getTabA11yProps(props);
+  const content = getTabContent(props);
+
+  const titleText = typeof title === 'string' ? title : undefined;
+
+  return (
+    <Link to={to} title={titleText} {...containerProps} {...rest}>
+      {content}
+    </Link>
+  );
+})<TabLinkProps>`
+  ${tabCSS}
+`;

js_modules/dagit/packages/core/src/workspace/WorkspaceRepoRoot.tsx

@@ -1,11 +1,12 @@
-import {Box, PageHeader, Tab, Tabs, TagWIP, Heading} from '@dagster-io/ui';
+import {Box, PageHeader, Tabs, TagWIP, Heading} from '@dagster-io/ui';
 import * as React from 'react';
 import {Redirect, Route, Switch, useParams} from 'react-router-dom';
 import styled from 'styled-components/macro';
 
 import {OpsRoot} from '../ops/OpsRoot';
 import {SchedulesRoot} from '../schedules/SchedulesRoot';
 import {SensorsRoot} from '../sensors/SensorsRoot';
+import {TabLink} from '../ui/TabLink';
 
 import {RepositoryAssetsList} from './RepositoryAssetsList';
 import {RepositoryGraphsList} from './RepositoryGraphsList';
@@ -83,7 +84,7 @@ export const WorkspaceRepoRoot: React.FC<Props> = (props) => {
         tabs={
           <Tabs size="small" selectedTabId={activeTab()}>
             {tabs.map(({href, text}) => (
-              <Tab key={text} id={text} title={text} to={href} />
+              <TabLink key={text} id={text} title={text} to={href} />
             ))}
           </Tabs>
         }

js_modules/dagit/packages/ui/package.json

@@ -29,8 +29,6 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
-    "react-router": "^5.2.1",
-    "react-router-dom": "^5.3.0",
     "styled-components": "^5.3.3"
   },
   "dependencies": {

js_modules/dagit/packages/ui/rollup.config.js

@@ -60,8 +60,6 @@ export default {
     'react',
     'react-dom',
     'react-is',
-    'react-router',
-    'react-router-dom',
     'react-virtualized',
     'styled-components',
   ],