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 <aitherios@gmail.com>

plugins/home/README.md

@@ -242,24 +242,27 @@ const defaultConfig = [
 <CustomHomepageGrid config={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 `<HomePageVisitedByType/>` component, see it in use on a homepage example below:
+Being provided by the `<HomePageTopVisited/>` and `<HomePageRecentlyVisited/>` 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 = (
   <Grid container spacing={3}>
     <Grid item xs={12} md={4}>
-      <HomePageVisitedByType kind="top" />
+      <HomePageTopVisited />
     </Grid>
     <Grid item xs={12} md={4}>
-      <HomePageVisitedByType kind="recent" />
+      <HomePageRecentlyVisited />
     </Grid>
   </Grid>
 );

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<Partial<VisitedByTypeProps>>,
+) => JSX_2.Element;
+
 // @public
 export const HomePageStarredEntities: (
   props: CardExtensionProps_2<unknown>,
@@ -140,8 +151,8 @@ export const HomePageToolkit: (
 ) => JSX_2.Element;
 
 // @public
-export const HomePageVisitedByType: (
-  props: CardExtensionProps_2<VisitedByTypeProps>,
+export const HomePageTopVisited: (
+  props: CardExtensionProps_2<Partial<VisitedByTypeProps>>,
 ) => JSX_2.Element;
 
 // @public (undocumented)

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<Visit> = [
   {
@@ -86,6 +88,13 @@ const visits: Array<Visit> = [
   },
 ];
 
+const HomePageVisitedByType = homePlugin.provide(
+  createCardExtension<VisitedByTypeProps>({
+    name: 'HomePageTopVisited',
+    components: () => import('./'),
+  }),
+);
+
 const mockVisitsApi = {
   save: async () => visits[0],
   list: async () => visits,

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<VisitedByTypeProps>) => (
+  <Content {...props} kind="recent" />
+);
+
+export { RecentlyVisitedContent as Content };

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<VisitedByTypeProps>) => (
+  <Content {...props} kind="top" />
+);
+
+export { TopVisitedContent as Content };

plugins/home/src/index.ts

@@ -32,7 +32,8 @@ export {
   ComponentTab,
   WelcomeTitle,
   HeaderWorldClock,
-  HomePageVisitedByType,
+  HomePageTopVisited,
+  HomePageRecentlyVisited,
 } from './plugin';
 export * from './components';
 export * from './assets';

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<VisitedByTypeProps>({
-    name: 'HomePageVisitedByType',
-    components: () => import('./homePageComponents/VisitedByType'),
+export const HomePageTopVisited = homePlugin.provide(
+  createCardExtension<Partial<VisitedByTypeProps>>({
+    name: 'HomePageTopVisited',
+    components: () => import('./homePageComponents/VisitedByType/TopVisited'),
+  }),
+);
+
+/**
+ * Display recently visited pages for the homepage
+ * @public
+ */
+export const HomePageRecentlyVisited = homePlugin.provide(
+  createCardExtension<Partial<VisitedByTypeProps>>({
+    name: 'HomePageRecentlyVisited',
+    components: () =>
+      import('./homePageComponents/VisitedByType/RecentlyVisited'),
   }),
 );