Project panel is resizable

caprover · Oct 5, 2024 · 3a2a1f9 · 3a2a1f9
1 parent d4848eb
commit 3a2a1f9
Show file tree

Hide file tree

Showing 3 changed files with 1,658 additions and 1,589 deletions.
diff --git a/src/containers/apps/AppsTable.tsx b/src/containers/apps/AppsTable.tsx
@@ -10,7 +10,17 @@ import {
 } from '@ant-design/icons'
 
 import type { TreeDataNode, TreeProps } from 'antd'
-import { Button, Card, Col, Input, Row, Table, Tag, Tooltip, Tree } from 'antd'
+import {
+    Button,
+    Card,
+    Input,
+    Row,
+    Splitter,
+    Table,
+    Tag,
+    Tooltip,
+    Tree,
+} from 'antd'
 import { ColumnProps } from 'antd/lib/table'
 import { History } from 'history'
 import React, { Component, Fragment } from 'react'
@@ -21,6 +31,7 @@ import { IMobileComponent } from '../../models/ContainerProps'
 import ProjectDefinition from '../../models/ProjectDefinition'
 import { localize } from '../../utils/Language'
 import Logger from '../../utils/Logger'
+import StorageHelper from '../../utils/StorageHelper'
 import NewTabLink from '../global/NewTabLink'
 import Timestamp from '../global/Timestamp'
 import { IAppDef } from './AppDefinition'
@@ -466,15 +477,30 @@ class AppsTable extends Component<
                                 width: '100%',
                             }}
                         >
-                            <Row
-                                gutter={[16, 16]}
-                                style={{ marginBottom: 16 }}
-                                justify={'center'}
+                            <Splitter
+                                onResizeEnd={(numbers) => {
+                                    const initialPercent =
+                                        numbers[0] / (numbers[0] + numbers[1])
+                                    StorageHelper.setAppProjectSplitRatioInLocalStorage(
+                                        initialPercent
+                                    )
+                                }}
+                                style={{
+                                    marginBottom: 16,
+                                }}
                             >
-                                <Col span={5}>
+                                <Splitter.Panel
+                                    style={{ marginRight: 10 }}
+                                    defaultSize={`${Math.floor(
+                                        StorageHelper.getAppProjectSplitRatioFromLocalStorage() *
+                                            100
+                                    )}%`}
+                                    min="10%"
+                                    max="60%"
+                                >
                                     {self.createProjectTreeView()}
-                                </Col>
-                                <Col span={19} style={{ maxWidth: 1200 }}>
+                                </Splitter.Panel>
+                                <Splitter.Panel style={{ marginLeft: 10 }}>
                                     {self.createAppTableHeader()}
                                     <Table<TableData>
                                         rowKey="appName"
@@ -515,8 +541,8 @@ class AppsTable extends Component<
                                     />
 
                                     {self.createDescriptionPanel()}
-                                </Col>
-                            </Row>
+                                </Splitter.Panel>
+                            </Splitter>
                         </div>
                     )}
                 </Row>

diff --git a/src/utils/StorageHelper.ts b/src/utils/StorageHelper.ts
@@ -13,6 +13,7 @@ const AUTH_KEY = 'CAPROVER_AUTH_KEY'
 const SIDER_COLLAPSED_STATE = 'CAPROVER_SIDER_COLLAPSED_STATE'
 const DARK_MODE = 'CAPROVER_DARK_MODE'
 const LANGUAGE = 'CAPROVER_LANGUAGE'
+const APP_PROJECT_SPLIT_RATIO = 'APP_PROJECT_SPLIT_RATIO'
 
 class StorageHelper {
     getAuthKeyFromStorage() {
@@ -70,6 +71,15 @@ class StorageHelper {
         const language = localStorage.getItem(LANGUAGE)
         return language ? language : navigator.language
     }
+
+    setAppProjectSplitRatioInLocalStorage(ratio: number) {
+        localStorage.setItem(APP_PROJECT_SPLIT_RATIO, `${ratio || 0}`)
+    }
+
+    getAppProjectSplitRatioFromLocalStorage(): number {
+        const ratio = localStorage.getItem(APP_PROJECT_SPLIT_RATIO)
+        return ratio ? parseFloat(ratio) : 0.2 // Default to 20% if not set
+    }
 }
 
 const instance = new StorageHelper()