From 8b46bcbdffc15f1aa0346d3ec83cd397d967c03c Mon Sep 17 00:00:00 2001
From: Nico Finkernagel <nfinkern@redhat.com>
Date: Thu, 16 Dec 2021 11:27:48 +0100
Subject: [PATCH] implementing feedback from @serenamarie125

---
 frontend/@types/console/index.d.ts                  | 13 ++++++++++++-
 .../src/extensions/catalog.ts                       |  2 ++
 .../src/utils/error/http-error.ts                   |  6 ++----
 .../catalog/service/CatalogServiceProvider.tsx      | 11 +++++++++--
 .../packages/dev-console/console-extensions.json    |  5 +++++
 .../packages/helm-plugin/console-extensions.json    |  1 +
 .../packages/knative-plugin/console-extensions.json |  2 ++
 .../kubevirt-plugin/console-extensions.json         |  1 +
 .../kubevirt-plugin/locales/en/kubevirt-plugin.json |  1 +
 .../console-extensions.json                         |  1 +
 .../operator-lifecycle-manager/locales/en/olm.json  |  1 +
 .../pipelines-plugin/console-extensions.json        |  2 ++
 .../packages/rhoas-plugin/console-extensions.json   |  1 +
 .../rhoas-plugin/locales/en/rhoas-plugin.json       |  1 +
 .../components/utils/__tests__/status-box.spec.tsx  | 10 ++++++++--
 frontend/public/components/utils/status-box.tsx     | 10 ++++++++--
 frontend/public/locales/en/public.json              |  2 +-
 17 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/frontend/@types/console/index.d.ts b/frontend/@types/console/index.d.ts
index ff07ea7bac3..f303b6fdc86 100644
--- a/frontend/@types/console/index.d.ts
+++ b/frontend/@types/console/index.d.ts
@@ -57,8 +57,19 @@ declare interface Window {
   Cypress?: {};
 }
 
