fix: Empty context menu when user does not have permission to update collection

app/components/ContextMenu/Template.js

@@ -83,7 +83,7 @@ const Submenu = React.forwardRef(({ templateItems, title, ...rest }, ref) => {
   );
 });
 
-function Template({ items, ...menu }: Props): React.Node {
+export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
   let filtered = items.filter((item) => item.visible !== false);
 
   // this block literally just trims unneccessary separators
@@ -101,7 +101,11 @@ function Template({ items, ...menu }: Props): React.Node {
     return [...acc, item];
   }, []);
 
-  return filtered.map((item, index) => {
+  return filtered;
+}
+
+function Template({ items, ...menu }: Props): React.Node {
+  return filterTemplateItems(items).map((item, index) => {
     if (item.to) {
       return (
         <MenuItem

app/menus/CollectionMenu.js

@@ -12,7 +12,7 @@ import CollectionExport from "scenes/CollectionExport";
 import CollectionPermissions from "scenes/CollectionPermissions";
 import ContextMenu from "components/ContextMenu";
 import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
-import Template from "components/ContextMenu/Template";
+import Template, { filterTemplateItems } from "components/ContextMenu/Template";
 import Modal from "components/Modal";
 import useStores from "hooks/useStores";
 import getDataTransferFiles from "utils/getDataTransferFiles";
@@ -110,6 +110,52 @@ function CollectionMenu({
   );
 
   const can = policies.abilities(collection.id);
+  const items = React.useMemo(
+    () =>
+      filterTemplateItems([
+        {
+          title: t("New document"),
+          visible: can.update,
+          onClick: handleNewDocument,
+        },
+        {
+          title: t("Import document"),
+          visible: can.update,
+          onClick: handleImportDocument,
+        },
+        {
+          type: "separator",
+        },
+        {
+          title: `${t("Edit")}…`,
+          visible: can.update,
+          onClick: () => setShowCollectionEdit(true),
+        },
+        {
+          title: `${t("Permissions")}…`,
+          visible: can.update,
+          onClick: () => setShowCollectionPermissions(true),
+        },
+        {
+          title: `${t("Export")}…`,
+          visible: !!(collection && can.export),
+          onClick: () => setShowCollectionExport(true),
+        },
+        {
+          type: "separator",
+        },
+        {
+          title: `${t("Delete")}…`,
+          visible: !!(collection && can.delete),
+          onClick: () => setShowCollectionDelete(true),
+        },
+      ]),
+    [can, collection, handleNewDocument, handleImportDocument, t]
+  );
+
+  if (!items.length) {
+    return null;
+  }
 
   return (
     <>
@@ -134,47 +180,7 @@ function CollectionMenu({
         onClose={onClose}
         aria-label={t("Collection")}
       >
-        <Template
+        <Template {...menu} items={items} />
-          {...menu}
-          items={[
-            {
-              title: t("New document"),
-              visible: can.update,
-              onClick: handleNewDocument,
-            },
-            {
-              title: t("Import document"),
-              visible: can.update,
-              onClick: handleImportDocument,
-            },
-            {
-              type: "separator",
-            },
-            {
-              title: `${t("Edit")}…`,
-              visible: can.update,
-              onClick: () => setShowCollectionEdit(true),
-            },
-            {
-              title: `${t("Permissions")}…`,
-              visible: can.update,
-              onClick: () => setShowCollectionPermissions(true),
-            },
-            {
-              title: `${t("Export")}…`,
-              visible: !!(collection && can.export),
-              onClick: () => setShowCollectionExport(true),
-            },
-            {
-              type: "separator",
-            },
-            {
-              title: `${t("Delete")}…`,
-              visible: !!(collection && can.delete),
-              onClick: () => setShowCollectionDelete(true),
-            },
-          ]}
-        />
       </ContextMenu>
       {renderModals && (
         <>

app/scenes/Collection.js

@@ -149,25 +149,27 @@ function CollectionScene() {
             />
           </Action>
           {can.update && (
-            <Action>
+            <>
-              <Tooltip
+              <Action>
-                tooltip={t("New document")}
+                <Tooltip
-                shortcut="n"
+                  tooltip={t("New document")}
-                delay={500}
+                  shortcut="n"
-                placement="bottom"
+                  delay={500}
-              >
+                  placement="bottom"
-                <Button
-                  as={Link}
-                  to={collection ? newDocumentUrl(collection.id) : ""}
-                  disabled={!collection}
-                  icon={<PlusIcon />}
                 >
-                  {t("New doc")}
+                  <Button
-                </Button>
+                    as={Link}
-              </Tooltip>
+                    to={collection ? newDocumentUrl(collection.id) : ""}
-            </Action>
+                    disabled={!collection}
+                    icon={<PlusIcon />}
+                  >
+                    {t("New doc")}
+                  </Button>
+                </Tooltip>
+              </Action>
+              <Separator />
+            </>
           )}
-          <Separator />
           <Action>
             <CollectionMenu
               collection={collection}