Add to project options using the ordering overlay component #1382

jwforres · 2017-03-25T20:59:07Z

Prototype of what it looks like embedding our existing deploy image form into the overlay ordering panel.

This is a bit clunky to interact with until we can actually split these forms into wizards.

smarterclayton · 2017-03-25T21:38:14Z

Crikey - that scroll is going to make me stab someone. The moment I hit "want more details" I'm going to want to use the rest of the real estate. How do we turn "in-context" into "usable with rich options" for end users?

We should vet for each of these flows the expected depth of interaction (successive choices made). For a lot of templates / builders 1-3 choices is def reasonable. But the moment I want to go deep, I'm going to get angry if I can't use my screen real estate.

Seems like we need a way to turn the restricted in-context into unrestricted nav in a compelling way. Is that on the design radar?

jwforres · 2017-03-31T19:03:20Z

Updated to use the full height version of the overlay, stuff still to do:

overlay-panel-body overflow causing unnecessary horizontal scroll with forms that use bootstrap row
what to do with the Next Steps page, navigating there loses the context which defeats the purpose of doing this in the overlay
same question if i do import yaml and it needs to go to the template processing page
if import only creates / updates a single resource its using AlertMessageService to show the success message, this only gets used by the overview when it loads, so the message is lost
import sometimes not closing on success, its trying to navigate to the overview which is a no-op if you are already on the overview
if I use these overlays on other pages, should they navigate to the overview on success? depends on what im doing maybe as to what i might expect?

jwforres · 2017-05-30T21:21:42Z

We are triggering a number of things about template processing from the isDialog flag, the interesting thing is in the context of the Import YAML dialog we have significantly more height in order to account for the ACE editor on the previous step. So with our default templates you end up in a situation like this one:

For reference this is the previous step:

I can:

Reduce the height of the ACE editor when its in a dialog... but I kind of like the height its at now. Much shorter would make it hard to see the context of the object you are editing if you want to make changes. There is whitespace beneath the editor we could eliminate, currently it only is helpful if there are syntax errors in your JSON/YAML because the validation error alert is pretty tall. That will help, but not eliminate the problem.
Not do the simple vs advanced modes in this context. Which would be a little strange that it behaves differently than template processing from the catalog.
Leave as is in the screenshot. Which looks a bit silly.

jwforres · 2017-05-31T14:21:38Z

realized its missing the description for the template and other info that we show in the left column in the catalog, that should help fill out that page.

ncameronbritt · 2017-06-01T15:51:40Z

@spadgett and I were talking about removing the "manage your app" and "command line tools" stuff from the results step of the wizard.

Given the space constraints of the wizard, I think it makes sense to focus more on the things directly related to what you have just created. The command line tools stuff isn't specifically about what you've just created, but is more general to the project and I worry that having it in the results step could distract from other more pertinent information.

Sam's thought, which I agree with, is that the landing page is probably the place to advertise the command line tools, in that right panel. Within the project, the command line info is already in that info menu, which makes sense to me.

@openshift/team-ux-review

spadgett · 2017-06-05T13:39:02Z

app/scripts/directives/deployImage.js

- failure: "Failed to deploy image " + $scope.app.name + " to project " + $scope.project + "."
+ started: "Deploying image " + $scope.app.name + " to project " + $scope.project.metadata.name + ".",
+ success: "Deployed image " + $scope.app.name + " to project " + $scope.project.metadata.name + ".",
+ failure: "Failed to deploy image " + $scope.app.name + " to project " + $scope.project.metadata.name + "."


I don't think this is new, but in template processing we use the display name of the project. Probably should be consistent.

https://github.com/openshift/origin-web-console/blob/master/app/scripts/directives/processTemplate.js#L81

spadgett · 2017-06-05T13:44:45Z

app/scripts/directives/deployImageDialog.js

+ templateUrl: 'views/directives/deploy-image-dialog.html'
+});
+
+function DeployImageDialog($scope, DataService) {


We should probably use an IIFE to avoid the global (#1516, #1637) here and in the other components below

spadgett · 2017-06-05T13:46:06Z

app/scripts/directives/deployImageDialog.js

+ }
+ });
+
+ ctrl.currentStep = "Image";


Should this be in $onInit?

spadgett · 2017-06-05T13:58:05Z

app/scripts/directives/fromFile.js

- failure: "Failed to create some resources in project " + $scope.projectName
+ started: "Creating resources in project " + $scope.project.metadata.name,
+ success: "Creating resources in project " + $scope.project.metadata.name,
+ failure: "Failed to create some resources in project " + $scope.project.metadata.name


Not a new problem, but same comment here on display name (here and just below)

spadgett · 2017-06-05T14:05:58Z

app/scripts/directives/fromFileDialog.js

