Add component/hook for roles/writes

packages/web/components/CellButtons/DeleteRowButton.tsx

@@ -1,4 +1,5 @@
 import Button from "@components/Button";
+import HideForNoWritesWrapper from "@components/util/HideForNoWritesWrapper";
 import { useDataTableContext } from "@contexts/dataTable";
 import { useSqlEditorContext } from "@contexts/sqleditor";
 import {
@@ -38,10 +39,12 @@ export default function DeleteRowButton(props: Props): JSX.Element | null {
   };
 
   return (
-    <div>
-      <Button.Link onClick={onClick} className={css.button}>
-        Delete row
-      </Button.Link>
-    </div>
+    <HideForNoWritesWrapper params={params}>
+      <div>
+        <Button.Link onClick={onClick} className={css.button}>
+          Delete row
+        </Button.Link>
+      </div>
+    </HideForNoWritesWrapper>
   );
 }

packages/web/components/CellButtons/DropColumnButton.tsx

@@ -1,4 +1,5 @@
 import Button from "@components/Button";
+import HideForNoWritesWrapper from "@components/util/HideForNoWritesWrapper";
 import { useDataTableContext } from "@contexts/dataTable";
 import { useSqlEditorContext } from "@contexts/sqleditor";
 import { ColumnForDataTableFragment } from "@gen/graphql-types";
@@ -29,10 +30,12 @@ export default function DropColumnButton({ col, refName }: Props) {
   };
 
   return (
-    <div>
-      <Button.Link onClick={onClick} className={css.button}>
-        Drop column
-      </Button.Link>
-    </div>
+    <HideForNoWritesWrapper params={params}>
+      <div>
+        <Button.Link onClick={onClick} className={css.button}>
+          Drop column
+        </Button.Link>
+      </div>
+    </HideForNoWritesWrapper>
   );
 }

packages/web/components/CellButtons/EditCell.tsx

@@ -1,4 +1,5 @@
 import Button from "@components/Button";
+import HideForNoWritesWrapper from "@components/util/HideForNoWritesWrapper";
 import { useDataTableContext } from "@contexts/dataTable";
 import { ColumnForDataTableFragment } from "@gen/graphql-types";
 import { isUneditableDoltSystemTable } from "@lib/doltSystemTables";
@@ -21,13 +22,15 @@ export default function EditCell(props: Props) {
   }
 
   return (
-    <div>
-      <Button.Link
-        onClick={() => props.setEditing(true)}
-        className={css.button}
-      >
-        Edit Cell Value
-      </Button.Link>
-    </div>
+    <HideForNoWritesWrapper params={params}>
+      <div>
+        <Button.Link
+          onClick={() => props.setEditing(true)}
+          className={css.button}
+        >
+          Edit Cell Value
+        </Button.Link>
+      </div>
+    </HideForNoWritesWrapper>
   );
 }

packages/web/components/CellButtons/MakeNullButton.tsx

@@ -1,4 +1,5 @@
 import Button from "@components/Button";
+import HideForNoWritesWrapper from "@components/util/HideForNoWritesWrapper";
 import { useDataTableContext } from "@contexts/dataTable";
 import { useSqlEditorContext } from "@contexts/sqleditor";
 import {
@@ -57,14 +58,16 @@ export default function MakeNullButton(props: Props): JSX.Element | null {
   };
 
   return (
-    <div>
-      <Button.Link
-        onClick={onClick}
-        className={css.button}
-        disabled={notNullConstraint || props.isNull}
-      >
-        Make NULL
-      </Button.Link>
-    </div>
+    <HideForNoWritesWrapper params={params}>
+      <div>
+        <Button.Link
+          onClick={onClick}
+          className={css.button}
+          disabled={notNullConstraint || props.isNull}
+        >
+          Make NULL
+        </Button.Link>
+      </div>
+    </HideForNoWritesWrapper>
   );
 }

packages/web/components/CreateDatabase/InnerModal.tsx

@@ -1,6 +1,7 @@
 import Button from "@components/Button";
 import ButtonsWithError from "@components/ButtonsWithError";
 import FormInput from "@components/FormInput";
+import useRole from "@hooks/useRole";
 import { ApolloErrorType } from "@lib/errors/types";
 import { SyntheticEvent } from "react";
 
