Improved icons for projects

caprover · Oct 6, 2024 · 2ea1883 · 2ea1883
1 parent 17362a3
commit 2ea1883
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 13 deletions.
diff --git a/src/containers/apps/AppsTable.tsx b/src/containers/apps/AppsTable.tsx
@@ -1,4 +1,5 @@
 import {
+    CaretRightOutlined,
     CheckOutlined,
     CodeOutlined,
     DeleteOutlined,
@@ -574,13 +575,13 @@ class AppsTable extends Component<
 
     createAppTableHeader(): React.ReactNode {
         const self = this
-        let projectName = ''
+        let projectName = <span></span>
         let editable = false
 
         if (this.state.selectedProjectId === ALL_APPS) {
-            projectName = 'All apps'
+            projectName = <span>All apps from all projects</span>
         } else if (this.state.selectedProjectId === ROOT_APPS) {
-            projectName = 'Root'
+            projectName = <span>Root</span>
         } else {
             editable = true
             const projectsMap: { [key: string]: ProjectDefinition } = {}
@@ -603,9 +604,27 @@ class AppsTable extends Component<
                 }
             }
 
-            projectName = breadCrumbs
-                .map((id) => projectsMap[id]?.name || '')
-                .join(' > ')
+            projectName = (
+                <span>
+                    {breadCrumbs
+                        .map((id) => projectsMap[id]?.name || '')
+                        .map((name, index) => (
+                            <>
+                                <span
+                                    style={{
+                                        marginLeft: 5,
+                                        marginRight: 5,
+                                    }}
+                                >
+                                    {name}
+                                </span>
+                                {index < breadCrumbs.length - 1 && (
+                                    <CaretRightOutlined />
+                                )}
+                            </>
+                        ))}
+                </span>
+            )
         }
 
         if (!editable) {
@@ -620,8 +639,7 @@ class AppsTable extends Component<
             return (
                 <h4>
                     <EditableSpan onEditClick={editProjectClicked}>
-                        <FolderOpenOutlined style={{ marginRight: 5 }} />{' '}
-                        {projectName}
+                        <FolderOpenOutlined /> {projectName}
                     </EditableSpan>
                 </h4>
             )

diff --git a/src/containers/apps/appDetails/AppDetails.tsx b/src/containers/apps/appDetails/AppDetails.tsx
@@ -1,4 +1,10 @@
-import { CloseOutlined, DeleteOutlined, SaveOutlined } from '@ant-design/icons'
+import {
+    CaretRightOutlined,
+    CloseOutlined,
+    DeleteOutlined,
+    FolderOpenOutlined,
+    SaveOutlined,
+} from '@ant-design/icons'
 import {
     Affix,
     Button,
@@ -135,6 +141,8 @@ class AppDetails extends ApiComponent<
 
         const projectsBreadCrumbs = [] as ProjectDefinition[]
 
+        // This loop constructs the project breadcrumbs by traversing the project hierarchy
+        // starting from the current project and moving up to its parent projects.
         while (currentProjectId) {
             const currentProject: ProjectDefinition | undefined =
                 projectMap[currentProjectId]
@@ -148,11 +156,26 @@ class AppDetails extends ApiComponent<
 
         return (
             <div style={{ marginBottom: 10, fontSize: 12 }}>
+                <FolderOpenOutlined
+                    style={{
+                        marginRight: 5,
+                    }}
+                />
                 {projectsBreadCrumbs.map((project, index) => (
-                    <span key={project.id}>
-                        <span style={{ marginLeft: 5 }}> {' > '}</span>
-                        {project.name}
-                    </span>
+                    <>
+                        <span
+                            style={{
+                                marginLeft: 5,
+                                marginRight: 5,
+                            }}
+                            key={project.id}
+                        >
+                            {project.name}
+                        </span>
+                        {index < projectsBreadCrumbs.length - 1 && (
+                            <CaretRightOutlined />
+                        )}
+                    </>
                 ))}
             </div>
         )