Skip to content

Commit 1acea4b

Browse files
christoph-jerolimovciiay
christoph-jerolimov
and
ciiay
authored
feat(global-header): refactoring (extract SupportButton, NotificationButton, Divider) (#415)
* feat(global-header): extract SupportButton component Signed-off-by: Christoph Jerolimov <jerolimov+git@redhat.com> * feat(global-header): extract NotificationButton component Signed-off-by: Christoph Jerolimov <jerolimov+git@redhat.com> * chore(global-header): add rhdh-theme for testing Signed-off-by: Christoph Jerolimov <jerolimov+git@redhat.com> * feat(global-header): renamed and refactore exported components, replaced slot config with divider component Signed-off-by: Christoph Jerolimov <jerolimov+git@redhat.com> * fix(global-header): add missing NotificationButton export * fix(global-header): fix crash in SoftwareTemplatesSection * fix(global-header): default to small icons * fix(global-header): skip notification button when notification api is not available * fix(global-header): default to small icons * add a wraper for tooltip Signed-off-by: Yi Cai <yicai@redhat.com> * add wrapper to tooltip child Signed-off-by: Yi Cai <yicai@redhat.com> * updated report.api.md Signed-off-by: Yi Cai <yicai@redhat.com> * hide notifications button when plugin not enabled Signed-off-by: Yi Cai <yicai@redhat.com> * fixed unit tests Signed-off-by: Yi Cai <yicai@redhat.com> --------- Signed-off-by: Christoph Jerolimov <jerolimov+git@redhat.com> Signed-off-by: Yi Cai <yicai@redhat.com> Co-authored-by: Yi Cai <yicai@redhat.com>
1 parent bad7cb0 commit 1acea4b

47 files changed

Lines changed: 1428 additions & 761 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎workspaces/global-header/.changeset/empty-tools-attend.md‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎workspaces/global-header/.changeset/ten-suits-allow.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
'@red-hat-developer-hub/backstage-plugin-global-header': major
2+
'@red-hat-developer-hub/backstage-plugin-global-header': minor
33
---
44

55
First version of Global Header plugin with the following components:
@@ -11,6 +11,10 @@ First version of Global Header plugin with the following components:
1111
- RegisterAComponentSection
1212
- ProfileDropdown
1313
- LogoutButton
14+
- HeaderButton
15+
- HeaderIcon
1416
- HeaderIconButton
15-
- HeaderLink
17+
- MenuItemLink
18+
- Spacer
19+
- Divider
1620
- NotificationBanner

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
app:
2-
title: Scaffolded Backstage App
2+
title: RHDH Global Header Test App
33
baseUrl: http://localhost:3000
4+
support:
5+
url: https://access.redhat.com/products/red-hat-developer-hub
6+
items:
7+
- title: Red Hat Developer Hub
8+
links:
9+
- url: https://access.redhat.com/products/red-hat-developer-hub
10+
title: Product Info
11+
- url: https://access.redhat.com/documentation/en-us/red_hat_developer_hub
12+
title: Documentation
413

514
organization:
615
name: My Company

‎workspaces/global-header/docs/components/button-and-icons.md‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
# Generic header button and icons
2+
3+
## HeaderButton
4+
5+
Displays a button to link a internal or external page.
6+
7+
Example:
8+
9+
```yaml
10+
mountPoints:
11+
- mountPoint: global.header/component
12+
importName: HeaderButton
13+
config:
14+
priority: 100
15+
```
16+
17+
Config parameters:
18+
19+
| Config key | Description |
20+
| ---------- | ---------------------------------------------------------- |
21+
| `props` | Required, at least title and to prop needs to be specified |
22+
| `layout` | Optional CSS |
23+
24+
Props:
25+
26+
| Props | Description |
27+
| ------------------ | ---------------------------------------------------------------------------------------- |
28+
| `title` | Required label for the button |
29+
| `to` | Required internal or external link |
30+
| `tooltip` | Optional |
31+
| `color` | Optional, one of `inherit`, `primary`, `secondary`, `default`, default is `inherit` |
32+
| `size` | Optional, one of `small`, `medium`, `large`, default is `medium` |
33+
| `variant` | Optional, one of `text`, `outlined`, `contained`, default is `text` |
34+
| `ariaLabel` | Optional accessibility label |
35+
| `startIcon` | Optional icon, see `HeaderIcon` > `icon` for more information |
36+
| `endIcon` | Optional icon, see `HeaderIcon` > `icon` for more information |
37+
| `externalLinkIcon` | Optional boolean, default is `true`. Shows automatically a small icon for external links |
38+
39+
## HeaderIcon
40+
41+
Shows a non-clickable icon in the header.
42+
43+
```yaml
44+
mountPoints:
45+
- mountPoint: global.header/component
46+
importName: HeaderIcon
47+
config:
48+
priority: 100
49+
```
50+
51+
Config parameters:
52+
53+
| Config key | Description |
54+
| ---------- | ----------------------------- |
55+
| `props` | Required to specific the icon |
56+
| `layout` | Optional CSS |
57+
58+
Props:
59+
60+
| Props | Description |
61+
| ----------- | --------------------------------------------------------------------------------------- |
62+
| `icon` | The icon can reference a Backstage icon, an inline svg image or a remote icon (url)\*\* |
63+
| `color` | Optional, one of `inherit`, `primary`, `secondary`, `default`, default is `inherit` |
64+
| `size` | Optional, one of `small`, `medium`, `large`, default is `medium` |
65+
| `ariaLabel` | Optional accessibility label |
66+
67+
\*SVG images must start with `<svg`.
68+
69+
\*\*Please note that remote URLs must be accepted in the CSP.
70+
71+
## HeaderIconButton
72+
73+
Shows a clickable icon in the header.
74+
75+
```yaml
76+
mountPoints:
77+
- mountPoint: global.header/component
78+
importName: HeaderIconButton
79+
config:
80+
priority: 100
81+
```
82+
83+
Config parameters:
84+
85+
| Config key | Description |
86+
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
87+
| `props` | Required, at least title and to prop needs to be specified. Title is used as tooltip and for accessability. Both values can be overriden with more specific values. |
88+
| `layout` | Optional CSS |
89+
90+
Props:
91+
92+
| Props | Description |
93+
| ----------- | ----------------------------------------------------------------------------------- |
94+
| `title` | Required information for the button which is used as tooltip and for accessability. |
95+
| `to` | Required internal or external link |
96+
| `tooltip` | Optional |
97+
| `color` | Optional, one of `inherit`, `primary`, `secondary`, `default`, default is `inherit` |
98+
| `size` | Optional, one of `small`, `medium`, `large`, default is `medium` |
99+
| `ariaLabel` | Optional accessibility label |

‎workspaces/global-header/docs/components/divider.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Divider
2+
3+
Shows a small vertical divider.
4+
5+
```yaml
6+
mountPoints:
7+
- mountPoint: global.header/component
8+
importName: Divider
9+
config:
10+
priority: 150
11+
```

‎workspaces/global-header/docs/components/spacer.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Spacer
2+
3+
A horizontal spacer that grows as much as possible/needed.
4+
5+
Multiple spacer could be configured.
6+
7+
```yaml
8+
mountPoints:
9+
- mountPoint: global.header/component
10+
importName: Spacer
11+
config:
12+
priority: 150
13+
props:
14+
growFactor: 1
15+
minWidth: 1
16+
```
17+
18+
Optional props:
19+
20+
| Props | Description |
21+
| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
22+
| `growFactor` | Optional grow factor which is only used when multiple spacers are configured. |
23+
| `minWidth` | Optional number or string to specfify a minimum width. Numbers uses a theme-like width (multiplied with 8), strings like `16px` will be passed to the CSS layout |

‎workspaces/global-header/docs/configuration.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,7 @@ After that customers can implement and install their own header as a dynamic plu
3939
- mountPoint: application/header
4040
importName: <Header component name>
4141
config:
42-
layout:
43-
position: above-main-content
42+
position: above-main-content
4443
```
4544
4645
<!--

‎workspaces/global-header/mkdocs.yaml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,7 @@ plugins:
66
nav:
77
- About: index.md
88
- Configuration: configuration.md
9+
- Components:
10+
- Button and icons: components/button-and-icons.md
11+
- Divider: components/divider.md
12+
- Spacer: components/spacer.md

‎workspaces/global-header/packages/app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
"@mui/icons-material": "5.16.13",
5151
"@red-hat-developer-hub/backstage-plugin-global-header": "workspace:^",
5252
"@red-hat-developer-hub/backstage-plugin-global-header-test": "workspace:^",
53+
"@redhat-developer/red-hat-developer-hub-theme": "^0.5.0",
5354
"react": "^18.0.2",
5455
"react-dom": "^18.0.2",
5556
"react-router": "^6.3.0",

‎workspaces/global-header/packages/app/src/App.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@ import { SignalsDisplay } from '@backstage/plugin-signals';
5656
import { NotificationsPage } from '@backstage/plugin-notifications';
5757
import { githubAuthApiRef } from '@backstage/core-plugin-api';
5858

59+
import { getAllThemes } from '@redhat-developer/red-hat-developer-hub-theme';
60+
5961
const app = createApp({
6062
apis,
6163
bindRoutes({ bind }) {
@@ -92,6 +94,7 @@ const app = createApp({
9294
/>
9395
),
9496
},
97+
themes: getAllThemes(),
9598
});
9699

97100
const routes = (

0 commit comments

Comments
 (0)