OCPBUGS-77561: Fix ConsolePluginStatus icon

Author: logonoff

frontend/packages/console-app/locales/en/console-app.json

@@ -249,13 +249,17 @@
   "Insufficient permissions": "Insufficient permissions",
   "You do not have sufficient permissions to read any cluster configuration.": "You do not have sufficient permissions to read any cluster configuration.",
   "{{section}} not found": "{{section}} not found",
+  "Failed": "Failed",
+  "Loaded": "Loaded",
+  "Pending": "Pending",
   "Disabled": "Disabled",
   "This plugin might have violated the Console Content Security Policy. Refer to the browser's console logs for details.": "This plugin might have violated the Console Content Security Policy. Refer to the browser's console logs for details.",
   "Yes": "Yes",
   "No": "No",
   "Name": "Name",
   "CSP violations": "CSP violations",
   "Console operator spec.managementState is unmanaged. Changes to plugins will have no effect.": "Console operator spec.managementState is unmanaged. Changes to plugins will have no effect.",
+  "Create {{label}}": "Create {{label}}",
   "Console plugins": "Console plugins",
   "Customize": "Customize",
   "console-extensions.json": "console-extensions.json",
@@ -482,7 +486,6 @@
   "Create": "Create",
   "Create by completing the form.": "Create by completing the form.",
   "Create by manually entering YAML or JSON definitions, or by dragging and dropping a file into the editor.": "Create by manually entering YAML or JSON definitions, or by dragging and dropping a file into the editor.",
-  "Create {{label}}": "Create {{label}}",
   "Edit {{label}}": "Edit {{label}}",
   "{helpText}": "{helpText}",
   "Availability": "Availability",
@@ -495,7 +498,6 @@
   "Configure quick starts to help users get started with the cluster.": "Configure quick starts to help users get started with the cluster.",
   "Ask a cluster administrator to configure quick starts.": "Ask a cluster administrator to configure quick starts.",
   "Configure quick starts": "Configure quick starts",
-  "Create {{kind}}": "Create {{kind}}",
   "Learn more about quick starts": "Learn more about quick starts",
   "No results found": "No results found",
   "No results match the filter criteria. Remove filters or clear all filters to show results.": "No results match the filter criteria. Remove filters or clear all filters to show results.",
@@ -582,10 +584,11 @@
   "Source": "Source",
   "VolumeSnapshotContent": "VolumeSnapshotContent",
   "Snapshot content": "Snapshot content",
-  "Pending": "Pending",
   "Error": "Error",
   "Recommended": "Recommended",
   "Container name": "Container name",
   "VerticalPodAutoscalers": "VerticalPodAutoscalers",
-  "No VerticalPodAutoscalers": "No VerticalPodAutoscalers"
+  "No VerticalPodAutoscalers": "No VerticalPodAutoscalers",
+  "ConsoleQuickStart": "ConsoleQuickStart",
+  "ConsoleQuickStarts": "ConsoleQuickStarts"
 }

frontend/packages/console-app/src/components/console-operator/ConsoleOperatorConfig.tsx

