From fa2eb661e0e6ac1b50a677b38320014742679c7a Mon Sep 17 00:00:00 2001
From: Isaac Hellendag <dish@elementl.com>
Date: Tue, 23 Apr 2024 11:25:07 -0500
Subject: [PATCH] [ui] Show alert for users in experimental nav flag

---
 .../packages/ui-core/src/app/App.tsx          | 31 +++++++++++++++++++
 .../src/app/getVisibleFeatureFlagRows.tsx     | 15 ++++++++-
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/App.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/App.tsx
index de5bb0526a266..dec9cb5cecad8 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/app/App.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/app/App.tsx
@@ -1,8 +1,10 @@
+import {Alert, Box} from '@dagster-io/ui-components';
 import * as React from 'react';
 import styled from 'styled-components';
 
 import {useFeatureFlags} from './Flags';
 import {LayoutContext} from './LayoutProvider';
+import {useStateWithStorage} from '../hooks/useStateWithStorage';
 import {LEFT_NAV_WIDTH, LeftNav} from '../nav/LeftNav';
 
 interface Props {
@@ -12,7 +14,13 @@ interface Props {
 
 export const App = ({banner, children}: Props) => {
   const {nav} = React.useContext(LayoutContext);
+
+  // todo dish: Remove flag and alert once this change has shipped.
   const {flagSettingsPage} = useFeatureFlags();
+  const [didDismissNavAlert, setDidDismissNavAlert] = useStateWithStorage<boolean>(
+    'new_navigation_alert',
+    (json) => !!json,
+  );
 
   const onClickMain = React.useCallback(() => {
     if (nav.isSmallScreen) {
@@ -29,6 +37,29 @@ export const App = ({banner, children}: Props) => {
         onClick={onClickMain}
       >
         <div>{banner}</div>
+        {flagSettingsPage && !didDismissNavAlert ? (
+          <Box padding={8} border="top-and-bottom">
+            <Alert
+              title={
+                <>
+                  <span>Experimental navigation is enabled.</span>
+                  <span style={{fontWeight: 'normal'}}>
+                    {' '}
+                    We&apos;re testing some changes to the navigation to make it easier to explore.{' '}
+                    <a
+                      href="https://github.com/dagster-io/dagster/discussions/21370"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Learn more and share feedback
+                    </a>
+                  </span>
+                </>
+              }
+              onClose={() => setDidDismissNavAlert(true)}
+            />
+          </Box>
+        ) : null}
         <ChildContainer>{children}</ChildContainer>
       </Main>
     </Container>
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/getVisibleFeatureFlagRows.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/getVisibleFeatureFlagRows.tsx
index 06d53baf590ee..38bf47b6f698c 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/app/getVisibleFeatureFlagRows.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/app/getVisibleFeatureFlagRows.tsx
@@ -25,7 +25,20 @@ export const getVisibleFeatureFlagRows = () => [
     flagType: FeatureFlag.flagUseNewOverviewPage,
   },
   {
-    key: 'New navigation (experimental)',
+    key: 'New navigation',
+    label: (
+      <>
+        Experimental navigation (
+        <a
+          href="https://github.com/dagster-io/dagster/discussions/21370"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Learn more
+        </a>
+        )
+      </>
+    ),
     flagType: FeatureFlag.flagSettingsPage,
   },
 ];