Changes based on Atif's review; Update SDK version

Signed-off-by: Keith Chong <kykchong@redhat.com>

Author: keithchong

package.json

@@ -17,9 +17,9 @@
   },
   "devDependencies": {
     "@dagrejs/dagre": "^1.1.8",
-    "@openshift-console/dynamic-plugin-sdk": "^4.19.0-prerelease.2",
-    "@openshift-console/dynamic-plugin-sdk-internal": "^4.19.0-prerelease.2",
-    "@openshift-console/dynamic-plugin-sdk-webpack": "^4.19.0-prerelease.2",
+    "@openshift-console/dynamic-plugin-sdk": "^4.19.1",
+    "@openshift-console/dynamic-plugin-sdk-internal": "^4.19.1",
+    "@openshift-console/dynamic-plugin-sdk-webpack": "^4.19.1",
     "@openshift-console/plugin-shared": "^0.0.3",
     "@patternfly/quickstarts": "^6.4.0",
     "@patternfly/react-charts": "^8.4.0",

src/gitops/Statuses/SyncStatus.tsx

@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-  OutOfSyncIcon,
-  SyncUnknownIcon,
-} from 'src/gitops/utils/components/Icons/Icons';
+import { OutOfSyncIcon, SyncUnknownIcon } from 'src/gitops/utils/components/Icons/Icons';
 import { SyncStatus as SS } from 'src/gitops/utils/constants';
 
 import { GreenCheckCircleIcon } from '@openshift-console/dynamic-plugin-sdk';

src/gitops/components/application/graph/ApplicationGraphView.tsx

