Add update notification instead of banner (#1128)

packages/toolpad-app/src/constants.ts

@@ -8,3 +8,5 @@ export const TOOLPAD_TARGET_CE = 'CE';
 export const TOOLPAD_TARGET_CLOUD = 'CLOUD';
 export const TOOLPAD_TARGET_PRO = 'PRO';
 export const DOCUMENTATION_URL = 'https://mui.com/toolpad/getting-started/overview/';
+export const DOCUMENTATION_INSTALLATION_URL =
+  'https://mui.com/toolpad/getting-started/installation/';

packages/toolpad-app/src/toolpad/Home/index.tsx

@@ -51,7 +51,6 @@ import DialogForm from '../../components/DialogForm';
 import type { Deployment } from '../../../prisma/generated/client';
 import useLatest from '../../utils/useLatest';
 import ToolpadShell from '../ToolpadShell';
-import UpdateBanner from './UpdateBanner';
 import getReadableDuration from '../../utils/readableDuration';
 import EditableText from '../../components/EditableText';
 import type { AppMeta } from '../../server/data';
@@ -789,7 +788,6 @@ export default function Home() {
               duplicateApp={duplicateApp}
             />
           )}
-          <UpdateBanner />
         </Container>
       ) : null}
       <CreateAppDialog open={createDialogOpen} onClose={() => setCreateDialogOpen(false)} />

packages/toolpad-app/src/toolpad/ToolpadShell/Header/UserFeedback/index.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { Chip, Divider, ListItemText, IconButton, Menu, MenuItem, Tooltip } from '@mui/material';
+import HelpOutlinedIcon from '@mui/icons-material/HelpOutlined';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import useMenu from '../../../../utils/useMenu';
+import {
+  TOOLPAD_TARGET_CLOUD,
+  TOOLPAD_TARGET_CE,
+  TOOLPAD_TARGET_PRO,
+  DOCUMENTATION_URL,
+  DOCUMENTATION_INSTALLATION_URL,
+} from '../../../../constants';
+import client from '../../../../api';
+
+const REPORT_BUG_URL =
+  'https://github.com/mui/mui-toolpad/issues/new?assignees=&labels=status%3A+needs+triage&template=1.bug.yml';
+const FEATURE_REQUEST_URL = 'https://github.com/mui/mui-toolpad/issues';
+const CURRENT_RELEASE_VERSION = `v${process.env.TOOLPAD_VERSION}`;
+
+interface FeedbackMenuItemLinkProps {
+  href: string;
+  children: React.ReactNode;
+}
+
+function FeedbackMenuItemLink({ href, children }: FeedbackMenuItemLinkProps) {
+  return (
+    <MenuItem component="a" target="_blank" href={href}>
+      <ListItemText>{children}</ListItemText>
+      <OpenInNewIcon fontSize="inherit" sx={{ ml: 3, color: 'text.secondary' }} />
+    </MenuItem>
+  );
+}
+
+function getReadableTarget(): string {
+  switch (process.env.TOOLPAD_TARGET) {
+    case TOOLPAD_TARGET_CLOUD:
+      return 'Cloud';
+    case TOOLPAD_TARGET_CE:
+      return 'Community Edition';
+    case TOOLPAD_TARGET_PRO:
+      return 'Pro';
+    default:
+      return 'Unknown';
+  }
+}
+
+function UserFeedback() {
+  const { buttonProps, menuProps } = useMenu();
+
+  const { data: latestRelease } = client.useQuery('getLatestToolpadRelease', [], {
+    staleTime: 1000 * 60 * 10,
+    enabled: process.env.TOOLPAD_TARGET !== TOOLPAD_TARGET_CLOUD,
+  });
+
+  return (
+    <React.Fragment>
+      <Tooltip title="Help and resources">
+        <IconButton {...buttonProps} color="inherit">
+          <HelpOutlinedIcon />
+        </IconButton>
+      </Tooltip>
+      <Menu {...menuProps}>
+        <FeedbackMenuItemLink href={DOCUMENTATION_URL}>Documentation</FeedbackMenuItemLink>
+        <FeedbackMenuItemLink href={REPORT_BUG_URL}>Report bug</FeedbackMenuItemLink>
+        <FeedbackMenuItemLink href={FEATURE_REQUEST_URL}>
+          Request or upvote feature
+        </FeedbackMenuItemLink>
+        <Divider />
+        <MenuItem disabled>{getReadableTarget()}</MenuItem>
+        {latestRelease && latestRelease.tag !== CURRENT_RELEASE_VERSION ? (
+          <MenuItem
+            component="a"
+            target="_blank"
+            href={DOCUMENTATION_INSTALLATION_URL}
+            sx={{ justifyContent: 'space-between' }}
+          >
+            Version {process.env.TOOLPAD_VERSION}
+            <Chip size="small" color="error" variant="outlined" label="Update" clickable />
+          </MenuItem>
+        ) : (
+          <MenuItem disabled>Version {process.env.TOOLPAD_VERSION}</MenuItem>
+        )}
+        <MenuItem disabled>Build {process.env.TOOLPAD_BUILD}</MenuItem>
+      </Menu>
+    </React.Fragment>
+  );
+}
+
+export default UserFeedback;