From 2c4ec7dc86cbec59560678656718c02cf5a64c29 Mon Sep 17 00:00:00 2001
From: Taylor Bantle <taylor@dolthub.com>
Date: Fri, 20 Oct 2023 12:13:42 -0700
Subject: [PATCH] web,graphql: Add releases pages

---
 packages/graphql-server/schema.gql            |   2 +
 .../graphql-server/src/tags/tag.queries.ts    |  12 ++
 .../graphql-server/src/tags/tag.resolver.ts   |  67 ++++++-
 .../CustomCheckbox/index.module.css           |  74 ++++++++
 .../web/components/CustomCheckbox/index.tsx   |  42 +++++
 .../MobileHeaderSelector.tsx                  |   2 +-
 packages/web/components/DatabaseNav/index.tsx |   2 +-
 packages/web/components/DatabaseNav/utils.ts  |   5 +-
 .../DatabasePage/ForDocs/DocsPage/index.tsx   |  25 +--
 .../DatabasePage/ForDocs/NewDocPage/index.tsx |   5 +-
 .../NewReleaseForm/index.module.css           |  24 +++
 .../NewReleaseForm/index.test.tsx             | 127 +++++++++++++
 .../NewReleasePage/NewReleaseForm/index.tsx   |  93 ++++++++++
 .../NewReleasePage/NewReleaseForm/mocks.ts    |  46 +++++
 .../NewReleasePage/NewReleaseForm/queries.ts  |  19 ++
 .../NewReleaseForm/useCreateTag.ts            |  75 ++++++++
 .../NewReleasePage/index.module.css           |   3 +
 .../ForReleases/NewReleasePage/index.tsx      |  16 ++
 .../ForReleases/ReleaseList/List.tsx          |  56 ++++++
 .../ForReleases/ReleaseList/ReleaseHeader.tsx |  32 ++++
 .../ReleaseList/ReleaseListItem.tsx           |  73 ++++++++
 .../ForReleases/ReleaseList/index.module.css  | 114 ++++++++++++
 .../ForReleases/ReleaseList/index.test.tsx    | 170 ++++++++++++++++++
 .../ForReleases/ReleaseList/index.tsx         |  97 ++++++++++
 .../ForReleases/ReleaseList/mocks.ts          |  93 ++++++++++
 .../ForReleases/ReleaseList/queries.ts        |   7 +
 .../ForReleases/ReleaseList/useTagList.ts     |  46 +++++
 .../DatabasePage/ForReleases/index.tsx        |  36 ++++
 .../pageComponents/DatabasePage/index.tsx     |   2 +
 packages/web/gen/graphql-types.tsx            | 107 +++++++++++
 packages/web/lib/mobileUtils.ts               |   8 +-
 packages/web/lib/refetchQueries.ts            |  10 ++
 packages/web/lib/urls.ts                      |   6 +
 .../[databaseName]/releases/index.tsx         |  35 ++++
 .../database/[databaseName]/releases/new.tsx  |  33 ++++
 35 files changed, 1542 insertions(+), 22 deletions(-)
 create mode 100644 packages/web/components/CustomCheckbox/index.module.css
 create mode 100644 packages/web/components/CustomCheckbox/index.tsx
 create mode 100644 packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/index.module.css
 create mode 100644 packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/index.test.tsx
 create mode 100644 packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/index.tsx
 create mode 100644 packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/mocks.ts
 create mode 100644 packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/queries.ts
 create mode 100644 packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/useCreateTag.ts
 create mode 100644 packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/index.module.css
 create mode 100644 packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/index.tsx
 create mode 100644 packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/List.tsx
 create mode 100644 packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/ReleaseHeader.tsx
 create mode 100644 packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/ReleaseListItem.tsx
 create mode 100644 packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.module.css
 create mode 100644 packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.test.tsx
 create mode 100644 packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx
 create mode 100644 packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/mocks.ts
 create mode 100644 packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/queries.ts
 create mode 100644 packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/useTagList.ts
 create mode 100644 packages/web/components/pageComponents/DatabasePage/ForReleases/index.tsx
 create mode 100644 packages/web/pages/database/[databaseName]/releases/index.tsx
 create mode 100644 packages/web/pages/database/[databaseName]/releases/new.tsx

diff --git a/packages/graphql-server/schema.gql b/packages/graphql-server/schema.gql
index 584b6408..a9a63cc3 100644
--- a/packages/graphql-server/schema.gql
+++ b/packages/graphql-server/schema.gql
@@ -201,4 +201,6 @@ type Mutation {
   deleteBranch(databaseName: String!, branchName: String!): Boolean!
   addDatabaseConnection(url: String, useEnv: Boolean): String!
   createDatabase(databaseName: String!): Boolean!
+  createTag(tagName: String!, databaseName: String!, message: String, fromRefName: String!): Tag!
+  deleteTag(databaseName: String!, tagName: String!): Boolean!
 }
\ No newline at end of file
diff --git a/packages/graphql-server/src/tags/tag.queries.ts b/packages/graphql-server/src/tags/tag.queries.ts
index cca59993..80104ee3 100644
--- a/packages/graphql-server/src/tags/tag.queries.ts
+++ b/packages/graphql-server/src/tags/tag.queries.ts
@@ -1,3 +1,15 @@
 export const tagsQuery = `SELECT * FROM dolt_tags ORDER BY date DESC`;
 
 export const tagQuery = `SELECT * FROM dolt_tags WHERE tag_name=?`;
+
+export const callDeleteTag = `CALL DOLT_TAG("-d", ?)`;
+
+export const getCallNewTag = (hasMessage = false, hasAuthor = false) =>
+  `CALL DOLT_TAG(?, ?${hasMessage ? `, "-m", ?` : ""}${getAuthorNameString(
+    hasAuthor,
+  )})`;
+
+export function getAuthorNameString(hasAuthor: boolean): string {
+  if (!hasAuthor) return "";
+  return `, "--author", ?`;
+}
diff --git a/packages/graphql-server/src/tags/tag.resolver.ts b/packages/graphql-server/src/tags/tag.resolver.ts
index 9878b76c..2fe41560 100644
--- a/packages/graphql-server/src/tags/tag.resolver.ts
+++ b/packages/graphql-server/src/tags/tag.resolver.ts
@@ -1,8 +1,41 @@
-import { Args, Query, Resolver } from "@nestjs/graphql";
+import {
+  Args,
+  ArgsType,
+  Field,
+  Mutation,
+  Query,
+  Resolver,
+} from "@nestjs/graphql";
 import { DataSourceService } from "../dataSources/dataSource.service";
 import { DBArgs, TagArgs } from "../utils/commonTypes";
 import { Tag, TagList, fromDoltRowRes } from "./tag.model";
-import { tagQuery, tagsQuery } from "./tag.queries";
+import {
+  callDeleteTag,
+  getCallNewTag,
+  tagQuery,
+  tagsQuery,
+} from "./tag.queries";
+
+// @InputType()
+// class AuthorInfo {
+//   @Field()
+//   name: string;
+
+//   @Field()
+//   email: string;
+// }
+
+@ArgsType()
+class CreateTagArgs extends TagArgs {
+  @Field({ nullable: true })
+  message?: string;
+
+  @Field()
+  fromRefName: string;
+
+  // @Field({ nullable: true })
+  // author?: AuthorInfo;
+}
 
 @Resolver(_of => Tag)
 export class TagResolver {
@@ -26,4 +59,34 @@ export class TagResolver {
       return fromDoltRowRes(args.databaseName, res[0]);
     }, args.databaseName);
   }
+
+  @Mutation(_returns => Tag)
+  async createTag(@Args() args: CreateTagArgs): Promise<Tag> {
+    return this.dss.query(async query => {
+      await query(getCallNewTag(!!args.message), [
+        args.tagName,
+        args.fromRefName,
+        args.message,
+        // getAuthorString(args.author),
+      ]);
+      const res = await query(tagQuery, [args.tagName]);
+      if (!res.length) throw new Error("Error creating tag");
+      return fromDoltRowRes(args.databaseName, res[0]);
+    }, args.databaseName);
+  }
+
+  @Mutation(_returns => Boolean)
+  async deleteTag(@Args() args: TagArgs): Promise<boolean> {
+    return this.dss.query(async query => {
+      await query(callDeleteTag, [args.tagName]);
+      return true;
+    }, args.databaseName);
+  }
 }
