From 443e107cc474882f558e0783a2d9068b7692bd00 Mon Sep 17 00:00:00 2001
From: Pavel Denisjuk <pavel@webiny.com>
Date: Mon, 11 Dec 2023 14:45:09 +0100
Subject: [PATCH] fix(app-file-manager): render extensions next to the basic
 fields

---
 .../components/FileDetails/FileDetails.tsx    | 50 ++++++++++++-------
 .../FileDetails/components/Content.tsx        | 13 +++--
 .../FileManagerView/FileManagerViewConfig.tsx |  1 +
 .../FileDetails/GroupFields.tsx               | 14 ++++++
 .../configComponents/FileDetails/index.ts     |  3 ++
 .../src/modules/FileManagerRenderer/index.tsx |  2 +
 6 files changed, 61 insertions(+), 22 deletions(-)
 create mode 100644 packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/FileDetails/GroupFields.tsx

diff --git a/packages/app-file-manager/src/components/FileDetails/FileDetails.tsx b/packages/app-file-manager/src/components/FileDetails/FileDetails.tsx
index bb456b0752e..20a2f4c44c4 100644
--- a/packages/app-file-manager/src/components/FileDetails/FileDetails.tsx
+++ b/packages/app-file-manager/src/components/FileDetails/FileDetails.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from "react";
-// @ts-ignore
+// @ts-expect-error
 import { useHotkeys } from "react-hotkeyz";
 import omit from "lodash/omit";
 import styled from "@emotion/styled";
