fix: advanced bucket selector onCreate callback (#4731)

Author: Gene Hynson

src/buckets/components/CreateBucketButton.tsx

@@ -42,15 +42,13 @@ const CreateBucketButton: FC<Props> = ({
     dispatch(checkBucketLimits())
   }, [dispatch])
 
-  const overlayParams = useSimplifiedBucketForm
-    ? {
-        useSimplifiedBucketForm: true,
-        callbackAfterBucketCreation,
-      }
-    : null
   const handleItemClick = (): void => {
     event('create bucket clicked')
-    onShowOverlay('create-bucket', overlayParams, onDismissOverlay)
+    onShowOverlay(
+      'create-bucket',
+      {useSimplifiedBucketForm, callbackAfterBucketCreation},
+      onDismissOverlay
+    )
   }
 
   if (CLOUD && limitStatus === 'exceeded') {

src/writeData/components/WriteDataHelperBuckets.tsx

@@ -1,6 +1,5 @@
 // Libraries
 import React, {FC, useContext} from 'react'
-import {useSelector} from 'react-redux'
 
 // Contexts
 import {WriteDataDetailsContext} from 'src/writeData/components/WriteDataDetailsContext'
@@ -9,9 +8,6 @@ import CreateBucketButton from 'src/buckets/components/CreateBucketButton'
 // Constants
 import {DOCS_URL_VERSION} from 'src/shared/constants/fluxFunctions'
 
-// Utils
-import {getAll} from 'src/resources/selectors'
-
 // Components
 import {
   List,
@@ -23,9 +19,6 @@ import {
   EmptyState,
 } from '@influxdata/clockface'
 
-// Types
-import {AppState, ResourceType, Bucket} from 'src/types'
-
 interface Props {
   className?: string
   useSimplifiedBucketForm?: boolean
@@ -35,10 +28,26 @@ const WriteDataHelperBuckets: FC<Props> = ({
   className = 'write-data--details-widget-title',
   useSimplifiedBucketForm = false,
 }) => {
-  const buckets = useSelector((state: AppState) =>
-    getAll<Bucket>(state, ResourceType.Buckets).filter(b => b.type === 'user')
-  )
-  const {bucket, changeBucket} = useContext(WriteDataDetailsContext)
+  const {bucket, buckets, changeBucket} = useContext(WriteDataDetailsContext)
+  const isSelected = (bucketID: string): boolean => {
+    if (!bucket) {
+      return false
+    }
+    return bucketID === bucket.id
+  }
+
+  const filteredBuckets = buckets
+    .filter(b => b.type === 'user')
+    // sort by selected and then by name
+    .sort((a, b) => {
+      if (isSelected(a.id)) {
+        return -1
+      }
+      if (isSelected(b.id)) {
+        return 1
+      }
+      return a.name.localeCompare(b.name)
+    })
 
   let body = (
     <EmptyState className="write-data--details-empty-state">
@@ -55,23 +64,15 @@ const WriteDataHelperBuckets: FC<Props> = ({
     </EmptyState>
   )
 
-  const isSelected = (bucketID: string): boolean => {
-    if (!bucket) {
-      return false
-    }
-
-    return bucketID === bucket.id
-  }
-
-  if (buckets.length) {
+  if (filteredBuckets.length) {
     body = (
       <List
         backgroundColor={InfluxColors.Grey5}
         style={{height: '200px'}}
         maxHeight="200px"
         testID="buckets--list"
       >
-        {buckets.map(b => (
+        {filteredBuckets.map(b => (
           <List.Item
             size={ComponentSize.Small}
             key={b.id}

src/writeData/subscriptions/components/SubscriptionFormContent.tsx

@@ -49,7 +49,7 @@ const SubscriptionFormContent: FC<Props> = ({
     if (found) {
       changeBucket(found)
     }
-  }, [])
+  }, [buckets.length])
 
   return (
     <Grid>