Add a remove project button on the project settings page #15316

selfcontained · 2022-12-12T22:01:30Z

Description

Adds a "Remove Project" button on the project settings page.

Clicking the button brings up the same modal that is shown from the Projects list page when using the context menu action for removing.

Followup

To help keep this PR small I'll open a followup one that updates the Projects list page use the new <RemoveProjectModal/> component, along with a few other improvements for that page.

Related Issue(s)

Fixes #14251

How to test

Preivew Env: https://bmh-deleted93c550a0b.preview.gitpod-dev.com/

Create a new Project
Navigate to the Settings page for that project
Scroll to the bottom and click the Remove Project button
You should see a confirmation modal that you can dismiss, or proceed with.
After the project is deleted you should get navigated to the Projects list page

Release Notes

Projects can now be deleted from the corresponding Settings page for that project.

Documentation

Werft options:

/werft with-local-preview
If enabled this will build install/preview
/werft with-preview
/werft with-large-vm
/werft with-integration-tests=all
Valid options are all, workspace, webapp, ide, jetbrains, vscode, ssh

werft-gitpod-dev-com · 2022-12-12T22:01:37Z

started the job as gitpod-build-bmh-delete-project-settings.2 because the annotations in the pull request description changed
(with .werft/ from main)

selfcontained · 2022-12-12T23:23:36Z

components/dashboard/src/contexts/FeatureFlagContext.tsx

@@ -107,3 +107,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
 };

 export { FeatureFlagContext, FeatureFlagContextProvider };
+
+export const useFeatureFlags = () => {


Makes it just a bit simpler to access feature flags from a component.

selfcontained · 2022-12-12T23:24:14Z

components/dashboard/src/projects/ProjectSettings.tsx

@@ -61,33 +65,52 @@ export default function () {
        }
    }, [team]);

-    if (!project) return null;
+    const updateProjectSettings = useCallback(


Wrapped each of these functions with useCallback() to avoid creating new references for each render. The guts of each function shouldn't have changed at all.

selfcontained · 2022-12-12T23:25:52Z

components/dashboard/src/projects/ProjectSettings.tsx

+    }, [history, team]);
+
+    // TODO: Render a generic error screen for when an entity isn't found
+    if (!project) return null;


This should live after all hooks, so bumped it down since I added a few useCallback() wrappers on the fns that weren't there before.

svenefftinge

Thank you! TIL about useCallback 🙈
I wonder what the implications of removing a project are. We have other resources that reference projects such as workspaces and prebuilds. One could argue that those are even owned by a project, but deleting all this together with a project would seem like a quite impactful operation. So we probably don't want to do that, but then we should indicate to users when a workspace references a deleted project.
Also, do we need to make sure that prebuilds created for the removed project are no longer used when starting new workspaces?

/hold

easyCZ · 2022-12-13T09:24:01Z

I wonder what the implications of removing a project are. We have other resources that reference projects such as workspaces and prebuilds. One could argue that those are even owned by a project, but deleting all this together with a project would seem like a quite impactful operation.

The change, as presented in this PR only improves the UI aspect of project deletion. As such, the above feels not directly relevant to this change.

Were you referring to also deleting stored (cached/state) resources which relate to the project? Or were you referring to the workflow on what happens when you delete a project on the server-side?

easyCZ

Nice! Really like the cleanup you're doing alongside the improvements themselves. For me, this change does exactly what it should, and what was specified in the original issue.

LGTM

Feel free to land, if you feel the conversations have been resolved.

svenefftinge · 2022-12-13T09:33:55Z

The change, as presented in this PR only improves the UI aspect of project deletion.

Indeed 🙏 I had somehow the impression it would introduce the removal of projects.

/unhold

gtsiolis

Hey @selfcontained!

Coming a bit late here but UX LGTM. 🏁

Left some minor non-blocking comments below.
Also, closed Delete projects from project settings #14251 in favor of Move project removal action under project settings #7273 which also contains some design specs that could be helpful here, see Move project removal action under project settings #7273 (comment).

gtsiolis · 2022-12-13T09:34:23Z

components/dashboard/src/projects/ProjectSettings.tsx

@@ -237,6 +260,22 @@ export default function () {
                    </Alert>
                )}
            </div>
+            <div>
+                <h3 className="mt-12">Delete Project</h3>


suggestion: What do you think of using a different verb here to avoid causing any confusion whether this is also going to delete a project or repository on the provider?

Suggested change

<h3 className="mt-12">Delete Project</h3>

<h3 className="mt-12">Remove Project</h3>

I like it. I’ll include this change in a follow up pr

gtsiolis · 2022-12-13T09:39:53Z

components/dashboard/src/projects/RemoveProjectModal.tsx

