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.

Sign up for GitHub

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

Jump to bottom

[dashboard] Update Project Configurator #5236

Merged

roboquat merged 3 commits into main from jx/auto-gitpodify

Aug 25, 2021

Contributor

jankeromnes commented Aug 17, 2021 •

edited

Loading

Addresses part of #4948 (just the final Configuration part)

Specs

#4948 (comment)

Details

Imports https://github.com/gitpod-io/gitpod-yml-inferrer and uses it to try and guess a project's setup
If there is a repo-based config, that always takes priority
If there none, it tries to guess the setup (see all supported checkX setups in config-inferrer.ts)
If it doesn't guess the setup, it uses a default config (which cannot be parsed, due to comments, and to force users to enter something -- but maybe this isn't great)
You can run a prebuild based on the config, and see the log output & status (the "New Workspace" button doesn't work yet 🙈)

How to test

Use Admin to enable the Teams & Projects feature flag
Add a project with a repo-based setup (any repo with a .gitpod.yml) -- repo-based always has priority
Add a project with a recognizable setup (e.g. any repo with a package.json)
Add a project with an unrecognizable setup (e.g. an empty repo)

For each of these, try the Project Configurator.

E.g., add empty repo, change the config to init: yarn install and command: yarn start, click Run Prebuild

Screenshots

/uncc

/werft with-clean-slate-deployment

roboquat added the do-not-merge/work-in-progress label

Contributor Author

jankeromnes commented Aug 17, 2021 •

edited by werft-gitpod-dev-com bot

Loading

/werft run from-scratch

👎 unknown command run from-scratch - only run is supported

roboquat added the size/L label

jankeromnes added the approved label

Contributor Author

jankeromnes commented Aug 17, 2021 •

edited by werft-gitpod-dev-com bot

Loading

/werft run from-scratch

👎 unknown command run from-scratch - only run is supported

Contributor Author

jankeromnes commented Aug 17, 2021 •

edited by werft-gitpod-dev-com bot

Loading

/werft run with-clean-slate-deployment

👎 unknown command run with-clean-slate-deployment - only run is supported

Contributor Author

jankeromnes commented Aug 17, 2021 •

edited by werft-gitpod-dev-com bot

Loading

/werft run

👍 started the job as gitpod-build-jx-auto-gitpodify.16

jankeromnes force-pushed the jx/auto-gitpodify branch 5 times, most recently from b206df6 to 377eb8a Compare

August 18, 2021 13:11

gtsiolis linked an issue

that may be closed by this pull request

Update project configurator designs #4948

Closed

jankeromnes force-pushed the jx/auto-gitpodify branch 3 times, most recently from 7ead16e to b045ea3 Compare

August 19, 2021 08:27

roboquat added size/XL and removed size/L labels

jankeromnes force-pushed the jx/auto-gitpodify branch 3 times, most recently from e2d4001 to 0529944 Compare

August 19, 2021 15:09

jankeromnes marked this pull request as ready for review

August 19, 2021 15:09

roboquat removed the do-not-merge/work-in-progress label

Contributor Author

jankeromnes commented Aug 19, 2021 •

edited by werft-gitpod-dev-com bot

Loading

/werft run

👍 started the job as gitpod-build-jx-auto-gitpodify.28

Contributor Author

jankeromnes commented Aug 19, 2021 •

edited by werft-gitpod-dev-com bot

Loading

/werft run

👍 started the job as gitpod-build-jx-auto-gitpodify.29

jankeromnes requested review from AlexTugarev and gtsiolis

August 19, 2021 15:56

gtsiolis added component: dashboard 🧑‍🚀 crew: teams and projects labels

Member

AlexTugarev commented Aug 20, 2021

Nice just tried, and really like the new look!

About the Project type detected hint/message, it appear to be quite dominant like the other warnings. I think it would work without it as well. Also because it repeats the instructions on the right.

Contributor

gtsiolis commented Aug 20, 2021 •

edited by werft-gitpod-dev-com bot

Loading

Looking a this now! 👀

gtsiolis reviewed

View reviewed changes

Contributor

gtsiolis left a comment

C'est magnifique @jankeromnes! 🔮

Thanks for pushing this forward and adding support for dark theme layouts! 🙇

Left a first round of comments. If you think any of these comments significantly increase the scope of this PR let's open follow up issues if needed.

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

components/dashboard/src/projects/ConfigureProject.tsx

+                        {prebuildWasTriggered && <PrebuildStatus prebuildPhase={prebuildPhase} isDark={isDark} />}
+                        <div className="flex-grow" />
+                        <button className="secondary">New Workspace</button>
+                        <button disabled={isEditorDisabled} onClick={buildProject}>Run Prebuild</button>

Contributor

gtsiolis Aug 20, 2021

issue: This is disabled when there's a git based configuration. Expected?

Contributor Author

jankeromnes Aug 23, 2021

Yes (it doesn't work as expected yet -- will open a follow-up issue to fix & enable it)

components/dashboard/src/projects/ConfigureProject.tsx

+                      <div className="h-20 px-6 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-600 flex space-x-2">
+                        {prebuildWasTriggered && <PrebuildStatus prebuildPhase={prebuildPhase} isDark={isDark} />}
+                        <div className="flex-grow" />
+                        <button className="secondary">New Workspace</button>

Contributor

gtsiolis Aug 20, 2021

issue: This does not perform any action but I guess this is expected here?! 🙈

Contributor Author

jankeromnes Aug 23, 2021

Also yes 😬

components/dashboard/src/projects/ConfigureProject.tsx Show resolved Hide resolved

components/dashboard/src/projects/ConfigureProject.tsx Outdated

+                        : <div className="flex-grow flex flex-col items-center justify-center">
+                            <img className="w-14" role="presentation" src={isDark ? PrebuildLogsEmptyDark : PrebuildLogsEmpty} />
+                            <h3 className="text-center text-lg text-gray-500 dark:text-gray-50 mt-4">No Recent Prebuild</h3>
+                            <p className="text-center text-base text-gray-500 dark:text-gray-400 mt-2 w-64">Edit the project configuration on the left to get started. <a className="learn-more" href="https://www.gitpod.io/docs/config-gitpod-file/">Learn more</a>.</p>

Contributor

gtsiolis Aug 20, 2021

issue: The copy here is not accurate when project configuration is git based, right? What do you think of a) the following copy, b) using a slightly larger container width, and c) linking to the prebuilds docs instead? Also, let's remove the trailing dot from the help link for consistency with all other help links.

