PVC label selector causes infinite blinking when applying DRPolicy

Signed-off-by: Gowtham Shanmugasundaram <[email protected]>
red-hat-storage · Feb 25, 2025 · f1b9d93 · f1b9d93
1 parent 0b44948
commit f1b9d93
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 20 deletions.
diff --git a/locales/en/plugin__odf-console.json b/locales/en/plugin__odf-console.json
@@ -342,7 +342,7 @@
   "Select the subscriptions groups you wish to replicate via": "Select the subscriptions groups you wish to replicate via",
   "Enroll managed application": "Enroll managed application",
   "Manage disaster recovery": "Manage disaster recovery",
-  "<0>Application:</0> {getName(applicaitonInfo)} (Namespace: {getNamespace(applicaitonInfo)})": "<0>Application:</0> {getName(applicaitonInfo)} (Namespace: {getNamespace(applicaitonInfo)})",
+  "<0>Application:</0> {getName(applicationInfo)} (Namespace: {getNamespace(applicationInfo)})": "<0>Application:</0> {getName(applicationInfo)} (Namespace: {getNamespace(applicationInfo)})",
   "Assign policy nav": "Assign policy nav",
   "Assign policy content": "Assign policy content",
   "Labels must start and end with an alphanumeric character, can consist of lower-case letters, numbers, dots (.), hyphens (-), forward slash (/), underscore(_) and equal to (=)": "Labels must start and end with an alphanumeric character, can consist of lower-case letters, numbers, dots (.), hyphens (-), forward slash (/), underscore(_) and equal to (=)",

