Skip to content

Commit f999e7e

Browse files
docs(application-provider-test): export two seperate context providers and cards
1 parent f5a2263 commit f999e7e

File tree

11 files changed

+255
-61
lines changed

11 files changed

+255
-61
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@red-hat-developer-hub/backstage-plugin-application-provider-test': patch
3+
---
4+
5+
Export two seperate context providers and cards
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
1-
# application-provider-test
1+
# @red-hat-developer-hub/backstage-plugin-application-provider-test
22

3-
Welcome to the application-provider-test plugin!
3+
A test-plugin allows you to test the [dynamic plugin mount point `application/provider`](https://github.com/redhat-developer/rhdh/blob/main/docs/dynamic-plugins/frontend-plugin-wiring.md#adding-application-providers).
44

5-
_This plugin was created through the Backstage CLI_
5+
These providers allows dynamic plugins to add a `React.Context` on an application level around all routes. Using this feature should be an exception.
66

7-
## Getting started
7+
This plugin exports two providers, two components that depends on the context of these providers and a page that renders these cards two times to see that a shared provider context is used correctly.
88

9-
Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/application-provider-test](http://localhost:3000/application-provider-test).
10-
11-
You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
12-
This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
13-
It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.
9+
```yaml
10+
dynamicPlugins:
11+
frontend:
12+
red-hat-developer-hub.backstage-plugin-application-provider-test:
13+
dynamicRoutes:
14+
- path: /application-provider-test-page
15+
importName: TestPage
16+
mountPoints:
17+
- mountPoint: application/provider
18+
importName: TestProviderOne
19+
- mountPoint: application/provider
20+
importName: TestProviderTwo
21+
```
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
# test global-header components. this isn't implemented yet!
21
dynamicPlugins:
32
frontend:
43
red-hat-developer-hub.backstage-plugin-application-provider-test:
54
dynamicRoutes:
6-
- path: /countpage
7-
importName: CountPage
5+
- path: /application-provider-test-page
6+
importName: TestPage
87
mountPoints:
98
- mountPoint: application/provider
10-
importName: CountProvider
9+
importName: TestProviderOne
10+
- mountPoint: application/provider
11+
importName: TestProviderTwo

workspaces/global-floating-action-button/plugins/application-provider-test/dev/index.tsx

+36-24
Original file line numberDiff line numberDiff line change
@@ -22,41 +22,53 @@ import Grid from '@mui/material/Grid';
2222

2323
import {
2424
applicationProviderTestPlugin,
25-
CountPage,
26-
CountProvider,
27-
CountCard,
25+
TestPage,
26+
TestProviderOne,
27+
TestProviderTwo,
28+
TestCardOne,
29+
TestCardTwo,
2830
} from '../src/plugin';
2931

3032
createDevApp()
3133
.registerPlugin(applicationProviderTestPlugin)
3234
.addPage({
3335
element: (
34-
<CountProvider>
35-
<CountPage />
36-
</CountProvider>
36+
<TestProviderOne>
37+
<TestProviderTwo>
38+
<TestPage />
39+
</TestProviderTwo>
40+
</TestProviderOne>
3741
),
38-
title: 'CountPage',
39-
path: '/count-page',
42+
title: 'TestPage',
43+
path: '/test-page',
4044
})
4145
.addPage({
4246
element: (
43-
<CountProvider>
44-
<Page themeId="home">
45-
<Header title="CountProvider" />
46-
<Content>
47-
<Grid container spacing={2}>
48-
<Grid item>
49-
<CountCard />
47+
<TestProviderOne>
48+
<TestProviderTwo>
49+
<Page themeId="test">
50+
<Header title="Test cards" />
51+
<Content>
52+
<Grid container spacing={2}>
53+
<Grid item sm={6}>
54+
<TestCardOne />
55+
</Grid>
56+
<Grid item sm={6}>
57+
<TestCardOne />
58+
</Grid>
59+
<Grid item sm={6}>
60+
<TestCardTwo />
61+
</Grid>
62+
<Grid item sm={6}>
63+
<TestCardTwo />
64+
</Grid>
5065
</Grid>
51-
<Grid item>
52-
<CountCard />
53-
</Grid>
54-
</Grid>
55-
</Content>
56-
</Page>
57-
</CountProvider>
66+
</Content>
67+
</Page>
68+
</TestProviderTwo>
69+
</TestProviderOne>
5870
),
59-
title: 'CountProvider',
60-
path: '/count-provider',
71+
title: 'TestCards',
72+
path: '/test-cards',
6173
})
6274
.render();

workspaces/global-floating-action-button/plugins/application-provider-test/report.api.md

+26-3
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,41 @@ import { ReactNode } from 'react';
1212
// @public (undocumented)
1313
export const applicationProviderTestPlugin: BackstagePlugin<{}, {}, {}>;
1414

15-
// @public (undocumented)
15+
// @public @deprecated (undocumented)
1616
export const CountCard: () => JSX_2.Element;
1717

18-
// @public (undocumented)
18+
// @public @deprecated (undocumented)
1919
export const CountPage: () => JSX_2.Element;
2020

21-
// @public (undocumented)
21+
// @public @deprecated (undocumented)
2222
export const CountProvider: ({
2323
children,
2424
}: {
2525
children?: ReactNode;
2626
}) => JSX_2.Element;
2727

28+
// @public (undocumented)
29+
export const TestCardOne: () => JSX_2.Element;
30+
31+
// @public (undocumented)
32+
export const TestCardTwo: () => JSX_2.Element;
33+
34+
// @public (undocumented)
35+
export const TestPage: () => JSX_2.Element;
36+
37+
// @public (undocumented)
38+
export const TestProviderOne: ({
39+
children,
40+
}: {
41+
children?: ReactNode;
42+
}) => JSX_2.Element;
43+
44+
// @public (undocumented)
45+
export const TestProviderTwo: ({
46+
children,
47+
}: {
48+
children?: ReactNode;
49+
}) => JSX_2.Element;
50+
2851
// (No @packageDocumentation comment for this package)
2952
```

workspaces/global-floating-action-button/plugins/application-provider-test/src/components/CountCard.tsx workspaces/global-floating-action-button/plugins/application-provider-test/src/components/TestCardOne.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@ import { InfoCard } from '@backstage/core-components';
2020

2121
import Button from '@mui/material/Button';
2222

23-
import { CountContext } from './CountProvider';
23+
import { TestContextOne } from './TestProviderOne';
2424

25-
export const CountCard = () => {
26-
const value = React.useContext(CountContext);
25+
export const TestCardOne = () => {
26+
const value = React.useContext(TestContextOne);
2727
return (
28-
<InfoCard>
28+
<InfoCard title="Context one">
2929
<div
3030
style={{
3131
display: 'flex',
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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 { InfoCard } from '@backstage/core-components';
20+
21+
import Button from '@mui/material/Button';
22+
23+
import { TestContextTwo } from './TestProviderTwo';
24+
25+
export const TestCardTwo = () => {
26+
const value = React.useContext(TestContextTwo);
27+
return (
28+
<InfoCard title="Context two">
29+
<div
30+
style={{
31+
display: 'flex',
32+
justifyContent: 'center',
33+
alignItems: 'center',
34+
}}
35+
>
36+
<Button onClick={value.decrement} style={{ fontSize: '2rem' }}>
37+
-
38+
</Button>
39+
<h2>{value.count}</h2>
40+
<Button onClick={value.increment} style={{ fontSize: '2rem' }}>
41+
+
42+
</Button>
43+
</div>
44+
</InfoCard>
45+
);
46+
};

workspaces/global-floating-action-button/plugins/application-provider-test/src/components/CountPage.tsx workspaces/global-floating-action-button/plugins/application-provider-test/src/components/TestPage.tsx

+21-5
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,31 @@ import {
2323
MarkdownContent,
2424
} from '@backstage/core-components';
2525

26-
import { CountCard } from './CountCard';
26+
import Grid from '@mui/material/Grid';
2727

28-
export const CountPage = () => {
28+
import { TestCardOne } from './TestCardOne';
29+
import { TestCardTwo } from './TestCardTwo';
30+
31+
export const TestPage = () => {
2932
return (
3033
<Page themeId="test">
31-
<Header title="CountPage" subtitle="A application-provider-test page" />
34+
<Header title="application/provider TestPage" />
3235
<Content>
33-
<MarkdownContent content="This card will work only if you register the `CountProvider` correctly." />
34-
<CountCard />
36+
<MarkdownContent content="This card will work only if you register the `TestProviderOne` and `TestProviderTwo` correctly." />
37+
<Grid container spacing={2}>
38+
<Grid item sm={6}>
39+
<TestCardOne />
40+
</Grid>
41+
<Grid item sm={6}>
42+
<TestCardOne />
43+
</Grid>
44+
<Grid item sm={6}>
45+
<TestCardTwo />
46+
</Grid>
47+
<Grid item sm={6}>
48+
<TestCardTwo />
49+
</Grid>
50+
</Grid>
3551
</Content>
3652
</Page>
3753
);

workspaces/global-floating-action-button/plugins/application-provider-test/src/components/CountProvider.tsx workspaces/global-floating-action-button/plugins/application-provider-test/src/components/TestProviderOne.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ import React from 'react';
1818

1919
import { CountContextValue } from '../types';
2020

21-
export const CountContext = React.createContext<CountContextValue>(
21+
export const TestContextOne = React.createContext<CountContextValue>(
2222
{} as CountContextValue,
2323
);
2424

25-
export const CountProvider = ({ children }: React.PropsWithChildren<{}>) => {
25+
export const TestProviderOne = ({ children }: React.PropsWithChildren<{}>) => {
2626
const [count, setCount] = React.useState(0);
2727
const increment = React.useCallback(() => setCount(c => c + 1), []);
2828
const decrement = React.useCallback(() => setCount(c => c - 1), []);
@@ -35,6 +35,6 @@ export const CountProvider = ({ children }: React.PropsWithChildren<{}>) => {
3535
[count, increment, decrement],
3636
);
3737
return (
38-
<CountContext.Provider value={value}>{children}</CountContext.Provider>
38+
<TestContextOne.Provider value={value}>{children}</TestContextOne.Provider>
3939
);
4040
};
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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 { CountContextValue } from '../types';
20+
21+
export const TestContextTwo = React.createContext<CountContextValue>(
22+
{} as CountContextValue,
23+
);
24+
25+
export const TestProviderTwo = ({ children }: React.PropsWithChildren<{}>) => {
26+
const [count, setCount] = React.useState(0);
27+
const increment = React.useCallback(() => setCount(c => c + 1), []);
28+
const decrement = React.useCallback(() => setCount(c => c - 1), []);
29+
const value = React.useMemo<CountContextValue>(
30+
() => ({
31+
count,
32+
increment,
33+
decrement,
34+
}),
35+
[count, increment, decrement],
36+
);
37+
return (
38+
<TestContextTwo.Provider value={value}>{children}</TestContextTwo.Provider>
39+
);
40+
};

0 commit comments

Comments
 (0)