Skip to content

Commit 9dc660c

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 f127c70 commit 9dc660c

File tree

5 files changed

+92
-105
lines changed

5 files changed

+92
-105
lines changed

‎app/scripts/directives/editEnvironmentFrom.js

+53-58
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();
@@ -51,6 +51,7 @@
5151
}
5252

5353
ctrl.envFromEntries.splice(start, deleteCount);
54+
5455
if(!ctrl.envFromEntries.length && ctrl.addRowLink) {
5556
addEntry(ctrl.envFromEntries);
5657
}
@@ -59,11 +60,18 @@
5960
ctrl.editEnvironmentFromForm.$setDirty();
6061
};
6162

63+
ctrl.hasOptions = function() {
64+
return !_.isEmpty(ctrl.envFromSelectorOptions);
65+
};
66+
67+
ctrl.hasEntries = function() {
68+
return _.some(ctrl.entries, function(entry) {
69+
return _.get(entry, 'configMapRef.name') || _.get(entry, 'secretRef.name');
70+
});
71+
};
72+
6273
ctrl.isEnvFromReadonly = function(entry) {
63-
return ctrl.isReadonlyAny ||
64-
entry.isReadonlyValue === true ||
65-
((entry.secretRef || entry.configMapRef) && !entry.selectedEnvFrom) ||
66-
_.isEmpty(ctrl.envFromSelectorOptions);
74+
return ctrl.isReadonly === true || entry && entry.isReadonly === true;
6775
};
6876

6977
ctrl.groupByKind = function(object) {
@@ -107,66 +115,61 @@
107115
});
108116
};
109117

