Brad/exp 458 fe allow pasting in a git clone url to create project as #18534

selfcontained · 2023-08-17T02:07:09Z

Description

The primary aim for this PR was to allow pasting in a git clone url when creating a project, and allowing the user to create w/ that clone url if there isn't a repo that matches their search, and if the url looks like a clone url. In case there are problems loading the repositories, this provides a workaround.

Notes:
The NewProject.tsx file has a lot going on it, which made it quite difficult to modify some of the functionality w/o effecting the rest. There were like 8 useEffects() and several layers of nested rendering functions. I ended up refactoring most of that component and breaking it out into more manageable pieces, as well as prepping some of the queries/mutations to let us build an incremental repo search for this UI as a followup.

Summary generated by Copilot

`🤖 Generated by Copilot at 9a8b7a2`

This pull request adds several new files with TypeScript code that implement the user interface and the data fetching logic for creating projects from GitHub repositories. It defines custom React hooks for querying and mutating GitHub-related data, and React components for rendering the different elements of the new project creation flow. It also provides a utility function for reconfiguring the GitHub app if needed.

Related Issue(s)

Fixes EXP-458

How to test

Try and create new projects on the Preview Environment.
Try pasting in git clone urls and creating that way

Documentation

Preview status

Gitpod was successfully deployed to your preview environment.

🏷️ Name - brad-exp-4a012c26733
🔗 URL - brad-exp-4a012c26733.preview.gitpod-dev.com/workspaces.
📚 Documentation - See our internal documentation for information on how to interact with your preview environment.
📦 Version - brad-exp-458-fe-allow-pasting-in-a-git-clone-url-to-create-project-as-gha.15508

Build Options

Build

/werft with-werft
Run the build with werft instead of GHA
leeway-no-cache
/werft no-test
Run Leeway with --dont-test

Publish

/werft publish-to-npm
/werft publish-to-jb-marketplace

Installer

analytics=segment
with-dedicated-emulation
workspace-feature-flags
Add desired feature flags to the end of the line above, space separated

Preview Environment / Integration Tests

/werft with-local-preview
If enabled this will build install/preview
/werft with-preview
/werft with-large-vm
/werft with-gce-vm
If enabled this will create the environment on GCE infra
with-integration-tests=all
Valid options are all, workspace, webapp, ide, jetbrains, vscode, ssh. If enabled, with-preview and with-large-vm will be enabled.
with-monitoring

/hold

filiptronicek

Hey Brad, chiming in pretty early as it's still a draft, just some minor suggestions 🙏

components/dashboard/src/projects/new-project/NewProjectSearchInput.tsx

components/dashboard/src/projects/new-project/NewProjectCreateFromURL.tsx

AlexTugarev · 2023-08-17T13:36:57Z

components/dashboard/src/projects/new-project/NewProjectCreateFromURL.tsx

