Merge pull request #349 from dolthub/liuliu/commit-comparison

Graphql, Web: compare commits, tags, branches and show diffs

Author: liuliu-dev

web/renderer/components/DatabaseHeaderAndNav/index.module.css

@@ -19,10 +19,10 @@
 }
 
 .smallHeader {
-  @apply hidden h-24 pt-4;
+  @apply hidden h-24;
 
   @screen lg {
-    @apply h-16 flex items-center;
+    @apply h-16 flex items-center justify-between;
   }
 }
 

web/renderer/components/DatabaseNav/Item.tsx

@@ -20,7 +20,7 @@ export default function NavItem(props: Props) {
       <li className={css.disabledTab}>
         <span
           className={css.innerTab}
-          data-tooltip-position="top"
+          data-tooltip-place="left"
           data-tooltip-id="disabled-database-nav-item"
           data-tooltip-content={`${props.name} tab is only available for Dolt databases`}
         >

web/renderer/components/DatabaseTableNav/index.module.css

@@ -28,9 +28,6 @@
 
 .topLine {
   @apply flex justify-between items-center w-full pb-2 px-4;
-  @screen lg {
-    @apply pl-4 pr-3;
-  }
 }
 
 .menuIcon {

web/renderer/components/DiffSelector/ForBranchCommitAndTag.tsx

@@ -0,0 +1,62 @@
+import { RefParams } from "@lib/params";
+import BranchCommitAndTagSelector from "@components/FormSelectForRefs/BranchCommitAndTagSelector";
+import { useState } from "react";
+import { BsArrowLeft } from "@react-icons/all-files/bs/BsArrowLeft";
+import Link from "@components/links/Link";
+import { diff } from "@lib/urls";
+import { Button } from "@dolthub/react-components";
+import DiffSelector from "./component";
+import css from "./index.module.css";
+
+type Props = {
+  params: RefParams;
+};
+
+export default function ForBranchCommitAndTag({ params }: Props) {
+  const [fromRef, setFromRef] = useState("");
+  const [toRef, setToRef] = useState("");
+
+  return (
+    <DiffSelector>
+      <div className={css.container}>
+        <div className={css.top}>
+          <div className={css.title}>Pick to revision</div>
+          <div className={css.title}>Pick from revision</div>
+        </div>
+        <div className={css.selectors}>
+          <div className={css.branchCommitTag}>
+            <BranchCommitAndTagSelector
+              params={params}
+              selectedValue={toRef}
+              onChangeValue={s => setToRef(s || "")}
+            />
+          </div>
+          <div className={css.arrow}>
+            <BsArrowLeft />
+          </div>
+          <div className={css.branchCommitTag}>
+            <BranchCommitAndTagSelector
+              params={params}
+              selectedValue={fromRef}
+              onChangeValue={s => setFromRef(s || "")}
+            />
+          </div>
+        </div>
+      </div>
+      {fromRef && toRef && (
+        <Link
+          {...diff({
+            ...params,
+            fromCommitId: fromRef,
+            toCommitId: toRef,
+          })}
+          className={css.viewDiffButton}
+        >
+          <Button disabled={fromRef === toRef} className={css.button}>
+            View Diff
+          </Button>
+        </Link>
+      )}
+    </DiffSelector>
+  );
+}

web/renderer/components/DiffSelector/index.module.css

@@ -6,6 +6,34 @@
   }
 }
 
+.container {
+  @apply w-[54rem];
+}
+
 .branch {
   @apply mb-6;
 }
+
+.branchCommitTag {
+  @apply w-96;
+}
+
+.selectors {
+  @apply flex mt-4 mb-6 mx-4 items-center;
+}
+
+.top {
+  @apply flex mx-4 mt-8 justify-between;
+}
+
+.title {
+  @apply font-semibold w-96;
+}
+
+.arrow {
+  @apply text-2xl mx-6;
+}
+
+.button {
+  @apply ml-4;
+}

web/renderer/components/DiffSelector/index.tsx

@@ -1,8 +1,10 @@
 import DiffSelector from "./component";
 import ForBranch from "./ForBranch";
+import ForBranchCommitAndTag from "./ForBranchCommitAndTag";
 import ForPull from "./ForPull";
 
 export default Object.assign(DiffSelector, {
   ForBranch,
   ForPull,
+  ForBranchCommitAndTag,
 });

web/renderer/components/DiffTableNav/CommitInfo/index.module.css

@@ -6,7 +6,11 @@
   @apply mx-3 mb-3;
 }
 
