Skip to content

Commit

Permalink
Removed mui/base reference
Browse files Browse the repository at this point in the history
Signed-off-by: Yi Cai <[email protected]>
  • Loading branch information
ciiay committed Dec 20, 2024
1 parent 56867e5 commit 8e51028
Show file tree
Hide file tree
Showing 14 changed files with 3,382 additions and 4,215 deletions.
2 changes: 1 addition & 1 deletion .github/CODEOWNERS
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
Expand Up @@ -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
925 changes: 0 additions & 925 deletions workspaces/global-header/.yarn/releases/yarn-4.4.1.cjs

This file was deleted.

5 changes: 0 additions & 5 deletions workspaces/global-header/.yarnrc.yml

This file was deleted.

27 changes: 12 additions & 15 deletions workspaces/global-header/app-config.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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:
Expand All @@ -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
Expand All @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion workspaces/global-header/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 0 additions & 2 deletions workspaces/global-header/plugins/global-header/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
},
},
];

Expand All @@ -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}`}
Expand All @@ -58,7 +84,10 @@ export const GlobalHeader = () => {
flexItem
sx={{ borderColor: '#373A40' }}
/>
<ProfileDropdown />
<ProfileDropdown
key={dropdownConfigs[1].key}
{...dropdownConfigs[1].buttonProps}
/>
</Toolbar>
</AppBar>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -58,6 +64,7 @@ const menuSections = [
label: m.label,
link: `/create/templates/default/${m.value}`,
})),
handleClose: () => {},
},
];

Expand All @@ -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={
Expand All @@ -85,6 +96,9 @@ const CreateDropdown: React.FC = () => {
variant: 'contained',
sx: { marginRight: '1rem' },
}}
buttonClick={handleMenu}
anchorEl={anchorEl}
setAnchorEl={setAnchorEl}
/>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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')(
Expand All @@ -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;
Expand Down Expand Up @@ -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>
);
};

Expand Down
Loading

0 comments on commit 8e51028

Please sign in to comment.