Skip to content

Commit 8dba6db

Browse files
awanlinawanlin
committed
Initial migration
Signed-off-by: Andre Wanlin <[email protected]>
1 parent 5be019b commit 8dba6db

File tree

4 files changed

+132
-110
lines changed

4 files changed

+132
-110
lines changed

‎app-config.yaml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ app:
1414
links:
1515
- url: https://backstage.io/blog/
1616
title: Backstage Blog
17+
experimental:
18+
packages: all
1719

1820
organization:
1921
name: Backstage

‎packages/app-next/src/App.tsx‎

Lines changed: 68 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,10 @@
11
import { badgesPlugin } from './plugins';
22

3-
import {
4-
AlertDisplay,
5-
OAuthRequestDialog,
6-
ProxiedSignInPage,
7-
} from '@backstage/core-components';
8-
import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
9-
import {
10-
CatalogEntityPage,
11-
CatalogIndexPage,
12-
catalogPlugin,
13-
} from '@backstage/plugin-catalog';
14-
import {
15-
CatalogGraphPage,
16-
catalogGraphPlugin,
17-
} from '@backstage/plugin-catalog-graph';
3+
import { ProxiedSignInPage } from '@backstage/core-components';
4+
import { FlatRoutes } from '@backstage/core-app-api';
5+
import { CatalogIndexPage, catalogPlugin } from '@backstage/plugin-catalog';
6+
import { default as alphaCatalogPlugin } from '@backstage/plugin-catalog/alpha';
7+
import { catalogGraphPlugin } from '@backstage/plugin-catalog-graph';
188
import {
199
CostInsightsLabelDataflowInstructionsPage,
2010
CostInsightsPage,
@@ -29,27 +19,21 @@ import {
2919
} from '@backstage/plugin-techdocs';
3020
import { UnifiedThemeProvider, themes } from '@backstage/theme';
3121

32-
import { ApiExplorerPage } from '@backstage/plugin-api-docs';
3322
import { GraphiQLPage } from '@backstage-community/plugin-graphiql';
3423

35-
import { Root } from './components/Root';
36-
import { SearchPage } from '@backstage/plugin-search';
37-
import { TechRadarPage } from '@backstage-community/plugin-tech-radar';
3824
import {
3925
SettingsLayout,
4026
UserSettingsPage,
4127
} from '@backstage/plugin-user-settings';
4228
import { apertureTheme } from './theme/aperture';
4329
import { apis } from './apis';
4430

45-
import { entityPage } from './components/catalog/EntityPage';
4631
import { orgPlugin } from '@backstage/plugin-org';
47-
import { searchPage } from './components/search/SearchPage';
32+
4833
import { CssBaseline } from '@material-ui/core';
4934
import { HomepageCompositionRoot, VisitListener } from '@backstage/plugin-home';
5035
import { CustomizableHomePage } from './components/home/CustomizableHomePage';
51-
import { ScaffolderPage, scaffolderPlugin } from '@backstage/plugin-scaffolder';
52-
import { NotificationsPage } from '@backstage/plugin-notifications';
36+
import { scaffolderPlugin } from '@backstage/plugin-scaffolder';
5337
import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
5438
import {
5539
ExpandableNavigation,
@@ -64,50 +48,36 @@ import { NotificationSettings } from './components/settings/NotificationSettings
6448
// New Frontend System Imports
6549
import { createApp } from '@backstage/frontend-defaults';
6650
import {
51+
compatWrapper,
6752
convertLegacyApp,
6853
convertLegacyAppOptions,
6954
convertLegacyRouteRef,
7055
convertLegacyRouteRefs,
7156
} from '@backstage/core-compat-api';
7257
import {
58+
AppRootElementBlueprint,
7359
createFrontendModule,
7460
SignInPageBlueprint,
7561
ThemeBlueprint,
7662
} from '@backstage/frontend-plugin-api';
63+
import { rootNav } from './components/Root';
64+
import {
65+
EntityKindPicker,
66+
EntityTypePicker,
67+
UserListPicker,
68+
EntityOwnerPicker,
69+
EntityLifecyclePicker,
70+
EntityTagPicker,
71+
EntityProcessingStatusPicker,
72+
EntityNamespacePicker,
73+
} from '@backstage/plugin-catalog-react';
7774

7875
const routes = (
7976
<FlatRoutes>
8077
<Route path="/" element={<Navigate to="catalog" />} />
8178
<Route path="/home" element={<HomepageCompositionRoot />}>
8279
<CustomizableHomePage />
8380
</Route>
84-
{/* <FeatureFlagged with="customizable-home-page-preview">
85-
<Route path="/home" element={<HomepageCompositionRoot />}>
86-
<CustomizableHomePage />
87-
</Route>
88-
</FeatureFlagged>
89-
<FeatureFlagged without="customizable-home-page-preview">
90-
<Route path="/home" element={<HomepageCompositionRoot />}>
91-
<HomePage />
92-
</Route>
93-
</FeatureFlagged> */}
94-
<Route path="/create" element={<ScaffolderPage />} />
95-
<Route path="/api-docs" element={<ApiExplorerPage />} />
96-
<Route
97-
path="/catalog"
98-
element={
99-
<CatalogIndexPage
100-
initiallySelectedFilter="all"
101-
initiallySelectedNamespaces={['default']}
102-
/>
103-
}
104-
/>
105-
<Route
106-
path="/catalog/:namespace/:kind/:name"
107-
element={<CatalogEntityPage />}
108-
>
109-
{entityPage}
110-
</Route>
11181
<Route path="/cost-insights" element={<CostInsightsPage />} />
11282
<Route
11383
path="/cost-insights/investigating-growth"
@@ -133,31 +103,30 @@ const routes = (
133103

134104
<Route path="/explore" element={<ExplorePage />} />
135105
<Route path="/graphiql" element={<GraphiQLPage />} />
136-
<Route path="/search" element={<SearchPage />}>
137-
{searchPage}
138-
</Route>
106+
139107
<Route path="/settings" element={<UserSettingsPage />}>
140108
<SettingsLayout.Route path="/notifications" title="Notifications">
141109
<NotificationSettings />
142110
</SettingsLayout.Route>
143111
</Route>
144-
<Route path="/tech-radar" element={<TechRadarPage />} />
145-
<Route path="/catalog-graph" element={<CatalogGraphPage />} />
146-
<Route path="/notifications" element={<NotificationsPage />} />
147112
</FlatRoutes>
148113
);
149114

150-
const legacyFeatures = convertLegacyApp(
151-
<>
152-
<AlertDisplay />
153-
<OAuthRequestDialog />
154-
<SignalsDisplay />
155-
<AppRouter>
156-
<VisitListener />
157-
<Root>{routes}</Root>
158-
</AppRouter>
159-
</>,
160-
);
115+
const legacyFeatures = convertLegacyApp(routes);
116+
117+
const signalsDisplayExtension = AppRootElementBlueprint.make({
118+
name: 'signals-display-extension',
119+
params: {
120+
element: compatWrapper(<SignalsDisplay />),
121+
},
122+
});
123+
124+
const visitListenerExtension = AppRootElementBlueprint.make({
125+
name: 'visit-listener-extension',
126+
params: {
127+
element: <VisitListener />,
128+
},
129+
});
161130

162131
const optionsModule = convertLegacyAppOptions({
163132
// TODO:(awanlin) the badges plugin doesn't support the new frontend system yet
@@ -217,6 +186,34 @@ const apertureThemeExtension = ThemeBlueprint.make({
217186
},
218187
});
219188

189+
const catalogPluginOverride = alphaCatalogPlugin.withOverrides({
190+
extensions: [
191+
alphaCatalogPlugin.getExtension('page:catalog').override({
192+
params: {
193+
loader: async () =>
194+
compatWrapper(
195+
<CatalogIndexPage
196+
filters={
197+
<>
198+
<EntityKindPicker />
199+
<EntityTypePicker />
200+
<UserListPicker initialFilter="all" />
201+
<EntityOwnerPicker />
202+
<EntityLifecyclePicker
203+
initialFilter={['production', 'experimental']}
204+
/>
205+
<EntityTagPicker />
206+
<EntityProcessingStatusPicker />
207+
<EntityNamespacePicker />
208+
</>
209+
}
210+
/>,
211+
),
212+
},
213+
}),
214+
],
215+
});
216+
220217
const app = createApp({
221218
features: [
222219
optionsModule,
@@ -229,8 +226,12 @@ const app = createApp({
229226
lightThemeExtension,
230227
darkThemeExtension,
231228
apertureThemeExtension,
229+
rootNav,
230+
signalsDisplayExtension,
231+
visitListenerExtension,
232232
],
233233
}),
234+
catalogPluginOverride,
234235
],
235236
bindRoutes({ bind }) {
236237
bind(convertLegacyRouteRefs(catalogPlugin.externalRoutes), {

‎packages/app-next/src/components/Root/Root.tsx‎

Lines changed: 61 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { PropsWithChildren } from 'react';
21
import { Link, Theme, makeStyles } from '@material-ui/core';
32
import HomeIcon from '@material-ui/icons/Home';
43
import ExtensionIcon from '@material-ui/icons/Extension';
@@ -18,7 +17,6 @@ import {
1817
import { SidebarSearchModal } from '@backstage/plugin-search';
1918
import {
2019
Sidebar,
21-
SidebarPage,
2220
sidebarConfig,
2321
SidebarItem,
2422
SidebarDivider,
@@ -35,6 +33,11 @@ import CategoryIcon from '@material-ui/icons/Category';
3533
import { MyGroupsSidebarItem } from '@backstage/plugin-org';
3634
import GroupIcon from '@material-ui/icons/People';
3735
import { NotificationsSidebarItem } from '@backstage/plugin-notifications';
36+
import { compatWrapper } from '@backstage/core-compat-api';
37+
import {
38+
coreExtensionData,
39+
createExtension,
40+
} from '@backstage/frontend-plugin-api';
3841

3942
const useSidebarLogoStyles = makeStyles<Theme, { themeId: string }>({
4043
root: {
@@ -75,43 +78,59 @@ const SidebarLogo = () => {
7578
);
7679
};
7780

78-
export const Root = ({ children }: PropsWithChildren<{}>) => (
79-
<SidebarPage>
80-
<Sidebar>
81-
<SidebarLogo />
82-
<SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
83-
<SidebarSearchModal />
84-
</SidebarGroup>
85-
<SidebarDivider />
86-
<SidebarGroup label="Menu" icon={<MenuIcon />}>
87-
<SidebarItem icon={HomeIcon} to="home" text="Home" />
88-
<SidebarItem icon={CategoryIcon} to="/" text="Catalog" />
89-
<MyGroupsSidebarItem
90-
singularTitle="My Group"
91-
pluralTitle="My Groups"
92-
icon={GroupIcon}
93-
/>
94-
<SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
95-
<SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
96-
<SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
97-
<SidebarItem icon={LayersIcon} to="explore" text="Explore" />
98-
</SidebarGroup>
99-
<SidebarDivider />
100-
<SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
101-
<SidebarItem icon={MoneyIcon} to="cost-insights" text="Cost Insights" />
102-
<SidebarItem icon={GraphiQLIcon} to="graphiql" text="GraphiQL" />
103-
<SidebarSpace />
104-
<SidebarDivider />
105-
<NotificationsSidebarItem />
106-
<SidebarDivider />
107-
<SidebarGroup
108-
label="Settings"
109-
icon={<UserSettingsSignInAvatar />}
110-
to="/settings"
111-
>
112-
<SidebarSettings />
113-
</SidebarGroup>
114-
</Sidebar>
115-
{children}
116-
</SidebarPage>
117-
);
81+
export const rootNav = createExtension({
82+
name: 'nav',
83+
attachTo: { id: 'app/layout', input: 'nav' },
84+
output: [coreExtensionData.reactElement],
85+
factory() {
86+
return [
87+
coreExtensionData.reactElement(
88+
compatWrapper(
89+
<Sidebar>
90+
<SidebarLogo />
91+
<SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
92+
<SidebarSearchModal />
93+
</SidebarGroup>
94+
<SidebarDivider />
95+
<SidebarGroup label="Menu" icon={<MenuIcon />}>
96+
<SidebarItem icon={HomeIcon} to="home" text="Home" />
97+
<SidebarItem icon={CategoryIcon} to="/" text="Catalog" />
98+
<MyGroupsSidebarItem
99+
singularTitle="My Group"
100+
pluralTitle="My Groups"
101+
icon={GroupIcon}
102+
/>
103+
<SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
104+
<SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
105+
<SidebarItem
106+
icon={CreateComponentIcon}
107+
to="create"
108+
text="Create..."
109+
/>
110+
<SidebarItem icon={LayersIcon} to="explore" text="Explore" />
111+
</SidebarGroup>
112+
<SidebarDivider />
113+
<SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
114+
<SidebarItem
115+
icon={MoneyIcon}
116+
to="cost-insights"
117+
text="Cost Insights"
118+
/>
119+
<SidebarItem icon={GraphiQLIcon} to="graphiql" text="GraphiQL" />
120+
<SidebarSpace />
121+
<SidebarDivider />
122+
<NotificationsSidebarItem />
123+
<SidebarDivider />
124+
<SidebarGroup
125+
label="Settings"
126+
icon={<UserSettingsSignInAvatar />}
127+
to="/settings"
128+
>
129+
<SidebarSettings />
130+
</SidebarGroup>
131+
</Sidebar>,
132+
),
133+
),
134+
];
135+
},
136+
});

‎packages/app-next/src/components/Root/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { Root } from './Root';
1+
export { rootNav } from './Root';

0 commit comments

Comments
 (0)