Add Help menu + Daggy U call out in OSS (#19784)

## Summary & Motivation

https://linear.app/dagster-labs/issue/FE-176


## How I Tested These Changes
locally:

Product tour:
<img width="303" alt="Screenshot 2024-02-13 at 4 12 32 PM"
src="https://github.com/dagster-io/dagster/assets/2286579/c09c8e39-6acf-4465-9778-9ba8c5ec9e78">


Help menu:
<img width="270" alt="Screenshot 2024-02-14 at 2 36 43 PM"
src="https://github.com/dagster-io/dagster/assets/2286579/80ee93df-6f81-44bf-9b25-ba9519b03911">

js_modules/dagster-ui/packages/app-oss/src/App.tsx

@@ -4,6 +4,7 @@ import {errorLink, setupErrorToasts} from '@dagster-io/ui-core/app/AppError';
 import {AppProvider} from '@dagster-io/ui-core/app/AppProvider';
 import {AppTopNav} from '@dagster-io/ui-core/app/AppTopNav';
 import {ContentRoot} from '@dagster-io/ui-core/app/ContentRoot';
+import {HelpMenu} from '@dagster-io/ui-core/app/HelpMenu';
 import {UserSettingsButton} from '@dagster-io/ui-core/app/UserSettingsButton';
 import {logLink, timeStartLink} from '@dagster-io/ui-core/app/apolloLinks';
 import {DeploymentStatusType} from '@dagster-io/ui-core/instance/DeploymentStatusProvider';
@@ -40,6 +41,7 @@ export default function AppPage() {
     <LiveDataPollRateContext.Provider value={liveDataPollRate ?? 2000}>
       <AppProvider appCache={appCache} config={config}>
         <AppTopNav searchPlaceholder="Search…" allowGlobalReload>
+          <HelpMenu showContactSales={false} />
           <UserSettingsButton />
         </AppTopNav>
         <App>

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

@@ -73,6 +73,7 @@ import github_pr_closed from '../icon-svgs/github_pr_closed.svg';
 import github_pr_merged from '../icon-svgs/github_pr_merged.svg';
 import github_pr_open from '../icon-svgs/github_pr_open.svg';
 import gitlab from '../icon-svgs/gitlab.svg';
+import graduation_cap from '../icon-svgs/graduation_cap.svg';
 import graph from '../icon-svgs/graph.svg';
 import graph_downstream from '../icon-svgs/graph_downstream.svg';
 import graph_neighbors from '../icon-svgs/graph_neighbors.svg';
@@ -223,6 +224,7 @@ export const Icons = {
   github_pr_closed,
   github_pr_merged,
   gitlab,
+  graduation_cap,
   youtube,
   arrow_indent,
   editor_role,

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

@@ -28,7 +28,9 @@ type Props = {
   children: React.ReactNode;
   title: React.ReactNode;
   description?: React.ReactNode;
+  canShow?: boolean;
   actions?: {
+    custom?: React.ReactNode;
     next?: () => void;
     dismiss?: () => void;
   };
@@ -48,6 +50,7 @@ export const ProductTour = ({
   object,
   modifiers = {},
   width = '260px',
+  canShow = true,
 }: Props) => {
   const media = React.useMemo(() => {
     if (img) {
@@ -62,16 +65,17 @@ export const ProductTour = ({
   const actionsJsx = React.useMemo(() => {
     return (
       <ActionsContainer flex={{gap: 6, direction: 'row'}} margin={{top: 8}}>
+        {actions?.custom}
         {actions?.next ? <Button onClick={actions.next}>Next</Button> : null}
         {actions?.dismiss ? <Button onClick={actions.dismiss}>Dismiss</Button> : null}
       </ActionsContainer>
     );
-  }, [actions?.next, actions?.dismiss]);
+  }, [actions?.custom, actions?.next, actions?.dismiss]);
 
   return (
     <Popover
       popoverClassName="bp4-dark"
-      isOpen={true}
+      isOpen={canShow}
       placement={position as Placement}
       modifiers={{
         arrow: {enabled: true},

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

@@ -0,0 +1,134 @@
+import {
+  Colors,
+  ExternalAnchorButton,
+  Icon,
+  IconWrapper,
+  Menu,
+  MenuDivider,
+  MenuExternalLink,
+  Popover,
+  ProductTour,
+  ProductTourPosition,
+  Tooltip,
+} from '@dagster-io/ui-components';
+import {useCallback, useState} from 'react';
+import styled from 'styled-components';
+
+import {ShortcutHandler} from './ShortcutHandler';
+import DagsterUniversityImage from './dagster_university.svg';
+import {useStateWithStorage} from '../hooks/useStateWithStorage';
+
+export const HelpMenu = ({showContactSales = true}: {showContactSales?: boolean}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onInteraction = useCallback((open: boolean) => setIsOpen(open), []);
+
+  const [didDismissDaggyU, setDidDismissDaggyU] = useStateWithStorage<boolean>(
+    'daggy_u_pt',
+    (json) => !!json,
+  );
+
+  return (
+    <ShortcutHandler
+      onShortcut={() => setIsOpen(!isOpen)}
+      shortcutLabel="?"
+      shortcutFilter={(e) => e.key === '?'}
+    >
+      <ProductTour
+        title="Master the Dagster basics"
+        description="Learn the basics of Dagster with the free Dagster Essentials course from Dagster University"
+        position={ProductTourPosition.BOTTOM_LEFT}
+        canShow={!isOpen && !didDismissDaggyU}
+        img={DagsterUniversityImage.src}
+        actions={{
+          custom: (
+            <ExternalAnchorButton href="https://courses.dagster.io/courses/dagster-essentials">
+              Learn more
+            </ExternalAnchorButton>
+          ),
+          dismiss: () => {
+            setDidDismissDaggyU(true);
+          },
+        }}
+      >
+        <Popover
+          isOpen={isOpen}
+          placement="bottom-end"
+          canEscapeKeyClose
+          onInteraction={onInteraction}
+          modifiers={{offset: {enabled: true, options: {offset: [0, 16]}}}}
+          content={
+            <Menu>
+              <MenuDivider title="What's new" />
+              <MenuExternalLink
+                href="https://docs.dagster.io/changelog"
+                icon="concept_book"
+                text="View changelog"
+              />
+              <MenuDivider title="Help" />
+              <MenuExternalLink
+                href="https://dagster.io/slack"
+                icon="slack"
+                text="Join our Slack"
+              />
+              <MenuExternalLink
+                href="https://github.com/dagster-io/dagster/discussions"
+                icon="github"
+                text="Discuss on GitHub"
+              />
+              <MenuExternalLink
+                href="https://docs.dagster.io"
+                icon="concept_book"
+                text="Read the docs"
+              />
+              <div
+                onClick={() => {
+                  setDidDismissDaggyU(true);
+                }}
+              >
+                <MenuExternalLink
+                  href="https://courses.dagster.io/"
+                  icon="graduation_cap"
+                  text="Dagster University"
+                />
+              </div>
+              {showContactSales ? (
+                <MenuExternalLink
+                  href="https://dagster.io/contact"
+                  icon="open_in_new"
+                  text="Contact sales"
+                />
+              ) : null}
+            </Menu>
+          }
+        >
+          <Tooltip content="Help">
+            <HelpButton>
+              <Icon name="chat_support" size={20} />
+            </HelpButton>
+          </Tooltip>
+        </Popover>
+      </ProductTour>
+    </ShortcutHandler>
+  );
+};
+
+const HelpButton = styled.button`
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+
+  :focus {
+    outline: none;
+  }
+
+  ${IconWrapper} {
+    background-color: ${Colors.navTextSelected()};
+    transition: background-color 100ms linear;
+  }
+
+  :focus ${IconWrapper}, :hover ${IconWrapper} {
+    background-color: ${Colors.navTextHover()};
+  }
+`;

js_modules/dagster-ui/packages/ui-core/src/app/__stories__/HelpMenu.stories.tsx

@@ -0,0 +1,26 @@
+import {Box, Colors} from '@dagster-io/ui-components';
+import {Meta} from '@storybook/react';
+
+import {StorybookProvider} from '../../testing/StorybookProvider';
+import {HelpMenu} from '../HelpMenu';
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  title: 'HelpMenu',
+  component: HelpMenu,
+} as Meta;
+
+export const Default = () => {
+  return (
+    <StorybookProvider>
+      <Box
+        background={Colors.navBackground()}
+        padding={{horizontal: 48}}
+        flex={{alignItems: 'center', justifyContent: 'flex-end'}}
+        style={{height: '64px'}}
+      >
+        <HelpMenu />
+      </Box>
+    </StorybookProvider>
+  );
+};