From ffb2b69c1143262a241cd8005dddf263eece6bb1 Mon Sep 17 00:00:00 2001
From: Kasra Bigdeli <kasra85@gmail.com>
Date: Sat, 26 Oct 2024 19:29:30 -0700
Subject: [PATCH] Added better edit functionality
 https://github.com/caprover/caprover/issues/2170

---
 src/containers/apps/appDetails/AppDetails.tsx | 70 ++++++++++++-------
 1 file changed, 46 insertions(+), 24 deletions(-)

diff --git a/src/containers/apps/appDetails/AppDetails.tsx b/src/containers/apps/appDetails/AppDetails.tsx
index 80f2f942..d3af4d61 100644
--- a/src/containers/apps/appDetails/AppDetails.tsx
+++ b/src/containers/apps/appDetails/AppDetails.tsx
@@ -1,21 +1,23 @@
 import {
     CaretRightOutlined,
-    CloseOutlined,
     DeleteOutlined,
     FolderOpenOutlined,
+    MoreOutlined,
     SaveOutlined,
 } from '@ant-design/icons'
+import type { MenuProps } from 'antd'
 import {
     Affix,
     Button,
     Card,
     Col,
+    Dropdown,
     Input,
     Modal,
     Row,
+    Space,
     Tabs,
     Tag,
-    Tooltip,
     Typography,
 } from 'antd'
 import classnames from 'classnames'
@@ -191,6 +193,36 @@ class AppDetails extends ApiComponent<
 
         const appName = app.appName || ''
 
+        const onEditClicked = () => {
+            self.setState({
+                editAppDataForModal: {
+                    parentProjectId: app.projectId || '',
+                    appName: appName,
+                    description: app.description || '',
+                    tags: (app.tags || []).map((it) => it.tagName),
+                },
+            })
+        }
+
+        const items: MenuProps['items'] = [
+            {
+                key: '1',
+                label: (
+                    <ClickableLink onLinkClicked={() => onEditClicked()}>
+                        {localize('apps.edit', 'Edit')}
+                    </ClickableLink>
+                ),
+            },
+            {
+                key: '2',
+                label: (
+                    <ClickableLink onLinkClicked={() => self.goBackToApps()}>
+                        {localize('apps.close_tooltip', 'Close')}
+                    </ClickableLink>
+                ),
+            },
+        ]
+
         return (
             <div style={{ marginTop: 20, marginBottom: 10, width: '100%' }}>
                 <div
@@ -204,19 +236,18 @@ class AppDetails extends ApiComponent<
                 >
                     <Row justify={'end'}>
                         <Col>
-                            {' '}
-                            <ClickableLink
-                                onLinkClicked={() => self.goBackToApps()}
-                            >
-                                <Tooltip
-                                    title={localize(
-                                        'apps.close_tooltip',
-                                        'Close'
-                                    )}
+                            <Dropdown trigger={['click']} menu={{ items }}>
+                                <a
+                                    href="#/"
+                                    onClick={(e) => e.preventDefault()}
                                 >
-                                    <CloseOutlined />
-                                </Tooltip>
-                            </ClickableLink>
+                                    <Space>
+                                        <MoreOutlined
+                                            style={{ fontSize: `1.6em` }}
+                                        />
+                                    </Space>
+                                </a>
+                            </Dropdown>
                         </Col>
                     </Row>
                 </div>
@@ -230,16 +261,7 @@ class AppDetails extends ApiComponent<
                 >
                     <EditableSpan
                         onEditClick={() => {
-                            self.setState({
-                                editAppDataForModal: {
-                                    parentProjectId: app.projectId || '',
-                                    appName: appName,
-                                    description: app.description || '',
-                                    tags: (app.tags || []).map(
-                                        (it) => it.tagName
-                                    ),
-                                },
-                            })
+                            onEditClicked()
                         }}
                     >
                         {appName}