Merge branch 'master' into chore/update-flux

ui/src/buckets/components/DemoDataDropdown.scss

@@ -1,3 +1,7 @@
+.demodata-dropdown {
+  margin-right: $cf-marg-b;
+}
+
 .demodata-dropdown--item-contents {
   display: inline-flex;
   align-items: center;
@@ -8,6 +12,12 @@
   opacity: 0;
 }
 
+.demodata-dropdown--item,
+.demodata-dropdown--item__added {
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
 .demodata-dropdown--item__added,
 .demodata-dropdown--item__added:hover {
   .demodata-dropdown--item-icon {

ui/src/buckets/components/DemoDataDropdown.tsx

@@ -3,9 +3,6 @@ import React, {FC, useEffect} from 'react'
 import {connect} from 'react-redux'
 import {get, sortBy} from 'lodash'
 
-// Utils
-import {getAll} from 'src/resources/selectors'
-
 // Actions
 import {
   getDemoDataBucketMembership as getDemoDataBucketMembershipAction,
@@ -19,7 +16,7 @@ import {ComponentColor, Dropdown, Icon, IconFont} from '@influxdata/clockface'
 import {AppState, Bucket, ResourceType} from 'src/types'
 
 interface StateProps {
-  ownBuckets: Bucket[]
+  ownBucketsByID: {[id: string]: Bucket}
   demoDataBuckets: Bucket[]
 }
 
@@ -31,7 +28,7 @@ interface DispatchProps {
 type Props = DispatchProps & StateProps
 
 const DemoDataDropdown: FC<Props> = ({
-  ownBuckets,
+  ownBucketsByID,
   demoDataBuckets,
   getDemoDataBucketMembership,
   getDemoDataBuckets,
@@ -44,14 +41,12 @@ const DemoDataDropdown: FC<Props> = ({
     return null
   }
 
-  const ownBucketNames = ownBuckets.map(o => o.name.toLocaleLowerCase())
-
   const sortedBuckets = sortBy(demoDataBuckets, d => {
     return d.name.toLocaleLowerCase()
   })
 
   const dropdownItems = sortedBuckets.map(b => {
-    if (ownBucketNames.includes(b.name.toLocaleLowerCase())) {
+    if (ownBucketsByID[b.id]) {
       return (
         <Dropdown.Item
           testID={`dropdown-item--demodata-${b.name}`}
@@ -96,7 +91,8 @@ const DemoDataDropdown: FC<Props> = ({
   return (
     <Dropdown
       testID="dropdown--demodata"
-      style={{width: '200px', marginRight: '8px'}}
+      style={{width: '220px'}}
+      className="demodata-dropdown"
       button={(active, onClick) => (
         <Dropdown.Button
           active={active}
@@ -116,7 +112,7 @@ const DemoDataDropdown: FC<Props> = ({
 }
 
 const mstp = (state: AppState): StateProps => ({
-  ownBuckets: getAll<Bucket>(state, ResourceType.Buckets),
+  ownBucketsByID: state.resources[ResourceType.Buckets].byID,
   demoDataBuckets: get(state, 'cloud.demoData.buckets', []) as Bucket[],
 })