ui: clear state on delete autoprune policies (PROJQUAY-8003) (#3277)

* ui: clear state on delete autoprune policies (PROJQUAY-8003)

* add retries to tests + triggering click

web/cypress.config.ts

@@ -9,6 +9,7 @@ export default defineConfig({
     baseUrl: 'http://localhost:9000',
     video: false,
     defaultCommandTimeout: 25000,
+    retries: 3,
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },

web/cypress/e2e/autopruning.cy.ts

@@ -262,6 +262,18 @@ describe('Namespace settings - autoprune policies', () => {
 
     // second policy form should not exist
     cy.get('#autoprune-policy-form-1').should('not.exist');
+
+    // Delete first policy
+    cy.get('#autoprune-policy-form-0').within(() => {
+      cy.get('[data-testid="auto-prune-method"]').select('None');
+      cy.contains('Save').click();
+    });
+
+    cy.contains('Successfully deleted auto-prune policy');
+    cy.get('[data-testid="auto-prune-method"]').contains('None');
+
+    // second policy form should not exist
+    cy.get('#autoprune-policy-form-1').should('not.exist');
   });
 
   it('display multiple namespace auto-pruning policies', () => {

web/cypress/e2e/repository-autopruning.cy.ts

@@ -38,7 +38,7 @@ describe('Repository settings - Repository autoprune policies', () => {
     cy.contains('Successfully created repository auto-prune policy');
     cy.get('input[aria-label="number of tags"]').should('have.value', '25');
 
-    cy.contains('Add Policy').click();
+    cy.contains('Add Policy').trigger('click');
     cy.get('#autoprune-policy-form-1', {timeout: 3000}).should('be.visible');
 
     // Create second policy
@@ -281,5 +281,17 @@ describe('Repository settings - Repository autoprune policies', () => {
 
     // second policy form should not exist
     cy.get('#autoprune-policy-form-1').should('not.exist');
+
+    // Delete first policy
+    cy.get('#autoprune-policy-form-0').within(() => {
+      cy.get('[data-testid="auto-prune-method"]').select('None');
+      cy.contains('Save').click();
+    });
+
+    cy.contains('Successfully deleted repository auto-prune policy');
+    cy.get('[data-testid="auto-prune-method"]').contains('None');
+
+    // second policy form should not exist
+    cy.get('#autoprune-policy-form-1').should('not.exist');
   });
 });

web/src/routes/OrganizationsList/Organization/Tabs/Settings/AutoPruning.tsx

@@ -60,11 +60,11 @@ export default function AutoPruning(props: AutoPruning) {
 
   useEffect(() => {
     if (successFetchingPolicies) {
-      if (nsPolicies.length > 0) {
-        setPolicies(nsPolicies);
-      } else {
-        addNewPolicy();
+      if (nsPolicies.length == 0) {
+        addNewPolicy(true);
+        return;
       }
+      setPolicies(nsPolicies);
     }
   }, [successFetchingPolicies, dataUpdatedAt]);
 
@@ -125,17 +125,29 @@ export default function AutoPruning(props: AutoPruning) {
     }
   }, [errorDeletePolicy]);
 
-  const addNewPolicy = () => {
-    setPolicies([
-      ...policies,
-      {
-        method: AutoPruneMethod.NONE,
-        uuid: null,
-        value: null,
-        tagPattern: null,
-        tagPatternMatches: true,
-      },
-    ]);
+  const addNewPolicy = (clear_existing = false) => {
+    if (clear_existing) {
+      setPolicies([
+        {
+          method: AutoPruneMethod.NONE,
+          uuid: null,
+          value: null,
+          tagPattern: null,
+          tagPatternMatches: true,
+        },
+      ]);
+    } else {
+      setPolicies([
+        ...policies,
+        {
+          method: AutoPruneMethod.NONE,
+          uuid: null,
+          value: null,
+          tagPattern: null,
+          tagPatternMatches: true,
+        },
+      ]);
+    }
   };
 
   const onSave = (method, value, uuid, tagPattern, tagPatternMatches) => {
@@ -201,7 +213,7 @@ export default function AutoPruning(props: AutoPruning) {
         />
       ))}
       <br />
-      <Button variant="primary" type="submit" onClick={addNewPolicy}>
+      <Button variant="primary" type="submit" onClick={() => addNewPolicy()}>
         Add Policy
       </Button>
     </>

web/src/routes/RepositoryDetails/Settings/RepositoryAutoPruning.tsx

@@ -73,26 +73,38 @@ export default function RepositoryAutoPruning(props: RepositoryAutoPruning) {
     props.repoName,
   );
 
-  const addNewPolicy = () => {
-    setPolicies([
-      ...policies,
-      {
-        method: AutoPruneMethod.NONE,
-        uuid: null,
-        value: null,
-        tagPattern: null,
-        tagPatternMatches: true,
-      },
-    ]);
+  const addNewPolicy = (clear_existing = false) => {
+    if (clear_existing) {
+      setPolicies([
+        {
+          method: AutoPruneMethod.NONE,
+          uuid: null,
+          value: null,
+          tagPattern: null,
+          tagPatternMatches: true,
+        },
+      ]);
+    } else {
+      setPolicies([
+        ...policies,
+        {
+          method: AutoPruneMethod.NONE,
+          uuid: null,
+          value: null,
+          tagPattern: null,
+          tagPatternMatches: true,
+        },
+      ]);
+    }
   };
 
   useEffect(() => {
     if (successFetchingRepoPolicies) {
-      if (repoPolicies.length > 0) {
-        setPolicies(repoPolicies);
-      } else if (policies.length == 0) {
-        addNewPolicy();
+      if (repoPolicies.length == 0) {
+        addNewPolicy(true);
+        return;
       }
+      setPolicies(repoPolicies);
     }
   }, [
     successFetchingRepoPolicies,
@@ -227,7 +239,7 @@ export default function RepositoryAutoPruning(props: RepositoryAutoPruning) {
         />
       ))}
       <br />
-      <Button variant="primary" type="submit" onClick={addNewPolicy}>
+      <Button variant="primary" type="submit" onClick={() => addNewPolicy()}>
         Add Policy
       </Button>
     </>