-.hash {
+.fixedWidth {
+  @apply inline-block w-12;
+}
+
+.bold {
   @apply font-mono font-semibold text-sm;
 }
 

web/renderer/components/DiffTableNav/CommitInfo/index.test.tsx

@@ -2,7 +2,7 @@ import { MockedProvider } from "@apollo/client/testing";
 import useMockRouter from "@hooks/useMockRouter";
 import { render, screen } from "@testing-library/react";
 import { commit as commitLink, diff } from "@lib/urls";
-import CommitInfo, { getDiffRange } from ".";
+import CommitInfo from ".";
 import * as mocks from "./mocks";
 
 const jestRouter = jest.spyOn(require("next/router"), "useRouter");
@@ -73,9 +73,8 @@ describe("test CommitInfo", () => {
       <CommitInfo params={{ ...mocks.params, toCommitId, fromCommitId }} />,
     );
 
-    expect(
-      screen.getByText(getDiffRange(fromCommitId, toCommitId)),
-    ).toBeVisible();
+    expect(screen.getByText(fromCommitId)).toBeVisible();
+    expect(screen.getByText(toCommitId)).toBeVisible();
     expect(screen.queryByText("1 parent")).not.toBeInTheDocument();
   });
 });

web/renderer/components/DiffTableNav/CommitInfo/index.tsx

@@ -2,7 +2,7 @@ import { QueryHandler } from "@dolthub/react-components";
 import { useHistoryForCommitQuery } from "@gen/graphql-types";
 import { RefParams } from "@lib/params";
 import { useRouter } from "next/router";