@@ -90,21 +90,39 @@ export const useConsoleOperatorConfigData = () => {
 export const ConsolePluginStatus: React.FC<ConsolePluginStatusProps> = ({
   status,
   errorMessage,
-}) => <Status status={status} title={status === 'failed' ? errorMessage : undefined} />;
+}) => {
+  const { t } = useTranslation('console-app');
+
+  const pluginStatusTitles = React.useMemo<Record<PluginInfoEntry['status'], string>>(
+    () => ({
+      failed: t('Failed'),
+      loaded: t('Loaded'),
+      pending: t('Pending'),
+    }),
+    [t],
+  );
+
+  return (
+    <Status
+      status={status}
+      title={status === 'failed' ? errorMessage : pluginStatusTitles[status]}
+    />
+  );
+};
 
 export const ConsolePluginEnabledStatus: React.FC<ConsolePluginEnabledStatusProps> = ({
   pluginName,
   enabled,
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('console-app');
 
   const {
     consoleOperatorConfig,
     consoleOperatorConfigLoaded,
     canPatchConsoleOperatorConfig,
   } = useConsoleOperatorConfigData();
 
-  const labels = enabled ? t('console-app~Enabled') : t('console-app~Disabled');
+  const labels = enabled ? t('Enabled') : t('Disabled');
 
   return (
     <>
@@ -136,27 +154,27 @@ export const ConsolePluginEnabledStatus: React.FC<ConsolePluginEnabledStatusProp
 export const ConsolePluginCSPStatus: React.FC<ConsolePluginCSPStatusProps> = ({
   hasViolations,
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('console-app');
 
   return hasViolations ? (
     <>
       <YellowExclamationTriangleIcon
         className="co-icon-space-r"
         title={t(
-          "console-app~This plugin might have violated the Console Content Security Policy. Refer to the browser's console logs for details.",
+          "This plugin might have violated the Console Content Security Policy. Refer to the browser's console logs for details.",
         )}
       />{' '}
-      {t('console-app~Yes')}
+      {t('Yes')}
     </>
   ) : (
     <>
-      <GreenCheckCircleIcon className="co-icon-space-r" /> {t('console-app~No')}
+      <GreenCheckCircleIcon className="co-icon-space-r" /> {t('No')}
     </>
   );
 };
 
 const ConsolePluginsTable: React.FC<ConsolePluginsTableProps> = ({ obj, rows }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('console-app');
 
   const [sortBy, setSortBy] = React.useState<ISortBy>(() => ({
     index: 0,
@@ -171,30 +189,30 @@ const ConsolePluginsTable: React.FC<ConsolePluginsTableProps> = ({ obj, rows })
     () => [
       {
         id: 'name',
-        name: t('console-app~Name'),
+        name: t('Name'),
         sortable: true,
       },
       {
         id: 'version',
-        name: t('console-app~Version'),
+        name: t('Version'),
       },
       {
         id: 'description',
-        name: t('console-app~Description'),
+        name: t('Description'),
       },
       {
         id: 'status',
-        name: t('console-app~Status'),
+        name: t('Status'),
         sortable: true,
       },
       {
         id: 'enabled',
-        name: t('console-app~Enabled'),
+        name: t('Enabled'),
         sortable: true,
       },
       {
         id: 'csp-violations',
-        name: t('console-app~CSP violations'),
+        name: t('CSP violations'),
       },
     ],
     [t],
@@ -227,15 +245,15 @@ const ConsolePluginsTable: React.FC<ConsolePluginsTableProps> = ({ obj, rows })
           variant="info"
           isInline
           title={t(
-            'console-app~Console operator spec.managementState is unmanaged. Changes to plugins will have no effect.',
+            'Console operator spec.managementState is unmanaged. Changes to plugins will have no effect.',
           )}
         />
       )}
       <RequireCreatePermission model={ConsolePluginModel}>
         <div className="co-m-pane__createLink--no-title">
           <Link to={`/k8s/cluster/${consolePluginConcatenatedGVK}/~new`}>
             <Button variant="primary" id="yaml-create" data-test="item-create">
-              {t('public~Create {{label}}', { label: t(ConsolePluginModel.label) })}
+              {t('Create {{label}}', { label: t(ConsolePluginModel.labelKey) })}
             </Button>
           </Link>
         </div>
@@ -287,7 +305,7 @@ const ConsolePluginsTable: React.FC<ConsolePluginsTableProps> = ({ obj, rows })
           </Tbody>
         </Table>
       ) : (
-        <EmptyBox label={t('console-app~Console plugins')} />
+        <EmptyBox label={t('Console plugins')} />
       )}
     </PaneBody>
   );

frontend/packages/console-app/src/components/quick-starts/QuickStartEmptyState.tsx

@@ -58,7 +58,7 @@ export const QuickStartEmptyState = () => {
                   variant="link"
                   component={LinkTo(`/k8s/cluster/${getReferenceForModel(QuickStartModel)}/~new`)}
                 >
-                  {t('Create {{kind}}', { kind: QuickStartModel.kind })}
+                  {t('Create {{label}}', { label: t(QuickStartModel.labelKey) })}
                 </Button>
                 <ExternalLinkButton
                   variant="link"

frontend/packages/console-app/src/models/index.ts

@@ -3,7 +3,11 @@ import { K8sKind } from '@console/internal/module/k8s';
 export const QuickStartModel: K8sKind = {
   kind: 'ConsoleQuickStart',
   label: 'ConsoleQuickStart',
+  // t('console-app~ConsoleQuickStart')
+  labelKey: 'console-app~ConsoleQuickStart',
   labelPlural: 'ConsoleQuickStarts',
+  // t('console-app~ConsoleQuickStarts')
+  labelPluralKey: 'console-app~ConsoleQuickStarts',
   apiGroup: 'console.openshift.io',
   apiVersion: 'v1',
   abbr: 'CQS',

frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/Status.tsx

@@ -47,6 +47,7 @@ const Status: React.FC<StatusProps> = ({
       return <StatusIconAndText {...statusProps} icon={<HourglassStartIcon />} />;
 
     case 'Pending':
+    case 'pending':
       return <StatusIconAndText {...statusProps} icon={<HourglassHalfIcon />} />;
 
     case 'Planning':
@@ -88,6 +89,7 @@ const Status: React.FC<StatusProps> = ({
     case 'ErrImagePull':
     case 'Error':
     case 'Failed':
+    case 'failed':
     case 'Failure':
     case 'ImagePullBackOff':
     case 'InstallCheckFailed':
@@ -107,6 +109,7 @@ const Status: React.FC<StatusProps> = ({
     case 'Ready':
     case 'Up to date':
     case 'Loaded':
+    case 'loaded':
     case 'Provisioned as node':
     case 'Preferred':
     case 'Connected':

frontend/packages/integration-tests-cypress/tests/app/demo-dynamic-plugin.cy.ts

@@ -54,7 +54,7 @@ const enableDemoPlugin = (enable: boolean) => {
     });
   cy.log(`Running plugin test on ci using PLUGIN_PULL_SPEC: ${PLUGIN_PULL_SPEC}`);
   cy.byTestID(`${PLUGIN_NAME}-status`)
-    .should('include.text', enable ? 'loaded' : '-')
+    .should('include.text', enable ? 'Loaded' : '-')
     .then(() => {
       if (!enable) {
         cy.byLegacyTestID(PLUGIN_NAME).click();