Skip to content

Commit 6822f69

Browse files
rohitratannagarrohitratannagar
committed
feat(translations): add NFS dev mode
1 parent 9c3a004 commit 6822f69

9 files changed

Lines changed: 242 additions & 26 deletions

File tree

‎workspaces/translations/.changeset/add-nfs-support.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
'@red-hat-developer-hub/backstage-plugin-translations': minor
3+
'@red-hat-developer-hub/backstage-plugin-translations-test': minor
34
---
45

56
Add NFS (New Frontend System) support and graduate to stable. NFS extensions include PageBlueprint, ApiBlueprint, TranslationBlueprint, and AppRootWrapperBlueprint. OFS exports are now available at `./legacy`.

‎workspaces/translations/plugins/translations-test/dev/index.tsx‎

Lines changed: 78 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,81 @@
1313
* See the License for the specific language governing permissions and
1414
* limitations under the License.
1515
*/
16-
import { createDevApp } from '@backstage/dev-utils';
17-
import { translationsTestPlugin, TranslationsTestPage } from '../src/plugin';
18-
19-
createDevApp()
20-
.registerPlugin(translationsTestPlugin)
21-
.addPage({
22-
element: <TranslationsTestPage />,
23-
title: 'Root Page',
24-
path: '/translations-test',
25-
})
26-
.render();
16+
17+
/**
18+
* New Frontend System dev mode for the Translations Test plugin.
19+
*/
20+
21+
import '@backstage/cli/asset-types';
22+
// eslint-disable-next-line @backstage/no-ui-css-imports-in-non-frontend
23+
import '@backstage/ui/css/styles.css';
24+
25+
import ReactDOM from 'react-dom/client';
26+
27+
import { createApp } from '@backstage/frontend-defaults';
28+
import { createFrontendModule } from '@backstage/frontend-plugin-api';
29+
import {
30+
Sidebar,
31+
SidebarDivider,
32+
SidebarGroup,
33+
SidebarItem,
34+
SidebarSpace,
35+
} from '@backstage/core-components';
36+
import { NavContentBlueprint } from '@backstage/plugin-app-react';
37+
import {
38+
SidebarLanguageSwitcher,
39+
SidebarSignOutButton,
40+
} from '@backstage/dev-utils';
41+
import ExtensionIcon from '@mui/icons-material/Extension';
42+
import ScienceIcon from '@mui/icons-material/Science';
43+
import { rhdhThemeModule } from '@red-hat-developer-hub/backstage-plugin-theme/alpha';
44+
45+
// eslint-disable-next-line @backstage/no-relative-monorepo-imports
46+
import translationsPlugin, {
47+
translationsApiModule,
48+
} from '../../translations/src';
49+
import translationsTestPlugin from '../src';
50+
51+
const devSidebarContent = NavContentBlueprint.make({
52+
params: {
53+
component: () => (
54+
<Sidebar>
55+
<SidebarGroup label="Menu">
56+
<SidebarItem
57+
icon={ExtensionIcon}
58+
to="/translations"
59+
text="Translations"
60+
/>
61+
<SidebarItem
62+
icon={ScienceIcon}
63+
to="/translations-test"
64+
text="Translations Test"
65+
/>
66+
</SidebarGroup>
67+
<SidebarSpace />
68+
<SidebarDivider />
69+
<SidebarLanguageSwitcher />
70+
<SidebarSignOutButton />
71+
</Sidebar>
72+
),
73+
},
74+
});
75+
76+
const devNavModule = createFrontendModule({
77+
pluginId: 'app',
78+
extensions: [devSidebarContent],
79+
});
80+
81+
const app = createApp({
82+
features: [
83+
devNavModule,
84+
translationsPlugin,
85+
translationsApiModule,
86+
translationsTestPlugin,
87+
rhdhThemeModule,
88+
],
89+
});
90+
91+
const root = app.createRoot();
92+
93+
ReactDOM.createRoot(document.getElementById('root')!).render(root);

‎workspaces/translations/plugins/translations-test/dev/legacy.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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+
import { createDevApp } from '@backstage/dev-utils';
17+
import { translationsTestPlugin, TranslationsTestPage } from '../src/plugin';
18+
19+
createDevApp()
20+
.registerPlugin(translationsTestPlugin)
21+
.addPage({
22+
element: <TranslationsTestPage />,
23+
title: 'Root Page',
24+
path: '/translations-test',
25+
})
26+
.render();

