implementing feedback from @serenamarie125

jeremyary · Dec 17, 2021 · 8b46bcb · 8b46bcb
1 parent 9a80951
commit 8b46bcb
Show file tree

Hide file tree

Showing 17 changed files with 58 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -86,15 +86,22 @@ 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 =
  !loaded || failedCalls === 0
  ? 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",