@@ -13,6 +14,26 @@ type InnerProps = {
 };
 
 export default function InnerModal(props: InnerProps) {
+  const { userHasWritePerms, writesEnabled } = useRole();
+
+  if (!userHasWritePerms) {
+    return (
+      <div>
+        <p>You must have write permissions to create a new database.</p>
+        <Button onClick={props.onClose}>OK</Button>
+      </div>
+    );
+  }
+
+  if (!writesEnabled) {
+    return (
+      <div>
+        <p>You must enable writes to create a new database.</p>
+        <Button onClick={props.onClose}>OK</Button>
+      </div>
+    );
+  }
+
   return (
     <form onSubmit={props.onSubmit}>
       <FormInput

packages/web/components/DataTable/AddRowsButton/index.tsx

@@ -1,5 +1,6 @@
 import Link from "@components/links/Link";
 
+import HideForNoWritesWrapper from "@components/util/HideForNoWritesWrapper";
 import { TableParams } from "@lib/params";
 import { editTable } from "@lib/urls";
 import { AiOutlinePlus } from "@react-icons/all-files/ai/AiOutlinePlus";
@@ -8,17 +9,19 @@ import css from "./index.module.css";
 
 export default function AddRowsButton(props: { params: TableParams }) {
   return (
-    <div className={css.addMoreRows}>
-      <AiOutlinePlusCircle className={css.plusButton} />
-      <Link
-        {...editTable(props.params)}
-        data-cy={`db-tables-table-${props.params.tableName}-add-rows`}
-      >
-        <div className={css.expand}>
-          <AiOutlinePlus />
-          Add More Rows
-        </div>
-      </Link>
-    </div>
+    <HideForNoWritesWrapper params={props.params}>
+      <div className={css.addMoreRows}>
+        <AiOutlinePlusCircle className={css.plusButton} />
+        <Link
+          {...editTable(props.params)}
+          data-cy={`db-tables-table-${props.params.tableName}-add-rows`}
+        >
+          <div className={css.expand}>
+            <AiOutlinePlus />
+            Add More Rows
+          </div>
+        </Link>
+      </div>
+    </HideForNoWritesWrapper>
   );
 }

packages/web/components/DatabaseHeaderAndNav/AddItemDropdown/DocItem.tsx

@@ -1,43 +1,61 @@
 import SmallLoader from "@components/SmallLoader";
-import {
-  DocListForDocPageFragment,
-  useDocsRowsForDocPageQuery,
-} from "@gen/graphql-types";
+import { useDocsRowsForDocPageQuery } from "@gen/graphql-types";
 import { RefParams } from "@lib/params";
 import { newDoc } from "@lib/urls";
 import { HiOutlineDocumentAdd } from "@react-icons/all-files/hi/HiOutlineDocumentAdd";
 import DropdownItem from "./Item";
 
-type Props = {
+type InnerProps = {
   params: RefParams;
-  doltDisabled?: boolean;
+  userHasWritePerms: boolean;
 };
 
-type InnerProps = Props & {
-  docs?: DocListForDocPageFragment;
+type Props = InnerProps & {
+  doltDisabled?: boolean;
 };
 
 function Inner(props: InnerProps) {
-  const canCreateNewDoc = !props.docs || props.docs.list.length < 2;
+  const res = useDocsRowsForDocPageQuery({
+    variables: props.params,
+  });
+
+  if (res.loading) return <SmallLoader loaded={false} />;
+
+  const canCreateNewDoc =
+    props.userHasWritePerms &&
+    (!res.data?.docs || res.data.docs.list.length < 2);
+
+  return <NewDocLink params={props.params} hide={!canCreateNewDoc} />;
+}
+
+export default function DocsDropdownItem(props: Props) {
+  if (props.doltDisabled) {
+    return (
+      <NewDocLink
+        params={props.params}
+        doltDisabled={props.doltDisabled}
+        hide={!props.userHasWritePerms}
+      />
+    );
+  }
 
+  return <Inner {...props} />;
+}
+
+function NewDocLink(props: {
+  params: RefParams;
+  doltDisabled?: boolean;
+  hide?: boolean;
+}) {
   return (
     <DropdownItem
       url={newDoc(props.params)}
       icon={<HiOutlineDocumentAdd />}
-      hide={!canCreateNewDoc}
       data-cy="add-dropdown-new-docs-link"
       doltDisabled={props.doltDisabled}
+      hide={props.hide}
     >
       New README/LICENSE
     </DropdownItem>
   );
 }
-
-export default function DocsDropdownItem(props: Props) {
-  const res = useDocsRowsForDocPageQuery({
-    variables: props.params,
-  });
-
-  if (res.loading) return <SmallLoader loaded={false} />;
-  return <Inner {...props} docs={res.data?.docs} />;
-}

packages/web/components/DatabaseHeaderAndNav/AddItemDropdown/index.tsx

@@ -1,5 +1,6 @@
 import Popup from "@components/Popup";
 import NotDoltWrapper from "@components/util/NotDoltWrapper";
+import useRole from "@hooks/useRole";
 import { DatabaseParams } from "@lib/params";
 import { newRelease } from "@lib/urls";
 import { AiOutlineTag } from "@react-icons/all-files/ai/AiOutlineTag";
@@ -15,6 +16,10 @@ type Props = {
 };
 
 export default function AddItemDropdown(props: Props) {
+  const { userHasWritePerms, canWriteToDB } = useRole();
+
+  if (!canWriteToDB) return null;
+
   return (
     <div className={css.addDropdown} data-cy="add-dropdown-database-nav">
       <Popup
@@ -45,6 +50,7 @@ export default function AddItemDropdown(props: Props) {
                 url={newRelease(props.params)}
                 icon={<AiOutlineTag />}
                 data-cy="add-dropdown-new-release-link"
+                hide={!userHasWritePerms}
               >
                 New release
               </DropdownItem>
@@ -53,6 +59,7 @@ export default function AddItemDropdown(props: Props) {
               <NotDoltWrapper>
                 <DocsDropdownItem
                   params={{ ...props.params, refName: props.params.refName }}
+                  userHasWritePerms={userHasWritePerms}
                 />
               </NotDoltWrapper>
             )}

packages/web/components/DatabaseHeaderAndNav/Full.tsx

@@ -1,4 +1,5 @@
 import DatabaseNav from "@components/DatabaseNav";
+import PermissionLabel from "@components/PermissionLabel";
 import DatabaseBreadcrumbs from "@components/breadcrumbs/DatabaseBreadcrumbs";
 import { OptionalRefParams } from "@lib/params";
 import cx from "classnames";
@@ -32,6 +33,7 @@ export default function Full(props: Props) {
             className={css.databaseBreadcrumbs}
             params={props.params}
           />
+          <PermissionLabel className={css.permission} />
         </div>
         <div>
           <RightHeaderButtons

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

@@ -70,6 +70,13 @@
   }
 }
 
+.permission {
+  @apply hidden;
+  @screen lg {
+    @apply flex mt-0.5 ml-3;
+  }
+}
+
 .mobileSelector {
   @screen lg {
     @apply hidden;

packages/web/components/DatabaseTableHeader/CreateViewButton/index.tsx

@@ -1,4 +1,5 @@
 import Button from "@components/Button";
+import HideForNoWritesWrapper from "@components/util/HideForNoWritesWrapper";
 import { DatabaseParams } from "@lib/params";
 import { useState } from "react";
 import CreateViewModal from "./CreateViewModal";
@@ -13,11 +14,13 @@ export default function CreateViewButton(props: Props) {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <div>
-      <Button onClick={() => setIsOpen(true)} className={css.button}>
-        Create View
-      </Button>
-      <CreateViewModal {...props} isOpen={isOpen} setIsOpen={setIsOpen} />
-    </div>
+    <HideForNoWritesWrapper params={props.params}>
+      <div>
+        <Button onClick={() => setIsOpen(true)} className={css.button}>
+          Create View
+        </Button>
+        <CreateViewModal {...props} isOpen={isOpen} setIsOpen={setIsOpen} />
+      </div>
+    </HideForNoWritesWrapper>
   );
 }

packages/web/components/DatabaseTableNav/index.tsx

@@ -1,6 +1,7 @@
 import CustomFormSelect from "@components/CustomFormSelect";
 import Tooltip from "@components/Tooltip";
 import Link from "@components/links/Link";
+import HideForNoWritesWrapper from "@components/util/HideForNoWritesWrapper";
 import NotDoltWrapper from "@components/util/NotDoltWrapper";
 import { OptionalRefParams } from "@lib/params";
 import { RefUrl, newBranch } from "@lib/urls";
@@ -59,7 +60,9 @@ function Nav({
           />
         </NotDoltWrapper>
         <NotDoltWrapper>
-          <NewBranchLink params={params} open={open} />
+          <HideForNoWritesWrapper params={params}>
+            <NewBranchLink params={params} open={open} />
+          </HideForNoWritesWrapper>
         </NotDoltWrapper>
         <GiHamburgerMenu
           onClick={toggleMenu}