feat(ui): add deletion prompt when deleting an active or archived recording

src/app/Archives/AllArchivedRecordingsTable.tsx

@@ -40,17 +40,19 @@ import { ArchivedRecording } from '@app/Shared/Services/Api.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { NotificationCategory } from '@app/Shared/Services/NotificationChannel.service';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { Button, Checkbox, Label, Text, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
+import { Button, Checkbox, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
 import { Tbody, Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { RecordingActions } from '@app/Recordings/RecordingActions';
 import { RecordingsTable } from '@app/Recordings/RecordingsTable';
 import { ReportFrame } from '@app/Recordings/ReportFrame';
 import { Observable, forkJoin, merge } from 'rxjs';
 import { first } from 'rxjs/operators';
-import { PlusIcon, UploadIcon } from '@patternfly/react-icons';
+import { UploadIcon } from '@patternfly/react-icons';
 import { ArchiveUploadModal } from './ArchiveUploadModal';
 import { parseLabels } from '@app/RecordingMetadata/RecordingLabel';
 import { LabelCell } from '@app/RecordingMetadata/LabelCell';
+import { DeleteWarningModal } from '@app/Modal/DeleteWarningModal';
+import { DeleteWarningType } from '@app/Modal/DeleteWarningUtils';
 
 export interface AllArchivedRecordingsTableProps { }
 
@@ -62,6 +64,7 @@ export const AllArchivedRecordingsTable: React.FunctionComponent<AllArchivedReco
   const [checkedIndices, setCheckedIndices] = React.useState([] as number[]);
   const [expandedRows, setExpandedRows] = React.useState([] as string[]);
   const [showUploadModal, setShowUploadModal] = React.useState(false);
+  const [warningModalOpen, setWarningModalOpen] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(false);
   const addSubscription = useSubscriptions();
 
@@ -237,13 +240,34 @@ export const AllArchivedRecordingsTable: React.FunctionComponent<AllArchivedReco
     );
   };
 
