From 02a0c079354ef2b5631908d0d7ec50bfe7c54a12 Mon Sep 17 00:00:00 2001
From: Elena Shorohova <92329687+jsorohova@users.noreply.github.com>
Date: Wed, 13 Mar 2024 18:21:23 +0100
Subject: [PATCH] Fixed multiple media files deletion (#2434)

---
 src/admin/help/helpModal.tsx                  |  2 +-
 src/admin/media/mediaModal.tsx                |  7 +++--
 .../components/deleteConfirmationOverlay.tsx  | 26 ++++++++++++++++---
 src/themes/designer/styles/admin.scss         | 10 +++++++
 4 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/admin/help/helpModal.tsx b/src/admin/help/helpModal.tsx
index eed9dd7cf..f0d11eddb 100644
--- a/src/admin/help/helpModal.tsx
+++ b/src/admin/help/helpModal.tsx
@@ -69,7 +69,7 @@ export class HelpModal extends React.Component<HelpModalProps, HelpModalState> {
                     <ul>
                         <li><Text block><Link href="https://aka.ms/apimdocs/portal/cors" target="_blank">Enable CORS</Link></Text></li>
                         <li><Text block><Link href="https://aka.ms/apimdocs/portal/access" target="_blank">Secure access to the API Management developer portal</Link></Text></li>
-                        <li><Text block><Link href="https://aka.ms/apimdocs/portalcustomization" target="_blank">Add custom features to the developer portal</Link></Text></li>
+                        <li><Text block><Link href="https://aka.ms/apimdocs/portal/customization" target="_blank">Add custom features to the developer portal</Link></Text></li>
                     </ul>
 
                     <Text as="h3" block variant="large" styles={headerStyles}>Give feedback</Text>
diff --git a/src/admin/media/mediaModal.tsx b/src/admin/media/mediaModal.tsx
index a7b69de32..06c95bd77 100644
--- a/src/admin/media/mediaModal.tsx
+++ b/src/admin/media/mediaModal.tsx
@@ -105,8 +105,10 @@ export class MediaModal extends React.Component<MediaModalProps, MediaModalState
     }
 
     deleteMedia = async (): Promise<void> => {
-        await Promise.all(this.state.selectedFiles.map(async file => await this.mediaService.deleteMedia(file)));
-        
+        for (const file of this.state.selectedFiles) {
+            await this.mediaService.deleteMedia(file);
+        }
+    
         this.setState({ selectedFiles: [], showDeleteConfirmation: false });
         this.eventManager.dispatchEvent('onSaveChanges');
         this.searchMedia();
@@ -183,6 +185,7 @@ export class MediaModal extends React.Component<MediaModalProps, MediaModalState
                             <IconButton
                                 iconProps={{ iconName: 'CheckMark' }}
                                 onClick={() => this.renameMedia(mediaItem)}
+                                disabled={this.state.fileNewName === ''}
                             />
                             <IconButton
                                 iconProps={{ iconName: 'Cancel' }}
diff --git a/src/admin/utils/components/deleteConfirmationOverlay.tsx b/src/admin/utils/components/deleteConfirmationOverlay.tsx
index 84064439e..c07481101 100644
--- a/src/admin/utils/components/deleteConfirmationOverlay.tsx
+++ b/src/admin/utils/components/deleteConfirmationOverlay.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Stack, Layer, Overlay, Popup, mergeStyleSets, DefaultButton, FocusTrapZone, PrimaryButton } from '@fluentui/react';
+import { Stack, Layer, Overlay, Popup, mergeStyleSets, DefaultButton, FocusTrapZone, PrimaryButton, Spinner } from '@fluentui/react';
 
 const popupStyles = mergeStyleSets({
     root: {
@@ -21,13 +21,25 @@ const popupStyles = mergeStyleSets({
     },
 });
 
+interface DeleteConfirmationState {
+    isLoading: boolean
+}
+
 interface DeleteConfirmationProps {
     deleteItemTitle: string,
     onConfirm: () => void,
     onDismiss: () => void
 }
 
-export class DeleteConfirmationOverlay extends React.Component<DeleteConfirmationProps, {}> {
+export class DeleteConfirmationOverlay extends React.Component<DeleteConfirmationProps, DeleteConfirmationState> {
+    constructor(props: DeleteConfirmationProps) {
+        super(props);
+
+        this.state = {
+            isLoading: false
+        }
+    }
+
     render(): JSX.Element {
         return <>
             <Layer>
@@ -41,9 +53,17 @@ export class DeleteConfirmationOverlay extends React.Component<DeleteConfirmatio
                     <Overlay onClick={this.props.onDismiss} />
                     <FocusTrapZone style={{ position: 'unset' }}>
                         <div role="document" className={popupStyles.content}>
+                            {this.state.isLoading && <Spinner className="spinner-modal" />}
                             <p>Are you sure you want to delete {this.props.deleteItemTitle}?</p>
                             <Stack horizontal tokens={{ childrenGap: 20 }}>
-                                <PrimaryButton onClick={this.props.onConfirm}>Yes</PrimaryButton>
+                                <PrimaryButton 
+                                    onClick={() => {
+                                        this.setState({ isLoading: true });
+                                        this.props.onConfirm();
+                                    }}
+                                >
+                                    Yes
+                                </PrimaryButton>
                                 <DefaultButton onClick={this.props.onDismiss}>No</DefaultButton>
                             </Stack>
                         </div>
diff --git a/src/themes/designer/styles/admin.scss b/src/themes/designer/styles/admin.scss
index 55b5bff42..ae90496c8 100644
--- a/src/themes/designer/styles/admin.scss
+++ b/src/themes/designer/styles/admin.scss
@@ -317,6 +317,16 @@
     font-weight: 600;
 }
 
+.spinner-modal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 10;
+}
+
 // CHECK THIS!!!!!
 // .toolbox-position-right-top {
 //     display: none !important;