fix: select correct bucket in buckets list (#4672)

* fix: select correct bucket in buckets list

* chore: add test

* chore: uncommented tests

* chore: remove typo

Co-authored-by: Subir Jolly <sjolly@influxdata.com>

Author: subirjolly

cypress/e2e/cloud/subscriptions.test.ts

@@ -122,6 +122,21 @@ describe('Subscriptions', () => {
     cy.get('.cf-resource-card').should('be.visible')
     cy.get('.cf-resource-card').should('have.length', 1)
     cy.get('.cf-resource-card').contains('My Subscription')
+
+    // bucket review
+    cy.getByTestID('subscription-card').should('be.visible')
+    cy.getByTestID('subscription-name').should('be.visible')
+    cy.getByTestID('subscription-name').click()
+    cy.get('.subscription-details-page').should('be.visible')
+    cy.getByTestID('update-subscription-form--submit').click()
+    cy.getByTestID('update-subscription-form--bucket').contains('defbuck')
+    cy.getByTestID('update-subscription-form--edit').click()
+    cy.getByTestID('buckets--list').should('be.visible')
+    cy.getByTestID('list-item')
+      .should('have.length', 1)
+      .should('have.attr', 'style')
+    cy.getByTestID('update-subscription-form--cancel').click()
+
     // update
     cy.getByTestID('subscription-card').should('be.visible')
     cy.getByTestID('subscription-name').should('be.visible')

src/writeData/components/WriteDataDetailsContext.tsx

@@ -25,13 +25,15 @@ const DEFAULT_BUCKET = '<BUCKET>'
 
 interface WriteDataDetailsContextType {
   bucket: Bucket
+  buckets: Bucket[]
   changeBucket: (bucket: Bucket) => void
   query: string
   changeQuery: (query: string) => void
 }
 
 export const DEFAULT_WRITE_DATA_DETAILS_CONTEXT: WriteDataDetailsContextType = {
   bucket: null,
+  buckets: [],
   changeBucket: () => {},
   query: null,
   changeQuery: () => {},
@@ -119,6 +121,7 @@ const WriteDataDetailsProvider: FC = ({children}) => {
     <WriteDataDetailsContext.Provider
       value={{
         bucket,
+        buckets,
         changeBucket,
         query,
         changeQuery,

src/writeData/components/WriteDataHelperBuckets.tsx

@@ -69,6 +69,7 @@ const WriteDataHelperBuckets: FC<Props> = ({
         backgroundColor={InfluxColors.Grey5}
         style={{height: '200px'}}
         maxHeight="200px"
+        testID="buckets--list"
       >
         {buckets.map(b => (
           <List.Item

src/writeData/subscriptions/components/SubscriptionFormContent.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {FC} from 'react'
+import React, {FC, useContext, useEffect} from 'react'
 
 // Components
 import {
@@ -24,6 +24,7 @@ import {Subscription} from 'src/types/subscriptions'
 // Styles
 import 'src/writeData/subscriptions/components/SubscriptionDetails.scss'
 import {event} from 'src/cloud/utils/reporting'
+import {WriteDataDetailsContext} from 'src/writeData/components/WriteDataDetailsContext'
 
 interface Props {
   currentSubscription: Subscription
@@ -37,77 +38,92 @@ const SubscriptionFormContent: FC<Props> = ({
   updateForm,
   className,
   edit,
-}) => (
-  <Grid>
-    <Grid.Row>
-      <Grid.Column widthSM={Columns.Twelve}>
-        <Form.ValidationElement
-          label="Topic"
-          value={currentSubscription.topic}
-          helpText="Subscribe to a topic to start receiving messages."
-          required={true}
-          validationFunc={() =>
-            handleValidation('Topic', currentSubscription.topic)
-          }
-        >
-          {status => (
-            <Input
-              type={InputType.Text}
-              placeholder="Enter a topic (wildcards accepted)"
-              name="topic"
-              autoFocus={false}
-              value={currentSubscription.topic}
-              onChange={e => {
-                updateForm({
-                  ...currentSubscription,
-                  topic: e.target.value,
-                })
-              }}
-              onBlur={() =>
-                event(
-                  'completed form field',
-                  {formField: 'topic'},
-                  {feature: 'subscriptions'}
-                )
-              }
-              status={edit ? status : ComponentStatus.Disabled}
-              maxLength={56}
-              testID={`${className}-subscription-form--topic`}
-            />
-          )}
-        </Form.ValidationElement>
-      </Grid.Column>
-      <Grid.Column widthXS={Columns.Twelve}>
-        <Heading
-          element={HeadingElement.H3}
-          weight={FontWeight.Bold}
-          className={`${className}-subscription-form__header`}
-        >
-          Write Destination
-        </Heading>
-        {className === 'create' || edit ? (
-          <div>
+}) => {
+  const {bucket, buckets, changeBucket} = useContext(WriteDataDetailsContext)
+  useEffect(() => {
+    if (bucket.name === currentSubscription?.bucket) {
+      return
+    }
+
+    const found = buckets.find(b => b.name === currentSubscription?.bucket)
+    if (found) {
+      changeBucket(found)
+    }
+  }, [])
+
+  return (
+    <Grid>
+      <Grid.Row>
+        <Grid.Column widthSM={Columns.Twelve}>
+          <Form.ValidationElement
+            label="Topic"
+            value={currentSubscription.topic}
+            helpText="Subscribe to a topic to start receiving messages."
+            required={true}
+            validationFunc={() =>
+              handleValidation('Topic', currentSubscription.topic)
+            }
+          >
+            {status => (
+              <Input
+                type={InputType.Text}
+                placeholder="Enter a topic (wildcards accepted)"
+                name="topic"
+                autoFocus={false}
+                value={currentSubscription.topic}
+                onChange={e => {
+                  updateForm({
+                    ...currentSubscription,
+                    topic: e.target.value,
+                  })
+                }}
+                onBlur={() =>
+                  event(
+                    'completed form field',
+                    {formField: 'topic'},
+                    {feature: 'subscriptions'}
+                  )
+                }
+                status={edit ? status : ComponentStatus.Disabled}
+                maxLength={56}
+                testID={`${className}-subscription-form--topic`}
+              />
+            )}
+          </Form.ValidationElement>
+        </Grid.Column>
+        <Grid.Column widthXS={Columns.Twelve}>
+          <Heading
+            element={HeadingElement.H3}
+            weight={FontWeight.Bold}
+            className={`${className}-subscription-form__header`}
+          >
+            Write Destination
+          </Heading>
+          {className === 'create' || edit ? (
+            <div>
+              <Heading
+                element={HeadingElement.H5}
+                weight={FontWeight.Regular}
+                className={`${className}-subscription-form__text`}
+              >
+                Select a bucket to write your data to.
+              </Heading>
+              <WriteDataHelperBuckets className="write-data--subscriptions-title" />
+            </div>
+          ) : (
             <Heading
-              element={HeadingElement.H5}
+              element={HeadingElement.H4}
               weight={FontWeight.Regular}
               className={`${className}-subscription-form__text`}
+              testID={`${className}-subscription-form--bucket`}
             >
-              Select a bucket to write your data to.
+              Bucket: {currentSubscription && currentSubscription.bucket}
             </Heading>
-            <WriteDataHelperBuckets className="write-data--subscriptions-title" />
-          </div>
-        ) : (
-          <Heading
-            element={HeadingElement.H4}
-            weight={FontWeight.Regular}
-            className={`${className}-subscription-form__text`}
-          >
-            Bucket: {currentSubscription && currentSubscription.bucket}
-          </Heading>
-        )}
-      </Grid.Column>
-    </Grid.Row>
-  </Grid>
-)
+          )}
+        </Grid.Column>
+      </Grid.Row>
+    </Grid>
+  )
+}
 
 export default SubscriptionFormContent