web: Diff pages and components

packages/web/components/CellButtons/HideDiffColumnButton.tsx

@@ -0,0 +1,14 @@
+import Button from "@components/Button";
+import css from "./index.module.css";
+
+type Props = {
+  onClick: () => void;
+};
+
+export default function HideDiffColumn(props: Props) {
+  return (
+    <Button.Link onClick={props.onClick} className={css.button}>
+      Hide Column
+    </Button.Link>
+  );
+}

packages/web/components/DatabaseOptionsDropdown/index.tsx

@@ -4,6 +4,8 @@ import useEffectOnMount from "@hooks/useEffectOnMount";
 import fakeEscapePress from "@lib/fakeEscapePress";
 import { SqlQueryParams } from "@lib/params";
 import { isMutation } from "@lib/parseSqlQuery";
+import { CgArrowsH } from "@react-icons//all-files/cg/CgArrowsH";
+import { CgCompress } from "@react-icons//all-files/cg/CgCompress";
 import { FaCaretDown } from "@react-icons/all-files/fa/FaCaretDown";
 import { FaCaretUp } from "@react-icons/all-files/fa/FaCaretUp";
 import { RiFileDownloadLine } from "@react-icons/all-files/ri/RiFileDownloadLine";
@@ -13,15 +15,15 @@ import CsvModal from "./CsvModal";
 import css from "./index.module.css";
 
 type Props = {
-  // onClickHideUnchangedCol?: () => void;
-  // showingHideUnchangedCol?: boolean;
+  onClickHideUnchangedCol?: () => void;
+  showingHideUnchangedCol?: boolean;
   children?: JSX.Element | null;
   className?: string;
   params?: SqlQueryParams;
 };
 
 export default function DatabaseOptionsDropdown({
-  // onClickHideUnchangedCol,
+  onClickHideUnchangedCol,
   ...props
 }: Props): JSX.Element | null {
   const [modalOpen, setModalOpen] = useState(false);
@@ -32,7 +34,7 @@ export default function DatabaseOptionsDropdown({
     return () => document.removeEventListener("wheel", fakeEscapePress);
   });
 
-  if (!props.children && !props.params) return null;
+  if (!onClickHideUnchangedCol && !props.children && !props.params) return null;
   if (props.params && isMutation(props.params.q)) return null;
 
   return (
@@ -64,7 +66,7 @@ export default function DatabaseOptionsDropdown({
       >
         <div>
           <ul>
-            {/* {onClickHideUnchangedCol && (
+            {onClickHideUnchangedCol && (
               <DropdownItem
                 data-cy="toggle-trim-button"
                 onClick={() => {
@@ -86,7 +88,7 @@ export default function DatabaseOptionsDropdown({
                   columns
                 </>
               </DropdownItem>
-            )} */}
+            )}
             {props.params && (
               <DropdownItem
                 data-cy="open-download-csv-modal-button"

packages/web/components/DiffSelector/ForBranch.tsx

@@ -0,0 +1,65 @@
+import FormSelect from "@components/FormSelect";
+import QueryHandler from "@components/util/QueryHandler";
+import {
+  CommitListForDiffSelectorFragment,
+  useCommitsForDiffSelectorQuery,
+} from "@gen/graphql-types";
+import { RefParams } from "@lib/params";
+import { diff } from "@lib/urls";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import DiffSelector, { formatCommitShort } from "./component";
+import css from "./index.module.css";
+
+type Props = {
+  className?: string;
+  params: RefParams;
+};
+
+type InnerProps = {
+  params: RefParams;
+  className?: string;
+  commits: CommitListForDiffSelectorFragment;
+};
+
+function Inner(props: InnerProps) {
+  const router = useRouter();
+  const [fromCommitId, _setFromCommitId] = useState("");
+  const commits = props.commits.list.map(c => {
+    return {
+      value: c.commitId,
+      label: formatCommitShort(c),
+    };
+  });
+
+  const setFromCommitId = (id?: string) => {
+    const diffPaths = diff({ ...props.params, fromCommitId: id });
+    router.push(diffPaths.href, diffPaths.as).catch(console.error);
+  };
+
+  return (
+    <DiffSelector className={props.className}>
+      <div data-cy="commit-form-select" className={css.branch}>
+        <FormSelect
+          val={fromCommitId}
+          onChangeValue={setFromCommitId}
+          options={commits}
+          mono
+          light
+        />
+      </div>
+    </DiffSelector>
+  );
+}
+
+export default function ForBranch({ params, className }: Props) {
+  const res = useCommitsForDiffSelectorQuery({ variables: params });
+  return (
+    <QueryHandler
+      result={res}
+      render={data => (
+        <Inner params={params} commits={data.commits} className={className} />
+      )}
+    />
+  );
+}

packages/web/components/DiffSelector/component.tsx

@@ -0,0 +1,22 @@
+import { CommitForDiffSelectorFragment } from "@gen/graphql-types";
+import excerpt from "@lib/excerpt";
+import cx from "classnames";
+import { ReactNode } from "react";
+import css from "./index.module.css";
+
+type Props = {
+  children: ReactNode;
+  className?: string;
+};
+
+export default function DiffSelector({ className, children }: Props) {
+  return (
+    <div className={cx(className, css.selector)} data-cy="diff-selector">
+      {children}
+    </div>
+  );
+}
+
+export function formatCommitShort(c: CommitForDiffSelectorFragment) {
+  return `${excerpt(c.message, 32)} (${c.commitId.substring(0, 6)})`;
+}

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

@@ -0,0 +1,7 @@
+.selector {
+  @apply mx-3 py-3 text-primary;
+}
+
+.branch {
+  @apply mb-6;
+}

packages/web/components/DiffSelector/index.tsx

@@ -0,0 +1,6 @@
+import DiffSelector from "./component";
+import ForBranch from "./ForBranch";
+
+export default Object.assign(DiffSelector, {
+  ForBranch,
+});

packages/web/components/DiffSelector/queries.ts

@@ -0,0 +1,26 @@
+import { gql } from "@apollo/client";
+
+export const COMMITS_FOR_DIFF_SELECTOR = gql`
+  fragment CommitForDiffSelector on Commit {
+    _id
+    commitId
+    message
+    committedAt
+    parents
+    committer {
+      _id
+      displayName
+      username
+    }
+  }
+  fragment CommitListForDiffSelector on CommitList {
+    list {
+      ...CommitForDiffSelector
+    }
+  }
+  query CommitsForDiffSelector($refName: String!, $databaseName: String!) {
+    commits(refName: $refName, databaseName: $databaseName) {
+      ...CommitListForDiffSelector
+    }
+  }
+`;

packages/web/components/DiffStat/SummaryStat.module.css

@@ -0,0 +1,31 @@
+.stat {
+  @apply mr-4 text-base flex;
+
+  @screen sm {
+    @apply flex-col text-sm;
+  }
+}
+
+.flat {
+  @apply block mt-1 md:mt-3.5;
+}
+
+.statNoText {
+  @apply mr-3 text-sm;
+}
+
+.num {
+  @apply mr-1 font-semibold text-ld-darkgrey;
+}
+
+.green {
+  @apply text-acc-green;
+}
+
+.red {
+  @apply text-acc-red;
+}
+
+.blue {
+  @apply text-ld-mediumblue;
+}

packages/web/components/DiffStat/SummaryStat.tsx

@@ -0,0 +1,67 @@
+import { numToStringWithCommas } from "@lib/numToStringConversions";
+import cx from "classnames";
+import css from "./SummaryStat.module.css";
+
+type Props = {
+  value?: number;
+  statSingle?: string;
+  statPlural?: string;
+  red?: boolean;
+  green?: boolean;
+  err?: Error;
+  flat?: boolean;
+  blue?: boolean;
+  loading?: boolean;
+};
+
+export default function SummaryStat({
+  value,
+  statSingle,
+  statPlural,
+  err,
+  red = false,
+  green = false,
+  flat = false,
+  blue = false,
+  loading = false,
+}: Props) {
+  if (loading && statPlural) {
+    return (
+      <div className={cx(css.stat, { [css.flat]: flat })}>{statPlural}</div>
+    );
+  }
+  if (err || value === undefined) {
+    return <div className={cx(css.num, css.red)}>-</div>;
+  }
+
+  const num = (
+    <span
+      className={cx(css.num, {
+        [css.green]: green,
+        [css.red]: red,
+        [css.blue]: blue,
+      })}
+    >
+      {getPlusOrMinus(green, red)}
+      {numToStringWithCommas(Math.abs(value))}
+    </span>
+  );
+
+  if (!statSingle || !statPlural) {
+    return <div className={css.statNoText}>{num}</div>;
+  }
+
+  const stat = value === 1 ? statSingle : statPlural;
+  return (
+    <div className={cx(css.stat, { [css.flat]: flat })}>
+      {num}
+      {stat}
+    </div>
+  );
+}
+
+function getPlusOrMinus(green: boolean, red: boolean): string {
+  if (green) return "+";
+  if (red) return "-";
+  return "";
+}

packages/web/components/DiffStat/SummaryStats.tsx

@@ -0,0 +1,71 @@
+import { ApolloError } from "@apollo/client";
+import SmallLoader from "@components/SmallLoader";
+import { DiffStatForDiffsFragment } from "@gen/graphql-types";
+import cx from "classnames";
+import SummaryStat from "./SummaryStat";
+import css from "./index.module.css";
+
+type Props = {
+  diffStat?: DiffStatForDiffsFragment;
+  err?: ApolloError;
+  flat?: boolean;
+  loading?: boolean;
+  numSchemaChanges: number;
+};
+
+export default function SummaryStats({
+  diffStat,
+  err,
+  flat,
+  loading,
+  numSchemaChanges,
+}: Props) {
+  return (
+    <div>
+      {loading && (
+        <SmallLoader.WithText
+          outerClassName={cx(css.loading, { [css.marTop]: !!flat })}
+          loaded={false}
+          text="Loading commit diff stats..."
+        />
+      )}
+      <div className={css.stats}>
+        <SummaryStat
+          flat={flat}
+          value={diffStat?.rowsDeleted}
+          statSingle="row deleted"
+          statPlural="rows deleted"
+          err={err}
+          loading={loading}
+          red
+        />
+        <SummaryStat
+          flat={flat}
+          value={diffStat?.rowsAdded}
+          statSingle="row added"
+          statPlural="rows added"
+          err={err}
+          loading={loading}
+          green
+        />
+        <SummaryStat
+          flat={flat}
+          value={diffStat?.rowsModified}
+          statSingle="row modified"
+          statPlural="rows modified"
+          err={err}
+          loading={loading}
+        />
+        <SummaryStat
+          flat={flat}
+          value={numSchemaChanges}
+          statSingle="schema change"
+          statPlural="schema changes"
+          err={err}
+          loading={loading}
+          blue
+        />
+      </div>
+    </div>
+  );
+}