Client: UploadPanel: Added a header component.

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,
 };

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 />