feat(sampledata): Route from buckets index to Data Explorer (#17085)

* feat(sampledata): Add routing to de from bucket name

* feat(sampledata): Change rename edit bucket flow

* feat(sampledata): Add onclick behavior to system buckets

* feat(sampledata): Move rename button

* feat(sampledata): Remove rename bucket button from create bucket overlay

* feat(sampledata): Fix bucket tests

* feat(sampledata): Update changelog

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## v2.0.0-beta.6 [unreleased]
 
 ### Features
+1. [17085](https://github.com/influxdata/influxdb/pull/17085): Clicking on bucket name takes user to Data Explorer with bucket selected
 
 1. [17095](https://github.com/influxdata/influxdb/pull/17095): Extend pkger dashboards with table view support
 

ui/cypress/e2e/buckets.test.ts

@@ -49,7 +49,7 @@ describe('Buckets', () => {
 
     it("can update a bucket's retention rules", () => {
       cy.get<Bucket>('@bucket').then(({name}: Bucket) => {
-        cy.getByTestID(`bucket--card--name ${name}`).click()
+        cy.getByTestID(`bucket-settings`).click()
         cy.getByTestID(`bucket--card--name ${name}`).should(
           'not.contain',
           '7 days'

ui/src/buckets/components/BucketCard.tsx

@@ -70,19 +70,10 @@ class BucketRow extends PureComponent<Props & WithRouterProps & DispatchProps> {
 
   private get cardName(): JSX.Element {
     const {bucket} = this.props
-    if (bucket.type === 'user') {
-      return (
-        <ResourceCard.Name
-          testID={`bucket--card--name ${bucket.name}`}
-          onClick={this.handleNameClick}
-          name={bucket.name}
-        />
-      )
-    }
-
     return (
       <ResourceCard.Name
         testID={`bucket--card--name ${bucket.name}`}
+        onClick={this.handleNameClick}
         name={bucket.name}
       />
     )
@@ -126,10 +117,10 @@ class BucketRow extends PureComponent<Props & WithRouterProps & DispatchProps> {
             onAddScraper={this.handleAddScraper}
           />
           <Button
-            text="Rename"
-            testID="bucket-rename"
+            text="Settings"
+            testID="bucket-settings"
             size={ComponentSize.ExtraSmall}
-            onClick={this.handleRenameBucket}
+            onClick={this.handleClickSettings}
           />
           <FeatureFlag name="deleteWithPredicate">
             <Button
@@ -162,24 +153,24 @@ class BucketRow extends PureComponent<Props & WithRouterProps & DispatchProps> {
     onDeleteData(bucket)
   }
 
-  private handleRenameBucket = () => {
+  private handleClickSettings = () => {
     const {
       params: {orgID},
       bucket: {id},
       router,
     } = this.props
 
-    router.push(`/orgs/${orgID}/load-data/buckets/${id}/rename`)
+    router.push(`/orgs/${orgID}/load-data/buckets/${id}/edit`)
   }
 
   private handleNameClick = (): void => {
     const {
       params: {orgID},
-      bucket: {id},
+      bucket: {name},
       router,
     } = this.props
 
-    router.push(`/orgs/${orgID}/load-data/buckets/${id}/edit`)
+    router.push(`/orgs/${orgID}/data-explorer?bucket=${name}`)
   }
 
   private handleAddCollector = (): void => {

ui/src/buckets/components/BucketOverlayForm.tsx

@@ -28,6 +28,7 @@ interface Props {
   onChangeInput: (e: ChangeEvent<HTMLInputElement>) => void
   disableRenaming: boolean
   buttonText: string
+  onClickRename?: () => void
 }
 
 export default class BucketOverlayForm extends PureComponent<Props> {
@@ -43,6 +44,7 @@ export default class BucketOverlayForm extends PureComponent<Props> {
       onChangeInput,
       onChangeRuleType,
       onChangeRetentionRule,
+      onClickRename,
     } = this.props
 
     const nameInputStatus = disableRenaming && ComponentStatus.Disabled
@@ -91,6 +93,13 @@ export default class BucketOverlayForm extends PureComponent<Props> {
                   onClick={onCloseModal}
                   type={ButtonType.Button}
                 />
+                {buttonText === 'Save Changes' && (
+                  <Button
+                    text="Rename"
+                    color={ComponentColor.Danger}
+                    onClick={onClickRename}
+                  />
+                )}
                 <Button
                   text={buttonText}
                   color={this.submitButtonColor}
@@ -119,7 +128,7 @@ export default class BucketOverlayForm extends PureComponent<Props> {
 
   private get nameHelpText(): string {
     if (this.props.disableRenaming) {
-      return 'To rename the bucket use the RENAME button. Bucket renaming is not allowed here.'
+      return 'To rename bucket use the RENAME button below'
     }
 
     return ''

ui/src/buckets/components/UpdateBucketOverlay.tsx

@@ -114,6 +114,10 @@ const UpdateBucketOverlay: FunctionComponent<Props> = ({
     router.push(`/orgs/${orgID}/load-data/buckets`)
   }
 
+  const handleClickRename = () => {
+    router.push(`/orgs/${orgID}/load-data/buckets/${bucketID}/rename`)
+  }
+
   const rules = get(bucketDraft, 'retentionRules', [])
   const rule = rules.find(r => r.type === 'expire')
 
@@ -140,6 +144,7 @@ const UpdateBucketOverlay: FunctionComponent<Props> = ({
               retentionSeconds={retentionSeconds}
               onChangeRuleType={handleChangeRuleType}
               onChangeRetentionRule={handleChangeRetentionRule}
+              onClickRename={handleClickRename}
             />
           </Overlay.Body>
         </SpinnerContainer>

ui/src/dataExplorer/components/DataExplorer.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {PureComponent} from 'react'
+import React, {FC, useEffect} from 'react'
 import {connect} from 'react-redux'
 
 // Components
@@ -9,40 +9,46 @@ import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
 
 // Actions
 import {setActiveTimeMachine} from 'src/timeMachine/actions'
+import {setBuilderBucketIfExists} from 'src/timeMachine/actions/queryBuilder'
 
 // Utils
 import {HoverTimeProvider} from 'src/dashboards/utils/hoverTime'
 import {queryBuilderFetcher} from 'src/timeMachine/apis/QueryBuilderFetcher'
+import {readQueryParams} from 'src/shared/utils/queryParams'
 
 interface DispatchProps {
   onSetActiveTimeMachine: typeof setActiveTimeMachine
+  onSetBuilderBucketIfExists: typeof setBuilderBucketIfExists
 }
 
 type Props = DispatchProps
-class DataExplorer extends PureComponent<Props, {}> {
-  constructor(props: Props) {
-    super(props)
 
-    props.onSetActiveTimeMachine('de')
+const DataExplorer: FC<Props> = ({
+  onSetActiveTimeMachine,
+  onSetBuilderBucketIfExists,
+}) => {
+  useEffect(() => {
+    const bucketQP = readQueryParams()['bucket']
+    onSetActiveTimeMachine('de')
     queryBuilderFetcher.clearCache()
-  }
-
-  public render() {
-    return (
-      <LimitChecker>
-        <RateLimitAlert />
-        <div className="data-explorer">
-          <HoverTimeProvider>
-            <TimeMachine />
-          </HoverTimeProvider>
-        </div>
-      </LimitChecker>
-    )
-  }
+    onSetBuilderBucketIfExists(bucketQP)
+  }, [])
+
+  return (
+    <LimitChecker>
+      <RateLimitAlert />
+      <div className="data-explorer">
+        <HoverTimeProvider>
+          <TimeMachine />
+        </HoverTimeProvider>
+      </div>
+    </LimitChecker>
+  )
 }
 
 const mdtp: DispatchProps = {
   onSetActiveTimeMachine: setActiveTimeMachine,
+  onSetBuilderBucketIfExists: setBuilderBucketIfExists,
 }
 
 export default connect<{}, DispatchProps, {}>(

ui/src/timeMachine/actions/queryBuilder.ts

@@ -13,6 +13,8 @@ import {
   BuilderAggregateFunctionType,
   GetState,
   RemoteDataState,
+  ResourceType,
+  Bucket,
 } from 'src/types'
 import {Dispatch} from 'react'
 import {BuilderFunctionsType} from '@influxdata/influx'
@@ -23,6 +25,7 @@ import {
 
 // Selectors
 import {getOrg} from 'src/organizations/selectors'
+import {getAll} from 'src/resources/selectors'
 
 export type Action =
   | ReturnType<typeof setBuilderAggregateFunctionType>
@@ -404,3 +407,13 @@ export const reloadTagSelectors = () => (dispatch: Dispatch<Action>) => {
   dispatch(setBuilderTagsStatus(RemoteDataState.Loading))
   dispatch(loadTagSelector(0))
 }
+
+export const setBuilderBucketIfExists = (bucketName: string) => (
+  dispatch: Dispatch<Action>,
+  getState: GetState
+) => {
+  const buckets = getAll<Bucket>(getState(), ResourceType.Buckets)
+  if (buckets.find(b => b.name === bucketName)) {
+    dispatch(setBuilderBucket(bucketName, true))
+  }
+}