‎workspaces/translations/plugins/translations-test/package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"sideEffects": false,
3838
"scripts": {
3939
"start": "backstage-cli package start",
40+
"start:legacy": "backstage-cli package start --entrypoint dev/legacy.tsx",
4041
"build": "backstage-cli package build",
4142
"lint": "backstage-cli package lint",
4243
"test": "backstage-cli package test",
@@ -55,13 +56,16 @@
5556
"@mui/icons-material": "5.18.0"
5657
},
5758
"peerDependencies": {
58-
"react": "^16.13.1 || ^17.0.0 || ^18.0.0"
59+
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
60+
"react-dom": "*"
5961
},
6062
"devDependencies": {
6163
"@backstage/cli": "^0.36.0",
6264
"@backstage/core-app-api": "^1.19.6",
6365
"@backstage/dev-utils": "^1.1.21",
66+
"@backstage/frontend-defaults": "^0.5.3",
6467
"@backstage/test-utils": "^1.7.16",
68+
"@red-hat-developer-hub/backstage-plugin-theme": "^0.14.8",
6569
"@testing-library/jest-dom": "^6.0.0",
6670
"@testing-library/react": "^14.0.0",
6771
"@testing-library/user-event": "^14.0.0",

‎workspaces/translations/plugins/translations-test/src/components/I18NextCard.tsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,22 @@ import type { i18n as I18n } from 'i18next';
2121

2222
export const I18NextCard = () => {
2323
const translationApi = useApi(translationApiRef);
24-
const i18n: I18n = (translationApi as any).getI18nInstance();
24+
const api = translationApi as unknown as { getI18nInstance?: () => I18n };
25+
const i18n =
26+
typeof api.getI18nInstance === 'function'
27+
? api.getI18nInstance()
28+
: undefined;
29+
30+
if (!i18n) {
31+
return (
32+
<InfoCard title="TranslationApi / i18Next">
33+
<em>
34+
i18next instance details are not available with the built-in
35+
TranslationApi.
36+
</em>
37+
</InfoCard>
38+
);
39+
}
2540

2641
return (
2742
<InfoCard title="TranslationApi / i18Next">

‎workspaces/translations/plugins/translations/dev/index.tsx‎

Lines changed: 76 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,79 @@
1313
* See the License for the specific language governing permissions and
1414
* limitations under the License.
1515
*/
16-
import { createDevApp } from '@backstage/dev-utils';
17-
import { translationsPlugin, TranslationsPage } from '../src/plugin';
18-
19-
createDevApp()
20-
.registerPlugin(translationsPlugin)
21-
.addPage({
22-
element: <TranslationsPage />,
23-
title: 'Root Page',
24-
path: '/translations',
25-
})
26-
.render();
16+
17+
/**
18+
* New Frontend System dev mode for the Translations plugin.
19+
*/
20+
21+
import '@backstage/cli/asset-types';
22+
// eslint-disable-next-line @backstage/no-ui-css-imports-in-non-frontend
23+
import '@backstage/ui';
24+
25+
import ReactDOM from 'react-dom/client';
26+
27+
import { createApp } from '@backstage/frontend-defaults';
28+
import { createFrontendModule } from '@backstage/frontend-plugin-api';
29+
import {
30+
Sidebar,
31+
SidebarDivider,
32+
SidebarGroup,
33+
SidebarItem,
34+
SidebarSpace,
35+
} from '@backstage/core-components';
36+
import { NavContentBlueprint } from '@backstage/plugin-app-react';
37+
import {
38+
SidebarLanguageSwitcher,
39+
SidebarSignOutButton,
40+
} from '@backstage/dev-utils';
41+
import ExtensionIcon from '@mui/icons-material/Extension';
42+
import ScienceIcon from '@mui/icons-material/Science';
43+
import { rhdhThemeModule } from '@red-hat-developer-hub/backstage-plugin-theme/alpha';
44+
45+
import translationsPlugin, { translationsApiModule } from '../src';
46+
// eslint-disable-next-line @backstage/no-relative-monorepo-imports
47+
import translationsTestPlugin from '../../translations-test/src';
48+
49+
const devSidebarContent = NavContentBlueprint.make({
50+
params: {
51+
component: () => (
52+
<Sidebar>
53+
<SidebarGroup label="Menu">
54+
<SidebarItem
55+
icon={ExtensionIcon}
56+
to="/translations"
57+
text="Translations"
58+
/>
59+
<SidebarItem
60+
icon={ScienceIcon}
61+
to="/translations-test"
62+
text="Translations Test"
63+
/>
64+
</SidebarGroup>
65+
<SidebarSpace />
66+
<SidebarDivider />
67+
<SidebarLanguageSwitcher />
68+
<SidebarSignOutButton />
69+
</Sidebar>
70+
),
71+
},
72+
});
73+
74+
const devNavModule = createFrontendModule({
75+
pluginId: 'app',
76+
extensions: [devSidebarContent],
77+
});
78+
79+
const app = createApp({
80+
features: [
81+
devNavModule,
82+
translationsPlugin,
83+
translationsApiModule,
84+
translationsTestPlugin,
85+
rhdhThemeModule,
86+
],
87+
});
88+
89+
const root = app.createRoot();
90+
91+
ReactDOM.createRoot(document.getElementById('root')!).render(root);

‎workspaces/translations/plugins/translations/dev/legacy.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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+
import { createDevApp } from '@backstage/dev-utils';
17+
import { translationsPlugin, TranslationsPage } from '../src/plugin';
18+
19+
createDevApp()
20+
.registerPlugin(translationsPlugin)
21+
.addPage({
22+
element: <TranslationsPage />,
23+
title: 'Root Page',
24+
path: '/translations',
25+
})
26+
.render();

‎workspaces/translations/plugins/translations/package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
"sideEffects": false,
6262
"scripts": {
6363
"start": "backstage-cli package start",
64+
"start:legacy": "backstage-cli package start --entrypoint dev/legacy.tsx",
6465
"build": "backstage-cli package build",
6566
"lint": "backstage-cli package lint",
6667
"test": "backstage-cli package test",
@@ -83,14 +84,18 @@
8384
"zen-observable": "^0.10.0"
8485
},
8586
"peerDependencies": {
86-
"react": "^16.13.1 || ^17.0.0 || ^18.0.0"
87+
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
88+
"react-dom": "*"
8789
},
8890
"devDependencies": {
8991
"@backstage/cli": "^0.36.0",
9092
"@backstage/config": "^1.3.7",
9193
"@backstage/core-app-api": "^1.19.6",
9294
"@backstage/dev-utils": "^1.1.21",
95+
"@backstage/frontend-defaults": "^0.5.3",
9396
"@backstage/test-utils": "^1.7.16",
97+
"@backstage/ui": "^0.16.0",
98+
"@red-hat-developer-hub/backstage-plugin-theme": "^0.14.8",
9499
"@testing-library/jest-dom": "^6.0.0",
95100
"@testing-library/react": "^14.0.0",
96101
"@testing-library/user-event": "^14.0.0",

‎workspaces/translations/yarn.lock‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9081,7 +9081,7 @@ __metadata:
90819081
languageName: node
90829082
linkType: hard
90839083

9084-
"@red-hat-developer-hub/backstage-plugin-theme@npm:^0.14.0":
9084+
"@red-hat-developer-hub/backstage-plugin-theme@npm:^0.14.0, @red-hat-developer-hub/backstage-plugin-theme@npm:^0.14.8":
90859085
version: 0.14.8
90869086
resolution: "@red-hat-developer-hub/backstage-plugin-theme@npm:0.14.8"
90879087
dependencies:
@@ -9128,20 +9128,23 @@ __metadata:
91289128
"@backstage/core-components": "npm:^0.18.8"
91299129
"@backstage/core-plugin-api": "npm:^1.12.4"
91309130
"@backstage/dev-utils": "npm:^1.1.21"
9131+
"@backstage/frontend-defaults": "npm:^0.5.3"
91319132
"@backstage/frontend-plugin-api": "npm:^0.17.2"
91329133
"@backstage/plugin-app-react": "npm:^0.2.1"
91339134
"@backstage/plugin-user-settings": "npm:^0.9.1"
91349135
"@backstage/test-utils": "npm:^1.7.16"
91359136
"@backstage/theme": "npm:^0.7.2"
91369137
"@backstage/ui": "npm:^0.13.2"
91379138
"@mui/icons-material": "npm:5.18.0"
9139+
"@red-hat-developer-hub/backstage-plugin-theme": "npm:^0.14.8"
91389140
"@testing-library/jest-dom": "npm:^6.0.0"
91399141
"@testing-library/react": "npm:^14.0.0"
91409142
"@testing-library/user-event": "npm:^14.0.0"
91419143
msw: "npm:^1.0.0"
91429144
react: "npm:^16.13.1 || ^17.0.0 || ^18.0.0"
91439145
peerDependencies:
91449146
react: ^16.13.1 || ^17.0.0 || ^18.0.0
9147+
react-dom: "*"
91459148
languageName: unknown
91469149
linkType: soft
91479150

@@ -9155,14 +9158,17 @@ __metadata:
91559158
"@backstage/core-components": "npm:^0.18.8"
91569159
"@backstage/core-plugin-api": "npm:^1.12.4"
91579160
"@backstage/dev-utils": "npm:^1.1.21"
9161+
"@backstage/frontend-defaults": "npm:^0.5.3"
91589162
"@backstage/frontend-plugin-api": "npm:^0.17.2"
91599163
"@backstage/plugin-app-react": "npm:^0.2.1"
91609164
"@backstage/plugin-user-settings": "npm:^0.9.1"
91619165
"@backstage/test-utils": "npm:^1.7.16"
91629166
"@backstage/theme": "npm:^0.7.2"
91639167
"@backstage/types": "npm:^1.2.2"
9168+
"@backstage/ui": "npm:^0.16.0"
91649169
"@mui/icons-material": "npm:5.18.0"
91659170
"@mui/material": "npm:5.18.0"
9171+
"@red-hat-developer-hub/backstage-plugin-theme": "npm:^0.14.8"
91669172
"@testing-library/jest-dom": "npm:^6.0.0"
91679173
"@testing-library/react": "npm:^14.0.0"
91689174
"@testing-library/user-event": "npm:^14.0.0"
@@ -9174,6 +9180,7 @@ __metadata:
91749180
zen-observable: "npm:^0.10.0"
91759181
peerDependencies:
91769182
react: ^16.13.1 || ^17.0.0 || ^18.0.0
9183+
react-dom: "*"
91779184
languageName: unknown
91789185
linkType: soft
91799186

0 commit comments

Comments
 (0)