From bee440cc2788172ec09a49b5a886597c581b3749 Mon Sep 17 00:00:00 2001
From: Ikhun Um <ih.pert@gmail.com>
Date: Wed, 28 Aug 2024 11:57:40 +0900
Subject: [PATCH] Fix minor bugs and lint

---
 .../dogma/common/components/Breadcrumbs.tsx   |  6 ++-
 .../src/dogma/common/components/Deferred.tsx  |  1 +
 .../common/components/editor/FileEditor.tsx   | 13 ++++-
 .../common/components/table/DataTable.tsx     |  2 +
 .../common/components/table/PaginationBar.tsx |  2 +-
 webapp/src/dogma/features/api/apiSlice.ts     |  4 ++
 webapp/src/dogma/features/file/FileDto.ts     |  1 +
 .../dogma/features/history/HistoryList.tsx    |  2 +-
 .../features/services/ErrorMessageParser.ts   |  2 +-
 .../commit/[revision]/[[...path]]/index.tsx   |  5 +-
 .../[repoName]/commits/[[...path]]/index.tsx  | 53 ++++++++++---------
 .../[revision]/base/[baseRevision]/index.tsx  |  2 +-
 .../files/[revision]/[[...path]]/index.tsx    |  3 +-
 .../tree/[revision]/[[...path]]/index.tsx     |  2 +-
 14 files changed, 62 insertions(+), 36 deletions(-)

