feat(ui): expose bucketid

CHANGELOG.md

@@ -4,6 +4,10 @@
 
 1. [18279](https://github.com/influxdata/influxdb/pull/18279): Make all pkg applications stateful via stacks
 
+### UI Improvements
+
+1. [18319](https://github.com/influxdata/influxdb/pull/18319): Display bucket ID in bucket list and enable 1 click copying
+
 ## v2.0.0-beta.11 [2020-05-26]
 
 ### Features

ui/src/buckets/components/BucketCard.tsx

@@ -1,40 +1,19 @@
 // Libraries
 import React, {FC} from 'react'
 import {withRouter, WithRouterProps} from 'react-router'
-import {connect} from 'react-redux'
 import _ from 'lodash'
 
 // Components
-import {
-  Button,
-  ResourceCard,
-  FlexBox,
-  FlexDirection,
-  ComponentSize,
-} from '@influxdata/clockface'
+import {ResourceCard} from '@influxdata/clockface'
 import BucketContextMenu from 'src/buckets/components/BucketContextMenu'
-import BucketAddDataButton from 'src/buckets/components/BucketAddDataButton'
-import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
-import {FeatureFlag} from 'src/shared/utils/featureFlag'
+import BucketCardMeta from 'src/buckets/components/BucketCardMeta'
+import BucketCardActions from 'src/buckets/components/BucketCardActions'
 
 // Constants
 import {isSystemBucket} from 'src/buckets/constants/index'
 
-// Actions
-import {addBucketLabel, deleteBucketLabel} from 'src/buckets/actions/thunks'
-import {setBucketInfo} from 'src/dataLoaders/actions/steps'
-import {setDataLoadersType} from 'src/dataLoaders/actions/dataLoaders'
-
 // Types
-import {Label, OwnBucket} from 'src/types'
-import {DataLoaderType} from 'src/types/dataLoaders'
-
-interface DispatchProps {
-  onAddBucketLabel: typeof addBucketLabel
-  onDeleteBucketLabel: typeof deleteBucketLabel
-  onSetDataLoadersBucket: typeof setBucketInfo
-  onSetDataLoadersType: typeof setDataLoadersType
-}
+import {OwnBucket} from 'src/types'
 
 interface Props {
   bucket: OwnBucket
@@ -44,123 +23,18 @@ interface Props {
   onFilterChange: (searchTerm: string) => void
 }
 
-const BucketCard: FC<Props & WithRouterProps & DispatchProps> = ({
+const BucketCard: FC<Props & WithRouterProps> = ({
   bucket,
   onDeleteBucket,
   onFilterChange,
-  onAddBucketLabel,
-  onDeleteBucketLabel,
   onDeleteData,
   router,
   params: {orgID},
-  onSetDataLoadersBucket,
-  onSetDataLoadersType,
 }) => {
-  const handleAddLabel = (label: Label) => {
-    onAddBucketLabel(bucket.id, label)
-  }
-
-  const handleRemoveLabel = (label: Label) => {
-    onDeleteBucketLabel(bucket.id, label)
-  }
-
-  const handleClickSettings = () => {
-    router.push(`/orgs/${orgID}/load-data/buckets/${bucket.id}/edit`)
-  }
-
   const handleNameClick = () => {
     router.push(`/orgs/${orgID}/data-explorer?bucket=${bucket.name}`)
   }
 
-  const handleAddCollector = () => {
-    onSetDataLoadersBucket(orgID, bucket.name, bucket.id)
-
-    onSetDataLoadersType(DataLoaderType.Streaming)
-    router.push(`/orgs/${orgID}/load-data/buckets/${bucket.id}/telegrafs/new`)
-  }
-
-  const handleAddLineProtocol = () => {
-    onSetDataLoadersBucket(orgID, bucket.name, bucket.id)
-
-    onSetDataLoadersType(DataLoaderType.LineProtocol)
-    router.push(
-      `/orgs/${orgID}/load-data/buckets/${bucket.id}/line-protocols/new`
-    )
-  }
-
-  const handleAddClientLibrary = (): void => {
-    onSetDataLoadersBucket(orgID, bucket.name, bucket.id)
-    onSetDataLoadersType(DataLoaderType.ClientLibrary)
-
-    router.push(`/orgs/${orgID}/load-data/client-libraries`)
-  }
-
-  const handleAddScraper = () => {
-    onSetDataLoadersBucket(orgID, bucket.name, bucket.id)
-
-    onSetDataLoadersType(DataLoaderType.Scraping)
-    router.push(`/orgs/${orgID}/load-data/buckets/${bucket.id}/scrapers/new`)
-  }
-
-  const actionButtons = (
-    <FlexBox
-      direction={FlexDirection.Row}
-      margin={ComponentSize.Small}
-      style={{marginTop: '4px'}}
-    >
-      <InlineLabels
-        selectedLabelIDs={bucket.labels}
-        onFilterChange={onFilterChange}
-        onAddLabel={handleAddLabel}
-        onRemoveLabel={handleRemoveLabel}
-      />
-      <BucketAddDataButton
-        onAddCollector={handleAddCollector}
-        onAddLineProtocol={handleAddLineProtocol}
-        onAddClientLibrary={handleAddClientLibrary}
-        onAddScraper={handleAddScraper}
-      />
-      <Button
-        text="Settings"
-        testID="bucket-settings"
-        size={ComponentSize.ExtraSmall}
-        onClick={handleClickSettings}
-      />
-      <FeatureFlag name="deleteWithPredicate">
-        <Button
-          text="Delete Data By Filter"
-          testID="bucket-delete-bucket"
-          size={ComponentSize.ExtraSmall}
-          onClick={() => onDeleteData(bucket)}
-        />
-      </FeatureFlag>
-    </FlexBox>
-  )
-
-  let cardMeta = (
-    <ResourceCard.Meta>
-      <span data-testid="bucket-retention">
-        Retention: {_.capitalize(bucket.readableRetention)}
-      </span>
-    </ResourceCard.Meta>
-  )
-
-  if (bucket.type !== 'user') {
-    cardMeta = (
-      <ResourceCard.Meta>
-        <span
-          className="system-bucket"
-          key={`system-bucket-indicator-${bucket.id}`}
-        >
-          System Bucket
-        </span>
-        <span data-testid="bucket-retention">
-          Retention: {_.capitalize(bucket.readableRetention)}
-        </span>
-      </ResourceCard.Meta>
-    )
-  }
-
   return (
     <ResourceCard
       testID={`bucket-card ${bucket.name}`}
@@ -175,20 +49,16 @@ const BucketCard: FC<Props & WithRouterProps & DispatchProps> = ({
         onClick={handleNameClick}
         name={bucket.name}
       />
-      {cardMeta}
-      {bucket.type === 'user' && actionButtons}
+      <BucketCardMeta bucket={bucket} />
+      <BucketCardActions
+        bucket={bucket}
+        orgID={orgID}
+        bucketType={bucket.type}
+        onDeleteData={onDeleteData}
+        onFilterChange={onFilterChange}
+      />
     </ResourceCard>
   )
 }
 
-const mdtp: DispatchProps = {
-  onAddBucketLabel: addBucketLabel,
-  onDeleteBucketLabel: deleteBucketLabel,
-  onSetDataLoadersBucket: setBucketInfo,
-  onSetDataLoadersType: setDataLoadersType,
-}
-
-export default connect<{}, DispatchProps>(
-  null,
-  mdtp
-)(withRouter<Props>(BucketCard))
+export default withRouter<Props>(BucketCard)

ui/src/buckets/components/BucketCardActions.tsx

@@ -0,0 +1,146 @@
+// Libraries
+import React, {FC} from 'react'
+import {withRouter, WithRouterProps} from 'react-router'
+import {connect} from 'react-redux'
+import _ from 'lodash'
+
+// Components
+import {
+  Button,
+  FlexBox,
+  FlexDirection,
+  ComponentSize,
+} from '@influxdata/clockface'
+import BucketAddDataButton from 'src/buckets/components/BucketAddDataButton'
+import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
+import {FeatureFlag} from 'src/shared/utils/featureFlag'
+
+// Actions
+import {addBucketLabel, deleteBucketLabel} from 'src/buckets/actions/thunks'
+import {setBucketInfo} from 'src/dataLoaders/actions/steps'
+import {setDataLoadersType} from 'src/dataLoaders/actions/dataLoaders'
+
+// Types
+import {Label, OwnBucket} from 'src/types'
+import {DataLoaderType} from 'src/types/dataLoaders'
+
+interface DispatchProps {
+  onAddBucketLabel: typeof addBucketLabel
+  onDeleteBucketLabel: typeof deleteBucketLabel
+  onSetDataLoadersBucket: typeof setBucketInfo
+  onSetDataLoadersType: typeof setDataLoadersType
+}
+
+interface Props {
+  bucket: OwnBucket
+  bucketType: 'user' | 'system'
+  orgID: string
+  onDeleteData: (b: OwnBucket) => void
+  onFilterChange: (searchTerm: string) => void
+}
+
+const BucketCardActions: FC<Props & WithRouterProps & DispatchProps> = ({
+  bucket,
+  bucketType,
+  orgID,
+  onFilterChange,
+  onAddBucketLabel,
+  onDeleteBucketLabel,
+  onDeleteData,
+  router,
+  onSetDataLoadersBucket,
+  onSetDataLoadersType,
+}) => {
+  if (bucketType === 'system') {
+    return null
+  }
+
+  const handleAddLabel = (label: Label) => {
+    onAddBucketLabel(bucket.id, label)
+  }
+
+  const handleRemoveLabel = (label: Label) => {
+    onDeleteBucketLabel(bucket.id, label)
+  }
+
+  const handleClickSettings = () => {
+    router.push(`/orgs/${orgID}/load-data/buckets/${bucket.id}/edit`)
+  }
+
+  const handleAddCollector = () => {
+    onSetDataLoadersBucket(orgID, bucket.name, bucket.id)
+
+    onSetDataLoadersType(DataLoaderType.Streaming)
+    router.push(`/orgs/${orgID}/load-data/buckets/${bucket.id}/telegrafs/new`)
+  }
+
+  const handleAddLineProtocol = () => {
+    onSetDataLoadersBucket(orgID, bucket.name, bucket.id)
+
+    onSetDataLoadersType(DataLoaderType.LineProtocol)
+    router.push(
+      `/orgs/${orgID}/load-data/buckets/${bucket.id}/line-protocols/new`
+    )
+  }
+
+  const handleAddClientLibrary = (): void => {
+    onSetDataLoadersBucket(orgID, bucket.name, bucket.id)
+    onSetDataLoadersType(DataLoaderType.ClientLibrary)
+
+    router.push(`/orgs/${orgID}/load-data/client-libraries`)
+  }
+
+  const handleAddScraper = () => {
+    onSetDataLoadersBucket(orgID, bucket.name, bucket.id)
+
+    onSetDataLoadersType(DataLoaderType.Scraping)
+    router.push(`/orgs/${orgID}/load-data/buckets/${bucket.id}/scrapers/new`)
+  }
+
+  return (
+    <FlexBox
+      direction={FlexDirection.Row}
+      margin={ComponentSize.Small}
+      style={{marginTop: '4px'}}
+    >
+      <InlineLabels
+        selectedLabelIDs={bucket.labels}
+        onFilterChange={onFilterChange}
+        onAddLabel={handleAddLabel}
+        onRemoveLabel={handleRemoveLabel}
+      />
+      <BucketAddDataButton
+        onAddCollector={handleAddCollector}
+        onAddLineProtocol={handleAddLineProtocol}
+        onAddClientLibrary={handleAddClientLibrary}
+        onAddScraper={handleAddScraper}
+      />
+      <Button
+        text="Settings"
+        testID="bucket-settings"
+        size={ComponentSize.ExtraSmall}
+        onClick={handleClickSettings}
+      />
+      <FeatureFlag name="deleteWithPredicate">
+        <Button
+          text="Delete Data By Filter"
+          testID="bucket-delete-bucket"
+          size={ComponentSize.ExtraSmall}
+          onClick={() => onDeleteData(bucket)}
+        />
+      </FeatureFlag>
+    </FlexBox>
+  )
+}
+
+const mdtp: DispatchProps = {
+  onAddBucketLabel: addBucketLabel,
+  onDeleteBucketLabel: deleteBucketLabel,
+  onSetDataLoadersBucket: setBucketInfo,
+  onSetDataLoadersType: setDataLoadersType,
+}
+
+export default connect<{}, DispatchProps>(
+  null,
+  mdtp
+)(withRouter<Props>(BucketCardActions))

ui/src/buckets/components/BucketCardMeta.scss

@@ -0,0 +1,20 @@
+.copy-bucket-id {
+  transition: color 0.25s ease;
+
+  &:hover {
+    cursor: pointer;
+    color: $c-pool;
+  }
+}
+
+.copy-bucket-id--helper {
+  color: $g13-mist;
+  transition: opacity 0.25s ease;
+  opacity: 0;
+  display: inline-block;
+  margin-left: $cf-marg-b;
+}
+
+.copy-bucket-id:hover .copy-bucket-id--helper {
+  opacity: 1;
+}