From 46869487ffba416454440fcbf2a7f3e8cff84594 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Thu, 22 Aug 2024 15:10:20 +0300
Subject: [PATCH] Client: UploadPanel: Added a header component.

---
 .../src/components/panels/StyledPanels.js     | 19 ----------
 .../components/panels/UploadPanel/index.js    | 37 +++++++------------
 2 files changed, 14 insertions(+), 42 deletions(-)

diff --git a/packages/client/src/components/panels/StyledPanels.js b/packages/client/src/components/panels/StyledPanels.js
index 5f6e897cdd..e1a9f2c587 100644
--- a/packages/client/src/components/panels/StyledPanels.js
+++ b/packages/client/src/components/panels/StyledPanels.js
@@ -712,24 +712,6 @@ const StyledLink = styled(Link)`
 
 StyledModalRowContainer.defaultProps = { theme: Base };
 
-const StyledUploadHeader = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-
-  .icons-container {
-    margin-left: 16px;
-    margin-right: 16px;
-  }
-
-  .title-container {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    user-select: none;
-  }
-`;
-
 const StyledUploadBody = styled.div`
   width: calc(100% + 16px);
   height: 100%;
@@ -751,6 +733,5 @@ export {
   StyledModalRowContainer,
   StyledLink,
   StyledNewFilesBody,
-  StyledUploadHeader,
   StyledUploadBody,
 };
diff --git a/packages/client/src/components/panels/UploadPanel/index.js b/packages/client/src/components/panels/UploadPanel/index.js
index d38f788d94..f220d9add2 100644
--- a/packages/client/src/components/panels/UploadPanel/index.js
+++ b/packages/client/src/components/panels/UploadPanel/index.js
@@ -39,9 +39,10 @@ import {
 } from "@docspace/shared/components/modal-dialog";
 import { DialogAsideSkeleton } from "@docspace/shared/skeletons/dialog";
 
-import { StyledUploadHeader, StyledUploadBody } from "../StyledPanels";
+import { StyledUploadBody } from "../StyledPanels";
 import FileList from "./FileList";
 import withLoader from "../../../HOCs/withLoader";
+import { AsideHeader } from "@docspace/shared/components/aside";
 
 const StyledModal = styled(ModalDialog)`
   .heading {
@@ -124,34 +125,24 @@ class UploadPanelComponent extends React.Component {
         ? t("UploadAndConvert")
         : t("Files:Convert");
 
+    const url =
+      uploaded && converted ? ClearReactSvgUrl : ButtonCancelReactSvgUrl;
+
+    const clickEvent =
+      uploaded && converted
+        ? this.clearUploadPanel
+        : uploaded
+          ? cancelConversion
+          : this.onCancelUpload;
+
     return (
       <StyledModal
         visible={visible}
         onClose={this.onClose}
         displayType={ModalDialogType.aside}
+        headerIcons={[{ key: "upload-panel", url, onClick: clickEvent }]}
       >
-        <ModalDialog.Header>
-          <StyledUploadHeader>
-            <div className="title-container">{title}</div>
-            <div className="icons-container">
-              {uploaded && converted ? (
-                <IconButton
-                  size={17}
-                  iconName={ClearReactSvgUrl}
-                  isClickable
-                  onClick={this.clearUploadPanel}
-                />
-              ) : (
-                <IconButton
-                  size="20"
-                  iconName={ButtonCancelReactSvgUrl}
-                  isClickable
-                  onClick={uploaded ? cancelConversion : this.onCancelUpload}
-                />
-              )}
-            </div>
-          </StyledUploadHeader>
-        </ModalDialog.Header>
+        <ModalDialog.Header>{title}</ModalDialog.Header>
         <ModalDialog.Body>
           <StyledUploadBody>
             <FileList />