fix: bucket save (#14582)

* fix(ui/buckets): close edit bucket modal on save

* test(e2e): test that modal closes after save

ui/cypress/e2e/buckets.test.ts

@@ -20,7 +20,7 @@ describe('Buckets', () => {
   describe('from the org view', () => {
     it('can create a bucket', () => {
       const newBucket = '🅱️ucket'
-      cy.getByTestID('resource-card').should('have.length', 1)
+      cy.getByTestID('bucket--card').should('have.length', 1)
 
       cy.getByTestID('Create Bucket').click()
       cy.getByTestID('overlay--container').within(() => {
@@ -30,19 +30,17 @@ describe('Buckets', () => {
           .click()
       })
 
-      cy.getByTestID('resource-card')
+      cy.getByTestID('bucket--card')
         .should('have.length', 2)
         .and('contain', newBucket)
     })
 
-    it("can update a bucket's retention rules", () => {
-      cy.get<Bucket>('@bucket').then(({name}) => {
-        cy.contains(name).click()
+    it.only("can update a bucket's retention rules", () => {
+      cy.get<Bucket>('@bucket').then(({name}: Bucket) => {
+        cy.getByTestID(`bucket--card ${name}`).click()
       })
 
-      cy.contains('Periodically').click()
-      // Switch back to line 47 when radio buttons from clockface support testID
-      // cy.get('retention-intervals').click()
+      cy.getByTestID('retention-intervals--button').click()
 
       cy.getByInputName('days').type('{uparrow}')
       cy.getByInputName('hours').type('{uparrow}')
@@ -53,22 +51,33 @@ describe('Buckets', () => {
         cy.contains('Save').click()
       })
 
-      cy.getByTestID('resource-card').should('contain', '1 day')
+      cy.getByTestID('bucket--card').should('contain', '1 day')
+
+      cy.get<Bucket>('@bucket').then(({name}: Bucket) => {
+        cy.getByTestID(`bucket--card ${name}`).click()
+      })
+
+      cy.getByTestID('retention-never--button').click()
+      cy.getByTestID('overlay--container').within(() => {
+        cy.contains('Save').click()
+      })
+
+      cy.getByTestID('overlay--container').should('not.be.visible')
     })
 
     it.skip('can delete a bucket', () => {
-      cy.get<Organization>('@org').then(({id, name}) => {
+      cy.get<Organization>('@org').then(({id, name}: Organization) => {
         cy.createBucket(id, name, 'newbucket1')
         cy.createBucket(id, name, 'newbucket2')
       })
 
-      cy.getByTestID('resource-card').should('have.length', 3)
+      cy.getByTestID('bucket--card').should('have.length', 3)
 
       cy.getByTestID('confirmation-button')
         .last()
         .click({force: true})
 
-      cy.getByTestID('resource-card').should('have.length', 2)
+      cy.getByTestID('bucket--card').should('have.length', 2)
     })
   })
 })

ui/src/buckets/components/BucketCard.tsx

@@ -31,7 +31,7 @@ class BucketRow extends PureComponent<Props & WithRouterProps> {
     return (
       <>
         <ResourceCard
-          testID="resource-card"
+          testID="bucket--card"
           contextMenu={
             <BucketContextMenu
               bucket={bucket}
@@ -45,6 +45,7 @@ class BucketRow extends PureComponent<Props & WithRouterProps> {
           }
           name={
             <ResourceCard.Name
+              testID={`bucket--card ${bucket.name}`}
               onClick={this.handleNameClick}
               name={bucket.name}
             />

ui/src/buckets/components/Retention.tsx

@@ -32,6 +32,7 @@ export default class Retention extends PureComponent<Props> {
         <Radio shape={ButtonShape.StretchToFit} className="retention--radio">
           <Radio.Button
             id="never"
+            testID="retention-never--button"
             active={type === null}
             onClick={this.handleRadioClick}
             value={null}
@@ -44,7 +45,7 @@ export default class Retention extends PureComponent<Props> {
             active={type === BucketRetentionRules.TypeEnum.Expire}
             onClick={this.handleRadioClick}
             value={BucketRetentionRules.TypeEnum.Expire}
-            testID="retention-intervals"
+            testID="retention-intervals--button"
             titleText="Compress data at regular intervals"
           >
             Periodically

ui/src/buckets/components/UpdateBucketOverlay.tsx

@@ -114,6 +114,7 @@ class UpdateBucketOverlay extends PureComponent<Props, State> {
 
     if (ruleType === null) {
       onUpdateBucket({...bucket, retentionRules: []})
+      this.handleClose()
       return
     }