Merge pull request #443 from IBMa/joho-3092-delete-modals

Joho 3092 delete modals
IBMa · Jun 3, 2021 · eba85ee · eba85ee
2 parents ef7b110 + ee163c6
commit eba85ee
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 9 deletions.
diff --git a/accessibility-checker-extension/src/ts/devtools/Header.tsx b/accessibility-checker-extension/src/ts/devtools/Header.tsx
@@ -19,7 +19,7 @@ import React from "react";
 import ReactTooltip from "react-tooltip";
 
 import {
-    Button, Checkbox, ContentSwitcher, Switch, Tooltip, OverflowMenu, OverflowMenuItem
+    Button, Checkbox, ContentSwitcher, Switch, Tooltip, OverflowMenu, OverflowMenuItem, Modal
 } from 'carbon-components-react';
 import { settings } from 'carbon-components';
 import { ReportData16, Renew16, ChevronDown16 } from '@carbon/icons-react';
@@ -32,7 +32,9 @@ import NeedsReview16 from "../../assets/NeedsReview16.svg";
 import Recommendation16 from "../../assets/Recommendation16.svg";
 
 const { prefix } = settings;
-interface IHeaderState { }
+interface IHeaderState {
+    deleteModal: boolean
+ }
 
 interface IHeaderProps {
     layout: "main" | "sub",
@@ -82,7 +84,9 @@ interface IHeaderProps {
 }
 
 export default class Header extends React.Component<IHeaderProps, IHeaderState> {
-    state: IHeaderState = {};
+    state: IHeaderState = {
+        deleteModal: false
+     };
 
     processFilterCheckBoxes(value: boolean, id: string) {
         // console.log("In processFilterCheckBoxes - dataFromParent", this.props.dataFromParent);
@@ -97,15 +101,15 @@ export default class Header extends React.Component<IHeaderProps, IHeaderState>
         if (newItems[1] == true && newItems[2] == true && newItems[3] == true) {
             // console.log("All true");
             newItems[0] = true;
-            this.setState({ showIssueTypeFilter: newItems });
+            // this.setState({ showIssueTypeFilter: newItems });
         } else if (newItems[1] == false && newItems[2] == false && newItems[3] == false) {
             // console.log("All false");
             newItems[0] = true;
-            this.setState({ showIssueTypeFilter: newItems });
+            // this.setState({ showIssueTypeFilter: newItems });
         } else {
             // console.log("Mixed");
             newItems[0] = false;
-            this.setState({ showIssueTypeFilter: newItems });
+            // this.setState({ showIssueTypeFilter: newItems });
         }
         // console.log("After process: ", newItems);
         this.props.showIssueTypeCheckBoxCallback(newItems);
@@ -138,6 +142,12 @@ export default class Header extends React.Component<IHeaderProps, IHeaderState>
             return false;
         }
     }
+
+    deleteModalHandler() {
+        this.setState({ 
+            deleteModal: true, 
+        });
+    }
 
 
 
@@ -231,8 +241,9 @@ export default class Header extends React.Component<IHeaderProps, IHeaderState>
                             <OverflowMenuItem 
                                 style={{maxWidth:"13rem", width:"13rem"}}
                                 disabled={this.props.actualStoredScansCount() == 0 ? true : false}
-                                itemText="Clear stored scans" 
-                                onClick={() => this.props.clearStoredScans(true) }
+                                itemText="Delete stored scans" 
+                                // onClick={() => this.props.clearStoredScans(true) }
+                                onClick={() => this.deleteModalHandler() }
                             />
                             <OverflowMenuItem 
                                 style={{maxWidth:"13rem", width:"13rem"}}
@@ -247,6 +258,31 @@ export default class Header extends React.Component<IHeaderProps, IHeaderState>
                                 onClick={this.props.reportManagerHandler} // need to pass selected as scanType
                             />
                         </OverflowMenu>
+                        <Modal
+                            aria-label="Delete stored scans"
+                            modalHeading="Delete stored scans"
+                            open={this.state.deleteModal}
+                            shouldSubmitOnEnter={false}
+                            onRequestClose={(() => {
+                                this.setState({ deleteModal: false });
+                            }).bind(this)}
+                            onRequestSubmit={(() => {
+                                this.setState({ deleteModal: false });
+                                this.props.clearStoredScans(true);
+                            }).bind(this)}
+                            danger={true}
+                            size='sm'
+                            selectorPrimaryFocus=".bx--modal-footer .bx--btn--secondary"
+                            primaryButtonText="Delete"
+                            secondaryButtonText="Cancel"
+                            primaryButtonDisabled={false}
+                            preventCloseOnClickOutside={true}
+                        >
+                            <p style={{ marginBottom: '1rem' }}>
+                                Are you sure you want to delete stored scans?
+                                This action is irreversible.
+                            </p>
+                        </Modal>
                         {/* {isLatestArchive ? "" : ( */}
                             <Tooltip iconDescription="Ruleset info">
                                 <p id="tooltip-body">

diff --git a/accessibility-checker-extension/src/ts/devtools/ReportManagerTable.tsx b/accessibility-checker-extension/src/ts/devtools/ReportManagerTable.tsx
@@ -20,6 +20,8 @@ interface IReportManagerTableState {
     pageTitle: string,
     date: string,
     userScanLabel: string,
+    deleteModal: boolean,
+    deleteModalSelectedRows: any
 }
 
 interface IReportManagerTableProps {
@@ -66,6 +68,8 @@ export default class ReportManagerTable extends React.Component<IReportManagerTa
         pageTitle: "",
         date: "",
         userScanLabel: "",
+        deleteModal: false,
+        deleteModalSelectedRows: null
     };
 
     format_date(timestamp: string) {
@@ -139,6 +143,12 @@ export default class ReportManagerTable extends React.Component<IReportManagerTa
         });
     }
 
