Allow linking to connection wizard from existing sources in manage sources page

Co-authored-by: Deniz Kusefoglu <deniz@influxdata.com>
Co-authored-by: Daniel Campbell <metalwhirlwind@gmail.com>

ui/src/reusable_ui/components/wizard/WizardOverlay.tsx

@@ -7,12 +7,13 @@ import OverlayHeading from 'src/reusable_ui/components/overlays/OverlayHeading'
 
 import {WizardStepProps} from 'src/types/wizard'
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import {Source} from 'src/types'
 
 interface Props {
   children: Array<ReactElement<WizardStepProps>>
   visible: boolean
   title: string
-  toggleVisibility: (isVisible: boolean) => () => void
+  toggleVisibility: (isVisible: boolean) => (source?: Source) => () => void
   resetWizardState: () => void
   skipLinkText?: string
   maxWidth?: number
@@ -56,7 +57,7 @@ class WizardOverlay extends PureComponent<Props> {
 
   private handleSkip = () => {
     const {toggleVisibility, resetWizardState} = this.props
-    toggleVisibility(false)()
+    toggleVisibility(false)()()
     resetWizardState()
   }
 }

ui/src/sources/components/ConnectionLink.scss

@@ -0,0 +1,14 @@
+.connection-title {
+    color: $c-pool;
+    cursor: pointer;
+    :hover {
+     color: $c-laser;
+    }
+}
+
+.connection-title.link-success {
+    color: $c-rainforest;
+    :hover {
+        color: $c-honeydew;
+    }
+}

ui/src/sources/components/ConnectionLink.tsx

@@ -1,5 +1,4 @@
 import React, {PureComponent} from 'react'
-import {Link} from 'react-router'
 import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
 import {stripPrefix} from 'src/utils/basepath'
 
@@ -8,24 +7,25 @@ import {Source} from 'src/types'
 interface Props {
   source: Source
   currentSource: Source
+  toggleWizard: (isVisible: boolean) => (source?: Source) => () => void
 }
 
 class ConnectionLink extends PureComponent<Props> {
   public render() {
-    const {source} = this.props
+    const {source, toggleWizard} = this.props
     return (
       <h5 className="margin-zero">
         <Authorized
           requiredRole={EDITOR_ROLE}
           replaceWithIfNotAuthorized={<strong>{source.name}</strong>}
         >
-          <Link
-            to={`${stripPrefix(location.pathname)}/${source.id}/edit`}
-            className={this.className}
+          <span
+            onClick={toggleWizard(true)(source)}
+            className={`connection-title ${this.className}`}
           >
             <strong>{source.name}</strong>
             {this.default}
-          </Link>
+          </span>
         </Authorized>
       </h5>
     )

ui/src/sources/components/ConnectionWizard.tsx

@@ -16,7 +16,8 @@ import {Kapacitor, Source} from 'src/types'
 
 interface Props {
   isVisible: boolean
-  toggleVisibility: (isVisible: boolean) => () => void
+  toggleVisibility: (isVisible: boolean) => (source?: Source) => () => void
+  source: Source
 }
 
 interface State {
@@ -26,9 +27,14 @@ interface State {
 
 @ErrorHandling
 class ConnectionWizard extends PureComponent<Props & WithRouterProps, State> {
+  public static getDerivedStateFromProps(props: Props) {
+    const {source} = props
+    return {source}
+  }
   public sourceStepRef: any
   public kapacitorStepRef: any
   public completionStepRef: any
+
   constructor(props: Props & WithRouterProps) {
     super(props)
     this.state = {
@@ -36,6 +42,7 @@ class ConnectionWizard extends PureComponent<Props & WithRouterProps, State> {
       kapacitor: null,
     }
   }
+
   public render() {
     const {isVisible, toggleVisibility} = this.props
     const {source} = this.state

ui/src/sources/components/InfluxTable.tsx

@@ -18,9 +18,9 @@ interface Props {
   deleteKapacitor: DeleteKapacitor
   setActiveKapacitor: SetActiveKapacitor
   onDeleteSource: (source: Source) => void
-  toggleWizard: (isVisible: boolean) => () => void
   setActiveFlux: (source: Source, service: Service) => void
   deleteFlux: (fluxService: Service) => void
+  toggleWizard: (isVisible: boolean) => (source?: Source) => () => void
 }
 
 class InfluxTable extends PureComponent<Props> {
@@ -64,6 +64,7 @@ class InfluxTable extends PureComponent<Props> {
                         setActiveKapacitor={setActiveKapacitor}
                         setActiveFlux={setActiveFlux}
                         deleteFlux={deleteFlux}
+                        toggleWizard={toggleWizard}
                       />
                     )
                   })}

ui/src/sources/components/InfluxTableRow.tsx

@@ -1,5 +1,5 @@
 import React, {PureComponent, ReactElement} from 'react'
-import {Link} from 'react-router'
+import {withRouter, WithRouterProps} from 'react-router'
 
 import * as actions from 'src/shared/actions/sources'
 
@@ -8,7 +8,9 @@ import ConfirmButton from 'src/shared/components/ConfirmButton'
 import KapacitorDropdown from 'src/sources/components/KapacitorDropdown'
 import ConnectionLink from 'src/sources/components/ConnectionLink'
 import FluxDropdown from 'src/sources/components/FluxDropdown'
+import Button from 'src/reusable_ui/components/Button'
 
+import {ComponentColor, ComponentSize, ButtonShape} from 'src/reusable_ui/types'
 import {Source, Service} from 'src/types'
 
 interface Props {
@@ -20,9 +22,10 @@ interface Props {
   setActiveFlux: (source: Source, service: Service) => void
   deleteKapacitor: actions.DeleteKapacitor
   deleteFlux: (fluxService: Service) => void
+  toggleWizard: (isVisible: boolean) => (source?: Source) => () => void
 }
 
-class InfluxTableRow extends PureComponent<Props> {
+class InfluxTableRow extends PureComponent<Props & WithRouterProps> {
   public render() {
     const {
       source,
@@ -32,13 +35,18 @@ class InfluxTableRow extends PureComponent<Props> {
       setActiveFlux,
       deleteKapacitor,
       deleteFlux,
+      toggleWizard,
     } = this.props
 
     return (
       <tr className={this.className}>
         <td>{this.connectButton}</td>
         <td>
-          <ConnectionLink source={source} currentSource={currentSource} />
+          <ConnectionLink
+            source={source}
+            currentSource={currentSource}
+            toggleWizard={toggleWizard}
+          />
           <span>{source.url}</span>
         </td>
         <td className="text-right">
@@ -77,25 +85,32 @@ class InfluxTableRow extends PureComponent<Props> {
   }
 
   private get connectButton(): ReactElement<HTMLDivElement> {
-    const {source} = this.props
     if (this.isCurrentSource) {
       return (
-        <div className="btn btn-success btn-xs source-table--connect">
-          Connected
-        </div>
+        <Button
+          text={'Connected'}
+          color={ComponentColor.Success}
+          size={ComponentSize.ExtraSmall}
+          shape={ButtonShape.StretchToFit}
+        />
       )
     }
-
     return (
-      <Link
-        className="btn btn-default btn-xs source-table--connect"
-        to={`/sources/${source.id}/hosts`}
-      >
-        Connect
-      </Link>
+      <Button
+        text={'Connect'}
+        onClick={this.routeToSource}
+        color={ComponentColor.Default}
+        size={ComponentSize.ExtraSmall}
+        shape={ButtonShape.StretchToFit}
+      />
     )
   }
 
+  private routeToSource = () => {
+    const {source, router} = this.props
+    router.push(`/sources/${source.id}/manage-sources`)
+  }
+
   private get className(): string {
     if (this.isCurrentSource) {
       return 'hightlight'
@@ -110,4 +125,4 @@ class InfluxTableRow extends PureComponent<Props> {
   }
 }
 
-export default InfluxTableRow
+export default withRouter(InfluxTableRow)

ui/src/sources/containers/ManageSources.tsx

@@ -21,6 +21,7 @@ import {getDeep} from 'src/utils/wrappers'
 
 interface State {
   wizardVisibility: boolean
+  sourceInWizard: Source
 }
 
 interface Props {
@@ -45,6 +46,7 @@ class ManageSources extends PureComponent<Props, State> {
     super(props)
     this.state = {
       wizardVisibility: false,
+      sourceInWizard: null,
     }
   }
   public componentDidMount() {
@@ -64,8 +66,7 @@ class ManageSources extends PureComponent<Props, State> {
 
   public render() {
     const {sources, source, deleteKapacitor, deleteFlux, services} = this.props
-    const {wizardVisibility} = this.state
-
+    const {wizardVisibility, sourceInWizard} = this.state
     return (
       <div className="page" id="manage-sources-page">
         <PageHeader titleText="Configuration" sourceIndicator={true} />
@@ -88,6 +89,7 @@ class ManageSources extends PureComponent<Props, State> {
         <ConnectionWizard
           isVisible={wizardVisibility}
           toggleVisibility={this.toggleWizard}
+          source={sourceInWizard}
         />
       </div>
     )
@@ -112,9 +114,12 @@ class ManageSources extends PureComponent<Props, State> {
     }
   }
 
-  private toggleWizard = isVisible => () => {
+  private toggleWizard = (isVisible: boolean) => (
+    source: Source = null
+  ) => () => {
     this.setState({
       wizardVisibility: isVisible,
+      sourceInWizard: source,
     })
   }
 

ui/src/style/chronograf.scss

@@ -75,6 +75,8 @@
 @import 'components/dropdown-placeholder';
 @import 'components/histogram-chart';
 @import 'components/import-dashboard-mappings';
+@import 'src/sources/components/ConnectionLink';
+
 
 // Reusable UI Components
 @import '../reusable_ui/styles';