Merge pull request #1667 from CodeNow/aha-guide-overview

Aha guide overview

Author: runnabro

client/assets/styles/scss/components/aha-sidebar.scss

@@ -45,9 +45,20 @@
     }
   }
 
+  .aha-overview {
+    animation: slide-left .45s ease-in-out forwards;
+    border-bottom: 1px solid $gray-lightest;
+    margin-bottom: 15px;
+    padding: 32px 0 42px;
+
+    .btn {
+      align-self: center;
+    }
+  }
+
   .aha-guide {
     animation: slide-left .45s ease-in-out forwards;
-    background: $gray-lighterest;
+    background: $white;
     border: 1px solid $gray-lighter;
     border-radius: $input-border-radius-lg;
     opacity: 0;
@@ -59,15 +70,13 @@
       }
     }
 
-    &.complete {
-      background: $green-dark;
-      border-color: $green;
-      color: $white;
-    }
-
     &.disabled {
-      border-color: $gray-lightest;
-      color: $gray-light;
+      background: $gray-lighterest;
+      color: rgba($gray,.4);
+
+      .iconnables {
+        background: $gray-lighterest;
+      }
     }
 
     + .aha-guide {

client/assets/styles/scss/layout/environment-header.scss

@@ -37,6 +37,10 @@
       animation: scale .4s ease;
     }
 
+    &.scale-in-modal {
+      animation: scale-in-modal .15s ease-out;
+    }
+
     .icons-add {
       background: $white;
       border-radius: $input-border-radius;

client/assets/styles/scss/layout/layout.scss

@@ -70,6 +70,8 @@
     }
 
     &.disabled {
+      background: none;
+      border-color: transparent;
       cursor: not-allowed;
       opacity: .6;
     }

client/assets/styles/scss/modals/modals.scss

