From d4b05b0faf18f9d53a4f008ef6e457275c4c7c97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20St=C3=B8vring?= <mail@simonbs.dk>
Date: Fri, 20 Oct 2023 14:18:30 +0200
Subject: [PATCH 1/2] Makes editURL optional

---
 __test__/projects/ProjectPageState.test.ts    | 27 +++++++------------
 .../projects/domain/IOpenApiSpecification.ts  |  2 +-
 .../view/ProjectsPageTrailingToolbarItem.tsx  |  8 +++---
 3 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/__test__/projects/ProjectPageState.test.ts b/__test__/projects/ProjectPageState.test.ts
index 63773dab..a67bf3dd 100644
--- a/__test__/projects/ProjectPageState.test.ts
+++ b/__test__/projects/ProjectPageState.test.ts
@@ -43,8 +43,7 @@ test("It selects the first project when there is only one project", async () =>
         specifications: [{
           id: "hello",
           name: "hello.yml",
-          url: "https://example.com/hello.yml",
-          editURL: "https://example.com/edit/hello.yml"
+          url: "https://example.com/hello.yml"
         }]
       }]
     }]
@@ -71,13 +70,11 @@ test("It selects the first version and specification of the specified project",
         specifications: [{
           id: "hello1",
           name: "hello1.yml",
-          url: "https://example.com/hello.yml",
-          editURL: "https://example.com/edit/hello.yml"
+          url: "https://example.com/hello.yml"
         }, {
           id: "hello2",
           name: "hello2.yml",
-          url: "https://example.com/hello.yml",
-          editURL: "https://example.com/edit/hello.yml"
+          url: "https://example.com/hello.yml"
         }]
       }, {
         id: "baz2",
@@ -113,8 +110,7 @@ test("It selects the first specification of the specified project and version",
         specifications: [{
           id: "hello1",
           name: "hello1.yml",
-          url: "https://example.com/hello.yml",
-          editURL: "https://example.com/edit/hello.yml"
+          url: "https://example.com/hello.yml"
         }]
       }]
     }]
@@ -146,13 +142,11 @@ test("It selects the specification of the specified version", async () => {
         specifications: [{
           id: "hello1",
           name: "hello1.yml",
-          url: "https://example.com/hello.yml",
-          editURL: "https://example.com/edit/hello.yml"
+          url: "https://example.com/hello.yml"
         }, {
           id: "hello2",
           name: "hello2.yml",
-          url: "https://example.com/hello.yml",
-          editURL: "https://example.com/edit/hello.yml"
+          url: "https://example.com/hello.yml"
         }]
       }]
     }]
@@ -185,13 +179,11 @@ test("It selects the specified project, version, and specification", async () =>
         specifications: [{
           id: "hello1",
           name: "hello1.yml",
-          url: "https://example.com/hello.yml",
-          editURL: "https://example.com/edit/hello.yml"
+          url: "https://example.com/hello.yml"
         }, {
           id: "hello2",
           name: "hello2.yml",
-          url: "https://example.com/hello.yml",
-          editURL: "https://example.com/edit/hello.yml"
+          url: "https://example.com/hello.yml"
         }]
       }]
     }]
@@ -245,8 +237,7 @@ test("It errors when the selected specification cannot be found", async () => {
         specifications: [{
           id: "hello",
           name: "hello.yml",
-          url: "https://example.com/hello.yml",
-          editURL: "https://example.com/edit/hello.yml"
+          url: "https://example.com/hello.yml"
         }]
       }]
     }]
diff --git a/src/features/projects/domain/IOpenApiSpecification.ts b/src/features/projects/domain/IOpenApiSpecification.ts
index 0ba6f31e..30a52a35 100644
--- a/src/features/projects/domain/IOpenApiSpecification.ts
+++ b/src/features/projects/domain/IOpenApiSpecification.ts
@@ -2,5 +2,5 @@ export default interface IOpenApiSpecification {
   readonly id: string
   readonly name: string
   readonly url: string
-  readonly editURL: string
+  readonly editURL?: string
 }
