Add a new flow for create sample application #6038

rohitkrai03 · 2020-07-20T23:03:22Z

Fixes: https://issues.redhat.com/browse/ODC-4091

Analysis / Root cause:
There's no quick way for users to create applications out of samples provided by openshift right now.

Solution Description:
Add a new import flow for creating samples quickly.

Screen shots / Gifs for design review:
cc: @openshift/team-devconsole-ux @beaumorley @serenamarie125

Browser conformance:

Chrome
Firefox
Safari
Edge

rohitkrai03 · 2020-07-21T08:47:20Z

/retest

frontend/packages/dev-console/src/utils/imagestream-utils.ts

frontend/packages/dev-console/src/plugin.tsx

bkrikori · 2020-07-21T18:22:47Z

This looks good to me!

debsmita1 · 2020-07-21T19:03:54Z

@rohitkrai03 Just a question, do you think we should have the namespace bar with applications dropdown in the Sample app form? I am asking this because suppose in the topology user is in the context of app x & then tries to create a sample app. The user will expect the workload to be grouped under app x. Have a look at the gif below

rohitkrai03 · 2020-07-21T19:29:26Z

@rohitkrai03 Just a question, do you think we should have the namespace bar with applications dropdown in the Sample app form? I am asking this because suppose in the topology user is in the context of app x & then tries to create a sample app. The user will expect the workload to be grouped under app x. Have a look at the gif below

Ohh, I already had a conversation around this with PM and UX. Just forgot to update the code. Removed the application selector from both the pages.

rohitkrai03 · 2020-07-21T22:24:00Z

/retest

rohitkrai03 · 2020-07-22T16:01:55Z

/retest

frontend/packages/dev-console/src/components/import/ImportSamplePage.tsx

sahil143 · 2020-07-22T16:20:43Z

frontend/packages/dev-console/src/components/import/SamplesCatalog.tsx

+                Get Started using applications by choosing a code sample.
+              </div>
+            </div>
+            <div className="odc-empty-state__content">


How come we are using empty-state styles here?

Well, it's the same exact style that we needed for this page as well as it looks exactly same as EmptyState. So I just re-used it directly.

I'd prefer that these were made into a reusable component or into a shared style file.

rohitkrai03 · 2020-07-22T19:53:11Z

/retest

christianvogt · 2020-07-22T21:05:19Z

frontend/packages/dev-console/src/components/import/SamplesCatalog.tsx

+                Get Started using applications by choosing a code sample.
+              </div>
+            </div>
+            <div className="odc-empty-state__content">


I'd prefer that these were made into a reusable component or into a shared style file.

christianvogt · 2020-07-22T21:10:50Z

frontend/packages/dev-console/src/plugin.tsx

