Protoboard wizard updates (#4601)

* fix background color, increase icon size

* Remove suggest dashboards button, auto-suggest dashboards

* style updates

* Add selected dashboard count to next button

* add label getter

* Skip loads completion card instead of exiting wizard

ui/src/reusable_ui/components/card_select/CardSelectCard.scss

@@ -6,7 +6,7 @@
 .card-select--card {
   min-width: 100%;
   min-height: 100%;
-  background-color: $g1-raven;
+  background-color: $g2-kevlar;
   border-radius: $radius;
   border: $ix-border solid transparent;
   transition: border-color 0.2s ease, background-color 0.2s ease;
@@ -71,7 +71,7 @@
   min-width: 100%;
   display: inline-block;
   position: absolute;
-  bottom: 5%;
+  bottom: 10%;
   font-family: $ix-text-font;
   color: $ix-text-default;
   font-size: $ix-text-base;

ui/src/reusable_ui/components/card_select/ProtoboardIcon.scss

@@ -2,8 +2,8 @@
   position: relative;
 
   svg {
-    margin: 0 20%;
+    margin: 0 10%;
-    width: 60%;
+    width: 80%;
   }
 
   .protoboard-icon--shape {

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

@@ -170,18 +170,16 @@ class WizardController extends PureComponent<Props, State> {
 
   private get skipLink() {
     const {handleSkip, skipLinkText} = this.props
+    const {steps} = this.state
 
-    if (handleSkip) {
+    return (
-      return (
+      <button
-        <button
+        className="btn btn-xs btn-primary btn-link wizard-skip-link"
-          className="btn btn-xs btn-primary btn-link wizard-skip-link"
+        onClick={handleSkip || this.jumpToStep(steps.length - 1)}
-          onClick={handleSkip}
+      >
-        >
+        {skipLinkText}
-          {skipLinkText}
+      </button>
-        </button>
+    )
-      )
-    }
-    return null
   }
 
   private get switchLink() {

ui/src/reusable_ui/components/wizard/WizardFullScreen.scss

@@ -11,6 +11,8 @@
   position: relative;
   min-width: 100%;
   min-height: 100%;
+  background-color: $g0-obsidian;
+  @include gradient-v($g2-kevlar,$g0-obsidian);
 }
 
 .wizard-container {
@@ -18,7 +20,7 @@
   display: inline-flex;
   border-radius: $radius;
   width: 60%;
-  min-width: 800px;
+  min-width: 700px;
-  max-width: 1200px;
+  max-width: 1000px;
   background-color: $g1-raven;
 }

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

@@ -11,9 +11,10 @@
 }
 
 .wizard-step--child {
-  padding: 0 $ix-marg-d $ix-marg-d $ix-marg-d;
+  padding: 0 $ix-marg-d $ix-marg-b $ix-marg-d;
+  margin: $ix-marg-b auto;
   overflow-y: auto;
-  max-height: 30vh;
+  max-height: 45vh;
   min-height: 10vh;
   position: relative;
   z-index: 10;

ui/src/reusable_ui/components/wizard/test/__snapshots__/WizardController.test.tsx.snap

@@ -40,6 +40,12 @@ exports[`WizardController with multiple children matches snapshot with two child
   >
     step child 1
   </WizardStep>
+  <button
+    className="btn btn-xs btn-primary btn-link wizard-skip-link"
+    onClick={[Function]}
+  >
+    skip
+  </button>
 </div>
 `;
 
@@ -82,6 +88,12 @@ exports[`WizardController with multiple children with first step complete matche
   >
     step child 2
   </WizardStep>
+  <button
+    className="btn btn-xs btn-primary btn-link wizard-skip-link"
+    onClick={[Function]}
+  >
+    skip
+  </button>
 </div>
 `;
 
@@ -120,5 +132,11 @@ exports[`WizardController with one child matches snapshot with one child 1`] = `
   >
     only step child
   </WizardStep>
+  <button
+    className="btn btn-xs btn-primary btn-link wizard-skip-link"
+    onClick={[Function]}
+  >
+    skip
+  </button>
 </div>
 `;

ui/src/sources/components/ConnectionWizard.tsx

@@ -32,6 +32,7 @@ interface State {
   dashboardError: boolean
   dashboardsCreated: Protoboard[]
   hasNextOnDashboard: boolean
+  selectedDashboards: number
 }
 
 @ErrorHandling
@@ -59,6 +60,7 @@ class ConnectionWizard extends PureComponent<Props & WithRouterProps, State> {
       dashboardError: false,
       dashboardsCreated: [],
       hasNextOnDashboard: false,
+      selectedDashboards: 0,
     }
   }
 
@@ -103,12 +105,15 @@ class ConnectionWizard extends PureComponent<Props & WithRouterProps, State> {
           tipText="Select Dashboards you would like to create:"
           isComplete={this.isDashboardComplete}
           isErrored={dashboardError}
+          nextLabel={this.dashboardNextLabel}
           onNext={this.handleDashboardNext}
+          previousLabel="Go Back"
         >
           <DashboardStep
             ref={c => (this.dashboardStepRef = c && c.getWrappedInstance())}
             source={source}
             dashboardsCreated={dashboardsCreated}
+            countSelected={this.countSelected}
           />
         </WizardStep>
         <WizardStep
@@ -184,6 +189,22 @@ class ConnectionWizard extends PureComponent<Props & WithRouterProps, State> {
     return response
   }
 
+  private countSelected = (selectedDashboards: number) => {
+    this.setState({selectedDashboards})
+  }
+
+  private get dashboardNextLabel(): string {
+    const {selectedDashboards} = this.state
+
+    if (selectedDashboards) {
+      return `Create ${selectedDashboards} Dashboard${
+        selectedDashboards > 1 ? 's' : ''
+      }`
+    }
+
+    return 'Next'
+  }
+
   // KapacitorStep
   private isKapacitorComplete = () => {
     const {kapacitor} = this.state

ui/src/sources/components/DashboardStep.scss

@@ -17,7 +17,6 @@
   font-weight: 600;
   font-size: 14.5px;
   line-height: 1.55em;
-  color: #a4a8b6;
+  color: $g12-forge;
-  margin-bottom: 3px;
+  margin: $ix-marg-b 0 $ix-marg-a 2px;
-  margin-left: 2px; 
 }

ui/src/sources/components/DashboardStep.tsx

@@ -44,6 +44,7 @@ interface Props {
   notify: typeof notifyAction
   dashboardsCreated: Protoboard[]
   source: Source
+  countSelected: (selectedDashboards: number) => void
 }
 
 @ErrorHandling
@@ -64,7 +65,8 @@ class DashboardStep extends Component<Props, State> {
 
   public async componentDidMount() {
     const protoboards = await getProtoboards()
-    this.setState({protoboards})
+    this.props.countSelected(0)
+    this.setState({protoboards}, this.handleSuggest)
   }
 
   public next = async (): Promise<NextReturn> => {
@@ -106,12 +108,6 @@ class DashboardStep extends Component<Props, State> {
               placeholder="Filter by name..."
               onSearch={this.setSearchTerm}
             />
-            <button
-              className="btn btn-sm btn-primary"
-              onClick={this.handleSuggest}
-            >
-              Suggest dashboards
-            </button>
           </div>
           {this.suggestedDashboardCards}
           {this.dashboardCards}
@@ -194,21 +190,23 @@ class DashboardStep extends Component<Props, State> {
     const {protoboards} = this.state
     const {source, notify} = this.props
 
-    const suggestedProtoboardsList = await getSuggestedProtoboards(
+    if (source) {
-      source,
+      const suggestedProtoboardsList = await getSuggestedProtoboards(
-      protoboards
+        source,
-    )
+        protoboards
+      )
 
-    if (suggestedProtoboardsList.length === 0) {
+      if (suggestedProtoboardsList.length === 0) {
-      notify(notifyNoSuggestedDashboards())
+        notify(notifyNoSuggestedDashboards())
-      return
+        return
+      }
+
+      const suggestedProtoboards = protoboards.filter(p =>
+        suggestedProtoboardsList.includes(p.meta.name)
+      )
+
+      this.setState({suggestedProtoboards})
     }
-
-    const suggestedProtoboards = protoboards.filter(p =>
-      suggestedProtoboardsList.includes(p.meta.name)
-    )
-
-    this.setState({suggestedProtoboards})
   }
 
   private toggleChecked = (id: string) => () => {
@@ -225,11 +223,22 @@ class DashboardStep extends Component<Props, State> {
         newSelected[id] = true
       }
 
-      this.setState({
+      this.setState(
-        selected: newSelected,
+        {
-      })
+          selected: newSelected,
+        },
+        this.countSelectedDashboards
+      )
     }
   }
+
+  private countSelectedDashboards = () => {
+    const {countSelected} = this.props
+    const {selected} = this.state
+    const selectedDashboards = _.filter(selected, v => v === true).length
+
+    countSelected(selectedDashboards)
+  }
 }
 
 const mdtp = {

ui/src/sources/components/WelcomeStep.scss

@@ -1,6 +1,7 @@
 .wizard-step--bookend {
   text-align: center;
+
   .auth-logo {
-    margin: $ix-marg-d auto;
+    margin: 0 auto $ix-marg-d auto;
   }
 }

ui/src/sources/containers/OnboardingWizard.tsx

@@ -30,6 +30,7 @@ interface State {
   dashboardError: boolean
   dashboardsCreated: Protoboard[]
   hasNextOnDashboard: boolean
+  selectedDashboards: number
 }
 
 @ErrorHandling
@@ -51,6 +52,7 @@ class OnboardingWizard extends PureComponent<Props, State> {
       dashboardError: false,
       dashboardsCreated: [],
       hasNextOnDashboard: false,
+      selectedDashboards: 0,
     }
   }
 
@@ -68,7 +70,6 @@ class OnboardingWizard extends PureComponent<Props, State> {
         <Notifications />
         <WizardFullScreen
           skipLinkText={'skip'}
-          handleSkip={this.handleCompletionNext}
           switchLinkText={'switch organizations'}
           handleSwitch={this.resetAndGotoPurgatory}
           isUsingAuth={isUsingAuth}
@@ -109,6 +110,7 @@ class OnboardingWizard extends PureComponent<Props, State> {
             tipText="Select dashboards you would like to create:"
             isComplete={this.isDashboardComplete}
             isErrored={dashboardError}
+            nextLabel={this.dashboardNextLabel}
             onNext={this.handleDashboardNext}
             previousLabel="Go Back"
           >
@@ -116,6 +118,7 @@ class OnboardingWizard extends PureComponent<Props, State> {
               ref={c => (this.dashboardStepRef = c && c.getWrappedInstance())}
               dashboardsCreated={dashboardsCreated}
               source={source}
+              countSelected={this.countSelected}
             />
           </WizardStep>
           <WizardStep
@@ -194,6 +197,22 @@ class OnboardingWizard extends PureComponent<Props, State> {
     return response
   }
 
+  private countSelected = (selectedDashboards: number) => {
+    this.setState({selectedDashboards})
+  }
+
+  private get dashboardNextLabel(): string {
+    const {selectedDashboards} = this.state
+
+    if (selectedDashboards) {
+      return `Create ${selectedDashboards} Dashboard${
+        selectedDashboards > 1 ? 's' : ''
+      }`
+    }
+
+    return 'Next'
+  }
+
   // KapacitorStep
   private isKapacitorComplete = () => {
     const {kapacitor} = this.state