[dagit] Clean up a bunch of document titles (#11715)

### Summary & Motivation

Our document titles are a mess. It looks like we haven't touched them in ages.

Clean them up, especially for Overview, Runs, and code location list views.

### How I Tested These Changes

Load Dagit, click around and verify that document titles update nicely.

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

@@ -2,6 +2,7 @@ import {Box, Heading, PageHeader, Subheading} from '@dagster-io/ui';
 import * as React from 'react';
 
 import {useTrackPageView} from '../app/analytics';
+import {useDocumentTitle} from '../hooks/useDocumentTitle';
 import {ReloadAllButton} from '../workspace/ReloadAllButton';
 import {RepositoryLocationsList} from '../workspace/RepositoryLocationsList';
 import {WorkspaceContext} from '../workspace/WorkspaceContext';
@@ -11,6 +12,7 @@ import {InstanceTabs} from './InstanceTabs';
 
 export const CodeLocationsPage = () => {
   useTrackPageView();
+  useDocumentTitle('Code locations');
 
   const {pageTitle} = React.useContext(InstancePageContext);
   const {locationEntries, loading} = React.useContext(WorkspaceContext);

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

@@ -31,6 +31,7 @@ const PAGE_SIZE = 10;
 
 export const InstanceBackfills = () => {
   useTrackPageView();
+  useDocumentTitle('Overview | Backfills');
 
   const queryData = useQuery<InstanceHealthForBackfillsQuery>(INSTANCE_HEALTH_FOR_BACKFILLS_QUERY);
 
@@ -51,7 +52,6 @@ export const InstanceBackfills = () => {
         : [],
   });
   const refreshState = useQueryRefreshAtInterval(queryResult, FIFTEEN_SECONDS);
-  useDocumentTitle('Backfills');
 
   return (
     <Page>

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

@@ -17,6 +17,7 @@ import {createGlobalStyle} from 'styled-components/macro';
 
 import {useQueryRefreshAtInterval, FIFTEEN_SECONDS} from '../app/QueryRefresh';
 import {useTrackPageView} from '../app/analytics';
+import {useDocumentTitle} from '../hooks/useDocumentTitle';
 
 import {InstancePageContext} from './InstancePageContext';
 import {InstanceTabs} from './InstanceTabs';
@@ -36,6 +37,7 @@ const InstanceConfigStyle = createGlobalStyle`
 
 export const InstanceConfig = React.memo(() => {
   useTrackPageView();
+  useDocumentTitle('Configuration');
 
   const {pageTitle} = React.useContext(InstancePageContext);
   const queryResult = useQuery<InstanceConfigQuery>(INSTANCE_CONFIG_QUERY, {

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../app/QueryRefresh';
 import {useTrackPageView} from '../app/analytics';
+import {useDocumentTitle} from '../hooks/useDocumentTitle';
 
 import {DaemonList} from './DaemonList';
 import {INSTANCE_HEALTH_FRAGMENT} from './InstanceHealthFragment';
@@ -13,6 +14,7 @@ import {InstanceHealthQuery} from './types/InstanceHealthPage.types';
 
 export const InstanceHealthPage = () => {
   useTrackPageView();
+  useDocumentTitle('Daemons');
 
   const {pageTitle} = React.useContext(InstancePageContext);
   const queryData = useQuery<InstanceHealthQuery>(INSTANCE_HEALTH_QUERY, {

js_modules/dagit/packages/core/src/overview/OverviewJobsRoot.tsx

@@ -6,6 +6,7 @@ import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment';
 import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../app/QueryRefresh';
 import {useTrackPageView} from '../app/analytics';
 import {isHiddenAssetGroupJob} from '../asset-graph/Utils';
+import {useDocumentTitle} from '../hooks/useDocumentTitle';
 import {RepoFilterButton} from '../instance/RepoFilterButton';
 import {WorkspaceContext} from '../workspace/WorkspaceContext';
 import {buildRepoAddress} from '../workspace/buildRepoAddress';
@@ -20,6 +21,7 @@ import {visibleRepoKeys} from './visibleRepoKeys';
 
 export const OverviewJobsRoot = () => {
   useTrackPageView();
+  useDocumentTitle('Overview | Jobs');
 
   const [searchValue, setSearchValue] = React.useState('');
   const {allRepos, visibleRepos} = React.useContext(WorkspaceContext);

js_modules/dagit/packages/core/src/overview/OverviewSchedulesRoot.tsx

@@ -18,6 +18,7 @@ import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment';
 import {PythonErrorInfo} from '../app/PythonErrorInfo';
 import {useQueryRefreshAtInterval, FIFTEEN_SECONDS} from '../app/QueryRefresh';
 import {useTrackPageView} from '../app/analytics';
+import {useDocumentTitle} from '../hooks/useDocumentTitle';
 import {INSTANCE_HEALTH_FRAGMENT} from '../instance/InstanceHealthFragment';
 import {RepoFilterButton} from '../instance/RepoFilterButton';
 import {INSTIGATION_STATE_FRAGMENT} from '../instigation/InstigationUtils';
@@ -41,6 +42,7 @@ import {visibleRepoKeys} from './visibleRepoKeys';
 
 export const OverviewSchedulesRoot = () => {
   useTrackPageView();
+  useDocumentTitle('Overview | Schedules');
 
   const [searchValue, setSearchValue] = React.useState('');
   const {allRepos, visibleRepos} = React.useContext(WorkspaceContext);

js_modules/dagit/packages/core/src/overview/OverviewSensorsRoot.tsx

@@ -18,6 +18,7 @@ import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment';
 import {PythonErrorInfo} from '../app/PythonErrorInfo';
 import {useQueryRefreshAtInterval, FIFTEEN_SECONDS} from '../app/QueryRefresh';
 import {useTrackPageView} from '../app/analytics';
+import {useDocumentTitle} from '../hooks/useDocumentTitle';
 import {INSTANCE_HEALTH_FRAGMENT} from '../instance/InstanceHealthFragment';
 import {RepoFilterButton} from '../instance/RepoFilterButton';
 import {INSTIGATION_STATE_FRAGMENT} from '../instigation/InstigationUtils';
@@ -40,6 +41,7 @@ import {visibleRepoKeys} from './visibleRepoKeys';
 
 export const OverviewSensorsRoot = () => {
   useTrackPageView();
+  useDocumentTitle('Overview | Sensors');
 
   const [searchValue, setSearchValue] = React.useState('');
   const {allRepos, visibleRepos} = React.useContext(WorkspaceContext);

js_modules/dagit/packages/core/src/overview/OverviewTimelineRoot.tsx

@@ -32,7 +32,7 @@ const hourWindowToOffset = (hourWindow: HourWindow) => {
 
 export const OverviewTimelineRoot = () => {
   useTrackPageView();
-  useDocumentTitle('Runs');
+  useDocumentTitle('Overview | Timeline');
 
   const {allRepos, visibleRepos} = React.useContext(WorkspaceContext);
 

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

@@ -5,11 +5,29 @@ import * as React from 'react';
 import {useLocation} from 'react-router-dom';
 
 import {RunStatus} from '../graphql/types';
+import {useDocumentTitle} from '../hooks/useDocumentTitle';
 import {TabLink} from '../ui/TabLink';
 
 import {doneStatuses, inProgressStatuses, queuedStatuses} from './RunStatuses';
 import {runsPathWithFilters, useQueryPersistedRunFilters} from './RunsFilterInput';
 
+const getDocumentTitle = (selected: ReturnType<typeof useSelectedRunsTab>) => {
+  switch (selected) {
+    case 'all':
+      return 'Runs | All runs';
+    case 'done':
+      return 'Runs | Done';
+    case 'in-progress':
+      return 'Runs | In progress';
+    case 'queued':
+      return 'Runs | Queued';
+    case 'scheduled':
+      return 'Runs | Scheduled';
+    default:
+      return 'Runs';
+  }
+};
+
 interface Props {
   queuedCount: number | null;
   inProgressCount: number | null;
@@ -19,6 +37,8 @@ export const RunListTabs: React.FC<Props> = React.memo(({queuedCount, inProgress
   const [filterTokens] = useQueryPersistedRunFilters();
   const selectedTab = useSelectedRunsTab(filterTokens);
 
+  useDocumentTitle(getDocumentTitle(selectedTab));
+
   const urlForStatus = (statuses: RunStatus[]) => {
     const tokensMinusStatus = filterTokens.filter((token) => token.token !== 'status');
     const statusTokens = statuses.map((status) => ({token: 'status' as const, value: status}));

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

@@ -6,6 +6,7 @@ import {useParams} from 'react-router-dom';
 import {formatElapsedTime} from '../app/Util';
 import {useTrackPageView} from '../app/analytics';
 import {isHiddenAssetGroupJob} from '../asset-graph/Utils';
+import {useDocumentTitle} from '../hooks/useDocumentTitle';
 import {PipelineReference} from '../pipelines/PipelineReference';
 import {TimestampDisplay} from '../schedules/TimestampDisplay';
 import {isThisThingAJob} from '../workspace/WorkspaceContext';
@@ -24,6 +25,7 @@ export const RunRoot = () => {
   useTrackPageView();
 
   const {runId} = useParams<{runId: string}>();
+  useDocumentTitle(runId ? `Run ${runId.slice(0, 8)}` : 'Run');
 
   const {data, loading} = useQuery<RunRootQuery, RunRootQueryVariables>(RUN_ROOT_QUERY, {
     partialRefetch: true,

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

@@ -16,7 +16,6 @@ import {Link} from 'react-router-dom';
 import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment';
 import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../app/QueryRefresh';
 import {useTrackPageView} from '../app/analytics';
-import {useDocumentTitle} from '../hooks/useDocumentTitle';
 import {InstancePageContext} from '../instance/InstancePageContext';
 import {useCanSeeConfig} from '../instance/useCanSeeConfig';
 import {Loading} from '../ui/Loading';
@@ -44,7 +43,6 @@ const PAGE_SIZE = 25;
 
 export const RunsRoot = () => {
   useTrackPageView();
-  useDocumentTitle('Runs');
 
   const [filterTokens, setFilterTokens] = useQueryPersistedRunFilters();
   const filter = runsFilterForSearchTokens(filterTokens);

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

@@ -18,7 +18,7 @@ import {SchedulerInfoQuery} from './types/ScheduledRunListRoot.types';
 
 export const ScheduledRunListRoot = () => {
   useTrackPageView();
-  useDocumentTitle('Scheduled runs');
+  useDocumentTitle('Runs | Scheduled');
 
   const queryResult = useQuery<SchedulerInfoQuery>(SCHEDULER_INFO_QUERY, {
     partialRefetch: true,

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

@@ -6,6 +6,7 @@ import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment';
 import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../app/QueryRefresh';
 import {useTrackPageView} from '../app/analytics';
 import {useAssetNodeSearch} from '../assets/useAssetSearch';
+import {useDocumentTitle} from '../hooks/useDocumentTitle';
 
 import {VirtualizedRepoAssetTable} from './VirtualizedRepoAssetTable';
 import {WorkspaceHeader} from './WorkspaceHeader';
@@ -20,6 +21,9 @@ import {
 export const WorkspaceAssetsRoot = ({repoAddress}: {repoAddress: RepoAddress}) => {
   useTrackPageView();
 
+  const repoName = repoAddressAsHumanString(repoAddress);
+  useDocumentTitle(`Assets: ${repoName}`);
+
   const [searchValue, setSearchValue] = React.useState('');
   const selector = repoAddressToSelector(repoAddress);
 
@@ -58,8 +62,6 @@ export const WorkspaceAssetsRoot = ({repoAddress}: {repoAddress: RepoAddress}) =
       );
     }
 
-    const repoName = repoAddressAsHumanString(repoAddress);
-
     if (!filteredBySearch.length) {
       if (anySearch) {
         return (

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

@@ -6,6 +6,7 @@ import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment';
 import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../app/QueryRefresh';
 import {useTrackPageView} from '../app/analytics';
 import {isHiddenAssetGroupJob} from '../asset-graph/Utils';
+import {useDocumentTitle} from '../hooks/useDocumentTitle';
 
 import {Graph, VirtualizedGraphTable} from './VirtualizedGraphTable';
 import {WorkspaceHeader} from './WorkspaceHeader';
@@ -20,6 +21,9 @@ import {
 export const WorkspaceGraphsRoot = ({repoAddress}: {repoAddress: RepoAddress}) => {
   useTrackPageView();
 
+  const repoName = repoAddressAsHumanString(repoAddress);
+  useDocumentTitle(`Graphs: ${repoName}`);
+
   const [searchValue, setSearchValue] = React.useState('');
   const selector = repoAddressToSelector(repoAddress);
 
@@ -85,8 +89,6 @@ export const WorkspaceGraphsRoot = ({repoAddress}: {repoAddress: RepoAddress}) =
       );
     }
 
-    const repoName = repoAddressAsHumanString(repoAddress);
-
     if (!filteredBySearch.length) {
       if (anySearch) {
         return (

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

@@ -6,6 +6,7 @@ import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment';
 import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../app/QueryRefresh';
 import {useTrackPageView} from '../app/analytics';
 import {isHiddenAssetGroupJob} from '../asset-graph/Utils';
+import {useDocumentTitle} from '../hooks/useDocumentTitle';
 
 import {VirtualizedJobTable} from './VirtualizedJobTable';
 import {WorkspaceHeader} from './WorkspaceHeader';
@@ -17,6 +18,9 @@ import {WorkspaceJobsQuery, WorkspaceJobsQueryVariables} from './types/Workspace
 export const WorkspaceJobsRoot = ({repoAddress}: {repoAddress: RepoAddress}) => {
   useTrackPageView();
 
+  const repoName = repoAddressAsHumanString(repoAddress);
+  useDocumentTitle(`Jobs: ${repoName}`);
+
   const [searchValue, setSearchValue] = React.useState('');
 
   const selector = repoAddressToSelector(repoAddress);
@@ -61,8 +65,6 @@ export const WorkspaceJobsRoot = ({repoAddress}: {repoAddress: RepoAddress}) =>
       );
     }
 
-    const repoName = repoAddressAsHumanString(repoAddress);
-
     if (!filteredBySearch.length) {
       if (anySearch) {
         return (

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

@@ -2,13 +2,19 @@ import {Box} from '@dagster-io/ui';
 import * as React from 'react';
 
 import {useTrackPageView} from '../app/analytics';
+import {useDocumentTitle} from '../hooks/useDocumentTitle';
 import {OpsRoot} from '../ops/OpsRoot';
 
 import {WorkspaceHeader} from './WorkspaceHeader';
+import {repoAddressAsHumanString} from './repoAddressAsString';
 import {RepoAddress} from './types';
 
 export const WorkspaceOpsRoot = ({repoAddress}: {repoAddress: RepoAddress}) => {
   useTrackPageView();
+
+  const repoName = repoAddressAsHumanString(repoAddress);
+  useDocumentTitle(`Ops: ${repoName}`);
+
   return (
     <Box flex={{direction: 'column'}} style={{height: '100%', overflow: 'hidden'}}>
       <WorkspaceHeader repoAddress={repoAddress} tab="ops" />

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

@@ -5,6 +5,7 @@ import * as React from 'react';
 import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment';
 import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../app/QueryRefresh';
 import {useTrackPageView} from '../app/analytics';
+import {useDocumentTitle} from '../hooks/useDocumentTitle';
 
 import {VirtualizedScheduleTable} from './VirtualizedScheduleTable';
 import {WorkspaceHeader} from './WorkspaceHeader';
@@ -19,6 +20,9 @@ import {
 export const WorkspaceSchedulesRoot = ({repoAddress}: {repoAddress: RepoAddress}) => {
   useTrackPageView();
 
+  const repoName = repoAddressAsHumanString(repoAddress);
+  useDocumentTitle(`Schedules: ${repoName}`);
+
   const [searchValue, setSearchValue] = React.useState('');
   const selector = repoAddressToSelector(repoAddress);
 
@@ -60,8 +64,6 @@ export const WorkspaceSchedulesRoot = ({repoAddress}: {repoAddress: RepoAddress}
       );
     }
 
-    const repoName = repoAddressAsHumanString(repoAddress);
-
     if (!filteredBySearch.length) {
       if (anySearch) {
         return (

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

@@ -5,6 +5,7 @@ import * as React from 'react';
 import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment';
 import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../app/QueryRefresh';
 import {useTrackPageView} from '../app/analytics';
+import {useDocumentTitle} from '../hooks/useDocumentTitle';
 
 import {VirtualizedSensorTable} from './VirtualizedSensorTable';
 import {WorkspaceHeader} from './WorkspaceHeader';
@@ -19,6 +20,9 @@ import {
 export const WorkspaceSensorsRoot = ({repoAddress}: {repoAddress: RepoAddress}) => {
   useTrackPageView();
 
+  const repoName = repoAddressAsHumanString(repoAddress);
+  useDocumentTitle(`Sensors: ${repoName}`);
+
   const [searchValue, setSearchValue] = React.useState('');
   const selector = repoAddressToSelector(repoAddress);
 
@@ -60,8 +64,6 @@ export const WorkspaceSensorsRoot = ({repoAddress}: {repoAddress: RepoAddress})
       );
     }
 
-    const repoName = repoAddressAsHumanString(repoAddress);
-
     if (!filteredBySearch.length) {
       if (anySearch) {
         return (