Merge pull request #50 from christoph-jerolimov/improve-dynamic-home-…

…page feat(homepage): fix todos and add support for top and recently visited cards
redhat-developer · Nov 19, 2024 · f266a8d · f266a8d
2 parents 589af5f + a5e2e8e
commit f266a8d
Show file tree

Hide file tree

Showing 24 changed files with 212 additions and 40 deletions.
diff --git a/workspaces/homepage/.changeset/lovely-wombats-jump.md b/workspaces/homepage/.changeset/lovely-wombats-jump.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-dynamic-home-page': major
+---
+
+prepare support for top and recently visited cards
diff --git a/workspaces/homepage/packages/app/src/App.tsx b/workspaces/homepage/packages/app/src/App.tsx
@@ -52,7 +52,10 @@ import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
 
-import { DynamicHomePage } from '@red-hat-developer-hub/backstage-plugin-dynamic-home-page';
+import {
+  DynamicHomePage,
+  VisitListener,
+} from '@red-hat-developer-hub/backstage-plugin-dynamic-home-page';
 
 const app = createApp({
   apis,
@@ -120,6 +123,8 @@ export default app.createRoot(
     <AlertDisplay />
     <OAuthRequestDialog />
     <AppRouter>
+      {/* RHIDP-4234: VisitListener should be replaced with a mount point */}
+      <VisitListener />
       <Root>{routes}</Root>
     </AppRouter>
   </>,

diff --git a/workspaces/homepage/plugins/dynamic-home-page/app-config.dynamic.yaml b/workspaces/homepage/plugins/dynamic-home-page/app-config.dynamic.yaml
@@ -1,7 +1,7 @@
 # please keep this in sync with packages/app/src/App.tsx
 dynamicPlugins:
   frontend:
-    janus-idp.backstage-plugin-dynamic-home-page:
+    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
       dynamicRoutes:
         - path: /
           importName: DynamicHomePage

diff --git a/workspaces/homepage/plugins/dynamic-home-page/dev/index.tsx b/workspaces/homepage/plugins/dynamic-home-page/dev/index.tsx
@@ -16,20 +16,26 @@
 import React from 'react';
 
 import { createDevApp, DevAppPageOptions } from '@backstage/dev-utils';
+import { TestApiProvider } from '@backstage/test-utils';
+import {
+  CatalogEntityPage,
+  CatalogIndexPage,
+  EntityLayout,
+} from '@backstage/plugin-catalog';
 import {
   CatalogApi,
   catalogApiRef,
-  MockStarredEntitiesApi,
+  EntityProvider,
   starredEntitiesApiRef,
+  MockStarredEntitiesApi,
 } from '@backstage/plugin-catalog-react';
+import { MockSearchApi, searchApiRef } from '@backstage/plugin-search-react';
 import {
   Visit,
   VisitsApi,
   VisitsApiQueryParams,
   visitsApiRef,
 } from '@backstage/plugin-home';
-import { MockSearchApi, searchApiRef } from '@backstage/plugin-search-react';
-import { TestApiProvider } from '@backstage/test-utils';
 
 import { PluginStore } from '@openshift/dynamic-plugin-sdk';
 import { getAllThemes } from '@redhat-developer/red-hat-developer-hub-theme';
@@ -105,6 +111,14 @@ class MockQuickAccessApi implements QuickAccessApi {
   }
 }
 
+const entity = {
+  apiVersion: 'backstage.io/v1alpha1',
+  kind: 'Component',
+  metadata: {
+    name: 'random-component',
+  },
+};
+
 const entities /* : Entity[]*/ = [
   {
     apiVersion: '1',
@@ -121,6 +135,7 @@ const entities /* : Entity[]*/ = [
     },
   },
 ];
+
 const mockCatalogApi: Partial<CatalogApi> = {
   // getEntities: (request?: GetEntitiesRequest, options?: CatalogRequestOptions): Promise<GetEntitiesResponse>
   getEntities: async () => ({
@@ -133,9 +148,8 @@ const mockCatalogApi: Partial<CatalogApi> = {
 };
 
 const mockStarredEntitiesApi = new MockStarredEntitiesApi();
-// TODO: Starred entity test page requires additional routeRefs to render starred entities
-// mockStarredEntitiesApi.toggleStarred('service-a');
-// mockStarredEntitiesApi.toggleStarred('service-b');
+mockStarredEntitiesApi.toggleStarred('service-a');
+mockStarredEntitiesApi.toggleStarred('service-b');
 
 class MockVisitsApi implements VisitsApi {
   async list(queryParams?: VisitsApiQueryParams): Promise<Visit[]> {
@@ -229,6 +243,24 @@ const createPage = ({
 createDevApp()
   .registerPlugin(dynamicHomePagePlugin)
   .addThemes(getAllThemes())
+  .addPage({
+    path: '/catalog',
+    title: 'Catalog',
+    element: <CatalogIndexPage />,
+  })
+  .addPage({
+    path: '/catalog/:namespace/:kind/:name',
+    element: <CatalogEntityPage />,
+    children: (
+      <EntityProvider entity={entity}>
+        <EntityLayout>
+          <EntityLayout.Route path="/" title="Overview">
+            <h1>Overview</h1>
+          </EntityLayout.Route>
+        </EntityLayout>
+      </EntityProvider>
+    ),
+  })
   .addPage(
     createPage({
       navTitle: 'Default',
@@ -275,7 +307,6 @@ createDevApp()
       navTitle: 'SearchBar',
       pageTitle: 'SearchBar',
       mountPoints: [
-        // TODO: why doesn't have instance 2 and 3 a background color? :-/
         {
           Component: SearchBar as React.ComponentType,
           config: {
@@ -720,4 +751,30 @@ createDevApp()
       ],
     }),
   )
+  .addPage(
+    createPage({
+      navTitle: 'Catch error',
+      mountPoints: [
+        {
+          Component: () => {
+            throw new Error();
+          },
+          config: {
+            // prettier-ignore
+            layouts: {
+              xl:  { w: 2, h: 1 },
+              lg:  { w: 2, h: 1 },
+              md:  { w: 2, h: 1 },
+              sm:  { w: 2, h: 1 },
+              xs:  { w: 2, h: 1 },
+              xxs: { w: 2, h: 1 },
+            },
+            props: {
+              path: '/searchbar',
+            },
+          },
+        },
+      ],
+    }),
+  )
   .render();
diff --git a/workspaces/homepage/plugins/dynamic-home-page/docs/catalog-starred.md b/workspaces/homepage/plugins/dynamic-home-page/docs/catalog-starred.md
@@ -11,7 +11,7 @@ Starred entities and starred entities grouped by catalog `Kind`:
 ```yaml
 dynamicPlugins:
   frontend:
-    janus-idp.backstage-plugin-dynamic-home-page:
+    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
       mountPoints:
         - mountPoint: home.page/cards
           importName: CatalogStarredEntitiesCard

diff --git a/workspaces/homepage/plugins/dynamic-home-page/docs/customization.md b/workspaces/homepage/plugins/dynamic-home-page/docs/customization.md
@@ -17,7 +17,7 @@ The home page loads automatically a configuration like this, when no other confi
 ```yaml
 dynamicPlugins:
   frontend:
-    janus-idp.backstage-plugin-dynamic-home-page:
+    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
       dynamicRoutes:
         - path: /
           importName: DynamicHomePage
@@ -63,7 +63,7 @@ Each card can have a `layouts` definition and `props` that are depending on the
 ```yaml
 dynamicPlugins:
   frontend:
-    janus-idp.backstage-plugin-dynamic-home-page:
+    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
       mountPoints:
         - mountPoint: home.page/cards
           importName: Headline

diff --git a/workspaces/homepage/plugins/dynamic-home-page/docs/featured-docs.md b/workspaces/homepage/plugins/dynamic-home-page/docs/featured-docs.md
@@ -9,7 +9,7 @@ Shows some techdocs.
 ```yaml
 dynamicPlugins:
   frontend:
-    janus-idp.backstage-plugin-dynamic-home-page:
+    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
       mountPoints:
         - mountPoint: home.page/cards
           importName: FeaturedDocsCard

diff --git a/workspaces/homepage/plugins/dynamic-home-page/docs/headline.md b/workspaces/homepage/plugins/dynamic-home-page/docs/headline.md
@@ -9,7 +9,7 @@ Allow admins and customers to structure the home page content.
 ```yaml
 dynamicPlugins:
   frontend:
-    janus-idp.backstage-plugin-dynamic-home-page:
+    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
       mountPoints:
         - mountPoint: home.page/cards
           importName: Headline

diff --git a/workspaces/homepage/plugins/dynamic-home-page/docs/jokes.md b/workspaces/homepage/plugins/dynamic-home-page/docs/jokes.md
@@ -11,7 +11,7 @@ The sourcecode and jokes of the Joke API are available on [GitHub](https://githu
 ```yaml
 dynamicPlugins:
   frontend:
-    janus-idp.backstage-plugin-dynamic-home-page:
+    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
       mountPoints:
         - mountPoint: home.page/cards
           importName: JokeCard

diff --git a/workspaces/homepage/plugins/dynamic-home-page/docs/layout-options.md b/workspaces/homepage/plugins/dynamic-home-page/docs/layout-options.md
@@ -19,7 +19,7 @@ So the default width takes 100% and the default height is 4*60 (row height) + 3*
 ```yaml
 dynamicPlugins:
   frontend:
-    janus-idp.backstage-plugin-dynamic-home-page:
+    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
       mountPoints:
         - mountPoint: home.page/cards
           importName: Placeholder
@@ -60,7 +60,7 @@ The following card will use the full space on smaller widows, and the half of th
 ```yaml
 dynamicPlugins:
   frontend:
-    janus-idp.backstage-plugin-dynamic-home-page:
+    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
       mountPoints:
         - mountPoint: home.page/cards
           importName: Placeholder
@@ -86,7 +86,7 @@ A second card will be shown below that card by default. To show cards side by si
 ```yaml
 dynamicPlugins:
   frontend:
-    janus-idp.backstage-plugin-dynamic-home-page:
+    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
       mountPoints:
         - mountPoint: home.page/cards
           importName: Placeholder
@@ -125,7 +125,7 @@ And this will work similar also for 3 columns of course:
 ```yaml
 dynamicPlugins:
   frontend:
-    janus-idp.backstage-plugin-dynamic-home-page:
+    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
       mountPoints:
         - mountPoint: home.page/cards
           importName: Placeholder

diff --git a/workspaces/homepage/plugins/dynamic-home-page/docs/markdown.md b/workspaces/homepage/plugins/dynamic-home-page/docs/markdown.md
@@ -11,7 +11,7 @@ The title is optional for both components.
 ```yaml
 dynamicPlugins:
   frontend:
-    janus-idp.backstage-plugin-dynamic-home-page:
+    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
       mountPoints:
         - mountPoint: home.page/cards
           importName: MarkdownCard

diff --git a/workspaces/homepage/plugins/dynamic-home-page/docs/placeholder.md b/workspaces/homepage/plugins/dynamic-home-page/docs/placeholder.md
@@ -9,7 +9,7 @@ The placeholder component could be used to test different layout options, and co
 ```yaml
 dynamicPlugins:
   frontend:
-    janus-idp.backstage-plugin-dynamic-home-page:
+    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
       mountPoints:
         - mountPoint: home.page/cards
           importName: Placeholder

diff --git a/workspaces/homepage/plugins/dynamic-home-page/docs/quick-access.md b/workspaces/homepage/plugins/dynamic-home-page/docs/quick-access.md
@@ -9,7 +9,7 @@ Allow users to easily discover resource.
 ```yaml
 dynamicPlugins:
   frontend:
-    janus-idp.backstage-plugin-dynamic-home-page:
+    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
       mountPoints:
         - mountPoint: home.page/cards
           importName: QuickAccessCard

diff --git a/workspaces/homepage/plugins/dynamic-home-page/docs/recently-visited.md b/workspaces/homepage/plugins/dynamic-home-page/docs/recently-visited.md
@@ -13,7 +13,7 @@ Shows the recently visited pages (incl. catalog entities) the current user visit
 ```yaml
 dynamicPlugins:
   frontend:
-    janus-idp.backstage-plugin-dynamic-home-page:
+    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
       mountPoints:
         - mountPoint: home.page/cards
           importName: RecentlyVisitedCard

diff --git a/workspaces/homepage/plugins/dynamic-home-page/docs/search.md b/workspaces/homepage/plugins/dynamic-home-page/docs/search.md
@@ -9,7 +9,7 @@ The search bar is a simple component that allows the user to start a search.
 ```yaml
 dynamicPlugins:
   frontend:
-    janus-idp.backstage-plugin-dynamic-home-page:
+    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
       mountPoints:
         - mountPoint: home.page/cards
           importName: SearchBar

diff --git a/workspaces/homepage/plugins/dynamic-home-page/docs/top-visited.md b/workspaces/homepage/plugins/dynamic-home-page/docs/top-visited.md
@@ -13,7 +13,7 @@ Shows the top visited pages (incl. catalog entities) the current user visited.
 ```yaml
 dynamicPlugins:
   frontend:
-    janus-idp.backstage-plugin-dynamic-home-page:
+    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
       mountPoints:
         - mountPoint: home.page/cards
           importName: TopVisitedCard

diff --git a/workspaces/homepage/plugins/dynamic-home-page/package.json b/workspaces/homepage/plugins/dynamic-home-page/package.json
@@ -37,7 +37,6 @@
     "@backstage/plugin-catalog-react": "1.14.0",
     "@backstage/plugin-home": "0.8.0",
     "@backstage/plugin-home-react": "0.1.18",
-    "@backstage/plugin-search": "1.4.18",
     "@backstage/plugin-search-react": "1.8.1",
     "@backstage/theme": "0.6.0",
     "@mui/material": "5.16.7",
@@ -55,6 +54,7 @@
     "@backstage/cli": "0.28.2",
     "@backstage/core-app-api": "1.15.1",
     "@backstage/dev-utils": "1.1.2",
+    "@backstage/plugin-catalog": "^1.24.0",
     "@backstage/test-utils": "1.7.0",
     "@openshift/dynamic-plugin-sdk": "5.0.1",
     "@redhat-developer/red-hat-developer-hub-theme": "0.4.0",

diff --git a/workspaces/homepage/plugins/dynamic-home-page/report.api.md b/workspaces/homepage/plugins/dynamic-home-page/report.api.md
@@ -4,11 +4,11 @@
 
 ```ts
 import { BackstagePlugin } from '@backstage/core-plugin-api';
-import type { FeaturedDocsCardProps } from '@backstage/plugin-home';
+import { FeaturedDocsCardProps } from '@backstage/plugin-home';
 import { default as React_2 } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
-import type { StarredEntitiesProps } from '@backstage/plugin-home';
-import type { VisitedByTypeProps } from '@backstage/plugin-home';
+import { StarredEntitiesProps } from '@backstage/plugin-home';
+import { VisitedByTypeProps } from '@backstage/plugin-home';
 
 // @public (undocumented)
 export const CatalogStarredEntitiesCard: React_2.ComponentType<StarredEntitiesProps>;
@@ -110,4 +110,7 @@ export interface SearchBarProps {
 
 // @public (undocumented)
 export const TopVisitedCard: React_2.ComponentType<VisitedByTypeProps>;
+
+// @public (undocumented)
+export const VisitListener: () => React_2.JSX.Element | null;
 ```
diff --git a/workspaces/homepage/plugins/dynamic-home-page/src/components/DynamicHomePage.tsx b/workspaces/homepage/plugins/dynamic-home-page/src/components/DynamicHomePage.tsx
@@ -44,9 +44,8 @@ export const DynamicHomePage = (props: DynamicHomePageProps) => {
         (!card.config?.priority || card.config.priority >= 0),
     );
 
-    // TODO: check if we want have priories with small or big numbers first...
     filteredAndSorted.sort(
-      (a, b) => (a.config?.priority ?? 0) - (b.config?.priority ?? 0),
+      (a, b) => (b.config?.priority ?? 0) - (a.config?.priority ?? 0),
     );
 
     return filteredAndSorted;

diff --git a/workspaces/homepage/plugins/dynamic-home-page/src/components/FeaturedDocsCard.tsx b/workspaces/homepage/plugins/dynamic-home-page/src/components/FeaturedDocsCard.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2024 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 {
+  FeaturedDocsCard as PluginHomeFeaturedDocsCard,
+  FeaturedDocsCardProps,
+} from '@backstage/plugin-home';
+
+/**
+ * Overrides `FeaturedDocsCard` from the home plugin, but overrides the
+ * `subLinkText` prop to be " Learn more" instead of "LEARN MORE".
+ *
+ * 1. To fix the all uppercase that is used in home plugin
+ * 2. To add a small missing gap between the title and the button
+ */
+export const FeaturedDocsCard = (props: FeaturedDocsCardProps) => {
+  return <PluginHomeFeaturedDocsCard subLinkText=" Learn more" {...props} />;
+};