Removed mui/base reference

Signed-off-by: Yi Cai <[email protected]>

.github/CODEOWNERS

@@ -12,4 +12,4 @@
 /workspaces/theme                                   @christoph-jerolimov @ciiay @debsmita1
 /workspaces/lightspeed                              @karthikjeeyar @yangcao77 @rohitkrai03
 /workspaces/orchestrator                            @batzionb @mareklibra @gciavarrini
-/workspaces/global-header                           @ciiay @christoph-jerolimov
+/workspaces/global-header                           @christoph-jerolimov @ciiay

workspaces/global-header/app-config.yaml

@@ -9,10 +9,9 @@ backend:
   # Used for enabling authentication, secret is shared by all backend plugins
   # See https://backstage.io/docs/auth/service-to-service-auth for
   # information on the format
-  auth:
-    dangerouslyDisableDefaultAuthPolicy: true
-    # keys:
-    #   - secret: ${BACKEND_SECRET}
+  # auth:
+  #   keys:
+  #     - secret: ${BACKEND_SECRET}
   baseUrl: http://localhost:7007
   listen:
     port: 7007
@@ -45,7 +44,6 @@ integrations:
     #   token: ${GHE_TOKEN}
 
 proxy:
-  {}
   ### Example for how to add a proxy endpoint for the frontend.
   ### A typical reason to do this is to handle HTTPS and CORS for internal services.
   # endpoints:
@@ -68,21 +66,17 @@ auth:
   # see https://backstage.io/docs/auth/ to learn about auth providers
   providers:
     # See https://backstage.io/docs/auth/guest/provider
-    github:
-      development:
-        clientId: ${GITHUB_CLIENT_ID}
-        clientSecret: ${GITHUB_CLIENT_SECRET}
+    guest: {}
 
 scaffolder:
-  {}
   # see https://backstage.io/docs/features/software-templates/configuration for software template options
 
 catalog:
   import:
     entityFilename: catalog-info.yaml
     pullRequestBranchName: backstage-integration
   rules:
-    - allow: [Component, System, API, Resource, Location, User, Group, Template]
+    - allow: [Component, System, API, Resource, Location]
   locations:
     # Local example data, file locations are relative to the backend process, typically `packages/backend`
     - type: file
@@ -105,10 +99,13 @@ catalog:
     #   target: https://github.com/backstage/backstage/blob/master/packages/catalog-model/examples/all.yaml
 
     ## Uncomment these lines to add an example org
-    - type: url
-      target: https://github.com/backstage/backstage/blob/master/packages/catalog-model/examples/acme-corp.yaml
-      rules:
-        - allow: [User, Group]
+    # - type: url
+    #   target: https://github.com/backstage/backstage/blob/master/packages/catalog-model/examples/acme-corp.yaml
+    #   rules:
+    #     - allow: [User, Group]
+
+kubernetes:
+  # see https://backstage.io/docs/features/kubernetes/configuration for kubernetes configuration options
 
 # see https://backstage.io/docs/permissions/getting-started for more on the permission framework
 permission:

workspaces/global-header/package.json

