Skip to content

Commit 42ee449

Browse files
cdcabreracdcabrera
committed
Support EnvFrom in the Env Editors
Adding mobile style support. Removed problematic display logic
1 parent 3177113 commit 42ee449

File tree

8 files changed

+142
-144
lines changed

8 files changed

+142
-144
lines changed

‎app/scripts/directives/editEnvironmentFrom.js

Lines changed: 34 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
EditEnvironmentFrom
99
],
1010
bindings: {
11-
addRowLink: '@',
12-
entries: '=',
13-
envFromSelectorOptions: '<',
14-
selectorPlaceholder: '@'
11+
addRowLink: '@', // creates a link to "add row" and sets its text label
12+
entries: '=', // an array of objects containing configmaps and secrets
13+
envFromSelectorOptions: '<', // dropdown selector options, an array of objects
14+
selectorPlaceholder: '@' // placeholder copy for dropdown selector
1515
},
1616
templateUrl: 'views/directives/edit-environment-from.html'
1717
});
@@ -23,9 +23,9 @@
2323

2424
var canI = $filter('canI');
2525
var humanizeKind = $filter('humanizeKind');
26+
var uniqueId = _.uniqueId();
2627

27-
ctrl.$id = _.uniqueId();
28-
ctrl.setFocusClass = 'edit-environment-from-set-focus-' + ctrl.$id;
28+
ctrl.setFocusClass = 'edit-environment-from-set-focus-' + uniqueId;
2929

3030
var addEntry = function(entries, entry) {
3131
entries && entries.push(entry || {});
@@ -37,7 +37,7 @@
3737
};
3838

3939
ctrl.deleteEntry = function(start, deleteCount) {
40-
if(ctrl.entries && !ctrl.entries.length) {
40+
if(ctrl.envFromEntries && !ctrl.envFromEntries.length) {
4141
return;
4242
}
4343

@@ -61,6 +61,16 @@
6161
return humanizeKind(object.kind);
6262
};
6363

64+
//ctrl.uniqueForValue = utils.uniqueForValue;
65+
ctrl.dragControlListeners = {
66+
accept: function (sourceItemHandleScope, destSortableScope) {
67+
return sourceItemHandleScope.itemScope.sortableScope.$id === destSortableScope.$id;
68+
},
69+
orderChanged: function() {
70+
ctrl.editEnvironmentFromForm.$setDirty();
71+
}
72+
};
73+
6474
ctrl.envFromObjectSelected = function(index, entry, selected) {
6575
var newEnvFrom = {};
6676

@@ -89,7 +99,7 @@
8999
});
90100
};
91101

