feat: update bucket in bucket selector after Create Bucket button is used (#4653)

Author: ChitlangeSahas

src/buckets/components/CreateBucketButton.tsx

@@ -14,7 +14,7 @@ import {showOverlay, dismissOverlay} from 'src/overlays/actions/overlays'
 import {getBucketLimitStatus} from 'src/cloud/utils/limits'
 
 // Types
-import {AppState} from 'src/types'
+import {AppState, OwnBucket} from 'src/types'
 
 // Constants
 import {CLOUD} from 'src/shared/constants'
@@ -24,6 +24,7 @@ type ReduxProps = ConnectedProps<typeof connector>
 
 type CreateButtonProps = {
   useSimplifiedBucketForm?: boolean
+  callbackAfterBucketCreation?: (bucket: OwnBucket) => void
 }
 
 type Props = ReduxProps & CreateButtonProps
@@ -33,6 +34,7 @@ const CreateBucketButton: FC<Props> = ({
   onShowOverlay,
   onDismissOverlay,
   useSimplifiedBucketForm = false,
+  callbackAfterBucketCreation = () => {},
 }) => {
   const dispatch = useDispatch()
   useEffect(() => {
@@ -41,7 +43,10 @@ const CreateBucketButton: FC<Props> = ({
   }, [dispatch])
 
   const overlayParams = useSimplifiedBucketForm
-    ? {useSimplifiedBucketForm: true}
+    ? {
+        useSimplifiedBucketForm: true,
+        callbackAfterBucketCreation,
+      }
     : null
   const handleItemClick = (): void => {
     event('create bucket clicked')

src/buckets/components/createBucketForm/CreateBucketForm.tsx

@@ -18,7 +18,7 @@ import {
   initialBucketState,
   DEFAULT_RULES,
 } from 'src/buckets/reducers/createBucket'
-import {AppState, Bucket, RetentionRule} from 'src/types'
+import {AppState, Bucket, OwnBucket, RetentionRule} from 'src/types'
 import {event} from 'src/cloud/utils/reporting'
 
 // Selectors
@@ -40,6 +40,7 @@ interface CreateBucketFormProps {
   onClose: () => void
   testID?: string
   useSimplifiedBucketForm?: boolean
+  callbackAfterBucketCreation?: (bucket: OwnBucket) => void
 }
 
 export const CreateBucketForm: FC<CreateBucketFormProps> = props => {
@@ -145,6 +146,10 @@ export const CreateBucketForm: FC<CreateBucketFormProps> = props => {
     if (overlayParams?.onUpdateBucket) {
       overlayParams.onUpdateBucket(bucket)
     }
+
+    if (props.callbackAfterBucketCreation) {
+      props.callbackAfterBucketCreation(bucket)
+    }
   }
 
   const handleChangeInput = (event: ChangeEvent<HTMLInputElement>): void => {

src/buckets/components/createBucketForm/CreateBucketOverlay.tsx

@@ -14,13 +14,15 @@ import {getBucketOverlayWidth} from 'src/buckets/constants'
 const CreateBucketOverlay: FC = () => {
   const {onClose, params} = useContext(OverlayContext)
   const useSimplifiedBucketForm = params?.useSimplifiedBucketForm
+  const callbackAfterBucketCreation = params?.callbackAfterBucketCreation
 
   return (
     <Overlay.Container maxWidth={getBucketOverlayWidth()}>
       <Overlay.Header title="Create Bucket" onDismiss={onClose} />
       <CreateBucketForm
         onClose={onClose}
         useSimplifiedBucketForm={useSimplifiedBucketForm}
+        callbackAfterBucketCreation={callbackAfterBucketCreation}
       />
     </Overlay.Container>
   )

src/writeData/components/WriteDataHelperBuckets.tsx

@@ -91,7 +91,10 @@ const WriteDataHelperBuckets: FC<Props> = ({
     <>
       <Heading element={HeadingElement.H6} className={className}>
         Bucket
-        <CreateBucketButton useSimplifiedBucketForm={useSimplifiedBucketForm} />
+        <CreateBucketButton
+          useSimplifiedBucketForm={useSimplifiedBucketForm}
+          callbackAfterBucketCreation={changeBucket}
+        />
       </Heading>
       {body}
     </>