+  const handleDeleteButton = React.useCallback(() => {
+    if (context.settings.deletionDialogsEnabledFor(DeleteWarningType.DeleteArchivedRecordings)) {
+      setWarningModalOpen(true);
+    }
+    else {
+      handleDeleteRecordings();
+    }
+  }, [context, context.settings, setWarningModalOpen, handleDeleteRecordings])
+
+  const handleWarningModalClose = React.useCallback(() => {
+    setWarningModalOpen(false);
+  }, [setWarningModalOpen]);
+
   const RecordingsToolbar = () => {
+    const deleteArchivedWarningModal = React.useMemo(() => {
+      return <DeleteWarningModal 
+        warningType={DeleteWarningType.DeleteArchivedRecordings}
+        visible={warningModalOpen}
+        onAccept={handleDeleteRecordings}
+        onClose={handleWarningModalClose}
+      />
+    }, [recordings, checkedIndices]);
     return (
       <Toolbar id="archived-recordings-toolbar">
         <ToolbarContent>
           <ToolbarGroup variant="button-group">
             <ToolbarItem>
-              <Button variant="danger" onClick={handleDeleteRecordings} isDisabled={!checkedIndices.length}>Delete</Button>
+              <Button variant="danger" onClick={handleDeleteButton} isDisabled={!checkedIndices.length}>Delete</Button>
             </ToolbarItem>
           </ToolbarGroup>
           <ToolbarGroup variant="icon-button-group">
@@ -253,6 +277,7 @@ export const AllArchivedRecordingsTable: React.FunctionComponent<AllArchivedReco
                 </Button>
             </ToolbarItem>
           </ToolbarGroup>
+          { deleteArchivedWarningModal }
         </ToolbarContent>
       </Toolbar>
     );

src/app/Events/EventTemplates.tsx

@@ -42,12 +42,14 @@ import { NotificationCategory } from '@app/Shared/Services/NotificationChannel.s
 import { NO_TARGET } from '@app/Shared/Services/Target.service';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
 import { ActionGroup, Button, FileUpload, Form, FormGroup, Modal, ModalVariant, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, TextInput } from '@patternfly/react-core';
-import { PlusIcon, UploadIcon } from '@patternfly/react-icons';
+import { UploadIcon } from '@patternfly/react-icons';
 import { Table, TableBody, TableHeader, TableVariant, IAction, IRowData, IExtraData, ISortBy, SortByDirection, sortable } from '@patternfly/react-table';
 import { useHistory } from 'react-router-dom';
 import { concatMap, filter, first } from 'rxjs/operators';
 import { LoadingView } from '@app/LoadingView/LoadingView';
 import { ErrorView } from '@app/ErrorView/ErrorView';
+import { DeleteWarningType } from '@app/Modal/DeleteWarningUtils';
+import { DeleteWarningModal } from '@app/Modal/DeleteWarningModal';
 
 export const EventTemplates = () => {
   const context = React.useContext(ServiceContext);
@@ -56,6 +58,7 @@ export const EventTemplates = () => {
   const [templates, setTemplates] = React.useState([] as EventTemplate[]);
   const [filteredTemplates, setFilteredTemplates] = React.useState([] as EventTemplate[]);
   const [filterText, setFilterText] = React.useState('');
+  const [warningModalOpen, setWarningModalOpen] = React.useState(false);
   const [modalOpen, setModalOpen] = React.useState(false);
   const [uploadFile, setUploadFile] = React.useState(undefined as File | undefined);
   const [uploadFilename, setUploadFilename] = React.useState('');
@@ -64,6 +67,7 @@ export const EventTemplates = () => {
   const [sortBy, setSortBy] = React.useState({} as ISortBy);
   const [isLoading, setIsLoading] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState('');
+  const [rowDeleteData, setRowDeleteData] = React.useState({} as IRowData);
   const addSubscription = useSubscriptions();
 
   const tableColumns = [
@@ -155,7 +159,7 @@ export const EventTemplates = () => {
     () => filteredTemplates.map((t: EventTemplate) => ([ t.name, t.description, t.provider, t.type.charAt(0).toUpperCase() + t.type.slice(1).toLowerCase() ])),
     [filteredTemplates]
   );
-
+  
   const handleDelete = (rowData) => {
     addSubscription(
       context.api.deleteCustomEventTemplate(rowData[0])
@@ -191,7 +195,9 @@ export const EventTemplates = () => {
           },
           {
             title: 'Delete',
-            onClick: (event, rowId, rowData) => handleDelete(rowData)
+            onClick: (event, rowId, rowData) => {
+              handleDeleteButton(rowData);
+            },
           }
       ]);
     }
@@ -249,6 +255,24 @@ export const EventTemplates = () => {
     setSortBy({ index, direction });
   };
 
+  const handleDeleteButton = React.useCallback((rowData) => {
+    if (context.settings.deletionDialogsEnabledFor(DeleteWarningType.DeleteEventTemplates)) {
+      setRowDeleteData(rowData);
+      setWarningModalOpen(true);
+    }
+    else {
+      handleDelete(rowData);
+    }
+  }, [context, context.settings, setWarningModalOpen, setRowDeleteData, handleDelete]);
+
+  const handleWarningModalAccept = React.useCallback(() => {
+    handleDelete(rowDeleteData);
+  }, [handleDelete, rowDeleteData]);
+
+  const handleWarningModalClose = React.useCallback(() => {
+    setWarningModalOpen(false);
+  }, [setWarningModalOpen]);
+
   const toolbar: JSX.Element = (<>
     <Toolbar id="event-templates-toolbar">
       <ToolbarContent>
@@ -264,9 +288,15 @@ export const EventTemplates = () => {
             </Button>
           </ToolbarItem>
         </ToolbarGroup>
+        <DeleteWarningModal 
+          warningType={DeleteWarningType.DeleteEventTemplates}
+          visible={warningModalOpen}
+          onAccept={handleWarningModalAccept}
+          onClose={handleWarningModalClose} />
       </ToolbarContent>
     </Toolbar>
   </>);
+
   if (errorMessage != '') {
     return (<ErrorView message={errorMessage}/>);
   } else if (isLoading) {

src/app/Modal/DeleteWarningModal.tsx

@@ -0,0 +1,95 @@
+/*
+ * Copyright The Cryostat Authors
+ *
+ * The Universal Permissive License (UPL), Version 1.0
+ *
+ * Subject to the condition set forth below, permission is hereby granted to any
+ * person obtaining a copy of this software, associated documentation and/or data
+ * (collectively the "Software"), free of charge and under any and all copyright
+ * rights in the Software, and any and all patent rights owned or freely
+ * licensable by each licensor hereunder covering either (i) the unmodified
+ * Software as contributed to or provided by such licensor, or (ii) the Larger
+ * Works (as defined below), to deal in both
+ *
+ * (a) the Software, and
+ * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
+ * one is included with the Software (each a "Larger Work" to which the Software
+ * is contributed by such licensors),
+ *
+ * without restriction, including without limitation the rights to copy, create
+ * derivative works of, display, perform, and distribute the Software and make,
+ * use, sell, offer for sale, import, export, have made, and have sold the
+ * Software and the Larger Work(s), and to sublicense the foregoing rights on
+ * either these or other terms.
+ *
+ * This license is subject to the following condition:
+ * The above copyright notice and either this complete permission notice or at
+ * a minimum a reference to the UPL must be included in all copies or
+ * substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import * as React from 'react';
+import { Modal, ModalVariant, Button, Checkbox, Stack, Split } from '@patternfly/react-core';
+import { DeleteWarningType, getFromWarningMap } from './DeleteWarningUtils';
+import { useState } from 'react';
+import { ServiceContext } from '@app/Shared/Services/Services';
+
+export interface DeleteWarningProps {
+  warningType: DeleteWarningType;
+  visible: boolean;
+  onAccept: () => void;
+  onClose: () => void;
+}
+
+export const DeleteWarningModal = ({ warningType, visible, onAccept, onClose }: DeleteWarningProps): JSX.Element => {
+  const context = React.useContext(ServiceContext);
+  const [doNotAsk, setDoNotAsk] = useState(false);
+
+  const realWarningType = getFromWarningMap(warningType);
+
+  const onAcceptClose = React.useCallback(() => {
+    onAccept();
+    onClose();
+    if (doNotAsk && !!realWarningType) {
+        context.settings.setDeletionDialogsEnabledFor(realWarningType.id, false);
+    }
+  }, [onAccept, onClose, doNotAsk, context, context.settings]);
+
+  return (
+    <Modal
+      title={`${realWarningType?.title}`}
+      description={realWarningType?.description}
+      aria-label={realWarningType?.ariaLabel}
+      titleIconVariant="warning"
+      variant={ModalVariant.medium}
+      isOpen={visible}
+      showClose
+      onClose={onClose}
+      actions={[  
+        <Stack hasGutter key="modal-footer-stack">
+          <Split key="modal-footer-split">
+            <Button variant="danger" onClick={onAcceptClose}>
+              Delete
+            </Button>
+            <Button variant="link" onClick={onClose}>
+              Cancel
+            </Button>
+          </Split>
+        </Stack> 
+      ]}
+    >
+      <Checkbox id="do-not-ask-enabled" 
+        label="Don't ask me again" 
+        isChecked={doNotAsk} 
+        onChange={setDoNotAsk}
+      />
+    </Modal>  
+  );
+};

src/app/Modal/DeleteWarningUtils.tsx

@@ -0,0 +1,105 @@
+/*
+ * Copyright The Cryostat Authors
+ *
+ * The Universal Permissive License (UPL), Version 1.0
+ *
+ * Subject to the condition set forth below, permission is hereby granted to any
+ * person obtaining a copy of this software, associated documentation and/or data
+ * (collectively the "Software"), free of charge and under any and all copyright
+ * rights in the Software, and any and all patent rights owned or freely
+ * licensable by each licensor hereunder covering either (i) the unmodified
+ * Software as contributed to or provided by such licensor, or (ii) the Larger
+ * Works (as defined below), to deal in both
+ *
+ * (a) the Software, and
+ * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
+ * one is included with the Software (each a "Larger Work" to which the Software
+ * is contributed by such licensors),
+ *
+ * without restriction, including without limitation the rights to copy, create
+ * derivative works of, display, perform, and distribute the Software and make,
+ * use, sell, offer for sale, import, export, have made, and have sold the
+ * Software and the Larger Work(s), and to sublicense the foregoing rights on
+ * either these or other terms.
+ *
+ * This license is subject to the following condition:
+ * The above copyright notice and either this complete permission notice or at
+ * a minimum a reference to the UPL must be included in all copies or
+ * substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export enum DeleteWarningType {
+    DeleteActiveRecordings='DeleteActiveRecordings',
+    DeleteArchivedRecordings='DeleteArchivedRecordings',
+    DeleteAutomatedRules='DeleteAutomatedRules',
+    DeleteEventTemplates='DeleteEventTemplates',
+    DeleteJMXCredentials='DeleteJMXCredentials',
+}
+
+export interface DeleteWarning {
+    id: DeleteWarningType;
+    title: string;
+    label: string;
+    description: string;
+    ariaLabel: string;
+}
+
+export const DeleteActiveRecordings: DeleteWarning = {
+    id: DeleteWarningType.DeleteActiveRecordings,
+    title: 'Permanently delete Active Recording?',
+    label: 'Delete Active Recording',
+    description: `Recording and report data will be lost.`,
+    ariaLabel: "Recording delete warning"
+}
+
+export const DeleteArchivedRecordings: DeleteWarning = {
+    id: DeleteWarningType.DeleteArchivedRecordings,
+    title: 'Permanently delete Archived Recording?',
+    label: 'Delete Archived Recording',
+    description: `Recording and report data will be lost.`,
+    ariaLabel: "Recording delete warning"
+}
+
+export const DeleteAutomatedRules: DeleteWarning = {
+    id: DeleteWarningType.DeleteAutomatedRules,
+    title: 'Permanently delete Automated Rule?',
+    label: 'Delete Automated Rule',
+    description: `Rule data will be lost.`,
+    ariaLabel: "Automated rule delete warning"
+}
+
+export const DeleteEventTemplates: DeleteWarning = {
+    id: DeleteWarningType.DeleteEventTemplates,
+    title: 'Permanently delete Event Template?',
+    label: 'Delete Event Template',
+    description: `Custom event template data will be lost.`,
+    ariaLabel: "Event template delete warning"
+}
+
+export const DeleteJMXCredentials: DeleteWarning = {
+    id: DeleteWarningType.DeleteJMXCredentials,
+    title: 'Permanently delete JMX Credentials?',
+    label: 'Delete JMX Credentials',
+    description: `Credential data for this target will be lost.`,
+    ariaLabel: "JMX Credentials delete warning"
+}
+
+export const DeleteWarningKinds : DeleteWarning[] = [
+    DeleteActiveRecordings,
+    DeleteArchivedRecordings,
+    DeleteAutomatedRules,
+    DeleteEventTemplates,
+    DeleteJMXCredentials
+];
+
+export const getFromWarningMap = (warning: DeleteWarningType): DeleteWarning | undefined => {
+    const wt = DeleteWarningKinds.find(t => t.id === warning);
+    return wt;
+}