Suggested change

      
                          <p className="text-center text-base text-gray-500 dark:text-gray-400 mt-2 w-64">Edit the project configuration on the left to get started. <a className="learn-more" href="https://www.gitpod.io/docs/config-gitpod-file/">Learn more</a>.</p>
          
                          <p className="text-center text-base text-gray-500 dark:text-gray-400 mt-2 w-72">Prebuilds run on every commit and install dependencies, run build scripts, and more. <a className="learn-more" href="https://www.gitpod.io/docs/prebuilds/">Learn more</a></p>

Contributor Author

jankeromnes Aug 23, 2021

I'd feel a bit strange with the proposed new copy:

Prebuilds run on every commit

As a user discovering the Project Configurator, I'm now faced with a conflict: Should I click the "Run Prebuild" button, or push new commits instead as suggested here?

I don't think commits are relevant here, and even add confusion (either you're in a workspace, pushing commits, or you're in the Project Configurator and you test a config with a few clicks).

Contributor

gtsiolis Aug 23, 2021

You are probably right here! The intent here was to refrain from a) having duplicate content as the auto-detection message on the left[1][2] and b) showing an inaccurate message as editing the configuration is not possible for projects with a git-based configuration already in place. Instead this could help educate users about prebuilds.

What do you think of:

Keeping the following on the empty state on the right:

Run prebuild or open a new workspace to edit project configuration.

Changing the message on the left when the project has been detected successfully to something like the following:

The starter template below has been added based on the project type detected.

🍊 🍊 🍊 🍊

Also, enabling the Run Prebuild button would be great here, right?

components/dashboard/src/projects/ConfigureProject.tsx

