paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

plugins: wrap extension elements in compatWrapper

Browse Source 
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2023-11-27 17:09:16 +01:00
parent ea06590029
commit a1227cc993
12 changed files with 109 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/polite-crabs-build.md
+12
View File
@@ -0,0 +1,12 @@
---
'@backstage/plugin-catalog-import': patch
'@backstage/plugin-user-settings': patch
'@backstage/plugin-tech-radar': patch
'@backstage/plugin-graphiql': patch
'@backstage/plugin-techdocs': patch
'@backstage/plugin-catalog': patch
'@backstage/plugin-search': patch
'@backstage/plugin-home': patch
---
Wrap `/alpha` export extension elements in backwards compatibility wrapper.
plugins/catalog-import/src/alpha.tsx
+8 -2
View File
@@ -20,7 +20,10 @@ import {
discoveryApiRef,
identityApiRef,
} from '@backstage/core-plugin-api';
import { convertLegacyRouteRef } from '@backstage/core-compat-api';
import {
compatWrapper,
convertLegacyRouteRef,
} from '@backstage/core-compat-api';
import {
createApiExtension,
createPageExtension,
@@ -40,7 +43,10 @@ import { catalogApiRef } from '@backstage/plugin-catalog-react';
const CatalogImportPageExtension = createPageExtension({
defaultPath: '/catalog-import',
routeRef: convertLegacyRouteRef(rootRouteRef),
loader: () => import('./components/ImportPage').then(m => <m.ImportPage />),
loader: () =>
import('./components/ImportPage').then(m =>
compatWrapper(<m.ImportPage />),
),
});
const CatalogImportService = createApiExtension({
plugins/catalog/src/alpha/entityCards.tsx
+28 -27
View File
@@ -16,79 +16,80 @@
import React from 'react';
import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha';
import { compatWrapper } from '@backstage/core-compat-api';
export const EntityAboutCard = createEntityCardExtension({
name: 'about',
loader: async () =>
import('../components/AboutCard').then(m => (
<m.AboutCard variant="gridItem" />
)),
import('../components/AboutCard').then(m =>
compatWrapper(<m.AboutCard variant="gridItem" />),
),
});
export const EntityLinksCard = createEntityCardExtension({
name: 'links',
filter: 'has:links',
loader: async () =>
import('../components/EntityLinksCard').then(m => {
return <m.EntityLinksCard variant="gridItem" />;
}),
import('../components/EntityLinksCard').then(m =>
compatWrapper(<m.EntityLinksCard variant="gridItem" />),
),
});
export const EntityLabelsCard = createEntityCardExtension({
name: 'labels',
filter: 'has:labels',
loader: async () =>
import('../components/EntityLabelsCard').then(m => (
<m.EntityLabelsCard variant="gridItem" />
)),
import('../components/EntityLabelsCard').then(m =>
compatWrapper(<m.EntityLabelsCard variant="gridItem" />),
),
});
export const EntityDependsOnComponentsCard = createEntityCardExtension({
name: 'depends-on-components',
loader: async () =>
import('../components/DependsOnComponentsCard').then(m => (
<m.DependsOnComponentsCard variant="gridItem" />
)),
import('../components/DependsOnComponentsCard').then(m =>
compatWrapper(<m.DependsOnComponentsCard variant="gridItem" />),
),
});
export const EntityDependsOnResourcesCard = createEntityCardExtension({
name: 'depends-on-resources',
loader: async () =>
import('../components/DependsOnResourcesCard').then(m => (
<m.DependsOnResourcesCard variant="gridItem" />
)),
import('../components/DependsOnResourcesCard').then(m =>
compatWrapper(<m.DependsOnResourcesCard variant="gridItem" />),
),
});
export const EntityHasComponentsCard = createEntityCardExtension({
name: 'has-components',
loader: async () =>
import('../components/HasComponentsCard').then(m => (
<m.HasComponentsCard variant="gridItem" />
)),
import('../components/HasComponentsCard').then(m =>
compatWrapper(<m.HasComponentsCard variant="gridItem" />),
),
});
export const EntityHasResourcesCard = createEntityCardExtension({
name: 'has-resources',
loader: async () =>
import('../components/HasResourcesCard').then(m => (
<m.HasResourcesCard variant="gridItem" />
)),
import('../components/HasResourcesCard').then(m =>
compatWrapper(<m.HasResourcesCard variant="gridItem" />),
),
});
export const EntityHasSubcomponentsCard = createEntityCardExtension({
name: 'has-subcomponents',
loader: async () =>
import('../components/HasSubcomponentsCard').then(m => (
<m.HasSubcomponentsCard variant="gridItem" />
)),
import('../components/HasSubcomponentsCard').then(m =>
compatWrapper(<m.HasSubcomponentsCard variant="gridItem" />),
),
});
export const EntityHasSystemsCard = createEntityCardExtension({
name: 'has-systems',
loader: async () =>
import('../components/HasSystemsCard').then(m => (
<m.HasSystemsCard variant="gridItem" />
)),
import('../components/HasSystemsCard').then(m =>
compatWrapper(<m.HasSystemsCard variant="gridItem" />),
),
});
export default [
plugins/catalog/src/alpha/pages.tsx
+6 -3
View File
@@ -15,7 +15,10 @@
*/
import React from 'react';
import { convertLegacyRouteRef } from '@backstage/core-compat-api';
import {
compatWrapper,
convertLegacyRouteRef,
} from '@backstage/core-compat-api';
import {
createPageExtension,
coreExtensionData,
@@ -40,7 +43,7 @@ export const CatalogIndexPage = createPageExtension({
loader: async ({ inputs }) => {
const { BaseCatalogPage } = await import('../components/CatalogPage');
const filters = inputs.filters.map(filter => filter.output.element);
return <BaseCatalogPage filters={<>{filters}</>} />;
return compatWrapper(<BaseCatalogPage filters={<>{filters}</>} />);
},
});
@@ -75,7 +78,7 @@ export const CatalogEntityPage = createPageExtension({
</AsyncEntityProvider>
);
};
return <Component />;
return compatWrapper(<Component />);
},
});
plugins/graphiql/src/alpha.tsx
+6 -2
View File
@@ -34,13 +34,17 @@ import {
} from '@backstage/plugin-graphiql';
import { createApiFactory, IconComponent } from '@backstage/core-plugin-api';
import { graphiQLRouteRef } from './route-refs';
import { convertLegacyRouteRef } from '@backstage/core-compat-api';
import {
compatWrapper,
convertLegacyRouteRef,
} from '@backstage/core-compat-api';
/** @alpha */
export const GraphiqlPage = createPageExtension({
defaultPath: '/graphiql',
routeRef: convertLegacyRouteRef(graphiQLRouteRef),
loader: () => import('./components').then(m => <m.GraphiQLPage />),
loader: () =>
import('./components').then(m => compatWrapper(<m.GraphiQLPage />)),
});
/** @alpha */
plugins/home/package.json
+1
View File
@@ -51,6 +51,7 @@
"@backstage/catalog-model": "workspace:^",
"@backstage/config": "workspace:^",
"@backstage/core-app-api": "workspace:^",
"@backstage/core-compat-api": "workspace:^",
"@backstage/core-components": "workspace:^",
"@backstage/core-plugin-api": "workspace:^",
"@backstage/frontend-plugin-api": "workspace:^",
plugins/home/src/alpha.tsx
+9 -6
View File
@@ -24,6 +24,7 @@ import {
createPlugin,
createRouteRef,
} from '@backstage/frontend-plugin-api';
import { compatWrapper } from '@backstage/core-compat-api';
const rootRouteRef = createRouteRef();
@@ -49,12 +50,14 @@ const HomepageCompositionRootExtension = createPageExtension({
),
},
loader: ({ inputs }) =>
import('./components/').then(m => (
<m.HomepageCompositionRoot
children={inputs.props?.output.children}
title={inputs.props?.output.title}
/>
)),
import('./components/').then(m =>
compatWrapper(
<m.HomepageCompositionRoot
children={inputs.props?.output.children}
title={inputs.props?.output.title}
/>,
),
),
});
/**
plugins/search/src/alpha.tsx
+6 -3
View File
@@ -67,7 +67,10 @@ import { rootRouteRef } from './plugin';
import { SearchClient } from './apis';
import { SearchType } from './components/SearchType';
import { UrlUpdater } from './components/SearchPage/SearchPage';
import { convertLegacyRouteRef } from '@backstage/core-compat-api';
import {
compatWrapper,
convertLegacyRouteRef,
} from '@backstage/core-compat-api';
/** @alpha */
export const SearchApi = createApiExtension({
@@ -225,11 +228,11 @@ export const SearchPage = createPageExtension({
);
};
return (
return compatWrapper(
<SearchContextProvider>
<UrlUpdater />
<Component />
</SearchContextProvider>
</SearchContextProvider>,
);
},
});
plugins/tech-radar/src/alpha.tsx
+7 -2
View File
@@ -24,7 +24,10 @@ import {
import React from 'react';
import { techRadarApiRef } from './api';
import { SampleTechRadarApi } from './sample';
import { convertLegacyRouteRef } from '@backstage/core-compat-api';
import {
compatWrapper,
convertLegacyRouteRef,
} from '@backstage/core-compat-api';
import { rootRouteRef } from './plugin';
/** @alpha */
@@ -44,7 +47,9 @@ export const TechRadarPage = createPageExtension({
}),
),
loader: ({ config }) =>
import('./components').then(m => <m.RadarPage {...config} />),
import('./components').then(m =>
compatWrapper(<m.RadarPage {...config} />),
),
});
/** @alpha */
plugins/techdocs/src/alpha.tsx
+14 -9
View File
@@ -31,7 +31,10 @@ import {
fetchApiRef,
identityApiRef,
} from '@backstage/core-plugin-api';
import { convertLegacyRouteRef } from '@backstage/core-compat-api';
import {
compatWrapper,
convertLegacyRouteRef,
} from '@backstage/core-compat-api';
import {
techdocsApiRef,
techdocsStorageApiRef,
@@ -100,7 +103,8 @@ export const TechDocsSearchResultListItemExtension =
const { TechDocsSearchResultListItem } = await import(
'./search/components/TechDocsSearchResultListItem'
);
return props => <TechDocsSearchResultListItem {...props} {...config} />;
return props =>
compatWrapper(<TechDocsSearchResultListItem {...props} {...config} />);
},
});
@@ -113,9 +117,9 @@ const TechDocsIndexPage = createPageExtension({
defaultPath: '/docs',
routeRef: convertLegacyRouteRef(rootRouteRef),
loader: () =>
import('./home/components/TechDocsIndexPage').then(m => (
<m.TechDocsIndexPage />
)),
import('./home/components/TechDocsIndexPage').then(m =>
compatWrapper(<m.TechDocsIndexPage />),
),
});
/**
@@ -128,9 +132,9 @@ const TechDocsReaderPage = createPageExtension({
defaultPath: '/docs/:namespace/:kind/:name',
routeRef: convertLegacyRouteRef(rootDocsRouteRef),
loader: () =>
import('./reader/components/TechDocsReaderPage').then(m => (
<m.TechDocsReaderPage />
)),
import('./reader/components/TechDocsReaderPage').then(m =>
compatWrapper(<m.TechDocsReaderPage />),
),
});
/**
@@ -141,7 +145,8 @@ const TechDocsReaderPage = createPageExtension({
const TechDocsEntityContent = createEntityContentExtension({
defaultPath: 'docs',
defaultTitle: 'TechDocs',
loader: () => import('./Router').then(m => <m.EmbeddedDocsRouter />),
loader: () =>
import('./Router').then(m => compatWrapper(<m.EmbeddedDocsRouter />)),
});
/** @alpha */
plugins/user-settings/src/alpha.tsx
+11 -6
View File
@@ -19,7 +19,10 @@ import {
createPageExtension,
createPlugin,
} from '@backstage/frontend-plugin-api';
import { convertLegacyRouteRef } from '@backstage/core-compat-api';
import {
convertLegacyRouteRef,
compatWrapper,
} from '@backstage/core-compat-api';
import { settingsRouteRef } from './plugin';
import React from 'react';
@@ -38,11 +41,13 @@ const UserSettingsPage = createPageExtension({
),
},
loader: ({ inputs }) =>
import('./components/SettingsPage').then(m => (
<m.SettingsPage
providerSettings={inputs.providerSettings?.output.element}
/>
)),
import('./components/SettingsPage').then(m =>
compatWrapper(
<m.SettingsPage
providerSettings={inputs.providerSettings?.output.element}
/>,
),
),
});
/**
yarn.lock
+1
View File
@@ -7377,6 +7377,7 @@ __metadata:
"@backstage/cli": "workspace:^"
"@backstage/config": "workspace:^"
"@backstage/core-app-api": "workspace:^"
"@backstage/core-compat-api": "workspace:^"
"@backstage/core-components": "workspace:^"
"@backstage/core-plugin-api": "workspace:^"
"@backstage/dev-utils": "workspace:^"