fix: sorting buckets across UI (#3288)

* fix: buckets sorted the same across ui

* fix: prettier

* test: fixed bucket sorting

* test: bucket sorting fix

* feat: re-order buckets in tokens

* fix: prettier

* fix: re-ordering buckets by bucket name

Author: blegesse-w

cypress/e2e/cloud/buckets.test.ts

@@ -492,15 +492,15 @@ describe('Buckets', () => {
       ]
       const retentionDesc = [
         defaultBucket,
-        monitoringBucket,
         createdBucket,
+        monitoringBucket,
         tasksBucket,
       ]
       const retentionAsc = [
-        tasksBucket,
-        monitoringBucket,
         createdBucket,
         defaultBucket,
+        tasksBucket,
+        monitoringBucket,
       ]
 
       cy.getByTestID('Create Bucket').click()

cypress/e2e/oss/buckets.test.ts

@@ -14,10 +14,9 @@ describe('Buckets', () => {
     )
   )
 
-  // TODO: Skipping this until we can sort out the differences between OSS and Cloud
   it('can sort by name and retention', () => {
     const buckets = ['defbuck', '_tasks', '_monitoring']
-    const retentionDesc = ['_monitoring', '_tasks', 'defbuck']
+    const retentionDesc = ['defbuck', '_monitoring', '_tasks']
     const retentionAsc = ['defbuck', '_tasks', '_monitoring']
 
     cy.getByTestID('resource-sorter--button')

src/authorizations/components/redesigned/IndividualAccordionBody.tsx

@@ -26,6 +26,24 @@ interface Props {
 
 export const IndividualAccordionBody: FC<Props> = props => {
   const {resourceName, permissions, onToggle, title, disabled} = props
+  let sortedPermissions
+
+  if (resourceName === 'buckets') {
+    // re-order buckets: user buckets first followed by system buckets
+    const systemBuckets = []
+    const userBuckets = []
+
+    permissions.forEach(bucket => {
+      if (bucket.name === '_monitoring' || bucket.name === '_tasks') {
+        systemBuckets.push(bucket)
+      } else {
+        userBuckets.push(bucket)
+      }
+    })
+    sortedPermissions = [...userBuckets, ...systemBuckets]
+  } else {
+    sortedPermissions = [...permissions]
+  }
 
   const handleReadToggle = id => {
     onToggle(resourceName, id, PermissionType.Read)
@@ -81,13 +99,13 @@ export const IndividualAccordionBody: FC<Props> = props => {
         {title}
       </Accordion.AccordionBodyItem>
       {permissions
-        ? Object.keys(permissions).map(key => {
+        ? Object.keys(sortedPermissions).map(key => {
             return (
               <Accordion.AccordionBodyItem
-                key={permissions[key].id}
+                key={sortedPermissions[key].id}
                 className="resource-accordion-body"
               >
-                {accordionBody(permissions[key])}
+                {accordionBody(sortedPermissions[key])}
               </Accordion.AccordionBodyItem>
             )
           })

src/buckets/components/BucketList.tsx

@@ -57,14 +57,25 @@ class BucketList extends PureComponent<
       onUpdateBucket,
       onGetBucketSchema,
     } = this.props
+
     const sortedBuckets = this.memGetSortedResources(
       buckets,
       sortKey,
       sortDirection,
       sortType
     )
+    const userBuckets = []
+    const systemBuckets = []
+    sortedBuckets.forEach(bucket => {
+      if (bucket.type === 'user') {
+        userBuckets.push(bucket)
+      } else {
+        systemBuckets.push(bucket)
+      }
+    })
+    const userAndSystemBuckets = [...userBuckets, ...systemBuckets]
 
-    return sortedBuckets.map(bucket => {
+    return userAndSystemBuckets.map(bucket => {
       return (
         <BucketCard
           key={bucket.id}

src/buckets/pagination/BucketList.tsx

@@ -125,9 +125,20 @@ class BucketList
       this.props.bucketCount
     )
 
+    const userBuckets = []
+    const systemBuckets = []
+    sortedBuckets.forEach(bucket => {
+      if (bucket.type === 'user') {
+        userBuckets.push(bucket)
+      } else {
+        systemBuckets.push(bucket)
+      }
+    })
+    const userAndSystemBuckets = [...userBuckets, ...systemBuckets]
+
     const buckets = []
     for (let i = startIndex; i < endIndex; i++) {
-      const bucket = sortedBuckets[i]
+      const bucket = userAndSystemBuckets[i]
       if (bucket) {
         buckets.push(
           <BucketCard

src/timeMachine/components/queryBuilder/BucketsSelector.tsx

@@ -14,10 +14,11 @@ import {selectBucket} from 'src/timeMachine/actions/queryBuilderThunks'
 
 // Utils
 import {getActiveQuery} from 'src/timeMachine/selectors'
-import {getAll, getStatus} from 'src/resources/selectors'
+import {getStatus} from 'src/resources/selectors'
+import {getSortedBuckets} from 'src/buckets/selectors/index'
 
 // Types
-import {AppState, Bucket, ResourceType} from 'src/types'
+import {AppState, ResourceType} from 'src/types'
 import {RemoteDataState} from 'src/types'
 
 type ReduxProps = ConnectedProps<typeof connector>
@@ -28,12 +29,13 @@ const fb = term => bucket =>
 
 const BucketSelector: FunctionComponent<Props> = ({
   selectedBucket,
-  bucketNames,
+  sortedBucketNames,
   bucketsStatus,
   onSelectBucket,
 }) => {
   const [searchTerm, setSearchTerm] = useState('')
-  const list = bucketNames.filter(fb(searchTerm))
+
+  const list = sortedBucketNames.filter(fb(searchTerm))
 
   const onSelect = (bucket: string) => {
     onSelectBucket(bucket, true)
@@ -51,7 +53,7 @@ const BucketSelector: FunctionComponent<Props> = ({
     )
   }
 
-  if (bucketsStatus === RemoteDataState.Done && !bucketNames.length) {
+  if (bucketsStatus === RemoteDataState.Done && !sortedBucketNames.length) {
     return <BuilderCard.Empty>No buckets found</BuilderCard.Empty>
   }
 
@@ -100,13 +102,14 @@ const Selector: FunctionComponent<SelectorProps> = ({
 }
 
 const mstp = (state: AppState) => {
-  const buckets = getAll<Bucket>(state, ResourceType.Buckets)
-  const bucketNames = buckets.map(bucket => bucket.name || '')
+  const sortedBucketNames = getSortedBuckets(state).map(
+    bucket => bucket.name || ''
+  )
   const bucketsStatus = getStatus(state, ResourceType.Buckets)
   const selectedBucket =
-    getActiveQuery(state).builderConfig.buckets[0] || bucketNames[0]
+    getActiveQuery(state).builderConfig.buckets[0] || sortedBucketNames[0]
 
-  return {selectedBucket, bucketNames, bucketsStatus}
+  return {selectedBucket, sortedBucketNames, bucketsStatus}
 }
 
 const mdtp = {