+    deleteModalHandler() {
+        this.setState({ 
+            deleteModal: true, 
+        });
+    }
+
     render() {
 
         const headers = [
@@ -220,7 +230,15 @@ export default class ReportManagerTable extends React.Component<IReportManagerTa
                                     <TableBatchAction
                                         tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
                                         renderIcon={Delete16}
-                                        onClick={() => this.deleteSelected(selectedRows)}
+                                        //onClick={() => this.deleteSelected(selectedRows)}
+                                        onClick={(() => {
+                                            this.setState({ deleteModalSelectedRows: selectedRows });
+                                            this.deleteModalHandler();
+                                            // console.log(selectedRows);
+                                            // console.log(typeof selectedRows);
+                                            // this.deleteSelected(selectedRows);
+                                            // this.props.clearStoredScans(true);
+                                        }).bind(this)}
                                     >
                                         Delete
                                     </TableBatchAction>
@@ -286,6 +304,31 @@ export default class ReportManagerTable extends React.Component<IReportManagerTa
                                     </div>
                                 </div>
                             </Modal>
+                            <Modal 
+                                aria-label="Delete stored scans"
+                                modalHeading="Delete stored scans"
+                                size='sm'
+                                danger={true}
+                                open={this.state.deleteModal}
+                                shouldSubmitOnEnter={false}
+                                onRequestClose={(() => {
+                                    this.setState({ deleteModal: false });
+                                }).bind(this)}
+                                onRequestSubmit={(() => {
+                                    this.setState({ deleteModal: false });
+                                    this.deleteSelected(this.state.deleteModalSelectedRows);
+                                }).bind(this)}
+                                selectorPrimaryFocus=".bx--modal-footer .bx--btn--secondary"
+                                primaryButtonText="Delete"
+                                secondaryButtonText="Cancel"
+                                primaryButtonDisabled={false}
+                                preventCloseOnClickOutside={true}
+                            >
+                                <p style={{ marginBottom: '1rem' }}>
+                                    Are you sure you want to delete selected scans?
+                                    This action is irreversible.
+                                </p>
+                            </Modal>
                             </React.Fragment>
                         )}
                         />