From 3e8258de3c01f4a7596aba7d46ea60b640f334c4 Mon Sep 17 00:00:00 2001 From: Vardan Bansal Date: Thu, 19 Dec 2024 21:16:46 +0530 Subject: [PATCH 01/27] initial implementation for breadcrumbs --- apps/gitness/src/AppV1.tsx | 113 ++++++++++++++++++ .../components/breadcrumbsV1/breadcrumbs.tsx | 38 ++++++ .../breadcrumbsV1/project-selector.tsx | 32 +++++ .../components/breadcrumbsV1/repo-listing.tsx | 32 +++++ .../components/breadcrumbsV1/repo-summary.tsx | 15 +++ apps/gitness/src/main.tsx | 3 +- 6 files changed, 232 insertions(+), 1 deletion(-) create mode 100644 apps/gitness/src/AppV1.tsx create mode 100644 apps/gitness/src/components/breadcrumbsV1/breadcrumbs.tsx create mode 100644 apps/gitness/src/components/breadcrumbsV1/project-selector.tsx create mode 100644 apps/gitness/src/components/breadcrumbsV1/repo-listing.tsx create mode 100644 apps/gitness/src/components/breadcrumbsV1/repo-summary.tsx diff --git a/apps/gitness/src/AppV1.tsx b/apps/gitness/src/AppV1.tsx new file mode 100644 index 000000000..34abc5fd8 --- /dev/null +++ b/apps/gitness/src/AppV1.tsx @@ -0,0 +1,113 @@ +import { I18nextProvider } from 'react-i18next' +import { createBrowserRouter, Outlet, RouteObject, RouterProvider } from 'react-router-dom' + +import { QueryClientProvider } from '@tanstack/react-query' +import { NuqsAdapter } from 'nuqs/adapters/react-router' + +import { TooltipProvider } from '@harnessio/canary' +import { CodeServiceAPIClient } from '@harnessio/code-service-client' +import { Text } from '@harnessio/ui/components' + +import Breadcrumbs from './components/breadcrumbsV1/breadcrumbs' +import ProjectSelector from './components/breadcrumbsV1/project-selector' +import RepoListing from './components/breadcrumbsV1/repo-listing' +import RepoSummary from './components/breadcrumbsV1/repo-summary' +import { AppProvider } from './framework/context/AppContext' +import { ExitConfirmProvider } from './framework/context/ExitConfirmContext' +import { ThemeProvider } from './framework/context/ThemeContext' +import { queryClient } from './framework/queryClient' +import i18n from './i18n/i18n' + +const BASE_URL_PREFIX = `${window.apiUrl || ''}/api/v1` + +export default function AppV1() { + new CodeServiceAPIClient({ + urlInterceptor: (url: string) => `${BASE_URL_PREFIX}${url}`, + responseInterceptor: (response: Response) => { + switch (response.status) { + case 401: + window.location.href = '/signin' + break + } + return response + } + }) + + // Define a custom handle with the breadcrumb property + interface CustomHandle { + breadcrumb?: (params: Record) => string + } + + // Create a new type by intersecting RouteObject with the custom handle + type CustomRouteObject = RouteObject & { + handle?: CustomHandle + } + + const routes: CustomRouteObject[] = [ + { + path: '/', + element: ( + <> + + + + ), + handle: { + breadcrumb: () => 'Landing Page' + }, + children: [ + { + path: '', + element: , + handle: { + breadcrumb: () => 'Select Project' + } + }, + { + path: 'projects/:projectId/repos', + element: , // Placeholder for nested routes + handle: { + breadcrumb: ({ projectId }: { projectId: string }) => {projectId} + }, + children: [ + { + path: '', + element: , + handle: { + breadcrumb: () => 'Repositories' + } + }, + { + path: ':repoId', + element: , + handle: { + breadcrumb: ({ repoId }: { projectId: string; repoId: string }) => `${repoId}` + } + } + ] + } + ] + } + ] + + // Router Configuration + const router = createBrowserRouter(routes) + + return ( + + + + + + + + + + + + + + + + ) +} diff --git a/apps/gitness/src/components/breadcrumbsV1/breadcrumbs.tsx b/apps/gitness/src/components/breadcrumbsV1/breadcrumbs.tsx new file mode 100644 index 000000000..28a0a236b --- /dev/null +++ b/apps/gitness/src/components/breadcrumbsV1/breadcrumbs.tsx @@ -0,0 +1,38 @@ +import { Link, useMatches } from 'react-router-dom' + +function Breadcrumbs() { + const matches = useMatches() + + return ( + + ) +} + +export default Breadcrumbs diff --git a/apps/gitness/src/components/breadcrumbsV1/project-selector.tsx b/apps/gitness/src/components/breadcrumbsV1/project-selector.tsx new file mode 100644 index 000000000..80ca46ee9 --- /dev/null +++ b/apps/gitness/src/components/breadcrumbsV1/project-selector.tsx @@ -0,0 +1,32 @@ +import { useNavigate } from 'react-router-dom' + +const projects = [ + { id: 'devops', name: 'DevOps' }, + { id: 'ci', name: 'CI' }, + { id: 'cd', name: 'CD' } +] + +function ProjectSelector() { + const navigate = useNavigate() + + const handleSelectProject = (projectId: string) => { + navigate(`/projects/${projectId}/repos`) + } + + return ( +
+

Select

+
    + {projects.map(project => ( +
  • + +
    • + ))} +
+
+ ) +} + +export default ProjectSelector diff --git a/apps/gitness/src/components/breadcrumbsV1/repo-listing.tsx b/apps/gitness/src/components/breadcrumbsV1/repo-listing.tsx new file mode 100644 index 000000000..b773ece62 --- /dev/null +++ b/apps/gitness/src/components/breadcrumbsV1/repo-listing.tsx @@ -0,0 +1,32 @@ +import { useNavigate, useParams } from 'react-router-dom' + +const repos = [ + { id: 'uuid', name: 'UUID' }, + { id: 'k8s', name: 'Kubernetes' } +] + +function RepoListing() { + const { projectId } = useParams<{ projectId: string }>() + const navigate = useNavigate() + + const handleSelectRepo = (repoId: string) => { + navigate(`/projects/${projectId}/repos/${repoId}`) + } + + return ( +
+

Repositories in Project {projectId}

+
    + {repos.map(repo => ( +
  • + +
    • + ))} +
+
+ ) +} + +export default RepoListing diff --git a/apps/gitness/src/components/breadcrumbsV1/repo-summary.tsx b/apps/gitness/src/components/breadcrumbsV1/repo-summary.tsx new file mode 100644 index 000000000..57922ed9f --- /dev/null +++ b/apps/gitness/src/components/breadcrumbsV1/repo-summary.tsx @@ -0,0 +1,15 @@ +import { useParams } from 'react-router-dom' + +function RepoSummary() { + const { projectId, repoId } = useParams<{ projectId: string; repoId: string }>() + + return ( +
+

Repository Summary

+

Project ID: {projectId}

+

Repository ID: {repoId}

+
+ ) +} + +export default RepoSummary diff --git a/apps/gitness/src/main.tsx b/apps/gitness/src/main.tsx index d9ff25fa2..ce8e4b25d 100644 --- a/apps/gitness/src/main.tsx +++ b/apps/gitness/src/main.tsx @@ -1,5 +1,6 @@ import { createRoot } from 'react-dom/client' -import App from './App' +// import App from './App' +import App from './AppV1' createRoot(document.getElementById('root')!).render() From aaffaf714924c3ffcf269ca94be5f34f533e3650 Mon Sep 17 00:00:00 2001 From: Vardan Bansal Date: Thu, 19 Dec 2024 22:37:02 +0530 Subject: [PATCH 02/27] cleanup --- apps/gitness/src/AppV1.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/gitness/src/AppV1.tsx b/apps/gitness/src/AppV1.tsx index 34abc5fd8..082af39ef 100644 --- a/apps/gitness/src/AppV1.tsx +++ b/apps/gitness/src/AppV1.tsx @@ -8,7 +8,7 @@ import { TooltipProvider } from '@harnessio/canary' import { CodeServiceAPIClient } from '@harnessio/code-service-client' import { Text } from '@harnessio/ui/components' -import Breadcrumbs from './components/breadcrumbsV1/breadcrumbs' +import BreadcrumbsV1 from './components/breadcrumbsV1/breadcrumbs' import ProjectSelector from './components/breadcrumbsV1/project-selector' import RepoListing from './components/breadcrumbsV1/repo-listing' import RepoSummary from './components/breadcrumbsV1/repo-summary' @@ -48,7 +48,7 @@ export default function AppV1() { path: '/', element: ( <> - + ), From c4c780e27d64bc27393393b7ae3458a32ccf761d Mon Sep 17 00:00:00 2001 From: Vardan Bansal Date: Thu, 19 Dec 2024 23:03:41 +0530 Subject: [PATCH 03/27] fix project selector in breadcrumbs --- apps/gitness/src/AppV1.tsx | 7 +++---- apps/gitness/src/components/breadcrumbsV1/breadcrumbs.tsx | 8 ++++---- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/apps/gitness/src/AppV1.tsx b/apps/gitness/src/AppV1.tsx index 082af39ef..a8039e1a6 100644 --- a/apps/gitness/src/AppV1.tsx +++ b/apps/gitness/src/AppV1.tsx @@ -58,23 +58,22 @@ export default function AppV1() { children: [ { path: '', - element: , handle: { - breadcrumb: () => 'Select Project' + breadcrumb: () => } }, { path: 'projects/:projectId/repos', element: , // Placeholder for nested routes handle: { - breadcrumb: ({ projectId }: { projectId: string }) => {projectId} + breadcrumb: ({ projectId }: { projectId: string }) => {projectId} }, children: [ { path: '', element: , handle: { - breadcrumb: () => 'Repositories' + breadcrumb: () => Repositories } }, { diff --git a/apps/gitness/src/components/breadcrumbsV1/breadcrumbs.tsx b/apps/gitness/src/components/breadcrumbsV1/breadcrumbs.tsx index 28a0a236b..cbb464ecf 100644 --- a/apps/gitness/src/components/breadcrumbsV1/breadcrumbs.tsx +++ b/apps/gitness/src/components/breadcrumbsV1/breadcrumbs.tsx @@ -4,7 +4,7 @@ function Breadcrumbs() { const matches = useMatches() return ( -