+    return (
+        <ConfirmationModal
+            title="Remove Project"
+            areYouSureText="Are you sure you want to remove this project from this team? Team members will also lose access to this project."


issue(non-blocking): This is out of the scope here, but there's a top margin here that's not needed in the modal component. Posting below how the modal would look like be ideally for visibility. However, feel free to leave this as is.

BEFORE AFTER

Got it, I'll update the confirmation modal in the follow up too.

wip for remove project on settings page

bcfbc68

roboquat added do-not-merge/work-in-progress do-not-merge/release-note-label-needed labels Dec 12, 2022

roboquat added the size/L label Dec 12, 2022

wrap fns w/ useCallback and cleanup

29bdcc5

selfcontained changed the title ~~wip for remove project on settings page~~ Add a remove project button on the project settings page Dec 12, 2022

roboquat added release-note and removed do-not-merge/release-note-label-needed labels Dec 12, 2022

selfcontained commented Dec 12, 2022

View reviewed changes

removing empty className prop

0976c74

selfcontained marked this pull request as ready for review December 12, 2022 23:28

selfcontained requested a review from a team December 12, 2022 23:28

roboquat removed the do-not-merge/work-in-progress label Dec 12, 2022

github-actions bot added the team: webapp Issue belongs to the WebApp team label Dec 12, 2022

selfcontained mentioned this pull request Dec 13, 2022

Project list page updates #15318

Merged

4 tasks

svenefftinge approved these changes Dec 13, 2022

View reviewed changes

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

easyCZ approved these changes Dec 13, 2022

View reviewed changes

gtsiolis mentioned this pull request Dec 13, 2022

Delete projects from project settings #14251

Closed

roboquat removed the do-not-merge/hold label Dec 13, 2022

roboquat merged commit b9dab72 into main Dec 13, 2022

roboquat deleted the bmh/delete-project-settings branch December 13, 2022 09:34

gtsiolis approved these changes Dec 13, 2022

View reviewed changes

gtsiolis mentioned this pull request Dec 13, 2022

Move project removal action under project settings #7273

Closed

roboquat added the deployed: webapp Meta team change is running in production label Dec 13, 2022

roboquat added the deployed Change is completely running in production label Dec 13, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add a remove project button on the project settings page #15316

Add a remove project button on the project settings page #15316

Uh oh!

selfcontained commented Dec 12, 2022 •

edited

Loading

Uh oh!

werft-gitpod-dev-com bot commented Dec 12, 2022

Uh oh!

selfcontained Dec 12, 2022

Uh oh!

selfcontained Dec 12, 2022 •

edited

Loading

Uh oh!

selfcontained Dec 12, 2022

Uh oh!

svenefftinge left a comment

Uh oh!

easyCZ commented Dec 13, 2022

Uh oh!

easyCZ left a comment

Uh oh!

svenefftinge commented Dec 13, 2022 •

edited by werft-gitpod-dev-com bot

Loading

Uh oh!

gtsiolis left a comment •

edited

Loading

Uh oh!

gtsiolis Dec 13, 2022

Uh oh!

selfcontained Dec 13, 2022

Uh oh!

gtsiolis Dec 13, 2022

Uh oh!

selfcontained Dec 13, 2022

Uh oh!

Uh oh!

	<h3 className="mt-12">Delete Project</h3>
	<h3 className="mt-12">Remove Project</h3>

Add a remove project button on the project settings page #15316

Add a remove project button on the project settings page #15316

Uh oh!

Conversation

selfcontained commented Dec 12, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Followup

Related Issue(s)

How to test

Release Notes

Documentation

Werft options:

Uh oh!

werft-gitpod-dev-com bot commented Dec 12, 2022

Uh oh!

selfcontained Dec 12, 2022

Choose a reason for hiding this comment

Uh oh!

selfcontained Dec 12, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

selfcontained Dec 12, 2022

Choose a reason for hiding this comment

Uh oh!

svenefftinge left a comment

Choose a reason for hiding this comment

Uh oh!

easyCZ commented Dec 13, 2022

Uh oh!

easyCZ left a comment

Choose a reason for hiding this comment

Uh oh!

svenefftinge commented Dec 13, 2022 • edited by werft-gitpod-dev-com bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gtsiolis left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gtsiolis Dec 13, 2022

Choose a reason for hiding this comment

Uh oh!

selfcontained Dec 13, 2022

Choose a reason for hiding this comment

Uh oh!

gtsiolis Dec 13, 2022

Choose a reason for hiding this comment

Uh oh!

selfcontained Dec 13, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

selfcontained commented Dec 12, 2022 •

edited

Loading

selfcontained Dec 12, 2022 •

edited

Loading

svenefftinge commented Dec 13, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment •

edited

Loading