-// TODO: Remove when upgrading to TypeScript 4.1.2+, which has a type for RelativeTimeFormat.
+// TODO: Remove when upgrading to TypeScript 4.1.2+, which has a type for ListFormat and RelativeTimeFormat.
 declare namespace Intl {
+  type ListFormatOptions = {
+    localeMatcher: string;
+    type: string;
+    style: string;
+  };
+
+  class ListFormat {
+    constructor(locales?: Locale | string | undefined, options?: Partial<ListFormatOptions>);
+    public format(list?: Iterable<string>): string;
+  }
+
   class RelativeTimeFormat {
     constructor(locale: string);
     format(n: number, unit: string);
diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/extensions/catalog.ts b/frontend/packages/console-dynamic-plugin-sdk/src/extensions/catalog.ts
index 542563826c0..fb1e081df68 100644
--- a/frontend/packages/console-dynamic-plugin-sdk/src/extensions/catalog.ts
+++ b/frontend/packages/console-dynamic-plugin-sdk/src/extensions/catalog.ts
@@ -27,6 +27,8 @@ export type CatalogItemProvider = ExtensionDeclaration<
     catalogId: string | string[];
     /** Type ID for the catalog item type. */
     type: string;
+    /** Title for the catalog item provider */
+    title: string;
     /** Fetch items and normalize it for the catalog. Value is a react effect hook. */
     provider: CodeRef<ExtensionHook<CatalogItem[], CatalogExtensionHookOptions>>;
     /** Priority for this provider. Defaults to 0. Higher priority providers may override catalog
diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/utils/error/http-error.ts b/frontend/packages/console-dynamic-plugin-sdk/src/utils/error/http-error.ts
index aa7c501f2f2..f245f13cea9 100644
--- a/frontend/packages/console-dynamic-plugin-sdk/src/utils/error/http-error.ts
+++ b/frontend/packages/console-dynamic-plugin-sdk/src/utils/error/http-error.ts
@@ -64,10 +64,8 @@ export class TimeoutError extends CustomError {
 }
 
 export class IncompleteDataError extends CustomError {
-  public constructor(public successfulCalls: number, public totalCalls: number) {
-    super(
-      `Only ${successfulCalls} of ${totalCalls} resources loaded. Some data might not be displayed.`,
-    );
+  public constructor(public labels: string[]) {
+    super(`Could not fetch all data. This data are missing: ${labels.join(', ')}.`);
   }
 }
 
diff --git a/frontend/packages/console-shared/src/components/catalog/service/CatalogServiceProvider.tsx b/frontend/packages/console-shared/src/components/catalog/service/CatalogServiceProvider.tsx
index 5eb5b97d032..dad5c46503b 100644
--- a/frontend/packages/console-shared/src/components/catalog/service/CatalogServiceProvider.tsx
+++ b/frontend/packages/console-shared/src/components/catalog/service/CatalogServiceProvider.tsx
@@ -86,7 +86,14 @@ const CatalogServiceProvider: React.FC<CatalogServiceProviderProps> = ({
     return result;
   }, [catalogProviderExtensions, catalogItems]);
 
-  const successfulCalls = catalogProviderExtensions.filter(({ uid }) => extItemsMap[uid]).length;
+  const failedExtensions = [
+    ...new Set(
+      catalogProviderExtensions
+        .filter(({ uid }) => extItemsErrorMap[uid])
+        .map((e) => e.properties.title),
+    ),
+  ];
+
   const failedCalls = catalogProviderExtensions.filter(({ uid }) => extItemsErrorMap[uid]).length;
   const totalCalls = catalogProviderExtensions.length;
   const loadError =
@@ -94,7 +101,7 @@ const CatalogServiceProvider: React.FC<CatalogServiceProviderProps> = ({
       ? null
       : failedCalls === totalCalls
       ? new Error('failed loading catalog data')
-      : new IncompleteDataError(successfulCalls, totalCalls);
+      : new IncompleteDataError(failedExtensions);
 
   const catalogService: CatalogService = {
     type: catalogType,
diff --git a/frontend/packages/dev-console/console-extensions.json b/frontend/packages/dev-console/console-extensions.json
index 7cc42e4cdb8..e17f7ca8e67 100644
--- a/frontend/packages/dev-console/console-extensions.json
+++ b/frontend/packages/dev-console/console-extensions.json
@@ -218,6 +218,7 @@
     "properties": {
       "catalogId": "dev-catalog",
       "type": "BuilderImage",
+      "title": "%devconsole~Builder Images%",
       "provider": { "$codeRef": "catalog.builderImageProvider" }
     },
     "flags": {
@@ -241,6 +242,7 @@
     "properties": {
       "catalogId": "dev-catalog",
       "type": "Template",
+      "title": "%devconsole~Templates%",
       "provider": { "$codeRef": "catalog.templateProvider" }
     },
     "flags": {
@@ -264,6 +266,7 @@
     "properties": {
       "catalogId": "dev-catalog",
       "type": "Devfile",
+      "title": "%devconsole~Devfiles%",
       "provider": { "$codeRef": "catalog.devfileProvider" }
     },
     "flags": {
@@ -285,6 +288,7 @@
     "properties": {
       "catalogId": "samples-catalog",
       "type": "Sample",
+      "title": "%devconsole~Builder Images%",
       "provider": { "$codeRef": "catalog.builderImageSamplesProvider" }
     },
     "flags": {
@@ -296,6 +300,7 @@
     "properties": {
       "catalogId": "samples-catalog",
       "type": "Sample",
+      "title": "%devconsole~Devfiles%",
       "provider": { "$codeRef": "catalog.devfileSamplesProvider" }
     },
     "flags": {
diff --git a/frontend/packages/helm-plugin/console-extensions.json b/frontend/packages/helm-plugin/console-extensions.json
index e14db5f1301..9ca5d098d63 100644
--- a/frontend/packages/helm-plugin/console-extensions.json
+++ b/frontend/packages/helm-plugin/console-extensions.json
@@ -125,6 +125,7 @@
     "properties": {
       "catalogId": "dev-catalog",
       "type": "HelmChart",
+      "title": "%helm-plugin~Helm Charts%",
       "provider": { "$codeRef": "helmCatalog.helmChartProvider" }
     },
     "flags": {
diff --git a/frontend/packages/knative-plugin/console-extensions.json b/frontend/packages/knative-plugin/console-extensions.json
index aa271a8f514..cabfb958cbd 100644
--- a/frontend/packages/knative-plugin/console-extensions.json
+++ b/frontend/packages/knative-plugin/console-extensions.json
@@ -485,6 +485,7 @@
     "properties": {
       "catalogId": "dev-catalog",
       "type": "EventSource",
+      "title": "%knative-plugin~Event Sources%",
       "provider": { "$codeRef": "catalog.eventSourceProvider" }
     },
     "flags": {
@@ -496,6 +497,7 @@
     "properties": {
       "catalogId": "dev-catalog",
       "type": "EventSource",
+      "title": "%knative-plugin~Event Sources%",
       "provider": { "$codeRef": "catalog.kameletsProvider" }
     },
     "flags": {
diff --git a/frontend/packages/kubevirt-plugin/console-extensions.json b/frontend/packages/kubevirt-plugin/console-extensions.json
index 33cd436ccc0..0d6135f51bd 100644
--- a/frontend/packages/kubevirt-plugin/console-extensions.json
+++ b/frontend/packages/kubevirt-plugin/console-extensions.json
@@ -284,6 +284,7 @@
     "properties": {
       "catalogId": "dev-catalog",
       "type": "VmTemplate",
+      "title": "%kubevirt-plugin~VM templates%",
       "provider": { "$codeRef": "createVM.catalogVMTemplateProvider" }
     },
     "flags": {
diff --git a/frontend/packages/kubevirt-plugin/locales/en/kubevirt-plugin.json b/frontend/packages/kubevirt-plugin/locales/en/kubevirt-plugin.json
index d6560fd70e9..e78f63068c3 100644
--- a/frontend/packages/kubevirt-plugin/locales/en/kubevirt-plugin.json
+++ b/frontend/packages/kubevirt-plugin/locales/en/kubevirt-plugin.json
@@ -8,6 +8,7 @@
   "Quickly create a virtual machine from a template.": "Quickly create a virtual machine from a template.",
   "**Virtual Machines** have templates for quickly creating a virtual machine.": "**Virtual Machines** have templates for quickly creating a virtual machine.",
   "Template Providers": "Template Providers",
+  "VM templates": "VM templates",
   "With Data upload form": "With Data upload form",
   "Hardware Devices": "Hardware Devices",
   "Add": "Add",
diff --git a/frontend/packages/operator-lifecycle-manager/console-extensions.json b/frontend/packages/operator-lifecycle-manager/console-extensions.json
index 4f89ef87d51..e0b7d77740b 100644
--- a/frontend/packages/operator-lifecycle-manager/console-extensions.json
+++ b/frontend/packages/operator-lifecycle-manager/console-extensions.json
@@ -22,6 +22,7 @@
     "properties": {
       "catalogId": "dev-catalog",
       "type": "OperatorBackedService",
+      "title": "%olm~Operator Backed Services%",
       "provider": { "$codeRef": "utils.catalogCSVProvider" }
     },
     "flags": {
diff --git a/frontend/packages/operator-lifecycle-manager/locales/en/olm.json b/frontend/packages/operator-lifecycle-manager/locales/en/olm.json
index 29a8956db11..897d0d25b18 100644
--- a/frontend/packages/operator-lifecycle-manager/locales/en/olm.json
+++ b/frontend/packages/operator-lifecycle-manager/locales/en/olm.json
@@ -2,6 +2,7 @@
   "Operator Backed": "Operator Backed",
   "Browse for a variety of managed services that are installed by cluster administrators. Cluster administrators can customize the content made available in the catalog.": "Browse for a variety of managed services that are installed by cluster administrators. Cluster administrators can customize the content made available in the catalog.",
   "**Operator backed** includes a variety of services managed by Kubernetes controllers.": "**Operator backed** includes a variety of services managed by Kubernetes controllers.",
+  "Operator Backed Services": "Operator Backed Services",
   "OperatorHub": "OperatorHub",
   "Installed Operators": "Installed Operators",
   "Edit {{item}}": "Edit {{item}}",
diff --git a/frontend/packages/pipelines-plugin/console-extensions.json b/frontend/packages/pipelines-plugin/console-extensions.json
index e7e0c37a788..cbf7fadbcf6 100644
--- a/frontend/packages/pipelines-plugin/console-extensions.json
+++ b/frontend/packages/pipelines-plugin/console-extensions.json
@@ -704,6 +704,7 @@
     "properties": {
       "catalogId": "pipelines-task-catalog",
       "type": "Red Hat",
+      "title": "%pipelines-plugin~Tasks%",
       "provider": { "$codeRef": "catalog.TektonTaskProvider" }
     },
     "flags": {
@@ -715,6 +716,7 @@
     "properties": {
       "catalogId": "pipelines-task-catalog",
       "type": "Community",
+      "title": "%pipelines-plugin~Tasks%",
       "provider": { "$codeRef": "catalog.TektonHubTaskProvider" }
     },
     "flags": {
diff --git a/frontend/packages/rhoas-plugin/console-extensions.json b/frontend/packages/rhoas-plugin/console-extensions.json
index 1eda826daaa..56beafc4808 100644
--- a/frontend/packages/rhoas-plugin/console-extensions.json
+++ b/frontend/packages/rhoas-plugin/console-extensions.json
@@ -97,6 +97,7 @@
     "properties": {
       "catalogId": "dev-catalog",
       "type": "managedservices",
+      "title": "%rhoas-plugin~Application Services%",
       "provider": { "$codeRef": "catalog.rhoasProvider" }
     },
     "flags": {
diff --git a/frontend/packages/rhoas-plugin/locales/en/rhoas-plugin.json b/frontend/packages/rhoas-plugin/locales/en/rhoas-plugin.json
index a61229b3785..8e2e61270b5 100644
--- a/frontend/packages/rhoas-plugin/locales/en/rhoas-plugin.json
+++ b/frontend/packages/rhoas-plugin/locales/en/rhoas-plugin.json
@@ -8,6 +8,7 @@
   "Managed Services": "Managed Services",
   "Discover managed services to simplify deployments and reduce operational overhead & complexities": "Discover managed services to simplify deployments and reduce operational overhead & complexities",
   "Browse managed services to connect applications and microservices to support services to create a full solution.": "Browse managed services to connect applications and microservices to support services to create a full solution.",
+  "Application Services": "Application Services",
   "Create a Kafka connector": "Create a Kafka connector",
   "Unlock with token": "Unlock with token",
   "Unlocked": "Unlocked",
diff --git a/frontend/public/components/utils/__tests__/status-box.spec.tsx b/frontend/public/components/utils/__tests__/status-box.spec.tsx
index 6cc5494e0ec..e09dfbb79ec 100644
--- a/frontend/public/components/utils/__tests__/status-box.spec.tsx
+++ b/frontend/public/components/utils/__tests__/status-box.spec.tsx
@@ -123,12 +123,18 @@ describe('StatusBox', () => {
 
   it('should render a patternfly alert together with its children when an IncompleteDataError occured', () => {
     const { getByText } = render(
-      <StatusBox loaded data={[{}]} loadError={new IncompleteDataError(1, 5)}>
+      <StatusBox
+        loaded
+        data={[{}]}
+        loadError={new IncompleteDataError(['Test', 'RedHat', 'Hello World'])}
+      >
         my-children
       </StatusBox>,
     );
 
-    getByText('Only 1 of 5 resources loaded. Some data might not be displayed.');
+    getByText(
+      'Test, RedHat, and Hello World content is not available in the catalog at this time due to loading failures.',
+    );
     getByText('my-children');
   });
 
diff --git a/frontend/public/components/utils/status-box.tsx b/frontend/public/components/utils/status-box.tsx
index 59640d197b4..dab6a14627e 100644
--- a/frontend/public/components/utils/status-box.tsx
+++ b/frontend/public/components/utils/status-box.tsx
@@ -8,6 +8,7 @@ import {
   TimeoutError,
 } from '@console/dynamic-plugin-sdk/src/utils/error/http-error';
 import * as restrictedSignImg from '../../imgs/restricted-sign.svg';
+import { getLastLanguage } from '@console/app/src/components/user-preferences/language/getLastLanguage';
 
 export const Box: React.FC<BoxProps> = ({ children, className }) => (
   <div className={classNames('cos-status-box', className)}>{children}</div>
@@ -176,8 +177,13 @@ export const StatusBox: React.FC<StatusBoxProps> = (props) => {
             variant="info"
             isInline
             title={t(
-              'public~Only {{successfulCalls}} of {{totalCalls}} resources loaded. Some data might not be displayed.',
-              { successfulCalls: loadError.successfulCalls, totalCalls: loadError.totalCalls },
+              'public~{{labels}} content is not available in the catalog at this time due to loading failures.',
+              {
+                labels: new Intl.ListFormat(getLastLanguage() || 'en', {
+                  style: 'long',
+                  type: 'conjunction',
+                }).format(loadError.labels),
+              },
             )}
           />
           {props.children}
diff --git a/frontend/public/locales/en/public.json b/frontend/public/locales/en/public.json
index b5f9b3ea61e..2b439acbecc 100644
--- a/frontend/public/locales/en/public.json
+++ b/frontend/public/locales/en/public.json
@@ -1691,7 +1691,7 @@
   "You don't have access to this section due to cluster policy.": "You don't have access to this section due to cluster policy.",
   "Error details": "Error details",
   "404: Not Found": "404: Not Found",
-  "Only {{successfulCalls}} of {{totalCalls}} resources loaded. Some data might not be displayed.": "Only {{successfulCalls}} of {{totalCalls}} resources loaded. Some data might not be displayed.",
+  "{{labels}} content is not available in the catalog at this time due to loading failures.": "{{labels}} content is not available in the catalog at this time due to loading failures.",
   "Timed out fetching new data. The data below is stale.": "Timed out fetching new data. The data below is stale.",
   "No default StorageClass": "No default StorageClass",
   "Select StorageClass": "Select StorageClass",