frontend/settings: modernize project visibility and delete controls

haraldschilly · haraldschilly · commit a0dea091318a · 2024-07-17T16:41:01.000+02:00
diff --git a/src/packages/database/postgres/delete-projects.ts b/src/packages/database/postgres/delete-projects.ts
@@ -38,7 +38,7 @@ the user field so the user no longer can access the project, and we don't
 know that the user had anything to do with the project.  A separate phase
 later then purges these projects from disk as well as the database.
 
-TODO:it's referenced from postgres-server-queries.coffee, but is it actually used anywhere?
+TODO: it's referenced from postgres-server-queries.coffee, but is it actually used anywhere?
 */
 export async function permanently_unlink_all_deleted_projects_of_user(
   db: PostgreSQL,
diff --git a/src/packages/frontend/project/settings/hide-delete-box.tsx b/src/packages/frontend/project/settings/hide-delete-box.tsx
@@ -3,15 +3,20 @@
  *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
  */
 
-import { Alert, Button, Space } from "antd";
-import { useState } from "react";
+import { Alert, Button, Popconfirm, Switch } from "antd";
 
-import { Col, Row, Well } from "@cocalc/frontend/antd-bootstrap";
-import { Icon, SettingBox } from "@cocalc/frontend/components";
+import { Col, Row } from "@cocalc/frontend/antd-bootstrap";
+import {
+  Icon,
+  Paragraph,
+  SettingBox,
+  Title,
+} from "@cocalc/frontend/components";
 import { HelpEmailLink } from "@cocalc/frontend/customize";
 import { ProjectsActions } from "@cocalc/frontend/todo-types";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
 import { COLORS } from "@cocalc/util/theme";
+import { useMemo } from "react";
 import { DeletedProjectWarning } from "../warnings/deleted";
 import { Project } from "./types";
 
@@ -24,12 +29,12 @@ interface Props {
 export function HideDeleteBox(props: Readonly<Props>) {
   const { project, actions, mode = "project" } = props;
   const isFlyout = mode === "flyout";
-
-  const [show_delete_conf, set_show_delete_conf] = useState<boolean>(false);
+  const is_deleted = useMemo(() => {
+    return project.get("deleted");
+  }, [project.get("deleted")]);
 
   function toggle_delete_project(): void {
     actions.toggle_delete_project(project.get("project_id"));
-    set_show_delete_conf(false);
   }
 
   function toggle_hide_project(): void {
@@ -42,7 +47,7 @@ export function HideDeleteBox(props: Readonly<Props>) {
   }
 
   function delete_message(): JSX.Element {
-    if (project.get("deleted")) {
+    if (is_deleted) {
       return <DeletedProjectWarning />;
     } else {
       return (
@@ -63,60 +68,65 @@ export function HideDeleteBox(props: Readonly<Props>) {
     if (user == undefined) {
       return <span>Does not make sense for admin.</span>;
     }
-    if (user.get("hide")) {
+
+    return (
+      <span>
+        Hide this project, so it does not show up in your default project
+        listing. This only impacts you, not your collaborators, and you can
+        easily unhide it.
+      </span>
+    );
+  }
+
+  function render_delete_undelete_button(): JSX.Element {
+    if (is_deleted) {
       return (
-        <span>
-          Unhide this project, so it shows up in your default project listing.
-          Right now it only appears when hidden is checked.
-        </span>
+        <Button
+          danger
+          style={{ float: "right" }}
+          onClick={toggle_delete_project}
+          icon={<Icon name="trash" />}
+        >
+          Undelete Project
+        </Button>
       );
     } else {
       return (
-        <span>
-          Hide this project, so it does not show up in your default project
-          listing. This only impacts you, not your collaborators, and you can
-          easily unhide it.
-        </span>
+        <Popconfirm
+          placement={"bottom"}
+          arrow={{ pointAtCenter: true }}
+          title={render_expanded_delete_info()}
+          onConfirm={toggle_delete_project}
+          okText={`Yes, please delete this project!`}
+          cancelText="Cancel"
+          overlayStyle={{ maxWidth: "400px" }}
+          icon={<Icon name="trash" />}
+        >
+          <Button
+            danger
+            style={{ float: "right" }}
+            icon={<Icon name="trash" />}
+          >
+            Delete Project...
+          </Button>
+        </Popconfirm>
       );
     }
   }
 
-  function render_delete_undelete_button(is_deleted, is_expanded): JSX.Element {
-    let disabled, onClick, text;
-    if (is_deleted) {
-      text = "Undelete Project";
-      onClick = toggle_delete_project;
-      disabled = false;
-    } else {
-      text = "Delete Project...";
-      onClick = () => set_show_delete_conf(true);
-      disabled = is_expanded;
-    }
-
-    return (
-      <Button
-        danger
-        style={{ float: "right" }}
-        onClick={onClick}
-        disabled={disabled}
-        cocalc-test={is_deleted ? "undelete-project" : "delete-project"}
-      >
-        <Icon name="trash" /> {text}
-      </Button>
-    );
-  }
-
   function render_expanded_delete_info(): JSX.Element {
     const has_upgrades =
       webapp_client.account_id == null
         ? false
         : user_has_applied_upgrades(webapp_client.account_id, project);
     return (
-      <Well style={{ textAlign: "center" }}>
+      <Paragraph>
+        <div style={{ marginBottom: "5px" }}>
+          Are you sure you want to delete this project?
+        </div>
         {has_upgrades ? (
           <Alert
             showIcon
-            style={{ margin: "15px" }}
             type="info"
             description={
               <>
@@ -128,55 +138,41 @@ export function HideDeleteBox(props: Readonly<Props>) {
             }
           />
         ) : undefined}
-        {!has_upgrades ? (
-          <div style={{ marginBottom: "5px" }}>
-            Are you sure you want to delete this project?
-          </div>
-        ) : undefined}
-        <Space>
-          <Button onClick={() => set_show_delete_conf(false)}>Cancel</Button>
-          <Button
-            danger
-            onClick={toggle_delete_project}
-            cocalc-test="please-delete-project"
-          >
-            Yes, please delete this project
-          </Button>
-        </Space>
-      </Well>
+      </Paragraph>
     );
   }
 
   function renderBody() {
     return (
       <>
         <Row>
-          <Col sm={8}>{hide_message()}</Col>
-          <Col sm={4}>
-            <Button
-              onClick={toggle_hide_project}
-              style={{ float: "right" }}
-              cocalc-test={hidden ? "unhide-project" : "hide-project"}
-            >
-              <Icon name="eye-slash" /> {hidden ? "Unhide" : "Hide"} Project
-            </Button>
+          <Col sm={12}>
+            <Title level={4}>
+              <Icon name={hidden ? "eye-slash" : "eye"} /> Project{" "}
+              {hidden ? "hidden" : "visible"}
+              <Switch
+                checked={hidden}
+                style={{ float: "right" }}
+                checkedChildren={"Hidden"}
+                unCheckedChildren={"Visible"}
+                onChange={toggle_hide_project}
+              />
+            </Title>
+            <Paragraph>{hide_message()}</Paragraph>
           </Col>
         </Row>
         <hr />
         <Row>
-          <Col sm={8}>{delete_message()}</Col>
-          <Col sm={4}>
-            {render_delete_undelete_button(
-              project.get("deleted"),
-              show_delete_conf,
-            )}
+          <Col sm={12}>
+            <Title level={4}>
+              <Icon name="trash" /> Delete project{" "}
+              {render_delete_undelete_button()}
+            </Title>
+          </Col>
+          <Col sm={12}>
+            <Paragraph>{delete_message()}</Paragraph>
           </Col>
         </Row>
-        {show_delete_conf && !project.get("deleted") ? (
-          <Row style={{ marginTop: "10px" }}>
-            <Col sm={12}>{render_expanded_delete_info()}</Col>
-          </Row>
-        ) : undefined}
         <hr />
         <Row style={{ color: COLORS.GRAY_M }}>
           <Col sm={12}>
diff --git a/src/packages/frontend/project/warnings/deleted.tsx b/src/packages/frontend/project/warnings/deleted.tsx
@@ -3,8 +3,8 @@
  *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
  */
 
-import { Alert } from "../../antd-bootstrap";
-import { Icon } from "../../components";
+import { Alert } from "@cocalc/frontend/antd-bootstrap";
+import { Icon } from "@cocalc/frontend/components";
 
 // A warning to put on pages when the project is deleted
 export const DeletedProjectWarning: React.FC = () => {