-import Inner, { shortCommit } from "./Inner";
+import Inner from "./Inner";
 import css from "./index.module.css";
 
 type Props = {
@@ -39,10 +39,17 @@ export default function CommitInfo({ params }: Props) {
       <div className={css.container} data-cy="commit-info">
         <div className={css.top}>
           <div data-cy="viewing-message">
-            Viewing changes from{" "}
-            <span className={css.hash}>
-              {getDiffRange(fromCommitForInfo, params.toCommitId)}
-            </span>
+            Viewing changes
+            <div className={css.hashes}>
+              <div>
+                <span className={css.fixedWidth}>from</span>
+                <span className={css.bold}>{fromCommitForInfo}</span>
+              </div>
+              <div>
+                <span className={css.fixedWidth}>to</span>{" "}
+                <span className={css.bold}>{params.toCommitId}</span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -52,7 +59,7 @@ export default function CommitInfo({ params }: Props) {
 }
 
 export function getDiffRange(fromCommit: string, toCommit: string): string {
-  return `${shortCommit(fromCommit)}..${shortCommit(toCommit)}`;
+  return `${fromCommit}..${toCommit}`;
 }
 
 function isDiffRange(asPath: string) {

web/renderer/components/DiffTableNav/ForRef.tsx

@@ -1,4 +1,3 @@
-import DiffSelector from "@components/DiffSelector";
 import { RefParams } from "@lib/params";
 import DiffTableNav from "./component";
 import css from "./index.module.css";
@@ -13,10 +12,9 @@ export default function ForRef(props: Props) {
       {...props}
       diffStat={
         <p className={css.noDiff} data-cy="diff-layout-no-diff">
-          Select commit to view diff
+          Select revision to view diff
         </p>
       }
-      diffSelector={<DiffSelector.ForBranch params={props.params} />}
       diffTables={null}
     />
   );

web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx

@@ -0,0 +1,58 @@
+import { FormSelect } from "@dolthub/react-components";
+import { Maybe } from "@dolthub/web-utils";
+import { OptionalRefParams } from "@lib/params";
+import useGetBranchOptionsForSelect from "@components/FormSelectForRefs/useGetBranchOptionsForSelect";
+import useGetCommitOptionsForSelect from "@components/FormSelectForRefs/useGetCommitOptionsForSelect";
+import getGroupOption from "./getGroupOption";
+import useGetTagOptionsForSelect from "./useGetTagOptionsForSelect";
+import css from "./index.module.css";
+
+type Props = {
+  params: OptionalRefParams;
+  selectedValue: Maybe<string>;
+  onChangeValue: (s: Maybe<string>) => void;
+};
+
+export default function BranchCommitAndTagSelector(props: Props) {
+  const {
+    branchOptions,
+    error: branchErr,
+    loading: branchLoading,
+  } = useGetBranchOptionsForSelect(props.params);
+  const {
+    commitOptions,
+    error: commitErr,
+    loading: commitLoading,
+  } = useGetCommitOptionsForSelect(props.params);
+  const {
+    tagOptions,
+    error: tagErr,
+    loading: tagLoading,
+  } = useGetTagOptionsForSelect(props.params);
+
+  const handleChangeRef = async (refName: Maybe<string>) => {
+    if (!refName) return;
+    props.onChangeValue(refName);
+  };
+
+  const options = [
+    getGroupOption(branchOptions, "Branches", undefined, branchErr),
+    getGroupOption(commitOptions, "Commits", undefined, commitErr),
+    getGroupOption(tagOptions, "Tags", undefined, tagErr),
+  ];
+
+  return (
+    <FormSelect.Grouped
+      isLoading={branchLoading || commitLoading || tagLoading}
+      value={[...branchOptions, ...commitOptions, ...tagOptions].find(
+        t => t.value === props.selectedValue,
+      )}
+      onChange={async e => handleChangeRef(e?.value)}
+      options={options}
+      placeholder="select a branch, commit or tag..."
+      className={css.branchAndCommitSelect}
+      selectedOptionFirst
+      light
+    />
+  );
+}

web/renderer/components/FormSelectForRefs/getGroupOption.tsx

@@ -6,7 +6,7 @@ import { ApolloErrorType } from "@lib/errors/types";
 export default function getGroupOption(
   options: Array<FormSelectTypes.Option<string>>,
   label: string,
-  footerRoute: Route,
+  footerRoute?: Route,
   error?: ApolloErrorType,
 ): FormSelectTypes.CustomGroupBase<FormSelectTypes.Option<string>> {
   const lowerLabel = label.toLowerCase();
@@ -16,6 +16,6 @@ export default function getGroupOption(
     noOptionsMsg: error
       ? `Error getting ${lowerLabel}: ${error.message}`
       : `No ${lowerLabel} found`,
-    footer: <Link {...footerRoute}>View all {lowerLabel}</Link>,
+    footer: footerRoute && <Link {...footerRoute}>View all {lowerLabel}</Link>,
   };
 }

web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.module.css

@@ -69,3 +69,7 @@
 .iconGray {
   @apply fill-storm-200;
 }
+
+.button {
+  @apply mr-4;
+}

web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx

@@ -18,11 +18,11 @@ import { gqlDepNotFound } from "@lib/errors/graphql";
 import { errorMatches } from "@lib/errors/helpers";
 import { OptionalRefParams } from "@lib/params";
 import { refetchBranchQueries } from "@lib/refetchQueries";
-import { newBranch } from "@lib/urls";
+import { compare, newBranch } from "@lib/urls";
 import { useState } from "react";
 import BranchList from "./BranchList";
-import css from "./index.module.css";
 import { useBranchList } from "./useBranchList";
+import css from "./index.module.css";
 
 type Props = {
   params: OptionalRefParams;
@@ -39,6 +39,7 @@ type InnerProps = {
 function Inner(props: InnerProps): JSX.Element {
   const [isDeleteModalOpen, setDeleteModalOpen] = useState(false);
   const [branchNameToDelete, setBranchNameToDelete] = useState("");
+
   const createUrl = newBranch({
     ...props.params,
     refName:
@@ -71,6 +72,11 @@ function Inner(props: InnerProps): JSX.Element {
             isClearable
             horizontal
           />
+          {props.branches.length && (
+            <Link {...compare(props.params)}>
+              <Button className={css.button}>Diff Branches</Button>
+            </Link>
+          )}
           <HideForNoWritesWrapper params={props.params}>
             <Link {...createUrl} className={css.white}>
               <Button>Create Branch</Button>

web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.module.css

@@ -6,6 +6,14 @@
   @apply flex justify-between;
 }
 
+.buttons {
+  @apply flex;
+}
+
+.button {
+  @apply mr-4;
+}
+
 .title {
   @apply mx-6;
 }

web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/index.tsx

@@ -1,9 +1,11 @@
 import Page404 from "@components/Page404";
-import { Loader } from "@dolthub/react-components";
+import { Button, Loader } from "@dolthub/react-components";
 import { useAnchorTag, useReactiveWidth } from "@dolthub/react-hooks";
 import { CommitForHistoryFragment } from "@gen/graphql-types";
+import Link from "@components/links/Link";
 import { useCommitListForBranch } from "@hooks/useCommitListForBranch";
 import { RefParams } from "@lib/params";
+import { compare } from "@lib/urls";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import InfiniteScroll from "react-infinite-scroller";
@@ -50,7 +52,12 @@ function Inner({ commits, ...props }: InnerProps) {
         <div className={css.container}>
           <div className={css.top}>
             <h1 className={css.title}>Commit Log</h1>
-            <CommitGraphButton params={props.params} />
+            <Button.Group className={css.buttons}>
+              <Link {...compare(props.params)}>
+                <Button className={css.button}>Diff Commits</Button>
+              </Link>
+              <CommitGraphButton params={props.params} />
+            </Button.Group>
           </div>
           <InfiniteScroll
             loadMore={props.loadMore}