chore(homepage): migrate dynamic-home-page from showcase

Signed-off-by: Christoph Jerolimov <[email protected]>
redhat-developer · Nov 16, 2024 · 67d4f42 · 67d4f42
1 parent 3ed2100
commit 67d4f42
Show file tree

Hide file tree

Showing 62 changed files with 3,351 additions and 565 deletions.
diff --git a/workspaces/homepage/catalog-info.yaml b/workspaces/homepage/catalog-info.yaml
@@ -1,13 +1,24 @@
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-component
 apiVersion: backstage.io/v1alpha1
 kind: Component
 metadata:
-  name: homepage
-  description: An example of a Backstage application.
-  # Example for optional annotations
-  # annotations:
-  #   github.com/project-slug: backstage/backstage
-  #   backstage.io/techdocs-ref: dir:.
+  name: rhdh-plugins-homepage
+  title: Home Page plugin
+  description: Home Page plugin based on the upstream `home` plugin that can be extended and customized with the RHDH dynamic plugin feature.
+  annotations:
+    {}
+    # github.com/project-slug: janus-idp/backstage-showcase
+    # github.com/team-slug: janus-idp/maintainers-plugins
+    # sonarqube.org/project-key: janus-idp_backstage-showcase
+  tags:
+    - homepage
+  links:
+    - url: https://github.com/redhat-developer/rhdh-plugins/tree/main/workspaces/homepage
+      title: GitHub Source
+      icon: source
+      type: source
 spec:
-  type: website
-  owner: [email protected]
-  lifecycle: experimental
+  type: backstage-plugin
+  lifecycle: production
+  owner: rhdh-team
+  system: rhdh
diff --git a/workspaces/homepage/packages/app/src/App.tsx b/workspaces/homepage/packages/app/src/App.tsx
@@ -51,7 +51,8 @@ import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
 import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
