From dab3abbec470a828facd2d356e769f03a36e8133 Mon Sep 17 00:00:00 2001 From: bnechyporenko Date: Tue, 31 May 2022 13:35:00 +0200 Subject: [PATCH] Cleaned up the code and added a test Signed-off-by: bnechyporenko --- docs/plugins/customization.md | 40 +++++++------------ packages/app/src/App.tsx | 6 --- .../plugin-options/usePluginOptions.test.tsx | 38 ++++++++++++++++++ .../src/plugin-options/usePluginOptions.tsx | 2 +- .../CatalogPage/DefaultCatalogPage.tsx | 4 +- plugins/catalog/src/plugin.ts | 3 -- tsconfig.json | 3 +- 7 files changed, 57 insertions(+), 39 deletions(-) create mode 100644 packages/core-plugin-api/src/plugin-options/usePluginOptions.test.tsx diff --git a/docs/plugins/customization.md b/docs/plugins/customization.md index 88d7d4bad6..566b843def 100644 --- a/docs/plugins/customization.md +++ b/docs/plugins/customization.md @@ -16,33 +16,23 @@ When you are creating your plugin, you have a possibility to use a metadata fiel customizable elements. For example ```typescript jsx -export type MyPluginMetadataProps = { - createButtonTitle: string; -}; - -export const myPluginMetadataRef = createMetadataRef({ - id: 'MyPluginMetadataProvider', -}); - -export const myPluginMetadata = { - MyPluginMetadataProvider: { - // or [myPluginMetadataRef.id] - createButtonTitle: 'Create Component', - }, -}; - const plugin = createPlugin({ - id: 'myPlugin', - metadata: [myPluginMetadata], + id: 'my-plugin', + options: { + createButtonTitle: 'Create', + }, }); ``` And the rendering part of the exposed component can retrieve that metadata as: ```typescript jsx -export function DefaultMyPluginWelcomePage(props: DefaultMyPluginWelcomeProps) { - const { createButtonTitle } = - useMetadata(myPluginMetadataRef); +export type CatalogPageOptionsProps = { + createButtonTitle: string; +}; + +export function DefaultMyPluginWelcomePage() { + const { createButtonTitle } = usePluginOptions(); return (
@@ -60,10 +50,8 @@ plugin. Example: ```typescript jsx import { myPlugin } from '@backstage/my-plugin'; -myPlugin.reconfigure({ - MyPluginMetadataProvider: { - // or [myPluginMetadataRef.id] - createButtonTitle: 'Make Component', - }, -}); +myPlugin.reconfigure((options: CatalogPageOptionsProps) => ({ + ...options, + createButtonTitle: 'Maybe Create', +})); ``` diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index d55b3afca7..2499055e7d 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -139,12 +139,6 @@ const app = createApp({ const AppProvider = app.getProvider(); const AppRouter = app.getRouter(); -// TODO: remove it, only for testing here -catalogPlugin.reconfigure((options: AnyPluginOptions) => ({ - ...options, - createButtonTitle: 'Maybe Create', -})); - const routes = ( diff --git a/packages/core-plugin-api/src/plugin-options/usePluginOptions.test.tsx b/packages/core-plugin-api/src/plugin-options/usePluginOptions.test.tsx new file mode 100644 index 0000000000..ea4c1d383e --- /dev/null +++ b/packages/core-plugin-api/src/plugin-options/usePluginOptions.test.tsx @@ -0,0 +1,38 @@ +/* + * 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 React from 'react'; +import { renderHook } from '@testing-library/react-hooks'; +import { usePluginOptions, PluginOptionsProvider } from './usePluginOptions'; + +describe('usePluginOptions', () => { + it('should provide a versioned value to hook', () => { + const rendered = renderHook(() => usePluginOptions(), { + wrapper: ({ children }) => ( + + {children} + + ), + }); + + expect(rendered.result.current).toEqual({ + 'key-1': 'value-1', + 'key-2': 'value-2', + }); + }); +}); diff --git a/packages/core-plugin-api/src/plugin-options/usePluginOptions.tsx b/packages/core-plugin-api/src/plugin-options/usePluginOptions.tsx index 5e8952ee76..bc1e4d7d3d 100644 --- a/packages/core-plugin-api/src/plugin-options/usePluginOptions.tsx +++ b/packages/core-plugin-api/src/plugin-options/usePluginOptions.tsx @@ -37,7 +37,7 @@ export interface PluginOptionsProviderProps { export const PluginOptionsProvider = ({ children, pluginOptions, -}: PluginOptionsProviderProps) => { +}: PluginOptionsProviderProps): JSX.Element => { const value = { pluginOptions }; const { Provider } = createVersionedContext<{ 1: AnyPluginOptions }>( contextKey, diff --git a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx index 35e4aa5753..4318fc242f 100644 --- a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx @@ -57,7 +57,7 @@ export interface DefaultCatalogPageProps { tableOptions?: TableProps['options']; } -export type CatalogPageMetadataProps = { +export type CatalogPageOptionsProps = { createButtonTitle: string; }; @@ -73,7 +73,7 @@ export function DefaultCatalogPage(props: DefaultCatalogPageProps) { useApi(configApiRef).getOptionalString('organization.name') ?? 'Backstage'; const createComponentLink = useRouteRef(createComponentRouteRef); - const { createButtonTitle } = usePluginOptions(); + const { createButtonTitle } = usePluginOptions(); return ( diff --git a/plugins/catalog/src/plugin.ts b/plugins/catalog/src/plugin.ts index 6b441acbdc..1b9083e7ca 100644 --- a/plugins/catalog/src/plugin.ts +++ b/plugins/catalog/src/plugin.ts @@ -72,9 +72,6 @@ export const catalogPlugin = createPlugin({ createComponent: createComponentRouteRef, viewTechDoc: viewTechDocRouteRef, }, - options: { - createButtonTitle: 'Create', - }, }); /** @public */ diff --git a/tsconfig.json b/tsconfig.json index 789743363d..5ad2749f19 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,6 +9,7 @@ "compilerOptions": { "outDir": "dist-types", "rootDir": ".", - "useUnknownInCatchVariables": false + "useUnknownInCatchVariables": false, + "jsx": "react" } }