[ui] Settings page (#20310)

## Summary & Motivation

Introduce consolidated Settings page, to be available at `/settings`.
This is behind a (currently hidden) client-side flag. I'll expose it in
User Settings once I have the Cloud side of this ready to go.

Video in [Linear
task](https://linear.app/dagster-labs/issue/FE-185/implement-new-nav-and-page-header-component).

## How I Tested These Changes

Enable flag.

- Verify that "Settings" appears in top nav.
- Click Settings, verify that the pages and panes render properly, and
that navigation behaves as expected.
- Reload definitions, verify success.

js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx

@@ -40,10 +40,12 @@ import checklist from '../icon-svgs/checklist.svg';
 import chevron_left from '../icon-svgs/chevron_left.svg';
 import chevron_right from '../icon-svgs/chevron_right.svg';
 import close from '../icon-svgs/close.svg';
+import code_location from '../icon-svgs/code_location.svg';
 import collapse_arrows from '../icon-svgs/collapse_arrows.svg';
 import concept_book from '../icon-svgs/concept-book.svg';
 import console_icon from '../icon-svgs/console.svg';
 import content_copy from '../icon-svgs/content_copy.svg';
+import corporate_fare from '../icon-svgs/corporate_fare.svg';
 import datatype_array from '../icon-svgs/datatype_array.svg';
 import datatype_bool from '../icon-svgs/datatype_bool.svg';
 import datatype_number from '../icon-svgs/datatype_number.svg';
@@ -109,6 +111,7 @@ import multi_asset from '../icon-svgs/multi_asset.svg';
 import new_in_branch from '../icon-svgs/new_in_branch.svg';
 import nightlight from '../icon-svgs/nightlight.svg';
 import no_access from '../icon-svgs/no_access.svg';
+import notifications from '../icon-svgs/notifications.svg';
 import observation from '../icon-svgs/observation.svg';
 import open_in_new from '../icon-svgs/open_in_new.svg';
 import panel_hide_right from '../icon-svgs/panel_hide_right.svg';
@@ -122,6 +125,7 @@ import partition_failure from '../icon-svgs/partition_failure.svg';
 import partition_missing from '../icon-svgs/partition_missing.svg';
 import partition_stale from '../icon-svgs/partition_stale.svg';
 import partition_success from '../icon-svgs/partition_success.svg';
+import password from '../icon-svgs/password.svg';
 import people from '../icon-svgs/people.svg';
 import refresh from '../icon-svgs/refresh.svg';
 import replay from '../icon-svgs/replay.svg';
@@ -138,11 +142,13 @@ import source from '../icon-svgs/source.svg';
 import source_asset from '../icon-svgs/source_asset.svg';
 import speed from '../icon-svgs/speed.svg';
 import splitscreen from '../icon-svgs/splitscreen.svg';
+import stacks from '../icon-svgs/stacks.svg';
 import star from '../icon-svgs/star.svg';
 import star_outline from '../icon-svgs/star_outline.svg';
 import status from '../icon-svgs/status.svg';
 import sticky_note from '../icon-svgs/sticky_note.svg';
 import subtract from '../icon-svgs/subtract.svg';
+import sync_alt from '../icon-svgs/sync_alt.svg';
 import sync_problem from '../icon-svgs/sync_problem.svg';
 import table_view from '../icon-svgs/table_view.svg';
 import tag from '../icon-svgs/tag.svg';
@@ -273,9 +279,11 @@ export const Icons = {
   chevron_right,
   chevron_left,
   close,
+  code_location,
   console: console_icon,
   content_copy,
   collapse_arrows,
+  corporate_fare,
   delete: deleteSVG,
   done,
   dot,
@@ -314,6 +322,8 @@ export const Icons = {
   new_in_branch,
   nightlight,
   no_access,
+  notifications,
+  password,
   people,
   refresh,
   replay,
@@ -327,10 +337,12 @@ export const Icons = {
   subtract,
   speed,
   splitscreen,
+  stacks,
   star,
   star_outline,
   status,
   sticky_note,
+  sync_alt,
   sync_problem,
   table_view,
   timer,

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

@@ -3,6 +3,7 @@ import * as React from 'react';
 import {Link, NavLink, useHistory} from 'react-router-dom';
 import styled from 'styled-components';
 
+import {useFeatureFlags} from './Flags';
 import {LayoutContext} from './LayoutProvider';
 import {ShortcutHandler} from './ShortcutHandler';
 import {WebSocketStatus} from './WebSocketProvider';
@@ -35,6 +36,7 @@ export const AppTopNav = ({
   allowGlobalReload = false,
 }: Props) => {
   const history = useHistory();
+  const {flagSettingsPage} = useFeatureFlags();
 
   const navLinks = () => {
     return [
@@ -91,35 +93,61 @@ export const AppTopNav = ({
           </ShortcutHandler>
         ),
       },
-      {
-        title: 'deployment',
-        element: (
-          <ShortcutHandler
-            key="deployment"
-            onShortcut={() => history.push('/locations')}
-            shortcutLabel="⌥4"
-            shortcutFilter={(e) => e.altKey && e.code === 'Digit4'}
-          >
-            <TopNavLink
-              to="/locations"
-              data-cy="AppTopNav_StatusLink"
-              isActive={(_, location) => {
-                const {pathname} = location;
-                return (
-                  pathname.startsWith('/locations') ||
-                  pathname.startsWith('/health') ||
-                  pathname.startsWith('/config')
-                );
-              }}
-            >
-              <Box flex={{direction: 'row', alignItems: 'center', gap: 6}}>
-                Deployment
-                <DeploymentStatusIcon />
-              </Box>
-            </TopNavLink>
-          </ShortcutHandler>
-        ),
-      },
+      flagSettingsPage
+        ? {
+            title: 'settings',
+            element: (
+              <ShortcutHandler
+                key="settings"
+                onShortcut={() => history.push('/settings')}
+                shortcutLabel="⌥4"
+                shortcutFilter={(e) => e.altKey && e.code === 'Digit4'}
+              >
+                <TopNavLink
+                  to="/settings"
+                  data-cy="AppTopNav_SettingsLink"
+                  isActive={(_, location) => {
+                    const {pathname} = location;
+                    return pathname.startsWith('/settings') || pathname.startsWith('/locations');
+                  }}
+                >
+                  <Box flex={{direction: 'row', alignItems: 'center', gap: 6}}>
+                    Settings
+                    <DeploymentStatusIcon />
+                  </Box>
+                </TopNavLink>
+              </ShortcutHandler>
+            ),
+          }
+        : {
+            title: 'deployment',
+            element: (
+              <ShortcutHandler
+                key="deployment"
+                onShortcut={() => history.push('/locations')}
+                shortcutLabel="⌥4"
+                shortcutFilter={(e) => e.altKey && e.code === 'Digit4'}
+              >
+                <TopNavLink
+                  to="/locations"
+                  data-cy="AppTopNav_StatusLink"
+                  isActive={(_, location) => {
+                    const {pathname} = location;
+                    return (
+                      pathname.startsWith('/locations') ||
+                      pathname.startsWith('/health') ||
+                      pathname.startsWith('/config')
+                    );
+                  }}
+                >
+                  <Box flex={{direction: 'row', alignItems: 'center', gap: 6}}>
+                    Deployment
+                    <DeploymentStatusIcon />
+                  </Box>
+                </TopNavLink>
+              </ShortcutHandler>
+            ),
+          },
     ];
   };
 

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

@@ -18,6 +18,7 @@ const RunsRoot = lazy(() => import('../runs/RunsRoot'));
 const ScheduledRunListRoot = lazy(() => import('../runs/ScheduledRunListRoot'));
 const SnapshotRoot = lazy(() => import('../snapshots/SnapshotRoot'));
 const GuessJobLocationRoot = lazy(() => import('../workspace/GuessJobLocationRoot'));
+const SettingsRoot = lazy(() => import('../settings/SettingsRoot'));
 
 export const ContentRoot = memo(() => {
   const {pathname} = useLocation();
@@ -98,6 +99,11 @@ export const ContentRoot = memo(() => {
               <OverviewRoot />
             </Suspense>
           </Route>
+          <Route path="/settings">
+            <Suspense fallback={<div />}>
+              <SettingsRoot />
+            </Suspense>
+          </Route>
           <Route path="*">
             <Suspense fallback={<div />}>
               <FallthroughRoot />

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

@@ -14,6 +14,7 @@ export const FeatureFlag = {
   flagUseNewAutomationPage: 'flagUseNewAutomationPage' as const,
   flagUseNewOverviewPage: 'flagUseNewOverviewPage' as const,
   flagExperimentalBranchDiff: 'flagExperimentalBranchDiff' as const,
+  flagSettingsPage: 'flagSettingsPage' as const,
 };
 export type FeatureFlagType = keyof typeof FeatureFlag;
 

js_modules/dagster-ui/packages/ui-core/src/instance/CodeLocationsPage.tsx

@@ -12,11 +12,10 @@ import {WorkspaceContext} from '../workspace/WorkspaceContext';
 
 const SEARCH_THRESHOLD = 10;
 
-export const CodeLocationsPage = () => {
+export const CodeLocationsPageContent = () => {
   useTrackPageView();
   useDocumentTitle('Code locations');
 
-  const {pageTitle} = React.useContext(InstancePageContext);
   const {locationEntries, loading} = React.useContext(WorkspaceContext);
 
   const [searchValue, setSearchValue] = React.useState('');
@@ -42,8 +41,7 @@ export const CodeLocationsPage = () => {
   };
 
   return (
-    <Box flex={{direction: 'column'}} style={{height: '100%', overflow: 'hidden'}}>
-      <PageHeader title={<Heading>{pageTitle}</Heading>} tabs={<InstanceTabs tab="locations" />} />
+    <>
       <Box
         padding={{vertical: 16, horizontal: 24}}
         flex={{direction: 'row', justifyContent: 'space-between', alignItems: 'center'}}
@@ -70,6 +68,16 @@ export const CodeLocationsPage = () => {
         codeLocations={filtered}
         searchValue={searchValue}
       />
+    </>
+  );
+};
+
+export const CodeLocationsPage = () => {
+  const {pageTitle} = React.useContext(InstancePageContext);
+  return (
+    <Box flex={{direction: 'column'}} style={{height: '100%', overflow: 'hidden'}}>
+      <PageHeader title={<Heading>{pageTitle}</Heading>} tabs={<InstanceTabs tab="locations" />} />
+      <CodeLocationsPageContent />
     </Box>
   );
 };

js_modules/dagster-ui/packages/ui-core/src/instance/DaemonList.tsx

@@ -55,8 +55,8 @@ export const DaemonList = ({daemonStatuses, showTimestampColumn = true}: Props)
     <Table>
       <thead>
         <tr>
-          <th style={{width: '25%'}}>Daemon</th>
-          <th style={{width: '30%'}}>Status</th>
+          <th style={{width: '30%'}}>Daemon</th>
+          <th style={{width: '20%'}}>Status</th>
           {showTimestampColumn && <th>Last heartbeat</th>}
         </tr>
       </thead>