added folder icon

caprover · Oct 5, 2024 · 17362a3 · 17362a3
1 parent 6d96135
commit 17362a3
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 16 deletions.
diff --git a/src/containers/apps/AppsTable.tsx b/src/containers/apps/AppsTable.tsx
@@ -4,6 +4,7 @@ import {
     DeleteOutlined,
     DisconnectOutlined,
     FolderAddOutlined,
+    FolderOpenOutlined,
     LinkOutlined,
     LoadingOutlined,
     UnorderedListOutlined,
@@ -602,9 +603,9 @@ class AppsTable extends Component<
                 }
             }
 
-            projectName =
-                '> ' +
-                breadCrumbs.map((id) => projectsMap[id]?.name || '').join(' > ')
+            projectName = breadCrumbs
+                .map((id) => projectsMap[id]?.name || '')
+                .join(' > ')
         }
 
         if (!editable) {
@@ -618,10 +619,10 @@ class AppsTable extends Component<
 
             return (
                 <h4>
-                    <EditableSpan
-                        titleName={projectName}
-                        onEditClick={editProjectClicked}
-                    />
+                    <EditableSpan onEditClick={editProjectClicked}>
+                        <FolderOpenOutlined style={{ marginRight: 5 }} />{' '}
+                        {projectName}
+                    </EditableSpan>
                 </h4>
             )
         }

diff --git a/src/containers/apps/EditableSpan.tsx b/src/containers/apps/EditableSpan.tsx
@@ -1,19 +1,20 @@
 import { EditOutlined } from '@ant-design/icons'
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import Utils from '../../utils/Utils'
 import ClickableLink from '../global/ClickableLink'
 
-interface EditableSpanProps {
-    titleName: string
+type EditableSpanProps = PropsWithChildren<{
     onEditClick: () => void
-}
+}>
 
 class EditableSpan extends React.Component<EditableSpanProps> {
     private className: string
 
     constructor(props: EditableSpanProps) {
         super(props)
-        this.className = `edit-icon-${Utils.hashCode(props.titleName)}`
+        this.className = `edit-icon-${Utils.hashCode(
+            props.children ? props.children.toString() : 'none'
+        )}`
     }
 
     handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -31,7 +32,7 @@ class EditableSpan extends React.Component<EditableSpanProps> {
     }
 
     render() {
-        const { titleName: projectName, onEditClick } = this.props
+        const { children, onEditClick } = this.props
 
         return (
             <span
@@ -45,7 +46,7 @@ class EditableSpan extends React.Component<EditableSpanProps> {
                 onMouseEnter={this.handleMouseEnter}
                 onMouseLeave={this.handleMouseLeave}
             >
-                {projectName}
+                {children}
                 <span
                     className={this.className}
                     style={{

diff --git a/src/containers/apps/appDetails/AppDetails.tsx b/src/containers/apps/appDetails/AppDetails.tsx
@@ -187,7 +187,6 @@ class AppDetails extends ApiComponent<
 
                 <h2 style={{ marginBottom: 5, marginTop: 0, marginLeft: 12 }}>
                     <EditableSpan
-                        titleName={appName}
                         onEditClick={() => {
                             self.setState({
                                 editAppDataForModal: {
@@ -200,7 +199,9 @@ class AppDetails extends ApiComponent<
                                 },
                             })
                         }}
-                    />
+                    >
+                        {appName}
+                    </EditableSpan>
                 </h2>
 
                 {app.tags && app.tags.length > 0 && (