Web: Files: ChangeRoomOwnerPanel: rewritten to modal-dialog

packages/client/src/components/panels/ChangeRoomOwnerPanel/index.js

@@ -27,13 +27,14 @@
 import { useState } from "react";
 import { inject, observer } from "mobx-react";
 import styled, { css } from "styled-components";
-import { Aside } from "@docspace/shared/components/aside";
-import { Backdrop } from "@docspace/shared/components/backdrop";
 import PeopleSelector from "@docspace/shared/selectors/People";
 import { withTranslation } from "react-i18next";
 import Filter from "@docspace/shared/api/people/filter";
 import { EmployeeType } from "@docspace/shared/enums";
-import { Portal } from "@docspace/shared/components/portal";
+import {
+  ModalDialog,
+  ModalDialogType,
+} from "@docspace/shared/components/modal-dialog";
 
 const StyledChangeRoomOwner = styled.div`
   display: contents;
@@ -70,11 +71,11 @@ const StyledChangeRoomOwner = styled.div`
 const ChangeRoomOwner = (props) => {
   const {
     t,
+    tReady,
     visible,
     setIsVisible,
     showBackButton,
     setRoomParams,
-    currentDeviceType,
     roomOwnerId,
     changeRoomOwner,
     userId,
@@ -112,62 +113,62 @@ const ChangeRoomOwner = (props) => {
   const filter = new Filter();
   filter.role = [EmployeeType.Admin, EmployeeType.User];
 
-  const asideComponent = (
-    <StyledChangeRoomOwner showBackButton={showBackButton}>
-      <Backdrop onClick={onClose} visible={visible} zIndex={320} isAside />
-      <Aside
-        currentDeviceType={currentDeviceType}
-        className="header_aside-panel"
-        visible={visible}
-        onClose={onClose}
-        withoutHeader
-        withoutBodyScroll
-      >
-        <PeopleSelector
-          withCancelButton
-          cancelButtonLabel=""
-          onCancel={onClose}
-          onSubmit={onChangeRoomOwner}
-          submitButtonLabel={
-            showBackButton ? t("Common:SelectAction") : t("Files:AssignOwner")
-          }
-          disableSubmitButton={false}
-          withHeader
-          headerProps={{
-            onCloseClick: onClose,
-            onBackClick,
-            withoutBackButton: !showBackButton,
-            headerLabel: t("Files:ChangeTheRoomOwner"),
-          }}
-          filter={filter}
-          isLoading={isLoading}
-          withFooterCheckbox={!showBackButton}
-          footerCheckboxLabel={t("Files:LeaveTheRoom")}
-          isChecked={!showBackButton}
-          withOutCurrentAuthorizedUser
-          filterUserId={roomOwnerId}
-          currentUserId={userId}
-          disableDisabledUsers
-          withInfo
-          infoText={t("CreateEditRoomDialog:PeopleSelectorInfo", {
-            productName: t("Common:ProductName"),
-          })}
-          emptyScreenHeader={t("Common:NotFoundUsers")}
-          emptyScreenDescription={t("CreateEditRoomDialog:PeopleSelectorInfo", {
-            productName: t("Common:ProductName"),
-          })}
-          className="change-owner_people-selector"
-        />
-      </Aside>
-    </StyledChangeRoomOwner>
+  return (
+    <ModalDialog
+      isLoading={!tReady}
+      visible={visible}
+      onClose={onClose}
+      displayType={ModalDialogType.aside}
+      withoutPadding
+    >
+      <ModalDialog.Body>
+        <StyledChangeRoomOwner showBackButton={showBackButton}>
+          <PeopleSelector
+            withCancelButton
+            cancelButtonLabel=""
+            onCancel={onClose}
+            onSubmit={onChangeRoomOwner}
+            submitButtonLabel={
+              showBackButton ? t("Common:SelectAction") : t("Files:AssignOwner")
+            }
+            disableSubmitButton={false}
+            withHeader
+            headerProps={{
+              onCloseClick: onClose,
+              onBackClick,
+              withoutBackButton: !showBackButton,
+              headerLabel: t("Files:ChangeTheRoomOwner"),
+            }}
+            filter={filter}
+            isLoading={isLoading}
+            withFooterCheckbox={!showBackButton}
+            footerCheckboxLabel={t("Files:LeaveTheRoom")}
+            isChecked={!showBackButton}
+            withOutCurrentAuthorizedUser
+            filterUserId={roomOwnerId}
+            currentUserId={userId}
+            disableDisabledUsers
+            withInfo
+            infoText={t("CreateEditRoomDialog:PeopleSelectorInfo", {
+              productName: t("Common:ProductName"),
+            })}
+            emptyScreenHeader={t("Common:NotFoundUsers")}
+            emptyScreenDescription={t(
+              "CreateEditRoomDialog:PeopleSelectorInfo",
+              {
+                productName: t("Common:ProductName"),
+              },
+            )}
+            className="change-owner_people-selector"
+          />
+        </StyledChangeRoomOwner>
+      </ModalDialog.Body>
+    </ModalDialog>
   );
-
-  return <Portal visible={visible} element={asideComponent} />;
 };
 
 export default inject(
   ({
-    settingsStore,
     dialogsStore,
     filesStore,
     selectedFolderStore,
@@ -181,7 +182,6 @@ export default inject(
       changeRoomOwnerData,
     } = dialogsStore;
     const { selection, bufferSelection } = filesStore;
-    const { currentDeviceType } = settingsStore;
     const { updateInfoPanelSelection } = infoPanelStore;
 
     const room = selection.length
@@ -198,7 +198,6 @@ export default inject(
       showBackButton: changeRoomOwnerData.showBackButton,
       setRoomParams: changeRoomOwnerData.setRoomParams,
       roomOwnerId: room?.createdBy?.id,
-      currentDeviceType,
       changeRoomOwner: filesActionsStore.changeRoomOwner,
       userId: id,
       updateInfoPanelSelection,

packages/shared/components/modal-dialog/ModalDialog.styled.ts

@@ -25,7 +25,6 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { isMobile } from "react-device-detect";
 
 import { Base } from "../../themes";
 import { mobile, tablet } from "../../utils";
@@ -150,6 +149,7 @@ const StyledBody = styled(Box)<{
   hasFooter?: boolean;
   isScrollLocked?: boolean;
   withBodyScroll?: boolean;
+  withoutPadding?: boolean;
 }>`
   position: relative;
   padding: 0 16px;
@@ -179,6 +179,12 @@ const StyledBody = styled(Box)<{
       height: 100%;
       min-height: auto;
     `}
+
+  ${(props) =>
+    props.withoutPadding &&
+    css`
+      padding: 0;
+    `};
 `;
 
 const StyledFooter = styled.div<{

packages/shared/components/modal-dialog/ModalDialog.tsx

@@ -87,6 +87,7 @@ const ModalDialog = ({
   withBodyScroll = false,
   withFooterBorder = false,
   containerVisible = false,
+  withoutPadding = false,
 
   ...rest
 }: ModalDialogProps) => {
@@ -175,6 +176,7 @@ const ModalDialog = ({
           isCloseable={isCloseable && !embedded}
           embedded={embedded}
           blur={blur}
+          withoutPadding={withoutPadding}
           {...rest}
         />
       }

packages/shared/components/modal-dialog/ModalDialog.types.ts

@@ -91,6 +91,7 @@ export interface ModalDialogProps {
   isDoubleFooterLine?: boolean;
   embedded?: boolean;
   withForm?: boolean;
+  withoutPadding?: boolean;
   blur?: number;
 }
 
@@ -160,5 +161,6 @@ export type ModalSubComponentsProps = AsideHeaderProps & {
   isCloseable?: boolean;
   embedded?: boolean;
   withForm?: boolean;
+  withoutPadding?: boolean;
   blur?: number;
 };

packages/shared/components/modal-dialog/sub-components/Modal.tsx

@@ -69,6 +69,7 @@ const Modal = ({
   embedded,
   withForm,
   blur,
+  withoutPadding,
 
   ...rest
 }: ModalSubComponentsProps) => {
@@ -201,6 +202,7 @@ const Modal = ({
                     isScrollLocked={isScrollLocked}
                     hasFooter={!!footer}
                     currentDisplayType={currentDisplayType}
+                    withoutPadding={withoutPadding}
                     {...bodyProps}
                     {...iOSActions}
                     // embedded={embedded}