+    type: 'Page/Route',
+    properties: {
+      exact: true,
+      path: ['/samples/ns/:ns/is/:is/isNs/:isNs'],


Why the intermediate segments is and isNs? Seems unnecessary as you're not going to clash with any other route.

Do you mean I should have the route like /samples/:ns/:is/:isNs?

rohitkrai03 · 2020-07-22T23:19:14Z

Updated screens -

christianvogt · 2020-07-23T16:51:00Z

/lgtm

openshift-ci-robot · 2020-07-23T16:57:17Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: christianvogt, rohitkrai03

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

~~frontend/packages/dev-console/OWNERS~~ [christianvogt,rohitkrai03]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

rohitkrai03 · 2020-07-24T00:12:56Z

/retest

openshift-ci-robot added the component/dev-console Related to dev-console label Jul 20, 2020

openshift-ci-robot requested review from abhinandan13jan and divyanshiGupta July 20, 2020 23:03

openshift-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Jul 20, 2020

rohitkrai03 force-pushed the create-sample-flow branch from 724c132 to d0d0896 Compare July 20, 2020 23:08

sahil143 suggested changes Jul 21, 2020

View reviewed changes

frontend/packages/dev-console/src/utils/imagestream-utils.ts Outdated Show resolved Hide resolved

frontend/packages/dev-console/src/plugin.tsx Outdated Show resolved Hide resolved

rohitkrai03 force-pushed the create-sample-flow branch from d0d0896 to 148c012 Compare July 21, 2020 14:42

rohitkrai03 force-pushed the create-sample-flow branch from 148c012 to 19313ce Compare July 21, 2020 19:28

rohitkrai03 force-pushed the create-sample-flow branch from 19313ce to e22c7af Compare July 21, 2020 21:37

sahil143 reviewed Jul 22, 2020

View reviewed changes

rohitkrai03 force-pushed the create-sample-flow branch from e22c7af to e19a596 Compare July 22, 2020 17:19

christianvogt reviewed Jul 22, 2020

View reviewed changes

openshift-ci-robot added needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. component/shared Related to console-shared and removed approved Indicates a PR has been approved by an approver from all required OWNERS files. labels Jul 22, 2020

rohitkrai03 force-pushed the create-sample-flow branch from 459c85a to 72a482a Compare July 22, 2020 23:10

Add a new flow for create sample application

fbfb670

rohitkrai03 force-pushed the create-sample-flow branch from 72a482a to 34eff7a Compare July 22, 2020 23:15

openshift-ci-robot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jul 22, 2020

Added new component for PageLayout and refactor

f99b5da

rohitkrai03 force-pushed the create-sample-flow branch from 34eff7a to f99b5da Compare July 23, 2020 11:24

openshift-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Jul 23, 2020

openshift-ci-robot assigned christianvogt Jul 23, 2020

openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Jul 23, 2020

openshift-merge-robot merged commit c466a9c into openshift:master Jul 24, 2020

spadgett added this to the v4.6 milestone Jul 28, 2020

rohitkrai03 deleted the create-sample-flow branch July 24, 2021 06:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a new flow for create sample application #6038

Add a new flow for create sample application #6038

rohitkrai03 commented Jul 20, 2020

rohitkrai03 commented Jul 21, 2020

bkrikori commented Jul 21, 2020

debsmita1 commented Jul 21, 2020

rohitkrai03 commented Jul 21, 2020

rohitkrai03 commented Jul 21, 2020

rohitkrai03 commented Jul 22, 2020

sahil143 Jul 22, 2020

rohitkrai03 Jul 22, 2020

christianvogt Jul 22, 2020

rohitkrai03 commented Jul 22, 2020

christianvogt Jul 22, 2020

christianvogt Jul 22, 2020

rohitkrai03 Jul 22, 2020

rohitkrai03 commented Jul 22, 2020

christianvogt commented Jul 23, 2020

openshift-ci-robot commented Jul 23, 2020

rohitkrai03 commented Jul 24, 2020

Add a new flow for create sample application #6038

Add a new flow for create sample application #6038

Conversation

rohitkrai03 commented Jul 20, 2020

rohitkrai03 commented Jul 21, 2020

bkrikori commented Jul 21, 2020

debsmita1 commented Jul 21, 2020

rohitkrai03 commented Jul 21, 2020

rohitkrai03 commented Jul 21, 2020

rohitkrai03 commented Jul 22, 2020

sahil143 Jul 22, 2020

Choose a reason for hiding this comment

rohitkrai03 Jul 22, 2020

Choose a reason for hiding this comment

christianvogt Jul 22, 2020

Choose a reason for hiding this comment

rohitkrai03 commented Jul 22, 2020

christianvogt Jul 22, 2020

Choose a reason for hiding this comment

christianvogt Jul 22, 2020

Choose a reason for hiding this comment

rohitkrai03 Jul 22, 2020

Choose a reason for hiding this comment

rohitkrai03 commented Jul 22, 2020

christianvogt commented Jul 23, 2020

openshift-ci-robot commented Jul 23, 2020

rohitkrai03 commented Jul 24, 2020