Improve start page when GitHub App not installed #7163

laushinka · 2021-12-10T00:15:49Z

Description

Should do as described here:

Project description text updated (this persists also during loading state)
When no account/group/org is selected, the user account and provider is displayed
More text updates for when a GitHub app is not installed
Remove the org configuration text

Related Issue(s)

Resolves #6875

How to test

Go to https://laushinka-start-page-6875.staging.gitpod-dev.com/new
Log in with GitHub
You should see the start page without GitHub app installed

Release Notes

Improved start page when a GitHub app is not installed.

Documentation

laushinka · 2021-12-10T00:19:32Z

This is still a WIP based on ongoing discussions. Just to make it easier to collect input from you @jldec @gtsiolis.

jldec · 2021-12-10T12:02:18Z

Thanks @laushinka
I have updated the wording and added another screenshot in the OP of issue #6875 and below

Please make the width of this control the same as the current width of https://gitpod.io/new (I don't know why it got narrower in your PR)
Fix updated wording (top, in grey area, and at bottom)
Add line of text above the dropdown in 2 variants - for app install, and for repo select
Put back the "Repository not found? Reconfigure" for repo select on GitHub only - not required for GitLab

from @gtsiolis

Sentence case for Learn more
Remove the outer border
Change Authorize to Configure Gitpod App
Check right padding for the avatar

gtsiolis · 2021-12-10T13:08:20Z

Haven't dived into the changes yet but just seeing the avatar, username, and provider URL in the dropdown element makes this page 10x better. 🤯 🔝

laushinka · 2021-12-10T14:27:39Z

@jldec Thanks for the review!

Please make the width of this control the same as the current width of https://gitpod.io/new (I don't know why it got narrower in your PR)

What are the width differences?

Fix updated wording (top, in grey area, and at bottom)

For the top, is it Projects allow you to manage prebuilds and workspaces for your repository.?

(Thanks for teaching me this, @gtsiolis 👇🏼 😛)

UPDATED

jldec · 2021-12-10T21:33:32Z

What are the width differences?

I think what I'm seeing is a width difference between the app install layout and the repo-select layout.
I noticed this particularly when I moved the text Select Git repository from github.com. (change) down to sit right above the dropdown. In one case it fits nicely, in the other it hangs over the sides.

laushinka · 2021-12-12T22:48:25Z

I think what I'm seeing is a width difference between the app install layout and the repo-select layout.

@jldec Noted. I'll check with @gtsiolis on which card in Figma I should follow, so I can inspect the attributes. And if everything else looks fine, I will wait for George's input so I'll tackle the design improvements altogether 🙏🏽

gtsiolis · 2021-12-13T20:05:30Z

Go markdown tables[1]! Looking at this now! 👀

gtsiolis

Great work, @laushinka! 🌟

Left some comments below regarding UX changes. Current changes already improve this area of the product. Feel free to ingore any of these and merge for this iteration. ➿

Re-posting from https://github.com/gitpod-io/gitpod/pull/7163/files#issuecomment-990959643:

Haven't dived into the changes yet but just seeing the avatar, username, and provider URL in the dropdown element makes this page 10x better. 🤯 🔝

Re-apporving to unblock merging but holding in case you'd resolve any of the comments below.

/hold

components/dashboard/src/projects/NewProject.tsx

roboquat · 2021-12-13T20:33:04Z

LGTM label has been added.

Git tree hash: 5fda46f4ce600dfb6129bb83e92e1b1f1ae46bdf

laushinka · 2021-12-14T11:38:51Z

/werft run

👍 started the job as gitpod-build-laushinka-start-page-6875.13

laushinka · 2021-12-14T11:55:26Z

/werft run

👍 started the job as gitpod-build-laushinka-start-page-6875.14

gtsiolis · 2021-12-14T20:40:28Z

It looks straightforward and I don't mind working on it here, but the issue says TBD so it's probably better to wait until we are aligned?

Let's keep this out of the scope for now. Only posted this here in case this PR made any changes to that step (page), too. ➿

components/dashboard/src/projects/NewProject.tsx

