Skip to content

Commit 858b7bf

Browse files
debsmita1debsmita1
committed
feat(fab): created dynamic fab to be integrated in the RHDH app
1 parent 8ac4661 commit 858b7bf

File tree

15 files changed

+396
-66
lines changed

15 files changed

+396
-66
lines changed

‎workspaces/global-floating-action-button/.changeset/funny-jars-itch.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@red-hat-developer-hub/backstage-plugin-global-floating-action-button': patch
3+
---
4+
5+
created dynamic fab to be integrated in the RHDH app

‎workspaces/global-floating-action-button/plugins/global-floating-action-button/app-config.dynamic.yaml

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
dynamicPlugins:
2+
frontend:
3+
red-hat-developer-hub.backstage-plugin-global-floating-action-button:
4+
mountPoints:
5+
- mountPoint: application/provider
6+
importName: DynamicGlobalFloatingActionButton
7+
- mountPoint: application/listener
8+
importName: DynamicGlobalFloatingActionButtonRouteListener
9+
- mountPoint: global.floatingactionbutton/component
10+
config:
11+
icon: github
12+
label: 'Git'
13+
toolTip: 'Github'
14+
to: https://github.com/rhdh-plugins

‎workspaces/global-floating-action-button/plugins/global-floating-action-button/dev/ExampleComponent/ExampleComponent.tsx

+7-54
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,6 @@
1515
*/
1616

1717
import React from 'react';
18-
import AddIcon from '@mui/icons-material/Add';
19-
import GitIcon from '@mui/icons-material/GitHub';
20-
import MenuIcon from '@mui/icons-material/Menu';
2118
import Typography from '@mui/material/Typography';
2219
import Grid from '@mui/material/Grid';
2320

@@ -29,12 +26,15 @@ import {
2926
ContentHeader,
3027
HeaderLabel,
3128
SupportButton,
32-
GitHubIcon,
3329
} from '@backstage/core-components';
3430
import { ExampleFetchComponent } from './ExampleFetchComponent';
35-
import { GlobalFloatingActionButton, Slot } from '../../src';
31+
import { FloatingActionButton, GlobalFloatingActionButton } from '../../src';
3632

