chore(e2e-test): [Test automation] Verify Home Page can be customized

.ibm/pipelines/resources/config_map/app-config-rhdh.yaml

@@ -14,44 +14,6 @@ app:
         headerColor1: 'rgb(190, 122, 45)'
         headerColor2: 'rgb(45, 190, 50)'
         navigationIndicatorColor: 'rgb(45, 113, 190)'
-dynamicPlugins:
-  rootDirectory: dynamic-plugins-root
-  frontend:
-    default.main-menu-items:
-      menuItems:
-        default.list:
-          title: References
-          icon: bookmarks
-        default.apis:
-          parent: default.list
-        default.learning-path:
-          parent: default.list
-    backstage.plugin-techdocs:
-      menuItems:
-        favorites:
-          title: Favorites
-          icon: star
-          priority: 10
-        docs:
-          parent: favorites
-          priority: 1
-    pataknight.backstage-plugin-rhdh-qe-theme:
-      appIcons:
-      - importName: LightIcon
-        name: lightIcon
-      - importName: DarkIcon
-        name: darkIcon
-      themes:
-      - icon: lightIcon
-        id: light-dynamic
-        importName: lightThemeProvider
-        title: Light Dynamic
-        variant: light
-      - icon: darkIcon
-        id: dark-dynamic
-        importName: darkThemeProvider
-        title: Dark Dynamic
-        variant: dark
 backend:
   reading:
     allow:

.ibm/pipelines/resources/config_map/dynamic-homepage-and-sidebar-config.yaml