110-
var updateEnvFromEntries = function(entries) {
111-
ctrl.envFromEntries = entries || [];
118+
var updateEnvFromEntries = function() {
119+
var configMapsByName = {};
120+
var secretsByName = {};
121+
122+
ctrl.envFromEntries = ctrl.entries || [];
112123

113124
if(!ctrl.envFromEntries.length) {
114125
addEntry(ctrl.envFromEntries);
115126
}
116127

117-
_.each(ctrl.envFromEntries, function(entry) {
118-
if(entry) {
119-
if(entry.configMapRef && !canI('configmaps', 'get')) {
120-
entry.isReadonlyValue = true;
121-
}
122-
123-
if(entry.secretRef && !canI('secrets', 'get')) {
124-
entry.isReadonlyValue = true;
125-
}
128+
_.each(ctrl.envFromSelectorOptions, function(option) {
129+
switch(option.kind) {
130+
case 'ConfigMap':
131+
configMapsByName[option.metadata.name] = option;
132+
break;
133+
case 'Secret':
134+
secretsByName[option.metadata.name] = option;
135+
break;
126136
}
127137
});
128-
};
129138

130-
var getReferenceValue = function(option) {
131-
var referenceValue;
132-
133-
switch(option.kind) {
134-
case 'ConfigMap':
135-
referenceValue = _.find(ctrl.envFromEntries, {configMapRef: {name: option.metadata.name}});
136-
break;
137-
case 'Secret':
138-
referenceValue = _.find(ctrl.envFromEntries, {secretRef: {name: option.metadata.name}});
139-
break;
140-
}
139+
_.each(ctrl.envFromEntries, function(entry) {
140+
var refType;
141+
var entryType;
141142

142-
return referenceValue;
143-
};
143+
if (entry.configMapRef) {
144+
refType = 'configMapRef';
145+
entryType = 'configmaps';
146+
}
144147

145-
ctrl.checkEntries = function(option, entrySelectedEnvFrom) {
146-
if(option === entrySelectedEnvFrom) {
147-
return false;
148-
}
148+
if(entry.secretRef) {
149+
refType = 'secretRef';
150+
entryType = 'secrets';
151+
}
149152

150-
return !!(getReferenceValue(option));
151-
};
153+
if (refType && entryType) {
154+
var refTypeName = entry[refType].name;
152155

153-
var findReferenceValueForEntries = function(entries, envFromSelectorOptions) {
154-
ctrl.cannotAdd = (ctrl.isReadonlyAny || _.isEmpty(envFromSelectorOptions));
156+
if (entry.configMapRef && (refTypeName in configMapsByName)) {
157+
entry.selectedEnvFrom = configMapsByName[refTypeName];
158+
}
155159

156-
if(envFromSelectorOptions) {
157-
_.each(envFromSelectorOptions, function(option) {
158-
var referenceValue = getReferenceValue(option);
160+
if (entry.secretRef && (refTypeName in secretsByName)) {
161+
entry.selectedEnvFrom = secretsByName[refTypeName];
162+
}
159163

160-
if (referenceValue) {
161-
_.set(referenceValue, 'selectedEnvFrom', option);
164+
if(!canI(entryType, 'get')) {
165+
entry.isReadonly = true;
162166
}
163-
});
164-
}
167+
}
168+
});
165169
};
166170

167171
ctrl.$onInit = function() {
168-
updateEnvFromEntries(ctrl.entries);
169-
findReferenceValueForEntries(ctrl.entries, ctrl.envFromSelectorOptions);
172+
updateEnvFromEntries();
170173

171174
if('cannotDelete' in $attrs) {
172175
ctrl.cannotDeleteAny = true;
@@ -176,10 +179,6 @@
176179
ctrl.cannotSort = true;
177180
}
178181

179-
if('isReadonly' in $attrs) {
180-
ctrl.isReadonlyAny = true;
181-
}
182-
183182
if('showHeader' in $attrs) {
184183
ctrl.showHeader = true;
185184
}
@@ -190,12 +189,8 @@
190189
};
191190

192191
ctrl.$onChanges = function(changes) {
193-
if(changes.entries) {
194-
updateEnvFromEntries(changes.entries.currentValue);
195-
}
196-
197-
if(changes.envFromSelectorOptions) {
198-
findReferenceValueForEntries(ctrl.envFromEntries, changes.envFromSelectorOptions.currentValue);
192+
if(changes.entries || changes.envFromSelectorOptions) {
193+
updateEnvFromEntries();
199194
}
200195
};
201196
}

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

+7-9
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,7 +28,7 @@
2928
</div>
3029
</div>
3130

32-
<div ng-if="!$ctrl.isEnvFromReadonly(entry)">
31+
<div ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()">
3332
<div class="ui-select">
3433
<ui-select ng-model="entry.selectedEnvFrom"
3534
ng-required="entry.selectedEnvFrom"
@@ -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,18 +68,18 @@
7068
</div>
7169
<div class="environment-from-view-details">
7270
<a
73-
ng-if="entry.selectedEnvFrom"
7471
href=""
72+
ng-if="entry.selectedEnvFrom"
7573
ng-click="$ctrl.viewOverlayPanel(entry.selectedEnvFrom)">View Details</a>
7674
</div>
7775
</div>
7876

79-
<div class="environment-from-entry form-group" ng-if="!$ctrl.cannotAdd">
77+
<div class="environment-from-entry form-group" ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
8078
<a
8179
href=""
8280
class="add-row-link"
8381
role="button"
84-
ng-click="$ctrl.onAddRow()">{{ $ctrl.addRowLink }}</a>
82+
ng-click="$ctrl.onAddRow()">{{$ctrl.addRowLink}}</a>
8583
</div>
8684
</div>
8785

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

+1
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

+22-29
Original file line numberDiff line numberDiff line change
@@ -9207,8 +9207,14 @@ a.onAddRow = function() {
92079207
s(a.envFromEntries), n.setFocusOn("." + a.setFocusClass);
92089208
}, a.deleteEntry = function(e, t) {
92099209
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());
9210+
}, a.hasOptions = function() {
9211+
return !_.isEmpty(a.envFromSelectorOptions);
9212+
}, a.hasEntries = function() {
9213+
return _.some(a.entries, function(e) {
9214+
return _.get(e, "configMapRef.name") || _.get(e, "secretRef.name");
9215+
});
92109216
}, a.isEnvFromReadonly = function(e) {
9211-
return a.isReadonlyAny || !0 === e.isReadonlyValue || (e.secretRef || e.configMapRef) && !e.selectedEnvFrom || _.isEmpty(a.envFromSelectorOptions);
9217+
return !0 === a.isReadonly || e && !0 === e.isReadonly;
92129218
}, a.groupByKind = function(e) {
92139219
return o(e.kind);
92149220
}, a.dragControlListeners = {
@@ -9238,50 +9244,37 @@ a.entries = _.filter(e, function(e) {
92389244
return e.secretRef || e.configMapRef;
92399245
});
92409246
};
9241-
var c = function(e) {
9242-
a.envFromEntries = e || [], a.envFromEntries.length || s(a.envFromEntries), _.each(a.envFromEntries, function(e) {
9243-
e && (e.configMapRef && !r("configmaps", "get") && (e.isReadonlyValue = !0), e.secretRef && !r("secrets", "get") && (e.isReadonlyValue = !0));
9244-
});
9245-
}, l = function(e) {
9246-
var t;
9247-
switch (e.kind) {
9247+
var c = function() {
9248+
var e = {}, t = {};
9249+
a.envFromEntries = a.entries || [], a.envFromEntries.length || s(a.envFromEntries), _.each(a.envFromSelectorOptions, function(n) {
9250+
switch (n.kind) {
92489251
case "ConfigMap":
9249-
t = _.find(a.envFromEntries, {
9250-
configMapRef: {
9251-
name: e.metadata.name
9252-
}
9253-
});
9252+
e[n.metadata.name] = n;
92549253
break;
92559254

92569255
case "Secret":
9257-
t = _.find(a.envFromEntries, {
9258-
secretRef: {
9259-
name: e.metadata.name
9256+
t[n.metadata.name] = n;
92609257
}
9261-
});
9258+
}), _.each(a.envFromEntries, function(n) {
9259+
var a, o;
9260+
if (n.configMapRef && (a = "configMapRef", o = "configmaps"), n.secretRef && (a = "secretRef", o = "secrets"), a && o) {
9261+
var i = n[a].name;
9262+
n.configMapRef && i in e && (n.selectedEnvFrom = e[i]), n.secretRef && i in t && (n.selectedEnvFrom = t[i]), r(o, "get") || (n.isReadonly = !0);
92629263
}
9263-
return t;
9264-
};
9265-
a.checkEntries = function(e, t) {
9266-
return e !== t && !!l(e);
9267-
};
9268-
var u = function(e, t) {
9269-
a.cannotAdd = a.isReadonlyAny || _.isEmpty(t), t && _.each(t, function(e) {
9270-
var t = l(e);
9271-
t && _.set(t, "selectedEnvFrom", e);
92729264
});
92739265
};
92749266
a.$onInit = function() {
9275-
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);
9267+
c(), "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);
92769268
}, a.$onChanges = function(e) {
9277-
e.entries && c(e.entries.currentValue), e.envFromSelectorOptions && u(a.envFromEntries, e.envFromSelectorOptions.currentValue);
9269+
(e.entries || e.envFromSelectorOptions) && c();
92789270
};
92799271
} ],
92809272
bindings: {
92819273
addRowLink: "@",
92829274
entries: "=",
92839275
envFromSelectorOptions: "<",
9284-
selectorPlaceholder: "@"
9276+
selectorPlaceholder: "@",
9277+
isReadonly: "<?"
92859278
},
92869279
templateUrl: "views/directives/edit-environment-from.html"
92879280
});

‎dist/scripts/templates.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -6709,17 +6709,17 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
67096709
"<div ng-model=\"$ctrl.entries\" class=\"environment-from-editor\" as-sortable=\"$ctrl.dragControlListeners\">\n" +
67106710
"<div class=\"environment-from-entry\" ng-class-odd=\"'odd'\" ng-class-even=\"'even'\" ng-repeat=\"entry in $ctrl.envFromEntries\" as-sortable-item>\n" +
67116711
"<div class=\"form-group environment-from-input\">\n" +
6712-
"<div ng-if=\"$ctrl.isEnvFromReadonly(entry)\" class=\"faux-input-group\">\n" +
6712+
"<div ng-if=\"$ctrl.isEnvFromReadonly(entry) || !$ctrl.hasOptions()\" class=\"faux-input-group\">\n" +
67136713
"<div ng-if=\"!entry.configMapRef.name && !entry.secretRef.name\">\n" +
6714-
"No secrets or config maps have been added as Environment From.\n" +
6714+
"No config maps or secrets have been added as Environment From.\n" +
67156715
"</div>\n" +
67166716
"<div ng-if=\"entry.configMapRef.name || entry.secretRef.name\" class=\"faux-form-control readonly\">\n" +
67176717
"Use all keys and values from\n" +
67186718
"<span ng-if=\"entry.configMapRef.name\">config map {{entry.configMapRef.name}}</span>\n" +
67196719
"<span ng-if=\"entry.secretRef.name\">secret {{entry.secretRef.name}}</span>\n" +
67206720
"</div>\n" +
67216721
"</div>\n" +
6722-
"<div ng-if=\"!$ctrl.isEnvFromReadonly(entry)\">\n" +
6722+
"<div ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()\">\n" +
67236723
"<div class=\"ui-select\">\n" +
67246724
"<ui-select ng-model=\"entry.selectedEnvFrom\" ng-required=\"entry.selectedEnvFrom\" on-select=\"$ctrl.envFromObjectSelected($index, entry, $select.selected)\" ng-class=\"{'{{$ctrl.setFocusClass}}' : $last}\">\n" +
67256725
"<ui-select-match placeholder=\"Select a resource\">\n" +
@@ -6728,23 +6728,23 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
67286728
"<small class=\"text-muted\">&ndash; {{$select.selected.kind | humanizeKind : true}}</small>\n" +
67296729
"</span>\n" +
67306730
"</ui-select-match>\n" +
6731-
"<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" +
6731+
"<ui-select-choices repeat=\"source in $ctrl.envFromSelectorOptions | filter : { metadata: { name: $select.search } } track by (source | uid)\" group-by=\"$ctrl.groupByKind\">\n" +
67326732
"<span ng-bind-html=\"source.metadata.name | highlight : $select.search\"></span>\n" +
67336733
"</ui-select-choices>\n" +
67346734
"</ui-select>\n" +
67356735
"</div>\n" +
67366736
"</div>\n" +
67376737
"</div>\n" +
6738-
"<div ng-if=\"!$ctrl.isReadonlyAny && !entry.isReadonlyValue\" class=\"environment-from-editor-button\">\n" +
6738+
"<div ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()\" class=\"environment-from-editor-button\">\n" +
67396739
"<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" +
67406740
"<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" +
67416741
"</div>\n" +
67426742
"<div class=\"environment-from-view-details\">\n" +
6743-
"<a ng-if=\"entry.selectedEnvFrom\" href=\"\" ng-click=\"$ctrl.viewOverlayPanel(entry.selectedEnvFrom)\">View Details</a>\n" +
6743+
"<a href=\"\" ng-if=\"entry.selectedEnvFrom\" ng-click=\"$ctrl.viewOverlayPanel(entry.selectedEnvFrom)\">View Details</a>\n" +
67446744
"</div>\n" +
67456745
"</div>\n" +
6746-
"<div class=\"environment-from-entry form-group\" ng-if=\"!$ctrl.cannotAdd\">\n" +
6747-
"<a href=\"\" class=\"add-row-link\" role=\"button\" ng-click=\"$ctrl.onAddRow()\">{{ $ctrl.addRowLink }}</a>\n" +
6746+
"<div class=\"environment-from-entry form-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
6747+
"<a href=\"\" class=\"add-row-link\" role=\"button\" ng-click=\"$ctrl.onAddRow()\">{{$ctrl.addRowLink}}</a>\n" +
67486748
"</div>\n" +
67496749
"</div>\n" +
67506750
"<overlay-panel class=\"add-config-to-application\" show-panel=\"$ctrl.overlayPanelVisible\" show-close=\"true\" handle-close=\"$ctrl.closeOverlayPanel\">\n" +
@@ -6798,7 +6798,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
67986798
"Environment From\n" +
67996799
"<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" +
68006800
"</h4>\n" +
6801-
"<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" +
6801+
"<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" +
68026802
"</edit-environment-from>\n" +
68036803
"</div>\n" +
68046804
"<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)