diff --git a/src/features/projects/view/ProjectsPageTrailingToolbarItem.tsx b/src/features/projects/view/ProjectsPageTrailingToolbarItem.tsx
index 45538c79..c923edc0 100644
--- a/src/features/projects/view/ProjectsPageTrailingToolbarItem.tsx
+++ b/src/features/projects/view/ProjectsPageTrailingToolbarItem.tsx
@@ -29,9 +29,11 @@ const ProjectsPageTrailingToolbarItem = (
           selection={stateContainer.selection!.specification.id}
           onSelect={onSelectSpecification}
         />
-        <IconButton href={stateContainer.selection!.specification.editURL} target="_blank" >
-          <EditIcon />
-        </IconButton>
+        {stateContainer.selection!.specification.editURL &&
+          <IconButton href={stateContainer.selection!.specification.editURL} target="_blank" >
+            <EditIcon />
+          </IconButton>
+        }
       </Stack>
     )
   case ProjectPageState.LOADING:

From fd9970f01a394d69e8a0a1e42de9b3faa026928f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20St=C3=B8vring?= <mail@simonbs.dk>
Date: Fri, 20 Oct 2023 14:28:48 +0200
Subject: [PATCH 2/2] Shows version and specification as path

---
 __test__/projects/projectNavigator.test.ts    | 42 +++++++------------
 src/common/SidebarContainer.tsx               |  5 ++-
 .../projects/data/GitHubProjectRepository.ts  |  6 ++-
 src/features/projects/domain/IProject.ts      |  1 +
 src/features/projects/domain/IVersion.ts      |  1 +
 .../projects/view/ProjectListItem.tsx         |  2 +-
 .../view/ProjectsPageTrailingToolbarItem.tsx  | 22 +++++++++-
 7 files changed, 45 insertions(+), 34 deletions(-)

diff --git a/__test__/projects/projectNavigator.test.ts b/__test__/projects/projectNavigator.test.ts
index 66a80099..9e601d2c 100644
--- a/__test__/projects/projectNavigator.test.ts
+++ b/__test__/projects/projectNavigator.test.ts
@@ -12,8 +12,7 @@ test("It navigates to first specification when changing version", async () => {
         specifications: [{
           id: "baz.yml",
           name: "baz.yml",
-          url: "https://example.com/baz.yml",
-          editURL: "https://example.com/edit/baz.yml"
+          url: "https://example.com/baz.yml"
         }]
       }, {
         id: "hello",
@@ -21,8 +20,7 @@ test("It navigates to first specification when changing version", async () => {
         specifications: [{
           id: "world.yml",
           name: "world.yml",
-          url: "https://example.com/world.yml",
-          editURL: "https://example.com/edit/world.yml"
+          url: "https://example.com/world.yml"
         }]
       }]
     },
@@ -34,8 +32,7 @@ test("It navigates to first specification when changing version", async () => {
     specification: {
       id: "baz.yml",
       name: "baz.yml",
-      url: "https://example.com/baz.yml",
-      editURL: "https://example.com/edit/baz.yml"
+      url: "https://example.com/baz.yml"
     }
   }
   let pushedPath: string | undefined
@@ -60,8 +57,7 @@ test("It navigates when selecting specification", async () => {
         specifications: [{
           id: "hello.yml",
           name: "hello.yml",
-          url: "https://example.com/hello.yml",
-          editURL: "https://example.com/edit/hello.yml"
+          url: "https://example.com/hello.yml"
         }]
       }]
     },
@@ -71,15 +67,13 @@ test("It navigates when selecting specification", async () => {
       specifications: [{
         id: "hello.yml",
         name: "hello.yml",
-        url: "https://example.com/hello.yml",
-        editURL: "https://example.com/edit/hello.yml"
+        url: "https://example.com/hello.yml"
       }]
     },
     specification: {
       id: "baz.yml",
       name: "baz.yml",
-      url: "https://example.com/baz.yml",
-      editURL: "https://example.com/edit/baz.yml"
+      url: "https://example.com/baz.yml"
     }
   }
   let pushedPath: string | undefined
@@ -111,8 +105,7 @@ test("It navigates even when new specification could not be found", async () =>
     specification: {
       id: "baz.yml",
       name: "baz.yml",
-      url: "https://example.com/baz.yml",
-      editURL: "https://example.com/edit/baz.yml"
+      url: "https://example.com/baz.yml"
     }
   }
   let pushedPath: string | undefined
@@ -137,13 +130,11 @@ test("It finds a specification with the same name when changing version", async
         specifications: [{
           id: "hello.yml",
           name: "hello.yml",
-          url: "https://example.com/hello.yml",
-          editURL: "https://example.com/edit/hello.yml"
+          url: "https://example.com/hello.yml"
         }, {
           id: "earth.yml",
           name: "earth.yml",
-          url: "https://example.com/earth.yml",
-          editURL: "https://example.com/edit/earth.yml"
+          url: "https://example.com/earth.yml"
         }]
       }, {
         id: "baz",
@@ -151,23 +142,19 @@ test("It finds a specification with the same name when changing version", async
         specifications: [{
           id: "moon.yml",
           name: "moon.yml",
-          url: "https://example.com/moon.yml",
-          editURL: "https://example.com/edit/moon.yml"
+          url: "https://example.com/moon.yml"
         }, {
           id: "saturn.yml",
           name: "saturn.yml",
-          url: "https://example.com/saturn.yml",
-          editURL: "https://example.com/edit/saturn.yml"
+          url: "https://example.com/saturn.yml"
         }, {
           id: "earth.yml",
           name: "earth.yml",
-          url: "https://example.com/earth.yml",
-          editURL: "https://example.com/edit/earth.yml"
+          url: "https://example.com/earth.yml"
         }, {
           id: "jupiter.yml",
           name: "jupiter.yml",
-          url: "https://example.com/jupiter.yml",
-          editURL: "https://example.com/edit/jupiter.yml"
+          url: "https://example.com/jupiter.yml"
         }]
       }]
     },