+
+// export type CommitAuthor = { name: string; email: string };
+
+// function getAuthorString(commitAuthor?: CommitAuthor): string {
+//   if (!commitAuthor) return "";
+//   return `${commitAuthor.name} <${commitAuthor.email}>`;
+// }
diff --git a/packages/web/components/CustomCheckbox/index.module.css b/packages/web/components/CustomCheckbox/index.module.css
new file mode 100644
index 00000000..306a3798
--- /dev/null
+++ b/packages/web/components/CustomCheckbox/index.module.css
@@ -0,0 +1,74 @@
+.container {
+  @apply block relative pl-10 mb-2 text-primary font-semibold cursor-pointer select-none;
+
+  input {
+    @apply absolute left-0 opacity-0;
+  }
+}
+
+.disabledContainer {
+  @apply text-ld-darkgrey;
+
+  &:hover {
+    @apply cursor-default;
+  }
+}
+
+.blueContainer {
+  input {
+    @apply text-ld-mediumblue;
+  }
+}
+
+.checkmark {
+  @apply absolute -top-0.5 left-0 h-5 w-5 bg-white rounded-sm mt-1 border border-gray-300;
+}
+
+.disabledContainer .checkmark {
+  @apply bg-gray-100 border-gray-300;
+}
+
+.blueContainer .checkmark {
+  @apply border-acc-hoverlinkblue;
+}
+
+.container:hover input ~ .checkmark {
+  @apply border-acc-lightgrey;
+}
+
+.blueContainer:hover input ~ .checkmark {
+  @apply border-acc-hoverlinkblue;
+}
+
+.checkmark > svg {
+  @apply absolute hidden;
+  content: "";
+}
+
+.container .checkmark > svg {
+  @apply text-acc-linkblue font-thin -top-[6px] -left-[1px] text-[28px];
+}
+
+.blueContainer .checkmark > svg {
+  @apply text-ld-mediumblue;
+}
+
+.container input:checked ~ .checkmark {
+  @apply bg-white;
+}
+
+.container input:checked ~ .checkmark > svg {
+  @apply block;
+}
+
+.container input:focus ~ .checkmark {
+  @apply widget-shadow-lightblue;
+}
+
+.container:hover input:disabled ~ .checkmark {
+  @apply border-gray-300;
+}
+
+.description {
+  @apply text-acc-darkgrey ml-10 mb-6;
+}
diff --git a/packages/web/components/CustomCheckbox/index.tsx b/packages/web/components/CustomCheckbox/index.tsx
new file mode 100644
index 00000000..8585100e
--- /dev/null
+++ b/packages/web/components/CustomCheckbox/index.tsx
@@ -0,0 +1,42 @@
+import { FiCheck } from "@react-icons/all-files/fi/FiCheck";
+import cx from "classnames";
+import { ChangeEvent } from "react";
+import css from "./index.module.css";
+
+type Props = {
+  name: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  checked: boolean;
+  label?: string;
+  description?: string;
+  className?: string;
+  disabled?: boolean;
+  blue?: boolean;
+};
+
+export default function CustomCheckbox({
+  className,
+  blue = false,
+  label,
+  description,
+  ...props
+}: Props) {
+  return (
+    <div className={className} data-cy={`${props.name}-checkbox`}>
+      <label
+        className={cx(css.container, {
+          [css.disabledContainer]: !!props.disabled,
+          [css.blueContainer]: blue,
+        })}
+        htmlFor={props.name}
+      >
+        {label}
+        <input {...props} id={props.name} type="checkbox" />
+        <span className={css.checkmark}>
+          <FiCheck />
+        </span>
+      </label>
+      {description && <p className={css.description}>{description}</p>}
+    </div>
+  );
+}
diff --git a/packages/web/components/DatabaseHeaderAndNav/MobileHeaderSelector.tsx b/packages/web/components/DatabaseHeaderAndNav/MobileHeaderSelector.tsx
index e04a1687..8d070dc0 100644
--- a/packages/web/components/DatabaseHeaderAndNav/MobileHeaderSelector.tsx
+++ b/packages/web/components/DatabaseHeaderAndNav/MobileHeaderSelector.tsx
@@ -22,7 +22,7 @@ const getTabOptions = (isDolt: boolean, hideDoltFeature: boolean): Option[] => {
     { value: "ref", label: "Database" },
     { value: "about", label: "About", isDisabled: !isDolt },
     { value: "commitLog", label: "Commit Log", isDisabled: !isDolt },
-    // { value: "releases", label: "Releases", isDisabled: !isDolt },
+    { value: "releases", label: "Releases", isDisabled: !isDolt },
     // { value: "pulls", label: "Pull Requests", isDisabled: !isDolt },
   ];
 };
diff --git a/packages/web/components/DatabaseNav/index.tsx b/packages/web/components/DatabaseNav/index.tsx
index 753767d8..7e2c991f 100644
--- a/packages/web/components/DatabaseNav/index.tsx
+++ b/packages/web/components/DatabaseNav/index.tsx
@@ -22,7 +22,7 @@ type QueryProps = Props & {
   };
 };
 