@@ -34,7 +34,7 @@
 
 // div.modal-dialog
 .modal-dialog {
-  animation: scale-in-modal .15s ease-in-out;
+  animation: scale-in-modal .15s ease-out;
   background: $gray-lighterest;
   border: $input-border-radius solid $gray-lighter;
   border-radius: $input-border-radius-lg;

client/directives/components/ahaGuide/ahaSidebarView.jade

@@ -1,13 +1,25 @@
 .grid-block.shrink.align-center.justify-right
   svg.iconnables.icons-close(
     ng-click = "$root.featureFlags.ahaSidebar = false"
+    ng-if = "!$root.featureFlags.ahaOverview"
   )
     use(
       xlink:href = "#icons-close"
     )
+.grid-block.vertical.shrink.justify-center.text-center.aha-overview(
+  ng-if = "$root.featureFlags.ahaOverview"
+)
+  .grid-content.strong Welcome to your Sandbox! 👋
+  | It’ll take a few steps to get everything set up. But don’t worry — we’re here to help!
+  button.grid-content.btn.btn-sm.green(
+    ng-click = "\
+      $root.featureFlags.ahaOverview = false;\
+      $root.featureFlags.ahaSidebar = false;\
+    "
+  ) Get Started
 .grid-block.vertical
   .grid-block.shrink.align-center.padding-sm.aha-guide(
-    ng-class = "{'complete': $root.featureFlags.aha1 || $root.featureFlags.aha2 || $root.featureFlags.aha3}"
+    ng-class = "{'disabled': $root.featureFlags.aha1 || $root.featureFlags.aha2 || $root.featureFlags.aha3}"
   )
     .grid-block.shrink.aha-meter(
       ng-class = "{\
@@ -25,10 +37,7 @@
       p.small This is the first step to success.
 
   .grid-block.shrink.align-center.padding-sm.aha-guide(
-    ng-class = "{\
-      'complete': $root.featureFlags.aha2 || $root.featureFlags.aha3,\
-      'disabled': $root.featureFlags.aha0\
-    }"
+    ng-class = "{'disabled': $root.featureFlags.aha0 || $root.featureFlags.aha2 || $root.featureFlags.aha3}"
   )
     .grid-block.shrink.aha-meter(
       ng-class = "{\
@@ -59,10 +68,7 @@
       p.small Configure your project and get it running!
 
   .grid-block.shrink.align-center.padding-sm.aha-guide(
-    ng-class = "{\
-      'complete': $root.featureFlags.aha3,\
-      'disabled': $root.featureFlags.aha0 || $root.featureFlags.aha1\
-    }"
+    ng-class = "{'disabled': $root.featureFlags.aha0 || $root.featureFlags.aha1 || $root.featureFlags.aha3}"
   )
     .grid-block.shrink.aha-meter(
       ng-class = "{\

client/directives/environment/environmentHeader/viewEnvironmentHeader.jade

@@ -50,8 +50,12 @@ button.grid-block.shrink.btn.btn-md.btn-icon.btn-help(
 
 //- new server button
 button.grid-block.shrink.btn.btn-md.green(
+  ng-class = "{\
+    'scale': helpCards.getActiveCard().targets.newContainer,\
+    'scale-in-modal': $root.featureFlags.aha1\
+  }"
   ng-click = "EC.triggerModal.newContainer()"
-  ng-class = "{'scale': helpCards.getActiveCard().targets.newContainer}"
+  ng-if = "!$root.featureFlags.ahaOverview"
 )
   svg.iconnables.icons-add.float-left
     use(

client/directives/environment/environmentView.jade

@@ -95,7 +95,7 @@
         )
 
     .modal-dialog.modal-sm(
-      ng-if = "$root.featureFlags.aha1"
+      ng-if = "$root.featureFlags.aha1 && !$root.featureFlags.ahaOverview"
     )
       .grid-block.align-center.aha-guide.padding-md(
         ng-include = "'ahaGuideView'"
@@ -104,15 +104,6 @@
           state.showSubStep = 0;\
         "
       )
-      .modal-body.grid-block.vertical.padding-sm
-        .grid-block.shrink.justify-center.align-center.padding-xs.well.gray.aha-tips.fade(
-          ng-if = "$root.featureFlags.aha1"
-        )
-          svg.grid-content.shrink.iconnables
-            use(
-              xlink:href = "#icons-life-preserver"
-            )
-          small.grid-content.small You can see your setup progress by selecting the !? button in the top-right.
 
     .grid-block.card-grid.clearfix(
       ng-class = "{'padding-top': helpCards.getActiveCard().helpTop}"

client/directives/navBar/viewNav.jade

@@ -21,19 +21,8 @@ a.a(
   | Configure
 
 a.a.disabled(
-  ng-if = "$root.featureFlags.aha1ExitedEarly"
-  tooltip = "You don‘t have a running repository yet!"
-  tooltip-options = "{\"class\":\"right\",\"left\":75,\"top\":17}"
-)
-  svg.iconnables.icons-server-dark
-    use(
-      xlink:href = "#icons-server-dark"
-    )
-  | Containers
-
-a.a.disabled(
-  ng-if = "dataApp.state.includes('base.config') && CA.instancesByPod && !CA.instancesByPod.models.length && !$root.featureFlags.aha1ExitedEarly"
-  tooltip = "You don’t have any containers yet!"
+  ng-if = "(dataApp.state.includes('base.config') && CA.instancesByPod && !CA.instancesByPod.models.length) || $root.featureFlags.aha1 || $root.featureFlags.aha1ExitedEarly"
+  tooltip = "You don’t have any running containers yet!"
   tooltip-options = "{\"class\":\"right\",\"left\":75,\"top\":17}"
 )
   svg.iconnables.icons-server-dark
@@ -43,7 +32,7 @@ a.a.disabled(
   | Containers
 
 a.a(
-  ng-if = "(dataApp.state.includes('base.instances') || !CA.instancesByPod || CA.instancesByPod.models.length) && !$root.featureFlags.aha1ExitedEarly"
+  ng-if = "(dataApp.state.includes('base.instances') || !CA.instancesByPod || CA.instancesByPod.models.length) && !$root.featureFlags.aha1 && !$root.featureFlags.aha1ExitedEarly"
   ui-sref = "base.instances({ userName: CA.activeAccount.oauthName() })"
   ui-sref-active = "active"
 )

client/services/featureFlagService.js

@@ -13,6 +13,7 @@ function featureFlags(
     aha1ExitedEarly: false, // step 2: if the user left the flow before getting a running config
     aha2: false, // step 3: add branch
     aha3: false, // step 4: runnabot
+    ahaOverview: false, // toggle sidebar
     ahaSidebar: false, // toggle sidebar
     allowIsolatedUpdate: false,
     autoIsolation: false,