Merge pull request #2002 from CodeNow/SAN-5603-add-branch-change

San 5603 add branch change

client/controllers/controllerInstances.js

@@ -38,6 +38,7 @@ function ControllerInstances(
   CIS.isAddingFirstBranch = ahaGuide.isAddingFirstBranch;
   CIS.isSettingUpRunnabot = ahaGuide.isSettingUpRunnabot;
   CIS.isInDemoFlow = demoFlowService.isInDemoFlow;
+  CIS.shouldShowAddBranchCTA = demoFlowService.shouldShowAddBranchCTA;
   CIS.shouldShowServicesCTA = demoFlowService.shouldShowServicesCTA.bind(demoFlowService);
   CIS.currentOrg = currentOrg;
   CIS.showAutofork = null;
@@ -57,7 +58,9 @@ function ControllerInstances(
   });
 
   CIS.shouldShowBranchView = function () {
-     return !CIS.showDemoAddBranchView() &&
+    // we want to show the add branch view if either the feature flag is on, or if the user has
+    // clicked to add a new branch, which would cause the showDemoAddBranchView to return false
+     return ($rootScope.featureFlags.demoAutoAddBranch || !CIS.showDemoAddBranchView()) &&
             (!CIS.isInDemoFlow() || demoFlowService.hasSeenUrlCallout());
   };
 
