Merge pull request #11852 from debsmita1/phcr-display-name

Bug 2106366, Bug 2106377: Use displayname for PHCR in the catalog page

frontend/packages/dev-console/integration-tests/features/addFlow/helm-chart-repositories.feature

@@ -38,14 +38,24 @@ Feature: Install the Helm Release
               And user enters Description as "test"
               And user enters URL as "https://raw.githubusercontent.com/IBM/charts/master/repo/community/index.yaml"
               And user clicks on Create button
-             Then user can see "helm-test1" under Chart Repositories in Helm Charts catalog page
+             Then user can see "helm-test1" for resource "helm-test1" and type "projecthelmchartrepository" under Chart Repositories in Helm Charts catalog page
+
+        @regression  @odc-6685
+        Scenario: Add namespaced helm chart repository with a display name: A-12-TC05
+            Given user is at Create Helm Chart Repository page
+             When user enters Chart repository name as "helm-test1"
+              And user enters Display name as "My Helm Charts"
+              And user enters Description as "test"
+              And user enters URL as "https://raw.githubusercontent.com/IBM/charts/master/repo/community/index.yaml"
+              And user clicks on Create button
+             Then user can see "My Helm Charts" for resource "helm-test1" and type "projecthelmchartrepository" under Chart Repositories in Helm Charts catalog page
 
         @regression
-        Scenario: Add cluster-scoped helm chart repository using a form: A-12-TC05
+        Scenario: Add cluster-scoped helm chart repository using a form: A-12-TC06
             Given user is at Create Helm Chart Repository page
              When user selects cluster-scoped scope type
               And user enters Chart repository name as "helm-test2"
               And user enters Description as "test"
               And user enters URL as "https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs/index.yaml"
               And user clicks on Create button
-             Then user can see "helm-test2" under Chart Repositories in Helm Charts catalog page
+             Then user can see "helm-test2" for resource "helm-test2" and type "helmchartrepository" under Chart Repositories in Helm Charts catalog page

frontend/packages/dev-console/integration-tests/support/pageObjects/add-flow-po.ts

@@ -357,6 +357,7 @@ export const helmChartRepositoriesPO = {
   formTitle: '[data-test="form-title"]',
   cancelButton: '[data-test-id="cancel-button"]',
   name: '#form-input-formData-repoName-field',
+  displayName: '#form-input-formData-repoDisplayName-field',
   description: '#form-input-formData-repoDescription-field',
   url: '#form-input-formData-repoUrl-field',
 };

frontend/packages/dev-console/integration-tests/support/pageObjects/global-po.ts

