Shows version and specification as path in toolbar

__test__/projects/projectNavigator.test.ts

@@ -12,17 +12,15 @@ 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",
         name: "hello",
         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,37 +130,31 @@ 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",
         name: "baz",
         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

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>

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}`
     }
   }
 

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
 }

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
 }

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>
           }
         /> 

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}