92-
ctrl.updateEnvFromEntries = function(entries) {
102+
var updateEnvFromEntries = function(entries) {
93103
ctrl.envFromEntries = entries || [];
94104

95105
if(!ctrl.envFromEntries.length) {
@@ -98,12 +108,12 @@
98108

99109
_.each(ctrl.envFromEntries, function(entry) {
100110
if(entry) {
101-
if (entry.configMapRef) {
102-
entry.isReadonlyValue = !canI('configmaps', 'get');
111+
if(entry.configMapRef && !canI('configmaps', 'get')) {
112+
entry.isReadonlyValue = true;
103113
}
104114

105-
if (entry.secretRef) {
106-
entry.isReadonlyValue = !canI('secrets', 'get');
115+
if(entry.secretRef && !canI('secrets', 'get')) {
116+
entry.isReadonlyValue = true;
107117
}
108118
}
109119
});
@@ -129,33 +139,22 @@
129139
};
130140

131141
var findReferenceValueForEntries = function(entries, envFromSelectorOptions) {
132-
_.each(envFromSelectorOptions, function(option) {
133-
var referenceValue = getReferenceValue(option);
142+
ctrl.cannotAdd = (ctrl.isReadonlyAny || _.isEmpty(envFromSelectorOptions));
134143

135-
if (referenceValue) {
136-
_.set(referenceValue, 'selectedEnvFrom', option);
137-
}
138-
});
139-
};
144+
if(envFromSelectorOptions) {
145+
_.each(envFromSelectorOptions, function(option) {
146+
var referenceValue = getReferenceValue(option);
140147

141-
angular.extend(ctrl, {
142-
dragControlListeners: {
143-
accept: function (sourceItemHandleScope, destSortableScope) {
144-
return sourceItemHandleScope.itemScope.sortableScope.$id === destSortableScope.$id;
145-
},
146-
orderChanged: function() {
147-
ctrl.editEnvironmentFromForm.$setDirty();
148-
}
148+
if (referenceValue) {
149+
_.set(referenceValue, 'selectedEnvFrom', option);
150+
}
151+
});
149152
}
150-
});
153+
};
151154

152155
ctrl.$onInit = function() {
153-
ctrl.updateEnvFromEntries(ctrl.entries);
154-
findReferenceValueForEntries(ctrl.envFromEntries, ctrl.envFromSelectorOptions);
155-
156-
if('cannotAdd' in $attrs) {
157-
ctrl.cannotAdd = true;
158-
}
156+
updateEnvFromEntries(ctrl.entries);
157+
findReferenceValueForEntries(ctrl.entries, ctrl.envFromSelectorOptions);
159158

160159
if('cannotDelete' in $attrs) {
161160
ctrl.cannotDeleteAny = true;
@@ -180,7 +179,7 @@
180179

181180
ctrl.$onChanges = function(changes) {
182181
if(changes.entries) {
183-
ctrl.updateEnvFromEntries(changes.entries.currentValue);
182+
updateEnvFromEntries(changes.entries.currentValue);
184183
}
185184

186185
if(changes.envFromSelectorOptions) {

‎app/styles/_kve.less

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,8 @@
107107
}
108108
}
109109

110-
.key-value-editor-buttons {
110+
.key-value-editor-buttons,
111+
.environment-from-editor-button {
111112
position: absolute;
112113
right: 0;
113114
top: 0;
@@ -121,10 +122,21 @@
121122
position: relative;
122123
table-layout: fixed;
123124
width: 100%;
125+
@media(min-width: @screen-md-min) {
126+
.environment-from-editor-button {
127+
float: left;
128+
padding-right: 5px;
129+
position: relative;
130+
width: 50%;
131+
}
132+
}
124133
.environment-from-input {
125134
float: left;
126135
padding-right: 5px;
127-
width: 50%;
136+
width: 100%;
137+
@media(min-width: @screen-md-min) {
138+
width: 50%;
139+
}
128140
.faux-input-group,
129141
.ui-select {
130142
float: left;

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

Lines changed: 21 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,13 @@
1919

2020
<div
2121
class="form-group environment-from-input"
22-
ng-class="{ 'has-error': (forms.editEnvironmentFrom[uniqueForValue(unique, $index)].$invalid && forms.editEnvironmentFrom[uniqueForValue(unique, $index)].$touched) }">
22+
ng-class="{ 'has-error': ($ctrl.editEnvironmentFromForm[uniqueForValue(unique, $index)].$invalid && $ctrl.editEnvironmentFromForm[uniqueForValue(unique, $index)].$touched) }">
2323
<div ng-if="$ctrl.isEnvFromReadonly(entry)" class="faux-input-group">
24-
<div class="faux-form-control readonly">
25-
Set to values in {{entry.selectedEnvFrom.kind | humanizeKind : true | lowercase}}
26-
<span
27-
ng-if="!('configmaps' | canI : 'get') || !('secrets' | canI : 'get')">
28-
{{entry.configMapRef.name || entry.secretRef.name}}
29-
</span>
30-
<a
31-
ng-if="'configmaps' | canI : 'get'"
32-
ng-href="{{entry.selectedEnvFrom | navigateResourceURL}}">
33-
{{entry.configMapRef.name || entry.secretRef.name}}
34-
</a>
24+
<div ng-if="!entry.configMapRef.name && !entry.secretRef.name">
25+
No secrets or config maps have been added as Environment From.
26+
</div>
27+
<div ng-if="entry.configMapRef.name || entry.secretRef.name" class="faux-form-control readonly">
28+
Set to values in {{entry.configMapRef.name || entry.secretRef.name}}
3529
</div>
3630
</div>
3731

@@ -56,37 +50,31 @@
5650
</ui-select>
5751
</div>
5852
</div>
59-
6053
</div>
61-
<div class="environment-from-input">
54+
55+
<div ng-if="!$ctrl.isEnvFromReadonly(entry)" class="environment-from-editor-button">
6256
<span
63-
ng-if="(!$ctrl.cannotSort) && ($ctrl.entries.length > 1)"
64-
class="fa fa-bars sort-row"
65-
role="button"
66-
aria-label="Move row"
67-
aria-grabbed="false"
68-
as-sortable-item-handle></span>
69-
<a
70-
href=""
71-
class="pficon pficon-close delete-row as-sortable-item-delete"
72-
role="button"
73-
aria-label="Delete row"
74-
ng-hide="$ctrl.cannotDeleteAny || $ctrl.isReadonlyAny"
75-
ng-click="$ctrl.deleteEntry($index, 1)"></a>
57+
ng-if="!$ctrl.cannotSort"
58+
class="fa fa-bars sort-row"
59+
role="button"
60+
aria-label="Move row"
61+
aria-grabbed="false"
62+
as-sortable-item-handle></span>
7663
<a
77-
ng-href="{{entry.selectedEnvFrom | navigateResourceURL}}"
78-
class="pficon"
79-
ng-show="entry.selectedEnvFrom"
80-
ng-click="$ctrl.viewDetail(entry)">View {{entry.selectedEnvFrom.kind | humanizeKind : true}}</a>
64+
ng-if="!$ctrl.cannotDeleteAny"
65+
href=""
66+
class="pficon pficon-close delete-row as-sortable-item-delete"
67+
role="button"
68+
aria-label="Delete row"
69+
ng-click="$ctrl.deleteEntry($index, 1)"></a>
8170
</div>
8271
</div>
8372

84-
<div class="environment-from-entry form-group" ng-if="(!$ctrl.cannotAdd)">
73+
<div class="environment-from-entry form-group" ng-if="!$ctrl.cannotAdd">
8574
<a
8675
href=""
8776
class="add-row-link"
8877
role="button"
89-
aria-label="Add row"
9078
ng-click="$ctrl.onAddRow()">{{ $ctrl.addRowLink }}</a>
9179
</div>
9280
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ <h4>Variables</h4>
3030
key-validator="[A-Za-z_][A-Za-z0-9_]*"
3131
key-validator-error="Please enter a valid key."
3232
key-validator-error-tooltip="A valid environment variable name is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."
33-
add-row-link="Add Environment Variable"
34-
add-row-with-selectors-link="Add Environment Variable Using a Config Map or Secret"
33+
add-row-link="Add Variable"
34+
add-row-with-selectors-link="Add Variable from Config Map or Secret"
3535
show-header>
3636
</key-value-editor>
3737

‎app/views/directives/key-value-editor.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,6 @@
226226
href=""
227227
class="add-row-link"
228228
role="button"
229-
aria-label="Add row"
230229
ng-click="onAddRow()">{{ addRowLink }}</a>
231230
<span ng-if="valueFromSelectorOptions.length">
232231
<span
@@ -236,7 +235,6 @@
236235
href=""
237236
class="add-row-link"
238237
role="button"
239-
aria-label="Add row"
240238
ng-click="onAddRowWithSelectors()">{{ addRowWithSelectorsLink }}</a>
241239
</span>
242240
</div>

‎dist/scripts/scripts.js

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9081,19 +9081,26 @@ n[e.key] = e.value;
90819081
} ]), function() {
90829082
angular.module("openshiftConsole").component("editEnvironmentFrom", {
90839083
controller: [ "$attrs", "$filter", "keyValueEditorUtils", function(e, t, n) {
9084-
var a = this, r = t("canI"), o = t("humanizeKind");
9085-
a.$id = _.uniqueId(), a.setFocusClass = "edit-environment-from-set-focus-" + a.$id;
9086-
var i = function(e, t) {
9084+
var a = this, r = t("canI"), o = t("humanizeKind"), i = _.uniqueId();
9085+
a.setFocusClass = "edit-environment-from-set-focus-" + i;
9086+
var s = function(e, t) {
90879087
e && e.push(t || {});
90889088
};
90899089
a.onAddRow = function() {
9090-
i(a.envFromEntries), n.setFocusOn("." + a.setFocusClass);
9090+
s(a.envFromEntries), n.setFocusOn("." + a.setFocusClass);
90919091
}, a.deleteEntry = function(e, t) {
9092-
a.entries && !a.entries.length || (a.envFromEntries.splice(e, t), !a.envFromEntries.length && a.addRowLink && i(a.envFromEntries), a.updateEntries(a.envFromEntries), a.editEnvironmentFromForm.$setDirty());
9092+
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());
90939093
}, a.isEnvFromReadonly = function(e) {
90949094
return a.isReadonlyAny || !0 === e.isReadonlyValue || (e.secretRef || e.configMapRef) && !e.selectedEnvFrom || _.isEmpty(a.envFromSelectorOptions);
90959095
}, a.groupByKind = function(e) {
90969096
return o(e.kind);
9097+
}, a.dragControlListeners = {
9098+
accept: function(e, t) {
9099+
return e.itemScope.sortableScope.$id === t.$id;
9100+
},
9101+
orderChanged: function() {
9102+
a.editEnvironmentFromForm.$setDirty();
9103+
}
90979104
}, a.envFromObjectSelected = function(e, t, n) {
90989105
var r = {};
90999106
switch (n.kind) {
@@ -9113,12 +9120,12 @@ _.assign(a.envFromEntries[e], r), a.updateEntries(a.envFromEntries);
91139120
a.entries = _.filter(e, function(e) {
91149121
return e.secretRef || e.configMapRef;
91159122
});
9116-
}, a.updateEnvFromEntries = function(e) {
9117-
a.envFromEntries = e || [], a.envFromEntries.length || i(a.envFromEntries), _.each(a.envFromEntries, function(e) {
9118-
e && (e.configMapRef && (e.isReadonlyValue = !r("configmaps", "get")), e.secretRef && (e.isReadonlyValue = !r("secrets", "get")));
9119-
});
91209123
};
9121-
var s = function(e) {
9124+
var c = function(e) {
9125+
a.envFromEntries = e || [], a.envFromEntries.length || s(a.envFromEntries), _.each(a.envFromEntries, function(e) {
9126+
e && (e.configMapRef && !r("configmaps", "get") && (e.isReadonlyValue = !0), e.secretRef && !r("secrets", "get") && (e.isReadonlyValue = !0));
9127+
});
9128+
}, l = function(e) {
91229129
var t;
91239130
switch (e.kind) {
91249131
case "ConfigMap":
@@ -9139,27 +9146,18 @@ name: e.metadata.name
91399146
return t;
91409147
};
91419148
a.checkEntries = function(e) {
9142-
return !!s(e);
9149+
return !!l(e);
91439150
};
9144-
var c = function(e, t) {
9145-
_.each(t, function(e) {
9146-
var t = s(e);
9151+
var u = function(e, t) {
9152+
a.cannotAdd = a.isReadonlyAny || _.isEmpty(t), t && _.each(t, function(e) {
9153+
var t = l(e);
91479154
t && _.set(t, "selectedEnvFrom", e);
91489155
});
91499156
};
9150-
angular.extend(a, {
9151-
dragControlListeners: {
9152-
accept: function(e, t) {
9153-
return e.itemScope.sortableScope.$id === t.$id;
9154-
},
9155-
orderChanged: function() {
9156-
a.editEnvironmentFromForm.$setDirty();
9157-
}
9158-
}
9159-
}), a.$onInit = function() {
9160-
a.updateEnvFromEntries(a.entries), c(a.envFromEntries, a.envFromSelectorOptions), "cannotAdd" in e && (a.cannotAdd = !0), "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 && i(a.envFromEntries);
9157+
a.$onInit = function() {
9158+
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);
91619159
}, a.$onChanges = function(e) {
9162-
e.entries && a.updateEnvFromEntries(e.entries.currentValue), e.envFromSelectorOptions && c(a.envFromEntries, e.envFromSelectorOptions.currentValue);
9160+
e.entries && c(e.entries.currentValue), e.envFromSelectorOptions && u(a.envFromEntries, e.envFromSelectorOptions.currentValue);
91639161
};
91649162
} ],
91659163
bindings: {

0 commit comments

Comments
 (0)