Skip to content

Commit 888cae9

Browse files
damienrunnabledamienrunnable
authored
Merge pull request #2207 from CodeNow/SAN-6186
SAN-6186-6190 Private registry UI
2 parents b0ce048 + a1b1c74 commit 888cae9

7 files changed

Lines changed: 213 additions & 27 deletions

File tree

‎client/assets/styles/scss/components/buttons/buttons.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
// spinner
4545
> .spinner-wrapper {
4646
align-items: center;
47+
align-self: center;
4748
display: flex;
4849
height: 100%;
4950

‎client/directives/modals/settingsModal/forms/privateRegistryForm/privateRegistryFormController.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
'use strict';
2+
3+
require('app')
4+
.controller('PrivateRegistryFormController', PrivateRegistryFormController);
5+
6+
function PrivateRegistryFormController (
7+
privateRegistry,
8+
keypather,
9+
loading
10+
) {
11+
var PRFC = this;
12+
PRFC.registryCredentials = privateRegistry.getRegistryDetails();
13+
PRFC.authorized = !!PRFC.registryCredentials;
14+
PRFC.invalidCredentials = false;
15+
PRFC.formReset = false;
16+
17+
PRFC.verifyAndSave = function () {
18+
loading('privateRegistry',true);
19+
20+
privateRegistry.addRegistry(PRFC.url, PRFC.username, PRFC.password)
21+
.then(function(response) {
22+
if (response.status !== 204) {
23+
PRFC.invalidCredentials = true;
24+
return;
25+
}
26+
27+
PRFC.invalidCredentials = false;
28+
PRFC.authorized = true;
29+
PRFC.formReset = false;
30+
31+
keypather.set(PRFC, 'registryCredentials.url', PRFC.url);
32+
keypather.set(PRFC, 'registryCredentials.username', PRFC.username);
33+
34+
PRFC.url = null;
35+
PRFC.username = null;
36+
PRFC.password = null;
37+
}).finally(function() {
38+
loading('privateRegistry',false);
39+
});
40+
};
41+
42+
// Set them back to a blank form, but leave the data in place since they may decide not to replace it.
43+
PRFC.changeRegistry = function () {
44+
PRFC.formReset = true;
45+
};
46+
}

‎client/directives/modals/settingsModal/forms/privateRegistryForm/privateRegistryFormDirective.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use strict';
2+
3+
require('app')
4+
.directive('privateRegistryForm', privateRegistryForm);
5+
6+
function privateRegistryForm() {
7+
return {
8+
restrict: 'A',
9+
controller: 'PrivateRegistryFormController',
10+
controllerAs: 'PRFC',
11+
templateUrl: 'privateRegistryFormView'
12+
};
13+
}

‎client/directives/modals/settingsModal/forms/privateRegistryForm/privateRegistryFormView.jade‎

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,20 @@ section.label-description
99

1010
form.grid-block.vertical.well.gray.ignore-margin(
1111
name = "privateRegistryForm"
12-
ng-class = "{'invalid': state.invalidCredentials}"
13-
ng-if = "!state.authorized"
14-
ng-init = "state.authorized = null"
12+
ng-class = "{'invalid': PRFC.invalidCredentials}"
13+
ng-if = "!PRFC.authorized || PRFC.formReset"
1514
)
1615
p.red.small.text-center(
17-
ng-if = "state.invalidCredentials"
16+
ng-if = "PRFC.invalidCredentials"
1817
) We couldn’t validate your credentials.
1918
br
2019
| Please check them and try again.
2120
label.padding-sm.label
2221
.padding-xxs.small.label-sm Registry URL
2322
input.input.input-md.input-validate(
24-
name = "data.url"
25-
ng-disabled = "state.saving"
26-
ng-model = "data.url"
23+
name = "PRFC.url"
24+
ng-disabled = "$root.isLoading.privateRegistry"
25+
ng-model = "PRFC.url"
2726
ng-required = "true"
2827
placeholder = "https://index.docker.io/v1/"
2928
spellcheck = "false"
@@ -33,58 +32,56 @@ form.grid-block.vertical.well.gray.ignore-margin(
3332
label.padding-sm.label
3433
.padding-xxs.small.label-sm Username
3534
input.input.input-md.input-validate(
36-
name = "data.username"
37-
ng-disabled = "state.saving"
38-
ng-model = "data.username"
35+
name = "PRFC.username"
36+
ng-disabled = "$root.isLoading.privateRegistry"
37+
ng-model = "PRFC.username"
3938
ng-required = "true"
4039
spellcheck = "false"
4140
)
4241
label.padding-sm.label
4342
.padding-xxs.small.label-sm Password
4443
input.input.input-md.input-validate(
4544
autocomplete = "new-password"
46-
name = "data.password"
47-
ng-disabled = "state.saving"
48-
ng-model = "data.password"
45+
name = "PRFC.password"
46+
ng-disabled = "$root.isLoading.privateRegistry"
47+
ng-model = "PRFC.password"
4948
ng-required = "true"
5049
spellcheck = "false"
5150
type = "password"
5251
)
5352
footer.margin-top-sm.padding-sm.grid-block.footer(
5453
ng-class = "{\
55-
'justify-justified': state.authorized,\
56-
'justify-right': !state.authorized\
54+
'justify-justified': PRFC.authorized,\
55+
'justify-right': !PRFC.authorized\
5756
}"
5857
)
5958
button.btn.btn-md.gray.btn-cancel(
6059
data-event-name = "Clicked 'Back' in Private Registry Settings"
61-
ng-if = "state.authorized"
60+
ng-click = "PRFC.formReset = false"
61+
ng-if = "PRFC.authorized && PRFC.formReset"
6262
) Back
6363
button.grid-block.shrink.align-center.btn.btn-md.green(
6464
data-event-name = "Clicked to Add Private Registry"
65-
ng-click = "state.saving = true"
66-
ng-disabled = "state.saving || privateRegistryForm.$invalid"
67-
ng-init = "state.saving = null"
65+
ng-click = "PRFC.verifyAndSave()"
66+
ng-disabled = "$root.isLoading.privateRegistry || privateRegistryForm.$invalid"
6867
)
6968
.spinner-wrapper.spinner-sm.spinner-white(
70-
ng-if = "state.saving"
69+
ng-if = "$root.isLoading.privateRegistry"
7170
ng-include = "'spinner'"
7271
)
7372
span Verify & Save
7473

7574
section.padding-sm.grid-block.align-center.well.white.ignore-margin(
76-
ng-if = "state.authorized"
77-
ng-init = "registryCredentials = [\
78-
{username: 'dockerfan88', url: 'https://index.docker.io/v1/'}\
79-
]"
75+
ng-if = "PRFC.authorized && !PRFC.formReset"
8076
)
8177
svg.margin-right-xxs.text-green.grid-block.shrink.iconnables.icons-check
8278
use(
8379
xlink:href = "#icons-check"
8480
)
8581
.grid-block.vertical
86-
p.small.weight-strong.text-overflow Authorized {{registryCredentials[0].username}}
87-
small.small.text-gray.text-overflow {{registryCredentials[0].url}}
82+
p.small.weight-strong.text-overflow Authorized {{PRFC.registryCredentials.username}}
83+
small.small.text-gray.text-overflow {{PRFC.registryCredentials.url}}
8884
button.btn.btn-xs.gray.margin-left-xxs(
8985
data-event-name = "Clicked to Change Private Registry"
86+
ng-click = "PRFC.changeRegistry()"
9087
) Change

‎client/directives/modals/settingsModal/settingsModalView.jade‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,8 @@
100100
)
101101

