feat(ui): resource sorting dropdowns

CHANGELOG.md

@@ -1,4 +1,4 @@
-## v2.0.0-beta.9
+## v2.0.0-beta.9 [unreleased]
 
 ### Features
 
@@ -7,6 +7,7 @@
 ### UI Improvements
 
 1. [17714](https://github.com/influxdata/influxdb/pull/17714): Cloud environments no longer render markdown images, for security reasons.
+1. [17321](https://github.com/influxdata/influxdb/pull/17321): Improve UI for sorting resources
 
 ## v2.0.0-beta.8 [2020-04-10]
 

ui/cypress/e2e/buckets.test.ts

@@ -75,17 +75,25 @@ describe('Buckets', () => {
     describe('Searching and Sorting', () => {
       it('can sort by name and retention', () => {
         const buckets = ['defbuck', '_tasks', '_monitoring']
-        cy.getByTestID('name-sorter')
+        cy.getByTestID('resource-sorter--button')
           .click()
+          .then(() => {
+            cy.getByTestID('resource-sorter--name-desc').click()
+          })
           .then(() => {
             cy.get('[data-testid*="bucket-card"]').each((val, index) => {
               const testID = val.attr('data-testid')
               expect(testID).to.include(buckets[index])
             })
           })
 
-        cy.getByTestID('name-sorter')
+        cy.getByTestID('resource-sorter--button')
           .click()
+          .then(() => {
+            cy.getByTestID(
+              'resource-sorter--retentionRules[0].everySeconds-desc'
+            ).click()
+          })
           .then(() => {
             const asc_buckets = buckets.slice().sort()
             cy.get('[data-testid*="bucket-card"]').each((val, index) => {

ui/cypress/e2e/collectors.test.ts

@@ -225,8 +225,11 @@ describe('Collectors', () => {
           })
         })
 
-        cy.getByTestID('name-sorter')
+        cy.getByTestID('resource-sorter--button')
           .click()
+          .then(() => {
+            cy.getByTestID('resource-sorter--name-desc').click()
+          })
           .then(() => {
             // NOTE: this then is just here to let me scope this variable (alex)
             const teletubbies = telegrafs

ui/cypress/e2e/labels.test.ts

@@ -284,7 +284,11 @@ describe('labels', () => {
       }
     })
 
-    cy.getByTestID('sorter--name').click()
+    cy.getByTestID('resource-sorter--button')
+      .click()
+      .then(() => {
+        cy.getByTestID('resource-sorter--name-desc').click()
+      })
 
     // check sort desc
     cy.getByTestIDSubStr('label--pill').then(labels => {
@@ -296,7 +300,11 @@ describe('labels', () => {
     })
 
     // reset to asc
-    cy.getByTestID('sorter--name').click()
+    cy.getByTestID('resource-sorter--button')
+      .click()
+      .then(() => {
+        cy.getByTestID('resource-sorter--name-asc').click()
+      })
 
     cy.getByTestIDSubStr('label--pill').then(labels => {
       for (let i = 0; i < labels.length; i++) {
@@ -332,27 +340,32 @@ describe('labels', () => {
       a.description < b.description ? -1 : a.description > b.description ? 1 : 0
     )
     // check sort asc
-    cy.getByTestID('sorter--desc').click()
+    cy.getByTestID('resource-sorter--button')
+      .click()
+      .then(() => {
+        cy.getByTestID('resource-sorter--properties.description-asc').click()
+      })
 
-    cy.getByTestIDSubStr('resource-card').then(labels => {
+    cy.getByTestID('label-card').then(labels => {
       for (let i = 0; i < labels.length; i++) {
-        cy.getByTestIDSubStr('resource-card')
+        cy.getByTestID('label-card--description')
           .eq(i)
-          .should('have.text', 'Description: ' + names[i].description)
+          .should('have.text', names[i].description)
       }
     })
 
     // check sort desc
-    cy.getByTestID('sorter--desc').click()
+    cy.getByTestID('resource-sorter--button')
+      .click()
+      .then(() => {
+        cy.getByTestID('resource-sorter--properties.description-desc').click()
+      })
 
-    cy.getByTestIDSubStr('resource-card').then(labels => {
+    cy.getByTestID('label-card').then(labels => {
       for (let i = 0; i < labels.length; i++) {
-        cy.getByTestIDSubStr('resource-card')
+        cy.getByTestID('label-card--description')
           .eq(i)
-          .should(
-            'have.text',
-            'Description: ' + names[labels.length - (i + 1)].description
-          )
+          .should('have.text', names[labels.length - (i + 1)].description)
       }
     })
   })

ui/cypress/e2e/variables.test.ts

@@ -42,7 +42,7 @@ describe('Variables', () => {
   })
 
   it('keeps user input in text area when attempting to import invalid JSON', () => {
-    cy.get('.tabbed-page-section--header').within(() => {
+    cy.getByTestID('tabbed-page--header').within(() => {
       cy.contains('Create').click()
     })
 

ui/src/authorizations/components/TokensTab.tsx

@@ -55,20 +55,28 @@ class TokensTab extends PureComponent<Props, State> {
     const {searchTerm, sortKey, sortDirection, sortType} = this.state
     const {tokens} = this.props
 
+    const leftHeaderItems = (
+      <SearchWidget
+        searchTerm={searchTerm}
+        placeholderText="Filter Tokens..."
+        onSearch={this.handleChangeSearchTerm}
+        testID="input-field--filter"
+      />
+    )
+
+    const rightHeaderItems = (
+      <GenerateTokenDropdown
+        onSelectAllAccess={this.handleGenerateAllAccess}
+        onSelectReadWrite={this.handleGenerateReadWrite}
+      />
+    )
+
     return (
       <>
-        <TabbedPageHeader>
-          <SearchWidget
-            searchTerm={searchTerm}
-            placeholderText="Filter Tokens..."
-            onSearch={this.handleChangeSearchTerm}
-            testID="input-field--filter"
-          />
-          <GenerateTokenDropdown
-            onSelectAllAccess={this.handleGenerateAllAccess}
-            onSelectReadWrite={this.handleGenerateReadWrite}
-          />
-        </TabbedPageHeader>
+        <TabbedPageHeader
+          childrenLeft={leftHeaderItems}
+          childrenRight={rightHeaderItems}
+        />
         <FilterAuthorizations
           list={tokens}
           searchTerm={searchTerm}

ui/src/buckets/components/BucketAddDataButton.scss

@@ -54,12 +54,3 @@
 .system-bucket {
   color: mix($c-honeydew, $g13-mist);
 }
-
-.buckets-buttons-wrap {
-  display: flex;
-  box-sizing: border-box;
-  text-align: right;
-  @media screen and (max-width: 680px) {
-    margin: 8px auto 0;
-  }
-}

ui/src/buckets/components/BucketExplainer.tsx

@@ -2,10 +2,10 @@
 import React, {FunctionComponent} from 'react'
 
 // Components
-import {Panel, InfluxColors} from '@influxdata/clockface'
+import {Panel, Gradients} from '@influxdata/clockface'
 
 const BucketExplainer: FunctionComponent = () => (
-  <Panel backgroundColor={InfluxColors.Smoke} style={{marginTop: '32px'}}>
+  <Panel gradient={Gradients.PolarExpress} border={true}>
     <Panel.Header>
       <h5>What is a Bucket?</h5>
     </Panel.Header>

ui/src/buckets/components/BucketList.tsx

@@ -18,8 +18,6 @@ import {Sort} from '@influxdata/clockface'
 // Utils
 import {SortTypes} from 'src/shared/utils/sort'
 
-type SortKey = keyof Bucket | 'retentionRules[0].everySeconds'
-
 interface Props {
   buckets: Bucket[]
   emptyState: JSX.Element
@@ -29,9 +27,6 @@ interface Props {
   sortKey: string
   sortDirection: Sort
   sortType: SortTypes
-  onClickColumn: (
-    sortType: SortTypes
-  ) => (nextSort: Sort, sortKey: SortKey) => void
 }
 
 class BucketList extends PureComponent<Props & WithRouterProps> {
@@ -40,38 +35,15 @@ class BucketList extends PureComponent<Props & WithRouterProps> {
   )
 
   public render() {
-    const {sortKey, sortDirection, onClickColumn} = this.props
     return (
-      <>
-        <ResourceList>
-          <ResourceList.Header>
-            <ResourceList.Sorter
-              name="Name"
-              sortKey={this.headerKeys[0]}
-              sort={sortKey === this.headerKeys[0] ? sortDirection : Sort.None}
-              onClick={onClickColumn(SortTypes.String)}
-              testID="name-sorter"
-            />
-            <ResourceList.Sorter
-              name="Retention"
-              sortKey={this.headerKeys[1]}
-              sort={sortKey === this.headerKeys[1] ? sortDirection : Sort.None}
-              onClick={onClickColumn(SortTypes.Float)}
-              testID="retention-sorter"
-            />
-          </ResourceList.Header>
-          <ResourceList.Body emptyState={this.props.emptyState}>
-            {this.listBuckets}
-          </ResourceList.Body>
-        </ResourceList>
-      </>
+      <ResourceList>
+        <ResourceList.Body emptyState={this.props.emptyState}>
+          {this.listBuckets}
+        </ResourceList.Body>
+      </ResourceList>
     )
   }
 
-  private get headerKeys(): SortKey[] {
-    return ['name', 'retentionRules[0].everySeconds']
-  }
-
   private get listBuckets(): JSX.Element[] {
     const {
       buckets,