fix(repository): make sure the paths are well working with ref from URL
+ 37
- 30
@@ -1,5 +1,5 @@
 {
-  "_generatedAtUnix": 1664668875140,
+  "_generatedAtUnix": 1664671203809,
   "_hashAlgorithm": "sha1",
   "_version": 2,
   "islands": {

...
@@ -52,7 +52,7 @@
       "pathSourceMap": "./public/.islands/RepositoryInitialSetup.bundle.js.map"
     },
     "RepositoryTreeView": {
-      "hash": "1cd46be545be92bd5bf44b4052ed2ba830e3923d",
+      "hash": "758b7355c8e84b5cdccf8d6068580e4c71204ec6",
       "pathSource": "./app/islands/RepositoryTreeView.tsx",
       "pathBundle": "./public/.islands/RepositoryTreeView.bundle.js",
       "pathSourceMap": "./public/.islands/RepositoryTreeView.bundle.js.map"

...
@@ -96,7 +96,7 @@
       "pathSource": "./app/views/repository/RepositoryCreateView.tsx"
     },
     "RepositoryDetailsView": {
-      "hash": "edb7bc0548d344ff3c422411c09daf8738cfb51e",
+      "hash": "41e605325c46ee265d190ab2cb3f5545f615a4e1",
       "pathSource": "./app/views/repository/RepositoryDetailsView.tsx"
     },
     "RepositoryExploreView": {

app/controllers/repository/getRepositoryBrowserView.ts
@@ -20,8 +20,9 @@ import RepositoryDetailsView, {
 const getRepositoryBrowserView: ReqHandler = async (request, reply) => {
   const params =
     request.params as AppRoutesParams[AppRoute.REPOSITORY_BROWSER]["params"];
-  const { orgSlug, repoSlug, currentRef } = params;
+  const { orgSlug, repoSlug, currentRef: currRef } = params;
   const path = params["*"];
+  const currentRef = currRef || Const.DEFAULT_HEAD_REF;
 
   const orgService = makeOrganizationService({ request });
   const repoService = makeRepositoryService({ request });

...
@@ -82,15 +83,6 @@ const getRepositoryBrowserView: ReqHandler = async (request, reply) => {
           )
         : null;
 
-    const commitLogs = await repoService.getRepositoryCommitLog(
-      repo,
-      path,
-      currentRef,
-      true
-    );
-
-    const lastCommit = commitLogs.length >= 1 ? commitLogs[0] : null;
-
     const branches = await repoService.getRepositoryBranches(repo);
     const tags = await repoService.getRepositoryTags(repo);
 

app/controllers/syntax_highlight/highlightCodeAction.ts
@@ -98,9 +98,6 @@ const highlightCodeAction: ReqHandler = async (request, reply) => {
     return reply.status(200).send(result);
   } else if (outputFormat === "json") {
     const parsedJson = parseHtmlToJson(result.html);
-
-    console.log("parsedJson:", parsedJson);
-
     const tokens = parsedJson.reduce((acc, node) => {
       if (node.type === "text") {
         acc = [

...
@@ -112,6 +109,7 @@ const highlightCodeAction: ReqHandler = async (request, reply) => {
       }
       return acc;
     }, [] as { text: string; type: string }[]);
+
     return reply.status(200).send(tokens);
   }
 

app/islands/RepositoryTreeView.tsx
@@ -2,10 +2,15 @@
 import type { ReactIsland } from "@ethicdevs/react-monolith";
 // 3rd-party
 import React, { useCallback } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 // app
-import type { RepositoryFile, RepositoryLog } from "../types";
+import type {
+  RepositoryFile,
+  RepositoryLog,
+  WithThemeSchemeProp,
+} from "../types";
 import { Grid, TextEllipsis } from "../components";
+import { NamedColors } from "../utils/style";
 // import RepositoryCommitSummaryLine from "./RepositoryCommitSummaryLine";
 
 export interface RepositoryTreeViewProps {

...
@@ -17,7 +22,10 @@ export interface RepositoryTreeViewProps {
   repoSlug: string;
 }
 
-const RepositoryTreeView: ReactIsland<RepositoryTreeViewProps> = ({
+const RepositoryTreeView: ReactIsland<
+  RepositoryTreeViewProps & WithThemeSchemeProp
+> = ({
+  themeScheme,
   currentPath,
   currentRef,
   // lastCommit,

...
@@ -39,7 +47,7 @@ const RepositoryTreeView: ReactIsland<RepositoryTreeViewProps> = ({
                 currentPath.endsWith("/") || currentPath === ""
                   ? currentPath
                   : `${currentPath}/`
-              }${fileName}`,
+              }${encodeURIComponent(fileName)}`,
       };
     },
     [orgSlug, repoSlug, currentPath]

...
@@ -87,7 +95,10 @@ const RepositoryTreeView: ReactIsland<RepositoryTreeViewProps> = ({
           <ul style={{ listStyle: "none", padding: 0, width: "100%" }}>
             {shouldShowPrevPath && (
               <li key={"go-previous"}>
-                <StyledTreeViewAnchorItem href={prevPathLink}>
+                <StyledTreeViewAnchorItem
+                  href={prevPathLink}
+                  themeScheme={themeScheme}
+                >
                   ..
                 </StyledTreeViewAnchorItem>
               </li>

...
@@ -96,7 +107,10 @@ const RepositoryTreeView: ReactIsland<RepositoryTreeViewProps> = ({
               const fileLink = buildRepoFileLink(file);
               return (
                 <li key={[file.id, file.name].join(":")}>
-                  <StyledTreeViewAnchorItem href={fileLink.href}>
+                  <StyledTreeViewAnchorItem
+                    href={fileLink.href}
+                    themeScheme={themeScheme}
+                  >
                     <span style={{ flex: "0 0 240px" }}>{fileLink.text}</span>
                     {file.lastCommit != null && (
                       <>

...
@@ -119,7 +133,7 @@ const RepositoryTreeView: ReactIsland<RepositoryTreeViewProps> = ({
   );
 };
 
-const StyledTreeViewAnchorItem = styled.a`
+const StyledTreeViewAnchorItem = styled.a<WithThemeSchemeProp>`
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;

...
@@ -130,11 +144,13 @@ const StyledTreeViewAnchorItem = styled.a`
 
   padding: 0 8px;
 
-  border-bottom: 1px solid gray;
+  ${({ themeScheme }) => css`
+    border-bottom: 1px solid ${NamedColors.BORDER_DEFAULT[themeScheme]};
 
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.2);
-  }
+    &:hover {
+      background-color: ${NamedColors.CARD_OVERLAY[themeScheme]};
+    }
+  `}
 `;
 
 const StyledRepositoryTreeViewContainer = styled.div`

@@ -235,7 +235,7 @@ export const AppRoutesSchemas: Record<AppRoute, undefined | FastifySchema> = {
   [AppRoute.REPOSITORY_BROWSER]: {
     params: {
       type: "object",
-      required: ["orgSlug", "repoSlug", "ref", "*"],
+      required: ["orgSlug", "repoSlug", "currentRef", "*"],
       additionalProperties: false,
       properties: {
         orgSlug: {

...
@@ -244,7 +244,7 @@ export const AppRoutesSchemas: Record<AppRoute, undefined | FastifySchema> = {
         repoSlug: {
           type: "string",
         },
-        ref: {
+        currentRef: {
           type: "string",
         },
         "*": {

...
@@ -586,7 +586,7 @@ const RootAppRouter: AppRouter = () => {
           handler={RepositoryController.getRepositoryBrowserView}
         />
         <Router.Route
-          name={AppRoute.REPOSITORY_BROWSER}
+          name={AppRoute.REPOSITORY_BROWSER + ".with_path"}
           method={"GET"}
           path={"/:orgSlug/:repoSlug/:currentRef/tree/*"}
           schema={AppRoutesSchemas[AppRoute.REPOSITORY_BROWSER]}

app/views/repository/RepositoryDetailsView.tsx
@@ -189,6 +189,7 @@ const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
                     orgSlug={parentOrg.slug}
                     repoFiles={repoFiles}
                     repoSlug={repo.slug}
+                    themeScheme={commonProps.themeScheme}
                   />
                 </Card>
               </Grid.Col>