Add user feedback (#723)

* Add user feedback capabilities * tweak * fix * copy * redo * ksjdhf * components * pull right
mui · Aug 10, 2022 · 9041450 · 9041450
1 parent ed95e4d
commit 9041450
Show file tree

Hide file tree

Showing 3 changed files with 146 additions and 14 deletions.
diff --git a/packages/toolpad-app/src/theme.ts b/packages/toolpad-app/src/theme.ts
@@ -66,6 +66,11 @@ const theme = createTheme({
         fontSize: 'small',
       },
     },
+    MuiMenuItem: {
+      defaultProps: {
+        dense: true,
+      },
+    },
     MuiTabs: {
       styleOverrides: {
         root: {

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box, Collapse, styled, Typography } from '@mui/material';
+import { Box, Collapse, Link, styled, Typography } from '@mui/material';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
@@ -14,6 +14,46 @@ import {
   STACK_COMPONENT_ID,
 } from '../../../toolpadComponents';
 
+interface FutureComponentSpec {
+  displayName: string;
+  githubLink: string;
+}
+
+const FUTURE_COMPONENTS: FutureComponentSpec[] = [
+  {
+    displayName: 'Form',
+    githubLink: 'https://github.com/mui/mui-toolpad/issues/749',
+  },
+  {
+    displayName: 'Card',
+    githubLink: 'https://github.com/mui/mui-toolpad/issues/748',
+  },
+  {
+    displayName: 'Tabs',
+    githubLink: 'https://github.com/mui/mui-toolpad/issues/747',
+  },
+  {
+    displayName: 'Slider',
+    githubLink: 'https://github.com/mui/mui-toolpad/issues/746',
+  },
+  {
+    displayName: 'Switch',
+    githubLink: 'https://github.com/mui/mui-toolpad/issues/745',
+  },
+  {
+    displayName: 'RadioButton',
+    githubLink: 'https://github.com/mui/mui-toolpad/issues/744',
+  },
+  {
+    displayName: 'DatePicker',
+    githubLink: 'https://github.com/mui/mui-toolpad/issues/743',
+  },
+  {
+    displayName: 'Checkbox',
+    githubLink: 'https://github.com/mui/mui-toolpad/issues/742',
+  },
+];
+
 const WIDTH_COLLAPSED = 50;
 
 const ComponentCatalogRoot = styled('div')({
@@ -24,17 +64,19 @@ const ComponentCatalogRoot = styled('div')({
   overflow: 'visible',
 });
 
-const ComponentCatalogItem = styled('div')(({ theme }) => ({
+const ComponentCatalogItem = styled('div')(({ theme, draggable, onClick }) => ({
   display: 'flex',
   alignItems: 'center',
-  padding: theme.spacing(1, 0),
+  padding: theme.spacing(1, 1, 1, 0),
   borderRadius: theme.shape.borderRadius,
   border: `1px solid ${theme.palette.divider}`,
   color: theme.palette.text.secondary,
-  cursor: 'grab',
+
   '&:hover': {
     background: theme.palette.action.hover,
   },
+  ...(draggable ? { cursor: 'grab' } : {}),
+  ...(onClick ? { cursor: 'pointer' } : {}),
 }));
 
 export interface ComponentCatalogProps {
@@ -119,6 +161,18 @@ export default function ComponentCatalog({ className }: ComponentCatalogProps) {
                     </ComponentCatalogItem>
                   );
                 })}
+              {FUTURE_COMPONENTS.map((futureComponent, i) => {
+                return (
+                  <Link href={futureComponent.githubLink} underline="none" target="_blank">
+                    <ComponentCatalogItem key={`futureComponent[${i}]`}>
+                      <DragIndicatorIcon color="disabled" />
+                      {futureComponent.displayName}
+                      <Box sx={{ flex: 1 }} />
+                      🚧
+                    </ComponentCatalogItem>
+                  </Link>
+                );
+              })}
             </Box>
           </Box>
         </Collapse>

diff --git a/packages/toolpad-app/src/toolpad/ToolpadShell.tsx b/packages/toolpad-app/src/toolpad/ToolpadShell.tsx
@@ -1,6 +1,39 @@
 import * as React from 'react';
-import { styled, AppBar, Toolbar, IconButton, Typography, Box } from '@mui/material';
+import {
+  styled,
+  AppBar,
+  Toolbar,
+  IconButton,
+  Typography,
+  Box,
+  Menu,
+  MenuItem,
+  Divider,
+  ListItemText,
+  Tooltip,
+} from '@mui/material';
 import HomeIcon from '@mui/icons-material/Home';
+import HelpOutlinedIcon from '@mui/icons-material/HelpOutlined';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+
+const DOCUMENTATION_URL = 'https://mui.com/toolpad/getting-started/setup/';
+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';
+
+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>
+  );
+}
 
 export interface ToolpadShellProps {
   navigation?: React.ReactNode;
@@ -21,6 +54,52 @@ const ViewPort = styled('div')({
   position: 'relative',
 });
 
+function UserFeedback() {
+  const menuId = React.useId();
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <React.Fragment>
+      <Tooltip title="Help and resources">
+        <IconButton
+          id={menuId}
+          aria-controls={open ? menuId : undefined}
+          aria-haspopup="true"
+          aria-expanded={open ? 'true' : undefined}
+          onClick={handleClick}
+          color="inherit"
+        >
+          <HelpOutlinedIcon />
+        </IconButton>
+      </Tooltip>
+      <Menu
+        id={menuId}
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          'aria-labelledby': menuId,
+        }}
+      >
+        <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>Version {process.env.TOOLPAD_VERSION}</MenuItem>
+      </Menu>
+    </React.Fragment>
+  );
+}
+
 export interface HeaderProps {
   navigation?: React.ReactNode;
   actions?: React.ReactNode;
@@ -34,30 +113,24 @@ function Header({ actions, navigation }: HeaderProps) {
       elevation={0}
       sx={{ zIndex: 2, borderBottom: 1, borderColor: 'divider' }}
     >
-      <Toolbar>
+      <Toolbar sx={{ gap: 1 }}>
         <IconButton
           size="medium"
           edge="start"
           color="inherit"
           aria-label="Home"
-          sx={{ mr: 2 }}
           component="a"
           href={`/`}
         >
           <HomeIcon fontSize="medium" />
         </IconButton>
-        <Typography
-          data-test-id="brand"
-          variant="h6"
-          color="inherit"
-          component="div"
-          sx={{ mr: 2 }}
-        >
+        <Typography data-test-id="brand" variant="h6" color="inherit" component="div">
           MUI Toolpad {process.env.TOOLPAD_TARGET}
         </Typography>
         {navigation}
         <Box flex={1} />
         {actions}
+        <UserFeedback />
       </Toolbar>
     </AppBar>
   );