feat: update project navigation links and refactor ProjectList component

Author: AbhishekA1509

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.22.6",
+        "@devtron-labs/devtron-fe-common-lib": "1.22.6-beta-2",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/Pages-Devtron-2.0/ApplicationManagement/Overview/constants.ts

@@ -12,7 +12,7 @@ export const GLANCE_METRICS_CARDS_CONFIG: Record<
     [GlanceMetricKeys.PROJECTS]: {
         iconName: 'ic-bg-project',
         metricTitle: 'Projects',
-        redirectionLink: COMMON_URLS.APPLICATION_MANAGEMENT_PROJECTS,
+        redirectionLink: COMMON_URLS.GLOBAL_CONFIG_PROJECTS,
         tooltipContent: 'Number of projects',
     },
     [GlanceMetricKeys.YOUR_APPLICATIONS]: {

src/components/Navigation/constants.ts

@@ -154,13 +154,6 @@ const NAVIGATION_LIST: NavigationGroupType[] = [
                 href: URLS.APPLICATION_MANAGEMENT_BULK_EDIT,
             },
             ...(APPLICATION_MANAGEMENT_TEMPLATES_NAV_ITEM ? [APPLICATION_MANAGEMENT_TEMPLATES_NAV_ITEM] : []),
-            {
-                title: 'Projects',
-                dataTestId: 'click-on-projects',
-                id: 'application-management-projects',
-                icon: 'ic-folder',
-                href: COMMON_URLS.APPLICATION_MANAGEMENT_PROJECTS,
-            },
             {
                 title: 'Configurations',
                 dataTestId: 'click-on-configurations',
@@ -310,6 +303,14 @@ const NAVIGATION_LIST: NavigationGroupType[] = [
                 href: URLS.GLOBAL_CONFIG_DOCKER,
                 isAvailableInEA: true,
             },
+            {
+                title: 'Projects',
+                dataTestId: 'click-on-projects',
+                id: 'global-configuration-projects',
+                icon: 'ic-folder',
+                href: COMMON_URLS.GLOBAL_CONFIG_PROJECTS,
+                isAvailableInEA: true,
+            },
             {
                 title: 'Authorization',
                 dataTestId: 'authorization',

src/components/checkList/AppCheckList.tsx

@@ -42,7 +42,7 @@ export class AppCheckList extends Component<AppCheckListProps, AppCheckListState
                     )}
                     {!project && (
                         <NavLink
-                            to={COMMON_URLS.APPLICATION_MANAGEMENT_PROJECTS}
+                            to={COMMON_URLS.GLOBAL_CONFIG_PROJECTS}
                             className="dc__no-decor  mt-8 flex left"
                             style={{ color: project ? `var(--N500)` : `var(--B500)` }}
                         >

src/components/checkList/ChartCheckList.tsx

@@ -32,7 +32,7 @@ export class ChartCheckList extends Component<ChartCheckListProps, {}> {
                 <div className="fs-13">
                     {!this.props.chartChecklist.project && (
                         <NavLink
-                            to={COMMON_URLS.APPLICATION_MANAGEMENT_PROJECTS}
+                            to={COMMON_URLS.GLOBAL_CONFIG_PROJECTS}
                             className="dc__no-decor  mt-8 flex left"
                             style={{ color: project ? `var(--N500)` : `var(--B500)` }}
                         >

src/components/common/navigation/NavigationRoutes.tsx

@@ -106,7 +106,6 @@ import './navigation.scss'
 
 const Charts = lazy(() => import('../../charts/Charts'))
 
-const ProjectList = lazy(() => import('@Components/project/ProjectList'))
 const GlobalConfig = lazy(() => import('../../globalConfigurations/GlobalConfiguration'))
 const BulkEdit = lazy(() => import('../../bulkEdits/BulkEdits'))
 const ResourceBrowser = lazy(() => import('../../ResourceBrowser/ResourceBrowserRouter'))
@@ -604,11 +603,6 @@ const NavigationRoutes = ({ reloadVersionConfig }: Readonly<NavigationRoutesType
                                                       path={URLS.APPLICATION_MANAGEMENT_BULK_EDIT}
                                                       render={() => <BulkEdit />}
                                                   />,
-                                                  <Route path={CommonURLS.APPLICATION_MANAGEMENT_PROJECTS}>
-                                                      {(props) => (
-                                                          <ProjectList {...props} isSuperAdmin={isSuperAdmin} />
-                                                      )}
-                                                  </Route>,
                                                   <Route path={CommonURLS.APPLICATION_MANAGEMENT_CONFIGURATIONS}>
                                                       <ApplicationManagementConfigurationsRouter />
                                                   </Route>,

src/components/globalConfigurations/GlobalConfiguration.tsx

@@ -55,6 +55,7 @@ const Clusters = lazy(() => import('@Pages/GlobalConfigurations/ClustersAndEnvir
 const ChartRepo = lazy(() => import('@Components/chartRepo/ChartRepo'))
 const ExternalLinks = lazy(() => import('@Components/externalLinks/ExternalLinks'))
 const Authorization = lazy(() => import('@Pages/GlobalConfigurations/Authorization'))
+const ProjectList = lazy(() => import('@Components/project/ProjectList'))
 
 export default function GlobalConfiguration(props) {
     const location = useLocation()
@@ -214,12 +215,16 @@ const NavItem = ({ serverMode }) => {
     }
 
     const sideNavigationList: SideNavigationProps['list'] = [
-        ...(serverMode === SERVER_MODE.FULL ? [{
-            id: 'host-url',
-            title: 'Host URL',
-            dataTestId: 'global-configurations-host-url',
-            href: URLS.GLOBAL_CONFIG_HOST_URL,
-        }] : []),
+        ...(serverMode === SERVER_MODE.FULL
+            ? [
+                  {
+                      id: 'host-url',
+                      title: 'Host URL',
+                      dataTestId: 'global-configurations-host-url',
+                      href: URLS.GLOBAL_CONFIG_HOST_URL,
+                  },
+              ]
+            : []),
         {
             title: 'External Links',
             dataTestId: 'click-on-configurations-external-links',
@@ -244,6 +249,12 @@ const NavItem = ({ serverMode }) => {
             dataTestId: 'global-configurations-container-oci-registry',
             href: URLS.GLOBAL_CONFIG_DOCKER,
         },
+        {
+            id: 'global-configurations-projects',
+            title: 'Projects',
+            dataTestId: 'global-configurations-projects',
+            href: CommonURLS.GLOBAL_CONFIG_PROJECTS,
+        },
         {
             id: 'authorization',
             title: 'Authorization',
@@ -299,23 +310,17 @@ const Body = ({ getHostURLConfig, serverMode, handleChecklistUpdate, isSuperAdmi
             return URLS.GLOBAL_CONFIG_CLUSTER
         }
         if (serverMode === SERVER_MODE.EA_ONLY) {
-            return CommonURLS.APPLICATION_MANAGEMENT_PROJECTS
+            return CommonURLS.GLOBAL_CONFIG_PROJECTS
         }
         return URLS.GLOBAL_CONFIG_HOST_URL
     }
 
     return (
         <Switch>
-            <Route
-                key={URLS.GLOBAL_CONFIG_EXTERNAL_LINKS}
-                path={URLS.GLOBAL_CONFIG_EXTERNAL_LINKS}
-            >
+            <Route key={URLS.GLOBAL_CONFIG_EXTERNAL_LINKS} path={URLS.GLOBAL_CONFIG_EXTERNAL_LINKS}>
                 <ExternalLinks />
             </Route>
-            <Route
-                key={URLS.GLOBAL_CONFIG_CHART_REPO}
-                path={URLS.GLOBAL_CONFIG_CHART_REPO}
-            >
+            <Route key={URLS.GLOBAL_CONFIG_CHART_REPO} path={URLS.GLOBAL_CONFIG_CHART_REPO}>
                 {(props) => <ChartRepo {...props} isSuperAdmin={isSuperAdmin} />}
             </Route>
             <Route
@@ -324,6 +329,10 @@ const Body = ({ getHostURLConfig, serverMode, handleChecklistUpdate, isSuperAdmi
                     return <Clusters />
                 }}
             />
+            <Route key={CommonURLS.GLOBAL_CONFIG_PROJECTS} path={CommonURLS.GLOBAL_CONFIG_PROJECTS}>
+                <ProjectList isSuperAdmin={isSuperAdmin} />
+            </Route>
+
             {!window._env_.K8S_CLIENT && [
                 ...(serverMode !== SERVER_MODE.EA_ONLY
                     ? [

src/components/project/ProjectList.tsx

@@ -22,21 +22,14 @@ import {
     ErrorScreenNotAuthorized,
     ToastVariantType,
     ToastManager,
-    PageHeader,
-    BreadCrumb,
-    useBreadcrumb,
-    getApplicationManagementBreadcrumb,
-    BreadcrumbText,
-    DOCUMENTATION,
 } from '@devtron-labs/devtron-fe-common-lib'
-import { HEADER_TEXT, ViewType } from '../../config'
+import { ViewType } from '../../config'
 import { createProject, getProjectList } from './service'
 import { Project } from './Project'
 import { ProjectListState, ProjectType, ProjectListProps } from './types'
 import { ReactComponent as Add } from '../../assets/icons/ic-add.svg'
 import './project.scss'
 import { PROJECT_EXIST_MSG, REQUIRED_FIELD_MSG } from '../../config/constantMessaging'
-import { useLocation } from 'react-router-dom'
 
 export default class ProjectList extends Component<ProjectListProps, ProjectListState> {
     constructor(props) {
@@ -59,6 +52,8 @@ export default class ProjectList extends Component<ProjectListProps, ProjectList
     }
 
     getProjectList = () => {
+        this.setState({ view: ViewType.LOADING })
+
         getProjectList()
             .then((response) => {
                 this.setState({
@@ -168,7 +163,7 @@ export default class ProjectList extends Component<ProjectListProps, ProjectList
             })
             .catch((errors) => {
                 showError(errors)
-                this.setState({ view: ViewType.ERROR, code: errors.code, loadingData: false })
+                this.setState({ loadingData: false })
             })
     }
 
@@ -207,45 +202,12 @@ export default class ProjectList extends Component<ProjectListProps, ProjectList
         }
     }
 
-    renderBreadcrumbs = () => {
-        const { pathname } = useLocation()
-
-        const { breadcrumbs } = useBreadcrumb(
-            {
-                alias: {
-                    ...getApplicationManagementBreadcrumb(),
-                    projects: { component: <BreadcrumbText heading="Projects" isActive /> },
-                },
-            },
-            [pathname],
-        )
-
-        return <BreadCrumb breadcrumbs={breadcrumbs} />
-    }
-
-    renderPageHeader = () => (
-        <PageHeader
-            breadCrumbs={this.renderBreadcrumbs}
-            isBreadcrumbs
-            tippyProps={{
-                isTippyCustomized: true,
-                tippyRedirectLink: HEADER_TEXT.PROJECTS.docLink,
-                tippyMessage: HEADER_TEXT.PROJECTS.description,
-                tippyHeader: 'Projects',
-            }}
-            docPath={DOCUMENTATION.APP_MANAGEMENT}
-        />
-    )
-
     render() {
         if (!this.props.isSuperAdmin) {
             return (
-                <>
-                    {this.renderPageHeader()}
-                    <div className="dc__align-reload-center">
-                        <ErrorScreenNotAuthorized />
-                    </div>
-                </>
+                <div className="dc__align-reload-center">
+                    <ErrorScreenNotAuthorized />
+                </div>
             )
         }
         if (this.state.view === ViewType.LOADING) {
@@ -254,26 +216,23 @@ export default class ProjectList extends Component<ProjectListProps, ProjectList
         if (this.state.view === ViewType.ERROR) {
             return (
                 <div className="dc__align-reload-center">
-                    <ErrorScreenManager code={this.state.code} />
+                    <ErrorScreenManager code={this.state.code} reload={this.getProjectList} />
                 </div>
             )
         }
         return (
-            <>
-                {this.renderPageHeader()}
-                <section className="flex-grow-1 flex top p-24 bg__secondary dc__overflow-auto">
-                    <div className="project-list-container flex-grow-1">
-                        {this.renderAddProject()}
-                        {this.state.projects.map((project, index) => {
-                            return (
-                                <React.Fragment key={`${project.name}-${index}`}>
-                                    {this.renderProjects(project, index)}
-                                </React.Fragment>
-                            )
-                        })}
-                    </div>
-                </section>
-            </>
+            <section className="flex-grow-1 flex top p-24 bg__secondary dc__overflow-auto">
+                <div className="project-list-container flex-grow-1">
+                    {this.renderAddProject()}
+                    {this.state.projects.map((project, index) => {
+                        return (
+                            <React.Fragment key={`${project.name}-${index}`}>
+                                {this.renderProjects(project, index)}
+                            </React.Fragment>
+                        )
+                    })}
+                </div>
+            </section>
         )
     }
 }

src/config/constants.ts

@@ -367,11 +367,6 @@ export const HEADER_TEXT: Record<string, { title: string; description: string; d
         description: 'Manage notifications for build and deployment pipelines.',
         docLink: "GLOBAL_CONFIG_NOTIFICATION"
     },
-    PROJECTS: {
-        title: 'Projects',
-        description: "Manage your organization's projects.",
-        docLink: "GLOBAL_CONFIG_PROJECT"
-    },
     SSO_LOGIN: {
         title: 'SSO Login Service',
         description: 'Configure and manage login service for your organization.',

yarn.lock

@@ -1729,9 +1729,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@devtron-labs/devtron-fe-common-lib@npm:1.22.6":
-  version: 1.22.6
-  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.22.6"
+"@devtron-labs/devtron-fe-common-lib@npm:1.22.6-beta-2":
+  version: 1.22.6-beta-2
+  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.22.6-beta-2"
   dependencies:
     "@codemirror/autocomplete": "npm:6.18.6"
     "@codemirror/lang-json": "npm:6.0.1"
@@ -1785,7 +1785,7 @@ __metadata:
     react-select: 5.8.0
     rxjs: ^7.8.1
     yaml: ^2.4.1
-  checksum: 10c0/2d549cb24e69a87d7cfdc32b12eee4dca51bac33408f81afba06d297a50753b62de2215fe44c7ac0237768fd3909939465201e559c8c6f3d13c0b119eab92e30
+  checksum: 10c0/b9802ebfbbb6b547d81c4585ad560e4a1a41808e065f9d5da090c5b754cd6ac67fd764ff446790c594365ca7cf1992b3c12588450c692d8bb1871256b425f491
   languageName: node
   linkType: hard
 
@@ -5599,7 +5599,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "dashboard@workspace:."
   dependencies:
-    "@devtron-labs/devtron-fe-common-lib": "npm:1.22.6"
+    "@devtron-labs/devtron-fe-common-lib": "npm:1.22.6-beta-2"
     "@esbuild-plugins/node-globals-polyfill": "npm:0.2.3"
     "@playwright/test": "npm:^1.32.1"
     "@rjsf/core": "npm:^5.13.3"