@@ -198,8 +198,14 @@ const customComponentFactory =
             } else if (label === t('Delete Application')) {
               launchDeleteModal();
             } else if (
-              label === 'Show ' + graphElement.getData().kindPlural ||
-              label === 'Hide ' + graphElement.getData().kindPlural
+              label ===
+                t('Show {{x}}', {
+                  x: graphElement.getData().kindPlural,
+                }) ||
+              label ===
+                t('Hide {{x}}', {
+                  x: graphElement.getData().kindPlural,
+                })
             ) {
               const key = graphElement.getData().kindPlural;
               setGroupNodeStates((prev) => {
@@ -382,7 +388,7 @@ export const ApplicationGraphView: React.FC<{
       graph: {
         id: 'g1',
         type: 'graph',
-        layout: 'PipleineDagreLayout',
+        layout: 'Dagre',
       },
     };
 

src/gitops/components/application/graph/graph-utils.tsx

@@ -64,7 +64,7 @@ const createApplicationNode = (application: ApplicationKind): NodeModel => {
       ),
       rank: 0,
       nodeStatus: nodeStatus,
-      reourceHealthStatus: application?.status?.health?.status,
+      resourceHealthStatus: application?.status?.health?.status,
       appHealthStatus: application?.status?.health?.status,
       syncStatus: application?.status?.sync?.status,
     },
@@ -304,14 +304,14 @@ export const getInitialNodes = (
     // Spacer node to the right of the application node. Fixed.
     initialNodes.push(createSpacerNode(1, 'application-node-spacer'));
     // Add child resources
-    resources.forEach((resource, count) => {
+    resources.forEach((resource) => {
       const kind = resource.kind;
       const badgeLabel = allK8sModels[kind]?.abbr || kindToAbbr(kind);
       const color =
         RESOURCE_COLORS.get(
           RESOURCE_BADGE_COLORS.get('.co-m-resource-' + resource.kind.toLowerCase()),
         ) || RESOURCE_COLORS.get('color-container-dark');
-      const nodeId = count + '-' + resource.kind + '-' + resource.name + '-' + resource.namespace;
+      const nodeId = resource.kind + '-' + resource.name + '-' + resource.namespace;
       const key = resource.kind + 's';
       const resourceGroupExpandState = groupNodeStates.includes(key);
 

src/gitops/components/application/graph/nodes/ApplicationNode.tsx

@@ -93,6 +93,7 @@ const ApplicationSyncStatusIcon = ({ status }: { status: SyncStatus }) => {
       );
       break;
     case SyncStatus.UNKNOWN:
+    default:
       icon = (
         <CircleNotchIcon
           className={'fa-spin'}

src/gitops/components/application/graph/nodes/ResourceGroupNode.tsx

@@ -85,10 +85,10 @@ export const ResourceGroupNode: React.FC<
         {/* eslint-disable no-nested-ternary */}
         {data.hasProgressing ? (
           <SvgTextWithOverflow text={`Progressing`} maxWidth={200} x="69" y="40" />
-        ) : data.hasMissing ? (
-          <SvgTextWithOverflow text={`Missing`} maxWidth={200} x="69" y="40" />
         ) : data.hasDegraded ? (
           <SvgTextWithOverflow text={`Degraded`} maxWidth={200} x="69" y="40" />
+        ) : data.hasMissing ? (
+          <SvgTextWithOverflow text={`Missing`} maxWidth={200} x="69" y="40" />
         ) : data.hasSuspended ? (
           <SvgTextWithOverflow text={`Suspended`} maxWidth={200} x="69" y="40" />
         ) : data.hasUnknown ? (

yarn.lock

@@ -1148,10 +1148,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@openshift-console/dynamic-plugin-sdk-internal@^4.19.0-prerelease.2":
-  version "4.19.0"
-  resolved "https://registry.yarnpkg.com/@openshift-console/dynamic-plugin-sdk-internal/-/dynamic-plugin-sdk-internal-4.19.0.tgz#df9ec5191d002f57250064c40bda6b8f0528bad9"
-  integrity sha512-OnC/2CV/oejtOzXQujYk/0JGSPuFjR6F51KsKKPelX9KqF+A2G2GW/yESR3n/FkGMtXxl6ZCUXUBCDMLXVRH/g==
+"@openshift-console/dynamic-plugin-sdk-internal@^4.19.1":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@openshift-console/dynamic-plugin-sdk-internal/-/dynamic-plugin-sdk-internal-4.20.0.tgz#938702cf6e79dbf732dddb98a24c22680a0b049c"
+  integrity sha512-QEV0XiydJBA33gtVz1g92HLTvG1n99igQ3FR+UBr+ufzl3DvW0hwXH+EZgskff3WBVnEHWlOAI2SGy8ujdfdjg==
   dependencies:
     "@patternfly/react-topology" "^6.2.0"
     immutable "3.x"
@@ -1164,10 +1164,10 @@
     redux "4.0.1"
     redux-thunk "2.4.0"
 
-"@openshift-console/dynamic-plugin-sdk-webpack@^4.19.0-prerelease.2":
-  version "4.19.0"
-  resolved "https://registry.yarnpkg.com/@openshift-console/dynamic-plugin-sdk-webpack/-/dynamic-plugin-sdk-webpack-4.19.0.tgz#6a0171702d9089f6cbe6cb74665ea855bb42af7e"
-  integrity sha512-a4zxkrEe4qhKir5R21OK/wJVCn8Gzm/y3smLxRDi/BjHFgcnNQKEgCMP4IhvTlT0NRJQ4Q9AmPT1WXBlV3ip3g==
+"@openshift-console/dynamic-plugin-sdk-webpack@^4.19.1":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@openshift-console/dynamic-plugin-sdk-webpack/-/dynamic-plugin-sdk-webpack-4.20.0.tgz#5b42772625bf44fc3faf76ecf94b5223ed3e6644"
+  integrity sha512-cTpBy8Jz2C65Qy/3fXIRv8IehvKRkms8rMcjz0KGo7DRoaDPnSyMXi5gH0BIA01nr5U6sBncNSbaD/3PXaZaig==
   dependencies:
     "@openshift/dynamic-plugin-sdk-webpack" "^4.0.2"
     ajv "^6.12.3"
@@ -1180,13 +1180,12 @@
     semver "6.x"
     webpack "^5.75.0"
 
-"@openshift-console/dynamic-plugin-sdk@^4.19.0-prerelease.2":
-  version "4.19.0"
-  resolved "https://registry.yarnpkg.com/@openshift-console/dynamic-plugin-sdk/-/dynamic-plugin-sdk-4.19.0.tgz#c9b6c1338b14c174520bff827f4e2be5ab2290a4"
-  integrity sha512-v1pNt2eDCyXwRZX+66QDnaYtrwbLapRMtCQql65pgePsE5/5aoOSGIsTjIB812j+oagAB1yk4r7OUlopA2F8kw==
+"@openshift-console/dynamic-plugin-sdk@^4.19.1":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@openshift-console/dynamic-plugin-sdk/-/dynamic-plugin-sdk-4.20.0.tgz#f5e6aaa147f02f651e3e6a734a1fb55555bad56a"
+  integrity sha512-Rf6XfWweXccmz10UpBT0tJTXBDf6jqRaiwQjzXGJ4W+ewVh5BQwxXIeBwzxjuAr3Bt972MhIqksHrlh54moERA==
   dependencies:
     "@patternfly/react-topology" "^6.2.0"
-    classnames "2.x"
     immutable "3.x"
     lodash "^4.17.21"
     react "^17.0.1"