Skip to content

Commit e19aed1

Browse files
christoph-jerolimovciiay
christoph-jerolimov
and
ciiay
authored
feat(global-header): add support for layout option in app-config and improved responsive layout a bit (#424)
* Revert "hide notifications button when plugin not enabled" This reverts commit 5713a1e. * feat(global-header): add support for layout option in app-config and improved responsive layout a bit * added layout props to dropdowns Signed-off-by: Yi Cai <yicai@redhat.com> * minor fix Signed-off-by: Yi Cai <yicai@redhat.com> * fixed failed unit test Signed-off-by: Yi Cai <yicai@redhat.com> --------- Signed-off-by: Yi Cai <yicai@redhat.com> Co-authored-by: Yi Cai <yicai@redhat.com>
1 parent e50b959 commit e19aed1

25 files changed

Lines changed: 277 additions & 251 deletions

File tree

‎workspaces/global-header/.changeset/clever-forks-double.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@red-hat-developer-hub/backstage-plugin-global-header': minor
3+
---
4+
5+
Remove ComponmentType to simplify API and add layout prop to the header components to support some responsive design tweaks in dynamic plugin config. Moved some local styles to the incl. app config as well and hide the username on xs and sm screen sizes.

‎workspaces/global-header/plugins/global-header/app-config.dynamic.yaml‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,56 +7,58 @@ dynamicPlugins:
77
importName: GlobalHeader
88
config:
99
position: above-main-content # above-main-content | below-main-content
10+
1011
- mountPoint: global.header/component
1112
importName: SearchComponent
1213
config:
13-
type: search
1414
priority: 100
15+
1516
- mountPoint: global.header/component
16-
importName: CreateDropdown
17+
importName: Spacer
1718
config:
18-
type: dropdown_button
19-
priority: 90
20-
- mountPoint: global.header/create
21-
importName: SoftwareTemplatesSection
22-
config:
23-
type: list
24-
priority: 10
25-
- mountPoint: global.header/create
26-
importName: RegisterAComponentSection
27-
config:
28-
type: link
19+
priority: 99
20+
props:
21+
growFactor: 0
22+
2923
- mountPoint: global.header/component
3024
importName: HeaderIconButton
3125
config:
32-
type: icon_button
33-
priority: 80
26+
priority: 90
3427
props:
35-
icon: support
36-
tooltip: 'Support'
28+
title: Create...
29+
icon: add
30+
to: create
31+
3732
- mountPoint: global.header/component
38-
importName: HeaderIconButton
33+
importName: SupportButton
34+
config:
35+
priority: 80
36+
37+
- mountPoint: global.header/component
38+
importName: NotificationButton
3939
config:
40-
type: icon_button
4140
priority: 70
42-
props:
43-
icon: notifications
44-
tooltip: 'Notifications'
41+
42+
- mountPoint: global.header/component
43+
importName: Divider
44+
config:
45+
priority: 50
46+
4547
- mountPoint: global.header/component
4648
importName: ProfileDropdown
4749
config:
48-
type: dropdown_button
49-
priority: 0
50+
priority: 10
51+
5052
- mountPoint: global.header/profile
5153
importName: MenuItemLink
5254
config:
53-
type: link
54-
priority: 200
55+
priority: 100
5556
props:
5657
title: Settings
5758
link: /settings
5859
icon: manageAccounts
60+
5961
- mountPoint: global.header/profile
6062
importName: LogoutButton
6163
config:
62-
priority: 100
64+
priority: 10

‎workspaces/global-header/plugins/global-header/dev/index.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ import {
4848
} from '../src/defaultMountPoints/defaultMountPoints';
4949

5050
import { HeaderButton } from '../src/components/HeaderButton/HeaderButton';
51-
import { ComponentType } from '../src/types';
5251

5352
const mockSearchApi = new MockSearchApi({
5453
results: [
@@ -179,13 +178,12 @@ createDevApp()
179178
mountPoints={{
180179
'global.header/component': [
181180
...defaultGlobalHeaderComponentsMountPoints.filter(
182-
mp => mp.config?.type !== ComponentType.SEARCH,
181+
(_mp, index) => index > 0,
183182
),
184183
{
185184
Component: Spacer,
186185
config: {
187-
type: ComponentType.SPACER,
188-
priority: 10000, // the greater the number, the more to the left it will be
186+
priority: 100, // the greater the number, the more to the left it will be
189187
},
190188
},
191189
],

‎workspaces/global-header/plugins/global-header/report.api.md‎

Lines changed: 41 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,25 @@ import { BackstagePlugin } from '@backstage/core-plugin-api';
99
import { default as React_2 } from 'react';
1010

1111
// @public
12-
export enum ComponentType {
13-
DROPDOWN_BUTTON = 'dropdown_button',
14-
ICON_BUTTON = 'icon_button',
15-
LINK = 'link',
16-
LIST = 'list',
17-
LOGOUT = 'logout',
18-
SEARCH = 'search',
19-
SPACER = 'spacer',
20-
SUPPORT_BUTTON = 'support_button',
21-
}
12+
export const CreateDropdown: React_2.ComponentType<CreateDropdownProps>;
2213

2314
// @public
24-
export const CreateDropdown: () => React_2.JSX.Element | null;
15+
export interface CreateDropdownProps {
16+
// (undocumented)
17+
layout?: React_2.CSSProperties;
18+
}
2519

2620
// @public
2721
export const defaultGlobalHeaderComponentsMountPoints: GlobalHeaderComponentMountPoint[];
2822

2923
// @public (undocumented)
30-
export const Divider: () => React_2.JSX.Element;
24+
export const Divider: ({ layout }: DividerProps) => React_2.JSX.Element;
25+
26+
// @public (undocumented)
27+
export interface DividerProps {
28+
// (undocumented)
29+
layout?: React_2.CSSProperties;
30+
}
3131

3232
// @public
3333
export const GlobalHeader: () => React_2.JSX.Element;
@@ -38,20 +38,20 @@ export const GlobalHeaderComponent: React_2.ComponentType<GlobalHeaderComponentP
3838
// @public
3939
export interface GlobalHeaderComponentMountPoint {
4040
// (undocumented)
41-
Component: React.ComponentType<{}>;
41+
Component: React.ComponentType<{
42+
layout?: React.CSSProperties;
43+
}>;
4244
// (undocumented)
4345
config?: GlobalHeaderComponentMountPointConfig & {
44-
layout?: Record<string, any>;
4546
props?: Record<string, any>;
47+
layout?: React.CSSProperties;
4648
};
4749
}
4850

4951
// @public
5052
export interface GlobalHeaderComponentMountPointConfig {
5153
// (undocumented)
5254
priority?: number;
53-
// (undocumented)
54-
type?: ComponentType;
5555
}
5656

5757
// @public
@@ -75,7 +75,7 @@ export const HeaderButton: ({
7575
endIcon,
7676
externalLinkIcon,
7777
to,
78-
style,
78+
layout,
7979
}: HeaderButtonProps) => React_2.JSX.Element;
8080

8181
// @public (undocumented)
@@ -89,12 +89,12 @@ export interface HeaderButtonProps {
8989
// (undocumented)
9090
externalLinkIcon?: boolean;
9191
// (undocumented)
92+
layout?: React_2.CSSProperties;
93+
// (undocumented)
9294
size?: 'small' | 'medium' | 'large';
9395
// (undocumented)
9496
startIcon?: string;
9597
// (undocumented)
96-
style?: React_2.CSSProperties;
97-
// (undocumented)
9898
title: string;
9999
// (undocumented)
100100
to: string;
@@ -108,7 +108,7 @@ export interface HeaderButtonProps {
108108
export const HeaderIcon: ({
109109
icon,
110110
size,
111-
styles,
111+
layout,
112112
}: HeaderIconProps) => React_2.JSX.Element | null;
113113

114114
// @public (undocumented)
@@ -120,7 +120,7 @@ export const HeaderIconButton: ({
120120
size,
121121
ariaLabel,
122122
to,
123-
style,
123+
layout,
124124
}: HeaderIconButtonProps) => React_2.JSX.Element;
125125

126126
// @public (undocumented)
@@ -132,9 +132,9 @@ export interface HeaderIconButtonProps {
132132
// (undocumented)
133133
icon: string;
134134
// (undocumented)
135-
size?: 'small' | 'medium' | 'large';
135+
layout?: React_2.CSSProperties;
136136
// (undocumented)
137-
style?: React_2.CSSProperties;
137+
size?: 'small' | 'medium' | 'large';
138138
// (undocumented)
139139
title: string;
140140
// (undocumented)
@@ -148,9 +148,9 @@ export interface HeaderIconProps {
148148
// (undocumented)
149149
icon: string;
150150
// (undocumented)
151-
size?: 'small' | 'medium' | 'large';
151+
layout?: React_2.CSSProperties;
152152
// (undocumented)
153-
styles?: React_2.CSSProperties;
153+
size?: 'small' | 'medium' | 'large';
154154
}
155155

156156
// @public
@@ -168,8 +168,6 @@ export interface MenuItemConfig {
168168
link?: string;
169169
// (undocumented)
170170
subLabel?: string;
171-
// (undocumented)
172-
type: string;
173171
}
174172

175173
// @public
@@ -225,6 +223,7 @@ export const NotificationButton: ({
225223
size,
226224
badgeColor,
227225
to,
226+
layout,
228227
}: NotificationButtonProps) => React_2.JSX.Element | null;
229228

230229
// @public (undocumented)
@@ -249,6 +248,8 @@ export interface NotificationButtonProps {
249248
| 'success'
250249
| 'warning';
251250
// (undocumented)
251+
layout?: React_2.CSSProperties;
252+
// (undocumented)
252253
size?: 'small' | 'medium' | 'large';
253254
// (undocumented)
254255
title?: string;
@@ -259,7 +260,13 @@ export interface NotificationButtonProps {
259260
}
260261

261262
// @public
262-
export const ProfileDropdown: () => React_2.JSX.Element | null;
263+
export const ProfileDropdown: React_2.ComponentType<ProfileDropdownProps>;
264+
265+
// @public
266+
export interface ProfileDropdownProps {
267+
// (undocumented)
268+
layout?: React_2.CSSProperties;
269+
}
263270

264271
// @public
265272
export const RegisterAComponentSection: React_2.ComponentType<RegisterAComponentSectionProps>;
@@ -286,13 +293,16 @@ export type SoftwareTemplatesSectionProps = {
286293
export const Spacer: ({
287294
growFactor,
288295
minWidth,
296+
layout,
289297
}: SpacerProps) => React_2.JSX.Element;
290298

291299
// @public (undocumented)
292300
export interface SpacerProps {
293301
// (undocumented)
294302
growFactor?: number;
295303
// (undocumented)
304+
layout?: React_2.CSSProperties;
305+
// (undocumented)
296306
minWidth?: number | string;
297307
}
298308

@@ -303,6 +313,7 @@ export const SupportButton: ({
303313
color,
304314
size,
305315
to,
316+
layout,
306317
}: SupportButtonProps) => React_2.JSX.Element | null;
307318

308319
// @public (undocumented)
@@ -318,6 +329,8 @@ export interface SupportButtonProps {
318329
| 'success'
319330
| 'warning';
320331
// (undocumented)
332+
layout?: React_2.CSSProperties;
333+
// (undocumented)
321334
size?: 'small' | 'medium' | 'large';
322335
// (undocumented)
323336
title?: string;

‎workspaces/global-header/plugins/global-header/src/components/Divider/Divider.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,19 @@ import MUIDivider from '@mui/material/Divider';
2121
/**
2222
* @public
2323
*/
24-
export const Divider = () => {
24+
export interface DividerProps {
25+
layout?: React.CSSProperties;
26+
}
27+
28+
/**
29+
* @public
30+
*/
31+
export const Divider = ({ layout }: DividerProps) => {
2532
return (
2633
<MUIDivider
2734
orientation="vertical"
2835
flexItem
29-
sx={{ borderColor: '#383838', marginX: 1 }}
36+
sx={{ borderColor: '#383838', marginX: 1, ...layout }}
3037
/>
3138
);
3239
};

‎workspaces/global-header/plugins/global-header/src/components/GlobalHeaderComponent.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ import Toolbar from '@mui/material/Toolbar';
2424
import { GlobalHeaderComponentMountPoint } from '../types';
2525

2626
/**
27-
* @public
2827
* Global Header Component properties
28+
* @public
2929
*/
3030
export interface GlobalHeaderComponentProps {
3131
globalHeaderMountPoints: GlobalHeaderComponentMountPoint[];
@@ -53,7 +53,7 @@ export const GlobalHeaderComponent = ({
5353
<ErrorBoundary key={`header-component-${index}`}>
5454
<mountPoint.Component
5555
{...mountPoint.config?.props}
56-
// sx={mountPoint.config.layout}
56+
layout={mountPoint.config?.layout}
5757
/>
5858
</ErrorBoundary>
5959
))}

0 commit comments

Comments
 (0)