Fixed Bug 57973 - Web: Files: Changed view for "Move to" dialog.

products/ASC.Files/Client/src/components/dialogs/ThirdPartyMoveDialog/index.js

@@ -8,16 +8,46 @@ import Button from "@appserver/components/button";
 import { inject, observer } from "mobx-react";
 import toastr from "@appserver/components/toast/toastr";
 import { connectedCloudsTypeTitleTranslation } from "../../../helpers/utils";
+import RadioButtonGroup from "@appserver/components/radio-button-group";
 
 const StyledOperationDialog = styled(ModalDialog)`
-  .operation-button {
-    margin-right: 8px;
-  }
-
   .modal-dialog-aside-footer {
     display: flex;
     width: 90%;
   }
+  .third-party-move-radio-button {
+    margin-top: 12px;
+    label:not(:last-child) {
+      margin-bottom: 12px;
+    }
+  }
+  .modal-dialog-modal-footer {
+    border-top: ${(props) => props.theme.button.border.baseDisabled};
+    margin-left: -12px;
+    margin-right: -12px;
+    padding-left: 12px;
+    padding-right: 12px;
+    padding-top: 12px;
+    .operation-button {
+      margin-right: 8px;
+    }
+  }
+  .modal-dialog-aside-footer {
+    border-top: ${(props) => props.theme.button.border.baseDisabled};
+    margin-left: -16px;
+    margin-right: -16px;
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-top: 16px;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 10px;
+    width: 100%;
+  }
+  .third-party-move-dialog-text {
+    margin-top: 16px;
+  }
 `;
 
 const PureThirdPartyMoveContainer = ({
@@ -34,21 +64,25 @@ const PureThirdPartyMoveContainer = ({
   setBufferSelection,
   itemOperationToFolder,
   setMoveToPanelVisible,
+  conflictResolveDialogVisible,
 }) => {
   const zIndex = 310;
   const deleteAfter = false; // TODO: get from settings
 
   const [isLoading, setIsLoading] = useState(false);
+  const [actionType, setActionType] = useState("move");
 
-  const onClose = () => {
+  const onClosePanels = () => {
     setDestFolderId(false);
     setThirdPartyMoveDialogVisible(false);
     setMoveToPanelVisible(false);
     setBufferSelection(null);
   };
+  const onClose = () => setThirdPartyMoveDialogVisible(false);
 
-  const startOperation = (e) => {
+  const startOperation = () => {
-    const isCopy = e.target.dataset.copy;
+    const isCopy = actionType === "copy";
+    console.log("isCopy", isCopy);
     const folderIds = [];
     const fileIds = [];
 
@@ -80,7 +114,7 @@ const PureThirdPartyMoveContainer = ({
           setIsLoading(false);
         } else {
           setIsLoading(false);
-          onClose();
+          onClosePanels();
           await itemOperationToFolder(data);
         }
       })
@@ -92,47 +126,72 @@ const PureThirdPartyMoveContainer = ({
 
   const providerTitle = connectedCloudsTypeTitleTranslation(provider, t);
 
+  const onSelectActionType = (e) => setActionType(e.target.value);
+
+  const radioOptions = [
+    {
+      label: (
+        <div>
+          <Text fontWeight={600} fontSize={"14px"}>
+            {t("Translations:Move")}
+          </Text>
+        </div>
+      ),
+      value: "move",
+    },
+    {
+      label: (
+        <div>
+          <Text fontWeight={600} fontSize={"14px"}>
+            {t("Translations:Copy")}
+          </Text>
+        </div>
+      ),
+
+      value: "copy",
+    },
+  ];
   return (
     <StyledOperationDialog
       isLoading={!tReady}
-      visible={visible}
+      visible={conflictResolveDialogVisible ? false : visible}
       zIndex={zIndex}
       onClose={onClose}
-      displayType="aside"
     >
       <ModalDialog.Header>{t("MoveConfirmation")}</ModalDialog.Header>
       <ModalDialog.Body>
         <Text>{t("MoveConfirmationMessage", { provider: providerTitle })}</Text>
-        <br />
+
-        <Text>{t("MoveConfirmationAlert")}</Text>
+        <Text className="third-party-move-dialog-text">
+          {t("ConflictResolveDialog:ConflictResolveSelectAction")}
+        </Text>
+        <RadioButtonGroup
+          className="third-party-move-radio-button"
+          orientation="vertical"
+          fontSize="13px"
+          fontWeight="400"
+          name="group"
+          onClick={onSelectActionType}
+          options={radioOptions}
+          selected={actionType}
+        />
       </ModalDialog.Body>
 
       <ModalDialog.Footer>
         <Button
           className="operation-button"
-          label={t("Translations:Move")}
+          label={t("Common:OKButton")}
-          size="normal"
+          size="normalTouchscreen"
-          scale
           primary
           onClick={startOperation}
           isLoading={isLoading}
           isDisabled={isLoading}
         />
-        <Button
+
-          data-copy="copy"
-          className="operation-button"
-          label={t("Translations:Copy")}
-          size="normal"
-          scale
-          onClick={startOperation}
-          isLoading={isLoading}
-          isDisabled={isLoading}
-        />
         <Button
           className="operation-button"
           label={t("Common:CancelButton")}
-          size="normal"
+          size="normalTouchscreen"
-          scale
           onClick={onClose}
           isLoading={isLoading}
           isDisabled={isLoading}
@@ -150,6 +209,7 @@ export default inject(
       destFolderId,
       setDestFolderId,
       setMoveToPanelVisible,
+      conflictResolveDialogVisible,
     } = dialogsStore;
     const { bufferSelection, setBufferSelection } = filesStore;
     const { checkFileConflicts, setConflictDialogData } = filesActionsStore;
@@ -171,10 +231,14 @@ export default inject(
       setConflictDialogData,
       itemOperationToFolder,
       setMoveToPanelVisible,
+      conflictResolveDialogVisible,
     };
   }
 )(
-  withTranslation(["ThirdPartyMoveDialog", "Common", "Translations"])(
+  withTranslation([
-    observer(PureThirdPartyMoveContainer)
+    "ThirdPartyMoveDialog",
-  )
+    "Common",
+    "Translations",
+    "ConflictResolveDialog",
+  ])(observer(PureThirdPartyMoveContainer))
 );

products/ASC.Files/Client/src/components/panels/OperationsPanel/index.js

@@ -5,7 +5,7 @@ import { inject, observer } from "mobx-react";
 import toastr from "studio/toastr";
 import SelectFolderDialog from "../SelectFolderDialog";
 
-let operationData, fileWithConflicts, timerId;
+let timerId;
 const OperationsPanelComponent = (props) => {
   const {
     t,
@@ -31,25 +31,12 @@ const OperationsPanelComponent = (props) => {
     parentFolderId,
     conflictResolveDialogVisible,
     clearActiveOperations,
+    thirdPartyMoveDialogVisible,
   } = props;
 
   const deleteAfter = false; // TODO: get from settings
 
   const [isLoading, setIsLoading] = useState(false);
-  const [intermediateHidden, setIntermediateHidden] = useState(false);
-
-  useEffect(() => {
-    if (conflictResolveDialogVisible === false) {
-      intermediateHidden && setIntermediateHidden(false);
-    } else {
-      isLoading && setIsLoading(false);
-    }
-  }, [conflictResolveDialogVisible]);
-
-  useEffect(() => {
-    intermediateHidden &&
-      setConflictDialogData(fileWithConflicts, operationData);
-  }, [intermediateHidden]);
 
   useEffect(() => {
     return () => {
@@ -113,7 +100,7 @@ const OperationsPanelComponent = (props) => {
 
     if (!folderIds.length && !fileIds.length) return;
 
-    operationData = {
+    const operationData = {
       destFolderId,
       folderIds,
       fileIds,
@@ -134,8 +121,7 @@ const OperationsPanelComponent = (props) => {
     checkFileConflicts(destFolderId, folderIds, fileIds)
       .then(async (conflicts) => {
         if (conflicts.length) {
-          fileWithConflicts = conflicts;
+          setConflictDialogData(conflicts, operationData);
-          setIntermediateHidden(true);
           setIsLoading(false);
         } else {
           setIsLoading(false);
@@ -155,7 +141,11 @@ const OperationsPanelComponent = (props) => {
   };
 
   // console.log("Operations panel render", expandedKeys);
-  const isVisible = intermediateHidden ? false : visible;
+  const isVisible =
+    conflictResolveDialogVisible || thirdPartyMoveDialogVisible
+      ? false
+      : visible;
+
   return (
     <SelectFolderDialog
       selectionFiles={selection}
@@ -221,6 +211,7 @@ export default inject(
       setThirdPartyMoveDialogVisible,
       setIsFolderActions,
       conflictResolveDialogVisible,
+      thirdPartyMoveDialogVisible,
     } = dialogsStore;
 
     const selections = selection.length ? selection : [bufferSelection];
@@ -252,6 +243,7 @@ export default inject(
       checkFileConflicts,
       conflictResolveDialogVisible,
       clearActiveOperations,
+      thirdPartyMoveDialogVisible,
     };
   }
 )(withRouter(observer(OperationsPanel)));