diff --git a/.changeset/few-penguins-watch.md b/.changeset/few-penguins-watch.md new file mode 100644 index 0000000000..1b410f0174 --- /dev/null +++ b/.changeset/few-penguins-watch.md @@ -0,0 +1,35 @@ +--- +'@backstage/plugin-catalog-import': patch +--- + +Add initial support for customizing the catalog import page. + +It is now possible to pass a custom layout to the import page, as it's already +supported by the search page. If no custom layout is passed, the default layout +is used. + +```typescript +}> + +
+ + + + Start tracking your component in Backstage by adding it to the + software catalog. + + + + + + Hello World + + + + + + + + + +``` diff --git a/plugins/catalog-import/src/components/DefaultImportComponentPage/DefaultImportComponentPage.test.tsx b/plugins/catalog-import/src/components/DefaultImportComponentPage/DefaultImportComponentPage.test.tsx new file mode 100644 index 0000000000..5e49872319 --- /dev/null +++ b/plugins/catalog-import/src/components/DefaultImportComponentPage/DefaultImportComponentPage.test.tsx @@ -0,0 +1,84 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { CatalogClient } from '@backstage/catalog-client'; +import { + ApiProvider, + ApiRegistry, + configApiRef, + ConfigReader, +} from '@backstage/core'; +import { catalogApiRef } from '@backstage/plugin-catalog-react'; +import { wrapInTestApp } from '@backstage/test-utils'; +import { act, render } from '@testing-library/react'; +import React from 'react'; +import { catalogImportApiRef, CatalogImportClient } from '../../api'; +import { DefaultImportComponentPage } from './DefaultImportComponentPage'; + +describe('', () => { + const identityApi = { + getUserId: () => { + return 'user'; + }, + getProfile: () => { + return {}; + }, + getIdToken: () => { + return Promise.resolve('token'); + }, + signOut: () => { + return Promise.resolve(); + }, + }; + + let apis: ApiRegistry; + + beforeEach(() => { + apis = ApiRegistry.with( + configApiRef, + new ConfigReader({ integrations: {} }), + ) + .with(catalogApiRef, new CatalogClient({ discoveryApi: {} as any })) + .with( + catalogImportApiRef, + new CatalogImportClient({ + discoveryApi: {} as any, + githubAuthApi: { + getAccessToken: async () => 'token', + }, + identityApi, + scmIntegrationsApi: {} as any, + catalogApi: {} as any, + }), + ); + }); + + it('renders without exploding', async () => { + await act(async () => { + const { getByText } = render( + wrapInTestApp( + + + , + ), + ); + + expect( + getByText('Start tracking your component in Backstage'), + ).toBeInTheDocument(); + }); + }); +}); diff --git a/plugins/catalog-import/src/components/DefaultImportComponentPage/DefaultImportComponentPage.tsx b/plugins/catalog-import/src/components/DefaultImportComponentPage/DefaultImportComponentPage.tsx new file mode 100644 index 0000000000..b9aad55274 --- /dev/null +++ b/plugins/catalog-import/src/components/DefaultImportComponentPage/DefaultImportComponentPage.tsx @@ -0,0 +1,58 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { + configApiRef, + Content, + ContentHeader, + Header, + Page, + SupportButton, + useApi, +} from '@backstage/core'; +import { Grid } from '@material-ui/core'; +import React from 'react'; +import { ImportInfoCard } from '../ImportInfoCard'; +import { ImportStepper } from '../ImportStepper'; + +export const DefaultImportComponentPage = () => { + const configApi = useApi(configApiRef); + const appTitle = configApi.getOptional('app.title') || 'Backstage'; + + return ( + +
+ + + + Start tracking your component in {appTitle} by adding it to the + software catalog. + + + + + + + + + + + + + + + ); +}; diff --git a/plugins/catalog-import/src/components/DefaultImportComponentPage/index.ts b/plugins/catalog-import/src/components/DefaultImportComponentPage/index.ts new file mode 100644 index 0000000000..f3450413a6 --- /dev/null +++ b/plugins/catalog-import/src/components/DefaultImportComponentPage/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { DefaultImportComponentPage } from './DefaultImportComponentPage'; diff --git a/plugins/catalog-import/src/components/ImportComponentPage.tsx b/plugins/catalog-import/src/components/ImportComponentPage.tsx deleted file mode 100644 index bf53af134f..0000000000 --- a/plugins/catalog-import/src/components/ImportComponentPage.tsx +++ /dev/null @@ -1,115 +0,0 @@ -/* - * Copyright 2020 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { Chip, Grid, Typography } from '@material-ui/core'; -import React from 'react'; -import { ImportStepper } from './ImportStepper'; -import { StepperProviderOpts } from './ImportStepper/defaults'; - -import { configApiRef, useApi } from '@backstage/core-plugin-api'; -import { - Content, - ContentHeader, - Header, - InfoCard, - Page, - SupportButton, -} from '@backstage/core-components'; - -export const ImportComponentPage = (opts: StepperProviderOpts) => { - const configApi = useApi(configApiRef); - const appTitle = configApi.getOptional('app.title') || 'Backstage'; - - const integrations = configApi.getConfig('integrations'); - const hasGithubIntegration = integrations.has('github'); - - return ( - -
- - - - Start tracking your component in {appTitle} by adding it to the - software catalog. - - - - - - - - Enter the URL to your source code repository to add it to{' '} - {appTitle}. - - - Link to an existing entity file - - - Example:{' '} - - https://github.com/backstage/backstage/blob/master/catalog-info.yaml - - - - The wizard analyzes the file, previews the entities, and adds - them to the {appTitle} catalog. - - {hasGithubIntegration && ( - <> - - Link to a repository{' '} - - - - Example: https://github.com/backstage/backstage - - - The wizard discovers all catalog-info.yaml{' '} - files in the repository, previews the entities, and adds - them to the {appTitle} catalog. - - {!opts?.pullRequest?.disable && ( - - If no entities are found, the wizard will prepare a Pull - Request that adds an example{' '} - catalog-info.yaml and prepares the {appTitle}{' '} - catalog to load all entities as soon as the Pull Request - is merged. - - )} - - )} - - - - - - - - - - ); -}; diff --git a/plugins/catalog-import/src/components/ImportComponentPage.test.tsx b/plugins/catalog-import/src/components/ImportComponentPage/ImportComponentPage.test.tsx similarity index 94% rename from plugins/catalog-import/src/components/ImportComponentPage.test.tsx rename to plugins/catalog-import/src/components/ImportComponentPage/ImportComponentPage.test.tsx index 2e572c8936..4177a6ae64 100644 --- a/plugins/catalog-import/src/components/ImportComponentPage.test.tsx +++ b/plugins/catalog-import/src/components/ImportComponentPage/ImportComponentPage.test.tsx @@ -19,7 +19,7 @@ import { catalogApiRef } from '@backstage/plugin-catalog-react'; import { wrapInTestApp } from '@backstage/test-utils'; import { act, render } from '@testing-library/react'; import React from 'react'; -import { catalogImportApiRef, CatalogImportClient } from '../api'; +import { catalogImportApiRef, CatalogImportClient } from '../../api'; import { ImportComponentPage } from './ImportComponentPage'; import { @@ -78,7 +78,7 @@ describe('', () => { ); expect( - await getByText('Start tracking your component in Backstage'), + getByText('Start tracking your component in Backstage'), ).toBeInTheDocument(); }); }); diff --git a/plugins/catalog-import/src/components/ImportComponentPage/ImportComponentPage.tsx b/plugins/catalog-import/src/components/ImportComponentPage/ImportComponentPage.tsx new file mode 100644 index 0000000000..3a89705493 --- /dev/null +++ b/plugins/catalog-import/src/components/ImportComponentPage/ImportComponentPage.tsx @@ -0,0 +1,31 @@ +/* + * Copyright 2020 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { useOutlet } from 'react-router'; +import { DefaultImportComponentPage } from '../DefaultImportComponentPage'; +import { ImportOptionsContext } from '../ImportOptionsContext'; +import { ImportOptions } from '../types'; + +export const ImportComponentPage = (opts: ImportOptions) => { + const outlet = useOutlet(); + + return ( + + {outlet || } + + ); +}; diff --git a/plugins/catalog-import/src/components/ImportComponentPage/index.ts b/plugins/catalog-import/src/components/ImportComponentPage/index.ts new file mode 100644 index 0000000000..263ba51a23 --- /dev/null +++ b/plugins/catalog-import/src/components/ImportComponentPage/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { ImportComponentPage } from './ImportComponentPage'; diff --git a/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.test.tsx b/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.test.tsx new file mode 100644 index 0000000000..899ad18cc3 --- /dev/null +++ b/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.test.tsx @@ -0,0 +1,51 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { + ApiProvider, + ApiRegistry, + configApiRef, + ConfigReader, +} from '@backstage/core'; +import { wrapInTestApp } from '@backstage/test-utils'; +import { act, render } from '@testing-library/react'; +import React from 'react'; +import { ImportInfoCard } from './ImportInfoCard'; + +describe('', () => { + let apis: ApiRegistry; + + beforeEach(() => { + apis = ApiRegistry.with( + configApiRef, + new ConfigReader({ integrations: {} }), + ); + }); + + it('renders without exploding', async () => { + await act(async () => { + const { getByText } = render( + wrapInTestApp( + + + , + ), + ); + + expect(getByText('Register an existing component')).toBeInTheDocument(); + }); + }); +}); diff --git a/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.tsx b/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.tsx new file mode 100644 index 0000000000..8fbbe6cc82 --- /dev/null +++ b/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.tsx @@ -0,0 +1,79 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { ConfigApi, configApiRef, InfoCard, useApi } from '@backstage/core'; +import { Typography } from '@material-ui/core'; +import React from 'react'; +import { useImportOptions } from '../ImportOptionsContext'; + +export const ImportInfoCard = () => { + const configApi = useApi(configApiRef); + const appTitle = configApi.getOptional('app.title') || 'Backstage'; + const opts = useImportOptions(); + + const integrations = configApi.getConfig('integrations'); + const hasGithubIntegration = integrations.has('github'); + + return ( + + + Enter the URL to your source code repository to add it to {appTitle}. + + Link to an existing entity file + + Example:{' '} + + https://github.com/backstage/backstage/blob/master/catalog-info.yaml + + + + The wizard analyzes the file, previews the entities, and adds them to + the {appTitle} catalog. + + {hasGithubIntegration && ( + <> + + Link to a repository{' '} + + + + Example: https://github.com/backstage/backstage + + + The wizard discovers all catalog-info.yaml files in the + repository, previews the entities, and adds them to the {appTitle}{' '} + catalog. + + {!opts?.pullRequest?.disable && ( + + If no entities are found, the wizard will prepare a Pull Request + that adds an example catalog-info.yaml and prepares + the {appTitle} catalog to load all entities as soon as the Pull + Request is merged. + + )} + + )} + + ); +}; diff --git a/plugins/catalog-import/src/components/ImportInfoCard/index.ts b/plugins/catalog-import/src/components/ImportInfoCard/index.ts new file mode 100644 index 0000000000..c82e88f7e8 --- /dev/null +++ b/plugins/catalog-import/src/components/ImportInfoCard/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { ImportInfoCard } from './ImportInfoCard'; diff --git a/plugins/catalog-import/src/components/ImportOptionsContext/ImportOptionsContext.tsx b/plugins/catalog-import/src/components/ImportOptionsContext/ImportOptionsContext.tsx new file mode 100644 index 0000000000..f22963429b --- /dev/null +++ b/plugins/catalog-import/src/components/ImportOptionsContext/ImportOptionsContext.tsx @@ -0,0 +1,24 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { createContext, useContext } from 'react'; +import { ImportOptions } from '../types'; + +export const ImportOptionsContext = createContext({}); + +export const useImportOptions = (): ImportOptions => { + return useContext(ImportOptionsContext); +}; diff --git a/plugins/catalog-import/src/components/ImportOptionsContext/index.ts b/plugins/catalog-import/src/components/ImportOptionsContext/index.ts new file mode 100644 index 0000000000..42d41718e4 --- /dev/null +++ b/plugins/catalog-import/src/components/ImportOptionsContext/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { ImportOptionsContext, useImportOptions } from './ImportOptionsContext'; diff --git a/plugins/catalog-import/src/components/ImportStepper/ImportStepper.tsx b/plugins/catalog-import/src/components/ImportStepper/ImportStepper.tsx index 48ee23e444..a669377b21 100644 --- a/plugins/catalog-import/src/components/ImportStepper/ImportStepper.tsx +++ b/plugins/catalog-import/src/components/ImportStepper/ImportStepper.tsx @@ -17,13 +17,14 @@ import { Step, StepContent, Stepper } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; import React, { useMemo } from 'react'; +import { useImportOptions } from '../ImportOptionsContext'; +import { ImportOptions } from '../types'; import { ImportFlows, ImportState, useImportState } from '../useImportState'; import { defaultGenerateStepper, defaultStepper, StepConfiguration, StepperProvider, - StepperProviderOpts, } from './defaults'; import { configApiRef, useApi } from '@backstage/core-plugin-api'; @@ -42,18 +43,19 @@ type Props = { defaults: StepperProvider, ) => StepperProvider; variant?: InfoCardVariants; - opts?: StepperProviderOpts; + /// @deprecated Pass import options via ImportOptionsContext instead. + opts?: ImportOptions; }; export const ImportStepper = ({ initialUrl, generateStepper = defaultGenerateStepper, variant, - opts, }: Props) => { const configApi = useApi(configApiRef); const classes = useStyles(); const state = useImportState({ initialUrl }); + const opts = useImportOptions(); const states = useMemo( () => generateStepper(state.activeFlow, defaultStepper), diff --git a/plugins/catalog-import/src/components/ImportStepper/defaults.tsx b/plugins/catalog-import/src/components/ImportStepper/defaults.tsx index 79d859ce32..9afd983da5 100644 --- a/plugins/catalog-import/src/components/ImportStepper/defaults.tsx +++ b/plugins/catalog-import/src/components/ImportStepper/defaults.tsx @@ -35,22 +35,9 @@ import { } from '../StepPrepareCreatePullRequest'; import { StepPrepareSelectLocations } from '../StepPrepareSelectLocations'; import { StepReviewLocation } from '../StepReviewLocation'; +import { ImportOptions, StepperApis } from '../types'; import { ImportFlows, ImportState } from '../useImportState'; -export type StepperProviderOpts = { - pullRequest?: { - disable?: boolean; - preparePullRequest?: (apis: StepperApis) => { - title?: string; - body?: string; - }; - }; -}; - -type StepperApis = { - configApi: ConfigApi; -}; - export type StepConfiguration = { stepLabel: React.ReactElement; content: React.ReactElement; @@ -59,19 +46,19 @@ export type StepConfiguration = { export type StepperProvider = { analyze: ( s: Extract, - opts: { apis: StepperApis; opts?: StepperProviderOpts }, + opts: { apis: StepperApis; opts?: ImportOptions }, ) => StepConfiguration; prepare: ( s: Extract, - opts: { apis: StepperApis; opts?: StepperProviderOpts }, + opts: { apis: StepperApis; opts?: ImportOptions }, ) => StepConfiguration; review: ( s: Extract, - opts: { apis: StepperApis; opts?: StepperProviderOpts }, + opts: { apis: StepperApis; opts?: ImportOptions }, ) => StepConfiguration; finish: ( s: Extract, - opts: { apis: StepperApis; opts?: StepperProviderOpts }, + opts: { apis: StepperApis; opts?: ImportOptions }, ) => StepConfiguration; }; diff --git a/plugins/catalog-import/src/components/Router.tsx b/plugins/catalog-import/src/components/Router.tsx index c8f1ae65a3..05ae51ca01 100644 --- a/plugins/catalog-import/src/components/Router.tsx +++ b/plugins/catalog-import/src/components/Router.tsx @@ -17,9 +17,10 @@ import React from 'react'; import { Route, Routes } from 'react-router-dom'; import { ImportComponentPage } from './ImportComponentPage'; -import { StepperProviderOpts } from './ImportStepper/defaults'; +import { ImportOptions } from './types'; -export const Router = (opts: StepperProviderOpts) => ( +/// @deprecated, use ImportComponentPage instead. +export const Router = (opts: ImportOptions) => ( } /> diff --git a/plugins/catalog-import/src/components/index.ts b/plugins/catalog-import/src/components/index.ts index 9b53200317..81056274f0 100644 --- a/plugins/catalog-import/src/components/index.ts +++ b/plugins/catalog-import/src/components/index.ts @@ -14,7 +14,10 @@ * limitations under the License. */ -export * from './ImportStepper'; +export * from './DefaultImportComponentPage'; export * from './EntityListComponent'; +export * from './ImportInfoCard'; +export * from './ImportOptionsContext'; +export * from './ImportStepper'; export * from './StepInitAnalyzeUrl'; export * from './StepPrepareCreatePullRequest'; diff --git a/plugins/catalog-import/src/components/types.ts b/plugins/catalog-import/src/components/types.ts new file mode 100644 index 0000000000..7cfc8043c7 --- /dev/null +++ b/plugins/catalog-import/src/components/types.ts @@ -0,0 +1,30 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { ConfigApi } from '@backstage/core-plugin-api'; + +export type ImportOptions = { + pullRequest?: { + disable?: boolean; + preparePullRequest?: ( + apis: StepperApis, + ) => { title?: string; body?: string }; + }; +}; + +export type StepperApis = { + configApi: ConfigApi; +}; diff --git a/plugins/catalog-import/src/plugin.ts b/plugins/catalog-import/src/plugin.ts index 3ab999ac07..075d8a2084 100644 --- a/plugins/catalog-import/src/plugin.ts +++ b/plugins/catalog-import/src/plugin.ts @@ -67,7 +67,10 @@ export const catalogImportPlugin = createPlugin({ export const CatalogImportPage = catalogImportPlugin.provide( createRoutableExtension({ - component: () => import('./components/Router').then(m => m.Router), + component: () => + import('./components/ImportComponentPage').then( + m => m.ImportComponentPage, + ), mountPoint: rootRouteRef, }), );