102102
.grid-block.vertical.modal-form.no-border.form-registry(
103+
private-registry-form
103104
ng-if = "$root.featureFlags.privateRegistry && SEMC.currentTab === 'privateRegistry'"
104-
ng-include = "'privateRegistryFormView'"
105105
)
106106

107107
slack-integration-form(

‎client/services/privateRegistry.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
'use strict';
2+
3+
require('app')
4+
.factory('privateRegistry', privateRegistry);
5+
6+
function privateRegistry(
7+
$http,
8+
configAPIHost,
9+
currentOrg,
10+
keypather
11+
) {
12+
return {
13+
addRegistry: function (regUrl, username, password) {
14+
return $http({
15+
method: 'post',
16+
url: configAPIHost + '/organizations/' + currentOrg.poppa.id() + '/private-registry',
17+
data: {
18+
url: regUrl,
19+
username: username,
20+
password: password
21+
}
22+
});
23+
},
24+
getRegistryDetails: function() {
25+
var username = keypather.get(currentOrg, 'poppa.attrs.privateRegistryUsername');
26+
var url = keypather.get(currentOrg, 'poppa.attrs.privateRegistryUrl');
27+
28+
if (!username || !url) {
29+
return null;
30+
}
31+
32+
return {
33+
username: username,
34+
url: url
35+
};
36+
}
37+
};
38+
}

‎test/unit/controllers/privateRegistryFormController.unit.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
'use strict';
2+
3+
describe('privateRegistryFormController'.bold.underline.blue, function () {
4+
var $scope;
5+
var $rootScope;
6+
var $controller;
7+
var privateRegistryFormController;
8+
var mockGetRegistryDetails;
9+
10+
describe('base', function () {
11+
describe('Check the construction when does not have registry', function () {
12+
beforeEach(function () {
13+
angular.mock.module('app');
14+
angular.mock.module(function ($provide) {
15+
$provide.factory('privateRegistry', function ($q) {
16+
mockGetRegistryDetails = function() {
17+
return null;
18+
};
19+
20+
return {
21+
getRegistryDetails: mockGetRegistryDetails
22+
};
23+
});
24+
});
25+
angular.mock.inject(function (
26+
_$controller_,
27+
_$rootScope_
28+
) {
29+
$controller = _$controller_;
30+
$rootScope = _$rootScope_;
31+
32+
$scope = $rootScope.$new();
33+
34+
privateRegistryFormController = $controller('PrivateRegistryFormController', {
35+
'$scope': $scope
36+
});
37+
});
38+
$scope.$digest();
39+
40+
});
41+
42+
it('constructor', function () {
43+
expect(privateRegistryFormController.registryCredentials).to.be.null;
44+
expect(privateRegistryFormController.authorized).to.be.false;
45+
expect(privateRegistryFormController.invalidCredentials).to.be.false;
46+
expect(privateRegistryFormController.formReset).to.be.false;
47+
});
48+
});
49+
50+
describe('Check the construction when has registry', function () {
51+
beforeEach(function () {
52+
angular.mock.module('app');
53+
angular.mock.module(function ($provide) {
54+
$provide.factory('privateRegistry', function ($q) {
55+
mockGetRegistryDetails = function() {
56+
return {
57+
username: 'somebody',
58+
url: 'somewhere'
59+
};
60+
};
61+
62+
return {
63+
getRegistryDetails: mockGetRegistryDetails
64+
};
65+
});
66+
});
67+
angular.mock.inject(function (
68+
_$controller_,
69+
_$rootScope_
70+
) {
71+
$controller = _$controller_;
72+
$rootScope = _$rootScope_;
73+
74+
$scope = $rootScope.$new();
75+
76+
privateRegistryFormController = $controller('PrivateRegistryFormController', {
77+
'$scope': $scope
78+
});
79+
});
80+
$scope.$digest();
81+
});
82+
83+
it('constructor', function() {
84+
expect(privateRegistryFormController.registryCredentials.username).to.equal('somebody');
85+
expect(privateRegistryFormController.authorized).to.be.true;
86+
expect(privateRegistryFormController.invalidCredentials).to.be.false;
87+
expect(privateRegistryFormController.formReset).to.be.false;
88+
});
89+
});
90+
});
91+
});

0 commit comments

Comments
 (0)