Various enhancements, show settings on export dialog

prathercc · Feb 1, 2025 · 26a75cf · 26a75cf
1 parent e482490
commit 26a75cf
Show file tree

Hide file tree

Showing 14 changed files with 194 additions and 63 deletions.
diff --git a/src/common-components/enhanced-dialog/enhanced-dialog-title.tsx b/src/common-components/enhanced-dialog/enhanced-dialog-title.tsx
@@ -0,0 +1,30 @@
+import { DialogTitle, IconButton } from "@mui/material";
+
+import CloseIcon from "@mui/icons-material/Close";
+
+type EnhancedDialogTitleProps = {
+  title: string;
+  onClose: () => void;
+};
+
+const EnhancedDialogTitle = ({ title, onClose }: EnhancedDialogTitleProps) => {
+  return (
+    <>
+      <DialogTitle sx={{ padding: "10px 24px 0px 24px" }}>{title}</DialogTitle>
+      <IconButton
+        size="small"
+        onClick={onClose}
+        sx={(theme) => ({
+          position: "absolute",
+          right: 8,
+          top: 8,
+          color: theme.palette.grey[500],
+        })}
+      >
+        <CloseIcon />
+      </IconButton>
+    </>
+  );
+};
+
+export default EnhancedDialogTitle;
diff --git a/src/common-components/enhanced-tabs/enhanced-tabs.tsx b/src/common-components/enhanced-tabs/enhanced-tabs.tsx
@@ -17,10 +17,11 @@ const EnhancedTabs = ({ tabs }: EnhancedTabsProps) => {
     <Box sx={{ width: "100%" }}>
       <AppBar position="static" sx={{ marginBottom: theme.spacing(1) }}>
         <Tabs
-          variant="fullWidth"
           value={selectedTabIndex}
           onChange={(_, idx) => setSelectedTabIndex(idx)}
           centered
+          variant="scrollable"
+          scrollButtons="auto"
         >
           {tabs.map((tab) => (
             <Tab disabled={!!tab.disabled} label={tab.label} />

diff --git a/src/components/cancel-button.tsx b/src/components/cancel-button.tsx
@@ -1,12 +1,17 @@
-import { Button } from "@mui/material";
+import { Button, SxProps } from "@mui/material";
 import { useAppSlice } from "../features/app/use-app-slice";
 
 type CancelButtonProps = {
   disabled?: boolean;
   onCancel?: () => void;
+  sx?: SxProps;
 };
 
-const CancelButton = ({ onCancel, disabled = false }: CancelButtonProps) => {
+const CancelButton = ({
+  onCancel,
+  disabled = false,
+  sx = {},
+}: CancelButtonProps) => {
   const {
     state: appState,
     setDiscrubCancelled,
@@ -29,6 +34,7 @@ const CancelButton = ({ onCancel, disabled = false }: CancelButtonProps) => {
       color="secondary"
       variant="contained"
       onClick={handleCancel}
+      sx={{ ...sx }}
     >
       Cancel
     </Button>

diff --git a/src/containers/export-button/components/bulk-content.tsx b/src/containers/export-button/components/bulk-content.tsx
@@ -13,6 +13,10 @@ import { DiscrubSetting } from "../../../enum/discrub-setting";
 import EnhancedTabs, {
   EnhancedTab,
 } from "../../../common-components/enhanced-tabs/enhanced-tabs.tsx";
+import SearchCriteria, {
+  defaultCriteria,
+  SearchCriteriaComponentType,
+} from "../../search-criteria/search-criteria.tsx";
 
 type BulkContentProps = {
   isDm?: boolean;
@@ -93,7 +97,7 @@ const BulkContent = ({
   }
 
   const channelSelectionTab: EnhancedTab = {
-    label: "Channel Selection",
+    label: "Channels",
     getComponent: () => (
       <>
         <DialogContentText>
@@ -116,13 +120,47 @@ const BulkContent = ({
       </>
     ),
   };
+
+  const criteriaTab: EnhancedTab = {
+    label: "Criteria",
+    getComponent: () => (
+      <SearchCriteria
+        isDm={isDm}
+        componentType={SearchCriteriaComponentType.Form}
+        visibleCriteria={defaultCriteria}
+      />
+    ),
+  };
+
   const configurationTab: EnhancedTab = {
     label: "Configuration",
     getComponent: () =>
       getExportSettings(onChangeSettings, visibleSettings, settings),
   };
-  const guildTabs: EnhancedTab[] = [channelSelectionTab, configurationTab];
-  const dmTabs: EnhancedTab[] = [configurationTab];
+
+  const settingsTab: EnhancedTab = {
+    label: "Settings",
+    getComponent: () =>
+      getExportSettings(
+        onChangeSettings,
+        [
+          DiscrubSetting.RANDOM_SEARCH_DELAY,
+          DiscrubSetting.APP_USER_DATA_REFRESH_RATE,
+          DiscrubSetting.REACTIONS_ENABLED,
+          DiscrubSetting.DISPLAY_NAME_LOOKUP,
+          ...(isDm ? [] : [DiscrubSetting.SERVER_NICKNAME_LOOKUP]),
+        ],
+        settings,
+      ),
+  };
+
+  const guildTabs: EnhancedTab[] = [
+    channelSelectionTab,
+    configurationTab,
+    settingsTab,
+    criteriaTab,
+  ];
+  const dmTabs: EnhancedTab[] = [configurationTab, settingsTab, criteriaTab];
 
   return (
     <DialogContent>

diff --git a/src/containers/export-button/components/export-modal.tsx b/src/containers/export-button/components/export-modal.tsx
@@ -1,7 +1,8 @@
-import { Dialog, DialogTitle } from "@mui/material";
+import { Dialog } from "@mui/material";
 import { ExportType } from "../../../enum/export-type";
 import ExportModalActions from "./export-modal-actions";
 import React from "react";
+import EnhancedDialogTitle from "../../../common-components/enhanced-dialog/enhanced-dialog-title.tsx";
 
 type ExportModalProps = {
   handleExportSelected: (val: ExportType) => void;
@@ -27,10 +28,10 @@ const ExportModal = ({
   return (
     <Dialog
       hideBackdrop
-      PaperProps={{ sx: { minWidth: "500px" } }}
+      PaperProps={{ sx: { minWidth: "500px", minHeight: "500px" } }}
       open={dialogOpen}
     >
-      <DialogTitle>{dialogTitle}</DialogTitle>
+      <EnhancedDialogTitle title={dialogTitle} onClose={onCancel} />
       {ContentComponent}
       <ExportModalActions
         handleExportSelected={handleExportSelected}

diff --git a/src/containers/export-button/export-button.tsx b/src/containers/export-button/export-button.tsx
@@ -121,7 +121,10 @@ const ExportButton = ({
       setSelectedExportChannels([]);
     }
     setDiscrubPaused(false);
-    setDialogOpen(false);
+
+    if (!(isGenerating || isExporting)) {
+      setDialogOpen(false);
+    }
   };
 
   const handleExportSelected = async (format: ExportType = ExportType.JSON) => {

diff --git a/src/containers/purge-button/components/purge-content.tsx b/src/containers/purge-button/components/purge-content.tsx
@@ -16,19 +16,15 @@ import { useGuildSlice } from "../../../features/guild/use-guild-slice.ts";
 type PurgeContentProps = {
   isDm?: boolean;
   purgedMessages: PurgedMessage[];
-  handleClose: () => void;
+  handleCancel: () => void;
 };
 
 const PurgeContent = ({
   isDm,
   purgedMessages,
-  handleClose,
+  handleCancel,
 }: PurgeContentProps) => {
-  const {
-    state: appState,
-    setDiscrubCancelled,
-    setDiscrubPaused,
-  } = useAppSlice();
+  const { state: appState } = useAppSlice();
   const task = appState.task();
   const { active, entity } = task;
 
@@ -43,18 +39,6 @@ const PurgeContent = ({
 
   const { purge } = usePurgeSlice();
 
-  const handleCancel = async () => {
-    if (!!entity || active) {
-      // We are actively deleting, we need to send a cancel request
-      setDiscrubCancelled(true);
-    }
-
-    setDiscrubPaused(false);
-    if (!active) {
-      handleClose();
-    }
-  };
-
   const handlePurge = () => {
     if (isDm && !!selectedDms.length) {
       purge([...selectedDms]);

diff --git a/src/containers/purge-button/components/purge-message.tsx b/src/containers/purge-button/components/purge-message.tsx
@@ -4,12 +4,13 @@ import MessageMock from "../../message-mock/message-mock.tsx";
 import PurgeMessageStatus, {
   PURGE_MESSAGE_STATUS_ID,
 } from "./purge-message-status.tsx";
-import { AppTaskMessage } from "../../../features/app/app-types.ts";
+import { AppTaskStatus } from "../../../features/app/app-types.ts";
 import { PurgeStatus } from "../../../features/purge/purge-types.ts";
+import Message from "../../../classes/message.ts";
 
 type PurgeMessageProps = {
   style: React.CSSProperties;
-  message: AppTaskMessage;
+  message: Message & AppTaskStatus;
 };
 
 const PurgeMessage = ({ style, message }: PurgeMessageProps) => {

diff --git a/src/containers/purge-button/components/purge-modal.tsx b/src/containers/purge-button/components/purge-modal.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Dialog, DialogContent, DialogTitle } from "@mui/material";
+import { Dialog, DialogContent } from "@mui/material";
 import { useAppSlice } from "../../../features/app/use-app-slice";
 import EnhancedTabs, {
   EnhancedTab,
@@ -13,6 +13,9 @@ import Message from "../../../classes/message.ts";
 import { isMessage } from "../../../app/guards.ts";
 import PurgeStatusHeader from "./purge-status-header.tsx";
 import { useMessageSlice } from "../../../features/message/use-message-slice.ts";
+import Config from "../../discrub-dialog/components/config.tsx";
+import { DiscrubSetting } from "../../../enum/discrub-setting.ts";
+import EnhancedDialogTitle from "../../../common-components/enhanced-dialog/enhanced-dialog-title.tsx";
 
 type PurgeModalProps = {
   dialogOpen: boolean;
@@ -39,13 +42,33 @@ const PurgeModal = ({
     PurgeInstruction.AWAITING_INSTRUCTION,
   );
   const [purgedMessages, setPurgedMessages] = useState<PurgedMessage[]>([]);
-  const { state: appState, resetModify, setIsModifying } = useAppSlice();
+  const {
+    state: appState,
+    resetModify,
+    setIsModifying,
+    setSettings,
+    setDiscrubCancelled,
+    setDiscrubPaused,
+  } = useAppSlice();
+  const settings = appState.settings();
   const isPaused = appState.discrubPaused();
   const task = appState.task();
   const { active, entity } = task;
-  const total = isMessage(entity) ? Number(entity?._total) : 0;
+  const total = Number(entity?._total);
+  const offset = Number(entity?._offset);
 
-  const handleClose = () => setDialogOpen(false);
+  const handleCancel = () => {
+    if (!!entity || active) {
+      // We are actively deleting, we need to send a cancel request
+      setDiscrubCancelled(true);
+    }
+
+    setDiscrubPaused(false);
+
+    if (!active) {
+      setDialogOpen(false);
+    }
+  };
 
   useEffect(() => {
     if (dialogOpen) {
@@ -60,7 +83,7 @@ const PurgeModal = ({
   }, [dialogOpen]);
 
   useEffect(() => {
-    if (active && !entity) {
+    if (active && !isMessage(entity)) {
       setPurgeInstruction(PurgeInstruction.SEARCHING);
     } else if (active && isMessage(entity)) {
       setPurgeInstruction(PurgeInstruction.PURGING);
@@ -92,37 +115,55 @@ const PurgeModal = ({
       />
     ),
   };
+
+  const settingsTab: EnhancedTab = {
+    label: "Settings",
+    disabled: active,
+    getComponent: () => (
+      <Config
+        settings={settings}
+        visibleSettings={[
+          DiscrubSetting.RANDOM_DELETE_DELAY,
+          DiscrubSetting.RANDOM_SEARCH_DELAY,
+        ]}
+        onChangeSettings={setSettings}
+      />
+    ),
+  };
+
   const purgeTab: EnhancedTab = {
     label: "Purge",
     getComponent: () => (
       <PurgeContent
         purgedMessages={purgedMessages}
         isDm={isDm}
-        handleClose={handleClose}
+        handleCancel={handleCancel}
       />
     ),
   };
-  const tabs: EnhancedTab[] = [criteriaTab, purgeTab];
+  const tabs: EnhancedTab[] = [criteriaTab, settingsTab, purgeTab];
 
   return (
     <Dialog
-      onClose={active ? () => {} : handleClose}
+      PaperProps={{ sx: { minWidth: "500px", minHeight: "500px" } }}
       hideBackdrop
       open={dialogOpen}
     >
-      <DialogTitle>Purge Messages</DialogTitle>
+      <EnhancedDialogTitle title="Purge Messages" onClose={handleCancel} />
       <DialogContent
         sx={{
           display: "flex",
           flexDirection: "column",
-          justifyContent: "center",
+          justifyContent: "flex-start",
+          gap: 1,
           alignItems: "center",
         }}
       >
         <PurgeStatusHeader
           isPaused={isPaused}
           purgeInstruction={purgeInstruction}
           total={total}
+          offset={offset}
         />
         <EnhancedTabs tabs={tabs} />
       </DialogContent>

diff --git a/src/containers/purge-button/components/purge-status-header.tsx b/src/containers/purge-button/components/purge-status-header.tsx
@@ -11,17 +11,19 @@ import "../css/purge-status-header.css";
 type PurgeStatusHeaderProps = {
   purgeInstruction: PurgeInstruction;
   total: number;
+  offset: number;
   isPaused: boolean;
 };
 
 const PurgeStatusHeader = ({
   purgeInstruction,
   total,
+  offset,
   isPaused,
 }: PurgeStatusHeaderProps) => {
   const map = {
     [PurgeInstruction.PURGING]: {
-      message: `Messages Remaining: ~${total}`,
+      message: `Messages Remaining: ${total}`,
       getIcon: () => <ConstructionIcon />,
     },
     [PurgeInstruction.AWAITING_INSTRUCTION]: {
@@ -33,7 +35,7 @@ const PurgeStatusHeader = ({
       getIcon: () => <CleanHandsIcon />,
     },
     [PurgeInstruction.SEARCHING]: {
-      message: purgeInstruction,
+      message: `Searching - ${offset} / ${total}`,
       getIcon: () => <SearchIcon />,
     },
   };