@@ -179,8 +166,7 @@ test("It finds a specification with the same name when changing version", async
     specification: {
       id: "earth.yml",
       name: "earth.yml",
-      url: "https://example.com/earth.yml",
-      editURL: "https://example.com/edit/earth.yml"
+      url: "https://example.com/earth.yml"
     }
   }
   let pushedPath: string | undefined
diff --git a/src/common/SidebarContainer.tsx b/src/common/SidebarContainer.tsx
index 3b08b0df..985b8c70 100644
--- a/src/common/SidebarContainer.tsx
+++ b/src/common/SidebarContainer.tsx
@@ -2,6 +2,7 @@ import dynamic from "next/dynamic"
 import { ReactNode } from "react"
 import Image from "next/image"
 import { Box, Stack } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
 import { useSessionStorage } from "usehooks-ts"
 import ClientSidebarContainer from "./client/SidebarContainer"
 import SidebarContent from "./SidebarContent"
@@ -18,6 +19,7 @@ const SidebarContainer: React.FC<SidebarContainerProps> = ({
   toolbarTrailing
 }) => {
   const [open, setOpen] = useSessionStorage("isDrawerOpen", true)
+  const theme = useTheme()
   return (
     <ClientSidebarContainer
       isDrawerOpen={open}
@@ -38,7 +40,8 @@ const SidebarContainer: React.FC<SidebarContainerProps> = ({
             <Box sx={{ 
               display: "flex",
               width: "100%",
-              justifyContent: "right"
+              justifyContent: "right",
+              color: theme.palette.text.primary
             }}>
               {toolbarTrailing}
             </Box>
diff --git a/src/features/projects/data/GitHubProjectRepository.ts b/src/features/projects/data/GitHubProjectRepository.ts
index f3c38017..9b378375 100644
--- a/src/features/projects/data/GitHubProjectRepository.ts
+++ b/src/features/projects/data/GitHubProjectRepository.ts
@@ -102,7 +102,8 @@ export default class GitHubProjectRepository implements IProjectRepository<IProj
     }
     return {
       id: searchResult.name.replace(/\-openapi$/, ""),
-      name: config?.name || searchResult.name,
+      name: searchResult.name,
+      displayName: config?.name || searchResult.name,
       versions: this.getVersions(searchResult).filter(e => {
         return e.specifications.length > 0
       }),
@@ -172,7 +173,8 @@ export default class GitHubProjectRepository implements IProjectRepository<IProj
     return {
       id: ref.name,
       name: ref.name,
-      specifications: specifications
+      specifications: specifications,
+      url: `https://github.com/${owner}/${repository}/tree/${ref.name}`
     }
   }
 
diff --git a/src/features/projects/domain/IProject.ts b/src/features/projects/domain/IProject.ts
index 0d33e1f9..662f3112 100644
--- a/src/features/projects/domain/IProject.ts
+++ b/src/features/projects/domain/IProject.ts
@@ -3,6 +3,7 @@ import IVersion from "./IVersion"
 export default interface IProject {
   readonly id: string
   readonly name: string
+  readonly displayName?: string
   readonly versions: IVersion[]
   readonly imageURL?: string
 }
diff --git a/src/features/projects/domain/IVersion.ts b/src/features/projects/domain/IVersion.ts
index 4a72c8ab..bf780ca1 100644
--- a/src/features/projects/domain/IVersion.ts
+++ b/src/features/projects/domain/IVersion.ts
@@ -4,4 +4,5 @@ export default interface IVersion {
   readonly id: string
   readonly name: string
   readonly specifications: IOpenApiSpecification[]
+  readonly url?: string
 }
diff --git a/src/features/projects/view/ProjectListItem.tsx b/src/features/projects/view/ProjectListItem.tsx
index 6f2fc0c5..77796d0d 100644
--- a/src/features/projects/view/ProjectListItem.tsx
+++ b/src/features/projects/view/ProjectListItem.tsx
@@ -39,7 +39,7 @@ const ProjectListItem = <ProjectType extends IProject>(
         <ListItemText
           primary={
             <Typography variant="h6" style={{ fontWeight: isSelected ? "bold" : "normal" }}>
-              {project.name}
+              {project.displayName || project.name}
             </Typography>
           }
         /> 
diff --git a/src/features/projects/view/ProjectsPageTrailingToolbarItem.tsx b/src/features/projects/view/ProjectsPageTrailingToolbarItem.tsx
index c923edc0..b6f7537f 100644
--- a/src/features/projects/view/ProjectsPageTrailingToolbarItem.tsx
+++ b/src/features/projects/view/ProjectsPageTrailingToolbarItem.tsx
@@ -1,4 +1,4 @@
-import { Stack, IconButton } from "@mui/material"
+import { Stack, IconButton, Typography, Link } from "@mui/material"
 import { ProjectPageStateContainer, ProjectPageState } from "../domain/ProjectPageState"
 import VersionSelector from "./docs/VersionSelector"
 import SpecificationSelector from "./docs/SpecificationSelector"
@@ -18,12 +18,30 @@ const ProjectsPageTrailingToolbarItem = (
   switch (stateContainer.state) {
   case ProjectPageState.HAS_SELECTION:
     return (
-      <Stack direction="row" alignItems="center">
+      <Stack direction="row" alignItems="center" spacing={1}>
+        {stateContainer.selection!.version.url &&
+          <Link
+            variant="body1"
+            color="inherit"
+            underline="hover"
+            href={stateContainer.selection!.version.url}
+            target="_blank"
+          >
+            {stateContainer.selection!.project.name}
+          </Link>
+        }
+        {!stateContainer.selection!.version.url &&
+          <Typography variant="body1">
+            {stateContainer.selection!.project.name}
+          </Typography>
+        }
+        <Typography variant="h6">/</Typography>
         <VersionSelector
           versions={stateContainer.selection!.project.versions}
           selection={stateContainer.selection!.version.id}
           onSelect={onSelectVersion}
         />
+        <Typography variant="h6">/</Typography>
         <SpecificationSelector
           specifications={stateContainer.selection!.version.specifications}
           selection={stateContainer.selection!.specification.id}