Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EnvFrom Config Map and Secret Link #2201

Merged

Conversation

cdcabrera
Copy link
Contributor

@cdcabrera cdcabrera commented Oct 2, 2017

EnvFrom Issue Updates for...

EnvFrom issue fixes for CSS, copy, and UX. Updates parts of #2182

  • Config Map and Secret Link

Initial work is aimed at re-opening the discussion around behavior... this PR initially...

  • has the link display until the envFrom form aspect is edited, then it hides.
  • when the link is displayed it navigates directly to the secret or config map view

oct-02-2017 14-32-04

@beanh66

@@ -67,6 +67,11 @@
role="button"
aria-label="Delete row"
ng-click="$ctrl.deleteEntry($index, 1)"></a>
<a
ng-if="!$ctrl.editEnvironmentFromForm.$dirty"
Copy link
Member

@spadgett spadgett Oct 2, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This won't hide the link if the variables form above is dirty.

Copy link
Contributor Author

@cdcabrera cdcabrera Oct 4, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This logic should be getting removed since we're headed in the recommended direction of displaying the "details" modal link as soon as a value is selected for the list.... per 20171004 comments

@spadgett
Copy link
Member

spadgett commented Oct 2, 2017

@beanh66 Is it odd that the links just disappear after an edit? I wonder if we shouldn't show the contents in a dialog of somewhere on the current page? Or open the link in a new tab?

@beanh66
Copy link
Member

beanh66 commented Oct 4, 2017

@spadgett When I discussed with @cdcabrera I suggested we have the link appear immediately after the item is selected from the dropdown (before clicking save) so users could click that link to open a modal and view the values prior to committing to saving the changes. Is this no longer a possibility?

@spadgett
Copy link
Member

spadgett commented Oct 4, 2017

@beanh66 I think that's a better approach. The current PR does something different.

@cdcabrera Let's try to work on what @beanh66 suggests

@beanh66
Copy link
Member

beanh66 commented Oct 4, 2017

@spadgett @cdcabrera Was thinking something like this:
v2-envvar-view

@cdcabrera cdcabrera force-pushed the issue-envfrom-link branch 2 times, most recently from 6609bca to 23100db Compare October 4, 2017 16:04
@cdcabrera
Copy link
Contributor Author

@sg00dwin

Per discussion looking for a bit of style advice on using the modal setup for header, body, and footer classes... this is what is currently working in the PR where we make use of dialog-title, dialog-body, and modal-footer... do we have a consistent set of classes we use for modals?

Config Map Modal
screen shot 2017-10-05 at 10 27 08 am

Secret Modal
screen shot 2017-10-05 at 10 26 46 am

@cdcabrera
Copy link
Contributor Author

cdcabrera commented Oct 5, 2017

@spadgett @beanh66 had a question around the Secret display...

Should we be displaying the secret values either as hidden or visible (dependent on permissions) when the user hits the appropriate "reveal" link?

Edit: Per discussion going to approach this round as just showing the property names, no values

@sg00dwin
Copy link
Member

sg00dwin commented Oct 5, 2017

@cdcabrera This example uses modal-header
https://rawgit.com/patternfly/patternfly/master-dist/dist/tests/modals.html

@openshift-ci-robot openshift-ci-robot added the size/L Denotes a PR that changes 100-499 lines, ignoring generated files. label Oct 5, 2017
@cdcabrera
Copy link
Contributor Author

@spadgett @sg00dwin @beanh66

Modal updates converting Secret display to look similar to Config Maps

Secret
screen shot 2017-10-05 at 4 41 55 pm

Config Maps
screen shot 2017-10-05 at 4 41 38 pm

@beanh66
Copy link
Member

beanh66 commented Oct 6, 2017

@spadgett @cdcabrera In general styling looks great! I was originally thinking we would only list the parameters and not show values as well but if we decide to show both like you have here, I think there should be an option to reveal the hidden values, otherwise why have them listed?

Copy link
Member

@spadgett spadgett left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might be pretty easy to throw in a "Reveal Secret" link for secrets since you're already decoding the data.