@@ -0,0 +1,180 @@
+dynamicPlugins:
+  rootDirectory: dynamic-plugins-root
+  frontend:
+    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
+      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 }
+
+        - mountPoint: home.page/cards
+          importName: Headline
+          config:
+            layouts:
+              xl:  { w: 12, h: 1 }
+              lg:  { w: 12, h: 1 }
+              md:  { w: 12, h: 1 }
+              sm:  { w: 12, h: 1 }
+              xs:  { w: 12, h: 1 }
+              xxs: { w: 12, h: 1 }
+            props:
+              title: Placeholder tests
+              align: center      
+
+        - mountPoint: home.page/cards
+          importName: Placeholder
+          config:
+            layouts:
+              xl:  { x: 1, y: 0, w: 10, h: 1 }
+              lg:  { x: 1, y: 0, w: 10, h: 1 }
+              md:  { x: 1, y: 0, w: 10, h: 1 }
+              sm:  { x: 0, y: 0, w: 12, h: 1 }
+              xs:  { x: 0, y: 0, w: 12, h: 1 }
+              xxs: { x: 0, y: 0, w: 12, h: 1 }
+            props:
+              showBorder: true
+              debugContent: Home page customization test 1
+        - mountPoint: home.page/cards
+          importName: Placeholder
+          config:
+            layouts:
+              xl:  { x: 0, y: 0, w: 7, h: 4 }
+              lg:  { x: 0, y: 0, w: 7, h: 4 }
+              md:  { x: 0, y: 0, w: 7, h: 4 }
+              sm:  { x: 0, y: 0, w: 12, h: 4 }
+              xs:  { x: 0, y: 0, w: 12, h: 4 }
+              xxs: { x: 0, y: 0, w: 12, h: 4 }
+            props:
+              showBorder: true
+              debugContent: Home page customization test 2
+        - mountPoint: home.page/cards
+          importName: Placeholder
+          config:
+            layouts:
+              xl:  { x: 7, y: 0, w: 5, h: 4 }
+              lg:  { x: 7, y: 0, w: 5, h: 4 }
+              md:  { x: 7, y: 0, w: 5, h: 4 }
+              sm:  { x: 0, y: 0, w: 12, h: 4 }
+              xs:  { x: 0, y: 0, w: 12, h: 4 }
+              xxs: { x: 0, y: 0, w: 12, h: 4 }
+            props:
+              showBorder: true
+              debugContent: Home page customization test 3
+        - mountPoint: home.page/cards
+          importName: Headline
+          config:
+            layouts:
+              xl:  { w: 12, h: 1 }
+              lg:  { w: 12, h: 1 }
+              md:  { w: 12, h: 1 }
+              sm:  { w: 12, h: 1 }
+              xs:  { w: 12, h: 1 }
+              xxs: { w: 12, h: 1 }
+            props:
+              title: Markdown tests
+              align: center
+
+        - mountPoint: home.page/cards
+          importName: MarkdownCard
+          config:
+            layouts:
+              xl:  { w: 6, h: 4 }
+              lg:  { w: 6, h: 4 }
+              md:  { w: 6, h: 4 }
+              sm:  { w: 6, h: 4 }
+              xs:  { w: 6, h: 4 }
+              xxs: { w: 6, h: 4 }
+            props:
+              title: Company links
+              content: |
+                ### RHDH
+
+                * [Website](https://developers.redhat.com/rhdh/overview)
+                * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
+                * [GitHub Showcase](https://github.com/janus-idp/backstage-showcase)
+                * [GitHub Plugins](https://github.com/janus-idp/backstage-plugins)
+        - mountPoint: home.page/cards
+          importName: Markdown
+          config:
+            layouts:
+              xl:  { w: 6, h: 4, x: 6 }
+              lg:  { w: 6, h: 4, x: 6 }
+              md:  { w: 6, h: 4, x: 6 }
+              sm:  { w: 6, h: 4, x: 6 }
+              xs:  { w: 6, h: 4, x: 6 }
+              xxs: { w: 6, h: 4, x: 6 }
+            props:
+              title: Important company links
+              content: |
+                ### RHDH
+
+                * [Website](https://developers.redhat.com/rhdh/overview)
+                * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
+                * [GitHub Showcase](https://github.com/janus-idp/backstage-showcase)
+                * [GitHub Plugins](https://github.com/janus-idp/backstage-plugins)
+        - mountPoint: home.page/cards
+          importName: FeaturedDocsCard
+        - mountPoint: home.page/cards
+          importName: JokeCard
+    default.main-menu-items:
+      menuItems:
+        default.list:
+          title: References
+          icon: bookmarks
+        default.apis:
+          parent: default.list
+        default.learning-path:
+          parent: default.list
+    backstage.plugin-techdocs:
+      menuItems:
+        favorites:
+          title: Favorites
+          icon: star
+          priority: 10
+        docs:
+          parent: favorites
+          priority: 1
+    pataknight.backstage-plugin-rhdh-qe-theme:
+      appIcons:
+      - importName: LightIcon
+        name: lightIcon
+      - importName: DarkIcon
+        name: darkIcon
+      themes:
+      - icon: lightIcon
+        id: light-dynamic
+        importName: lightThemeProvider
+        title: Light Dynamic
+        variant: light
+      - icon: darkIcon
+        id: dark-dynamic
+        importName: darkThemeProvider
+        title: Dark Dynamic
+        variant: dark

.ibm/pipelines/utils.sh

@@ -449,6 +449,10 @@ apply_yaml_files() {
       create_app_config_map_k8s "$config_file" "$project"
     else
       create_app_config_map "$config_file" "$project"
+      oc create configmap dynamic-homepage-and-sidebar-config \
+      --from-file="dynamic-homepage-and-sidebar-config.yaml"="$dir/resources/config_map/dynamic-homepage-and-sidebar-config.yaml" \
+      --namespace="${project}" \
+      --dry-run=client -o yaml | oc apply -f -
     fi
     oc create configmap rbac-policy \
       --from-file="rbac-policy.csv"="$dir/resources/config_map/rbac-policy.csv" \

.ibm/pipelines/value_files/values_showcase.yaml

@@ -148,6 +148,8 @@ upstream:
     extraAppConfig:
       - configMapRef: app-config-rhdh
         filename: app-config-rhdh.yaml
+      - configMapRef: dynamic-homepage-and-sidebar-config
+        filename: dynamic-homepage-and-sidebar-config.yaml
     extraEnvVarsSecrets:
       - rhdh-secrets
       - redis-secret

e2e-tests/playwright/e2e/home-page-customization.spec.ts

@@ -0,0 +1,33 @@
+import { test } from "@playwright/test";
+import { UIhelper } from "../utils/ui-helper";
+import { Common } from "../utils/common";
+
+test.describe("Home page customization", () => {
+  let common: Common;
+  let uiHelper: UIhelper;
+
+  test.beforeEach(async ({ page }) => {
+    uiHelper = new UIhelper(page);
+    common = new Common(page);
+    await common.loginAsGuest();
+  });
+
+  test("Verify that home page is customized", async () => {
+    await uiHelper.verifyTextinCard("Quick Access", "Quick Access");
+    await uiHelper.verifyTextinCard(
+      "Your Starred Entities",
+      "Your Starred Entities",
+    );
+    await uiHelper.verifyHeading("Placeholder tests");
+    await uiHelper.verifyDivHasText("Home page customization test 1");
+    await uiHelper.verifyDivHasText("Home page customization test 2");
+    await uiHelper.verifyDivHasText("Home page customization test 3");
+    await uiHelper.verifyHeading("Markdown tests");
+    await uiHelper.verifyTextinCard("Company links", "Company links");
+    await uiHelper.verifyHeading("Important company links");
+    await uiHelper.verifyHeading("RHDH");
+    await uiHelper.verifyTextinCard("Featured Docs", "Featured Docs");
+    await uiHelper.verifyTextinCard("Random Joke", "Random Joke");
+    await uiHelper.clickButton("Reroll");
+  });
+});

e2e-tests/playwright/utils/ui-helper.ts

@@ -84,10 +84,8 @@ export class UIhelper {
     await element.click();
   }
 
-  async verifyDivHasText(divText: string) {
-    await expect(
-      this.page.locator(`div`).filter({ hasText: divText }),
-    ).toBeVisible();
+  async verifyDivHasText(divText: string | RegExp) {
+    await expect(this.page.locator(`div`).getByText(divText)).toBeVisible();
   }
 
   async clickLink(linkText: string) {