[cloud dagit] Add optional nav tabs parameter for settings root page (#…

…7892) * [cloud dagit] Add optional nav tabs parameter for settings root page * remove memo
dagster-io · May 13, 2022 · 91b6c0f · 91b6c0f
1 parent 272b250
commit 91b6c0f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/js_modules/dagit/packages/core/src/app/ContentRoot.tsx b/js_modules/dagit/packages/core/src/app/ContentRoot.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import {Route, Switch} from 'react-router-dom';
 
 const InstanceRoot = React.lazy(() => import('../instance/InstanceRoot'));
-const SettingsRoot = React.lazy(() => import('../app/SettingsRoot'));
+const UserSettingsRoot = React.lazy(() => import('./UserSettingsRoot'));
 const WorkspaceRoot = React.lazy(() => import('../workspace/WorkspaceRoot'));
 const FallthroughRoot = React.lazy(() => import('./FallthroughRoot'));
 
@@ -20,7 +20,7 @@ export const ContentRoot = React.memo(() => (
     </Route>
     <Route path="/settings">
       <React.Suspense fallback={<div />}>
-        <SettingsRoot />
+        <UserSettingsRoot />
       </React.Suspense>
     </Route>
     <Route path="*">

diff --git a/...it/packages/core/src/app/SettingsRoot.tsx → ...ackages/core/src/app/UserSettingsRoot.tsx b/...it/packages/core/src/app/SettingsRoot.tsx → ...ackages/core/src/app/UserSettingsRoot.tsx
@@ -3,9 +3,9 @@ import {
   ButtonLink,
   Checkbox,
   Colors,
+  Heading,
   MetadataTable,
   PageHeader,
-  Heading,
   Subheading,
 } from '@dagster-io/ui';
 import * as React from 'react';
@@ -18,7 +18,10 @@ import {SHORTCUTS_STORAGE_KEY} from './ShortcutHandler';
 import {TimezoneSelect} from './time/TimezoneSelect';
 import {automaticLabel} from './time/browserTimezone';
 
-const SettingsRoot = () => {
+export interface SettingsRootProps {
+  tabs?: React.ReactNode;
+}
+const UserSettingsRoot: React.FC<SettingsRootProps> = ({tabs}) => {
   useDocumentTitle('User settings');
 
   const [flags, setFlags] = React.useState<FeatureFlag[]>(() => getFeatureFlags());
@@ -54,7 +57,7 @@ const SettingsRoot = () => {
 
   return (
     <div style={{height: '100vh', overflowY: 'auto'}}>
-      <PageHeader title={<Heading>User settings</Heading>} />
+      <PageHeader title={<Heading>User settings</Heading>} tabs={tabs} />
       <Box padding={{vertical: 16, horizontal: 24}}>
         <Box padding={{bottom: 8}}>
           <Subheading>Preferences</Subheading>
@@ -150,4 +153,4 @@ const SettingsRoot = () => {
 
 // Imported via React.lazy, which requires a default export.
 // eslint-disable-next-line import/no-default-export
-export default SettingsRoot;
+export default UserSettingsRoot;