jldec · 2021-12-15T09:46:33Z

components/dashboard/src/projects/NewProject.tsx

-                        )}
+                <div>
+                    <div className="text-gray-500 text-center w-96 mx-8">
+                        Repository not found? <a href="javascript:void(0)" onClick={e => reconfigure()} className="text-gray-400 underline underline-thickness-thin underline-offset-small hover:text-gray-600">Reconfigure</a>


This text should only appear when with the repositorylist is showing. It is not required when we prompt for app authorization.

And only for GitHub, right? Or all providers?

Yes - GitHub only.

components/dashboard/src/projects/NewProject.tsx

jankeromnes

Many thanks @laushinka! As mentioned on Slack, this is so much nicer now 😍 ✨

Also, the code looks great to me. 🎯 Many thanks for caring about readability. 💯

I've added a few thoughts, but they're entirely optional or out of scope, so please feel free to read them later. 🌴

Approving because the code can be merged as is and works flawlessly.

/lgtm

components/dashboard/src/projects/NewProject.tsx

roboquat · 2021-12-15T10:31:30Z

LGTM label has been added.

Git tree hash: a2decbc7e42bfaf6c5af7e1f77989fc5f671d4c9

laushinka · 2021-12-15T11:08:12Z

@jankeromnes Pushed improvements for the code 🙌🏽

laushinka · 2021-12-15T11:16:51Z