@@ -40,6 +40,7 @@ export const formPO = {
   save: '[data-test="save-changes"]',
   errorAlert: '[aria-label="Danger Alert"]',
   successAlert: '[aria-label="Success Alert"]',
+  confirm: '[data-test="confirm-action"]',
 };
 export const alert = '.pf-c-alert';
 export const pagePO = {

frontend/packages/dev-console/integration-tests/support/pages/add-flow/helm-chart-repository.ts

@@ -0,0 +1,31 @@
+import { createForm } from '..';
+import { devNavigationMenuPO } from '../../pageObjects';
+
+export const filterByName = (name: string) => {
+  cy.get('#toggle-id').click();
+  cy.byTestID('name-filter').click();
+  cy.byLegacyTestID('item-filter').type(name);
+  cy.byLegacyTestID('kebab-button').click();
+};
+
+export const helmChartRepository = {
+  deleteChartRepository: (name: string, type: string) => {
+    cy.log(`Deleting ${type} ${name}`);
+    cy.get(devNavigationMenuPO.search).click();
+    cy.get('[aria-label="Options menu"]').click();
+    cy.get('[placeholder="Select Resource"]')
+      .should('be.visible')
+      .type(type);
+    if (type === 'projecthelmchartrepository') {
+      cy.get('[data-filter-text="PHCRProjectHelmChartRepository"]').click();
+      filterByName(name);
+      cy.byTestActionID('Delete Project Helm Chart Repository').click();
+    } else {
+      cy.get('[data-filter-text="HCRHelmChartRepository"]').click();
+      filterByName(name);
+      cy.byTestActionID('Delete Helm Chart Repository').click();
+    }
+    createForm.clickConfirm();
+    cy.byTestID('empty-message').should('be.visible');
+  },
+};

frontend/packages/dev-console/integration-tests/support/pages/app.ts

@@ -355,6 +355,11 @@ export const createForm = {
       .get(formPO.save)
       .should('be.enabled')
       .click(),
+  clickConfirm: () =>
+    cy
+      .get(formPO.confirm)
+      .should('be.enabled')
+      .click(),
   sectionTitleShouldContain: (sectionTitle: string) =>
     cy.get(gitPO.sectionTitle).should('have.text', sectionTitle),
 };

frontend/packages/dev-console/integration-tests/support/step-definitions/addFlow/helm-chart-repositories.ts

@@ -2,6 +2,7 @@ import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
 import { addOptions, devNavigationMenu } from '../../constants';
 import { addPagePO, helmChartRepositoriesPO } from '../../pageObjects';
 import { addPage, createForm, navigateTo } from '../../pages';
+import { helmChartRepository } from '../../pages/add-flow/helm-chart-repository';
 
 Given('user is at Add page', () => {
   navigateTo(devNavigationMenu.Add);
@@ -72,6 +73,14 @@ When('user enters Chart repository name as {string}', (name: string) => {
     .type(name);
 });
 
+When('user enters Display name as {string}', (displayName: string) => {
+  cy.get(helmChartRepositoriesPO.displayName)
+    .scrollIntoView()
+    .should('be.visible')
+    .clear()
+    .type(displayName);
+});
+
 When('user enters Description as {string}', (description: string) => {
   cy.get(helmChartRepositoriesPO.description)
     .scrollIntoView()
@@ -93,9 +102,14 @@ When('user clicks on Create button', () => {
 });
 
 Then(
-  'user can see {string} under Chart Repositories in Helm Charts catalog page',
-  (projectHelmChartRepositories: string) => {
-    const projectHelmRepo = projectHelmChartRepositories.replace(/([A-Z,a-z]+)([0-9])/g, '$1-$2');
-    cy.get(`[data-test="chartRepositoryTitle-${projectHelmRepo}"]`).should('be.visible');
+  'user can see {string} for resource {string} and type {string} under Chart Repositories in Helm Charts catalog page',
+  (repo: string, resourceName: string, type: string) => {
+    let helmRepo = repo
+      .toLowerCase()
+      .split(' ')
+      .join('-');
+    helmRepo = helmRepo.replace(/([A-Z,a-z]+)([0-9])/g, '$1-$2');
+    cy.get(`[data-test="chartRepositoryTitle-${helmRepo}"]`).should('be.visible');
+    helmChartRepository.deleteChartRepository(resourceName, type);
   },
 );

frontend/packages/helm-plugin/src/catalog/providers/useHelmCharts.tsx

@@ -1,15 +1,19 @@
 import * as React from 'react';
 import { safeLoad } from 'js-yaml';
 import { useTranslation } from 'react-i18next';
-import { ExtensionHook, CatalogItem, WatchK8sResource } from '@console/dynamic-plugin-sdk';
+import { ExtensionHook, CatalogItem, WatchK8sResults } from '@console/dynamic-plugin-sdk';
 import { coFetch } from '@console/internal/co-fetch';
-import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
+import { useK8sWatchResources } from '@console/internal/components/utils/k8s-watch-hook';
 import { K8sResourceKind, referenceForModel } from '@console/internal/module/k8s';
 import { APIError, useActiveNamespace } from '@console/shared';
-import { HelmChartRepositoryModel } from '../../models';
+import { HelmChartRepositoryModel, ProjectHelmChartRepositoryModel } from '../../models';
 import { HelmChartEntries } from '../../types/helm-types';
 import { normalizeHelmCharts } from '../utils/catalog-utils';
 
+type WatchResource = {
+  [key: string]: K8sResourceKind[];
+};
+
 const useHelmCharts: ExtensionHook<CatalogItem[]> = ({
   namespace,
 }): [CatalogItem[], boolean, any] => {
@@ -18,15 +22,29 @@ const useHelmCharts: ExtensionHook<CatalogItem[]> = ({
   const [helmCharts, setHelmCharts] = React.useState<HelmChartEntries>();
   const [loadedError, setLoadedError] = React.useState<APIError>();
 
-  const resourceSelector: WatchK8sResource = {
-    isList: true,
-    kind: referenceForModel(HelmChartRepositoryModel),
-  };
+  const resourceSelector = React.useMemo(
+    () => ({
+      hcrs: {
+        isList: true,
+        kind: referenceForModel(HelmChartRepositoryModel),
+      },
+      phcrs: {
+        isList: true,
+        kind: referenceForModel(ProjectHelmChartRepositoryModel),
+        namespace,
+      },
+    }),
+    [namespace],
+  );
 
-  const [chartRepositories, chartRepositoriesLoaded] = useK8sWatchResource<K8sResourceKind[]>(
+  const chartRepositories: WatchK8sResults<WatchResource> = useK8sWatchResources<WatchResource>(
     resourceSelector,
   );
 
+  const chartRepositoriesLoaded =
+    Object.keys(chartRepositories).length > 0 &&
+    Object.values(chartRepositories).some((value) => value.loaded || !!value.loadError);
+
   React.useEffect(() => {
     let mounted = true;
     coFetch(`/api/helm/charts/index.yaml?namespace=${activeNamespace}`)
@@ -47,7 +65,13 @@ const useHelmCharts: ExtensionHook<CatalogItem[]> = ({
   }, [activeNamespace]);
 
   const normalizedHelmCharts: CatalogItem[] = React.useMemo(
-    () => normalizeHelmCharts(helmCharts, chartRepositories, namespace, t),
+    () =>
+      normalizeHelmCharts(
+        helmCharts,
+        [...chartRepositories?.hcrs?.data, ...chartRepositories?.phcrs?.data],
+        namespace,
+        t,
+      ),
     [chartRepositories, helmCharts, namespace, t],
   );
 

frontend/public/components/search-filter-dropdown.tsx

@@ -25,10 +25,20 @@ export const SearchFilterDropdown: React.SFC<SearchFilterDropdownProps> = (props
     setOpen(!isOpen);
   };
   const dropdownItems = [
-    <DropdownItem key="label-action" name={searchFilterValues.Label} component="button">
+    <DropdownItem
+      key="label-action"
+      data-test="label-filter"
+      name={searchFilterValues.Label}
+      component="button"
+    >
       {t(searchFilterValues.Label)}
     </DropdownItem>,
-    <DropdownItem key="name-action" name={searchFilterValues.Name} component="button">
+    <DropdownItem
+      key="name-action"
+      data-test="name-filter"
+      name={searchFilterValues.Name}
+      component="button"
+    >
       {t(searchFilterValues.Name)}
     </DropdownItem>,
   ];