@@ -74,6 +74,8 @@ const FileDetailsInner: React.FC<FileDetailsInnerProps> = ({ file }) => {
     const { close } = useFileDetails();
     const { fileDetails } = useFileManagerViewConfig();
 
+    const [, leftPanel = "1", rightPanel = "1"] = fileDetails.width.split(",");
+
     const extensionFields = useMemo(() => {
         const fields = fileModel.fields.find(field => field.fieldId === "extensions");
         if (!fields?.settings?.fields) {
@@ -91,6 +93,19 @@ const FileDetailsInner: React.FC<FileDetailsInnerProps> = ({ file }) => {
         close();
     };
 
+    const basicFieldsElement = (
+        <Grid>
+            {fileDetails.fields.map(field => (
+                <Cell span={12} key={field.name}>
+                    {field.element}
+                </Cell>
+            ))}
+        </Grid>
+    );
+
+    const extensionFieldsElement =
+        extensionFields.length > 0 ? <Extensions model={fileModel} /> : null;
+
     return (
         <Form data={file} onSubmit={onSubmit}>
             {() => (
@@ -99,30 +114,27 @@ const FileDetailsInner: React.FC<FileDetailsInnerProps> = ({ file }) => {
                     <FormContainer>
                         <Header />
                         <Content>
-                            <Content.Panel>
+                            <Content.Panel flex={parseFloat(leftPanel)}>
                                 <Elevation z={2} style={{ margin: 20 }}>
                                     <Actions />
                                     <Preview />
                                     <PreviewMeta />
                                 </Elevation>
                             </Content.Panel>
-                            <Content.Panel>
-                                <Tabs>
-                                    <Tab label={"Basic Details"}>
-                                        <Grid>
-                                            {fileDetails.fields.map(field => (
-                                                <Cell span={12} key={field.name}>
-                                                    {field.element}
-                                                </Cell>
-                                            ))}
-                                        </Grid>
-                                    </Tab>
-                                    {extensionFields.length > 0 ? (
+                            <Content.Panel flex={parseFloat(rightPanel)}>
+                                {fileDetails.groupFields ? (
+                                    <Tabs>
+                                        <Tab label={"Basic Details"}>{basicFieldsElement}</Tab>
                                         <Tab label={"Advanced Details"}>
-                                            <Extensions model={fileModel} />
+                                            {extensionFieldsElement}
                                         </Tab>
-                                    ) : null}
-                                </Tabs>
+                                    </Tabs>
+                                ) : (
+                                    <>
+                                        {basicFieldsElement}
+                                        {extensionFieldsElement}
+                                    </>
+                                )}
                             </Content.Panel>
                         </Content>
                         <Footer />
@@ -151,9 +163,11 @@ export const FileDetails: React.FC<FileDetailsProps> = ({ open, onClose, loading
 
     const { fileDetails } = useFileManagerViewConfig();
 
+    const drawerWidth = fileDetails.width.split(",")[0];
+
     return (
         <FileDetailsDrawer
-            width={fileDetails.width}
+            width={drawerWidth}
             dir="rtl"
             modal
             open={open}
diff --git a/packages/app-file-manager/src/components/FileDetails/components/Content.tsx b/packages/app-file-manager/src/components/FileDetails/components/Content.tsx
index f11dd975238..f44129e077b 100644
--- a/packages/app-file-manager/src/components/FileDetails/components/Content.tsx
+++ b/packages/app-file-manager/src/components/FileDetails/components/Content.tsx
@@ -6,8 +6,8 @@ const Horizontal = styled.div`
     height: calc(100vh - 160px);
 `;
 
-const Grow = styled.div`
-    flex: 1;
+const Grow = styled.div<{ flex: number }>`
+    flex: ${({ flex }) => flex};
     :last-of-type {
         border-left: 1px solid var(--mdc-theme-on-background);
     }
@@ -22,11 +22,16 @@ export const Content = ({ children }: ContentProps) => {
 };
 
 interface PanelProps {
+    flex?: number;
     children: React.ReactNode;
 }
 
-const Panel = ({ children }: PanelProps) => {
-    return <Grow data-role={"panel"}>{children}</Grow>;
+const Panel = ({ flex, children }: PanelProps) => {
+    return (
+        <Grow data-role={"panel"} flex={flex ?? 1}>
+            {children}
+        </Grow>
+    );
 };
 
 Content.Panel = Panel;
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig.tsx
index 3266245df3c..64753b1c539 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig.tsx
@@ -28,6 +28,7 @@ export function useFileManagerViewConfig() {
                 filtersToWhere: [...(browser.filtersToWhere || [])]
             },
             fileDetails: {
+                groupFields: config.fileDetails?.groupFields ?? false,
                 width: config.fileDetails?.width ?? "1000px",
                 fields: config.fileDetails?.fields ?? []
             }
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/FileDetails/GroupFields.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/FileDetails/GroupFields.tsx
new file mode 100644
index 00000000000..234c6b91b3f
--- /dev/null
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/FileDetails/GroupFields.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { Property } from "@webiny/react-properties";
+
+export interface GroupFieldsProps {
+    value: boolean;
+}
+
+export const GroupFields: React.FC<GroupFieldsProps> = ({ value }) => {
+    return (
+        <Property id="fileDetails" name={"fileDetails"}>
+            <Property id={`drawer:groupFields`} name={"groupFields"} value={value} />
+        </Property>
+    );
+};
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/FileDetails/index.ts b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/FileDetails/index.ts
index b60732241f4..468b550648f 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/FileDetails/index.ts
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/FileDetails/index.ts
@@ -1,14 +1,17 @@
 import { Field, FieldConfig } from "./Field";
 import { createScopedFieldDecorator } from "./FieldDecorator";
 import { Width } from "./Width";
+import { GroupFields } from "./GroupFields";
 
 export interface FileDetailsConfig {
     width: string;
+    groupFields: boolean;
     fields: FieldConfig[];
 }
 
 export const FileDetails = {
     Width,
+    GroupFields,
     Field,
     ExtensionField: {
         createDecorator: createScopedFieldDecorator("fm.fileDetails.extensionFields")
diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/index.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/index.tsx
index 6815276b3b8..7a9240f8646 100644
--- a/packages/app-file-manager/src/modules/FileManagerRenderer/index.tsx
+++ b/packages/app-file-manager/src/modules/FileManagerRenderer/index.tsx
@@ -22,6 +22,8 @@ export const FileManagerRendererModule = () => {
                 <FileDetails.Field name={"name"} element={<Name />} />
                 <FileDetails.Field name={"tags"} element={<Tags />} />
                 <FileDetails.Field name={"aliases"} element={<Aliases />} />
+                <FileDetails.GroupFields value={false} />
+                <FileDetails.Width value={"1000px"} />
             </FileManagerConfig>
         </>
     );