+ };
+
+ function getIconClass() {
+ var icon = _.get(ctrl, 'template.metadata.annotations.iconClass', 'fa fa-cubes');


Wondering if we should use the iconClass filter, which handles template icons. But it defaults to fa-clone for templates. This makes me wonder if we shouldn't use fa-clone as our default in the catalog.

I'm OK with this as-is, but we might open an issue to decide what to do since we can show different default icons for the new experience vs. old.

https://github.com/openshift/origin-web-console/blob/master/app/scripts/filters/resources.js#L53

Yeah this is consistent with the catalog and this dialog, for now, doesn't show up in the old experience. I'll open an issue.

spadgett · 2017-06-05T14:15:21Z

app/views/directives/from-file-dialog.html

@@ -0,0 +1,95 @@
+<overlay-panel show-panel="$ctrl.visible" show-close="true" handle-close="$ctrl.close" ng-if="$ctrl.project">
+ <!-- TODO what to do with alerts? -->


TODO still needed?

spadgett · 2017-06-05T14:19:02Z

app/views/directives/header/project-header.html

+ <li><a ng-href="project/{{projectName}}/create?tab=deployImage">Deploy Image</a></li>
+ <li ng-if-end><a ng-href="project/{{projectName}}/create?tab=fromFile">Import YAML / JSON</a></li>
+
+ <li ng-if-start="catalogLandingPageEnabled"><a href="/">Browse Catalog</a></li>


Hm, I thought it should be href="./" but it must be working?

hmm.. weird yeah its working fine as is

spadgett · 2017-06-05T14:21:10Z

app/views/directives/header/project-header.html

 </a>
+ <ul class="uib-dropdown-menu dropdown-menu dropdown-menu-right">


Probably should use <ul role="menu"> and each <li role="menuitem">

spadgett · 2017-06-05T14:22:08Z

app/views/directives/header/project-header.html

@@ -38,3 +47,6 @@
 </div> <!-- /navbar-project-menu -->
 <navbar-utility class="hidden-xs"></navbar-utility>
 </nav>
+<!-- clean up ordering.* -->


Not clear on what this means. Is it a TODO?

at one point it was a todo but i think i changed my mind, will remove comment

spadgett · 2017-06-05T14:24:40Z

app/scripts/directives/create/nextSteps.js

+ if (_.isFunction(ctrl.onContinue)) {
+ ctrl.onContinue();
+ }
+ Navigate.toProjectOverview(ctrl.projectName);


Do we need the onContinue handler since we're always navigating away here?

jwforres · 2017-06-08T22:33:58Z

updated for the review feedback but i'm seeing a CSS issue at mobile now with my header, probably something related to all the flex changes and merge conflicts i had during rebase

jwforres · 2017-06-08T23:22:34Z

fixed the bad visual issues at mobile, there is one thing I want to have @sg00dwin look at with me tmrw afternoon

spadgett

LGTM, just a couple small questions on the on-continue callback

spadgett · 2017-06-09T18:25:08Z

app/scripts/directives/create/nextSteps.js

 NextSteps
 ],
 bindings: {
 project: '<',
 projectName: '<',
 loginBaseUrl: '<',
 fromSampleRepo: '<',
- createdBuildConfig: '<'
+ createdBuildConfig: '<',
+ onContinue: '<'


Handle the callback like onDialogClosed below?

spadgett · 2017-06-09T18:28:52Z

app/views/directives/deploy-image-dialog.html

+ <next-steps project="$ctrl.selectedProject"
+ project-name="$ctrl.selectedProject.metadata.name"
+ login-base-url="$ctrl.loginBaseUrl"
+ on-continue="$ctrl.close">


I guess I'm still unclear why this is necessary since on-continue always navigates to the overview anyway?

If you are already on the overview then navigating to the overview does nothing. Angular treats it like a no-op, so the overlay never closes.

…nd dropdown menu at mobile.

jwforres · 2017-06-13T14:26:51Z

@spadgett it looked like you hadn't yet implemented toast notifications for deployImage, i'd rather do that separate from this PR I think

otherwise I think this PR is ready

spadgett · 2017-06-13T18:52:00Z

[merge]

…alogs

jwforres · 2017-06-13T19:55:51Z

updated tests [test]

openshift-bot · 2017-06-13T20:07:14Z

Evaluated for origin web console test up to d1abdf5

openshift-bot · 2017-06-13T20:07:24Z

Evaluated for origin web console merge up to d1abdf5

jwforres · 2017-06-13T20:29:01Z

integration tests passed [merge]

openshift-bot · 2017-06-13T20:36:26Z

Origin Web Console Test Results: SUCCESS (https://ci.openshift.redhat.com/jenkins/job/test_pull_requests_origin_web_console/1516/) (Base Commit: 54262a2)

openshift-bot · 2017-06-13T23:15:26Z

Origin Web Console Merge Results: SUCCESS (https://ci.openshift.redhat.com/jenkins/job/test_pull_requests_origin_web_console/1526/) (Base Commit: 96fab4d)

jwforres force-pushed the add-project-overlay branch from ea99185 to 1a87e96 Compare March 31, 2017 18:49

jwforres mentioned this pull request Mar 31, 2017

[WIP] Switch add to project to a dropdown menu #1381

Closed

rhamilto mentioned this pull request Apr 3, 2017

Update masthead background color and border/inset colors. #1392

Merged

openshift-bot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Apr 9, 2017

jwforres force-pushed the add-project-overlay branch from 1a87e96 to 702389a Compare May 4, 2017 17:36

openshift-bot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label May 4, 2017

jwforres force-pushed the add-project-overlay branch from 96e5ba6 to ffafaf1 Compare May 4, 2017 21:03

jwforres force-pushed the add-project-overlay branch 2 times, most recently from eba799a to 3df41d7 Compare May 26, 2017 20:38

jwforres force-pushed the add-project-overlay branch from f216ec0 to 5531d7a Compare May 31, 2017 19:08

spadgett changed the title ~~[WIP] Add to project options using the ordering overlay componen~~ [WIP] Add to project options using the ordering overlay component Jun 5, 2017

spadgett reviewed Jun 5, 2017

View reviewed changes

openshift-bot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jun 5, 2017

jwforres force-pushed the add-project-overlay branch from 0ca1791 to 7bba9d9 Compare June 8, 2017 22:33

jwforres force-pushed the add-project-overlay branch from b67f9f5 to 5636c08 Compare June 8, 2017 23:30

openshift-bot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jun 9, 2017

spadgett reviewed Jun 9, 2017

View reviewed changes

openshift-bot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jun 9, 2017

spadgett approved these changes Jun 12, 2017

View reviewed changes

spadgett mentioned this pull request Jun 12, 2017

Update import YAML component to use toast notifications #1677

Merged

jwforres and others added 2 commits June 13, 2017 09:52

Switch add to project to a dropdown menu

feb1d60

Fix project menu border inset and minor alignment changes for caret a…

8844c42

…nd dropdown menu at mobile.

jwforres force-pushed the add-project-overlay branch from 685f6eb to f473707 Compare June 13, 2017 14:25

jwforres changed the title ~~[WIP] Add to project options using the ordering overlay component~~ Add to project options using the ordering overlay component Jun 13, 2017

openshift-bot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jun 13, 2017

spadgett approved these changes Jun 13, 2017

View reviewed changes

Update toast error notification cleanup for components that are in di…

d1abdf5

…alogs

jwforres force-pushed the add-project-overlay branch from f473707 to d1abdf5 Compare June 13, 2017 20:05

openshift-bot merged commit 871e99a into openshift:master Jun 13, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add to project options using the ordering overlay component #1382

Add to project options using the ordering overlay component #1382

jwforres commented Mar 25, 2017 •

edited

Loading

smarterclayton commented Mar 25, 2017

jwforres commented Mar 31, 2017

jwforres commented May 30, 2017

jwforres commented May 31, 2017

ncameronbritt commented Jun 1, 2017 •

edited

Loading

spadgett Jun 5, 2017

spadgett Jun 5, 2017

spadgett Jun 5, 2017

spadgett Jun 5, 2017

spadgett Jun 5, 2017

jwforres Jun 8, 2017

spadgett Jun 5, 2017

spadgett Jun 5, 2017

jwforres Jun 8, 2017

spadgett Jun 5, 2017

spadgett Jun 5, 2017

jwforres Jun 8, 2017

spadgett Jun 5, 2017

jwforres commented Jun 8, 2017

jwforres commented Jun 8, 2017

spadgett left a comment

spadgett Jun 9, 2017

spadgett Jun 9, 2017

jwforres Jun 10, 2017

jwforres commented Jun 13, 2017

spadgett commented Jun 13, 2017

jwforres commented Jun 13, 2017

openshift-bot commented Jun 13, 2017

openshift-bot commented Jun 13, 2017

jwforres commented Jun 13, 2017

openshift-bot commented Jun 13, 2017

openshift-bot commented Jun 13, 2017 •

edited

Loading

		@@ -0,0 +1,95 @@
		<overlay-panel show-panel="$ctrl.visible" show-close="true" handle-close="$ctrl.close" ng-if="$ctrl.project">
		<!-- TODO what to do with alerts? -->

		</a>
		<ul class="uib-dropdown-menu dropdown-menu dropdown-menu-right">

Add to project options using the ordering overlay component #1382

Add to project options using the ordering overlay component #1382

Conversation

jwforres commented Mar 25, 2017 • edited Loading

smarterclayton commented Mar 25, 2017

jwforres commented Mar 31, 2017

jwforres commented May 30, 2017

jwforres commented May 31, 2017

ncameronbritt commented Jun 1, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jwforres commented Jun 8, 2017

jwforres commented Jun 8, 2017

spadgett left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jwforres commented Jun 13, 2017

spadgett commented Jun 13, 2017

jwforres commented Jun 13, 2017

openshift-bot commented Jun 13, 2017

openshift-bot commented Jun 13, 2017

jwforres commented Jun 13, 2017

openshift-bot commented Jun 13, 2017

openshift-bot commented Jun 13, 2017 • edited Loading

jwforres commented Mar 25, 2017 •

edited

Loading

ncameronbritt commented Jun 1, 2017 •

edited

Loading

openshift-bot commented Jun 13, 2017 •

edited

Loading