Better handling throttling error in bulk delete (#1954)

* Implement retry on throttling for nosql

* Clean up code

* Produce specific error for throttling error in mongoProxy bulk delete. Clean up code.

* Fix throttling doc url

* Fix mongo error wording

* Fix unit test

* Unit test cleanup

* Fix format

* Fix unit tests

* Fix format

* Fix unit test

* Fix format

* Improve comments

* Improve error message wording. Fix URL and add specific URL for Mongo and NoSql.

* Fix error messages. Add console errors.

* Clean up selection of various delete fct

* Fix error display

src/Explorer/Controls/Dialog.tsx

@@ -35,7 +35,7 @@ export interface DialogState {
     textFieldProps?: TextFieldProps,
     primaryButtonDisabled?: boolean,
   ) => void;
-  showOkModalDialog: (title: string, subText: string) => void;
+  showOkModalDialog: (title: string, subText: string, linkProps?: LinkProps) => void;
 }
 
 export const useDialog: UseStore<DialogState> = create((set, get) => ({
@@ -83,7 +83,7 @@ export const useDialog: UseStore<DialogState> = create((set, get) => ({
       textFieldProps,
       primaryButtonDisabled,
     }),
-  showOkModalDialog: (title: string, subText: string): void =>
+  showOkModalDialog: (title: string, subText: string, linkProps?: LinkProps): void =>
     get().openDialog({
       isModal: true,
       title,
@@ -94,6 +94,7 @@ export const useDialog: UseStore<DialogState> = create((set, get) => ({
         get().closeDialog();
       },
       onSecondaryButtonClick: undefined,
+      linkProps,
     }),
 }));
 

src/Explorer/Controls/ProgressModalDialog.tsx

@@ -0,0 +1,79 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  DialogTrigger,
+  Field,
+  ProgressBar,
+} from "@fluentui/react-components";
+import * as React from "react";
+
+interface ProgressModalDialogProps {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  maxValue: number;
+  value: number;
+  dismissText: string;
+  onDismiss: () => void;
+  onCancel?: () => void;
+  /* mode drives the state of the action buttons
+   * inProgress: Show cancel button
+   * completed: Show close button
+   * aborting: Show cancel button, but disabled
+   * aborted: Show close button
+   */
+  mode?: "inProgress" | "completed" | "aborting" | "aborted";
+}
+
+/**
+ * React component that renders a modal dialog with a progress bar.
+ */
+export const ProgressModalDialog: React.FC<ProgressModalDialogProps> = ({
+  isOpen,
+  title,
+  message,
+  maxValue,
+  value,
+  dismissText,
+  onCancel,
+  onDismiss,
+  children,
+  mode = "completed",
+}) => (
+  <Dialog
+    open={isOpen}
+    onOpenChange={(event, data) => {
+      if (!data.open) {
+        onDismiss();
+      }
+    }}
+  >
+    <DialogSurface>
+      <DialogBody>
+        <DialogTitle>{title}</DialogTitle>
+        <DialogContent>
+          <Field validationMessage={message} validationState="none">
+            <ProgressBar max={maxValue} value={value} />
+          </Field>
+          {children}
+        </DialogContent>
+        <DialogActions>
+          {mode === "inProgress" || mode === "aborting" ? (
+            <Button appearance="secondary" onClick={onCancel} disabled={mode === "aborting"}>
+              {dismissText}
+            </Button>
+          ) : (
+            <DialogTrigger disableButtonEnhancement>
+              <Button appearance="primary">Close</Button>
+            </DialogTrigger>
+          )}
+        </DialogActions>
+      </DialogBody>
+    </DialogSurface>
+  </Dialog>
+);