From 35421e050eccb8371ee8e4aa41a5f3db2055f3bc Mon Sep 17 00:00:00 2001 From: drjoho <64442976+drjoho@users.noreply.github.com> Date: Tue, 1 Jun 2021 22:48:23 -0500 Subject: [PATCH 1/3] add modal to delete stored scans --- .../src/ts/devtools/Header.tsx | 52 ++++++++++++++++--- 1 file changed, 44 insertions(+), 8 deletions(-) diff --git a/accessibility-checker-extension/src/ts/devtools/Header.tsx b/accessibility-checker-extension/src/ts/devtools/Header.tsx index 122c16078..269b942a4 100644 --- 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 { - 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 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 return false; } } + + deleteModalHandler() { + this.setState({ + deleteModal: true, + }); + } @@ -231,8 +241,9 @@ export default class Header extends React.Component this.props.clearStoredScans(true) } + itemText="Delete stored scans" + // onClick={() => this.props.clearStoredScans(true) } + onClick={() => this.deleteModalHandler() } /> onClick={this.props.reportManagerHandler} // need to pass selected as scanType /> + { + 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} + > +

+ Are you sure you want to delete stored scans? + This action is irreversible. +

+ {/* {isLatestArchive ? "" : ( */}

From 34b9a7856a9f59ed5a5c476d0e9f679f597d906f Mon Sep 17 00:00:00 2001 From: drjoho <64442976+drjoho@users.noreply.github.com> Date: Thu, 3 Jun 2021 13:57:36 -0500 Subject: [PATCH 2/3] modal for deleting selected scans --- .../src/ts/devtools/ReportManagerTable.tsx | 44 ++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/accessibility-checker-extension/src/ts/devtools/ReportManagerTable.tsx b/accessibility-checker-extension/src/ts/devtools/ReportManagerTable.tsx index 18f76c95b..93dbc1481 100644 --- 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 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 @@ -286,6 +304,30 @@ export default class ReportManagerTable extends React.Component + { + 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} + > +

+ Are you sure you want to delete selected scans? + This action is irreversible. +

+ )} /> From 9bf3f76d19ed0404621071b7dbb1b1eb83fcc142 Mon Sep 17 00:00:00 2001 From: drjoho <64442976+drjoho@users.noreply.github.com> Date: Thu, 3 Jun 2021 14:38:42 -0500 Subject: [PATCH 3/3] Update ReportManagerTable.tsx --- .../src/ts/devtools/ReportManagerTable.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/accessibility-checker-extension/src/ts/devtools/ReportManagerTable.tsx b/accessibility-checker-extension/src/ts/devtools/ReportManagerTable.tsx index 93dbc1481..684e7ef82 100644 --- a/accessibility-checker-extension/src/ts/devtools/ReportManagerTable.tsx +++ b/accessibility-checker-extension/src/ts/devtools/ReportManagerTable.tsx @@ -307,6 +307,7 @@ export default class ReportManagerTable extends React.Component