ColumnMenu: get user permissions as props instead of checking userRolesAtom

src/components/ColumnMenu/ColumnMenu.tsx

@@ -33,7 +33,6 @@ import ColumnHeader from "@src/components/Table/Mock/Column";
 
 import {
   projectScope,
-  userRolesAtom,
   userSettingsAtom,
   updateUserSettingsAtom,
   confirmDialogAtom,
@@ -80,8 +79,17 @@ export interface IMenuModalProps {
   ) => void;
 }
 
-export default function ColumnMenu() {
-  const [userRoles] = useAtom(userRolesAtom, projectScope);
+export interface IColumnMenuProps {
+  canAddColumns: boolean;
+  canEditColumns: boolean;
+  canDeleteColumns: boolean;
+}
+
+export default function ColumnMenu({
+  canAddColumns,
+  canEditColumns,
+  canDeleteColumns,
+}: IColumnMenuProps) {
   const [userSettings] = useAtom(userSettingsAtom, projectScope);
   const [updateUserSettings] = useAtom(updateUserSettingsAtom, projectScope);
   const confirm = useSetAtom(confirmDialogAtom, projectScope);
@@ -387,6 +395,7 @@ export default function ColumnMenu() {
         openColumnModal({ type: "new", index: column.index - 1 });
         handleClose();
       },
+      disabled: !canAddColumns,
     },
     {
       label: "Insert to the right…",
@@ -396,6 +405,7 @@ export default function ColumnMenu() {
         openColumnModal({ type: "new", index: column.index + 1 });
         handleClose();
       },
+      disabled: !canAddColumns,
     },
     {
       label: `Delete column${altPress ? "" : "…"}`,
@@ -450,16 +460,19 @@ export default function ColumnMenu() {
             });
           },
       color: "error" as "error",
+      disabled: !canDeleteColumns,
     },
   ];
 
   let menuItems = [...localViewActions];
 
-  if (userRoles.includes("ADMIN") || userRoles.includes("OPS")) {
+  if (canEditColumns) {
     menuItems.push.apply(menuItems, configActions);
     if (column.type === FieldType.derivative) {
       menuItems.push.apply(menuItems, derivativeActions);
     }
+  }
+  if (canAddColumns || canDeleteColumns) {
     menuItems.push.apply(menuItems, columnActions);
   }
 

src/pages/Table/TablePage.tsx

@@ -67,10 +67,12 @@ export default function TablePage({
   const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
   const snackLogContext = useSnackLogContext();
 
-  // Set permissions here so we can pass them to the Table component, which
-  // shouldn’t access projectScope at all, to separate concerns.
-  const canAddColumns = userRoles.includes("ADMIN");
-  const canEditColumns = userRoles.includes("ADMIN");
+  // Set permissions here so we can pass them to the `Table` component, which
+  // shouldn’t access `projectScope` at all, to separate concerns.
+  const canAddColumns =
+    userRoles.includes("ADMIN") || userRoles.includes("OPS");
+  const canEditColumns = canAddColumns;
+  const canDeleteColumns = canAddColumns;
   const canEditCells =
     userRoles.includes("ADMIN") ||
     (!tableSettings.readOnly &&
@@ -170,7 +172,11 @@ export default function TablePage({
       {!disableModals && (
         <ErrorBoundary FallbackComponent={InlineErrorFallback}>
           <Suspense fallback={null}>
-            <ColumnMenu />
+            <ColumnMenu
+              canAddColumns={canAddColumns}
+              canEditColumns={canEditColumns}
+              canDeleteColumns={canDeleteColumns}
+            />
             <ColumnModals />
           </Suspense>
         </ErrorBoundary>