diff --git a/webapp/src/dogma/common/components/Breadcrumbs.tsx b/webapp/src/dogma/common/components/Breadcrumbs.tsx
index 9750db3137..13f8af2a51 100644
--- a/webapp/src/dogma/common/components/Breadcrumbs.tsx
+++ b/webapp/src/dogma/common/components/Breadcrumbs.tsx
@@ -39,8 +39,10 @@ export const Breadcrumbs = ({
         if (omitIndexList.includes(i)) {
           return null;
         }
-        let query0 = '';
-        if (!omitQueryList.includes(i)) {
+        let query0;
+        if (omitQueryList.includes(i) || omitQueryList.includes(i - asPathNestedRoutes.length)) {
+          query0 = '';
+        } else {
           query0 = query ? `?${query}` : '';
         }
 
diff --git a/webapp/src/dogma/common/components/Deferred.tsx b/webapp/src/dogma/common/components/Deferred.tsx
index 61d62d0500..06ddb9dcf5 100644
--- a/webapp/src/dogma/common/components/Deferred.tsx
+++ b/webapp/src/dogma/common/components/Deferred.tsx
@@ -21,6 +21,7 @@ import { Loading } from './Loading';
 
 interface LoadingProps {
   isLoading: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   error: any;
   children: () => ReactNode;
 }
diff --git a/webapp/src/dogma/common/components/editor/FileEditor.tsx b/webapp/src/dogma/common/components/editor/FileEditor.tsx
index a168faaa2c..b8d215cc8f 100644
--- a/webapp/src/dogma/common/components/editor/FileEditor.tsx
+++ b/webapp/src/dogma/common/components/editor/FileEditor.tsx
@@ -37,6 +37,7 @@ export type FileEditorProps = {
   originalContent: string;
   path: string;
   name: string;
+  revision: string | number;
 };
 
 // Map file extension to language identifier
@@ -58,7 +59,15 @@ export const extensionToLanguageMap: { [key: string]: string } = {
   toml: 'toml',
 };
 
-const FileEditor = ({ projectName, repoName, extension, originalContent, path, name }: FileEditorProps) => {
+const FileEditor = ({
+  projectName,
+  repoName,
+  extension,
+  originalContent,
+  path,
+  name,
+  revision,
+}: FileEditorProps) => {
   const dispatch = useAppDispatch();
   const language = extensionToLanguageMap[extension] || extension;
   let jsonContent = '';
@@ -108,7 +117,7 @@ const FileEditor = ({ projectName, repoName, extension, originalContent, path, n
         <Button
           size={'sm'}
           as={Link}
-          href={`/app/projects/${projectName}/repos/${repoName}/commits/${path}`}
+          href={`/app/projects/${projectName}/repos/${repoName}/commits/${path}${revision !== 'head' ? `?from=${revision}` : ''}`}
           leftIcon={<FaHistory />}
           variant="outline"
           colorScheme="gray"
diff --git a/webapp/src/dogma/common/components/table/DataTable.tsx b/webapp/src/dogma/common/components/table/DataTable.tsx
index 061d8ba3bf..207a91e23e 100644
--- a/webapp/src/dogma/common/components/table/DataTable.tsx
+++ b/webapp/src/dogma/common/components/table/DataTable.tsx
@@ -11,6 +11,7 @@ export const DataTable = <Data extends object>({ table }: { table: ReactTable<Da
           <Tr key={headerGroup.id}>
             {headerGroup.headers.map((header) => {
               // see https://tanstack.com/table/v8/docs/api/core/column-def#meta to type this correctly
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
               const meta: any = header.column.columnDef.meta;
               return (
                 <Th
@@ -41,6 +42,7 @@ export const DataTable = <Data extends object>({ table }: { table: ReactTable<Da
             <Tr key={row.id} data-testid="table-row">
               {row.getVisibleCells().map((cell) => {
                 // see https://tanstack.com/table/v8/docs/api/core/column-def#meta to type this correctly
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const meta: any = cell.column.columnDef.meta;
                 return (
                   <Td key={cell.id} isNumeric={meta?.isNumeric}>
diff --git a/webapp/src/dogma/common/components/table/PaginationBar.tsx b/webapp/src/dogma/common/components/table/PaginationBar.tsx
index 707b2ddb68..4e6ca9e959 100644
--- a/webapp/src/dogma/common/components/table/PaginationBar.tsx
+++ b/webapp/src/dogma/common/components/table/PaginationBar.tsx
@@ -1,4 +1,4 @@
-import { Flex, Input, Text, Select, Spacer, IconButton, Box, HStack, Stack } from '@chakra-ui/react';
+import { Flex, IconButton, Input, Select, Spacer, Text } from '@chakra-ui/react';
 import { Table as ReactTable } from '@tanstack/react-table';
 import { MdNavigateBefore, MdNavigateNext, MdSkipNext, MdSkipPrevious } from 'react-icons/md';
 
diff --git a/webapp/src/dogma/features/api/apiSlice.ts b/webapp/src/dogma/features/api/apiSlice.ts
index 44d1f5f767..6e576c91d7 100644
--- a/webapp/src/dogma/features/api/apiSlice.ts
+++ b/webapp/src/dogma/features/api/apiSlice.ts
@@ -328,6 +328,7 @@ export const apiSlice = createApi({
       query: ({ projectName, id }) => `/api/v1/projects/${projectName}/mirrors/${id}`,
       providesTags: ['Metadata'],
     }),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     addNewMirror: builder.mutation<any, MirrorDto>({
       query: (mirror) => ({
         url: `/api/v1/projects/${mirror.projectName}/mirrors`,
@@ -336,6 +337,7 @@ export const apiSlice = createApi({
       }),
       invalidatesTags: ['Metadata'],
     }),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     updateMirror: builder.mutation<any, { projectName: string; id: string; mirror: MirrorDto }>({
       query: ({ projectName, id, mirror }) => ({
         url: `/api/v1/projects/${projectName}/mirrors/${id}`,
@@ -352,6 +354,7 @@ export const apiSlice = createApi({
       query: ({ projectName, id }) => `/api/v1/projects/${projectName}/credentials/${id}`,
       providesTags: ['Metadata'],
     }),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     addNewCredential: builder.mutation<any, { projectName: string; credential: CredentialDto }>({
       query: ({ projectName, credential }) => ({
         url: `/api/v1/projects/${projectName}/credentials`,
@@ -360,6 +363,7 @@ export const apiSlice = createApi({
       }),
       invalidatesTags: ['Metadata'],
     }),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     updateCredential: builder.mutation<any, { projectName: string; id: string; credential: CredentialDto }>({
       query: ({ projectName, id, credential }) => ({
         url: `/api/v1/projects/${projectName}/credentials/${id}`,
diff --git a/webapp/src/dogma/features/file/FileDto.ts b/webapp/src/dogma/features/file/FileDto.ts
index 37e8e67377..17228ff804 100644
--- a/webapp/src/dogma/features/file/FileDto.ts
+++ b/webapp/src/dogma/features/file/FileDto.ts
@@ -5,5 +5,6 @@ export interface FileDto {
   revision: number;
   type: FileType;
   url: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   content?: string | any;
 }
diff --git a/webapp/src/dogma/features/history/HistoryList.tsx b/webapp/src/dogma/features/history/HistoryList.tsx
index 6dee6e9d94..6503db49ff 100644
--- a/webapp/src/dogma/features/history/HistoryList.tsx
+++ b/webapp/src/dogma/features/history/HistoryList.tsx
@@ -86,7 +86,7 @@ const HistoryList = ({
         header: 'Timestamp',
       }),
     ],
-    [columnHelper, projectName, repoName, filePath],
+    [columnHelper, projectName, repoName, filePath, isDirectory],
   );
 
   return (
diff --git a/webapp/src/dogma/features/services/ErrorMessageParser.ts b/webapp/src/dogma/features/services/ErrorMessageParser.ts
index c93f50822b..e7ff53dbb5 100644
--- a/webapp/src/dogma/features/services/ErrorMessageParser.ts
+++ b/webapp/src/dogma/features/services/ErrorMessageParser.ts
@@ -1,5 +1,5 @@
 class ErrorMessageParser {
-  // eslint-disable-line @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   static parse(object: any): string {
     if (object.response && object.response.data.message) {
       return object.response.data.message;
diff --git a/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/commit/[revision]/[[...path]]/index.tsx b/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/commit/[revision]/[[...path]]/index.tsx
index 82a4d76c5e..d079d11ab6 100644
--- a/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/commit/[revision]/[[...path]]/index.tsx
+++ b/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/commit/[revision]/[[...path]]/index.tsx
@@ -83,7 +83,7 @@ const CommitViewPage = () => {
     data: oldData,
     isLoading: isOldLoading,
     error: oldError,
-  }: any = useGetFilesQuery(
+  } = useGetFilesQuery(
     {
       projectName,
       repoName,
@@ -114,7 +114,8 @@ const CommitViewPage = () => {
     return <FourOhFour title={`Revision ${revision} does not exist..`} />;
   }
   // 404 Not Found is returned if the file does not exist in the old revision.
-  const oldError0 = oldError && oldError.status != 404 ? oldError : null;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const oldError0 = oldError && (oldError as any).status != 404 ? oldError : null;
 
   return (
     <Deferred
diff --git a/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/commits/[[...path]]/index.tsx b/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/commits/[[...path]]/index.tsx
index 970b4c5a09..de4f8131c2 100644
--- a/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/commits/[[...path]]/index.tsx
+++ b/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/commits/[[...path]]/index.tsx
@@ -11,6 +11,7 @@ import { ChakraLink } from 'dogma/common/components/ChakraLink';
 import { makeTraversalFileLinks, toFilePath } from 'dogma/util/path-util';
 import { PaginationState } from '@tanstack/react-table';
 import { MdErrorOutline } from 'react-icons/md';
+import { FileIcon } from 'dogma/common/components/FileIcon';
 
 const DEFAULT_PAGE_SIZE = 10;
 
@@ -34,16 +35,11 @@ const HistoryListPage = () => {
     fromRevision = headRevision + from + 1;
   }
   let baseRevision = parseInt(router.query.base as string) || fromRevision - DEFAULT_PAGE_SIZE + 1;
+  const pageSize = fromRevision - baseRevision + 1;
   if (baseRevision < 1) {
     baseRevision = 1;
   }
 
-  let pageSize = fromRevision - baseRevision + 1;
-  if (pageSize < DEFAULT_PAGE_SIZE && baseRevision < DEFAULT_PAGE_SIZE) {
-    // This is the end of the history which may be less than the original page size.
-    // In this case, we should use the default page size as a best effort.
-    pageSize = DEFAULT_PAGE_SIZE;
-  }
   const fromPageCount = Math.ceil(fromRevision / pageSize);
   let headPageCount;
   if (fromRevision > headRevision) {
@@ -71,9 +67,8 @@ const HistoryListPage = () => {
 
     if (newPageIndex != pageIndex || newPageSize != pageSize) {
       const from = fromRevision - (newPageIndex - pageIndex) * newPageSize;
-      let base = from - newPageSize + 1;
-      base = Math.max(base, 1);
-      const query: { [key: string]: any } = { from, base };
+      const base = from - newPageSize + 1;
+      const query: { [key: string]: string | number } = { from, base };
       if (type) {
         query['type'] = type;
       }
@@ -117,16 +112,23 @@ const HistoryListPage = () => {
         size={'sm'}
         colorScheme={'green'}
         as={ChakraLink}
-        href={`/app/projects/${projectName}/repos/${repoName}/commits/${filePath}?from=${fromRevision - DEFAULT_PAGE_SIZE}${type ? `&type=${type}` : ''}`}
+        href={`/app/projects/${projectName}/repos/${repoName}/commits/${filePath}?from=${baseRevision - 1}&base=${baseRevision - 100}${type ? `&type=${type}` : ''}`}
       >
         Go to older commits
       </Button>
     </VStack>
   );
 
+  const urlAndSegments = makeTraversalFileLinks(projectName, repoName, 'commits', filePath);
+
   return (
     <Deferred isLoading={isLoading || isHistoryLoading} error={error || historyError}>
       {() => {
+        const omitQueryList = [1, 2, 4, 5];
+        if (type !== 'tree' && router.query.from) {
+          // Omit the 'type=tree' query parameter when the type is a file.
+          omitQueryList.push(-2);
+        }
         return (
           <Box p="2">
             <Breadcrumbs
@@ -135,26 +137,29 @@ const HistoryListPage = () => {
               }
               omitIndexList={[0]}
               unlinkedList={[3]}
-              omitQueryList={[1, 2, 4, 5]}
-              query={type ? `type=${type}` : ''}
+              omitQueryList={omitQueryList}
+              query="type=tree"
             />
             <Flex minWidth="max-content" alignItems="center" gap="2" mb={6}>
               <Heading size="lg">
                 {filePath ? (
                   <HStack gap={0}>
-                    <Box color={'teal'} marginRight={2}>
-                      <FcOpenedFolder />
+                    <Box color={'teal'} marginRight={2} marginBottom={-2}>
+                      {type === 'tree' ? <Icon as={FcOpenedFolder} /> : <FileIcon fileName={filePath} />}
                     </Box>
-                    {makeTraversalFileLinks(projectName, repoName, 'commits', filePath).map(
-                      ({ segment, url }) => {
-                        return (
-                          <Box key={url}>
-                            {'/'}
-                            <ChakraLink href={url}>{segment}</ChakraLink>
-                          </Box>
-                        );
-                      },
-                    )}
+                    {urlAndSegments.map(({ segment, url }, index) => {
+                      let query = '';
+                      if (type === 'tree' || index < urlAndSegments.length - 1) {
+                        query = '?type=tree';
+                      }
+                      const targetUrl = url + query;
+                      return (
+                        <Box key={targetUrl}>
+                          {'/'}
+                          <ChakraLink href={targetUrl}>{segment}</ChakraLink>
+                        </Box>
+                      );
+                    })}
                     <Box fontWeight={'normal'}>&nbsp;commits</Box>
                   </HStack>
                 ) : (
diff --git a/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/compare/[revision]/base/[baseRevision]/index.tsx b/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/compare/[revision]/base/[baseRevision]/index.tsx
index c0f73cc498..37ec2fb017 100644
--- a/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/compare/[revision]/base/[baseRevision]/index.tsx
+++ b/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/compare/[revision]/base/[baseRevision]/index.tsx
@@ -65,7 +65,7 @@ const ChangesViewPage = () => {
     data: oldData,
     isLoading: isOldLoading,
     error: oldError,
-  }: any = useGetFilesQuery({
+  } = useGetFilesQuery({
     projectName,
     repoName,
     revision: baseRevision,
diff --git a/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/files/[revision]/[[...path]]/index.tsx b/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/files/[revision]/[[...path]]/index.tsx
index 4fd72b173b..1adbb62b40 100644
--- a/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/files/[revision]/[[...path]]/index.tsx
+++ b/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/files/[revision]/[[...path]]/index.tsx
@@ -41,7 +41,7 @@ const FileContentPage = () => {
             <Flex minWidth="max-content" alignItems="center" gap="2" mb={6}>
               <Heading size="lg">
                 <HStack color="teal">
-                  <Box>
+                  <Box marginBottom={-1}>
                     <FileIcon fileName={fileName} />
                   </Box>
                   <Box>{fileName}</Box>
@@ -60,6 +60,7 @@ const FileContentPage = () => {
               originalContent={data.content}
               path={data.path}
               name={fileName}
+              revision={revision}
             />
           </Box>
         );
diff --git a/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/tree/[revision]/[[...path]]/index.tsx b/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/tree/[revision]/[[...path]]/index.tsx
index bc0ce655f9..d49cafd0dd 100644
--- a/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/tree/[revision]/[[...path]]/index.tsx
+++ b/webapp/src/pages/app/projects/[projectName]/repos/[repoName]/tree/[revision]/[[...path]]/index.tsx
@@ -140,7 +140,7 @@ cat ${project}/${repo}${path}`;
               <Button
                 size={'sm'}
                 as={ChakraLink}
-                href={`/app/projects/${projectName}/repos/${repoName}/commits${filePath}?type=tree`}
+                href={`/app/projects/${projectName}/repos/${repoName}/commits${filePath}?type=tree${revision !== 'head' ? `&from=${revision}` : ''}`}
                 leftIcon={<FaHistory />}
                 variant="outline"
                 colorScheme="gray"