@@ -199,11 +202,19 @@ function ControllerInstances(
   };
 
   this.showDemoAddBranchView = function () {
+    // if this FF is active, we only want to show the view if the branch has been auto added.
+    // if this FF is not active, we want ot show the view if the user clicks to add a branch.
+    var showDemoAddBranch;
+    if ($rootScope.featureFlags.demoAutoAddBranch) {
+      showDemoAddBranch = demoFlowService.hasAddedBranch();
+    } else {
+      showDemoAddBranch = !demoFlowService.hasAddedBranch();
+    }
     return demoFlowService.isInDemoFlow() &&
       keypather.get(CIS, 'instancesByPod.models.length') &&
       !demoRepos.shouldShowDemoSelector() &&
       CIS.getUrlCalloutInstance() &&
-      !demoFlowService.hasAddedBranch();
+      showDemoAddBranch;
   };
 
   this.getDemoInstance = function () {

client/directives/components/containerUrl/containerUrlDirective.js

@@ -29,7 +29,10 @@ function containerUrl(
       function getModifierKey() {
         return $window.navigator.platform.toLowerCase().indexOf('mac') > -1 ? '⌘' : 'CTRL';
       }
-      $scope.openedContainerUrl = eventTracking.openedContainerUrl;
+      $scope.openedContainerUrl = function(instance) {
+        $scope.$emit('clickedOpenContainerUrl', instance);
+        eventTracking.openedContainerUrl();
+      };
       $scope.shouldShowCopyButton = !UNAVAILABLE_OS_LIST.includes($window.navigator.platform);
 
       $scope.onClipboardEvent = function (err) {

client/directives/components/containerUrl/containerUrlView.jade

@@ -29,7 +29,7 @@ button.btn.btn-xs.white(
 a.btn.btn-xs.white(
   ng-click = "\
     $emit('demo::dismissUrlCallout', instance.id());\
-    openedContainerUrl();\
+    openedContainerUrl(instance);\
   "
   ng-href = "{{getContainerUrl(instance)}}"
   target = "_blank"

client/services/demoFlowService.js

@@ -9,18 +9,18 @@ function demoFlowService(
   $rootScope,
   $q,
   currentOrg,
+  errs,
   fetchInstancesByPod,
   github,
   defaultContainerUrl,
   featureFlags,
   keypather,
-  patchOrgMetadata
+  patchOrgMetadata,
+  promisify
 ) {
 
   if (isInDemoFlow()) {
-    $rootScope.$on('demo::completed', function () {
-      endDemoFlow();
-    });
+    addEventListeners();
   }
 
   if (usingDemoRepo() || isInDemoFlow()) {
@@ -38,6 +38,7 @@ function demoFlowService(
   function resetFlags () {
     deleteItem('hasSeenHangTightMessage');
     deleteItem('hasSeenUrlCallout');
+    deleteItem('hasSeenAddBranchCTA');
   }
 
   function setItem (key, value) {
@@ -76,6 +77,48 @@ function demoFlowService(
        });
   }
 
+  function addEventListeners () {
+    // listen for the end of the demo if we are in it
+    $rootScope.$on('demo::completed', function () {
+      endDemoFlow();
+    });
+
+    // listen for the url open event if the user hasn't done it yet
+    if (featureFlags.flags.demoAutoAddBranch && !$localStorage.hasSeenUrlCallout) {
+      var unregisterContainerUrlClickListener = $rootScope.$on('clickedOpenContainerUrl', function (event, instance) {
+        unregisterContainerUrlClickListener();
+        forkNewInstance(instance)
+          .then(function () {
+            if (currentOrg.isPersonalAccount()) {
+              submitDemoPR(instance)
+                .catch(function (err) {
+                  if (keypather.get(err, 'errors[0].message').match(/(pull request.*exists)/)) {
+                    return instance;
+                  }
+                  errs.handler(err);
+                });
+              }
+          });
+      });
+    }
+
+    // listen for the click on a new instance if the user has clicked open url
+    if (featureFlags.flags.demoAutoAddBranch && $localStorage.hasSeenUrlCallout && !$localStorage.hasSeenAddBranchCTA) {
+      addBranchListener();
+    }
+  }
+
+  function addBranchListener () {
+    var unregisterStateChangeListener = $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
+      var instanceName = keypather.get(toParams, 'instanceName');
+      if (instanceName && instanceName.match(/dark-theme/)) {
+        setItem('hasSeenAddBranchCTA', true);
+        hasAddedBranch(true);
+        unregisterStateChangeListener();
+      }
+    });
+  }
+
   function checkStatusOnInstance (instance) {
     // This is needed to fix an issue with 'Response for preflight has invalid HTTP status code 404'
     // Caused by the X-CSRF-TOKEN
@@ -95,6 +138,19 @@ function demoFlowService(
       });
   }
 
+  function forkNewInstance (instance) {
+    addBranchListener();
+    return promisify(currentOrg.github, 'fetchRepo')(instance.getRepoName())
+      .then(function (repo) {
+        return promisify(repo, 'fetchBranch')('dark-theme');
+      })
+      .then(function (branch) {
+        var sha = branch.attrs.commit.sha;
+        var branchName = branch.attrs.name;
+        return promisify(instance, 'fork')(branchName, sha);
+      });
+  }
+
   function hasSeenHangTightMessage () {
     return $localStorage.hasSeenHangTightMessage;
   }
@@ -137,10 +193,15 @@ function demoFlowService(
   }
 
   function shouldShowServicesCTA () {
-    return !currentOrg.isPersonalAccount() && isInDemoFlow() && getItem('usingDemoRepo') && getItem('hasAddedBranch');
+    return !currentOrg.isPersonalAccount() && isInDemoFlow() && getItem('usingDemoRepo') && hasAddedBranch();
+  }
+
+  function shouldShowAddBranchCTA (instance) {
+    return isInDemoFlow() && !getItem('hasSeenAddBranchCTA') && instance.attrs.id === getItem('hasSeenUrlCallout');
   }
 
   return {
+    addBranchListener: addBranchListener,
     checkStatusOnInstance: checkStatusOnInstance,
     deleteItem: deleteItem,
     endDemoFlow: endDemoFlow,
@@ -155,6 +216,7 @@ function demoFlowService(
     setUsingDemoRepo: setUsingDemoRepo,
     setItem: setItem,
     submitDemoPR: submitDemoPR,
+    shouldShowAddBranchCTA: shouldShowAddBranchCTA,
     shouldShowTeamCTA: shouldShowTeamCTA,
     shouldShowServicesCTA: shouldShowServicesCTA
   };

client/services/demoRepoService.js

@@ -302,10 +302,10 @@ function demoRepos(
     _findNewRepo: _findNewRepo, // for testing
     _findNewRepoOnRepeat: _findNewRepoOnRepeat, // for testing
     checkForOrphanedDependency: checkForOrphanedDependency,
+    createDemoApp: createDemoApp,
     demoStacks: stacks,
     forkGithubRepo: forkGithubRepo,
     findDependencyNonRepoInstances: findDependencyNonRepoInstances,
-    createDemoApp: createDemoApp,
     shouldShowDemoSelector: function () {
       return !!stacks[demoFlowService.usingDemoRepo()] || (ahaGuide.isInGuide() && !ahaGuide.hasConfirmedSetup());
     }

client/services/featureFlagService.js

@@ -16,7 +16,7 @@ function featureFlags(
     cardStatus: false,
     connections: false,
     contingencyPlan: false,
-    demoAutoAddBranch: false,
+    demoAutoAddBranch: true,
     demoMultiTier: true,
     dockerCompose: false,
     dockerfileMirroringMultiple: false,

client/templates/instances/viewInstancesList.jade

@@ -138,36 +138,15 @@
 
   //- wraps all branch clusters — hide until a branch has been added
   .demo-transition.js-animate(
-    ng-if = "!CIS.isInDemoFlow() || !CIS.showDemoAddBranchView() || $root.featureFlags.demoAutoAddBranch"
+    ng-if = "!CIS.isInDemoFlow() || CIS.shouldShowBranchView()"
   )
 
-    //- stubbed out markup for this feature flag, we don't want to keep any of this after implementation:
-    .grid-block.vertical.shrink.list-clusters.js-animate(
-      ng-if = "$root.featureFlags.demoAutoAddBranch"
-    )
-      .grid-block.align-center.list-item-cluster.list-clusters-heading
-        span.grid-content.text-overflow node-starter
-        .grid-block.align-center.shrink.btn.btn-xxs.white Add Branch
-          svg.iconnables.icons-arrow-forward
-            use(
-              xlink:href = "#icons-arrow-down"
-            )
-      .list-item-cluster
-        .grid-block.vertical.list-containers.text-overflow
-          a.grid-block.align-center.a-sref
-            status-icon.grid-block.shrink.green
-            .grid-block.text-overflow dark-theme
-      .grid-block.vertical.padding-sm.popover.bottom.in.popover-demo.branch-step(
-        ng-include = "'popoverDemoBranchContainerView'"
-      )
-    //- end stubbed out markup
-
 
     //- branch clusters
     .grid-block.vertical.shrink.list-clusters.js-animate(
       ng-if = "!masterInstance.attrs.isTesting || (masterInstance.attrs.isTesting && !masterInstance.attrs.testingParentId)"
       ng-repeat = "masterInstance in CIS.instancesByPod | instanceHasRepo:true | orderBy: ['attrs.name'] track by masterInstance.attrs.name"
-      ng-show = "CIS.shouldShowParent(masterInstance) && CIS.shouldShowBranchView()"
+      ng-show = "CIS.shouldShowParent(masterInstance)"
     )
 
       //- cluster list heading
@@ -241,3 +220,9 @@
         pop-over-options = "{\"top\":-33,\"left\":215}"
         pop-over-template = "viewMoreContainersPopover"
       ) 8 more…
+
+      //- show only on demo repos
+      .grid-block.vertical.padding-sm.popover.bottom.in.popover-demo.branch-step(
+        ng-if = "$root.featureFlags.demoAutoAddBranch && CIS.shouldShowAddBranchCTA(masterInstance)"
+        ng-include = "'popoverDemoBranchContainerView'"
+      )

test/unit/services/demoFlowService.unit.js

@@ -44,6 +44,9 @@ describe('demoFlowService'.bold.underline.blue, function () {
         }
       }
     };
+    featureFlags = {
+      demoAutoAddBranch: false
+    }
   });
 
   describe('#shouldShowTeamCTA', function () {