-const tabs = ["Database", "About", "Commit Log"];
+const tabs = ["Database", "About", "Commit Log", "Releases"];
 
 export default function DatabaseNav(props: Props) {
   const { isDolt } = useIsDolt();
diff --git a/packages/web/components/DatabaseNav/utils.ts b/packages/web/components/DatabaseNav/utils.ts
index 66fc5af9..7dc75af6 100644
--- a/packages/web/components/DatabaseNav/utils.ts
+++ b/packages/web/components/DatabaseNav/utils.ts
@@ -6,6 +6,7 @@ import {
   defaultDoc,
   ref,
   RefUrl,
+  releases,
 } from "@lib/urls";
 import { Route } from "@lib/urlUtils";
 
@@ -17,8 +18,8 @@ function getUrlFromName(name: string): [DatabaseUrl, RefUrl?] {
       return [database, defaultDoc];
     case "Commit Log":
       return [database, commitLog];
-    // case "Releases":
-    //   return [releases];
+    case "Releases":
+      return [releases];
     // case "Pull Requests":
     //   return [pulls];
     default:
diff --git a/packages/web/components/pageComponents/DatabasePage/ForDocs/DocsPage/index.tsx b/packages/web/components/pageComponents/DatabasePage/ForDocs/DocsPage/index.tsx
index d255d04d..f6dcde71 100644
--- a/packages/web/components/pageComponents/DatabasePage/ForDocs/DocsPage/index.tsx
+++ b/packages/web/components/pageComponents/DatabasePage/ForDocs/DocsPage/index.tsx
@@ -1,5 +1,6 @@
 import DocMarkdown from "@components/DocMarkdown";
 import Page404 from "@components/Page404";
+import NotDoltWrapper from "@components/util/NotDoltWrapper";
 import QueryHandler from "@components/util/QueryHandler";
 import {
   DocForDocPageFragment,
@@ -57,17 +58,19 @@ export default function DocsPage({ params, title }: Props) {
       leftNavInitiallyOpen
       title={title}
     >
-      <QueryHandler
-        result={res}
-        errComponent={<Page404 title="Error fetching database" />}
-        render={data =>
-          data.docOrDefaultDoc ? (
-            <Inner params={params} rowData={data.docOrDefaultDoc} />
-          ) : (
-            <NoDocsMsg params={params} />
-          )
-        }
-      />
+      <NotDoltWrapper showNotDoltMsg feature="Viewing docs" bigMsg>
+        <QueryHandler
+          result={res}
+          errComponent={<Page404 title="Error fetching database" />}
+          render={data =>
+            data.docOrDefaultDoc ? (
+              <Inner params={params} rowData={data.docOrDefaultDoc} />
+            ) : (
+              <NoDocsMsg params={params} />
+            )
+          }
+        />
+      </NotDoltWrapper>
     </DatabasePage>
   );
 }
diff --git a/packages/web/components/pageComponents/DatabasePage/ForDocs/NewDocPage/index.tsx b/packages/web/components/pageComponents/DatabasePage/ForDocs/NewDocPage/index.tsx
index fc82a483..2c942efd 100644
--- a/packages/web/components/pageComponents/DatabasePage/ForDocs/NewDocPage/index.tsx
+++ b/packages/web/components/pageComponents/DatabasePage/ForDocs/NewDocPage/index.tsx
@@ -1,3 +1,4 @@
+import NotDoltWrapper from "@components/util/NotDoltWrapper";
 import { RefParams } from "@lib/params";
 import { newDoc } from "@lib/urls";
 import DatabasePage from "../../component";
@@ -15,7 +16,9 @@ export default function NewDocPage({ params }: Props) {
       initialTabIndex={1}
       // smallHeaderBreadcrumbs={<NewDocBreadcrumbs params={params} />}
     >
-      <NewDocForm params={params} />
+      <NotDoltWrapper showNotDoltMsg feature="Creating docs" bigMsg>
+        <NewDocForm params={params} />
+      </NotDoltWrapper>
     </DatabasePage>
   );
 }
diff --git a/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/index.module.css b/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/index.module.css
new file mode 100644
index 00000000..07a2e6c1
--- /dev/null
+++ b/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/index.module.css
@@ -0,0 +1,24 @@
+.container {
+  @apply max-w-2xl mx-auto;
+}
+
+.label {
+  @apply font-semibold text-primary mt-4 mb-2;
+}
+
+.input {
+  @apply mt-4;
+  @apply max-w-md;
+}
+
+.error {
+  @apply text-center max-w-xs;
+}
+
+.textarea {
+  @apply max-w-none;
+}
+
+.textarea > textarea {
+  @apply bg-white;
+}
diff --git a/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/index.test.tsx b/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/index.test.tsx
new file mode 100644
index 00000000..9a010afd
--- /dev/null
+++ b/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/index.test.tsx
@@ -0,0 +1,127 @@
+import { MockedProvider } from "@apollo/client/testing";
+import useMockRouter, { actions } from "@hooks/useMockRouter";
+import { setupAndWait } from "@lib/testUtils.test";
+import { releases } from "@lib/urls";
+import { screen, waitFor } from "@testing-library/react";
+import selectEvent from "react-select-event";
+import NewTagForm from ".";
+import * as mocks from "./mocks";
+
+const jestRouter = jest.spyOn(require("next/router"), "useRouter");
+
+jest.mock("next/router", () => {
+  return {
+    useRouter: () => {
+      return { route: "", pathname: "", query: "", asPath: "" };
+    },
+  };
+});
+
+describe("tests NewTagForm", () => {
+  beforeEach(() => {
+    mocks.createNewTagData.mockClear();
+  });
+
+  const fillTagForm = async () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useMockRouter(jestRouter, {});
+    const { user } = await setupAndWait(
+      <MockedProvider
+        mocks={[
+          mocks.createTagMutationMock,
+          mocks.branchSelectorQueryMock,
+          mocks.defaultBranchQueryMock,
+        ]}
+      >
+        <NewTagForm params={mocks.dbParams} />
+      </MockedProvider>,
+    );
+
+    await user.click(await screen.findByRole("combobox"));
+    await selectEvent.select(
+      screen.getByRole("combobox"),
+      mocks.fromBranch.branchName,
+    );
+
+    const [nameInput, messageInput] = screen.getAllByRole("textbox");
+
+    await user.type(nameInput, mocks.tagName);
+    await user.type(messageInput, mocks.message);
+
+    return user;
+  };
+
+  it("renders correctly", async () => {
+    await fillTagForm();
+
+    expect(
+      screen.getByText("Pick a branch or recent commit"),
+    ).toBeInTheDocument();
+    expect(screen.getByText(mocks.fromBranch.branchName)).toBeInTheDocument();
+
+    const [nameInput, messageInput] = screen.getAllByRole("textbox");
+
+    expect(screen.getByText(/tag name/i)).toBeInTheDocument();
+    expect(nameInput).toHaveDisplayValue(mocks.tagName);
+
+    expect(screen.getByText(/description/i)).toBeInTheDocument();
+    expect(messageInput).toHaveDisplayValue(mocks.message);
+
+    expect(
+      screen.getByRole("button", {
+        name: /create release/i,
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", {
+        name: /cancel/i,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it("creates a new tag", async () => {
+    const user = await fillTagForm();
+
+    await user.click(
+      screen.getByRole("button", {
+        name: /create release/i,
+      }),
+    );
+
+    await waitFor(() =>
+      expect(mocks.createNewTagData.mock.calls).toHaveLength(1),
+    );
+
+    // Navigating to releases page
+    const { href, as } = releases(mocks.dbParams);
+    await waitFor(() => {
+      expect(actions.push).toHaveBeenCalledWith(href, as);
+    });
+  });
+
+  it.skip("disables button when not filled out", async () => {
+    const { user } = await setupAndWait(
+      <MockedProvider
+        mocks={[mocks.createTagMutationMock, mocks.branchSelectorQueryMock]}
+      >
+        <NewTagForm params={mocks.dbParams} />
+      </MockedProvider>,
+    );
+
+    const btn = screen.getByRole("button", {
+      name: /create release/i,
+    });
+    expect(btn).toBeDisabled();
+
+    await user.click(await screen.findByRole("combobox"));
+    await user.click(screen.getAllByText("main")[1]);
+
+    expect(btn).toBeDisabled();
+
+    await user.type(screen.getAllByRole("textbox")[0], mocks.tagName);
+    expect(btn).toBeEnabled();
+
+    await user.type(screen.getAllByRole("textbox")[1], mocks.message);
+    expect(btn).toBeEnabled();
+  });
+});
diff --git a/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/index.tsx b/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/index.tsx
new file mode 100644
index 00000000..86bcb970
--- /dev/null
+++ b/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/index.tsx
@@ -0,0 +1,93 @@
+import Button from "@components/Button";
+import ButtonsWithError from "@components/ButtonsWithError";
+import CustomFormSelect from "@components/CustomFormSelect";
+import ErrorMsg from "@components/ErrorMsg";
+import FormInput from "@components/FormInput";
+import Loader from "@components/Loader";
+import Textarea from "@components/Textarea";
+import { OptionalRefParams } from "@lib/params";
+import { releases } from "@lib/urls";
+import { useRouter } from "next/router";
+import { SyntheticEvent } from "react";
+import css from "./index.module.css";
+import useCreateTag from "./useCreateTag";
+
+type Props = {
+  params: OptionalRefParams;
+};
+
+export default function NewTagForm(props: Props): JSX.Element {
+  const router = useRouter();
+
+  const createTagRes = useCreateTag(props.params);
+
+  const goToReleases = () => {
+    const { href, as } = releases(props.params);
+    router.push(href, as).catch(console.error);
+  };
+
+  const onSubmit = async (e: SyntheticEvent) => {
+    e.preventDefault();
+
+    const data = await createTagRes.createTag();
+    if (!data) return;
+
+    goToReleases();
+  };
+
+  return (
+    <div>
+      <form data-cy="new-tag-form" onSubmit={onSubmit}>
+        <div className={css.container}>
+          <CustomFormSelect.ForBranchesAndCommits
+            {...props}
+            selectedValue={createTagRes.formData.fromRefName}
+            onChangeValue={s => createTagRes.setFormData({ fromRefName: s })}
+          />
+          <FormInput
+            value={createTagRes.formData.tagName}
+            onChangeString={s => createTagRes.setFormData({ tagName: s })}
+            label="Tag name"
+            placeholder="i.e. v1"
+            className={css.input}
+            data-cy="new-tag-name-input"
+          />
+          <Textarea
+            rows={4}
+            value={createTagRes.formData.message}
+            placeholder="Describe this release"
+            label="Description"
+            onChangeString={s => createTagRes.setFormData({ message: s })}
+            className={css.textarea}
+            data-cy="new-tag-description-textarea"
+          />
+          {/* <div>
+            <CustomCheckbox
+              name="add-author"
+              label="Use my name and email as tag author"
+              checked={createTagRes.formData.addTagAuthor}
+              onChange={e =>
+                createTagRes.setFormData({ addTagAuthor: e.target.checked })
+              }
+              description="Recommended. If unchecked, Dolt System Account will be used as tag author."
+            />
+          </div> */}
+          <ButtonsWithError
+            data-cy="new-tag-button-group"
+            onCancel={goToReleases}
+          >
+            <Button
+              type="submit"
+              disabled={!createTagRes.canCreateTag}
+              data-cy="new-tag-button"
+            >
+              Create release
+            </Button>
+          </ButtonsWithError>
+        </div>
+        <Loader loaded={!createTagRes.loading} />
+        <ErrorMsg className={css.error} err={createTagRes.creationErr} />
+      </form>
+    </div>
+  );
+}
diff --git a/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/mocks.ts b/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/mocks.ts
new file mode 100644
index 00000000..049eab4d
--- /dev/null
+++ b/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/mocks.ts
@@ -0,0 +1,46 @@
+import { MockedResponse } from "@apollo/client/testing";
+import {
+  branchSelectorMock,
+  mainBranch,
+} from "@components/CustomFormSelect/mocks";
+import { CreateTagDocument } from "@gen/graphql-types";
+import { loremer } from "@lib/loremer";
+import { defaultBranchMock } from "../../../ForDefaultBranch/mocks";
+import { generateFakeTag } from "../../ReleaseList/mocks";
+
+export const dbParams = { databaseName: "test" };
+export const fromBranch = mainBranch(dbParams);
+export const fromRefName: string = fromBranch.branchName;
+
+export const tagParams = { ...dbParams, tagName: "v1" };
+export const message = loremer.sentence();
+export const { tagName } = tagParams;
+export const returnedTag = generateFakeTag(tagParams, message);
+
+// QUERY MOCKS
+
+export const branchSelectorQueryMock = branchSelectorMock(dbParams);
+export const defaultBranchQueryMock = defaultBranchMock(fromBranch);
+
+// MUTATION MOCKS
+
+export const createNewTagData = jest.fn(() => {
+  return { data: { createTag: returnedTag } };
+});
+
+export const createTagMutationMock: MockedResponse = {
+  request: {
+    query: CreateTagDocument,
+    variables: {
+      ...dbParams,
+      tagName,
+      message,
+      fromRefName,
+      // author: {
+      //   name: username,
+      //   email,
+      // },
+    },
+  },
+  newData: createNewTagData,
+};
diff --git a/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/queries.ts b/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/queries.ts
new file mode 100644
index 00000000..a150fbb1
--- /dev/null
+++ b/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/queries.ts
@@ -0,0 +1,19 @@
+import { gql } from "@apollo/client";
+
+export const CREATE_TAG_MUTATION = gql`
+  mutation CreateTag(
+    $databaseName: String!
+    $tagName: String!
+    $message: String
+    $fromRefName: String!
+  ) {
+    createTag(
+      databaseName: $databaseName
+      tagName: $tagName
+      message: $message
+      fromRefName: $fromRefName
+    ) {
+      ...TagForList
+    }
+  }
+`;
diff --git a/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/useCreateTag.ts b/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/useCreateTag.ts
new file mode 100644
index 00000000..a8f9fdf4
--- /dev/null
+++ b/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/NewReleaseForm/useCreateTag.ts
@@ -0,0 +1,75 @@
+import { CreateTagMutation, useCreateTagMutation } from "@gen/graphql-types";
+import useMutation from "@hooks/useMutation";
+import useSetState from "@hooks/useSetState";
+import { ApolloErrorType } from "@lib/errors/types";
+import { DatabaseParams } from "@lib/params";
+import { refetchTagQueries } from "@lib/refetchQueries";
+import { Dispatch, useState } from "react";
+
+type FormData = {
+  tagName: string;
+  message: string;
+  fromRefName: string;
+  addTagAuthor: boolean;
+};
+
+type ReturnType = {
+  // Returns the created tag if successful
+  createTag: () => Promise<CreateTagMutation | null | undefined>;
+  creationErr: ApolloErrorType;
+  loading: boolean;
+  canCreateTag: boolean;
+  formData: FormData;
+  setFormData: Dispatch<Partial<FormData>>;
+};
+
+// A helper function to create a tag using a specific revision type
+export default function useCreateTag(params: DatabaseParams): ReturnType {
+  const [formData, setFormData] = useSetState({
+    tagName: "",
+    message: "",
+    fromRefName: "",
+    addTagAuthor: false,
+  });
+  const [loading, setLoading] = useState(false);
+
+  const canCreateTag = !!formData.tagName && !!formData.fromRefName;
+
+  const { mutateFn: createTagMutation, err: creationErr } = useMutation({
+    hook: useCreateTagMutation,
+    refetchQueries: refetchTagQueries(params),
+  });
+
+  const createTag = async (): Promise<CreateTagMutation | null | undefined> => {
+    setLoading(true);
+    try {
+      const { data } = await createTagMutation({
+        variables: {
+          ...params,
+          tagName: formData.tagName,
+          message: formData.message,
+          fromRefName: formData.fromRefName,
+          // author:
+          //  formData.addTagAuthor && currentUser
+          //    ? {
+          //        name: currentUser.username,
+          //        email: currentUser.emailAddressesList[0].address,
+          //      } :
+          //   undefined,
+        },
+      });
+      return data;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return {
+    createTag,
+    creationErr,
+    loading,
+    canCreateTag,
+    formData,
+    setFormData,
+  };
+}
diff --git a/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/index.module.css b/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/index.module.css
new file mode 100644
index 00000000..c816b6c0
--- /dev/null
+++ b/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/index.module.css
@@ -0,0 +1,3 @@
+.container {
+  @apply m-6;
+}
diff --git a/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/index.tsx b/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/index.tsx
new file mode 100644
index 00000000..f696780e
--- /dev/null
+++ b/packages/web/components/pageComponents/DatabasePage/ForReleases/NewReleasePage/index.tsx
@@ -0,0 +1,16 @@
+import { OptionalRefParams } from "@lib/params";
+import NewReleaseForm from "./NewReleaseForm";
+import css from "./index.module.css";
+
+type Props = {
+  params: OptionalRefParams;
+};
+
+export default function NewReleasePage(props: Props): JSX.Element {
+  return (
+    <div className={css.container}>
+      <h1>New Release</h1>
+      <NewReleaseForm {...props} />
+    </div>
+  );
+}
diff --git a/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/List.tsx b/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/List.tsx
new file mode 100644
index 00000000..deb2c2f2
--- /dev/null
+++ b/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/List.tsx
@@ -0,0 +1,56 @@
+import { TagForListFragment } from "@gen/graphql-types";
+import { OptionalRefParams } from "@lib/params";
+import { Fragment } from "react";
+import InfiniteScroll from "react-infinite-scroller";
+import ReleaseHeader from "./ReleaseHeader";
+import ReleaseListItem from "./ReleaseListItem";
+import css from "./index.module.css";
+
+type InnerProps = {
+  tags?: TagForListFragment[];
+  loadMore: () => void;
+  hasMore: boolean;
+  params: OptionalRefParams;
+  openDeleteModal: (t: TagForListFragment) => void;
+};
+
+export default function List({ tags = [], ...props }: InnerProps) {
+  return (
+    <div className={css.tagContainer}>
+      <InfiniteScroll
+        loadMore={props.loadMore}
+        hasMore={props.hasMore}
+        loader={
+          <p className={css.loading} key={0}>
+            Loading releases...
+          </p>
+        }
+        useWindow={false}
+        initialLoad={false}
+        getScrollParent={() => document.getElementById("main-content")}
+      >
+        <ol className={css.list} data-cy="release-list-releases-list">
+          {tags.map((t, i) => {
+            const latestRelease = tags[i - 1];
+            return (
+              <Fragment key={`frag-${t._id}`}>
+                <ReleaseHeader
+                  key={`header-${t._id}`}
+                  tag={t}
+                  prevTag={latestRelease}
+                />
+                <ReleaseListItem
+                  {...props}
+                  key={t._id}
+                  tag={t}
+                  latest={i === 0}
+                  onDeleteClicked={() => props.openDeleteModal(t)}
+                />
+              </Fragment>
+            );
+          })}
+        </ol>
+      </InfiniteScroll>
+    </div>
+  );
+}
diff --git a/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/ReleaseHeader.tsx b/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/ReleaseHeader.tsx
new file mode 100644
index 00000000..c66f42bb
--- /dev/null
+++ b/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/ReleaseHeader.tsx
@@ -0,0 +1,32 @@
+import { TagForListFragment } from "@gen/graphql-types";
+import css from "./index.module.css";
+
+type Props = {
+  tag: TagForListFragment; // latest release
+  prevTag?: TagForListFragment; // tag that comes before latest release
+};
+
+export default function ReleaseHeader(props: Props) {
+  const date = new Date(props.tag.taggedAt);
+  const prevDate = props.prevTag && new Date(props.prevTag.taggedAt);
+
+  const shouldShowHeader =
+    !props.prevTag || formatLongDate(date) !== formatLongDate(prevDate);
+  if (shouldShowHeader) {
+    return (
+      <li className={css.header} data-cy="release-list-header">
+        <span className={css.bullet} />
+        {formatLongDate(date)}
+      </li>
+    );
+  }
+  return null;
+}
+
+export function formatLongDate(d: Date | undefined): string {
+  if (!d) {
+    return "";
+  }
+  const month = d.toLocaleString("default", { month: "long" });
+  return `${month} ${d.getDate()}, ${d.getFullYear()}`;
+}
diff --git a/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/ReleaseListItem.tsx b/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/ReleaseListItem.tsx
new file mode 100644
index 00000000..2900d97e
--- /dev/null
+++ b/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/ReleaseListItem.tsx
@@ -0,0 +1,73 @@
+import Button from "@components/Button";
+import CommitLink from "@components/links/CommitLink";
+import RefLink from "@components/links/RefLink";
+import { TagForListFragment } from "@gen/graphql-types";
+import { DatabaseParams } from "@lib/params";
+import { FaRegTrashAlt } from "@react-icons/all-files/fa/FaRegTrashAlt";
+import { IoIosGitCommit } from "@react-icons/all-files/io/IoIosGitCommit";
+import Timeago from "react-timeago";
+import css from "./index.module.css";
+
+type Props = {
+  tag: TagForListFragment;
+  latest: boolean;
+  params: DatabaseParams;
+  onDeleteClicked: () => void;
+};
+
+export default function ReleaseListItem({
+  tag,
+  onDeleteClicked,
+  ...props
+}: Props): JSX.Element {
+  const { username, displayName } = tag.tagger;
+
+  return (
+    <li className={css.item} data-cy="release-list-item">
+      <div className={css.itemTop}>
+        <span className={css.releaseName} data-cy="release-item-release-name">
+          <RefLink params={{ ...props.params, refName: tag.tagName }}>
+            <span>{tag.tagName}</span>
+          </RefLink>
+          {props.latest && (
+            <div className={css.latest} data-cy="release-list-latest-label">
+              Latest release
+            </div>
+          )}
+        </span>
+        <Button.Link
+          onClick={onDeleteClicked}
+          red
+          className={css.delete}
+          aria-label="delete"
+        >
+          <FaRegTrashAlt />
+        </Button.Link>
+      </div>
+      {tag.message && (
+        <span className={css.releaseNotes}>
+          <p>{tag.message}</p>
+        </span>
+      )}
+      <div className={css.itemBottom}>
+        <span>
+          <span className={css.bold}>{username ?? displayName}</span> tagged{" "}
+          <span className={css.timeago} data-cy="release-list-item-date">
+            <Timeago date={tag.taggedAt} />
+          </span>
+        </span>
+        <CommitLink
+          params={{
+            ...props.params,
+            refName: tag.tagName,
+            commitId: tag.commitId,
+          }}
+          className={css.commitId}
+        >
+          <IoIosGitCommit className={css.commitIcon} />
+          {tag.commitId}
+        </CommitLink>
+      </div>
+    </li>
+  );
+}
diff --git a/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.module.css b/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.module.css
new file mode 100644
index 00000000..04f2082c
--- /dev/null
+++ b/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.module.css
@@ -0,0 +1,114 @@
+.container {
+  @apply mx-6;
+}
+
+.top {
+  @apply flex justify-between pt-6;
+}
+
+.tagContainer {
+  @apply mr-4 pb-4 text-primary border-ld-lightgrey border-l-[1.5px];
+
+  @screen lg {
+    @apply ml-16;
+  }
+}
+
+.list {
+  @apply mt-10 pl-6 pr-2;
+
+  @screen lg {
+    @apply px-10;
+  }
+}
+
+.item {
+  @apply border border-ld-lightblue rounded-lg my-3 py-4 px-6 text-sm relative;
+}
+
+.header {
+  @apply relative font-semibold pb-2;
+}
+
+.bullet {
+  @apply border-ld-lightgrey h-3 w-3 absolute bg-white rounded-full border-[1.5px] -left-[1.9rem] top-[0.4rem];
+
+  @screen lg {
+    @apply -left-[2.9rem];
+  }
+}
+
+.latest {
+  @apply inline-block px-4 mx-4 rounded-full bg-white border-2 border-acc-green text-acc-green text-sm font-semibold py-[0.05rem];
+}
+
+.itemTop {
+  @apply flex justify-between items-center;
+}
+
+.timeago {
+  @apply text-ld-darkgrey;
+}
+
+.commitId {
+  @apply font-semibold text-ld-darkgrey mb-1.5;
+
+  &:hover {
+    @apply text-acc-lightgrey;
+  }
+
+  @screen lg {
+    @apply mx-4 mb-0;
+  }
+}
+
+.commitIcon {
+  @apply hidden;
+
+  @screen lg {
+    @apply inline;
+  }
+}
+
+.releaseName {
+  @apply pb-2 max-w-4xl text-base;
+}
+
+.releaseNotes > p {
+  @apply py-4;
+}
+
+.loading {
+  @apply mx-12 my-4;
+}
+
+.noReleases {
+  @apply text-center text-lg m-6;
+}
+
+.itemBottom {
+  @apply text-ld-darkgrey font-normal flex flex-col-reverse;
+  a {
+    @apply font-normal;
+  }
+
+  @screen lg {
+    @apply block;
+  }
+}
+
+.bold {
+  @apply font-semibold;
+}
+
+.releaseToDelete {
+  @apply font-bold;
+}
+
+.delete {
+  @apply hidden;
+
+  @screen lg {
+    @apply block ml-2;
+  }
+}
diff --git a/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.test.tsx b/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.test.tsx
new file mode 100644
index 00000000..73a3db17
--- /dev/null
+++ b/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.test.tsx
@@ -0,0 +1,170 @@
+import { MockedProvider } from "@apollo/client/testing";
+import { screen } from "@testing-library/react";
+import { TagForListFragment } from "@gen/graphql-types";
+import { renderAndWait } from "@lib/testUtils.test";
+import ReleaseList from ".";
+import * as mocks from "./mocks";
+import { formatLongDate } from "./ReleaseHeader";
+
+async function expectTagInfo(t: TagForListFragment) {
+  expect(await screen.findByText(t.tagName)).toBeInTheDocument();
+  expect(screen.getByText(t.message)).toBeInTheDocument();
+  expect(
+    screen.getByText(formatLongDate(new Date(t.taggedAt))),
+  ).toBeInTheDocument();
+  if (t.tagger.username) {
+    expect(await screen.findByText(t.tagger.username)).toBeInTheDocument();
+  }
+  expect(
+    screen.getByRole("link", {
+      name: t.commitId,
+    }),
+  ).toBeInTheDocument();
+}
+
+describe("tests ReleaseList", () => {
+  // beforeEach(() => {
+  //   mocks.deleteTagNewData.mockClear();
+  // });
+
+  it("renders correctly", async () => {
+    await renderAndWait(
+      <MockedProvider mocks={[mocks.tagsListQueryMock]}>
+        <ReleaseList params={mocks.databaseParams} />
+      </MockedProvider>,
+    );
+
+    expect(
+      screen.getByRole("heading", {
+        name: /releases/i,
+      }),
+    ).toBeInTheDocument();
+
+    // expect(
+    //   await screen.findByRole("button", {
+    //     name: /create release/i,
+    //   }),
+    // ).toBeInTheDocument();
+
+    await expectTagInfo(mocks.tag1);
+    await expectTagInfo(mocks.tag2);
+    expect(screen.getByText(/latest release/i)).toBeInTheDocument();
+    const listItems = screen.getAllByRole("listitem");
+    expect(listItems).toHaveLength(3);
+    // expect(within(listItems[1]).getByLabelText("delete")).toBeInTheDocument();
+    // expect(within(listItems[3]).getByLabelText("delete")).toBeInTheDocument();
+  });
+
+  // it("shows create / delete buttons when user has write perms", async () => {
+  //   await renderAndWait(
+  //     <MockedProvider
+  //       mocks={[mocks.tagsListQueryMock, mocks.writePermRepoRoleMock]}
+  //     >
+  //       <ReleaseList params={mocks.databaseParams} />
+  //     </MockedProvider>,
+  //   );
+
+  //   expect(
+  //     await screen.findByRole("button", {
+  //       name: /create release/i,
+  //     }),
+  //   ).toBeInTheDocument();
+
+  //   const row = screen.getAllByRole("listitem")[1];
+  //   expect(within(row).getByLabelText("delete")).toBeInTheDocument();
+  // });
+
+  // it("does not show create / delete buttons when user has no write perms", async () => {
+  //   await renderAndWait(
+  //     <MockedProvider
+  //       mocks={[mocks.tagsListQueryMock, mocks.noPermRepoRoleMock]}
+  //     >
+  //       <ReleaseList params={mocks.databaseParams} />
+  //     </MockedProvider>,
+  //   );
+
+  //   expect(
+  //     screen.queryByRole("button", {
+  //       name: /create release/i,
+  //     }),
+  //   ).not.toBeInTheDocument();
+
+  //   const rows = await screen.findAllByRole("listitem");
+  //   expect(within(rows[1]).queryAllByRole("button").length).toBe(1);
+  // });
+
+  /**
+   * Renders page with given mocked responses then clicks on the specified delete button and returns when modal is open.
+   * @param mRs Array of mocked responses
+   * @param getDeleteButton Function that returns the delete button. Called after the table is rendered.
+   * @returns the heading of the delete modal
+   */
+  // async function openDeleteTagModal(
+  //   mRs: MockedResponse[],
+  //   getDeleteButton: () => Promise<HTMLElement>,
+  // ): Promise<{ heading: HTMLElement; user: any }> {
+  //   const { user } = await setupAndWait(
+  //     <MockedProvider mocks={mRs}>
+  //       <ReleaseList params={mocks.databaseParams} />
+  //     </MockedProvider>,
+  //   );
+
+  //   const deleteButton = await getDeleteButton();
+  //   await user.click(deleteButton);
+
+  //   const heading = await screen.findByRole("heading", {
+  //     name: /delete release/i,
+  //   });
+
+  //   return { heading, user };
+  // }
+
+  // it("deletes the correct tag", async () => {
+  //   const tagToDelete = mocks.tag2;
+
+  //   const getDeleteButton = async () => {
+  //     const listItems = await screen.findAllByRole("listitem");
+  //     return within(listItems[3]).getByLabelText("delete");
+  //   };
+
+  //   const { user } = await openDeleteTagModal(
+  //     [
+  //       mocks.tagsListQueryMock,
+  //       mocks.buildDeleteTagMutationMock(tagToDelete.tagName),
+  //       mocks.writePermRepoRoleMock,
+  //     ],
+  //     getDeleteButton,
+  //   );
+
+  //   await user.click(screen.getByRole("button", { name: /delete release/i }));
+
+  //   // This will fail if the wrong branch is deleted because the mutation mock
+  //   // is created with branchToDelete's branchName in variables.
+  //   await waitFor(() =>
+  //     expect(mocks.deleteTagNewData.mock.calls.length).toBe(1),
+  //   );
+  // });
+
+  // it("does not delete a tag if model is just opened", async () => {
+  //   const tagToDelete = mocks.tag2;
+
+  //   const getDeleteButton = async () => {
+  //     const listItems = await screen.findAllByRole("listitem");
+  //     return within(listItems[3]).getByLabelText("delete");
+  //   };
+
+  //   const { heading, user } = await openDeleteTagModal(
+  //     [
+  //       mocks.tagsListQueryMock,
+  //       mocks.buildDeleteTagMutationMock(tagToDelete.tagName),
+  //       mocks.writePermRepoRoleMock,
+  //     ],
+  //     getDeleteButton,
+  //   );
+
+  //   await user.click(screen.getByRole("button", { name: /cancel/i }));
+  //   await waitFor(() => expect(heading).not.toBeInTheDocument());
+
+  //   expect(mocks.deleteTagNewData.mock.calls.length).toBe(0);
+  // });
+});
diff --git a/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx b/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx
new file mode 100644
index 00000000..a88da3ab
--- /dev/null
+++ b/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/index.tsx
@@ -0,0 +1,97 @@
+import Button from "@components/Button";
+import { Database404Inner } from "@components/Database404";
+import DeleteModal from "@components/DeleteModal";
+import Loader from "@components/Loader";
+import Page404 from "@components/Page404";
+import Link from "@components/links/Link";
+import { TagForListFragment, useDeleteTagMutation } from "@gen/graphql-types";
+import { gqlDepNotFound } from "@lib/errors/graphql";
+import { errorMatches } from "@lib/errors/helpers";
+import { OptionalRefParams } from "@lib/params";
+import { refetchTagQueries } from "@lib/refetchQueries";
+import { newRelease } from "@lib/urls";
+import { useState } from "react";
+import List from "./List";
+import css from "./index.module.css";
+import { useTagList } from "./useTagList";
+
+type Props = {
+  params: OptionalRefParams;
+};
+
+type InnerProps = {
+  tags?: TagForListFragment[];
+  loadMore: () => void;
+  hasMore: boolean;
+} & Props;
+
+function Inner({ tags, ...props }: InnerProps) {
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  const [tagNameToDelete, setTagNameToDelete] = useState("");
+
+  const openDeleteModal = (t: TagForListFragment) => {
+    setTagNameToDelete(t.tagName);
+    setDeleteModalOpen(true);
+  };
+
+  return (
+    <div className={css.container}>
+      <div className={css.top}>
+        <h1>Releases</h1>
+        <Link
+          {...newRelease({
+            ...props.params,
+            refName:
+              tagNameToDelete === props.params.refName
+                ? undefined
+                : props.params.refName,
+          })}
+        >
+          <Button>Create Release</Button>
+        </Link>
+      </div>
+      {tags?.length ? (
+        <List {...props} tags={tags} openDeleteModal={openDeleteModal} />
+      ) : (
+        <p className={css.noReleases} data-cy="release-list-no-releases">
+          No releases found
+        </p>
+      )}
+      <DeleteModal
+        isOpen={deleteModalOpen}
+        setIsOpen={setDeleteModalOpen}
+        title="Delete Release"
+        btnText="Delete release"
+        mutationProps={{
+          hook: useDeleteTagMutation,
+          variables: { ...props.params, tagName: tagNameToDelete },
+          refetchQueries: refetchTagQueries(props.params),
+        }}
+      >
+        <p>
+          Are you sure you want to delete the{" "}
+          <span className={css.releaseToDelete}>{tagNameToDelete}</span>{" "}
+          release?
+          <br />
+          This cannot be undone.
+        </p>
+      </DeleteModal>
+    </div>
+  );
+}
+
+export default function ReleaseList(props: Props): JSX.Element {
+  const { loading, tags, loadMore, hasMore, error } = useTagList(props.params);
+
+  if (loading) return <Loader loaded={false} />;
+
+  if (error) {
+    if (errorMatches(gqlDepNotFound, error)) {
+      return <Database404Inner {...props} />;
+    }
+    const title = `Releases for ${props.params.databaseName} not found`;
+    return <Page404 title={title} error={error} />;
+  }
+
+  return <Inner {...props} tags={tags} loadMore={loadMore} hasMore={hasMore} />;
+}
diff --git a/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/mocks.ts b/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/mocks.ts
new file mode 100644
index 00000000..8b291c29
--- /dev/null
+++ b/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/mocks.ts
@@ -0,0 +1,93 @@
+import { MockedResponse } from "@apollo/client/testing";
+import {
+  DoltWriterForHistoryFragment,
+  TagForListFragment,
+  TagListDocument,
+  TagListQuery,
+} from "@gen/graphql-types";
+import chance from "@lib/chance";
+import { DatabaseParams } from "@lib/params";
+
+export function generateFakeTag(
+  params: DatabaseParams & { tagName: string },
+  message: string,
+): TagForListFragment {
+  const email = chance.email();
+  const doltWriter: DoltWriterForHistoryFragment = {
+    __typename: "DoltWriter",
+    _id: email,
+    displayName: chance.name(),
+    username: chance.word(),
+    emailAddress: email,
+  };
+
+  return {
+    __typename: "Tag",
+    _id: `databases/${params.databaseName}/tags/${params.tagName}`,
+    ...params,
+    message,
+    taggedAt: new Date(),
+    tagger: doltWriter,
+    commitId: chance.hash(),
+  };
+}
+
+export function buildFakeData(list: TagForListFragment[]): TagListQuery {
+  return {
+    __typename: "Query",
+    tags: {
+      __typename: "TagList",
+      list,
+    },
+  };
+}
+
+// QUERY MOCKS
+
+export const databaseParams = {
+  deploymentName: "test",
+  ownerName: "dolthub",
+  databaseName: "dbname",
+};
+
+// export const writePermRepoRoleMock = repoRoleMock(databaseParams, RepoRole.Writer);
+// export const noPermRepoRoleMock = repoRoleMock(
+//   databaseParams,
+//   RepoRole.Unspecified,
+// );
+
+const request = {
+  query: TagListDocument,
+  variables: databaseParams,
+};
+
+export const tag1 = generateFakeTag(
+  { ...databaseParams, tagName: "v1" },
+  chance.sentence(),
+);
+export const tag2 = generateFakeTag(
+  { ...databaseParams, tagName: "v2" },
+  chance.sentence(),
+);
+
+export const tagsListQueryMock: MockedResponse = {
+  request,
+  result: {
+    data: buildFakeData([tag1, tag2]),
+  },
+};
+
+// // MUTATION MOCKS
+
+// export const deleteTagNewData = jest.fn(() => {
+//   return { data: { deleteBranch: true } };
+// });
+// export function buildDeleteTagMutationMock(tagName: string): MockedResponse {
+//   return {
+//     request: {
+//       query: DeleteTagDocument,
+//       variables: { ...databaseParams, tagName },
+//     },
+//     newData: deleteTagNewData,
+//   };
+// }
diff --git a/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/queries.ts b/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/queries.ts
new file mode 100644
index 00000000..dc3b3cce
--- /dev/null
+++ b/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/queries.ts
@@ -0,0 +1,7 @@
+import { gql } from "@apollo/client";
+
+export const DELETE_TAG_MUTATION = gql`
+  mutation DeleteTag($databaseName: String!, $tagName: String!) {
+    deleteTag(databaseName: $databaseName, tagName: $tagName)
+  }
+`;
diff --git a/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/useTagList.ts b/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/useTagList.ts
new file mode 100644
index 00000000..7f0961c8
--- /dev/null
+++ b/packages/web/components/pageComponents/DatabasePage/ForReleases/ReleaseList/useTagList.ts
@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+import { TagForListFragment, useTagListQuery } from "@gen/graphql-types";
+import useApolloError from "@hooks/useApolloError";
+import { handleCaughtApolloError } from "@lib/errors/helpers";
+import { ApolloErrorType } from "@lib/errors/types";
+import { DatabaseParams } from "@lib/params";
+
+type ReturnType = {
+  tags: TagForListFragment[] | undefined;
+  loadMore: () => Promise<void>;
+  error?: ApolloErrorType;
+  loading: boolean;
+  hasMore: boolean;
+  refetch: () => Promise<void>;
+};
+
+export function useTagList(params: DatabaseParams): ReturnType {
+  const { data, ...res } = useTagListQuery({
+    variables: params,
+    fetchPolicy: "cache-and-network",
+  });
+  const [err, setErr] = useApolloError(res.error);
+  const [tags, setTags] = useState(data?.tags.list);
+  // const [pageToken, setPageToken] = useState(data?.commits.nextPageToken);
+  // const [lastPageToken, setLastPageToken] = useState("");
+
+  const refetch = async () => {
+    try {
+      const newRes = await res.refetch(params);
+      setTags(newRes.data.tags.list);
+    } catch (e) {
+      handleCaughtApolloError(e, setErr);
+    }
+  };
+
+  useEffect(() => {
+    setTags(data?.tags.list);
+    // setPageToken(data?.tags.nextPageToken);
+  }, [data, setTags]);
+
+  const loadMore = async () => {};
+  const hasMore = false;
+  // const hasMore = !!pageToken && pageToken !== lastPageToken;
+
+  return { ...res, error: err, tags, loadMore, hasMore, refetch };
+}
diff --git a/packages/web/components/pageComponents/DatabasePage/ForReleases/index.tsx b/packages/web/components/pageComponents/DatabasePage/ForReleases/index.tsx
new file mode 100644
index 00000000..aa7ba4c4
--- /dev/null
+++ b/packages/web/components/pageComponents/DatabasePage/ForReleases/index.tsx
@@ -0,0 +1,36 @@
+import NotDoltWrapper from "@components/util/NotDoltWrapper";
+import { OptionalRefParams } from "@lib/params";
+import { releases } from "@lib/urls";
+import ForDefaultBranch from "../ForDefaultBranch";
+import NewReleasePage from "./NewReleasePage";
+import ReleaseList from "./ReleaseList";
+
+type Props = {
+  params: OptionalRefParams;
+  newRelease?: boolean;
+};
+
+export default function ForReleases(props: Props): JSX.Element {
+  const feature = props.newRelease ? "Creating releases" : "Viewing releases";
+  return (
+    <ForDefaultBranch
+      params={{
+        ...props.params,
+        refName: props.params.refName ?? undefined,
+      }}
+      initialTabIndex={3}
+      hideDefaultTable
+      // smallHeaderBreadcrumbs={<ReleasesBreadcrumbs params={props.params} />}
+      title="releases"
+      routeRefChangeTo={releases}
+    >
+      <NotDoltWrapper showNotDoltMsg feature={feature} bigMsg>
+        {props.newRelease ? (
+          <NewReleasePage params={props.params} />
+        ) : (
+          <ReleaseList params={props.params} />
+        )}
+      </NotDoltWrapper>
+    </ForDefaultBranch>
+  );
+}
diff --git a/packages/web/components/pageComponents/DatabasePage/index.tsx b/packages/web/components/pageComponents/DatabasePage/index.tsx
index 58829928..c4f1b6e0 100644
--- a/packages/web/components/pageComponents/DatabasePage/index.tsx
+++ b/packages/web/components/pageComponents/DatabasePage/index.tsx
@@ -6,6 +6,7 @@ import ForDefaultBranch from "./ForDefaultBranch";
 import ForDocs from "./ForDocs";
 import ForQuery from "./ForQuery";
 import ForRef from "./ForRef";
+import ForReleases from "./ForReleases";
 import ForSchema from "./ForSchema";
 import ForTable from "./ForTable";
 import DatabasePage from "./component";
@@ -19,6 +20,7 @@ export default Object.assign(DatabasePage, {
   ForDocs,
   ForQuery,
   ForRef,
+  ForReleases,
   ForSchema,
   ForTable,
 });
diff --git a/packages/web/gen/graphql-types.tsx b/packages/web/gen/graphql-types.tsx
index 1aa68bfc..131e8003 100644
--- a/packages/web/gen/graphql-types.tsx
+++ b/packages/web/gen/graphql-types.tsx
@@ -145,7 +145,9 @@ export type Mutation = {
   addDatabaseConnection: Scalars['String']['output'];
   createBranch: Branch;
   createDatabase: Scalars['Boolean']['output'];
+  createTag: Tag;
   deleteBranch: Scalars['Boolean']['output'];
+  deleteTag: Scalars['Boolean']['output'];
 };
 
 
@@ -167,11 +169,25 @@ export type MutationCreateDatabaseArgs = {
 };
 
 
+export type MutationCreateTagArgs = {
+  databaseName: Scalars['String']['input'];
+  fromRefName: Scalars['String']['input'];
+  message?: InputMaybe<Scalars['String']['input']>;
+  tagName: Scalars['String']['input'];
+};
+
+
 export type MutationDeleteBranchArgs = {
   branchName: Scalars['String']['input'];
   databaseName: Scalars['String']['input'];
 };
 
+
+export type MutationDeleteTagArgs = {
+  databaseName: Scalars['String']['input'];
+  tagName: Scalars['String']['input'];
+};
+
 export type Query = {
   __typename?: 'Query';
   branch?: Maybe<Branch>;
@@ -582,6 +598,24 @@ export type RefPageQueryVariables = Exact<{
 
 export type RefPageQuery = { __typename?: 'Query', branch?: { __typename?: 'Branch', _id: string } | null, tableNames: { __typename?: 'TableNames', list: Array<string> } };
 
+export type CreateTagMutationVariables = Exact<{
+  databaseName: Scalars['String']['input'];
+  tagName: Scalars['String']['input'];
+  message?: InputMaybe<Scalars['String']['input']>;
+  fromRefName: Scalars['String']['input'];
+}>;
+
+
+export type CreateTagMutation = { __typename?: 'Mutation', createTag: { __typename?: 'Tag', _id: string, tagName: string, message: string, taggedAt: any, commitId: string, tagger: { __typename?: 'DoltWriter', _id: string, username?: string | null, displayName: string, emailAddress: string } } };
+
+export type DeleteTagMutationVariables = Exact<{
+  databaseName: Scalars['String']['input'];
+  tagName: Scalars['String']['input'];
+}>;
+
+
+export type DeleteTagMutation = { __typename?: 'Mutation', deleteTag: boolean };
+
 export type AddDatabaseConnectionMutationVariables = Exact<{
   url?: InputMaybe<Scalars['String']['input']>;
   useEnv?: InputMaybe<Scalars['Boolean']['input']>;
@@ -1668,6 +1702,79 @@ export function useRefPageQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptio
 export type RefPageQueryHookResult = ReturnType<typeof useRefPageQuery>;
 export type RefPageQueryLazyQueryHookResult = ReturnType<typeof useRefPageQueryLazyQuery>;
 export type RefPageQueryQueryResult = Apollo.QueryResult<RefPageQuery, RefPageQueryVariables>;
+export const CreateTagDocument = gql`
+    mutation CreateTag($databaseName: String!, $tagName: String!, $message: String, $fromRefName: String!) {
+  createTag(
+    databaseName: $databaseName
+    tagName: $tagName
+    message: $message
+    fromRefName: $fromRefName
+  ) {
+    ...TagForList
+  }
+}
+    ${TagForListFragmentDoc}`;
+export type CreateTagMutationFn = Apollo.MutationFunction<CreateTagMutation, CreateTagMutationVariables>;
+
+/**
+ * __useCreateTagMutation__
+ *
+ * To run a mutation, you first call `useCreateTagMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateTagMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createTagMutation, { data, loading, error }] = useCreateTagMutation({
+ *   variables: {
+ *      databaseName: // value for 'databaseName'
+ *      tagName: // value for 'tagName'
+ *      message: // value for 'message'
+ *      fromRefName: // value for 'fromRefName'
+ *   },
+ * });
+ */
+export function useCreateTagMutation(baseOptions?: Apollo.MutationHookOptions<CreateTagMutation, CreateTagMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<CreateTagMutation, CreateTagMutationVariables>(CreateTagDocument, options);
+      }
+export type CreateTagMutationHookResult = ReturnType<typeof useCreateTagMutation>;
+export type CreateTagMutationResult = Apollo.MutationResult<CreateTagMutation>;
+export type CreateTagMutationOptions = Apollo.BaseMutationOptions<CreateTagMutation, CreateTagMutationVariables>;
+export const DeleteTagDocument = gql`
+    mutation DeleteTag($databaseName: String!, $tagName: String!) {
+  deleteTag(databaseName: $databaseName, tagName: $tagName)
+}
+    `;
+export type DeleteTagMutationFn = Apollo.MutationFunction<DeleteTagMutation, DeleteTagMutationVariables>;
+
+/**
+ * __useDeleteTagMutation__
+ *
+ * To run a mutation, you first call `useDeleteTagMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteTagMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [deleteTagMutation, { data, loading, error }] = useDeleteTagMutation({
+ *   variables: {
+ *      databaseName: // value for 'databaseName'
+ *      tagName: // value for 'tagName'
+ *   },
+ * });
+ */
+export function useDeleteTagMutation(baseOptions?: Apollo.MutationHookOptions<DeleteTagMutation, DeleteTagMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<DeleteTagMutation, DeleteTagMutationVariables>(DeleteTagDocument, options);
+      }
+export type DeleteTagMutationHookResult = ReturnType<typeof useDeleteTagMutation>;
+export type DeleteTagMutationResult = Apollo.MutationResult<DeleteTagMutation>;
+export type DeleteTagMutationOptions = Apollo.BaseMutationOptions<DeleteTagMutation, DeleteTagMutationVariables>;
 export const AddDatabaseConnectionDocument = gql`
     mutation AddDatabaseConnection($url: String, $useEnv: Boolean) {
   addDatabaseConnection(url: $url, useEnv: $useEnv)
diff --git a/packages/web/lib/mobileUtils.ts b/packages/web/lib/mobileUtils.ts
index b7451550..c28ab86f 100644
--- a/packages/web/lib/mobileUtils.ts
+++ b/packages/web/lib/mobileUtils.ts
@@ -1,5 +1,5 @@
 import { OptionalRefParams } from "./params";
-import { commitLog, defaultDoc, ref } from "./urls";
+import { commitLog, defaultDoc, ref, releases } from "./urls";
 
 export function getDatabasePageName(title?: string): string {
   if (!title) {
@@ -37,8 +37,8 @@ export function getDatabasePageRedirectInfo(
   if (pageName.includes("commitLog")) {
     return commitLog({ ...params, refName: params.refName ?? "" });
   }
-  // if (pageName.includes("releases")) {
-  //   return releases(params);
-  // }
+  if (pageName.includes("releases")) {
+    return releases(params);
+  }
   return ref({ ...params, refName: params.refName ?? "" });
 }
diff --git a/packages/web/lib/refetchQueries.ts b/packages/web/lib/refetchQueries.ts
index 9c0106df..287c69fc 100644
--- a/packages/web/lib/refetchQueries.ts
+++ b/packages/web/lib/refetchQueries.ts
@@ -16,6 +16,16 @@ type RefetchOptions = RefetchQueriesOptions<
   Promise<ApolloQueryResult<any>>
 >;
 
+// Refetch tags
+export const refetchTagQueries = (
+  variables: DatabaseParams,
+): RefetchQueries => [
+  {
+    query: gen.TagListDocument,
+    variables,
+  },
+];
+
 export const refetchBranchQueries = (
   variables: DatabaseParams,
 ): RefetchQueries => [
diff --git a/packages/web/lib/urls.ts b/packages/web/lib/urls.ts
index eeeca821..557c1c66 100644
--- a/packages/web/lib/urls.ts
+++ b/packages/web/lib/urls.ts
@@ -75,3 +75,9 @@ function getDiffRange(p: ps.DiffParams): string {
   if (!p.toCommitId) return p.fromCommitId ?? "";
   return `${p.fromCommitId ?? ""}..${p.toCommitId}`;
 }
+
+export const releases = (p: ps.OptionalRefParams): Route =>
+  database(p).addStatic("releases").withQuery({ refName: p.refName });
+
+export const newRelease = (p: ps.OptionalRefParams): Route =>
+  releases(p).addStatic("new").withQuery({ refName: p.refName });
diff --git a/packages/web/pages/database/[databaseName]/releases/index.tsx b/packages/web/pages/database/[databaseName]/releases/index.tsx
new file mode 100644
index 00000000..13efcf8b
--- /dev/null
+++ b/packages/web/pages/database/[databaseName]/releases/index.tsx
@@ -0,0 +1,35 @@
+import Page from "@components/util/Page";
+import { DatabaseParams, MaybeRefParams } from "@lib/params";
+import DatabasePage from "@pageComponents/DatabasePage";
+import { GetServerSideProps, NextPage } from "next";
+
+type Props = {
+  params: MaybeRefParams;
+};
+
+const DatabaseReleasesPage: NextPage<Props> = ({ params }) => (
+  <Page title={`Releases for ${params.databaseName}`} noIndex>
+    <DatabasePage.ForReleases
+      params={{
+        ...params,
+        refName: params.refName ?? undefined,
+      }}
+    />
+  </Page>
+);
+
+export const getServerSideProps: GetServerSideProps<Props> = async ({
+  params,
+  query,
+}) => {
+  return {
+    props: {
+      params: {
+        ...(params as DatabaseParams),
+        refName: query.refName ? String(query.refName) : null,
+      },
+    },
+  };
+};
+
+export default DatabaseReleasesPage;
diff --git a/packages/web/pages/database/[databaseName]/releases/new.tsx b/packages/web/pages/database/[databaseName]/releases/new.tsx
new file mode 100644
index 00000000..095c775f
--- /dev/null
+++ b/packages/web/pages/database/[databaseName]/releases/new.tsx
@@ -0,0 +1,33 @@
+import Page from "@components/util/Page";
+import { DatabaseParams, MaybeRefParams } from "@lib/params";
+import DatabasePage from "@pageComponents/DatabasePage";
+import { GetServerSideProps, NextPage } from "next";
+
+type Props = {
+  params: MaybeRefParams;
+};
+
+const DatabaseNewReleasePage: NextPage<Props> = ({ params }) => (
+  <Page title={`New release for ${params.databaseName}`} noIndex>
+    <DatabasePage.ForReleases
+      params={{ ...params, refName: params.refName ?? undefined }}
+      newRelease
+    />
+  </Page>
+);
+
+export const getServerSideProps: GetServerSideProps<Props> = async ({
+  params,
+  query,
+}) => {
+  return {
+    props: {
+      params: {
+        ...(params as DatabaseParams),
+        refName: query.refName ? String(query.refName) : null,
+      },
+    },
+  };
+};
+
+export default DatabaseNewReleasePage;