Add a commit and compare view (#1026)

Motivation:

Central Dogma UI does not provide a commit view or changes view between revisions.

Modifications:

- Remove a history tab in a file editor and add a commit view button instead.
  - The history tab didn't have a deep link for it.
  - As a result, we can't directly enter the history view from a URL
  - Addtionally, the orignal page wasn't preserved when we navigated pages back and forth.
- Add history view pages on `/app/projects/<proj>/repos/<repo>/commits`.
- Add a commit view page on `/app/projects/<proj>/repos/<repo>/commit/<revision>₩
- Add a changes view page on `/app/projects/<proj>/repos/<repo>/compare/<head-rev>/base/<base-rev>`
- Dependencies)
  - Add prismjs 1.29.0 for syntax highlights for the diff view.
  - Add react-diff-viewer-continued 3.4.0 for the beautiful diff UI.

Result:

You can now track changes using diff UI.

webapp/package.json

@@ -33,7 +33,9 @@
     "framer-motion": "^11.2.13",
     "jsonpath": "^1.1.1",
     "next": "^14.2.4",
+    "prismjs": "^1.29.0",
     "react": "^18.3.1",
+    "react-diff-viewer-continued": "^3.4.0",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.1",
     "react-icons": "^5.2.1",
@@ -49,6 +51,7 @@
     "@types/jest": "^29.5.12",
     "@types/jsonpath": "^0.2.0",
     "@types/node": "^20.14.10",
+    "@types/prismjs": "^1.26.4",
     "@types/react": "^18.0.20",
     "@types/react-dom": "^18.0.6",
     "@types/webpack": "^5.28.0",

webapp/src/dogma/common/components/ChakraLink.tsx

@@ -1,6 +1,12 @@
-import { Link, LinkProps } from '@chakra-ui/react';
+import { Box, Link, LinkProps } from '@chakra-ui/react';
 import NextLink from 'next/link';
 
-export const ChakraLink = (props: LinkProps) => {
+type ChakraLinkProps = LinkProps & {
+  disabled?: boolean;
+};
+export const ChakraLink = (props: ChakraLinkProps) => {
+  if (props.disabled) {
+    return <Box {...props}></Box>;
+  }
   return <Link as={NextLink} {...props}></Link>;
 };

webapp/src/dogma/common/components/CompareButton.tsx

@@ -0,0 +1,85 @@
+import {
+  Button,
+  FormControl,
+  Icon,
+  Input,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Stack,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { IoMdArrowDropdown } from 'react-icons/io';
+import { IoGitCompareSharp } from 'react-icons/io5';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import Router from 'next/router';
+import FieldErrorMessage from 'dogma/common/components/form/FieldErrorMessage';
+
+type CompareButtonProps = {
+  projectName: string;
+  repoName: string;
+  headRevision: number;
+};
+
+type FormData = {
+  baseRevision: string;
+};
+
+const CompareButton = ({ projectName, repoName, headRevision }: CompareButtonProps) => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<FormData>();
+  const onSubmit = (data: FormData) => {
+    Router.push(
+      `/app/projects/${projectName}/repos/${repoName}/compare/${headRevision}/base/${data.baseRevision}`,
+    );
+    reset();
+    onClose();
+  };
+
+  return (
+    <Popover placement="bottom" isOpen={isOpen} onClose={onClose}>
+      <PopoverTrigger>
+        <Button colorScheme="teal" size="sm" onClick={onToggle} rightIcon={<IoMdArrowDropdown />}>
+          Compare
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent width={'220px'}>
+        <PopoverArrow />
+        <PopoverBody>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <Stack direction={'row'}>
+              <FormControl isRequired>
+                <Input
+                  type="number"
+                  placeholder={`Revision 1..${headRevision - 1}`}
+                  autoFocus
+                  {...register('baseRevision', { required: true, min: 1, max: headRevision - 1 })}
+                />
+                {errors.baseRevision && (
+                  <FieldErrorMessage
+                    error={errors.baseRevision}
+                    fieldName="Revision"
+                    errorMessage={'Invalid revision'}
+                  />
+                )}
+              </FormControl>
+              <Button type="submit" colorScheme="green" background={'green.50'} variant="outline">
+                <Icon as={IoGitCompareSharp} />
+              </Button>
+            </Stack>
+          </form>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default CompareButton;