Edit app (rename, tags, description) done. Search for TODO

caprover · Sep 30, 2024 · 382396a · 382396a
1 parent e49e1f7
commit 382396a
Show file tree

Hide file tree

Showing 4 changed files with 303 additions and 172 deletions.
diff --git a/src/containers/apps/AppsTable.tsx b/src/containers/apps/AppsTable.tsx
@@ -3,7 +3,6 @@ import {
     CodeOutlined,
     DeleteOutlined,
     DisconnectOutlined,
-    EditOutlined,
     FolderAddOutlined,
     LinkOutlined,
     LoadingOutlined,
@@ -27,6 +26,7 @@ import NewTabLink from '../global/NewTabLink'
 import Timestamp from '../global/Timestamp'
 import { IAppDef } from './AppDefinition'
 import onDeleteAppClicked from './DeleteAppConfirm'
+import EditableSpan from './EditableProjectName'
 
 const ALL_APPS = 'ALL_APPS'
 const ROOT_APPS = 'ROOT_APPS'
@@ -591,7 +591,6 @@ class AppsTable extends Component<
     createAppTableHeader(): React.ReactNode {
         const self = this
         let projectName = ''
-
         let editable = false
 
         if (this.state.selectedProjectId === ALL_APPS) {
@@ -620,57 +619,26 @@ class AppsTable extends Component<
                 }
             }
 
-            projectName = breadCrumbs
-                .map((id) => projectsMap[id]?.name || '')
-                .join(' > ')
+            projectName =
+                '> ' +
+                breadCrumbs.map((id) => projectsMap[id]?.name || '').join(' > ')
         }
 
-        const className = 'edit-icon-' + self.state.selectedProjectId
-
         if (!editable) {
             return <h3>{projectName}</h3>
         } else {
-            const editProjectClicked = function () {
+            const editProjectClicked = () => {
                 self.props.history.push(
                     '/apps/projects/' + self.state.selectedProjectId
                 )
             }
 
             return (
-                <h3
-                    style={{
-                        position: 'relative',
-                        display: 'inline-block',
-                        cursor: 'pointer',
-                        paddingRight: 20,
-                    }}
-                    onClick={editProjectClicked}
-                    onMouseEnter={(e) => {
-                        const editIcon = e.currentTarget.querySelector(
-                            '.' + className
-                        ) as HTMLElement
-                        if (editIcon) editIcon.style.opacity = '1'
-                    }}
-                    onMouseLeave={(e) => {
-                        const editIcon = e.currentTarget.querySelector(
-                            '.' + className
-                        ) as HTMLElement
-                        if (editIcon) editIcon.style.opacity = '0'
-                    }}
-                >
-                    {projectName}
-                    <span
-                        className={className}
-                        style={{
-                            marginLeft: 10,
-                            opacity: 0,
-                            transition: 'opacity 0.3s',
-                        }}
-                    >
-                        <ClickableLink onLinkClicked={editProjectClicked}>
-                            <EditOutlined />
-                        </ClickableLink>
-                    </span>
+                <h3>
+                    <EditableSpan
+                        titleName={projectName}
+                        onEditClick={editProjectClicked}
+                    />
                 </h3>
             )
         }

diff --git a/src/containers/apps/EditableProjectName.tsx b/src/containers/apps/EditableProjectName.tsx
@@ -0,0 +1,66 @@
+import { EditOutlined } from '@ant-design/icons'
+import React from 'react'
+import Utils from '../../utils/Utils'
+import ClickableLink from '../global/ClickableLink'
+
+interface EditableSpanProps {
+    titleName: string
+    onEditClick: () => void
+}
+
+class EditableSpan extends React.Component<EditableSpanProps> {
+    private className: string
+
+    constructor(props: EditableSpanProps) {
+        super(props)
+        this.className = `edit-icon-${Utils.hashCode(props.titleName)}`
+    }
+
+    handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
+        const editIcon = e.currentTarget.querySelector(
+            '.' + this.className
+        ) as HTMLElement
+        if (editIcon) editIcon.style.opacity = '1'
+    }
+
+    handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
+        const editIcon = e.currentTarget.querySelector(
+            '.' + this.className
+        ) as HTMLElement
+        if (editIcon) editIcon.style.opacity = '0'
+    }
+
+    render() {
+        const { titleName: projectName, onEditClick } = this.props
+
+        return (
+            <span
+                style={{
+                    position: 'relative',
+                    display: 'inline-block',
+                    cursor: 'pointer',
+                    paddingRight: 20,
+                }}
+                onClick={onEditClick}
+                onMouseEnter={this.handleMouseEnter}
+                onMouseLeave={this.handleMouseLeave}
+            >
+                {projectName}
+                <span
+                    className={this.className}
+                    style={{
+                        marginLeft: 10,
+                        opacity: 0,
+                        transition: 'opacity 0.3s',
+                    }}
+                >
+                    <ClickableLink onLinkClicked={onEditClick}>
+                        <EditOutlined />
+                    </ClickableLink>
+                </span>
+            </span>
+        )
+    }
+}
+
+export default EditableSpan