-                      </div>
+                      {isDetecting && <div className="absolute h-full w-full flex items-center justify-center space-x-2">
+                        <img className="h-5 w-5 animate-spin" src={isDark ? SpinnerDark : Spinner} />
+                        <span className="font-semibold text-gray-400">Detecting project type ...</span>

Contributor

gtsiolis Aug 20, 2021

issue: When adding an empty repository, this is stuck into detecting loop. Could we use an error message and prompt the user to open a new workspace instead?

Contributor Author

jankeromnes Aug 23, 2021

When adding an empty repository, this is stuck into detecting loop.

Oh, that's unexpected & sounds like a bug. For me, an empty repository gets "detected" as "no setup found", and immediately gets the default config.

Did you notice any errors in the browser console?

Contributor

gtsiolis Aug 23, 2021

Did you notice any errors in the browser console?

Do not recall but will try again once the new preview env is up and running.

components/dashboard/src/projects/ConfigureProject.tsx

+                        {prebuildWasTriggered && <PrebuildStatus prebuildPhase={prebuildPhase} isDark={isDark} />}
+                        <div className="flex-grow" />
+                        <button className="secondary">New Workspace</button>
+                        <button disabled={isEditorDisabled} onClick={buildProject}>Run Prebuild</button>

Contributor

gtsiolis Aug 20, 2021

suggestion: We could disable the run prebuild button when a prebuild is in progress. Alternatively, to avoid disabling buttons, which is a bad practice in terms of accessibility, we could trigger a modal to confirm a new prebuild and cancel the previous one in the background.

components/dashboard/src/projects/ConfigureProject.tsx

-                      </div>
+                      {isDetecting && <div className="absolute h-full w-full flex items-center justify-center space-x-2">
+                        <img className="h-5 w-5 animate-spin" src={isDark ? SpinnerDark : Spinner} />
+                        <span className="font-semibold text-gray-400">Detecting project type ...</span>

Contributor

gtsiolis Aug 20, 2021

issue: I could not get a detectable project up and running. 😭

Contributor Author

jankeromnes Aug 23, 2021

That's unexpected. @AlexTugarev seems to have gotten one in #5236 (comment) -- which project did you try?

Hint: Any project with a package.json and without a .gitpod.yml should get successfully detected (even if private).

Contributor

gtsiolis Aug 23, 2021

... which project did you try?

I remember trying a private repository with a starter template with Next.js.

components/dashboard/src/components/MonacoEditor.tsx Show resolved Hide resolved

components/dashboard/src/components/WorkspaceLogs.tsx Show resolved Hide resolved

jankeromnes force-pushed the jx/auto-gitpodify branch 7 times, most recently from e56682a to af8dfe2 Compare

August 24, 2021 08:43

gtsiolis mentioned this pull request

Add loading indicator when fetching branches and prebuilds #5351

Closed

jankeromnes added 3 commits

August 24, 2021 13:53


          [server] Leverage 'gitpod-yml-inferrer' to guess a new Project's .git…

412ee03

…pod.yml


          [dashboard] Refactor WorkspaceLogs to React Hooks

6e0291f


          [dashboard] Update Project Configurator UX

9a37f20

jankeromnes force-pushed the jx/auto-gitpodify branch from af8dfe2 to 9a37f20 Compare

August 24, 2021 13:53

Contributor Author

jankeromnes commented Aug 24, 2021 •

edited by werft-gitpod-dev-com bot

Loading

/werft run

👍 started the job as gitpod-build-jx-auto-gitpodify.42

Contributor Author

jankeromnes commented Aug 24, 2021 •

edited by werft-gitpod-dev-com bot

Loading

/werft run

👍 started the job as gitpod-build-jx-auto-gitpodify.43

Contributor Author

jankeromnes commented Aug 24, 2021

Okay, this is about as far as I'll get in this PR.

@AlexTugarev could you please give this another look, and approve if it can be merged? I can adjust minor things and migrate all remaining open discussions to follow-up issues.

Heads up: This refactors WorkspaceLogs, i.e. the logs component used everywhere in the dashboard (even in non-Teams & Projects pages, like the workspace start page). I've tried testing that logs didn't break, but there are too many random logs problems* on dev-staging currently so this can't really be tested. Hopefully this can be test on staging before it goes live.

*Problems that make testing the logs almost impossible:

svenefftinge approved these changes

View reviewed changes

roboquat assigned svenefftinge

roboquat added the lgtm label

Contributor

roboquat commented Aug 25, 2021

LGTM label has been added.

Git tree hash: db3b657b23d0eb673221714f80590cfbd6eaddc5

Contributor

roboquat commented Aug 25, 2021

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: svenefftinge

Associated issue: #4948

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:

~~OWNERS~~ [svenefftinge]
~~components/dashboard/OWNERS~~ [svenefftinge]
~~components/gitpod-protocol/OWNERS~~ [svenefftinge]
~~components/server/OWNERS~~ [svenefftinge]

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

roboquat merged commit 56e5809 into main

roboquat deleted the jx/auto-gitpodify branch

August 25, 2021 06:09

svenefftinge mentioned this pull request

add default gitpod.yml file #5337

Closed

Contributor Author

jankeromnes commented Aug 26, 2021 •

edited

Loading

For the record, the WorkspaceLogs refactor caused #5389 (thanks for catching this @AlexTugarev!)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment