Skip to content

Commit c5e53dd

Browse files
cdcabreracdcabrera
committed
Environment From Fix Drag & Order Display
Fix for making sure the drag and order handles are hidden within a read only display
1 parent 4f629c3 commit c5e53dd

File tree

5 files changed

+66
-106
lines changed

5 files changed

+66
-106
lines changed

‎app/scripts/directives/editEnvironmentFrom.js

Lines changed: 30 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
addRowLink: '@', // creates a link to "add row" and sets its text label
1212
entries: '=', // an array of objects containing configmaps and secrets
1313
envFromSelectorOptions: '<', // dropdown selector options, an array of objects
14-
selectorPlaceholder: '@' // placeholder copy for dropdown selector
14+
selectorPlaceholder: '@', // placeholder copy for dropdown selector
15+
isReadonly: '<?' // display as read only values
1516
},
1617
templateUrl: 'views/directives/edit-environment-from.html'
1718
});
@@ -20,7 +21,6 @@
2021
$filter,
2122
utils) {
2223
var ctrl = this;
23-
2424
var canI = $filter('canI');
2525
var humanizeKind = $filter('humanizeKind');
2626
var uniqueId = _.uniqueId();
@@ -42,6 +42,7 @@
4242
}
4343

4444
ctrl.envFromEntries.splice(start, deleteCount);
45+
4546
if(!ctrl.envFromEntries.length && ctrl.addRowLink) {
4647
addEntry(ctrl.envFromEntries);
4748
}
@@ -50,18 +51,22 @@
5051
ctrl.editEnvironmentFromForm.$setDirty();
5152
};
5253

54+
ctrl.hasOptions = function() {
55+
return !_.isEmpty(ctrl.envFromSelectorOptions);
56+
};
57+
58+
ctrl.hasEntries = function() {
59+
return angular.toJson(ctrl.entries) !== '[{}]' && ctrl.entries && ctrl.entries.length >= 1;
60+
};
61+
5362
ctrl.isEnvFromReadonly = function(entry) {
54-
return ctrl.isReadonlyAny ||
55-
entry.isReadonlyValue === true ||
56-
((entry.secretRef || entry.configMapRef) && !entry.selectedEnvFrom) ||
57-
_.isEmpty(ctrl.envFromSelectorOptions);
63+
return ctrl.isReadonly === true || entry && entry.isReadonly === true;
5864
};
5965

6066
ctrl.groupByKind = function(object) {
6167
return humanizeKind(object.kind);
6268
};
6369

64-
//ctrl.uniqueForValue = utils.uniqueForValue;
6570
ctrl.dragControlListeners = {
6671
accept: function (sourceItemHandleScope, destSortableScope) {
6772
return sourceItemHandleScope.itemScope.sortableScope.$id === destSortableScope.$id;
@@ -99,8 +104,13 @@
99104
});
100105
};
101106