@@ -7,7 +7,7 @@
   },
   "scripts": {
     "tsc": "tsc",
-    "tsc:full": "tsc --skipLibCheck false --incremental false",
+    "tsc:full": "tsc --skipLibCheck true --incremental false",
     "dev": "yarn workspaces foreach -A --include backend --include app --parallel -v -i run start",
     "start": "yarn workspace app start",
     "start-backend": "yarn workspace backend start",

workspaces/global-header/plugins/global-header/package.json

@@ -26,9 +26,7 @@
   "dependencies": {
     "@backstage/core-components": "^0.16.1",
     "@backstage/core-plugin-api": "^1.10.1",
-    "@backstage/plugin-catalog-react": "^1.15.0",
     "@backstage/theme": "^0.6.2",
-    "@mui/base": "^5.0.0-beta.66",
     "@mui/icons-material": "5.16.9",
     "@mui/material": "5.16.9",
     "@mui/styled-engine": "5.16.8",

workspaces/global-header/plugins/global-header/src/components/GlobalHeader.tsx

@@ -24,16 +24,39 @@ import ProfileDropdown from './HeaderDropdownComponent/ProfileDropdown';
 import Divider from '@mui/material/Divider';
 import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineRounded';
 import NotificationsOutlinedIcon from '@mui/icons-material/NotificationsOutlined';
+import { useDropdownManager } from '../hooks';
+
+const iconButtons = [
+  {
+    Icon: HelpOutlineOutlinedIcon,
+    onClick: () => {},
+  },
+  {
+    Icon: NotificationsOutlinedIcon,
+    onClick: () => {},
+  },
+];
 
 export const GlobalHeader = () => {
-  const iconButtons = [
+  const { menuStates, handleOpen, handleClose } = useDropdownManager();
+  const dropdownConfigs = [
     {
-      Icon: HelpOutlineOutlinedIcon,
-      onClick: () => {},
+      key: 'create',
+      component: CreateDropdown,
+      buttonProps: {
+        handleMenu: handleOpen('create'),
+        anchorEl: menuStates.create,
+        setAnchorEl: handleClose('create'),
+      },
     },
     {
-      Icon: NotificationsOutlinedIcon,
-      onClick: () => {},
+      key: 'profile',
+      component: ProfileDropdown,
+      buttonProps: {
+        handleMenu: handleOpen('profile'),
+        anchorEl: menuStates.profile,
+        setAnchorEl: handleClose('profile'),
+      },
     },
   ];
 
@@ -45,7 +68,10 @@ export const GlobalHeader = () => {
     >
       <Toolbar>
         <SearchComponent />
-        <CreateDropdown />
+        <CreateDropdown
+          key={dropdownConfigs[0].key}
+          {...dropdownConfigs[0].buttonProps}
+        />
         {iconButtons.map(({ Icon, onClick }) => (
           <HeaderIconButton
             key={`header-icon-button-${Icon.toString}`}
@@ -58,7 +84,10 @@ export const GlobalHeader = () => {
           flexItem
           sx={{ borderColor: '#373A40' }}
         />
-        <ProfileDropdown />
+        <ProfileDropdown
+          key={dropdownConfigs[1].key}
+          {...dropdownConfigs[1].buttonProps}
+        />
       </Toolbar>
     </AppBar>
   );

workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/CreateDropdown.tsx

@@ -20,6 +20,12 @@ import ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined
 import CategoryOutlinedIcon from '@mui/icons-material/CategoryOutlined';
 import { MenuItemConfig } from './MenuSection';
 
+interface CreateButtonProps {
+  handleMenu: (event: React.MouseEvent<HTMLElement>) => void;
+  anchorEl: HTMLElement | null;
+  setAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+}
+
 const models = [
   {
     key: 'key-1',
@@ -58,6 +64,7 @@ const menuSections = [
       label: m.label,
       link: `/create/templates/default/${m.value}`,
     })),
+    handleClose: () => {},
   },
 ];
 
@@ -70,7 +77,11 @@ const menuBottomItems: MenuItemConfig[] = [
     link: '/catalog-import',
   },
 ];
-const CreateDropdown: React.FC = () => {
+const CreateDropdown: React.FC<CreateButtonProps> = ({
+  handleMenu,
+  anchorEl,
+  setAnchorEl,
+}) => {
   return (
     <HeaderDropdownComponent
       buttonContent={
@@ -85,6 +96,9 @@ const CreateDropdown: React.FC = () => {
         variant: 'contained',
         sx: { marginRight: '1rem' },
       }}
+      buttonClick={handleMenu}
+      anchorEl={anchorEl}
+      setAnchorEl={setAnchorEl}
     />
   );
 };

workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/HeaderDropdownComponent.tsx

@@ -15,10 +15,8 @@
  */
 
 import React from 'react';
-import { Dropdown } from '@mui/base/Dropdown';
-import { Menu } from '@mui/base/Menu';
-import { MenuItem } from '@mui/base/MenuItem';
-import { MenuButton } from '@mui/base/MenuButton';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import { Link } from '@backstage/core-components';
@@ -31,6 +29,9 @@ interface HeaderDropdownProps {
   menuSections?: MenuSectionConfig[];
   menuBottomItems?: MenuItemConfig[];
   buttonProps?: React.ComponentProps<typeof Button>;
+  buttonClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  anchorEl: HTMLElement | null;
+  setAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
 }
 
 const Listbox = styled('ul')(
@@ -39,7 +40,7 @@ const Listbox = styled('ul')(
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  min-width: 188px;
+  min-width: 160px;
   border-radius: 3px;
   text-decoration: none;
   list-style: none;
@@ -70,60 +71,95 @@ const HeaderDropdownComponent: React.FC<HeaderDropdownProps> = ({
   menuSections = [],
   menuBottomItems = [],
   buttonProps,
+  buttonClick,
+  anchorEl,
+  setAnchorEl,
 }) => {
   const shouldHideDivider = (index: number) =>
     menuSections.length === 1 &&
     index === menuSections.length - 1 &&
     menuBottomItems.length === 0;
 
   return (
-    <Dropdown>
-      <MenuButton slots={{ root: 'div' }}>
-        <Button {...buttonProps}>{buttonContent}</Button>
-      </MenuButton>
-      <Menu slots={{ listbox: Listbox }}>
-        {menuSections.map((section, index) => (
-          <MenuSection
-            key={section.sectionLabel}
-            {...{ hideDivider: shouldHideDivider(index), ...section }}
-          />
-        ))}
-        {menuBottomItems.map(({ key, icon: Icon, label, subLabel, link }) => (
-          <MenuItem key={key} style={{ margin: '8px' }}>
-            {link && (
-              <Link
-                to={link}
-                style={{
-                  display: 'flex',
-                  color: 'inherit',
-                  alignItems: 'center',
-                  textDecoration: 'none',
-                }}
-              >
-                {Icon && (
-                  <Icon
-                    fontSize="small"
-                    style={{
-                      marginRight: '0.5rem',
-                      flexShrink: 0,
-                      color: 'slategray',
-                    }}
-                  />
-                )}
-                <Box>
-                  <Typography variant="body2">{label}</Typography>
-                  {subLabel && (
-                    <Typography variant="caption" color="text.secondary">
-                      {subLabel}
-                    </Typography>
+    <Box>
+      <Button
+        disableRipple
+        disableTouchRipple
+        {...buttonProps}
+        onClick={buttonClick}
+      >
+        {buttonContent}
+      </Button>
+      <Menu
+        id="menu-appbar"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={() => setAnchorEl(null)}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'center',
+        }}
+        sx={{
+          '& ul[class*="MuiMenu-list"]': {
+            py: 0,
+          },
+        }}
+      >
+        <Listbox role="menu">
+          {menuSections.map((section, index) => (
+            <MenuSection
+              key={section.sectionLabel}
+              {...{ hideDivider: shouldHideDivider(index), ...section }}
+              handleClose={() => setAnchorEl(null)}
+            />
+          ))}
+          {menuBottomItems.map(({ key, icon: Icon, label, subLabel, link }) => (
+            <MenuItem
+              key={key}
+              sx={{ my: '8px', '&:hover': { background: 'transparent' } }}
+              onClick={() => setAnchorEl(null)}
+              disableRipple
+            >
+              {link && (
+                <Link
+                  to={link}
+                  style={{
+                    display: 'flex',
+                    color: 'inherit',
+                    alignItems: 'center',
+                    textDecoration: 'none',
+                  }}
+                >
+                  {Icon && (
+                    <Icon
+                      fontSize="small"
+                      style={{
+                        marginRight: '0.5rem',
+                        flexShrink: 0,
+                        color: 'slategray',
+                      }}
+                    />
                   )}
-                </Box>
-              </Link>
-            )}
-          </MenuItem>
-        ))}
+                  <Box>
+                    <Typography variant="body2">{label}</Typography>
+                    {subLabel && (
+                      <Typography variant="caption" color="text.secondary">
+                        {subLabel}
+                      </Typography>
+                    )}
+                  </Box>
+                </Link>
+              )}
+            </MenuItem>
+          ))}
+        </Listbox>
       </Menu>
-    </Dropdown>
+    </Box>
   );
 };