[ui] Lint against window.open

js_modules/dagster-ui/packages/eslint-config/index.js

@@ -58,6 +58,21 @@ module.exports = {
       },
     ],
     'no-alert': 'error',
+    'no-restricted-properties': [
+      'error',
+      {
+        object: 'window',
+        property: 'open',
+        message: 'Please use the `useOpenInNewTab` hook instead.',
+      },
+    ],
+    'no-restricted-globals': [
+      'error',
+      {
+        name: 'open',
+        message: 'Please use the `useOpenInNewTab` hook instead.',
+      },
+    ],
     'no-unused-vars': 'off', // or "@typescript-eslint/no-unused-vars": "off",
     'unused-imports/no-unused-imports': 'error',
     'unused-imports/no-unused-vars': [

js_modules/dagster-ui/packages/ui-core/src/assets/AssetGroupRoot.tsx

@@ -18,6 +18,7 @@ import {AssetGraphViewType} from '../asset-graph/Utils';
 import {AssetLocation} from '../asset-graph/useFindAssetLocation';
 import {AssetGroupSelector} from '../graphql/types';
 import {useDocumentTitle} from '../hooks/useDocumentTitle';
+import {useOpenInNewTab} from '../hooks/useOpenInNewTab';
 import {RepositoryLink} from '../nav/RepositoryLink';
 import {
   ExplorerPath,
@@ -48,6 +49,7 @@ export const AssetGroupRoot = ({
   const history = useHistory();
 
   useDocumentTitle(`Asset Group: ${groupName}`);
+  const openInNewTab = useOpenInNewTab();
 
   const groupPath = workspacePathFromAddress(repoAddress, `/asset-groups/${groupName}`);
   const groupSelector = useMemo(
@@ -83,12 +85,12 @@ export const AssetGroupRoot = ({
         path = assetDetailsPathForKey(node.assetKey, {view: 'definition'});
       }
       if (e.metaKey) {
-        window.open(path, '_blank');
+        openInNewTab(path);
       } else {
         history.push(path);
       }
     },
-    [history],
+    [history, openInNewTab],
   );
 
   const fetchOptions = React.useMemo(() => ({groupSelector}), [groupSelector]);

js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeLineageGraph.tsx

@@ -18,6 +18,7 @@ import {DEFAULT_MAX_ZOOM, SVGViewport} from '../graph/SVGViewport';
 import {useAssetLayout} from '../graph/asyncGraphLayout';
 import {isNodeOffscreen} from '../graph/common';
 import {AssetKeyInput} from '../graphql/types';
+import {useOpenInNewTab} from '../hooks/useOpenInNewTab';
 
 export type AssetNodeLineageGraphProps = {
   assetKey: AssetKeyInput;
@@ -30,6 +31,7 @@ export const AssetNodeLineageGraph = ({
   assetGraphData,
   params,
 }: AssetNodeLineageGraphProps) => {
+  const openInNewTab = useOpenInNewTab();
   const assetGraphId = toGraphId(assetKey);
 
   const {allGroups, groupedAssets} = useMemo(() => {
@@ -60,7 +62,7 @@ export const AssetNodeLineageGraph = ({
       lineageDepth: 1,
     });
     if (e.metaKey) {
-      window.open(document.location.host + path);
+      openInNewTab(path);
     } else {
       history.push(path);
     }

js_modules/dagster-ui/packages/ui-core/src/assets/AssetsGlobalGraphRoot.tsx

@@ -14,6 +14,7 @@ import {AssetGraphViewType} from '../asset-graph/Utils';
 import {AssetGraphFetchScope} from '../asset-graph/useAssetGraphData';
 import {AssetLocation} from '../asset-graph/useFindAssetLocation';
 import {useDocumentTitle} from '../hooks/useDocumentTitle';
+import {useOpenInNewTab} from '../hooks/useOpenInNewTab';
 import {ExplorerPath} from '../pipelines/PipelinePathUtils';
 
 interface AssetGroupRootParams {
@@ -26,6 +27,7 @@ export const AssetsGlobalGraphRoot = () => {
   const history = useHistory();
 
   useDocumentTitle(`Global Asset Lineage`);
+  const openInNewTab = useOpenInNewTab();
 
   const onChangeExplorerPath = useCallback(
     (path: ExplorerPath, mode: 'push' | 'replace') => {
@@ -41,12 +43,12 @@ export const AssetsGlobalGraphRoot = () => {
     (e: Pick<React.MouseEvent<any>, 'metaKey'>, node: AssetLocation) => {
       const path = assetDetailsPathForKey(node.assetKey, {view: 'definition'});
       if (e.metaKey) {
-        window.open(path, '_blank');
+        openInNewTab(path);
       } else {
         history.push(path);
       }
     },
-    [history],
+    [history, openInNewTab],
   );
 
   const fetchOptions = useMemo(() => {

js_modules/dagster-ui/packages/ui-core/src/hooks/useOpenInNewTab.tsx

@@ -1,12 +1,16 @@
-import {useContext} from 'react';
+import {useCallback, useContext} from 'react';
 
 import {AppContext} from '../app/AppContext';
 
 // Open a path in a new tab. Incorporates the base path to ensure that
 // the link opens to the appropriate deployment.
 export const useOpenInNewTab = () => {
   const {basePath} = useContext(AppContext);
-  return (path: string) => {
-    window.open(`${basePath}${path}`, '_blank');
-  };
+  return useCallback(
+    (path: string) => {
+      // eslint-disable-next-line no-restricted-properties
+      window.open(`${basePath}${path}`, '_blank');
+    },
+    [basePath],
+  );
 };

js_modules/dagster-ui/packages/ui-core/src/insights/InsightsBarChart.tsx

@@ -21,6 +21,7 @@ import {RenderTooltipFn, renderInsightsChartTooltip} from './renderInsightsChart
 import {BarDatapoint, BarValue, DatapointType, ReportingUnitType} from './types';
 import {TimeContext} from '../app/time/TimeContext';
 import {useRGBColorsForTheme} from '../app/useRGBColorsForTheme';
+import {useOpenInNewTab} from '../hooks/useOpenInNewTab';
 import {useFormatDateTime} from '../ui/useFormatDateTime';
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Filler);
@@ -55,6 +56,7 @@ export const InsightsBarChart = (props: Props) => {
 
   const rgbColors = useRGBColorsForTheme();
   const [canShowSpinner, setCanShowSpinner] = React.useState(false);
+  const openInNewTab = useOpenInNewTab();
 
   React.useEffect(() => {
     const timer = setTimeout(() => {
@@ -103,12 +105,12 @@ export const InsightsBarChart = (props: Props) => {
       if (element) {
         const whichBar = values[element.index];
         if (whichBar?.href) {
-          window.open(whichBar.href);
+          openInNewTab(whichBar.href);
         }
         return;
       }
     },
-    [values],
+    [values, openInNewTab],
   );
 
   const renderTooltipFn: RenderTooltipFn = useCallback(

js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineExplorerRoot.oss.tsx

@@ -23,6 +23,7 @@ import {AssetGraphViewType} from '../asset-graph/Utils';
 import {AssetLocation} from '../asset-graph/useFindAssetLocation';
 import {assetDetailsPathForKey} from '../assets/assetDetailsPathForKey';
 import {useDocumentTitle} from '../hooks/useDocumentTitle';
+import {useOpenInNewTab} from '../hooks/useOpenInNewTab';
 import {METADATA_ENTRY_FRAGMENT} from '../metadata/MetadataEntryFragment';
 import {Loading} from '../ui/Loading';
 import {buildPipelineSelector} from '../workspace/WorkspaceContext/util';
@@ -36,6 +37,7 @@ export const PipelineExplorerSnapshotRoot = () => {
   const {pipelineName, snapshotId} = explorerPath;
   const history = useHistory();
 
+  const openInNewTab = useOpenInNewTab();
   useDocumentTitle(`Snapshot: ${pipelineName}${snapshotId ? `@${snapshotId.slice(0, 8)}` : ''}`);
 
   return (
@@ -47,7 +49,7 @@ export const PipelineExplorerSnapshotRoot = () => {
       onNavigateToSourceAssetNode={(e, {assetKey}) => {
         const path = assetDetailsPathForKey(assetKey);
         if (e.metaKey) {
-          window.open(path, '_blank');
+          openInNewTab(path);
         } else {
           history.push(assetDetailsPathForKey(assetKey));
         }

js_modules/dagster-ui/packages/ui-core/src/pipelines/PipelineOverviewRoot.tsx

@@ -13,6 +13,7 @@ import {useTrackPageView} from '../app/analytics';
 import {tokenForAssetKey} from '../asset-graph/Utils';
 import {AssetLocation} from '../asset-graph/useFindAssetLocation';
 import {assetDetailsPathForKey} from '../assets/assetDetailsPathForKey';
+import {useOpenInNewTab} from '../hooks/useOpenInNewTab';
 import {isThisThingAJob, useRepository} from '../workspace/WorkspaceContext/util';
 import {RepoAddress} from '../workspace/types';
 import {workspacePathFromAddress} from '../workspace/workspacePath';
@@ -31,6 +32,7 @@ export const PipelineOverviewRoot = (props: Props) => {
   const pathStr = (params as any)['0'];
   const explorerPath = useMemo(() => explorerPathFromString(pathStr), [pathStr]);
 
+  const openInNewTab = useOpenInNewTab();
   const repo = useRepository(repoAddress);
   const isJob = isThisThingAJob(repo, explorerPath.pipelineName);
 
@@ -58,7 +60,7 @@ export const PipelineOverviewRoot = (props: Props) => {
         // but there can be a description.
         const path = assetDetailsPathForKey(node.assetKey, {view: 'definition'});
         if (e.metaKey) {
-          window.open(path, '_blank');
+          openInNewTab(path);
         } else {
           history.push(path);
         }
@@ -80,7 +82,7 @@ export const PipelineOverviewRoot = (props: Props) => {
         ),
       });
     },
-    [explorerPath, history, location.search],
+    [explorerPath, history, location.search, openInNewTab],
   );
 
   return (

js_modules/dagster-ui/packages/ui-core/src/runs/RunHeaderActions.tsx

@@ -105,6 +105,7 @@ export const RunHeaderActions = ({run, isJob}: {run: RunFragment; isJob: boolean
                 <MenuItem
                   text="Download debug file"
                   icon="download_for_offline"
+                  // eslint-disable-next-line no-restricted-properties
                   onClick={() => window.open(`${rootServerURI}/download_debug/${run.id}`)}
                 />
               </Tooltip>