102-
var updateEnvFromEntries = function(entries) {
103-
ctrl.envFromEntries = entries || [];
107+
var getReferenceValues = function(option) {
108+
var kindRef = _.camelCase(option.kind) + 'Ref';
109+
return _.filter(ctrl.envFromEntries, [kindRef, {name:option.metadata.name}]);
110+
};
111+
112+
var updateEnvFromEntries = function() {
113+
ctrl.envFromEntries = ctrl.entries || [];
104114

105115
if(!ctrl.envFromEntries.length) {
106116
addEntry(ctrl.envFromEntries);
@@ -109,56 +119,28 @@
109119
_.each(ctrl.envFromEntries, function(entry) {
110120
if(entry) {
111121
if(entry.configMapRef && !canI('configmaps', 'get')) {
112-
entry.isReadonlyValue = true;
122+
entry.isReadonly = true;
113123
}
114124

115125
if(entry.secretRef && !canI('secrets', 'get')) {
116-
entry.isReadonlyValue = true;
126+
entry.isReadonly = true;
117127
}
118128
}
119129
});
120-
};
121-
122-
var getReferenceValue = function(option) {
123-
var referenceValue;
124130

125-
switch(option.kind) {
126-
case 'ConfigMap':
127-
referenceValue = _.find(ctrl.envFromEntries, {configMapRef: {name: option.metadata.name}});
128-
break;
129-
case 'Secret':
130-
referenceValue = _.find(ctrl.envFromEntries, {secretRef: {name: option.metadata.name}});
131-
break;
132-
}
131+
_.each(ctrl.envFromSelectorOptions, function(option) {
132+
_.each(getReferenceValues(option), function(val, i) {
133+
_.set(val, 'selectedEnvFrom', option);
133134

134-
return referenceValue;
135-
};
136-
137-
ctrl.checkEntries = function(option, entrySelectedEnvFrom) {
138-
if(option === entrySelectedEnvFrom) {
139-
return false;
140-
}
141-
142-
return !!(getReferenceValue(option));
143-
};
144-
145-
var findReferenceValueForEntries = function(entries, envFromSelectorOptions) {
146-
ctrl.cannotAdd = (ctrl.isReadonlyAny || _.isEmpty(envFromSelectorOptions));
147-
148-
if(envFromSelectorOptions) {
149-
_.each(envFromSelectorOptions, function(option) {
150-
var referenceValue = getReferenceValue(option);
151-
152-
if (referenceValue) {
153-
_.set(referenceValue, 'selectedEnvFrom', option);
135+
if (i > 0) {
136+
_.set(val, 'duplicateEnvFrom', true);
154137
}
155138
});
156-
}
139+
});
157140
};
158141

159142
ctrl.$onInit = function() {
160-
updateEnvFromEntries(ctrl.entries);
161-
findReferenceValueForEntries(ctrl.entries, ctrl.envFromSelectorOptions);
143+
updateEnvFromEntries();
162144

163145
if('cannotDelete' in $attrs) {
164146
ctrl.cannotDeleteAny = true;
@@ -168,10 +150,6 @@
168150
ctrl.cannotSort = true;
169151
}
170152

171-
if('isReadonly' in $attrs) {
172-
ctrl.isReadonlyAny = true;
173-
}
174-
175153
if('showHeader' in $attrs) {
176154
ctrl.showHeader = true;
177155
}
@@ -182,12 +160,8 @@
182160
};
183161

184162
ctrl.$onChanges = function(changes) {
185-
if(changes.entries) {
186-
updateEnvFromEntries(changes.entries.currentValue);
187-
}
188-
189-
if(changes.envFromSelectorOptions) {
190-
findReferenceValueForEntries(ctrl.envFromEntries, changes.envFromSelectorOptions.currentValue);
163+
if(changes.entries || changes.envFromSelectorOptions) {
164+
updateEnvFromEntries();
191165
}
192166
};
193167
}

‎app/views/directives/edit-environment-from.html

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
</div>
99
</div>
1010
</div>
11-
1211
<div ng-model="$ctrl.entries" class="environment-from-editor" as-sortable="$ctrl.dragControlListeners">
1312
<div
1413
class="environment-from-entry"
@@ -18,9 +17,9 @@
1817
as-sortable-item>
1918

2019
<div class="form-group environment-from-input">
21-
<div ng-if="$ctrl.isEnvFromReadonly(entry)" class="faux-input-group">
20+
<div ng-if="$ctrl.isEnvFromReadonly(entry) || !$ctrl.hasOptions()" class="faux-input-group">
2221
<div ng-if="!entry.configMapRef.name && !entry.secretRef.name">
23-
No secrets or config maps have been added as Environment From.
22+
No config maps or secrets have been added as Environment From.
2423
</div>
2524
<div ng-if="entry.configMapRef.name || entry.secretRef.name" class="faux-form-control readonly">
2625
Use all keys and values from
@@ -29,8 +28,8 @@
2928
</div>
3029
</div>
3130

32-
<div ng-if="!$ctrl.isEnvFromReadonly(entry)">
33-
<div class="ui-select">
31+
<div ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()">
32+
<div class="ui-select" ng-class="{'duplicate': entry.duplicateEnvFrom}">
3433
<ui-select ng-model="entry.selectedEnvFrom"
3534
ng-required="entry.selectedEnvFrom"
3635
on-select="$ctrl.envFromObjectSelected($index, entry, $select.selected)"
@@ -42,7 +41,6 @@
4241
</span>
4342
</ui-select-match>
4443
<ui-select-choices
45-
ui-disable-choice="$ctrl.checkEntries(source, entry.selectedEnvFrom)"
4644
repeat="source in $ctrl.envFromSelectorOptions | filter : { metadata: { name: $select.search } } track by (source | uid)"
4745
group-by="$ctrl.groupByKind">
4846
<span ng-bind-html="source.metadata.name | highlight : $select.search"></span>
@@ -52,7 +50,7 @@
5250
</div>
5351
</div>
5452

55-
<div ng-if="!$ctrl.isReadonlyAny && !entry.isReadonlyValue" class="environment-from-editor-button">
53+
<div ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()" class="environment-from-editor-button">
5654
<span
5755
ng-if="!$ctrl.cannotSort && $ctrl.entries.length > 1"
5856
class="fa fa-bars sort-row"
@@ -70,12 +68,13 @@
7068
</div>
7169
</div>
7270

73-
<div class="environment-from-entry form-group" ng-if="!$ctrl.cannotAdd">
71+
<div class="environment-from-entry form-group" ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
7472
<a
7573
href=""
7674
class="add-row-link"
7775
role="button"
78-
ng-click="$ctrl.onAddRow()">{{ $ctrl.addRowLink }}</a>
76+
ng-click="$ctrl.onAddRow()">{{$ctrl.addRowLink}}</a>
7977
</div>
8078
</div>
8179
</ng-form>
80+

‎app/views/directives/edit-environment-variables.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ <h4 class="section-label">
4646
selector-placeholder="Config Map/Secret"
4747
env-from-selector-options="$ctrl.valueFromObjects"
4848
add-row-link="Add ALL Values from Config Map or Secret"
49+
is-readonly="$ctrl.ngReadonly"
4950
show-header>
5051
</edit-environment-from>
5152
</div>

‎dist/scripts/scripts.js

Lines changed: 18 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -9159,8 +9159,12 @@ a.onAddRow = function() {
91599159
s(a.envFromEntries), n.setFocusOn("." + a.setFocusClass);
91609160
}, a.deleteEntry = function(e, t) {
91619161
a.envFromEntries && !a.envFromEntries.length || (a.envFromEntries.splice(e, t), !a.envFromEntries.length && a.addRowLink && s(a.envFromEntries), a.updateEntries(a.envFromEntries), a.editEnvironmentFromForm.$setDirty());
9162+
}, a.hasOptions = function() {
9163+
return !_.isEmpty(a.envFromSelectorOptions);
9164+
}, a.hasEntries = function() {
9165+
return "[{}]" !== angular.toJson(a.entries) && a.entries && a.entries.length >= 1;
91629166
}, a.isEnvFromReadonly = function(e) {
9163-
return a.isReadonlyAny || !0 === e.isReadonlyValue || (e.secretRef || e.configMapRef) && !e.selectedEnvFrom || _.isEmpty(a.envFromSelectorOptions);
9167+
return !0 === a.isReadonly || e && !0 === e.isReadonly;
91649168
}, a.groupByKind = function(e) {
91659169
return o(e.kind);
91669170
}, a.dragControlListeners = {
@@ -9191,49 +9195,31 @@ return e.secretRef || e.configMapRef;
91919195
});
91929196
};
91939197
var c = function(e) {
9194-
a.envFromEntries = e || [], a.envFromEntries.length || s(a.envFromEntries), _.each(a.envFromEntries, function(e) {
9195-
e && (e.configMapRef && !r("configmaps", "get") && (e.isReadonlyValue = !0), e.secretRef && !r("secrets", "get") && (e.isReadonlyValue = !0));
9196-
});
9197-
}, l = function(e) {
9198-
var t;
9199-
switch (e.kind) {
9200-
case "ConfigMap":
9201-
t = _.find(a.envFromEntries, {
9202-
configMapRef: {
9203-
name: e.metadata.name
9204-
}
9205-
});
9206-
break;
9207-
9208-
case "Secret":
9209-
t = _.find(a.envFromEntries, {
9210-
secretRef: {
9198+
var t = _.camelCase(e.kind) + "Ref";
9199+
return _.filter(a.envFromEntries, [ t, {
92119200
name: e.metadata.name
9212-
}
9201+
} ]);
9202+
}, l = function() {
9203+
a.envFromEntries = a.entries || [], a.envFromEntries.length || s(a.envFromEntries), _.each(a.envFromEntries, function(e) {
9204+
e && (e.configMapRef && !r("configmaps", "get") && (e.isReadonly = !0), e.secretRef && !r("secrets", "get") && (e.isReadonly = !0));
9205+
}), _.each(a.envFromSelectorOptions, function(e) {
9206+
_.each(c(e), function(t, n) {
9207+
_.set(t, "selectedEnvFrom", e), n > 0 && _.set(t, "duplicateEnvFrom", !0);
92139208
});
9214-
}
9215-
return t;
9216-
};
9217-
a.checkEntries = function(e, t) {
9218-
return e !== t && !!l(e);
9219-
};
9220-
var u = function(e, t) {
9221-
a.cannotAdd = a.isReadonlyAny || _.isEmpty(t), t && _.each(t, function(e) {
9222-
var t = l(e);
9223-
t && _.set(t, "selectedEnvFrom", e);
92249209
});
92259210
};
92269211
a.$onInit = function() {
9227-
c(a.entries), u(a.entries, a.envFromSelectorOptions), "cannotDelete" in e && (a.cannotDeleteAny = !0), "cannotSort" in e && (a.cannotSort = !0), "isReadonly" in e && (a.isReadonlyAny = !0), "showHeader" in e && (a.showHeader = !0), a.envFromEntries && !a.envFromEntries.length && s(a.envFromEntries);
9212+
l(), "cannotDelete" in e && (a.cannotDeleteAny = !0), "cannotSort" in e && (a.cannotSort = !0), "showHeader" in e && (a.showHeader = !0), a.envFromEntries && !a.envFromEntries.length && s(a.envFromEntries);
92289213
}, a.$onChanges = function(e) {
9229-
e.entries && c(e.entries.currentValue), e.envFromSelectorOptions && u(a.envFromEntries, e.envFromSelectorOptions.currentValue);
9214+
(e.entries || e.envFromSelectorOptions) && l();
92309215
};
92319216
} ],
92329217
bindings: {
92339218
addRowLink: "@",
92349219
entries: "=",
92359220
envFromSelectorOptions: "<",
9236-
selectorPlaceholder: "@"
9221+
selectorPlaceholder: "@",
9222+
isReadonly: "<?"
92379223
},
92389224
templateUrl: "views/directives/edit-environment-from.html"
92399225
});

‎dist/scripts/templates.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6666,39 +6666,39 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
66666666
"<div ng-model=\"$ctrl.entries\" class=\"environment-from-editor\" as-sortable=\"$ctrl.dragControlListeners\">\n" +
66676667
"<div class=\"environment-from-entry\" ng-class-odd=\"'odd'\" ng-class-even=\"'even'\" ng-repeat=\"entry in $ctrl.envFromEntries\" as-sortable-item>\n" +
66686668
"<div class=\"form-group environment-from-input\">\n" +
6669-
"<div ng-if=\"$ctrl.isEnvFromReadonly(entry)\" class=\"faux-input-group\">\n" +
6669+
"<div ng-if=\"$ctrl.isEnvFromReadonly(entry) || !$ctrl.hasOptions()\" class=\"faux-input-group\">\n" +
66706670
"<div ng-if=\"!entry.configMapRef.name && !entry.secretRef.name\">\n" +
6671-
"No secrets or config maps have been added as Environment From.\n" +
6671+
"No config maps or secrets have been added as Environment From.\n" +
66726672
"</div>\n" +
66736673
"<div ng-if=\"entry.configMapRef.name || entry.secretRef.name\" class=\"faux-form-control readonly\">\n" +
66746674
"Use all keys and values from\n" +
66756675
"<span ng-if=\"entry.configMapRef.name\">config map {{entry.configMapRef.name}}</span>\n" +
66766676
"<span ng-if=\"entry.secretRef.name\">secret {{entry.secretRef.name}}</span>\n" +
66776677
"</div>\n" +
66786678
"</div>\n" +
6679-
"<div ng-if=\"!$ctrl.isEnvFromReadonly(entry)\">\n" +
6680-
"<div class=\"ui-select\">\n" +
6679+
"<div ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()\">\n" +
6680+
"<div class=\"ui-select\" ng-class=\"{'duplicate': entry.duplicateEnvFrom}\">\n" +
66816681
"<ui-select ng-model=\"entry.selectedEnvFrom\" ng-required=\"entry.selectedEnvFrom\" on-select=\"$ctrl.envFromObjectSelected($index, entry, $select.selected)\" ng-class=\"{'{{$ctrl.setFocusClass}}' : $last}\">\n" +
66826682
"<ui-select-match placeholder=\"Select a resource\">\n" +
66836683
"<span>\n" +
66846684
"{{$select.selected.metadata.name}}\n" +
66856685
"<small class=\"text-muted\">&ndash; {{$select.selected.kind | humanizeKind : true}}</small>\n" +
66866686
"</span>\n" +
66876687
"</ui-select-match>\n" +
6688-
"<ui-select-choices ui-disable-choice=\"$ctrl.checkEntries(source, entry.selectedEnvFrom)\" repeat=\"source in $ctrl.envFromSelectorOptions | filter : { metadata: { name: $select.search } } track by (source | uid)\" group-by=\"$ctrl.groupByKind\">\n" +
6688+
"<ui-select-choices repeat=\"source in $ctrl.envFromSelectorOptions | filter : { metadata: { name: $select.search } } track by (source | uid)\" group-by=\"$ctrl.groupByKind\">\n" +
66896689
"<span ng-bind-html=\"source.metadata.name | highlight : $select.search\"></span>\n" +
66906690
"</ui-select-choices>\n" +
66916691
"</ui-select>\n" +
66926692
"</div>\n" +
66936693
"</div>\n" +
66946694
"</div>\n" +
6695-
"<div ng-if=\"!$ctrl.isReadonlyAny && !entry.isReadonlyValue\" class=\"environment-from-editor-button\">\n" +
6695+
"<div ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()\" class=\"environment-from-editor-button\">\n" +
66966696
"<span ng-if=\"!$ctrl.cannotSort && $ctrl.entries.length > 1\" class=\"fa fa-bars sort-row\" role=\"button\" aria-label=\"Move row\" aria-grabbed=\"false\" as-sortable-item-handle></span>\n" +
66976697
"<a ng-if=\"!$ctrl.cannotDeleteAny\" href=\"\" class=\"pficon pficon-close delete-row as-sortable-item-delete\" role=\"button\" aria-label=\"Delete row\" ng-click=\"$ctrl.deleteEntry($index, 1)\"></a>\n" +
66986698
"</div>\n" +
66996699
"</div>\n" +
6700-
"<div class=\"environment-from-entry form-group\" ng-if=\"!$ctrl.cannotAdd\">\n" +
6701-
"<a href=\"\" class=\"add-row-link\" role=\"button\" ng-click=\"$ctrl.onAddRow()\">{{ $ctrl.addRowLink }}</a>\n" +
6700+
"<div class=\"environment-from-entry form-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
6701+
"<a href=\"\" class=\"add-row-link\" role=\"button\" ng-click=\"$ctrl.onAddRow()\">{{$ctrl.addRowLink}}</a>\n" +
67026702
"</div>\n" +
67036703
"</div>\n" +
67046704
"</ng-form>"
@@ -6723,7 +6723,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
67236723
"Environment From\n" +
67246724
"<span class=\"pficon pficon-help\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Environment From lets you add all key-value pairs from a config map or secret as environment variables.\"></span>\n" +
67256725
"</h4>\n" +
6726-
"<edit-environment-from entries=\"container.envFrom\" selector-placeholder=\"Config Map/Secret\" env-from-selector-options=\"$ctrl.valueFromObjects\" add-row-link=\"Add ALL Values from Config Map or Secret\" show-header>\n" +
6726+
"<edit-environment-from entries=\"container.envFrom\" selector-placeholder=\"Config Map/Secret\" env-from-selector-options=\"$ctrl.valueFromObjects\" add-row-link=\"Add ALL Values from Config Map or Secret\" is-readonly=\"$ctrl.ngReadonly\" show-header>\n" +
67276727
"</edit-environment-from>\n" +
67286728
"</div>\n" +
67296729
"<button class=\"btn btn-default\" ng-if=\"$ctrl.canIUpdate && !$ctrl.ngReadonly\" ng-click=\"$ctrl.save()\" ng-disabled=\"$ctrl.form.$pristine || $ctrl.form.$invalid\">Save</button>\n" +

0 commit comments

Comments
 (0)