fix #8426 -- make it easy to remove myself from all matching projects

Author: williamstein

src/packages/frontend/collaborators/current-collabs.tsx

@@ -40,7 +40,8 @@ export const CurrentCollaboratorsPanel: React.FC<Props> = (props: Props) => {
     const project_id = project.get("project_id");
     redux.getActions("projects").remove_collaborator(project_id, account_id);
     if (account_id === get_account_id()) {
-      return (redux.getActions("page") as any).close_project_tab(project_id); // TODO: better types
+      (redux.getActions("page") as any).close_project_tab(project_id); 
+      // TODO: better types
     }
   }
 

src/packages/frontend/projects/project-list-desc.tsx

@@ -20,6 +20,7 @@ import {
 import { Gap, Icon } from "@cocalc/frontend/components";
 import { labels } from "@cocalc/frontend/i18n";
 import { plural } from "@cocalc/util/misc";
+import RemoveMyself from "./remove-myself";
 
 interface Props {
   visible_projects: string[];
@@ -92,16 +93,16 @@ export const ProjectsListingDescription: React.FC<Props> = ({
   }
 
   function render_projects_actions_toolbar(): React.JSX.Element {
+    if (visible_projects.length == 0) {
+      return null;
+    }
     return (
       <ButtonGroup style={{ margin: "15px" }}>
-        {visible_projects.length > 0 && !deleted
-          ? render_delete_all_button()
-          : undefined}
-        {visible_projects.length > 0 && !hidden
-          ? render_hide_all_button()
-          : undefined}
-        {visible_projects.length > 0 ? render_stop_all_button() : undefined}
-        {visible_projects.length > 0 ? render_restart_all_button() : undefined}
+        {!deleted ? render_delete_all_button() : undefined}
+        {!hidden ? render_hide_all_button() : undefined}
+        {render_stop_all_button()}
+        {render_restart_all_button()}
+        <RemoveMyself project_ids={visible_projects} />
       </ButtonGroup>
     );
   }
@@ -195,6 +196,8 @@ export const ProjectsListingDescription: React.FC<Props> = ({
     );
   }
 
+  function renderRemoveMyself() {}
+
   function render_hide_all(): React.JSX.Element | undefined {
     if (visible_projects.length === 0) {
       return;

src/packages/frontend/projects/remove-myself.tsx

@@ -0,0 +1,35 @@
+import { Button, Popconfirm } from "antd";
+import { plural } from "@cocalc/util/misc";
+import { redux, useTypedRedux } from "@cocalc/frontend/app-framework";
+
+export default function RemoveMyself({ project_ids }) {
+  const account_id = useTypedRedux("account", "account_id");
+
+  return (
+    <Popconfirm
+      title="Remove myself from projects"
+      description={
+        <div style={{ maxWidth: "400px" }}>
+          Are you sure to remove yourself from up to {project_ids.length}{" "}
+          {plural(project_ids.length, "project")}? You will no longer have
+          access and cannot add yourself back.{" "}
+          <b>You will not be removed from projects you own.</b>
+        </div>
+      }
+      onConfirm={() => {
+        const projects = redux.getActions("projects");
+        const page = redux.getActions("page");
+        for (const project_id of project_ids) {
+          try {
+            projects.remove_collaborator(project_id, account_id);
+            page.close_project_tab(project_id);
+          } catch {}
+        }
+      }}
+      okText="Yes"
+      cancelText="No"
+    >
+      <Button>Remove Myself...</Button>
+    </Popconfirm>
+  );
+}