web,graphql: Add releases pages

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!
 }

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", ?`;
+}

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}>`;
+// }

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;
+}

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>
+  );
+}

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 },
   ];
 };

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();

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:

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>
   );
 }

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>
   );
 }

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;
+}