Place wizard types in appropriate files

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

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

@@ -1,26 +1,7 @@
-import React, {PureComponent, ReactElement, ReactNode} from 'react'
+import React, {PureComponent, ReactElement} from 'react'
 import WizardProgressBar from 'src/reusable_ui/components/wizard/WizardProgressBar'
 
-interface WizardStepProps {
+import {WizardStepProps, StepStatus, Step} from 'src/types/wizard'
-  children: ReactNode
-  title: string
-  isComplete: () => boolean
-  onPrevious: () => void
-  onNext: () => void
-  increment?: () => void
-  decrement?: () => void
-}
-
-enum StepStatus {
-  Incomplete = 'circle-thick',
-  Complete = 'checkmark',
-  Error = 'remove',
-}
-
-interface Step {
-  title: string
-  stepStatus: StepStatus
-}
 
 interface State {
   steps: Step[]

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

@@ -1,19 +1,11 @@
-import React, {PureComponent, ReactElement, ReactNode} from 'react'
+import React, {PureComponent, ReactElement} from 'react'
 import OverlayBody from 'src/reusable_ui/components/overlays/OverlayBody'
 import OverlayContainer from 'src/reusable_ui/components/overlays/OverlayContainer'
 import OverlayTechnology from 'src/reusable_ui/components/overlays/OverlayTechnology'
 import WizardCloak from 'src/reusable_ui/components/wizard/WizardCloak'
 import OverlayHeading from 'src/reusable_ui/components/overlays/OverlayHeading'
-interface WizardStepProps {
+
-  children: ReactNode
+import {WizardStepProps} from 'src/types/wizard'
-  title: string
-  isComplete: () => boolean
-  onPrevious: () => void
-  onNext: () => void
-  increment?: () => void
-  decrement?: () => void
-}
-// import {} from 'src/types'
 
 interface Props {
   children: Array<ReactElement<WizardStepProps>>

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

@@ -1,27 +1,10 @@
 import React, {PureComponent} from 'react'
 import ProgressConnector from 'src/reusable_ui/components/wizard/ProgressConnector'
 
+import {Step, connectorState, StepStatus} from 'src/types/wizard'
+
 import 'src/reusable_ui/components/wizard/WizardProgressBar.scss'
 
-// import {} from 'src/types'
-
-enum statusStates {
-  None = 'none',
-  Some = 'some',
-  Full = 'full',
-}
-
-enum StepStatus {
-  Incomplete = 'circle-thick',
-  Complete = 'checkmark',
-  Error = 'remove',
-}
-
-interface Step {
-  title: string
-  stepStatus: StepStatus
-}
-
 interface Props {
   steps: Step[]
   currentStepIndex: number
@@ -53,10 +36,10 @@ class WizardProgressBar extends PureComponent<Props> {
       // CONNECTION ELE
       let connectorStatus
       if (i > 0 && steps[i - 1].stepStatus === StepStatus.Complete) {
-        connectorStatus = statusStates.Some
+        connectorStatus = connectorState.Some
 
         if (stepStatus === StepStatus.Complete) {
-          connectorStatus = statusStates.Full
+          connectorStatus = connectorState.Full
         }
       }
 

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

@@ -2,8 +2,6 @@ import React, {PureComponent, ReactNode} from 'react'
 
 import 'src/reusable_ui/components/wizard/WizardStep.scss'
 
-// import {} from 'src/types'
-
 interface Props {
   children: ReactNode
   title: string

ui/src/sources/components/GrandWizard.tsx

@@ -2,8 +2,6 @@ import React, {PureComponent} from 'react'
 import WizardOverlay from 'src/reusable_ui/components/wizard/WizardOverlay'
 import WizardStep from 'src/reusable_ui/components/wizard/WizardStep'
 
-// import {} from 'src/types'
-
 interface Props {
   wizardVisibility: boolean
   toggleVisibility: (isVisible: boolean) => () => void
@@ -13,7 +11,7 @@ interface State {
   completion: object
 }
 
-class WizardWithSteps extends PureComponent<Props, State> {
+class GrandWizard extends PureComponent<Props, State> {
   constructor(props: Props) {
     super(props)
     this.state = {
@@ -108,4 +106,4 @@ class WizardWithSteps extends PureComponent<Props, State> {
   }
 }
 
-export default WizardWithSteps
+export default GrandWizard

ui/src/types/wizard.ts

@@ -0,0 +1,28 @@
+import {ReactNode} from 'react'
+
+export interface WizardStepProps {
+  children: ReactNode
+  title: string
+  isComplete: () => boolean
+  onPrevious: () => void
+  onNext: () => void
+  increment?: () => void
+  decrement?: () => void
+}
+
+export enum connectorState {
+  None = 'none',
+  Some = 'some',
+  Full = 'full',
+}
+
+export enum StepStatus {
+  Incomplete = 'circle-thick',
+  Complete = 'checkmark',
+  Error = 'remove',
+}
+
+export interface Step {
+  title: string
+  stepStatus: StepStatus
+}