Currently the preview env is broken as I rebased (probably should've held off on that) while we have an ongoing problem.

laushinka · 2021-12-15T12:47:24Z

Preview env all good now.

jldec · 2021-12-15T15:25:39Z

/lgtm
Nice result - thanks @laushinka .

roboquat · 2021-12-15T15:25:42Z

LGTM label has been added.

Git tree hash: bc4371704dd9c17a248415caf41c914d484c9323

roboquat · 2021-12-15T15:25:47Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: gtsiolis, jankeromnes, jldec

Associated issue: #6875

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:

~~components/dashboard/OWNERS~~ [gtsiolis,jankeromnes,jldec]

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

jldec · 2021-12-15T15:57:39Z

/unhold

roboquat added do-not-merge/work-in-progress do-not-merge/release-note-label-needed team: webapp Issue belongs to the WebApp team size/L labels Dec 10, 2021

laushinka requested review from gtsiolis and jldec December 10, 2021 00:16

laushinka marked this pull request as ready for review December 13, 2021 09:26

roboquat added release-note and removed do-not-merge/work-in-progress do-not-merge/release-note-label-needed labels Dec 13, 2021

gtsiolis approved these changes Dec 13, 2021

View reviewed changes

roboquat added the do-not-merge/hold label Dec 13, 2021

roboquat assigned gtsiolis Dec 13, 2021

roboquat added the lgtm label Dec 13, 2021

roboquat added approved and removed lgtm labels Dec 13, 2021

laushinka force-pushed the laushinka/start-page-6875 branch 4 times, most recently from bf91b88 to 504fee1 Compare December 14, 2021 11:29

jldec reviewed Dec 15, 2021

View reviewed changes

components/dashboard/src/projects/NewProject.tsx Outdated Show resolved Hide resolved

jldec reviewed Dec 15, 2021

View reviewed changes

components/dashboard/src/projects/NewProject.tsx Outdated Show resolved Hide resolved

jankeromnes approved these changes Dec 15, 2021

View reviewed changes

roboquat assigned jankeromnes Dec 15, 2021

roboquat added the lgtm label Dec 15, 2021

laushinka mentioned this pull request Dec 15, 2021

Improve design of /new project start-page for onboarding flow #6875

Closed

11 tasks

laushinka force-pushed the laushinka/start-page-6875 branch from 10e80fe to 7cbfd6d Compare December 15, 2021 11:05

roboquat removed the lgtm label Dec 15, 2021

laushinka force-pushed the laushinka/start-page-6875 branch from 7cbfd6d to 4518f2a Compare December 15, 2021 11:07

laushinka requested review from jankeromnes and jldec December 15, 2021 11:08

Improve start page when GitHub App not installed

cee6ae0

laushinka force-pushed the laushinka/start-page-6875 branch from 4518f2a to cee6ae0 Compare December 15, 2021 12:38

roboquat assigned jldec Dec 15, 2021

roboquat added the lgtm label Dec 15, 2021

roboquat removed the do-not-merge/hold label Dec 15, 2021

roboquat merged commit a86d641 into main Dec 15, 2021

roboquat deleted the laushinka/start-page-6875 branch December 15, 2021 15:58

roboquat added deployed: webapp Meta team change is running in production deployed Change is completely running in production labels Dec 20, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve start page when GitHub App not installed #7163

Improve start page when GitHub App not installed #7163

laushinka commented Dec 10, 2021 •

edited by jldec

Loading

laushinka commented Dec 10, 2021 •

edited

Loading

jldec commented Dec 10, 2021

gtsiolis commented Dec 10, 2021 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented Dec 10, 2021 •

edited

Loading

jldec commented Dec 10, 2021 •

edited

Loading

laushinka commented Dec 12, 2021 •

edited

Loading

gtsiolis commented Dec 13, 2021 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment

roboquat commented Dec 13, 2021

laushinka commented Dec 14, 2021 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented Dec 14, 2021 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Dec 14, 2021 •

edited by werft-gitpod-dev-com bot

Loading

jldec Dec 15, 2021

laushinka Dec 15, 2021

jldec Dec 15, 2021

jankeromnes left a comment

roboquat commented Dec 15, 2021

laushinka commented Dec 15, 2021 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented Dec 15, 2021

laushinka commented Dec 15, 2021

jldec commented Dec 15, 2021

roboquat commented Dec 15, 2021

roboquat commented Dec 15, 2021

jldec commented Dec 15, 2021

Improve start page when GitHub App not installed #7163

Improve start page when GitHub App not installed #7163

Conversation

laushinka commented Dec 10, 2021 • edited by jldec Loading

Description

Related Issue(s)

How to test

Release Notes

Documentation

laushinka commented Dec 10, 2021 • edited Loading

jldec commented Dec 10, 2021

gtsiolis commented Dec 10, 2021 • edited by werft-gitpod-dev-com bot Loading

laushinka commented Dec 10, 2021 • edited Loading

jldec commented Dec 10, 2021 • edited Loading

laushinka commented Dec 12, 2021 • edited Loading

gtsiolis commented Dec 13, 2021 • edited by werft-gitpod-dev-com bot Loading

gtsiolis left a comment

Choose a reason for hiding this comment

roboquat commented Dec 13, 2021

laushinka commented Dec 14, 2021 • edited by werft-gitpod-dev-com bot Loading

laushinka commented Dec 14, 2021 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented Dec 14, 2021 • edited by werft-gitpod-dev-com bot Loading

jldec Dec 15, 2021

Choose a reason for hiding this comment

laushinka Dec 15, 2021

Choose a reason for hiding this comment

jldec Dec 15, 2021

Choose a reason for hiding this comment

jankeromnes left a comment

Choose a reason for hiding this comment

roboquat commented Dec 15, 2021

laushinka commented Dec 15, 2021 • edited by werft-gitpod-dev-com bot Loading

laushinka commented Dec 15, 2021

laushinka commented Dec 15, 2021

jldec commented Dec 15, 2021

roboquat commented Dec 15, 2021

roboquat commented Dec 15, 2021

jldec commented Dec 15, 2021

laushinka commented Dec 10, 2021 •

edited by jldec

Loading

laushinka commented Dec 10, 2021 •

edited

Loading

gtsiolis commented Dec 10, 2021 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented Dec 10, 2021 •

edited

Loading

jldec commented Dec 10, 2021 •

edited

Loading

laushinka commented Dec 12, 2021 •

edited

Loading

gtsiolis commented Dec 13, 2021 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented Dec 14, 2021 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented Dec 14, 2021 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Dec 14, 2021 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented Dec 15, 2021 •

edited by werft-gitpod-dev-com bot

Loading