web: Docs updates

.github/dependabot.yaml

@@ -0,0 +1,13 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: monthly
+    time: "06:30"
+    timezone: America/Los_Angeles
+  open-pull-requests-limit: 10
+  reviewers:
+  - tbantle22
+  labels:
+  - dependencies

packages/graphql-server/schema.gql

@@ -164,7 +164,6 @@ type Query {
   databases: [String!]!
   doltDatabaseDetails: DoltDatabaseDetails!
   docs(databaseName: String!, refName: String!): DocList!
-  doc(refName: String!, databaseName: String!, docType: DocType!): Doc
   docOrDefaultDoc(refName: String!, databaseName: String!, docType: DocType): Doc
   rows(refName: String!, databaseName: String!, tableName: String!, offset: Int): RowList!
   views(databaseName: String!, refName: String!): RowList!

packages/graphql-server/src/docs/doc.resolver.ts

@@ -3,16 +3,10 @@ import { DataSourceService } from "../dataSources/dataSource.service";
 import { RefArgs } from "../utils/commonTypes";
 import { DocType } from "./doc.enum";
 import { Doc, DocList, fromDoltDocsRow } from "./doc.model";
-import { docQuery, docsQuery } from "./docs.queries";
+import { docsQuery } from "./docs.queries";
 
 @ArgsType()
-export class GetDocArgs extends RefArgs {
-  @Field(_type => DocType)
-  docType: DocType;
-}
-
-@ArgsType()
-export class GetDefaultDocArgs extends RefArgs {
+class GetDefaultDocArgs extends RefArgs {
   @Field(_type => DocType, { nullable: true })
   docType?: DocType;
 }
@@ -42,19 +36,6 @@ export class DocsResolver {
     );
   }
 
-  @Query(_returns => Doc, { nullable: true })
-  async doc(@Args() args: GetDocArgs): Promise<Doc | undefined> {
-    return this.dss.query(
-      async query => {
-        const doc = await query(docQuery, [args.docType]);
-        if (!doc.length) return undefined;
-        return fromDoltDocsRow(args.refName, doc[0]);
-      },
-      args.databaseName,
-      args.refName,
-    );
-  }
-
   @Query(_returns => Doc, { nullable: true })
   async docOrDefaultDoc(
     @Args() args: GetDefaultDocArgs,

packages/graphql-server/src/docs/docs.queries.ts

@@ -1,3 +1 @@
 export const docsQuery = `SELECT * FROM dolt_docs`;
-
-export const docQuery = `${docsQuery} WHERE doc_name=?`;

packages/web/components/DatabaseNav/utils.ts

@@ -1,20 +1,13 @@
 import { OptionalRefParams } from "@lib/params";
-import {
-  database,
-  DatabaseUrl,
-  defaultDoc,
-  defaultDocDefaultBranch,
-  ref,
-  RefUrl,
-} from "@lib/urls";
+import { database, DatabaseUrl, defaultDoc, ref, RefUrl } from "@lib/urls";
 import { Route } from "@lib/urlUtils";
 
 function getUrlFromName(name: string): [DatabaseUrl, RefUrl?] {
   switch (name) {
     case "Database":
       return [database, ref];
     case "About":
-      return [defaultDocDefaultBranch, defaultDoc];
+      return [database, defaultDoc];
     // case "Commit Log":
     //   return [database, commitLog];
     // case "Releases":

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

@@ -8,46 +8,36 @@
 
 .bodyContainer {
   @screen lg {
-    @apply px-8;
+    @apply mx-8;
   }
-  @apply px-4;
 }
 
 .body {
   @apply m-0 p-8 border-t;
 }
 
 .titleGroup {
-  @apply p-2 pt-8 pl-8 text-primary max-h-[6rem];
+  @apply mx-4 mt-12 text-primary;
 
-  @media (max-width: 767px) {
-    @apply p-4;
+  @screen lg {
+    @apply m-2 mt-8 ml-8;
   }
 }
 
 .title {
-  @apply font-semibold text-2xl pb-6;
+  @apply font-semibold text-2xl pb-4;
 }
 
 .titleTop {
-  @apply flex justify-between;
+  @apply flex justify-between flex-wrap;
 }
 
 .description {
   @apply text-sm font-normal min-w-[11.25rem];
 }
-
 .buttons {
   @apply mx-6;
 }
-
 .edit {
   @apply py-0 px-4 w-24;
 }
-.hiddenForMobile {
-  @apply hidden;
-
-  @screen lg {
-    @apply block;
-  }
-}

packages/web/components/DocMarkdown/index.test.tsx

@@ -4,7 +4,7 @@ import useMockRouter, { actions } from "@hooks/useMockRouter";
 import { RefParams } from "@lib/params";
 import { setup } from "@lib/testUtils.test";
 import { sqlQuery } from "@lib/urls";
-import { getDoc } from "@pageComponents/DatabasePage/ForDocs/DocList/mocks";
+import { getDoc } from "@pageComponents/DatabasePage/ForDocs/DocsPage/DocList/mocks";
 import { render, screen, waitFor } from "@testing-library/react";
 import DocMarkdown from ".";
 

packages/web/components/DocMarkdown/index.tsx

@@ -1,7 +1,6 @@
 import { DocForDocPageFragment } from "@gen/graphql-types";
 import Maybe from "@lib/Maybe";
 import { RefParams } from "@lib/params";
-import cx from "classnames";
 import { useState } from "react";
 import Buttons from "./Buttons";
 import MarkdownBody from "./MarkdownBody";
@@ -11,28 +10,18 @@ import css from "./index.module.css";
 type Props = {
   rowData: Maybe<DocForDocPageFragment>;
   params: RefParams & { docName?: string };
-  hiddenForMobile?: boolean;
 };
 
-export default function DocMarkdown({
-  params,
-  rowData,
-  hiddenForMobile,
-}: Props) {
+export default function DocMarkdown({ params, rowData }: Props) {
   const doltDocsQueryDocName = rowData?.docRow?.columnValues[0].displayValue;
   const markdown = rowData?.docRow?.columnValues[1].displayValue;
   const docName = params.docName ?? doltDocsQueryDocName;
 
   const [showEditor, setShowEditor] = useState(false);
 
   return (
-    <div className={css.markdown} data-cy="db-doc-markdown">
-      <div
-        className={cx(css.titleGroup, {
-          [css.hiddenForMobile]: hiddenForMobile,
-        })}
-        data-cy="doc-title-group"
-      >
+    <div className={css.markdown}>
+      <div className={css.titleGroup}>
         <Title
           doltDocsQueryDocName={doltDocsQueryDocName}
           docName={params.docName}

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

@@ -0,0 +1,12 @@
+.goback {
+  @apply mb-8 font-semibold text-base;
+  svg {
+    @apply mb-[0.2rem] mr-1 inline-block;
+  }
+}
+
+.isMobile {
+  @screen md {
+    @apply hidden;
+  }
+}

packages/web/components/GoBack/index.tsx

@@ -0,0 +1,29 @@
+import Link from "@components/links/Link";
+import { Route } from "@lib/urlUtils";
+import { IoIosArrowDropleftCircle } from "@react-icons/all-files/io/IoIosArrowDropleftCircle";
+import cx from "classnames";
+import css from "./index.module.css";
+
+type Props = {
+  url: Route;
+  pageName: string;
+  isMobile?: boolean;
+  className?: string;
+};
+
+export default function GoBack(props: Props) {
+  return (
+    <div
+      className={cx(
+        css.goback,
+        { [css.isMobile]: props.isMobile },
+        props.className,
+      )}
+    >
+      <Link {...props.url}>
+        <IoIosArrowDropleftCircle />
+        <span>back to {props.pageName}</span>
+      </Link>
+    </div>
+  );
+}

packages/web/components/layouts/DatabaseLayout/index.tsx

@@ -29,7 +29,7 @@ type Props = {
 };
 
 export default function DatabaseLayout(props: Props) {
-  const { q, tableName } = props.params;
+  const { q, tableName, ...refParams } = props.params;
   const forDataTable = !!(q || tableName);
   const showHeader = forDataTable || props.showSqlConsole || props.empty;
   const useFullWidth = forDataTable || !!props.wide;
@@ -40,10 +40,18 @@ export default function DatabaseLayout(props: Props) {
     <Wrapper>
       <DatabaseHeaderAndNav
         initialTabIndex={props.initialTabIndex}
-        params={props.params}
+        params={refParams}
+        // breadcrumbs={props.smallHeaderBreadcrumbs}
         title={props.title}
+        // showSmall={showSmallHeader}
+        // setShowSmall={setShowSmallHeader}
       />
-      <div className={cx(css.content, css.contentWithHeader)}>
+      <div
+        className={cx(css.content, {
+          [css.contentWithHeader]: !!showHeader,
+          // [css.contentWithSmallHeader]: showSmallHeader,
+        })}
+      >
         <DatabaseTableNav
           params={props.params}
           initiallyOpen={props.leftNavInitiallyOpen}
@@ -65,6 +73,7 @@ export default function DatabaseLayout(props: Props) {
                 [css.maxWidth]: !useFullWidth,
                 [css.noHeader]: !showHeader,
               })}
+              // onScroll={props.onScroll}
               mobileBreakpoint={1024}
             >
               {props.children}

packages/web/components/pageComponents/DatabasePage/ForDefaultBranch/index.tsx

@@ -21,7 +21,6 @@ type Props = {
   leftTableNav?: ReactNode;
   leftNavInitiallyOpen?: boolean;
   showSqlConsole?: boolean;
-  noMobileWarnings?: boolean;
   routeRefChangeTo: RefUrl;
 };
 

packages/web/components/pageComponents/DatabasePage/ForDocs/DocList/Item.tsx → packages/web/components/pageComponents/DatabasePage/ForDocs/DocsPage/DocList/Item.tsx

@@ -1,5 +1,6 @@
 import DocLink from "@components/links/DocLink";
-import { DocForDocPageFragment, Maybe } from "@gen/graphql-types";
+import { DocForDocPageFragment } from "@gen/graphql-types";
+import Maybe from "@lib/Maybe";
 import { RefParams } from "@lib/params";
 import { GiScales } from "@react-icons/all-files/gi/GiScales";
 import { IoBookOutline } from "@react-icons/all-files/io5/IoBookOutline";

packages/web/components/pageComponents/DatabasePage/ForDocs/DocList/index.module.css → packages/web/components/pageComponents/DatabasePage/ForDocs/DocsPage/DocList/index.module.css

@@ -1,12 +1,12 @@
 .docsContainer {
-  @apply flex my-4 mx-8;
+  @apply flex flex-wrap mb-4 mt-2 mx-8;
 }
 
 .docs {
   @apply flex text-primary mb-0 mr-8;
 
   > li {
-    @apply mr-8;
+    @apply mr-8 my-2;
   }
 }
 
@@ -31,15 +31,13 @@
 }
 
 .newDoc {
-  @apply hidden;
-  @screen lg {
-    @apply block font-semibold -mt-1;
-
-    button {
-      @apply pl-2 pr-3 py-0.5 border-none;
-    }
-    svg {
-      @apply inline-block mr-1 text-base mb-1;
-    }
+  @apply block font-semibold my-2;
+
+  button {
+    @apply pl-2 pr-3 py-0.5 border-none;
+  }
+
+  svg {
+    @apply inline-block mr-1 text-base mb-1;
   }
 }

packages/web/components/pageComponents/DatabasePage/ForDocs/DocsPage/index.module.css

@@ -0,0 +1,7 @@
+.container {
+  @apply mb-20;
+}
+
+.title {
+  @apply mx-6 mt-6;
+}