[ui] Automation polish

js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNavLinks.tsx

@@ -113,7 +113,7 @@ export const navLinks = () => {
         </TopNavLink>
       ),
     };
-    return [overview, assets, jobs, automation, runs, deployment];
+    return [overview, runs, assets, jobs, automation, deployment];
   }
 
   const deployment = {

js_modules/dagster-ui/packages/ui-core/src/app/ContentRoot.tsx

@@ -9,7 +9,7 @@ import {lazy} from '../util/lazy';
 
 const WorkspaceRoot = lazy(() => import('../workspace/WorkspaceRoot'));
 const OverviewRoot = lazy(() => import('../overview/OverviewRoot'));
-const AutomationRoot = lazy(() => import('../automation/AutomationRoot'));
+const MergedAutomationRoot = lazy(() => import('../automation/MergedAutomationRoot'));
 const FallthroughRoot = lazy(() =>
   import('src/app/FallthroughRoot.oss').then((mod) => ({default: mod.FallthroughRoot})),
 );
@@ -86,7 +86,7 @@ export const ContentRoot = memo(() => {
             <JobsRoot />
           </Route>
           <Route path="/automation">
-            <AutomationRoot />
+            <MergedAutomationRoot />
           </Route>
           <Route path="/deployment">
             <SettingsRoot />

js_modules/dagster-ui/packages/ui-core/src/assets/auto-materialization/AutomaterializationRoot.tsx

@@ -2,23 +2,26 @@ import {Page} from '@dagster-io/ui-components';
 import {Redirect} from 'react-router-dom';
 
 import {GlobalAutomaterializationContent} from './GlobalAutomaterializationContent';
+import {useFeatureFlags} from '../../app/Flags';
 import {assertUnreachable} from '../../app/Util';
 import {useTrackPageView} from '../../app/analytics';
 import {useDocumentTitle} from '../../hooks/useDocumentTitle';
 import {OverviewPageHeader} from '../../overview/OverviewPageHeader';
 import {useAutoMaterializeSensorFlag} from '../AutoMaterializeSensorFlag';
 
 // Determine whether the user is flagged to see automaterialize policies as
-// sensors. If so, redirect to the Sensors overview.
+// sensors. If so, redirect to either the merged Automations page or the Sensors overview,
+// depending on their nav flag state.
 export const AutomaterializationRoot = () => {
   const automaterializeSensorsFlagState = useAutoMaterializeSensorFlag();
+  const {flagSettingsPage} = useFeatureFlags();
   switch (automaterializeSensorsFlagState) {
     case 'unknown':
       return <div />; // Waiting for result
     case 'has-global-amp':
       return <GlobalAutomaterializationRoot />;
     case 'has-sensor-amp':
-      return <Redirect to="/overview/sensors" />;
+      return <Redirect to={flagSettingsPage ? '/automation' : '/overview/sensors'} />;
     default:
       assertUnreachable(automaterializeSensorsFlagState);
   }

js_modules/dagster-ui/packages/ui-core/src/automation/MergedAutomationRoot.tsx

@@ -325,6 +325,9 @@ export const MergedAutomationRoot = () => {
   );
 };
 
+// eslint-disable-next-line import/no-default-export
+export default MergedAutomationRoot;
+
 const buildBuckets = (
   locationEntries: Extract<WorkspaceLocationNodeFragment, {__typename: 'WorkspaceLocationEntry'}>[],
 ) => {

js_modules/dagster-ui/packages/ui-core/src/automation/VirtualizedAutomationRow.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import {HeaderCell, HeaderRow} from '../ui/VirtualizedTable';
 
-export const TEMPLATE_COLUMNS = '60px minmax(400px, 1.5fr) 220px 1fr 200px 200px';
+export const TEMPLATE_COLUMNS = '60px minmax(400px, 1.5fr) 240px 1fr 200px 200px';
 
 export const VirtualizedAutomationHeader = ({checkbox}: {checkbox: React.ReactNode}) => {
   return (

js_modules/dagster-ui/packages/ui-core/src/automation/VirtualizedAutomationSensorRow.tsx

@@ -152,7 +152,10 @@ export const VirtualizedAutomationSensorRow = forwardRef(
             <div>
               {sensorInfo ? (
                 sensorInfo.description ? (
-                  <Tooltip content={sensorInfo.description}>
+                  <Tooltip
+                    content={<div style={{maxWidth: '300px'}}>{sensorInfo.description}</div>}
+                    placement="top"
+                  >
                     <Tag icon={sensorInfo.icon}>{sensorInfo.name}</Tag>
                   </Tooltip>
                 ) : (

js_modules/dagster-ui/packages/ui-core/src/overview/OverviewRoot.tsx

@@ -7,12 +7,14 @@ import {OverviewSchedulesRoot} from './OverviewSchedulesRoot';
 import {OverviewSensorsRoot} from './OverviewSensorsRoot';
 import {useFeatureFlags} from '../app/Flags';
 import {Route} from '../app/Route';
+import {useAutoMaterializeSensorFlag} from '../assets/AutoMaterializeSensorFlag';
 import {AutomaterializationRoot} from '../assets/auto-materialization/AutomaterializationRoot';
 import {InstanceBackfillsRoot} from '../instance/InstanceBackfillsRoot';
 import {BackfillPage} from '../instance/backfill/BackfillPage';
 
 export const OverviewRoot = () => {
   const {flagSettingsPage} = useFeatureFlags();
+  const automaterializeSensorsFlagState = useAutoMaterializeSensorFlag();
   return (
     <Switch>
       <Route path="/overview/activity" isNestingRoute>
@@ -25,38 +27,25 @@ export const OverviewRoot = () => {
       <Route
         path="/overview/schedules"
         render={() =>
-          flagSettingsPage ? <Redirect to="/automation/schedules" /> : <OverviewSchedulesRoot />
+          flagSettingsPage ? <Redirect to="/automation" /> : <OverviewSchedulesRoot />
         }
       />
       <Route
         path="/overview/sensors"
-        render={() =>
-          flagSettingsPage ? <Redirect to="/automation/sensors" /> : <OverviewSensorsRoot />
-        }
+        render={() => (flagSettingsPage ? <Redirect to="/automation" /> : <OverviewSensorsRoot />)}
       />
       <Route
         path="/overview/automation"
         render={() =>
-          flagSettingsPage ? <Redirect to="/automation" /> : <AutomaterializationRoot />
-        }
-      />
-      <Route
-        path="/overview/backfills/:backfillId"
-        render={({match}) =>
-          flagSettingsPage ? (
-            <Redirect to={`/automation/backfills/${match.params.backfillId}`} />
+          flagSettingsPage && automaterializeSensorsFlagState !== 'has-global-amp' ? (
+            <Redirect to="/automation" />
           ) : (
-            <BackfillPage />
+            <AutomaterializationRoot />
           )
         }
       />
-      <Route
-        path="/overview/backfills"
-        exact
-        render={() =>
-          flagSettingsPage ? <Redirect to="/automation/backfills" /> : <InstanceBackfillsRoot />
-        }
-      />
+      <Route path="/overview/backfills/:backfillId" render={() => <BackfillPage />} />
+      <Route path="/overview/backfills" exact render={() => <InstanceBackfillsRoot />} />
       <Route path="/overview/resources">
         <OverviewResourcesRoot />
       </Route>

js_modules/dagster-ui/packages/ui-core/src/overview/OverviewTabs.tsx

@@ -37,7 +37,7 @@ export const OverviewTabs = <TData extends Record<string, any>>(props: Props<TDa
           <TabLink id="schedules" title="Schedules" to="/overview/schedules" />
         )}
         {flagSettingsPage ? null : <TabLink id="sensors" title="Sensors" to="/overview/sensors" />}
-        {!flagSettingsPage && automaterializeSensorsFlagState === 'has-global-amp' ? (
+        {automaterializeSensorsFlagState === 'has-global-amp' ? (
           <TabLink
             id="amp"
             title={
@@ -64,9 +64,7 @@ export const OverviewTabs = <TData extends Record<string, any>>(props: Props<TDa
           />
         ) : null}
         <TabLink id="resources" title="Resources" to="/overview/resources" />
-        {flagSettingsPage ? null : (
-          <TabLink id="backfills" title="Backfills" to="/overview/backfills" />
-        )}
+        <TabLink id="backfills" title="Backfills" to="/overview/backfills" />
       </Tabs>
       {refreshState ? (
         <Box padding={{bottom: 8}}>

js_modules/dagster-ui/packages/ui-core/src/schedules/ScheduleSwitch.tsx

@@ -1,5 +1,5 @@
 import {gql, useMutation, useQuery} from '@apollo/client';
-import {Checkbox, Colors, Icon, Spinner, Tooltip} from '@dagster-io/ui-components';
+import {Box, Checkbox, Colors, Icon, Spinner, Tooltip} from '@dagster-io/ui-components';
 import {useMemo} from 'react';
 
 import {
@@ -93,7 +93,11 @@ export const ScheduleSwitch = (props: Props) => {
   let status = schedule.scheduleState.status;
 
   if (!data && loading) {
-    return <Spinner purpose="body-text" />;
+    return (
+      <Box flex={{direction: 'row', justifyContent: 'center'}} style={{width: '30px'}}>
+        <Spinner purpose="body-text" />
+      </Box>
+    );
   }
   if (
     !['InstigationState', 'InstigationStateNotFoundError'].includes(

js_modules/dagster-ui/packages/ui-core/src/sensors/SensorSwitch.tsx

@@ -137,7 +137,11 @@ export const SensorSwitch = (props: Props) => {
   };
 
   if (!data && loading) {
-    return <Spinner purpose="body-text" />;
+    return (
+      <Box flex={{direction: 'row', justifyContent: 'center'}} style={{width: '30px'}}>
+        <Spinner purpose="body-text" />
+      </Box>
+    );
   }
 
   // Status according to sensor object passed in (may be outdated if its from the workspace snapshot)