Skip to content

Commit

Permalink
Environment From Fix Drag & Order Display
Browse files Browse the repository at this point in the history 
Fix for making sure the drag and order handles are hidden
within a read only display
  • Loading branch information
@cdcabrera
cdcabrera committed Oct 17, 2017
1 parent 4f629c3 commit c5e53dd
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 106 deletions.
86 changes: 30 additions & 56 deletions app/scripts/directives/editEnvironmentFrom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
addRowLink: '@', // creates a link to "add row" and sets its text label
entries: '=', // an array of objects containing configmaps and secrets
envFromSelectorOptions: '<', // dropdown selector options, an array of objects
selectorPlaceholder: '@' // placeholder copy for dropdown selector
selectorPlaceholder: '@', // placeholder copy for dropdown selector
isReadonly: '<?' // display as read only values
},
templateUrl: 'views/directives/edit-environment-from.html'
});
Expand All @@ -20,7 +21,6 @@
$filter,
utils) {
var ctrl = this;

var canI = $filter('canI');
var humanizeKind = $filter('humanizeKind');
var uniqueId = _.uniqueId();
Expand All @@ -42,6 +42,7 @@
}

ctrl.envFromEntries.splice(start, deleteCount);

if(!ctrl.envFromEntries.length && ctrl.addRowLink) {
addEntry(ctrl.envFromEntries);
}
Expand All @@ -50,18 +51,22 @@
ctrl.editEnvironmentFromForm.$setDirty();
};

ctrl.hasOptions = function() {
return !_.isEmpty(ctrl.envFromSelectorOptions);
};

ctrl.hasEntries = function() {
return angular.toJson(ctrl.entries) !== '[{}]' && ctrl.entries && ctrl.entries.length >= 1;
};

ctrl.isEnvFromReadonly = function(entry) {
return ctrl.isReadonlyAny ||
entry.isReadonlyValue === true ||
((entry.secretRef || entry.configMapRef) && !entry.selectedEnvFrom) ||
_.isEmpty(ctrl.envFromSelectorOptions);
return ctrl.isReadonly === true || entry && entry.isReadonly === true;
};

ctrl.groupByKind = function(object) {
return humanizeKind(object.kind);
};

//ctrl.uniqueForValue = utils.uniqueForValue;
ctrl.dragControlListeners = {
accept: function (sourceItemHandleScope, destSortableScope) {
return sourceItemHandleScope.itemScope.sortableScope.$id === destSortableScope.$id;
Expand Down Expand Up @@ -99,8 +104,13 @@
});
};