+        let slug = "";
+
+        try {
+            // try and parse the url for owner/repo path parts


We've a util for that in server. I could make sense to pull it out to gitpod-protocol for reuse. Have a look at the special cases, some of them actually introduced for BBS:
https://github.com/gitpod-io/gitpod/blob/de09b5f828e23b8dfb6774c750c94b2db846c00d/components/server/src/repohost/repo-url.ts

And this request params show, something is off.

Thanks for catching, it's updated to use the repo name correctly now, and the slug becomes a mashup of the "owner" path parts and the repo name.

AlexTugarev · 2023-08-17T13:49:20Z

components/dashboard/src/data/projects/create-project-mutation.ts

+                throw new Error("No org currently selected");
+            }
+
+            return await getGitpodService().server.createProject({


(nothing wrong with that line, just don't know where to attach.)

The current check for repository permissions is case-sensitive. This is why the createProject will fail, as it's transformed to lower case. Let me see if I can fix the permission check real quick in the other PR.

It's resolved here: 1015169

Please rebase

AlexTugarev · 2023-08-17T13:56:36Z

@selfcontained, in general this is almost perfect!

Besides the other comments, I think the only issue I see is with discoverability of this feature. For testing, I didn't look too much into the FE code, but just tried to use it. Here are my thoughts in short:

First there are no hints about the feature of pasting in the cloneURL
When trying to enter a GH repo URL, I still saw the "No results" rendering
- This is where I would have expected to see a hint. Maybe we can think of parsing for a valid URL in general, and render a hint if it's not a complete clone URL yet, so that one could understand the expectation at this point.

I leave it up to you to decide on how far you want to take it in here, or create follow-up issues.

…FromURL.tsx Co-authored-by: Filip Troníček <[email protected]>

filiptronicek · 2023-08-17T18:12:05Z

@selfcontained whenever I try adding a repo from a clone URL, I seem to get an error from the GitHub API, preventing the Project success page from showing up, even though it is created in the background

AlexTugarev · 2023-08-17T20:52:09Z

components/dashboard/src/projects/new-project/NewProjectCreateFromURL.tsx

-            name = repo || owner;
-            slug = (repo || owner).toLowerCase();
+            name = repo;
+            slug = [repo, owner].filter(Boolean).join("-").toLowerCase();


just to resurface: this won't work nice with personal BBS repos, e.g. https://bitbucket.gitpod-dev.com/scm/~alex/personal-repo.git

I ended up swapping it so it's repo at the end. So in this case the slug would be scm-~alex-personal-repo - is that a problem?

AlexTugarev

It worked nicely 👍🏻

🙇🏻‍♂️ Awesome work!

filiptronicek

Just re-tried; works great!

selfcontained · 2023-08-17T22:38:44Z

/unhold

roboquat added do-not-merge/hold do-not-merge/work-in-progress size/XXL labels Aug 17, 2023

filiptronicek reviewed Aug 17, 2023

View reviewed changes

AlexTugarev reviewed Aug 17, 2023

View reviewed changes

selfcontained and others added 8 commits August 17, 2023 17:49

first pass at organizing components for project creation

d6d09ee

allow creating from git clone url

817ae3f

cleanup

6256840

add creating state

49478be

cleanup

b093917

Update components/dashboard/src/projects/new-project/NewProjectCreate…

eff5f23

…FromURL.tsx Co-authored-by: Filip Troníček <[email protected]>

improve git clone url parsing

d933bfa

Adding cancelation when query unmounts

08429a9

selfcontained force-pushed the brad/exp-458-fe-allow-pasting-in-a-git-clone-url-to-create-project-as branch from c13456d to 08429a9 Compare August 17, 2023 17:50

selfcontained marked this pull request as ready for review August 17, 2023 19:12

selfcontained requested a review from a team as a code owner August 17, 2023 19:12

roboquat removed the do-not-merge/work-in-progress label Aug 17, 2023

github-actions bot added the team: team-experience label Aug 17, 2023

fixing slug

5f68e44

AlexTugarev reviewed Aug 17, 2023

View reviewed changes

AlexTugarev approved these changes Aug 17, 2023

View reviewed changes

filiptronicek approved these changes Aug 17, 2023

View reviewed changes

showing some help text if they enter a url that isn't a clone url

16f0df6

roboquat removed the do-not-merge/hold label Aug 17, 2023

roboquat merged commit c3d1c56 into main Aug 17, 2023

roboquat deleted the brad/exp-458-fe-allow-pasting-in-a-git-clone-url-to-create-project-as branch August 17, 2023 22:39

Brad/exp 458 fe allow pasting in a git clone url to create project as #18534

Brad/exp 458 fe allow pasting in a git clone url to create project as #18534

Uh oh!

Conversation

selfcontained commented Aug 17, 2023 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

🤖 Generated by Copilot at 9a8b7a2

Related Issue(s)

How to test

Documentation

Preview status

Build Options

Uh oh!

filiptronicek left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

AlexTugarev Aug 17, 2023

Choose a reason for hiding this comment

Uh oh!

AlexTugarev Aug 17, 2023

Choose a reason for hiding this comment

Uh oh!

selfcontained Aug 17, 2023

Choose a reason for hiding this comment

Uh oh!

AlexTugarev Aug 17, 2023

Choose a reason for hiding this comment

Uh oh!

AlexTugarev Aug 17, 2023

Choose a reason for hiding this comment

Uh oh!

AlexTugarev commented Aug 17, 2023

Uh oh!

filiptronicek commented Aug 17, 2023

Uh oh!

AlexTugarev Aug 17, 2023

Choose a reason for hiding this comment

Uh oh!

selfcontained Aug 17, 2023

Choose a reason for hiding this comment

Uh oh!

AlexTugarev left a comment

Choose a reason for hiding this comment

Uh oh!

filiptronicek left a comment

Choose a reason for hiding this comment

Uh oh!

selfcontained commented Aug 17, 2023

Uh oh!

Uh oh!

selfcontained commented Aug 17, 2023 •

edited by github-actions bot

Loading

`🤖 Generated by Copilot at 9a8b7a2`