Merge pull request #2207 from CodeNow/SAN-6186

damienrunnable · web-flow · commit 888cae9528fe · 2017-05-09T10:23:47.000-07:00
SAN-6186-6190 Private registry UI
diff --git a/client/assets/styles/scss/components/buttons/buttons.scss b/client/assets/styles/scss/components/buttons/buttons.scss
@@ -44,6 +44,7 @@
   // spinner
   > .spinner-wrapper {
     align-items: center;
+    align-self: center;
     display: flex;
     height: 100%;
 
diff --git a/client/directives/modals/settingsModal/forms/privateRegistryForm/privateRegistryFormController.js b/client/directives/modals/settingsModal/forms/privateRegistryForm/privateRegistryFormController.js
@@ -0,0 +1,46 @@
+'use strict';
+
+require('app')
+  .controller('PrivateRegistryFormController', PrivateRegistryFormController);
+
+function PrivateRegistryFormController (
+  privateRegistry,
+  keypather,
+  loading
+) {
+  var PRFC = this;
+  PRFC.registryCredentials = privateRegistry.getRegistryDetails();
+  PRFC.authorized = !!PRFC.registryCredentials;
+  PRFC.invalidCredentials = false;
+  PRFC.formReset = false;
+
+  PRFC.verifyAndSave = function () {
+    loading('privateRegistry',true);
+
+    privateRegistry.addRegistry(PRFC.url, PRFC.username, PRFC.password)
+      .then(function(response) {
+        if (response.status !== 204) {
+          PRFC.invalidCredentials = true;
+          return;
+        }
+
+        PRFC.invalidCredentials = false;
+        PRFC.authorized = true;
+        PRFC.formReset = false;
+
+        keypather.set(PRFC, 'registryCredentials.url', PRFC.url);
+        keypather.set(PRFC, 'registryCredentials.username', PRFC.username);
+
+        PRFC.url = null;
+        PRFC.username = null;
+        PRFC.password = null;
+      }).finally(function() {
+        loading('privateRegistry',false);
+      });
+  };
+
+  // Set them back to a blank form, but leave the data in place since they may decide not to replace it.
+  PRFC.changeRegistry = function () {
+    PRFC.formReset = true;
+  };
+}
diff --git a/client/directives/modals/settingsModal/forms/privateRegistryForm/privateRegistryFormDirective.js b/client/directives/modals/settingsModal/forms/privateRegistryForm/privateRegistryFormDirective.js
@@ -0,0 +1,13 @@
+'use strict';
+
+require('app')
+  .directive('privateRegistryForm', privateRegistryForm);
+
+function privateRegistryForm() {
+  return {
+    restrict: 'A',
+    controller: 'PrivateRegistryFormController',
+    controllerAs: 'PRFC',
+    templateUrl: 'privateRegistryFormView'
+  };
+}
diff --git a/client/directives/modals/settingsModal/forms/privateRegistryForm/privateRegistryFormView.jade b/client/directives/modals/settingsModal/forms/privateRegistryForm/privateRegistryFormView.jade
@@ -9,21 +9,20 @@ section.label-description
 
 form.grid-block.vertical.well.gray.ignore-margin(
   name = "privateRegistryForm"
-  ng-class = "{'invalid': state.invalidCredentials}"
-  ng-if = "!state.authorized"
-  ng-init = "state.authorized = null"
+  ng-class = "{'invalid': PRFC.invalidCredentials}"
+  ng-if = "!PRFC.authorized || PRFC.formReset"
 )
   p.red.small.text-center(
-    ng-if = "state.invalidCredentials"
+    ng-if = "PRFC.invalidCredentials"
   ) We couldn’t validate your credentials.
     br
     | Please check them and try again.
   label.padding-sm.label
     .padding-xxs.small.label-sm Registry URL
     input.input.input-md.input-validate(
-      name = "data.url"
-      ng-disabled = "state.saving"
-      ng-model = "data.url"
+      name = "PRFC.url"
+      ng-disabled = "$root.isLoading.privateRegistry"
+      ng-model = "PRFC.url"
       ng-required = "true"
       placeholder = "https://index.docker.io/v1/"
       spellcheck = "false"
@@ -33,58 +32,56 @@ form.grid-block.vertical.well.gray.ignore-margin(
   label.padding-sm.label
     .padding-xxs.small.label-sm Username
     input.input.input-md.input-validate(
-      name = "data.username"
-      ng-disabled = "state.saving"
-      ng-model = "data.username"
+      name = "PRFC.username"
+      ng-disabled = "$root.isLoading.privateRegistry"
+      ng-model = "PRFC.username"
       ng-required = "true"
       spellcheck = "false"
     )
   label.padding-sm.label
     .padding-xxs.small.label-sm Password
     input.input.input-md.input-validate(
       autocomplete = "new-password"
-      name = "data.password"
-      ng-disabled = "state.saving"
-      ng-model = "data.password"
+      name = "PRFC.password"
+      ng-disabled = "$root.isLoading.privateRegistry"
+      ng-model = "PRFC.password"
       ng-required = "true"
       spellcheck = "false"
       type = "password"
     )
   footer.margin-top-sm.padding-sm.grid-block.footer(
     ng-class = "{\
-      'justify-justified': state.authorized,\
-      'justify-right': !state.authorized\
+      'justify-justified': PRFC.authorized,\
+      'justify-right': !PRFC.authorized\
     }"
   )
     button.btn.btn-md.gray.btn-cancel(
       data-event-name = "Clicked 'Back' in Private Registry Settings"
-      ng-if = "state.authorized"
+      ng-click = "PRFC.formReset = false"
+      ng-if = "PRFC.authorized && PRFC.formReset"
     ) Back
     button.grid-block.shrink.align-center.btn.btn-md.green(
       data-event-name = "Clicked to Add Private Registry"
-      ng-click = "state.saving = true"
-      ng-disabled = "state.saving || privateRegistryForm.$invalid"
-      ng-init = "state.saving = null"
+      ng-click = "PRFC.verifyAndSave()"
+      ng-disabled = "$root.isLoading.privateRegistry || privateRegistryForm.$invalid"
     )
       .spinner-wrapper.spinner-sm.spinner-white(
-        ng-if = "state.saving"
+        ng-if = "$root.isLoading.privateRegistry"
         ng-include = "'spinner'"
       )
       span Verify & Save
 
 section.padding-sm.grid-block.align-center.well.white.ignore-margin(
-  ng-if = "state.authorized"
-  ng-init = "registryCredentials = [\
-    {username: 'dockerfan88', url: 'https://index.docker.io/v1/'}\
-  ]"
+  ng-if = "PRFC.authorized && !PRFC.formReset"
 )
   svg.margin-right-xxs.text-green.grid-block.shrink.iconnables.icons-check
     use(
       xlink:href = "#icons-check"
     )
   .grid-block.vertical
-    p.small.weight-strong.text-overflow Authorized {{registryCredentials[0].username}}
-    small.small.text-gray.text-overflow {{registryCredentials[0].url}}
+    p.small.weight-strong.text-overflow Authorized {{PRFC.registryCredentials.username}}
+    small.small.text-gray.text-overflow {{PRFC.registryCredentials.url}}
   button.btn.btn-xs.gray.margin-left-xxs(
     data-event-name = "Clicked to Change Private Registry"
+    ng-click = "PRFC.changeRegistry()"
   ) Change
diff --git a/client/directives/modals/settingsModal/settingsModalView.jade b/client/directives/modals/settingsModal/settingsModalView.jade
@@ -100,8 +100,8 @@
       )
 
       .grid-block.vertical.modal-form.no-border.form-registry(
+        private-registry-form
         ng-if = "$root.featureFlags.privateRegistry && SEMC.currentTab === 'privateRegistry'"
-        ng-include = "'privateRegistryFormView'"
       )
 
       slack-integration-form(
diff --git a/client/services/privateRegistry.js b/client/services/privateRegistry.js
@@ -0,0 +1,38 @@
+'use strict';
+
+require('app')
+  .factory('privateRegistry', privateRegistry);
+
+function privateRegistry(
+  $http,
+  configAPIHost,
+  currentOrg,
+  keypather
+) {
+  return {
+    addRegistry: function (regUrl, username, password) {
+      return $http({
+        method: 'post',
+        url: configAPIHost + '/organizations/' + currentOrg.poppa.id() + '/private-registry',
+        data: {
+          url: regUrl,
+          username: username,
+          password: password
+        }
+      });
+    },
+    getRegistryDetails: function() {
+      var username = keypather.get(currentOrg, 'poppa.attrs.privateRegistryUsername');
+      var url = keypather.get(currentOrg, 'poppa.attrs.privateRegistryUrl');
+
+      if (!username || !url) {
+        return null;
+      }
+
+      return {
+        username: username,
+        url: url
+      };
+    }
+  };
+}
diff --git a/test/unit/controllers/privateRegistryFormController.unit.js b/test/unit/controllers/privateRegistryFormController.unit.js
@@ -0,0 +1,91 @@
+'use strict';
+
+describe('privateRegistryFormController'.bold.underline.blue, function () {
+  var $scope;
+  var $rootScope;
+  var $controller;
+  var privateRegistryFormController;
+  var mockGetRegistryDetails;
+
+  describe('base', function () {
+    describe('Check the construction when does not have registry', function () {
+      beforeEach(function () {
+        angular.mock.module('app');
+        angular.mock.module(function ($provide) {
+          $provide.factory('privateRegistry', function ($q) {
+            mockGetRegistryDetails = function() {
+              return null;
+            };
+
+            return {
+              getRegistryDetails: mockGetRegistryDetails
+            };
+          });
+        });
+        angular.mock.inject(function (
+          _$controller_,
+          _$rootScope_
+        ) {
+          $controller = _$controller_;
+          $rootScope = _$rootScope_;
+
+          $scope = $rootScope.$new();
+
+          privateRegistryFormController = $controller('PrivateRegistryFormController', {
+            '$scope': $scope
+          });
+        });
+        $scope.$digest();
+
+      });
+
+      it('constructor', function () {
+        expect(privateRegistryFormController.registryCredentials).to.be.null;
+        expect(privateRegistryFormController.authorized).to.be.false;
+        expect(privateRegistryFormController.invalidCredentials).to.be.false;
+        expect(privateRegistryFormController.formReset).to.be.false;
+      });
+    });
+
+    describe('Check the construction when has registry', function () {
+      beforeEach(function () {
+        angular.mock.module('app');
+        angular.mock.module(function ($provide) {
+          $provide.factory('privateRegistry', function ($q) {
+            mockGetRegistryDetails = function() {
+              return {
+                username: 'somebody',
+                url: 'somewhere'
+              };
+            };
+
+            return {
+              getRegistryDetails: mockGetRegistryDetails
+            };
+          });
+        });
+        angular.mock.inject(function (
+          _$controller_,
+          _$rootScope_
+        ) {
+          $controller = _$controller_;
+          $rootScope = _$rootScope_;
+
+          $scope = $rootScope.$new();
+
+          privateRegistryFormController = $controller('PrivateRegistryFormController', {
+            '$scope': $scope
+          });
+        });
+        $scope.$digest();
+      });
+
+      it('constructor', function() {
+        expect(privateRegistryFormController.registryCredentials.username).to.equal('somebody');
+        expect(privateRegistryFormController.authorized).to.be.true;
+        expect(privateRegistryFormController.invalidCredentials).to.be.false;
+        expect(privateRegistryFormController.formReset).to.be.false;
+      });
+    });
+  });
+});

Original file line number	Diff line number	Diff line change
`@@ -100,8 +100,8 @@`
`100`	`100`	`)`
`101`	`101`
`102`	`102`	`.grid-block.vertical.modal-form.no-border.form-registry(`
	`103`	`+ private-registry-form`
`103`	`104`	`ng-if = "$root.featureFlags.privateRegistry && SEMC.currentTab === 'privateRegistry'"`
`104`		`- ng-include = "'privateRegistryFormView'"`
`105`	`105`	`)`
`106`	`106`
`107`	`107`	`slack-integration-form(`