feat(scans):discovery-76 adds delete functionality (#208)

*locale, delete scan strings
*scansService, fix deleteScan func
*scansActions, add deleteScan action
*scansConstants, delete scan constants
*scansReducer, delete scan state
*scansContext, delete scan hook
*scans, delete scans props
*scansTableCells, delete button

public/locales/en.json

@@ -25,6 +25,8 @@
     "confirmation_heading_add-source_exit": "Are you sure you want to exit this wizard?",
     "confirmation_title_add-source_exit": "Exit Wizard",
     "confirmation_heading_add-scan": " Are you sure you want to cancel this scan?",
+    "confirmation_title_delete-scan": "Delete Scan",
+    "confirmation_heading_delete-scan": "Are you sure you want to delete the scan <0>{{name}}</0>?",
     "confirmation_heading_delete-credential": "Are you sure you want to delete the credential <0>{{name}}</0>?",
     "confirmation_heading_delete-credential_other": "Are you sure you want to delete the following credentials?",
     "confirmation_title_delete-credential": "Delete Credential",
@@ -308,6 +310,8 @@
     "description_scan-report_restart": "Scan <0>{{name}}</0> resumed",
     "description_scan-report_play": "Scan <0>{{name}}</0> started",
     "description_scan-report_start": "$t(toast-notifications.description_scan-report_play)",
+    "description_deleted-scan": "Deleted scan {{name}}.",
+    "description_deleted-scan_error": "Error removing scan {{name}}. {{message}}",
     "description_warning": "Application warning",
     "title": "Notification",
     "title_credential": "Success adding credential",
@@ -319,6 +323,7 @@
     "title_deleted-credential": "Success deleting credential",
     "title_deleted-credential_other": "Success deleting credentials",
     "title_deleted-source": "Success deleting source",
+    "title_deleted-scan": "Success deleting scan",
     "title_deleted-source_other": "Success deleting sources",
     "title_merge-reports_error": "'Error merging reports",
     "title_scan-report_start_error": "Error creating scan {{name}}",

src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap

@@ -1019,6 +1019,26 @@ Array [
   Object {
     "file": "./src/components/scans/scansContext.js",
     "keys": Array [
+      Object {
+        "key": "toast-notifications.title",
+        "match": "t('toast-notifications.title', { context: [(error && 'error')",
+      },
+      Object {
+        "key": "toast-notifications.description",
+        "match": "t('toast-notifications.description', { context: ['deleted-scan', error && 'error'], name: scanNames[0], count: scanNames.length, message: errorMessage })",
+      },
+      Object {
+        "key": "form-dialog.confirmation",
+        "match": "t('form-dialog.confirmation', { context: ['title', 'delete-scan'], count: updatedScans.length })",
+      },
+      Object {
+        "key": "form-dialog.confirmation",
+        "match": "t( 'form-dialog.confirmation', { context: ['heading', 'delete-scan'], count: updatedScans.length, name: updatedScans?.[0]?.[apiTypes.API_RESPONSE_SCAN_NAME] }, [<strong />] )",
+      },
+      Object {
+        "key": "form-dialog.label",
+        "match": "t('form-dialog.label', { context: ['delete'] })",
+      },
       Object {
         "key": "toast-notifications.title",
         "match": "t('toast-notifications.title', { context: [(isWarning && 'warning')",
@@ -1090,6 +1110,18 @@ Array [
         "key": "table.label",
         "match": "t('table.label', { context: ['action', 'scan', context] })",
       },
+      Object {
+        "key": "table.label",
+        "match": "t('table.label', { context: 'delete' })",
+      },
+      Object {
+        "key": "table.label",
+        "match": "t('table.label', { context: 'delete' })",
+      },
+      Object {
+        "key": "table.label",
+        "match": "t('table.label', { context: 'delete' })",
+      },
       Object {
         "key": "table.label",
         "match": "t('table.label', { context: ['action', 'scan', 'download'] })",
@@ -1663,6 +1695,14 @@ Array [
     "file": "./src/components/scans/scans.js",
     "key": "view.empty-state",
   },
+  Object {
+    "file": "./src/components/scans/scansContext.js",
+    "key": "form-dialog.confirmation",
+  },
+  Object {
+    "file": "./src/components/scans/scansContext.js",
+    "key": "form-dialog.confirmation",
+  },
   Object {
     "file": "./src/components/scans/scansEmptyState.js",
     "key": "view.empty-state",

src/components/pageLayout/__tests__/__snapshots__/pageLayout.test.js.snap

@@ -461,6 +461,7 @@ exports[`PageLayout Component should render a non-connected component unauthoriz
             t={[Function]}
             useDispatch={[Function]}
             useGetScans={[Function]}
+            useOnDelete={[Function]}
             useOnExpand={[Function]}
             useOnScanAction={[Function]}
             useOnSelect={[Function]}

src/components/router/__tests__/__snapshots__/router.test.js.snap

@@ -127,6 +127,7 @@ exports[`Router Component should shallow render a basic component 1`] = `
             t={[Function]}
             useDispatch={[Function]}
             useGetScans={[Function]}
+            useOnDelete={[Function]}
             useOnExpand={[Function]}
             useOnScanAction={[Function]}
             useOnSelect={[Function]}

src/components/router/__tests__/__snapshots__/routerConstants.test.js.snap

@@ -117,6 +117,7 @@ Array [
         t={[Function]}
         useDispatch={[Function]}
         useGetScans={[Function]}
+        useOnDelete={[Function]}
         useOnExpand={[Function]}
         useOnScanAction={[Function]}
         useOnSelect={[Function]}

src/components/scans/__tests__/__snapshots__/scans.test.js.snap

@@ -197,7 +197,28 @@ exports[`Scans Component should handle multiple display states, pending, error,
                     <OverflowMenuContent>
                       <OverflowMenuGroup
                         groupType="button"
-                      />
+                      >
+                        <Tooltip
+                          content="t(table.label, {\\"context\\":\\"delete\\"})"
+                          delayShow={500}
+                          id={null}
+                          isPopover={false}
+                          placement="top"
+                        >
+                          <Button
+                            aria-label="t(table.label, {\\"context\\":\\"delete\\"})"
+                            className="quipucords-view__row-button"
+                            onClick={[Function]}
+                            variant="plain"
+                          >
+                            <TrashIcon
+                              color="currentColor"
+                              noVerticalAlign={false}
+                              size="sm"
+                            />
+                          </Button>
+                        </Tooltip>
+                      </OverflowMenuGroup>
                     </OverflowMenuContent>
                     <OverflowMenuControl>
                       <DropdownSelect
@@ -213,7 +234,14 @@ exports[`Scans Component should handle multiple display states, pending, error,
                         maxHeight={null}
                         name={null}
                         onSelect={[Function]}
-                        options={Array []}
+                        options={
+                          Array [
+                            Object {
+                              "title": "t(table.label, {\\"context\\":\\"delete\\"})",
+                              "value": "delete",
+                            },
+                          ]
+                        }
                         placeholder={
                           <EllipsisVIcon
                             color="currentColor"

src/components/scans/__tests__/__snapshots__/scansContext.test.js.snap

@@ -114,6 +114,20 @@ Array [
 ]
 `;
 
+exports[`ScansContext should handle deleting a scan with a confirmation: dispatch onDelete 1`] = `
+Array [
+  Array [
+    Object {
+      "body": undefined,
+      "confirmButtonText": "t(form-dialog.label, {\\"context\\":\\"delete\\"})",
+      "heading": "t(form-dialog.confirmation_heading, {\\"context\\":\\"delete-scan\\",\\"count\\":1,\\"name\\":\\"lorem ipsum name\\"}, [object Object])",
+      "onConfirm": [Function],
+      "title": "t(form-dialog.confirmation_title, {\\"context\\":\\"delete-scan\\",\\"count\\":1})",
+    },
+  ],
+]
+`;
+
 exports[`ScansContext should handle scan actions with multiple callbacks: callbacks 1`] = `
 Object {
   "onCancel": [Function],
@@ -149,6 +163,7 @@ Object {
   },
   "VIEW_ID": "scans",
   "useGetScans": [Function],
+  "useOnDelete": [Function],
   "useOnExpand": [Function],
   "useOnScanAction": [Function],
   "useOnSelect": [Function],

src/components/scans/__tests__/__snapshots__/scansTableCells.test.js.snap

@@ -21,7 +21,28 @@ exports[`ScansTableCells should return consistent cell results: basic actionsCel
   <OverflowMenuContent>
     <OverflowMenuGroup
       groupType="button"
-    />
+    >
+      <Tooltip
+        content="t(table.label, {\\"context\\":\\"delete\\"})"
+        delayShow={500}
+        id={null}
+        isPopover={false}
+        placement="top"
+      >
+        <Button
+          aria-label="t(table.label, {\\"context\\":\\"delete\\"})"
+          className="quipucords-view__row-button"
+          onClick={[Function]}
+          variant="plain"
+        >
+          <TrashIcon
+            color="currentColor"
+            noVerticalAlign={false}
+            size="sm"
+          />
+        </Button>
+      </Tooltip>
+    </OverflowMenuGroup>
   </OverflowMenuContent>
   <OverflowMenuControl>
     <DropdownSelect
@@ -37,7 +58,14 @@ exports[`ScansTableCells should return consistent cell results: basic actionsCel
       maxHeight={null}
       name={null}
       onSelect={[Function]}
-      options={Array []}
+      options={
+        Array [
+          Object {
+            "title": "t(table.label, {\\"context\\":\\"delete\\"})",
+            "value": "delete",
+          },
+        ]
+      }
       placeholder={
         <EllipsisVIcon
           color="currentColor"

src/components/scans/__tests__/scansContext.test.js

@@ -1,4 +1,4 @@
-import { context, useGetScans, useOnScanAction, usePoll, useScans } from '../scansContext';
+import { context, useGetScans, useOnDelete, useOnScanAction, usePoll, useScans } from '../scansContext';
 import { apiTypes } from '../../../constants/apiConstants';
 
 describe('ScansContext', () => {
@@ -137,4 +137,22 @@ describe('ScansContext', () => {
       'get responses'
     );
   });
+
+  it('should handle deleting a scan with a confirmation', async () => {
+    const mockConfirmation = jest.fn();
+    const mockScan = {
+      [apiTypes.API_RESPONSE_SCAN_NAME]: 'lorem ipsum name'
+    };
+
+    const { result } = await shallowHook(() =>
+      useOnDelete({
+        useConfirmation: () => mockConfirmation
+      })
+    );
+
+    result(mockScan);
+
+    expect(mockConfirmation.mock.calls).toMatchSnapshot('dispatch onDelete');
+    mockConfirmation.mockClear();
+  });
 });

src/components/scans/scans.js

@@ -26,7 +26,15 @@ import { ViewPaginationRow } from '../viewPaginationRow/viewPaginationRow';
 import { ScansEmptyState } from './scansEmptyState';
 import { Table } from '../table/table';
 import { scansTableCells } from './scansTableCells';
-import { VIEW_ID, INITIAL_QUERY, useGetScans, useOnExpand, useOnScanAction, useOnSelect } from './scansContext';
+import {
+  VIEW_ID,
+  INITIAL_QUERY,
+  useGetScans,
+  useOnExpand,
+  useOnScanAction,
+  useOnSelect,
+  useOnDelete
+} from './scansContext';
 import { ScansToolbar } from './scansToolbar';
 import { translate } from '../i18n/i18n';
 
@@ -42,6 +50,7 @@ const CONFIG = {
  * @param {object} props
  * @param {Function} props.t
  * @param {Function} props.useGetScans
+ * @param {Function} props.useOnDelete
  * @param {Function} props.useOnExpand
  * @param {Function} props.useOnScanAction
  * @param {Function} props.useOnSelect
@@ -53,6 +62,7 @@ const CONFIG = {
 const Scans = ({
   t,
   useGetScans: useAliasGetScans,
+  useOnDelete: useAliasOnDelete,
   useOnExpand: useAliasOnExpand,
   useOnScanAction: useAliasOnScanAction,
   useOnSelect: useAliasOnSelect,
@@ -63,6 +73,7 @@ const Scans = ({
   const onToolbarFieldClearAll = useAliasToolbarFieldClearAll();
   const { isFilteringActive, viewId } = useAliasView();
   const dispatch = useAliasDispatch();
+  const onDelete = useAliasOnDelete();
   const onExpand = useAliasOnExpand();
   const { onCancel, onDownload, onPause, onRestart, onStart } = useAliasOnScanAction();
   const onSelect = useAliasOnSelect();
@@ -188,6 +199,7 @@ const Scans = ({
                     isFirst: index === 0,
                     isLast: index === data.length - 1,
                     item,
+                    onDelete: () => onDelete(item),
                     onCancel: () => onCancel(item),
                     onDownload: () => onDownload(item),
                     onRestart: () => onRestart(item),
@@ -224,13 +236,14 @@ const Scans = ({
 /**
  * Prop types
  *
- * @type {{useOnSelect: Function, useView: Function, t: Function, useOnScanAction: Function,
+ * @type {{useOnSelect: Function, useView: Function, t: Function, useOnScanAction: Function, useOnDelete: Function,
  *     useDispatch: Function, useGetScans: Function, useOnExpand: Function, useToolbarFieldClearAll: Function}}
  */
 Scans.propTypes = {
   t: PropTypes.func,
   useDispatch: PropTypes.func,
   useGetScans: PropTypes.func,
+  useOnDelete: PropTypes.func,
   useOnExpand: PropTypes.func,
   useOnScanAction: PropTypes.func,
   useOnSelect: PropTypes.func,
@@ -241,13 +254,14 @@ Scans.propTypes = {
 /**
  * Default props
  *
- * @type {{useOnSelect: Function, useView: Function, t: translate, useOnScanAction: Function,
+ * @type {{useOnSelect: Function, useView: Function, t: translate, useOnScanAction: Function, useOnDelete: Function,
  *     useDispatch: Function, useGetScans: Function, useOnExpand: Function, useToolbarFieldClearAll: Function}}
  */
 Scans.defaultProps = {
   t: translate,
   useDispatch: storeHooks.reactRedux.useDispatch,
   useGetScans,
+  useOnDelete,
   useOnExpand,
   useOnScanAction,
   useOnSelect,