-import { DynamicHomePagePage } from '@red-hat-developer-hub/backstage-plugin-dynamic-home-page';
+
+import { DynamicHomePage } from '@red-hat-developer-hub/backstage-plugin-dynamic-home-page';
 
 const app = createApp({
   apis,
@@ -79,7 +80,7 @@ const app = createApp({
 
 const routes = (
   <FlatRoutes>
-    <Route path="/" element={<DynamicHomePagePage />} />
+    <Route path="/" element={<DynamicHomePage />} />
     <Route path="/catalog" element={<CatalogIndexPage />} />
     <Route
       path="/catalog/:namespace/:kind/:name"

diff --git a/workspaces/homepage/plugins/dynamic-home-page/README.md b/workspaces/homepage/plugins/dynamic-home-page/README.md
@@ -1,13 +1,5 @@
-# dynamic-home-page
+# Dynamic Home Page plugin
 
-Welcome to the dynamic-home-page plugin!
+This is a dynamic version of the upstream [home page plugin](https://github.com/backstage/backstage/tree/master/plugins/home).
 
-_This plugin was created through the Backstage CLI_
-
-## Getting started
-
-Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/dynamic-home-page](http://localhost:3000/dynamic-home-page).
-
-You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
-This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
-It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.
+Instead of manually adding supported "home page cards" to a custom route, it allows dynamic plugins to expose such cards.
diff --git a/workspaces/homepage/plugins/dynamic-home-page/api-report.md b/workspaces/homepage/plugins/dynamic-home-page/api-report.md
@@ -3,14 +3,18 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
-/// <reference types="react" />
-
 import { BackstagePlugin } from '@backstage/core-plugin-api';
-import { JSX as JSX_2 } from 'react';
+import type { 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';
+
+// @public (undocumented)
+export const CatalogStarredEntitiesCard: React_2.ComponentType<StarredEntitiesProps>;
 
 // @public (undocumented)
-export const DynamicHomePagePage: () => JSX_2.Element;
+export const DynamicHomePage: React_2.ComponentType<DynamicHomePageProps>;
 
 // @public (undocumented)
 export const dynamicHomePagePlugin: BackstagePlugin<
@@ -21,5 +25,89 @@ export const dynamicHomePagePlugin: BackstagePlugin<
   {}
 >;
 
-// (No @packageDocumentation comment for this package)
+// @public (undocumented)
+export interface DynamicHomePageProps {
+  // (undocumented)
+  title?: string;
+}
+
+// @public (undocumented)
+export const FeaturedDocsCard: React_2.ComponentType<FeaturedDocsCardProps>;
+
+// @public (undocumented)
+export const Headline: React_2.ComponentType<HeadlineProps>;
+
+// @public (undocumented)
+export interface HeadlineProps {
+  // (undocumented)
+  align?: 'left' | 'center' | 'right';
+  // (undocumented)
+  title?: string;
+}
+
+// @public (undocumented)
+export const JokeCard: React_2.ComponentType<{
+  defaultCategory?: 'any' | 'programming';
+}>;
+
+// @public (undocumented)
+export const Markdown: React_2.ComponentType<MarkdownProps>;
+
+// @public (undocumented)
+export const MarkdownCard: React_2.ComponentType<MarkdownCardProps>;
+
+// @public (undocumented)
+export interface MarkdownCardProps {
+  // (undocumented)
+  content?: string;
+  // (undocumented)
+  title?: string;
+}
+
+// @public (undocumented)
+export interface MarkdownProps {
+  // (undocumented)
+  content?: string;
+  // (undocumented)
+  title?: string;
+}
+
+// @public (undocumented)
+export const Placeholder: React_2.ComponentType<PlaceholderProps>;
+
+// @public (undocumented)
+export interface PlaceholderProps {
+  // (undocumented)
+  debugContent?: string;
+  // (undocumented)
+  showBorder?: boolean;
+}
+
+// @public (undocumented)
+export const QuickAccessCard: React_2.ComponentType<QuickAccessCardProps>;
+
+// @public (undocumented)
+export interface QuickAccessCardProps {
+  // (undocumented)
+  path?: string;
+  // (undocumented)
+  title?: string;
+}
+
+// @public (undocumented)
+export const RecentlyVisitedCard: React_2.ComponentType<VisitedByTypeProps>;
+
+// @public (undocumented)
+export const SearchBar: React_2.ComponentType<SearchBarProps>;
+
+// @public (undocumented)
+export interface SearchBarProps {
+  // (undocumented)
+  path?: string;
+  // (undocumented)
+  queryParam?: string;
+}
+
+// @public (undocumented)
+export const TopVisitedCard: React_2.ComponentType<VisitedByTypeProps>;
 ```
diff --git a/workspaces/homepage/plugins/dynamic-home-page/app-config.dynamic.yaml b/workspaces/homepage/plugins/dynamic-home-page/app-config.dynamic.yaml
@@ -0,0 +1,38 @@
+# please keep this in sync with packages/app/src/App.tsx
+dynamicPlugins:
+  frontend:
+    janus-idp.backstage-plugin-dynamic-home-page:
+      dynamicRoutes:
+        - path: /
+          importName: DynamicHomePage
+      mountPoints:
+        - mountPoint: home.page/cards
+          importName: SearchBar
+          config:
+            layouts:
+              xl: { w: 10, h: 1, x: 1 }
+              lg: { w: 10, h: 1, x: 1 }
+              md: { w: 10, h: 1, x: 1 }
+              sm: { w: 10, h: 1, x: 1 }
+              xs: { w: 12, h: 1 }
+              xxs: { w: 12, h: 1 }
+        - mountPoint: home.page/cards
+          importName: QuickAccessCard
+          config:
+            layouts:
+              xl: { w: 7, h: 8 }
+              lg: { w: 7, h: 8 }
+              md: { w: 7, h: 8 }
+              sm: { w: 12, h: 8 }
+              xs: { w: 12, h: 8 }
+              xxs: { w: 12, h: 8 }
+        - mountPoint: home.page/cards
+          importName: CatalogStarredEntitiesCard
+          config:
+            layouts:
+              xl: { w: 5, h: 4, x: 7 }
+              lg: { w: 5, h: 4, x: 7 }
+              md: { w: 5, h: 4, x: 7 }
+              sm: { w: 12, h: 4 }
+              xs: { w: 12, h: 4 }
+              xxs: { w: 12, h: 4 }
diff --git a/workspaces/homepage/plugins/dynamic-home-page/catalog-info.yaml b/workspaces/homepage/plugins/dynamic-home-page/catalog-info.yaml
@@ -0,0 +1,28 @@
+# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-component
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: rhdh-plugins-dynamic-home-page-frontend
+  title: '@red-hat-developer-hub/backstage-plugin-dynamic-home-page'
+  description: Dynamic Home Page plugin based on the upstream `home` plugin that can be extended and customized with the RHDH dynamic plugin feature.
+  annotations:
+    {}
+    # github.com/project-slug: janus-idp/backstage-showcase
+    # github.com/team-slug: janus-idp/maintainers-plugins
+    # sonarqube.org/project-key: janus-idp_backstage-showcase
+  tags:
+    - homepage
+  links:
+    - url: https://github.com/redhat-developer/rhdh-plugins/tree/main/workspaces/homepage/plugins/dynamic-home-page
+      title: GitHub Source
+      icon: source
+      type: source
+spec:
+  type: backstage-frontend-plugin
+  lifecycle: production
+  owner: rhdh-team
+  system: rhdh
+  subcomponentOf: rhdh-plugins-homepage
+  dependsOn:
+    - component:backstage-plugin-home
+    - component:backstage-plugin-home-react