37-
export const ExampleComponent = () => (
33+
export const ExampleComponent = ({
34+
floatingButtons,
35+
}: {
36+
floatingButtons?: FloatingActionButton[];
37+
}) => (
3838
<Page themeId="tool">
3939
<Header
4040
title="Welcome to global-floating-action-button!"
@@ -59,54 +59,7 @@ export const ExampleComponent = () => (
5959
<ExampleFetchComponent />
6060
</Grid>
6161
</Grid>
62-
<GlobalFloatingActionButton
63-
floatingButtons={[
64-
{
65-
color: 'success',
66-
icon: <GitIcon />,
67-
label: 'Git repo',
68-
showLabel: true,
69-
to: 'https://github.com/xyz',
70-
toolTip: 'Git',
71-
},
72-
73-
{
74-
color: 'info',
75-
label: 'Quay',
76-
to: 'https://quay.io',
77-
toolTip: 'Quay',
78-
icon: '<svg viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M200.134 0l55.555 117.514-55.555 117.518h-47.295l55.555-117.518L152.84 0h47.295zM110.08 99.836l20.056-38.092-2.29-8.868L102.847 0H55.552l48.647 102.898 5.881-3.062zm17.766 74.433l-17.333-39.034-6.314-3.101-48.647 102.898h47.295l25-52.88v-7.883z" fill="#40B4E5"/><path d="M152.842 235.032L97.287 117.514 152.842 0h47.295l-55.555 117.514 55.555 117.518h-47.295zm-97.287 0L0 117.514 55.555 0h47.296L47.295 117.514l55.556 117.518H55.555z" fill="#003764"/></svg>',
79-
},
80-
{
81-
slot: Slot.BOTTOM_LEFT,
82-
color: 'success',
83-
icon: <AddIcon />,
84-
label: 'Add',
85-
toolTip: 'Add',
86-
to: '/test-global-floating-action',
87-
priority: 100,
88-
},
89-
{
90-
slot: Slot.BOTTOM_LEFT,
91-
color: 'success',
92-
label: 'Github',
93-
icon: <GitHubIcon />,
94-
toolTip: 'Github',
95-
to: 'https://github.com/xyz',
96-
priority: 200,
97-
visibleOnPaths: ['/test-global-floating-action'],
98-
},
99-
{
100-
color: 'success',
101-
icon: <MenuIcon />,
102-
label: 'Menu',
103-
toolTip: 'Menu',
104-
to: 'https://github.com/xyz',
105-
priority: 200,
106-
excludeOnPaths: ['/test-global-floating-action'],
107-
},
108-
]}
109-
/>
62+
<GlobalFloatingActionButton floatingButtons={floatingButtons || []} />
11063
</Content>
11164
</Page>
11265
);

‎workspaces/global-floating-action-button/plugins/global-floating-action-button/dev/index.tsx

+150-3
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,165 @@
1515
*/
1616

1717
import React from 'react';
18-
import { createDevApp } from '@backstage/dev-utils';
18+
import { createDevApp, DevAppPageOptions } from '@backstage/dev-utils';
19+
import AddIcon from '@mui/icons-material/Add';
20+
import GitIcon from '@mui/icons-material/GitHub';
21+
import MenuIcon from '@mui/icons-material/Menu';
22+
import { GitHubIcon } from '@backstage/core-components';
23+
import { ScalprumContext, ScalprumState } from '@scalprum/react-core';
24+
import { PluginStore } from '@openshift/dynamic-plugin-sdk';
25+
1926
import { ExampleComponent } from './ExampleComponent/ExampleComponent';
27+
import {
28+
DynamicGlobalFloatingActionButton,
29+
FloatingActionButton,
30+
Slot,
31+
} from '../src';
32+
33+
const mockFloatingButtons: FloatingActionButton[] = [
34+
{
35+
color: 'success',
36+
icon: <GitIcon />,
37+
label: 'Git repo',
38+
showLabel: true,
39+
to: 'https://github.com/xyz',
40+
toolTip: 'Git',
41+
},
42+
43+
{
44+
color: 'info',
45+
label: 'Quay',
46+
to: 'https://quay.io',
47+
toolTip: 'Quay',
48+
icon: '<svg viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M200.134 0l55.555 117.514-55.555 117.518h-47.295l55.555-117.518L152.84 0h47.295zM110.08 99.836l20.056-38.092-2.29-8.868L102.847 0H55.552l48.647 102.898 5.881-3.062zm17.766 74.433l-17.333-39.034-6.314-3.101-48.647 102.898h47.295l25-52.88v-7.883z" fill="#40B4E5"/><path d="M152.842 235.032L97.287 117.514 152.842 0h47.295l-55.555 117.514 55.555 117.518h-47.295zm-97.287 0L0 117.514 55.555 0h47.296L47.295 117.514l55.556 117.518H55.555z" fill="#003764"/></svg>',
49+
},
50+
{
51+
slot: Slot.BOTTOM_LEFT,
52+
color: 'success',
53+
icon: <AddIcon />,
54+
label: 'Add',
55+
toolTip: 'Add',
56+
to: '/test-global-floating-action',
57+
priority: 100,
58+
},
59+
{
60+
slot: Slot.BOTTOM_LEFT,
61+
color: 'success',
62+
label: 'Github',
63+
icon: <GitHubIcon />,
64+
toolTip: 'Github',
65+
to: 'https://github.com/xyz',
66+
priority: 200,
67+
visibleOnPaths: ['/test-global-floating-action'],
68+
},
69+
{
70+
color: 'success',
71+
icon: <MenuIcon />,
72+
label: 'Menu',
73+
toolTip: 'Menu',
74+
to: 'https://github.com/xyz',
75+
priority: 200,
76+
excludeOnPaths: ['/test-global-floating-action'],
77+
},
78+
];
79+
80+
const createPage = ({
81+
navTitle,
82+
path,
83+
component,
84+
}: {
85+
navTitle: string;
86+
component: React.ReactElement;
87+
pageTitle: string;
88+
path: string;
89+
}): DevAppPageOptions => {
90+
const scalprumState: ScalprumState = {
91+
initialized: true,
92+
api: {
93+
dynamicRootConfig: {
94+
mountPoints: {
95+
'global.floatingactionbutton/component': [
96+
{
97+
staticJSXContent: null,
98+
config: {
99+
color: 'success',
100+
icon: 'github',
101+
label: 'DP: Git repo',
102+
showLabel: true,
103+
to: 'https://github.com/xyz',
104+
toolTip: 'Git',
105+
},
106+
},
107+
{
108+
staticJSXContent: null,
109+
config: {
110+
color: 'info',
111+
label: 'Quay',
112+
to: 'https://quay.io',
113+
toolTip: 'Quay',
114+
icon: '<svg viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M200.134 0l55.555 117.514-55.555 117.518h-47.295l55.555-117.518L152.84 0h47.295zM110.08 99.836l20.056-38.092-2.29-8.868L102.847 0H55.552l48.647 102.898 5.881-3.062zm17.766 74.433l-17.333-39.034-6.314-3.101-48.647 102.898h47.295l25-52.88v-7.883z" fill="#40B4E5"/><path d="M152.842 235.032L97.287 117.514 152.842 0h47.295l-55.555 117.514 55.555 117.518h-47.295zm-97.287 0L0 117.514 55.555 0h47.296L47.295 117.514l55.556 117.518H55.555z" fill="#003764"/></svg>',
115+
},
116+
},
117+
{
118+
staticJSXContent: null,
119+
config: {
120+
slot: 'bottom-left',
121+
color: 'success',
122+
label: 'Github',
123+
icon: 'github',
124+
toolTip: 'Github',
125+
to: 'https://github.com/xyz',
126+
priority: 200,
127+
visibleOnPaths: ['/test-global-floating-action-3'],
128+
},
129+
},
130+
],
131+
},
132+
},
133+
},
134+
config: {},
135+
pluginStore: new PluginStore(),
136+
};
137+
138+
const pageContent = (
139+
<ScalprumContext.Provider value={scalprumState}>
140+
<DynamicGlobalFloatingActionButton />
141+
{component}
142+
</ScalprumContext.Provider>
143+
);
144+
145+
return {
146+
element: pageContent,
147+
title: navTitle,
148+
path,
149+
};
150+
};
20151

21152
createDevApp()
22153
.addPage({
23-
element: <ExampleComponent />,
154+
element: <ExampleComponent floatingButtons={mockFloatingButtons} />,
24155
title: 'Page 1',
25156
path: '/test-global-floating-action',
26157
})
27158
.addPage({
28-
element: <ExampleComponent />,
159+
element: <ExampleComponent floatingButtons={mockFloatingButtons} />,
29160
title: 'Page 2',
30161
path: '/test-global-floating-action-2',
31162
})
163+
.addPage(
164+
createPage({
165+
navTitle: 'Page 3',
166+
pageTitle: 'Page 3',
167+
path: '/test-global-floating-action-3',
168+
component: <ExampleComponent />,
169+
}),
170+
)
171+
.addPage(
172+
createPage({
173+
navTitle: 'Page 4',
174+
pageTitle: 'Page 4',
175+
path: '/test-global-floating-action-4',
176+
component: <ExampleComponent />,
177+
}),
178+
)
32179
.render();

‎workspaces/global-floating-action-button/plugins/global-floating-action-button/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"@mui/icons-material": "^5.15.17",
4040
"@mui/material": "^5.15.17",
4141
"@mui/styles": "5.16.13",
42+
"@scalprum/react-core": "0.9.3",
4243
"classnames": "^2.5.1",
4344
"react-use": "^17.2.4"
4445
},
@@ -49,6 +50,7 @@
4950
"devDependencies": {
5051
"@backstage/cli": "^0.28.0",
5152
"@backstage/dev-utils": "^1.1.2",
53+
"@openshift/dynamic-plugin-sdk": "5.0.1",
5254
"@testing-library/jest-dom": "^6.0.0",
5355
"@testing-library/react": "^14.0.0",
5456
"react": "^16.13.1 || ^17.0.0 || ^18.0.0"

‎workspaces/global-floating-action-button/plugins/global-floating-action-button/report.api.md

+15
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,21 @@
88
import { BackstagePlugin } from '@backstage/core-plugin-api';
99
import { JSX as JSX_2 } from 'react';
1010

11+
// @public
12+
export const DynamicGlobalFloatingActionButton: React.ComponentType;
13+
14+
// @public
15+
export const dynamicGlobalFloatingActionButtonPlugin: BackstagePlugin<
16+
{},
17+
{},
18+
{}
19+
>;
20+
21+
// @public
22+
export type FABMountPoint = {
23+
config?: FloatingActionButton;
24+
};
25+
1126
// @public
1227
export type FloatingActionButton = {
1328
slot?: Slot;

‎workspaces/global-floating-action-button/plugins/global-floating-action-button/src/components/DynamicGlobalFloatingActionButton.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/*
2+
* Copyright Red Hat, Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import React from 'react';
18+
19+
import { useFabMountPoints } from '../hooks/useFabMountPoints';
20+
import { GlobalFloatingActionButton } from './GlobalFloatingActionButton';
21+
import { FloatingActionButton } from '../types';
22+
23+
/**
24+
* Dynamic Global Floating Action Button
25+
*
26+
* @public
27+
*/
28+
export const DynamicGlobalFloatingActionButton = () => {
29+
const allFabMountPoints = useFabMountPoints();
30+
31+
const floatingButtons = allFabMountPoints?.map(
32+
fab => fab.config,
33+
) as FloatingActionButton[];
34+
35+
return <GlobalFloatingActionButton floatingButtons={floatingButtons || []} />;
36+
};

‎workspaces/global-floating-action-button/plugins/global-floating-action-button/src/components/FABWithSubmenu.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,10 @@ import { FloatingActionButton, Slot } from '../types';
3030
const useStyles = makeStyles(theme => ({
3131
button: {
3232
paddingTop: '10px',
33-
color: theme.palette.grey[500],
33+
color:
34+
theme && Object.keys(theme).length > 0
35+
? theme.palette.grey[500]
36+
: '#9e9e9e',
3437
},
3538
menuButtonStyle: {
3639
color: '#1f1f1f',

‎workspaces/global-floating-action-button/plugins/global-floating-action-button/src/components/FloatingButton.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,14 @@ const useStyles = makeStyles(theme => ({
3232
gap: '10px',
3333
},
3434
'page-end': {
35-
bottom: theme.spacing(2),
36-
right: theme.spacing(2),
35+
bottom: theme && Object.keys(theme).length > 0 ? theme?.spacing(2) : '16px',
36+
right: theme && Object.keys(theme).length > 0 ? theme?.spacing(2) : '16px',
3737
alignItems: 'end',
3838
},
3939
'bottom-left': {
40-
bottom: theme.spacing(2),
41-
paddingLeft: theme.spacing(2),
40+
bottom: theme && Object.keys(theme).length > 0 ? theme?.spacing(2) : '16px',
41+
paddingLeft:
42+
theme && Object.keys(theme).length > 0 ? theme?.spacing(2) : '16px',
4243
alignItems: 'start',
4344
},
4445
}));

‎workspaces/global-floating-action-button/plugins/global-floating-action-button/src/components/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@
1414
* limitations under the License.
1515
*/
1616
export { GlobalFloatingActionButton } from './GlobalFloatingActionButton';
17+
export { DynamicGlobalFloatingActionButton } from './DynamicGlobalFloatingActionButton';

0 commit comments

Comments
 (0)