diff --git a/packages/mco/components/modals/app-manage-policies/app-manage-policies-modal.tsx b/packages/mco/components/modals/app-manage-policies/app-manage-policies-modal.tsx
@@ -18,7 +18,7 @@ import {
 import { ApplicationType, DRInfoType, DRPolicyType } from './utils/types';
 
 export const ModalContextViewer: React.FC<ModalContextViewerProps> = ({
-  applicaitonInfo,
+  applicationInfo,
   state,
   matchingPolicies,
   dispatch,
@@ -47,13 +47,13 @@ export const ModalContextViewer: React.FC<ModalContextViewerProps> = ({
     <>
       {state.modalViewContext === ModalViewContext.MANAGE_POLICY_VIEW && (
         <ManagePolicyView
-          drInfo={applicaitonInfo?.drInfo as DRInfoType}
-          workloadNamespace={applicaitonInfo?.workloadNamespace}
+          drInfo={applicationInfo?.drInfo as DRInfoType}
+          workloadNamespace={applicationInfo?.workloadNamespace}
           eligiblePolicies={matchingPolicies}
           isSubscriptionAppType={
-            applicaitonInfo?.type === DRApplication.SUBSCRIPTION
+            applicationInfo?.type === DRApplication.SUBSCRIPTION
           }
-          unProtectedPlacementCount={applicaitonInfo?.placements?.length}
+          unProtectedPlacementCount={applicationInfo?.placements?.length}
           dispatch={dispatch}
           setModalContext={setModalContext}
           setModalActionContext={setModalActionContext}
@@ -64,7 +64,7 @@ export const ModalContextViewer: React.FC<ModalContextViewerProps> = ({
       )}
       {state.modalViewContext === ModalViewContext.ASSIGN_POLICY_VIEW && (
         <AssignPolicyView
-          applicaitonInfo={applicaitonInfo}
+          applicationInfo={applicationInfo}
           matchingPolicies={matchingPolicies}
           state={state.assignPolicyView}
           modalActionContext={state.modalActionContext}
@@ -78,7 +78,7 @@ export const ModalContextViewer: React.FC<ModalContextViewerProps> = ({
 };
 
 export const AppManagePoliciesModal: React.FC<AppManagePoliciesModalProps> = ({
-  applicaitonInfo,
+  applicationInfo,
   matchingPolicies,
   loaded,
   loadError,
@@ -102,8 +102,8 @@ export const AppManagePoliciesModal: React.FC<AppManagePoliciesModalProps> = ({
         loaded &&
         !loadError && (
           <Trans t={t}>
-            <strong>Application:</strong> {getName(applicaitonInfo)} (Namespace:{' '}
-            {getNamespace(applicaitonInfo)})
+            <strong>Application:</strong> {getName(applicationInfo)} (Namespace:{' '}
+            {getNamespace(applicationInfo)})
           </Trans>
         )
       }
@@ -114,7 +114,7 @@ export const AppManagePoliciesModal: React.FC<AppManagePoliciesModalProps> = ({
       onClose={close}
     >
       <ModalContextViewer
-        applicaitonInfo={applicaitonInfo}
+        applicationInfo={applicationInfo}
         matchingPolicies={matchingPolicies}
         state={state}
         dispatch={dispatch}
@@ -126,7 +126,7 @@ export const AppManagePoliciesModal: React.FC<AppManagePoliciesModalProps> = ({
 };
 
 type AppManagePoliciesModalProps = {
-  applicaitonInfo: ApplicationType;
+  applicationInfo: ApplicationType;
   matchingPolicies: DRPolicyType[];
   loaded: boolean;
   loadError: any;
@@ -136,7 +136,7 @@ type AppManagePoliciesModalProps = {
 
 type ModalContextViewerProps = {
   state: ManagePolicyState;
-  applicaitonInfo: ApplicationType;
+  applicationInfo: ApplicationType;
   matchingPolicies: DRPolicyType[];
   dispatch: React.Dispatch<ManagePolicyStateAction>;
   loaded: boolean;

diff --git a/packages/mco/components/modals/app-manage-policies/assign-policy-view.tsx b/packages/mco/components/modals/app-manage-policies/assign-policy-view.tsx
@@ -114,7 +114,7 @@ export const createSteps = (
 
 export const AssignPolicyView: React.FC<AssignPolicyViewProps> = ({
   state,
-  applicaitonInfo,
+  applicationInfo,
   matchingPolicies,
   modalActionContext,
   setModalContext,
@@ -133,7 +133,7 @@ export const AssignPolicyView: React.FC<AssignPolicyViewProps> = ({
     workloadNamespace,
     placements: unProtectedPlacements,
     drInfo,
-  } = applicaitonInfo;
+  } = applicationInfo;
 
   const protectedPVCSelectors: PVCSelectorType[] = isEditMode
     ? (drInfo as DRInfoType)?.placementControlInfo?.map((drpc) => ({
@@ -150,7 +150,7 @@ export const AssignPolicyView: React.FC<AssignPolicyViewProps> = ({
 
   const onSubmit = async () => {
     // assign DRPolicy
-    const promises = assignPromises(state, applicaitonInfo.placements);
+    const promises = assignPromises(state, applicationInfo.placements);
     await Promise.all(promises)
       .then(() => {
         setModalActionContext(
@@ -212,7 +212,7 @@ export const AssignPolicyView: React.FC<AssignPolicyViewProps> = ({
 
 type AssignPolicyViewProps = {
   state: AssignPolicyViewState;
-  applicaitonInfo: ApplicationType;
+  applicationInfo: ApplicationType;
   matchingPolicies: DRPolicyType[];
   modalActionContext: ModalActionContext;
   dispatch: React.Dispatch<ManagePolicyStateAction>;

diff --git a/packages/mco/components/modals/app-manage-policies/parsers/application-set-parser.tsx b/packages/mco/components/modals/app-manage-policies/parsers/application-set-parser.tsx
@@ -16,6 +16,7 @@ import {
   getRemoteNamespaceFromAppSet,
   findDeploymentClusters,
 } from '@odf/mco/utils';
+import { useDeepCompareMemoize } from '@odf/shared';
 import { getNamespace } from '@odf/shared/selectors';
 import * as _ from 'lodash-es';
 import { AppManagePoliciesModal } from '../app-manage-policies-modal';
@@ -99,7 +100,12 @@ export const ApplicationSetParser: React.FC<ApplicationSetParserProps> = ({
         drLoadError
       )
     );
-  const appSetResource = appSetResources?.formattedResources?.[0];
+
+  // Perform deep comparison to prevent unnecessary re-renders
+  const appSetResource = useDeepCompareMemoize(
+    appSetResources?.formattedResources?.[0]
+  );
+
   const { drPolicies } = drResources;
 
   const applicationInfo: ApplicationInfoType = React.useMemo(() => {
@@ -141,7 +147,7 @@ export const ApplicationSetParser: React.FC<ApplicationSetParserProps> = ({
 
   return (
     <AppManagePoliciesModal
-      applicaitonInfo={applicationInfo as ApplicationType}
+      applicationInfo={applicationInfo as ApplicationType}
       matchingPolicies={matchingPolicies}
       loaded={loaded}
       loadError={loadError}

diff --git a/packages/mco/components/modals/app-manage-policies/parsers/subscription-parser.tsx b/packages/mco/components/modals/app-manage-policies/parsers/subscription-parser.tsx
@@ -153,7 +153,7 @@ export const SubscriptionParser: React.FC<SubscriptionParserProps> = ({
 
   return (
     <AppManagePoliciesModal
-      applicaitonInfo={applicationInfo as ApplicationType}
+      applicationInfo={applicationInfo as ApplicationType}
       matchingPolicies={matchingPolicies}
       loaded={loaded}
       loadError={loadError}