Web: Files: Added possibility to delete backup elem without selected file.

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/StyledBackup.js

@@ -282,14 +282,14 @@ const StyledBackupList = styled.div`
     margin: 10px 0 16px 0;
   }
 
-  .backup-list_trash-icon:hover {
-    path {
-      fill: #657077;
-    }
-  }
   .backup-list_trash-icon {
     cursor: pointer;
-    margin-top: 1px;
+    margin-top: -3px;
+    grid-area: trash;
+
+    path {
+      fill: #a3a9ae;
+    }
   }
 
   .backup-list_icon {
@@ -309,10 +309,6 @@ const StyledBackupList = styled.div`
     grid-area: ext;
   }
 
-  .backup-list_trash {
-    grid-area: trash;
-  }
-
   .backup-list_radio-button {
     grid-area: radiobutton;
   }

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-restore-backup/BackupListBody.js

@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import { FixedSizeList as List } from "react-window";
 import AutoSizer from "react-virtualized-auto-sizer";
 import CustomScrollbarsVirtualList from "@appserver/components/scrollbar/custom-scrollbars-virtual-list";
-import TrashIcon from "../../../../../../../../../public/images/button.trash.react.svg";
+import TrashIcon from "../../../../../../../../../public/images/delete.react.svg";
 import { StyledBackupList } from "../StyledBackup";
 import { ReactSVG } from "react-svg";
 import Text from "@appserver/components/text";
@@ -21,45 +21,51 @@ const BackupListBody = ({
     [selectedFileIndex]
   );
 
-  const Item = ({ index, style }) => {
-    const file = filesList[index];
-    const fileId = file.id;
-    const fileName = file.fileName;
-    const isChecked = isFileChecked(index);
+  const onTrashClick = (id) => {
+    onDeleteBackup(id);
+  };
 
-    return (
-      <div style={style}>
-        <StyledBackupList isChecked={isChecked}>
-          <div className="backup-list_item">
-            <ReactSVG
-              src={" /static/images/icons/24/file_archive.svg"}
-              className="backup-list_icon"
-            />
+  const Item = useCallback(
+    ({ index, style }) => {
+      const file = filesList[index];
+      const fileId = file.id;
+      const fileName = file.fileName;
+      const isChecked = isFileChecked(index);
 
-            <Text className="backup-list_full-name">{fileName}</Text>
+      return (
+        <div style={style}>
+          <StyledBackupList isChecked={isChecked}>
+            <div className="backup-list_item">
+              <ReactSVG
+                src={" /static/images/icons/24/file_archive.svg"}
+                className="backup-list_icon"
+              />
 
-            <RadioButton
-              fontSize="13px"
-              fontWeight="400"
-              value=""
-              label=""
-              isChecked={isChecked}
-              onClick={onSelectFile}
-              name={`${index}_${fileId}`}
-              className="backup-list-dialog_checked"
-            />
+              <Text className="backup-list_full-name">{fileName}</Text>
+
+              <RadioButton
+                fontSize="13px"
+                fontWeight="400"
+                value=""
+                label=""
+                isChecked={isChecked}
+                onClick={onSelectFile}
+                name={`${index}_${fileId}`}
+                className="backup-list-dialog_checked"
+              />
 
-            <div className="backup-list_trash">
               <TrashIcon
                 className="backup-list_trash-icon"
-                onClick={onDeleteBackup}
+                onClick={() => onTrashClick(fileId)}
               />
             </div>
-          </div>
-        </StyledBackupList>
-      </div>
-    );
-  };
+          </StyledBackupList>
+        </div>
+      );
+    },
+    [filesList, isFileChecked]
+  );
+
   return (
     <AutoSizer>
       {({ height, width }) => (

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-restore-backup/BackupListModalDialog.js

@@ -25,10 +25,8 @@ class BackupListModalDialog extends React.Component {
     this.state = {
       isLoading: true,
       filesList: [],
-      hasNextPage: true,
-      isNextPageLoading: false,
-      selectedFileIndex: "",
-      selectedFileId: "",
+      selectedFileIndex: null,
+      selectedFileId: null,
     };
   }
   componentDidMount() {
@@ -65,18 +63,18 @@ class BackupListModalDialog extends React.Component {
         });
     });
   };
-  onDeleteBackup = (e) => {
-    const { selectedFileId } = this.state;
-
-    if (!selectedFileId) return;
+  onDeleteBackup = (backupId) => {
+    if (!backupId) return;
 
     this.setState({ isLoading: true }, function () {
-      deleteBackup(selectedFileId)
+      deleteBackup(backupId)
         .then(() => getBackupHistory())
         .then((filesList) =>
           this.setState({
             filesList,
             isLoading: false,
+            selectedFileIndex: null,
+            selectedFileId: null,
           })
         )
         .catch((error) => {
@@ -100,6 +98,7 @@ class BackupListModalDialog extends React.Component {
           value: backupId,
         },
       ];
+
       startRestore(backupId, storageType, storageParams, isNotify)
         .then(() =>
           history.push(
@@ -114,6 +113,8 @@ class BackupListModalDialog extends React.Component {
         .finally(() =>
           this.setState({
             isLoading: false,
+            selectedFileIndex: null,
+            selectedFileId: null,
           })
         );
     });
@@ -121,7 +122,7 @@ class BackupListModalDialog extends React.Component {
   render() {
     const { onModalClose, isVisibleDialog, t, isCopyingToLocal } = this.props;
     const { filesList, isLoading, selectedFileIndex } = this.state;
-    console.log("selectedFileIndex", selectedFileIndex);
+
     return (
       <ModalDialog
         visible={isVisibleDialog}