var updateEnvFromEntries = function(entries) {
ctrl.envFromEntries = entries || [];
var getReferenceValues = function(option) {
var kindRef = _.camelCase(option.kind) + 'Ref';
return _.filter(ctrl.envFromEntries, [kindRef, {name:option.metadata.name}]);
};

var updateEnvFromEntries = function() {
ctrl.envFromEntries = ctrl.entries || [];

if(!ctrl.envFromEntries.length) {
addEntry(ctrl.envFromEntries);
Expand All @@ -109,56 +119,28 @@
_.each(ctrl.envFromEntries, function(entry) {
if(entry) {
if(entry.configMapRef && !canI('configmaps', 'get')) {
entry.isReadonlyValue = true;
entry.isReadonly = true;
}

if(entry.secretRef && !canI('secrets', 'get')) {
entry.isReadonlyValue = true;
entry.isReadonly = true;
}
}
});
};

var getReferenceValue = function(option) {
var referenceValue;

switch(option.kind) {
case 'ConfigMap':
referenceValue = _.find(ctrl.envFromEntries, {configMapRef: {name: option.metadata.name}});
break;
case 'Secret':
referenceValue = _.find(ctrl.envFromEntries, {secretRef: {name: option.metadata.name}});
break;
}
_.each(ctrl.envFromSelectorOptions, function(option) {
_.each(getReferenceValues(option), function(val, i) {
_.set(val, 'selectedEnvFrom', option);

return referenceValue;
};

ctrl.checkEntries = function(option, entrySelectedEnvFrom) {
if(option === entrySelectedEnvFrom) {
return false;
}

return !!(getReferenceValue(option));
};

var findReferenceValueForEntries = function(entries, envFromSelectorOptions) {
ctrl.cannotAdd = (ctrl.isReadonlyAny || _.isEmpty(envFromSelectorOptions));

if(envFromSelectorOptions) {
_.each(envFromSelectorOptions, function(option) {
var referenceValue = getReferenceValue(option);

if (referenceValue) {
_.set(referenceValue, 'selectedEnvFrom', option);
if (i > 0) {
_.set(val, 'duplicateEnvFrom', true);
}
});
}
});
};

ctrl.$onInit = function() {
updateEnvFromEntries(ctrl.entries);
findReferenceValueForEntries(ctrl.entries, ctrl.envFromSelectorOptions);
updateEnvFromEntries();

if('cannotDelete' in $attrs) {
ctrl.cannotDeleteAny = true;
Expand All @@ -168,10 +150,6 @@
ctrl.cannotSort = true;
}

if('isReadonly' in $attrs) {
ctrl.isReadonlyAny = true;
}

if('showHeader' in $attrs) {
ctrl.showHeader = true;
}
Expand All @@ -182,12 +160,8 @@
};

ctrl.$onChanges = function(changes) {
if(changes.entries) {
updateEnvFromEntries(changes.entries.currentValue);
}

if(changes.envFromSelectorOptions) {
findReferenceValueForEntries(ctrl.envFromEntries, changes.envFromSelectorOptions.currentValue);
if(changes.entries || changes.envFromSelectorOptions) {
updateEnvFromEntries();
}
};
}
Expand Down
17 changes: 8 additions & 9 deletions app/views/directives/edit-environment-from.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
</div>
</div>
</div>

<div ng-model="$ctrl.entries" class="environment-from-editor" as-sortable="$ctrl.dragControlListeners">
<div
class="environment-from-entry"
Expand All @@ -18,9 +17,9 @@
as-sortable-item>

<div class="form-group environment-from-input">
<div ng-if="$ctrl.isEnvFromReadonly(entry)" class="faux-input-group">
<div ng-if="$ctrl.isEnvFromReadonly(entry) || !$ctrl.hasOptions()" class="faux-input-group">
<div ng-if="!entry.configMapRef.name && !entry.secretRef.name">
No secrets or config maps have been added as Environment From.
No config maps or secrets have been added as Environment From.
</div>
<div ng-if="entry.configMapRef.name || entry.secretRef.name" class="faux-form-control readonly">
Use all keys and values from
Expand All @@ -29,8 +28,8 @@
</div>
</div>

<div ng-if="!$ctrl.isEnvFromReadonly(entry)">
<div class="ui-select">
<div ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()">
<div class="ui-select" ng-class="{'duplicate': entry.duplicateEnvFrom}">
<ui-select ng-model="entry.selectedEnvFrom"
ng-required="entry.selectedEnvFrom"
on-select="$ctrl.envFromObjectSelected($index, entry, $select.selected)"
Expand All @@ -42,7 +41,6 @@
</span>
</ui-select-match>
<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">
<span ng-bind-html="source.metadata.name | highlight : $select.search"></span>
Expand All @@ -52,7 +50,7 @@
</div>
</div>

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

<div class="environment-from-entry form-group" ng-if="!$ctrl.cannotAdd">
<div class="environment-from-entry form-group" ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
<a
href=""
class="add-row-link"
role="button"
ng-click="$ctrl.onAddRow()">{{ $ctrl.addRowLink }}</a>
ng-click="$ctrl.onAddRow()">{{$ctrl.addRowLink}}</a>
</div>
</div>
</ng-form>

1 change: 1 addition & 0 deletions app/views/directives/edit-environment-variables.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ <h4 class="section-label">
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>
</edit-environment-from>
</div>
Expand Down
50 changes: 18 additions & 32 deletions dist/scripts/scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9159,8 +9159,12 @@ a.onAddRow = function() {
s(a.envFromEntries), n.setFocusOn("." + a.setFocusClass);
}, a.deleteEntry = function(e, t) {
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());
}, a.hasOptions = function() {
return !_.isEmpty(a.envFromSelectorOptions);
}, a.hasEntries = function() {
return "[{}]" !== angular.toJson(a.entries) && a.entries && a.entries.length >= 1;
}, a.isEnvFromReadonly = function(e) {
return a.isReadonlyAny || !0 === e.isReadonlyValue || (e.secretRef || e.configMapRef) && !e.selectedEnvFrom || _.isEmpty(a.envFromSelectorOptions);
return !0 === a.isReadonly || e && !0 === e.isReadonly;
}, a.groupByKind = function(e) {
return o(e.kind);
}, a.dragControlListeners = {
Expand Down Expand Up @@ -9191,49 +9195,31 @@ return e.secretRef || e.configMapRef;
});
};
var c = function(e) {
a.envFromEntries = e || [], a.envFromEntries.length || s(a.envFromEntries), _.each(a.envFromEntries, function(e) {
e && (e.configMapRef && !r("configmaps", "get") && (e.isReadonlyValue = !0), e.secretRef && !r("secrets", "get") && (e.isReadonlyValue = !0));
});
}, l = function(e) {
var t;
switch (e.kind) {
case "ConfigMap":
t = _.find(a.envFromEntries, {
configMapRef: {
name: e.metadata.name
}
});
break;

case "Secret":
t = _.find(a.envFromEntries, {
secretRef: {
var t = _.camelCase(e.kind) + "Ref";
return _.filter(a.envFromEntries, [ t, {
name: e.metadata.name
}
} ]);
}, l = function() {
a.envFromEntries = a.entries || [], a.envFromEntries.length || s(a.envFromEntries), _.each(a.envFromEntries, function(e) {
e && (e.configMapRef && !r("configmaps", "get") && (e.isReadonly = !0), e.secretRef && !r("secrets", "get") && (e.isReadonly = !0));
}), _.each(a.envFromSelectorOptions, function(e) {
_.each(c(e), function(t, n) {
_.set(t, "selectedEnvFrom", e), n > 0 && _.set(t, "duplicateEnvFrom", !0);
});
}
return t;
};
a.checkEntries = function(e, t) {
return e !== t && !!l(e);
};
var u = function(e, t) {
a.cannotAdd = a.isReadonlyAny || _.isEmpty(t), t && _.each(t, function(e) {
var t = l(e);
t && _.set(t, "selectedEnvFrom", e);
});
};
a.$onInit = function() {
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);
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);
}, a.$onChanges = function(e) {
e.entries && c(e.entries.currentValue), e.envFromSelectorOptions && u(a.envFromEntries, e.envFromSelectorOptions.currentValue);
(e.entries || e.envFromSelectorOptions) && l();
};
} ],
bindings: {
addRowLink: "@",
entries: "=",
envFromSelectorOptions: "<",
selectorPlaceholder: "@"
selectorPlaceholder: "@",
isReadonly: "<?"
},
templateUrl: "views/directives/edit-environment-from.html"
});
Expand Down
18 changes: 9 additions & 9 deletions dist/scripts/templates.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6666,39 +6666,39 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"<div ng-model=\"$ctrl.entries\" class=\"environment-from-editor\" as-sortable=\"$ctrl.dragControlListeners\">\n" +
"<div class=\"environment-from-entry\" ng-class-odd=\"'odd'\" ng-class-even=\"'even'\" ng-repeat=\"entry in $ctrl.envFromEntries\" as-sortable-item>\n" +
"<div class=\"form-group environment-from-input\">\n" +
"<div ng-if=\"$ctrl.isEnvFromReadonly(entry)\" class=\"faux-input-group\">\n" +
"<div ng-if=\"$ctrl.isEnvFromReadonly(entry) || !$ctrl.hasOptions()\" class=\"faux-input-group\">\n" +
"<div ng-if=\"!entry.configMapRef.name && !entry.secretRef.name\">\n" +
"No secrets or config maps have been added as Environment From.\n" +
"No config maps or secrets have been added as Environment From.\n" +
"</div>\n" +
"<div ng-if=\"entry.configMapRef.name || entry.secretRef.name\" class=\"faux-form-control readonly\">\n" +
"Use all keys and values from\n" +
"<span ng-if=\"entry.configMapRef.name\">config map {{entry.configMapRef.name}}</span>\n" +
"<span ng-if=\"entry.secretRef.name\">secret {{entry.secretRef.name}}</span>\n" +
"</div>\n" +
"</div>\n" +
"<div ng-if=\"!$ctrl.isEnvFromReadonly(entry)\">\n" +
"<div class=\"ui-select\">\n" +
"<div ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()\">\n" +
"<div class=\"ui-select\" ng-class=\"{'duplicate': entry.duplicateEnvFrom}\">\n" +
"<ui-select ng-model=\"entry.selectedEnvFrom\" ng-required=\"entry.selectedEnvFrom\" on-select=\"$ctrl.envFromObjectSelected($index, entry, $select.selected)\" ng-class=\"{'{{$ctrl.setFocusClass}}' : $last}\">\n" +
"<ui-select-match placeholder=\"Select a resource\">\n" +
"<span>\n" +
"{{$select.selected.metadata.name}}\n" +
"<small class=\"text-muted\">&ndash; {{$select.selected.kind | humanizeKind : true}}</small>\n" +
"</span>\n" +
"</ui-select-match>\n" +
"<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" +
"<ui-select-choices repeat=\"source in $ctrl.envFromSelectorOptions | filter : { metadata: { name: $select.search } } track by (source | uid)\" group-by=\"$ctrl.groupByKind\">\n" +
"<span ng-bind-html=\"source.metadata.name | highlight : $select.search\"></span>\n" +
"</ui-select-choices>\n" +
"</ui-select>\n" +
"</div>\n" +
"</div>\n" +
"</div>\n" +
"<div ng-if=\"!$ctrl.isReadonlyAny && !entry.isReadonlyValue\" class=\"environment-from-editor-button\">\n" +
"<div ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasEntries()\" class=\"environment-from-editor-button\">\n" +
"<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" +
"<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" +
"</div>\n" +
"</div>\n" +
"<div class=\"environment-from-entry form-group\" ng-if=\"!$ctrl.cannotAdd\">\n" +
"<a href=\"\" class=\"add-row-link\" role=\"button\" ng-click=\"$ctrl.onAddRow()\">{{ $ctrl.addRowLink }}</a>\n" +
"<div class=\"environment-from-entry form-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
"<a href=\"\" class=\"add-row-link\" role=\"button\" ng-click=\"$ctrl.onAddRow()\">{{$ctrl.addRowLink}}</a>\n" +
"</div>\n" +
"</div>\n" +
"</ng-form>"
Expand All @@ -6723,7 +6723,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"Environment From\n" +
"<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" +
"</h4>\n" +
"<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" +
"<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" +
"</edit-environment-from>\n" +
"</div>\n" +
"<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" +
Expand Down

0 comments on commit c5e53dd

Please sign in to comment.