From 7a8b0b4cf376842e6fc9cce25147d53b3fb9dc31 Mon Sep 17 00:00:00 2001 From: Renan Mendes Carvalho Date: Fri, 22 Sep 2023 09:49:38 +0200 Subject: [PATCH] refactoring(plugins/home): Separate TopVisited and RecentlyVisited This patch separates the two components to be easier to import them in the customizable homepage. Signed-off-by: Renan Mendes Carvalho --- plugins/home/README.md | 13 +++++---- plugins/home/api-report.md | 17 +++++++++--- .../HomePageVisitedByType.stories.tsx | 11 +++++++- .../VisitedByType/RecentlyVisited.tsx | 27 +++++++++++++++++++ .../VisitedByType/TopVisited.tsx | 27 +++++++++++++++++++ plugins/home/src/index.ts | 3 ++- plugins/home/src/plugin.ts | 22 +++++++++++---- 7 files changed, 105 insertions(+), 15 deletions(-) create mode 100644 plugins/home/src/homePageComponents/VisitedByType/RecentlyVisited.tsx create mode 100644 plugins/home/src/homePageComponents/VisitedByType/TopVisited.tsx diff --git a/plugins/home/README.md b/plugins/home/README.md index d70667e886..d41ae57162 100644 --- a/plugins/home/README.md +++ b/plugins/home/README.md @@ -242,24 +242,27 @@ const defaultConfig = [ ``` -## Page visit homepage component (HomePageVisitedByType) +## Page visit homepage component (HomePageTopVisited / HomePageRecentlyVisited) This component shows the homepage user a view for "Recently visited" or "Top visited". -Being provided by the `` component, see it in use on a homepage example below: +Being provided by the `` and `` component, see it in use on a homepage example below: ```tsx // packages/app/src/components/home/HomePage.tsx import React from 'react'; import Grid from '@material-ui/core/Grid'; -import { HomePageVisitedByType } from '@backstage/plugin-home'; +import { + HomePageTopVisited, + HomePageRecentlyVisited, +} from '@backstage/plugin-home'; export const homePage = ( - + - + ); diff --git a/plugins/home/api-report.md b/plugins/home/api-report.md index e3f789c2af..8b43f59811 100644 --- a/plugins/home/api-report.md +++ b/plugins/home/api-report.md @@ -102,7 +102,13 @@ export type CustomHomepageGridProps = { }; // @public -export const getVisitName: (document: Document) => () => string; +export const getVisitName: ({ + rootPath, + document, +}?: { + rootPath?: string | undefined; + document?: Document | undefined; +}) => ({ pathname }: { pathname: string }) => string; // @public export const HeaderWorldClock: (props: { @@ -129,6 +135,11 @@ export const HomePageRandomJoke: ( }>, ) => JSX_2.Element; +// @public +export const HomePageRecentlyVisited: ( + props: CardExtensionProps_2>, +) => JSX_2.Element; + // @public export const HomePageStarredEntities: ( props: CardExtensionProps_2, @@ -140,8 +151,8 @@ export const HomePageToolkit: ( ) => JSX_2.Element; // @public -export const HomePageVisitedByType: ( - props: CardExtensionProps_2, +export const HomePageTopVisited: ( + props: CardExtensionProps_2>, ) => JSX_2.Element; // @public (undocumented) diff --git a/plugins/home/src/homePageComponents/VisitedByType/HomePageVisitedByType.stories.tsx b/plugins/home/src/homePageComponents/VisitedByType/HomePageVisitedByType.stories.tsx index 19861bf58e..d20d5344ae 100644 --- a/plugins/home/src/homePageComponents/VisitedByType/HomePageVisitedByType.stories.tsx +++ b/plugins/home/src/homePageComponents/VisitedByType/HomePageVisitedByType.stories.tsx @@ -18,8 +18,10 @@ import React from 'react'; import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils'; import { ComponentType, PropsWithChildren } from 'react'; import { Grid } from '@material-ui/core'; -import { HomePageVisitedByType } from '../../plugin'; +import { homePlugin } from '../../plugin'; import { Visit, visitsApiRef } from '../../api/VisitsApi'; +import { createCardExtension } from '@backstage/plugin-home-react'; +import { VisitedByTypeProps } from './Content'; const visits: Array = [ { @@ -86,6 +88,13 @@ const visits: Array = [ }, ]; +const HomePageVisitedByType = homePlugin.provide( + createCardExtension({ + name: 'HomePageTopVisited', + components: () => import('./'), + }), +); + const mockVisitsApi = { save: async () => visits[0], list: async () => visits, diff --git a/plugins/home/src/homePageComponents/VisitedByType/RecentlyVisited.tsx b/plugins/home/src/homePageComponents/VisitedByType/RecentlyVisited.tsx new file mode 100644 index 0000000000..a6896f4e91 --- /dev/null +++ b/plugins/home/src/homePageComponents/VisitedByType/RecentlyVisited.tsx @@ -0,0 +1,27 @@ +/* + * Copyright 2023 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 { Actions } from './Actions'; +export { ContextProvider } from './Context'; +export type { VisitedByTypeProps, VisitedByTypeKind } from './Content'; +import React from 'react'; +import { Content, VisitedByTypeProps } from './Content'; + +const RecentlyVisitedContent = (props: Partial) => ( + +); + +export { RecentlyVisitedContent as Content }; diff --git a/plugins/home/src/homePageComponents/VisitedByType/TopVisited.tsx b/plugins/home/src/homePageComponents/VisitedByType/TopVisited.tsx new file mode 100644 index 0000000000..5a326abf51 --- /dev/null +++ b/plugins/home/src/homePageComponents/VisitedByType/TopVisited.tsx @@ -0,0 +1,27 @@ +/* + * Copyright 2023 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 { Actions } from './Actions'; +export { ContextProvider } from './Context'; +export type { VisitedByTypeProps, VisitedByTypeKind } from './Content'; +import React from 'react'; +import { Content, VisitedByTypeProps } from './Content'; + +const TopVisitedContent = (props: Partial) => ( + +); + +export { TopVisitedContent as Content }; diff --git a/plugins/home/src/index.ts b/plugins/home/src/index.ts index c60883d749..a80f8bd93d 100644 --- a/plugins/home/src/index.ts +++ b/plugins/home/src/index.ts @@ -32,7 +32,8 @@ export { ComponentTab, WelcomeTitle, HeaderWorldClock, - HomePageVisitedByType, + HomePageTopVisited, + HomePageRecentlyVisited, } from './plugin'; export * from './components'; export * from './assets'; diff --git a/plugins/home/src/plugin.ts b/plugins/home/src/plugin.ts index d4ed401c86..ab8c46baa1 100644 --- a/plugins/home/src/plugin.ts +++ b/plugins/home/src/plugin.ts @@ -189,12 +189,24 @@ export const HeaderWorldClock = homePlugin.provide( ); /** - * Display recently/top visited pages for the homepage + * Display top visited pages for the homepage * @public */ -export const HomePageVisitedByType = homePlugin.provide( - createCardExtension({ - name: 'HomePageVisitedByType', - components: () => import('./homePageComponents/VisitedByType'), +export const HomePageTopVisited = homePlugin.provide( + createCardExtension>({ + name: 'HomePageTopVisited', + components: () => import('./homePageComponents/VisitedByType/TopVisited'), + }), +); + +/** + * Display recently visited pages for the homepage + * @public + */ +export const HomePageRecentlyVisited = homePlugin.provide( + createCardExtension>({ + name: 'HomePageRecentlyVisited', + components: () => + import('./homePageComponents/VisitedByType/RecentlyVisited'), }), );