[dagit] Enable sectioned left nav by default (#8039)

### Summary & Motivation Make the sectioned left nav opt-out. This just flips the logic of the feature flag, and shows the User Settings flag as an opt-out with a flipped boolean. ### How I Tested These Changes View User Settings, verify that the nav is sectioned and that the flag switch is on by default. Turn it off, verify that the nav and the switch are correctly toggled. Reload, verify that flag state has been saved.
dagster-io · May 25, 2022 · 9122968 · 9122968
1 parent b5604ce
commit 9122968
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 15 deletions.
diff --git a/js_modules/dagit/packages/core/src/app/Flags.tsx b/js_modules/dagit/packages/core/src/app/Flags.tsx
@@ -3,15 +3,15 @@ import * as React from 'react';
 
 import {getJSONForKey} from '../hooks/useStateWithStorage';
 
-const DAGIT_FLAGS_KEY = 'DAGIT_FLAGS';
+export const DAGIT_FLAGS_KEY = 'DAGIT_FLAGS';
 
 export enum FeatureFlag {
   flagExperimentalAssetDAG = 'flagExperimentalAssetDAG',
   flagDebugConsoleLogging = 'flagDebugConsoleLogging',
   flagAlwaysCollapseNavigation = 'flagAlwaysCollapseNavigation',
   flagDisableWebsockets = 'flagDisableWebsockets',
   flagNewPartitionsView = 'flagNewPartitionsView',
-  flagSectionedLeftNav = 'flagSectionedLeftNav',
+  flagFlatLeftNav = 'flagFlatLeftNav',
 }
 
 export const getFeatureFlags: () => FeatureFlag[] = memoize(

diff --git a/js_modules/dagit/packages/core/src/app/UserSettingsRoot.tsx b/js_modules/dagit/packages/core/src/app/UserSettingsRoot.tsx
@@ -145,12 +145,12 @@ const UserSettingsRoot: React.FC<SettingsRootProps> = ({tabs}) => {
               ),
             },
             {
-              key: 'Sectioned left nav (experimental)',
+              key: 'Sectioned left nav (opt-out)',
               value: (
                 <Checkbox
                   format="switch"
-                  checked={flags.includes(FeatureFlag.flagSectionedLeftNav)}
-                  onChange={() => toggleFlag(FeatureFlag.flagSectionedLeftNav)}
+                  checked={!flags.includes(FeatureFlag.flagFlatLeftNav)}
+                  onChange={() => toggleFlag(FeatureFlag.flagFlatLeftNav)}
                 />
               ),
             },

diff --git a/js_modules/dagit/packages/core/src/nav/LeftNavRepositorySection.test.tsx b/js_modules/dagit/packages/core/src/nav/LeftNavRepositorySection.test.tsx
@@ -1,6 +1,7 @@
 import {render, screen, waitFor} from '@testing-library/react';
 import * as React from 'react';
 
+import {DAGIT_FLAGS_KEY, FeatureFlag} from '../app/Flags';
 import {TestProvider} from '../testing/TestProvider';
 import {LocationStateChangeEventType} from '../types/globalTypes';
 import {HIDDEN_REPO_KEYS} from '../workspace/WorkspaceContext';
@@ -24,6 +25,14 @@ describe('Repository options', () => {
     }),
   };
 
+  beforeEach(() => {
+    window.localStorage.setItem(DAGIT_FLAGS_KEY, JSON.stringify([FeatureFlag.flagFlatLeftNav]));
+  });
+
+  afterEach(() => {
+    window.localStorage.clear();
+  });
+
   it('Correctly displays the current repository state', async () => {
     const mocks = {
       Repository: () => ({
@@ -57,10 +66,6 @@ describe('Repository options', () => {
   });
 
   describe('localStorage', () => {
-    beforeEach(() => {
-      window.localStorage.clear();
-    });
-
     const locationOne = 'ipsum';
     const repoOne = 'lorem';
     const locationTwo = 'bar';

diff --git a/js_modules/dagit/packages/core/src/nav/LeftNavRepositorySection.tsx b/js_modules/dagit/packages/core/src/nav/LeftNavRepositorySection.tsx
@@ -19,7 +19,7 @@ const LoadedRepositorySection: React.FC<{
   toggleVisible: (repoAddresses: RepoAddress[]) => void;
 }> = ({allRepos, visibleRepos, toggleVisible}) => {
   const location = useLocation();
-  const {flagSectionedLeftNav} = useFeatureFlags();
+  const {flagFlatLeftNav} = useFeatureFlags();
 
   const workspacePath = location.pathname.split('/workspace/').pop();
   const [, repoPath, type, item, tab] =
@@ -36,13 +36,13 @@ const LoadedRepositorySection: React.FC<{
 
   const listContent = () => {
     if (visibleRepos.length) {
-      if (flagSectionedLeftNav) {
-        return <SectionedLeftNav />;
+      if (flagFlatLeftNav) {
+        return (
+          <FlatContentList repoPath={repoPath} selector={selector} repos={visibleRepos} tab={tab} />
+        );
       }
 
-      return (
-        <FlatContentList repoPath={repoPath} selector={selector} repos={visibleRepos} tab={tab} />
-      );
+      return <SectionedLeftNav />;
     }
 
     if (allRepos.length > 0) {