<h4>{{$ctrl.overlayPaneEntryDetails.metadata.name}}
<small class="muted">- {{$ctrl.overlayPaneEntryDetails.kind | humanizeKind : true}}</small></h4>

<div ng-if="!($ctrl.overlayPaneEntryDetails.data | hashSize)" class="empty-state-message text-center">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

s/hashSize/size

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@spadgett any contrasting opinion to wrapping the size/lodash filter with hashSize? Or we/I could do one big catch with a massive search and replace... I seem to keep making this slip up

<small class="muted">- {{$ctrl.overlayPaneEntryDetails.kind | humanizeKind : true}}</small></h4>

<div ng-if="!($ctrl.overlayPaneEntryDetails.data | hashSize)" class="empty-state-message text-center">
The {{$ctrl.overlayPaneEntryDetails.kind | humanizeKind : true}} has no items.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"has no properties."

<div ng-if="$ctrl.overlayPaneEntryDetails.data | hashSize" class="table-responsive scroll-shadows-horizontal">
<table class="table table-bordered table-bordered-columns config-map-table key-value-table">
<tbody>
<tr ng-repeat="(prop, value) in $ctrl.overlayPaneEntryDetails.data">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: indentation

@spadgett
Copy link
Member

Looks good, just some minor comments.

/test

@cdcabrera
Copy link
Contributor Author

@spadgett per quick discussion we'll aim to do the reveal secret as a separate PR

@cdcabrera cdcabrera changed the title [WIP] EnvFrom Config Map and Secret Link EnvFrom Config Map and Secret Link Oct 16, 2017
@spadgett
Copy link
Member

I was able to create this error viewing details for at a config map with your changes. It seemed to be trying to decode a config map value.

angular.js:14199 Error: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
    at secrets.js:82
    at lodash.js:13379
    at lodash.js:4944
    at baseForOwn (lodash.js:3001)
    at Function.mapValues (lodash.js:13378)
    at Object.decodeSecretData (secrets.js:74)
    at EditEnvironmentFrom.ctrl.viewOverlayPanel (editEnvironmentFrom.js:33)
    at fn (eval at compile (angular.js:15126), <anonymous>:4:457)
    at expensiveCheckFn (angular.js:16213)
    at callback (angular.js:26592)

openshift web console 2017-10-17 08-27-23

@@ -27,6 +29,16 @@

ctrl.setFocusClass = 'edit-environment-from-set-focus-' + uniqueId;

ctrl.viewOverlayPanel = function(entry) {
ctrl.decodedSecretData = SecretsService.decodeSecretData(entry.data);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't need to call this if we're not showing the secret content. For now, I'd just use entry.data and not decode.

</div>
<div class="modal-body">
<h4>{{$ctrl.overlayPaneEntryDetails.metadata.name}}
<small class="muted">- {{$ctrl.overlayPaneEntryDetails.kind | humanizeKind : true}}</small></h4>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of - use &ndash;

<small class="muted">- {{$ctrl.overlayPaneEntryDetails.kind | humanizeKind : true}}</small></h4>

<div ng-if="!($ctrl.overlayPaneEntryDetails.data | size)" class="empty-state-message text-center">
The {{$ctrl.overlayPaneEntryDetails.kind | humanizeKind : true}} has no properties.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We use lowercase names for kinds in sentences throughout the console, so remove the true flag here.

ng-if="$ctrl.overlayPaneEntryDetails.kind === 'ConfigMap'"
content="value"
limit="1024"
newline-limit="20"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably want to make these limits smaller since it's shown in a dailog.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

heh, agreed!

@spadgett spadgett self-assigned this Oct 17, 2017
Setup for config map and secret details link. Styling adjustments
per @sg00dwin.
@cdcabrera
Copy link
Contributor Author

This PR is sequenced to go in before PR "Environment From Fix Drag & Order Display" #2238

@spadgett
Copy link
Member

/lgtm

@openshift-ci-robot openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Oct 19, 2017
@openshift-merge-robot
Copy link
Contributor

Automatic merge from submit-queue.

@openshift-merge-robot openshift-merge-robot merged commit 768d51d into openshift:master Oct 19, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
lgtm Indicates that a PR is ready to be merged. size/L Denotes a PR that changes 100-499 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants