Adds confirmation box for library view

config/package-solution.json

@@ -3,7 +3,7 @@
   "solution": {
     "name": "Blimped SPFx Retention Controls Client Side Solution",
     "id": "39608f99-117d-457c-9001-79c8d257aab5",
-    "version": "1.1.0.1",
+    "version": "1.1.1.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false,

src/extensions/retentionControls/components/LibraryView.tsx

@@ -23,6 +23,7 @@ import { ResponsiveMode } from "@fluentui/react/lib/ResponsiveMode";
 import { IPagedDriveItems } from "../../../shared/interfaces/IPagedDriveItems";
 import { itemMetadataColumns } from "../../../shared/constants";
 import { IDriveItem } from "../../../shared/interfaces/IDriveItem";
+import ConfirmationDialogManager from "../ConfirmationDialogManager";
 
 export interface ILibraryView {
   onClose: () => void;
@@ -165,7 +166,7 @@ export const LibraryView: React.FC<ILibraryView> = (props) => {
     Promise.resolve().then(async () => {
       if (itemsWithMetadata === undefined) {
         return;
-      }
+      }      
 
       Log.info(LOG_SOURCE, `Toggling record status for all items`);
 
@@ -330,28 +331,40 @@ export const LibraryView: React.FC<ILibraryView> = (props) => {
   const onRenderItemColumn = (item: IItemMetadata, index: number, column: ICustomColumn): JSX.Element => {
     return <ItemColumn item={item} itemState={itemsState.filter(i => i.listItemId === item.id)[0]} column={column} onToggling={onTogglingRecord} onClearing={onClearingLabel} />;
   }
+
+  const showConfirmationDialog = (title: string, message: string, callback: () => void): void => {
+    Promise.resolve().then(async () => {
+      const dialog = new ConfirmationDialogManager(title, message);
+      dialog.onClosed(async (confirmed?: boolean) => {
+        if (confirmed === true) {
+          callback();
+        }
+      });
+      await dialog.show();
+    }).catch(error => console.log(error));
+  }
 
   const menuProps: IContextualMenuProps = {  
     items: [
       {
         key: 'lockRecords',
         text: strings.LockRecords,
         title: strings.LockRecordsTooltip,
-        onClick: () => onTogglingAllRecords(true),
+        onClick: () => showConfirmationDialog(strings.ConfirmEntireLibraryImpactTitle, strings.ConfirmEntireLibraryImpactMessage, () => onTogglingAllRecords(true)),
         iconProps: { iconName: 'Lock' },
       },
       {
         key: 'unlockRecords',
         text: strings.UnlockRecords,
         title: strings.UnlockRecordsTooltip,
-        onClick: () => onTogglingAllRecords(false),
+        onClick: () => showConfirmationDialog(strings.ConfirmEntireLibraryImpactTitle, strings.ConfirmEntireLibraryImpactMessage, () => onTogglingAllRecords(false)),
         iconProps: { iconName: 'Unlock' },
       },
       {
         key: 'clearAllLabels',
         text: strings.ClearLabels,
         title: strings.ClearLabelsTooltip,
-        onClick: () => onClearingAllLabels(),
+        onClick: () => showConfirmationDialog(strings.ConfirmEntireLibraryImpactTitle, strings.ConfirmEntireLibraryImpactMessage, () => onClearingAllLabels()),
         iconProps: { iconName: 'Untag' },
       },
     ],
@@ -410,8 +423,8 @@ export const LibraryView: React.FC<ILibraryView> = (props) => {
         <DefaultButton onClick={props.onClose} text={strings.CloseModal} />
         <Stack horizontal tokens={{ childrenGap: 10 }}>
 
-          <PrimaryButton menuProps={menuProps} menuAs={getMenu} iconProps={{ iconName: "MultiSelect"}} text={strings.TakeBulkActionsEntireLibrary} title={strings.TakeBulkActionsEntireLibraryTooltip} disabled={!itemsWithMetadata || itemsWithMetadata?.length === 0 || executingAction} />
           { executingAction ? <><Spinner label={actionStatus} labelPosition="right" size={SpinnerSize.small} /> </> : <></> }
+          <PrimaryButton menuProps={menuProps} menuAs={getMenu} iconProps={{ iconName: "MultiSelect"}} text={strings.TakeBulkActionsEntireLibrary} title={strings.TakeBulkActionsEntireLibraryTooltip} disabled={!itemsWithMetadata || itemsWithMetadata?.length === 0 || executingAction} />
         </Stack>
       </DialogFooter>
     </Dialog>

src/extensions/retentionControls/components/MultiItemView.tsx

@@ -421,8 +421,8 @@ export const MultiItemView: React.FC<IMultiItemView> = (props) => {
         <DefaultButton onClick={props.onClose} text={strings.CloseModal} />
         <Stack horizontal tokens={{ childrenGap: 10 }}>
 
-          <PrimaryButton menuProps={menuProps} menuAs={getMenu} iconProps={{ iconName: "MultiSelect"}} text={strings.TakeBulkActionsSelectedItems} title={strings.TakeBulkActionsSelectedItemsTooltip} disabled={!itemsWithMetadata || itemsWithMetadata?.length === 0 || executingAction} />
           { executingAction ? <Spinner label={actionStatus} labelPosition="right" size={SpinnerSize.small} /> : <></> }
+          <PrimaryButton menuProps={menuProps} menuAs={getMenu} iconProps={{ iconName: "MultiSelect"}} text={strings.TakeBulkActionsSelectedItems} title={strings.TakeBulkActionsSelectedItemsTooltip} disabled={!itemsWithMetadata || itemsWithMetadata?.length === 0 || executingAction} />
         </Stack>
       </DialogFooter>
     </Dialog>    

src/extensions/retentionControls/loc/en-us.js

@@ -19,6 +19,8 @@ define([], function () {
     ClearLabelConfirmationTitle: "About folders",
     ClearLabelConfirmationMessage: "The selected item is a folder. This operation does not clear the retention label from any content in the folder. It will only make sure new content created in the folder will not automatically get a retention label. Do you want to continue clearing the label from just the folder?",
     CloseModal: "Close",
+    ConfirmEntireLibraryImpactTitle: "Confirm action",
+    ConfirmEntireLibraryImpactMessage: "This action will affect all items in this library and can take quite a while to complete, depending on the number of items. Are you sure you want to continue?",
     ErrorFetchingData: "An error occurred while fetching data",
     FileName: "File",
     IsContentUpdateAllowed: "Content update allowed",
@@ -56,9 +58,9 @@ define([], function () {
     RetentionLabelAppliedBy: "Applied by",
     RetentionLabelEventDate: "Event date",
     RetentionLabelsApplied: "Retention labels",
-    TakeBulkActionsSelectedItems: "Take bulk action (on selected items)",
+    TakeBulkActionsSelectedItems: "Take bulk action",
     TakeBulkActionsSelectedItemsTooltip: "Click to take bulk actions on the selected items",
-    TakeBulkActionsEntireLibrary: "Take bulk action (on entire library)",
+    TakeBulkActionsEntireLibrary: "Take bulk action",
     TakeBulkActionsEntireLibraryTooltip: "Click to take bulk actions on the entire library",
     ToggleLockStatus: "Toggle",
     ToggleOffText: "No",

src/extensions/retentionControls/loc/myStrings.d.ts

@@ -18,6 +18,8 @@ declare interface IRetentionControlsCommandSetStrings {
   ClearLabelConfirmationTitle: string;
   ClearLabelConfirmationMessage: string;
   CloseModal: string;
+  ConfirmEntireLibraryImpactTitle: string;
+  ConfirmEntireLibraryImpactMessage: string;
   ErrorFetchingData: string;
   FileName: string;
   IsContentUpdateAllowed: string;