Custom Reports: Confirm delete report (#2521)

* confirm delete report

* notes

* card confirm

packages/desktop-client/src/components/reports/SaveReport.tsx

@@ -10,6 +10,7 @@ import { Text } from '../common/Text';
 import { View } from '../common/View';
 
 import { SaveReportChoose } from './SaveReportChoose';
+import { SaveReportDelete } from './SaveReportDelete';
 import { SaveReportMenu } from './SaveReportMenu';
 import { SaveReportName } from './SaveReportName';
 
@@ -33,6 +34,7 @@ export function SaveReport({
   onReportChange,
 }: SaveReportProps) {
   const listReports = useReports();
+  const [deleteMenuOpen, setDeleteMenuOpen] = useState(false);
   const [nameMenuOpen, setNameMenuOpen] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
   const [chooseMenuOpen, setChooseMenuOpen] = useState(false);
@@ -97,6 +99,13 @@ export function SaveReport({
     });
   };
 
+  const onDelete = async () => {
+    setName('');
+    await send('report/delete', report.id);
+    onReportChange({ type: 'reset' });
+    setDeleteMenuOpen(false);
+  };
+
   const onMenuSelect = async (item: string) => {
     setMenuItem(item);
     switch (item) {
@@ -107,9 +116,7 @@ export function SaveReport({
         break;
       case 'delete-report':
         setMenuOpen(false);
-        setName('');
-        await send('report/delete', report.id);
-        onReportChange({ type: 'reset' });
+        setDeleteMenuOpen(true);
         break;
       case 'update-report':
         setErr('');
@@ -191,6 +198,13 @@ export function SaveReport({
           onClose={() => setChooseMenuOpen(false)}
         />
       )}
+      {deleteMenuOpen && (
+        <SaveReportDelete
+          onDelete={onDelete}
+          onClose={() => setDeleteMenuOpen(false)}
+          name={report.name}
+        />
+      )}
     </View>
   );
 }

packages/desktop-client/src/components/reports/SaveReportDelete.tsx

+import React from 'react';
+
+import { theme } from '../../style/theme';
+import { Button } from '../common/Button';
+import { Stack } from '../common/Stack';
+import { Text } from '../common/Text';
+import { View } from '../common/View';
+import { Tooltip } from '../tooltips';
+
+type SaveReportDeleteProps = {
+  onDelete: () => void;
+  onClose: () => void;
+  name: string;
+};
+
+export function SaveReportDelete({
+  onDelete,
+  onClose,
+  name,
+}: SaveReportDeleteProps) {
+  return (
+    <Tooltip
+      position="bottom-right"
+      style={{ padding: 15, color: theme.menuItemText }}
+      width={275}
+      onClose={onClose}
+    >
+      <View style={{ align: 'center' }}>
+        <Text style={{ color: theme.errorText, marginBottom: 5 }}>
+          Do you want to delete report:
+        </Text>
+        <View>{name}</View>
+      </View>
+
+      <Stack
+        direction="row"
+        justify="flex-end"
+        align="center"
+        style={{ marginTop: 15 }}
+      >
+        <View style={{ flex: 1 }} />
+        <Button type="primary" onClick={onDelete}>
+          Yes
+        </Button>
+        <Button type="primary" onClick={onClose}>
+          No
+        </Button>
+      </Stack>
+    </Tooltip>
+  );
+}

packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx

@@ -16,6 +16,7 @@ import { Text } from '../../common/Text';
 import { View } from '../../common/View';
 import { DateRange } from '../DateRange';
 import { ReportCard } from '../ReportCard';
+import { SaveReportDelete } from '../SaveReportDelete';
 import { SaveReportName } from '../SaveReportName';
 
 import { GetCardData } from './GetCardData';
@@ -66,6 +67,7 @@ export function CustomReportListCards({
 }) {
   const result: { [key: string]: boolean }[] = index(reports);
   const [reportMenu, setReportMenu] = useState(result);
+  const [deleteMenuOpen, setDeleteMenuOpen] = useState(result);
   const [nameMenuOpen, setNameMenuOpen] = useState(result);
   const [err, setErr] = useState('');
   const [name, setName] = useState('');
@@ -77,6 +79,12 @@ export function CustomReportListCards({
 
   const [isCardHovered, setIsCardHovered] = useState('');
 
+  const onDelete = async (reportData: string) => {
+    setName('');
+    await send('report/delete', reportData);
+    onDeleteMenuOpen(reportData === undefined ? '' : reportData, false);
+  };
+
   const onAddUpdate = async ({
     reportData,
   }: {
@@ -105,7 +113,8 @@ export function CustomReportListCards({
   const onMenuSelect = async (item: string, report: CustomReportEntity) => {
     if (item === 'delete') {
       onMenuOpen(report.id, false);
-      await send('report/delete', report.id);
+      onDeleteMenuOpen(report.id, true);
+      setErr('');
     }
     if (item === 'rename') {
       onMenuOpen(report.id, false);
@@ -119,6 +128,10 @@ export function CustomReportListCards({
     setReportMenu({ ...reportMenu, [item]: state });
   };
 
+  const onDeleteMenuOpen = (item: string, state: boolean) => {
+    setDeleteMenuOpen({ ...deleteMenuOpen, [item]: state });
+  };
+
   const onNameMenuOpen = (item: string, state: boolean) => {
     setNameMenuOpen({ ...nameMenuOpen, [item]: state });
   };
@@ -257,6 +270,22 @@ export function CustomReportListCards({
                           report={report}
                         />
                       )}
+                  {report.id === undefined
+                    ? null
+                    : deleteMenuOpen[
+                        report.id as keyof typeof deleteMenuOpen
+                      ] && (
+                        <SaveReportDelete
+                          onDelete={() => onDelete(report.id)}
+                          onClose={() =>
+                            onDeleteMenuOpen(
+                              report.id === undefined ? '' : report.id,
+                              false,
+                            )
+                          }
+                          name={report.name}
+                        />
+                      )}
                 </View>
               </View>
             ))}

upcoming-release-notes/2521.md

+---
+category: Enhancements
+authors: [carkom]
+---
+
+A simple delete confirmation for custom reports.