course: switch to using popconfirms

Author: williamstein

src/packages/frontend/course/assignments/assignment.tsx

@@ -13,7 +13,7 @@ import {
   Tip,
 } from "@cocalc/frontend/components";
 import { capitalize, trunc_middle } from "@cocalc/util/misc";
-import { Alert, Button, Card, Col, Input, Row, Space } from "antd";
+import { Alert, Button, Card, Col, Input, Popconfirm, Row, Space } from "antd";
 import { ReactElement, useState } from "react";
 import { DebounceInput } from "react-debounce-input";
 import { CourseActions } from "../actions";
@@ -92,7 +92,6 @@ export function Assignment({
 }: AssignmentProps) {
   const size = useButtonSize();
 
-  const [confirm_delete, set_confirm_delete] = useState<boolean>(false);
   const [
     copy_assignment_confirm_overwrite,
     set_copy_assignment_confirm_overwrite,
@@ -239,6 +238,10 @@ export function Assignment({
   }
 
   function render_no_content() {
+    if (assignment.get("deleted")) {
+      // no point
+      return null;
+    }
     return (
       <div style={{ margin: "15px auto", maxWidth: "800px", fontSize: "12pt" }}>
         There are no files in this assignment yet. Please{" "}
@@ -293,15 +296,6 @@ export function Assignment({
         </Row>,
       );
     }
-    if (confirm_delete) {
-      v.push(
-        <Row key="header2-delete" style={bottom}>
-          <Col md={20} offset={4}>
-            {render_confirm_delete()}
-          </Col>
-        </Row>,
-      );
-    }
 
     const peer = is_peer_graded();
     if (peer) {
@@ -1112,7 +1106,6 @@ export function Assignment({
 
   function delete_assignment() {
     actions.assignments.delete_assignment(assignment.get("assignment_id"));
-    return set_confirm_delete(false);
   }
 
   function undelete_assignment() {
@@ -1121,28 +1114,6 @@ export function Assignment({
     );
   }
 
-  function render_confirm_delete() {
-    const message = (
-      <div>
-        Are you sure you want to delete this assignment?
-        <br /> <br />
-        <Space>
-          <Button
-            key="no"
-            onClick={() => set_confirm_delete(false)}
-            size={size}
-          >
-            Cancel
-          </Button>
-          <Button key="yes" onClick={delete_assignment} danger size={size}>
-            <Icon name="trash" /> Delete
-          </Button>
-        </Space>
-      </div>
-    );
-    return <Alert type="warning" key="confirm_delete" message={message} />;
-  }
-
   function render_delete_button() {
     if (assignment.get("deleted")) {
       return (
@@ -1159,20 +1130,25 @@ export function Assignment({
       );
     } else {
       return (
-        <Tip
-          key="delete"
-          placement="left"
-          title="Delete assignment"
-          tip="Deleting this assignment removes it from the assignment list and student grade lists, but does not delete any files off of disk.  You can always undelete an assignment later by showing it using the 'show deleted assignments' button."
+        <Popconfirm
+          title={
+            <div style={{ maxWidth: "400px" }}>
+              <b>
+                Are you sure you want to delete "
+                {trunc_middle(assignment.get("path"), 24)}"?
+              </b>
+              <br /> This removes it from the assignment list and student grade
+              lists, but does not delete any files off of disk. You can undelete
+              an assignment later by showing it using the 'Show deleted
+              assignments' button.
+            </div>
+          }
+          onConfirm={delete_assignment}
         >
-          <Button
-            onClick={() => set_confirm_delete(true)}
-            disabled={confirm_delete}
-            size={size}
-          >
-            <Icon name="trash" /> Delete
+          <Button size={size}>
+            <Icon name="trash" /> Delete...
           </Button>
-        </Tip>
+        </Popconfirm>
       );
     }
   }

src/packages/frontend/course/configuration/start-stop-panel.tsx

@@ -1,7 +1,7 @@
-import { Alert, Button, Card, Row, Col, Space, Spin } from "antd";
-import { Icon } from "../../components";
-import { useState, useActions, useRedux } from "../../app-framework";
-import { CourseActions } from "../actions";
+import { Alert, Button, Card, Row, Col, Popconfirm, Space, Spin } from "antd";
+import { Icon } from "@cocalc/frontend/components/icon";
+import { useActions, useRedux } from "@cocalc/frontend/app-framework";
+import type { CourseActions } from "../actions";
 import { capitalize } from "@cocalc/util/misc";
 
 interface Props {
@@ -19,11 +19,6 @@ export function StudentProjectsStartStopPanel({
     name,
     "action_all_projects_state",
   ]);
-  const [confirm_stop_all_projects, set_confirm_stop_all_projects] =
-    useState<boolean>(false);
-  const [confirm_start_all_projects, set_confirm_start_all_projects] =
-    useState<boolean>(false);
-
   const actions: CourseActions = useActions(name);
 
   function render_in_progress_action() {
@@ -63,67 +58,6 @@ export function StudentProjectsStartStopPanel({
     );
   }
 
-  function render_confirm_stop_all_projects() {
-    return (
-      <Alert
-        type="warning"
-        message={
-          <div>
-            Are you sure you want to stop all student projects (this might be
-            disruptive)?
-            <br />
-            <br />
-            <Space>
-              <Button onClick={() => set_confirm_stop_all_projects(false)}>
-                Cancel
-              </Button>
-              <Button
-                danger
-                type="primary"
-                onClick={() => {
-                  set_confirm_stop_all_projects(false);
-                  actions.student_projects.action_all_student_projects("stop");
-                }}
-              >
-                <Icon name="PoweroffOutlined" /> Stop all
-              </Button>
-            </Space>
-          </div>
-        }
-      />
-    );
-  }
-
-  function render_confirm_start_all_projects() {
-    return (
-      <Alert
-        type="info"
-        message={
-          <div>
-            Are you sure you want to start all student projects? This will
-            ensure the projects are already running when the students open them.
-            <br />
-            <br />
-            <Space>
-              <Button onClick={() => set_confirm_start_all_projects(false)}>
-                Cancel
-              </Button>{" "}
-              <Button
-                type="primary"
-                onClick={() => {
-                  set_confirm_start_all_projects(false);
-                  actions.student_projects.action_all_student_projects("start");
-                }}
-              >
-                <Icon name="bolt" /> Start all
-              </Button>
-            </Space>
-          </div>
-        }
-      />
-    );
-  }
-
   const r = num_running_projects;
   const n = num_students;
   return (
@@ -142,35 +76,51 @@ export function StudentProjectsStartStopPanel({
       <Row style={{ marginTop: "10px" }}>
         <Col md={24}>
           <Space>
-            <Button
-              onClick={() => set_confirm_start_all_projects(true)}
-              disabled={
-                n === 0 ||
-                n === r ||
-                confirm_start_all_projects ||
-                action_all_projects_state === "starting"
+            <Popconfirm
+              title={
+                <div style={{ maxWidth: "400px" }}>
+                  <b>Are you sure you want to start all student projects?</b>
+                  <br /> This will ensure the projects are already running when
+                  the students open them, and can make assigning and collecting
+                  homework more robust.
+                </div>
               }
+              onConfirm={() => {
+                actions.student_projects.action_all_student_projects("start");
+              }}
             >
-              <Icon name="bolt" /> Start all...
-            </Button>
-            <Button
-              onClick={() => set_confirm_stop_all_projects(true)}
-              disabled={
-                n === 0 ||
-                r === 0 ||
-                confirm_stop_all_projects ||
-                action_all_projects_state === "stopping"
+              <Button
+                disabled={
+                  n === 0 || n === r || action_all_projects_state === "starting"
+                }
+              >
+                <Icon name="bolt" /> Start all...
+              </Button>
+            </Popconfirm>
+            <Popconfirm
+              title={
+                <div style={{ maxWidth: "400px" }}>
+                  Are you sure you want to stop all student projects (this might
+                  be disruptive)?
+                </div>
               }
+              onConfirm={() => {
+                actions.student_projects.action_all_student_projects("stop");
+              }}
             >
-              <Icon name="PoweroffOutlined" /> Stop all...
-            </Button>
+              <Button
+                disabled={
+                  n === 0 || r === 0 || action_all_projects_state === "stopping"
+                }
+              >
+                <Icon name="PoweroffOutlined" /> Stop all...
+              </Button>
+            </Popconfirm>
           </Space>
         </Col>
       </Row>
       <Row style={{ marginTop: "10px" }}>
         <Col md={24}>
-          {confirm_start_all_projects && render_confirm_start_all_projects()}
-          {confirm_stop_all_projects && render_confirm_stop_all_projects()}
           {action_all_projects_state !== "any" && render_in_progress_action()}
         </Col>
       </Row>

src/packages/frontend/course/handouts/handout.tsx

@@ -6,7 +6,7 @@
 import { redux, CSS } from "@cocalc/frontend/app-framework";
 import { useState } from "react";
 import { capitalize, trunc_middle } from "@cocalc/util/misc";
-import { Alert, Button, Input, Card, Col, Row, Space } from "antd";
+import { Alert, Button, Input, Card, Col, Popconfirm, Row, Space } from "antd";
 import { Icon, MarkdownInput, Tip } from "../../components";
 import { UserMap } from "../../todo-types";
 import { CourseActions } from "../actions";
@@ -65,14 +65,6 @@ interface HandoutProps {
   project_id: string;
 }
 
-// interface HandoutState {
-//   confirm_delete: boolean;
-//   copy_confirm: boolean;
-//   copy_confirm_handout: boolean;
-//   copy_handout_confirm_overwrite: boolean;
-//   copy_handout_confirm_overwrite_text: string;
-// }
-
 export function Handout({
   frame_id,
   name,
@@ -84,7 +76,6 @@ export function Handout({
   user_map,
   project_id,
 }: HandoutProps) {
-  const [confirm_delete, set_confirm_delete] = useState<boolean>(false);
   const [copy_confirm, set_copy_confirm] = useState<boolean>(false);
   const [copy_confirm_handout, set_copy_confirm_handout] =
     useState<boolean>(false);
@@ -420,36 +411,12 @@ export function Handout({
 
   function delete_handout(): void {
     actions.handouts.delete_handout(handout.get("handout_id"));
-    set_confirm_delete(false);
   }
 
   function undelete_handout(): void {
     actions.handouts.undelete_handout(handout.get("handout_id"));
   }
 
-  function render_confirm_delete() {
-    return (
-      <Alert
-        type="warning"
-        key="confirm_delete"
-        message={
-          <div>
-            Are you sure you want to delete this handout?
-            <br /> <br />
-            <Space>
-              <Button key="no" onClick={() => set_confirm_delete(false)}>
-                Cancel
-              </Button>
-              <Button key="yes" onClick={delete_handout} danger>
-                <Icon name="trash" /> Delete
-              </Button>
-            </Space>
-          </div>
-        }
-      />
-    );
-  }
-
   function render_delete_button() {
     if (handout.get("deleted")) {
       return (
@@ -466,20 +433,27 @@ export function Handout({
       );
     } else {
       return (
-        <Tip
+        <Popconfirm
           key="delete"
-          placement="left"
-          title="Delete handout"
-          tip="Deleting this handout removes it from the handout list and student grade lists, but does not delete any files off of disk.  You can always undelete an handout later by showing it using the 'show deleted handouts' button."
+          onConfirm={delete_handout}
+          title={
+            <div style={{ maxWidth: "400px" }}>
+              <b>
+                Are you sure you want to delete "
+                {trunc_middle(handout.get("path"), 24)}"?
+              </b>
+              <br />
+              This removes it from the handout list and student grade lists, but
+              does not delete any files off of disk. You can always undelete an
+              handout later by showing it using the 'show deleted handouts'
+              button.
+            </div>
+          }
         >
-          <Button
-            onClick={() => set_confirm_delete(true)}
-            disabled={confirm_delete}
-            style={outside_button_style}
-          >
+          <Button style={outside_button_style}>
             <Icon name="trash" /> Delete...
           </Button>
-        </Tip>
+        </Popconfirm>
       );
     }
   }
@@ -576,7 +550,6 @@ export function Handout({
           <Row>
             <span className="pull-right">{render_delete_button()}</span>
           </Row>
-          <Row>{confirm_delete ? render_confirm_delete() : undefined}</Row>
         </Col>
       </Row>
     );