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,33 +110,9 @@ function CollectionMenu({
   );
 
   const can = policies.abilities(collection.id);
-
-  return (
-    <>
-      <VisuallyHidden>
-        <input
-          type="file"
-          ref={file}
-          onChange={handleFilePicked}
-          onClick={stopPropagation}
-          accept={documents.importFileTypes.join(", ")}
-          tabIndex="-1"
-        />
-      </VisuallyHidden>
-      {label ? (
-        <MenuButton {...menu}>{label}</MenuButton>
-      ) : (
-        <OverflowMenuButton aria-label={t("Show menu")} {...menu} />
-      )}
-      <ContextMenu
-        {...menu}
-        onOpen={handleOpen}
-        onClose={onClose}
-        aria-label={t("Collection")}
-      >
-        <Template
-          {...menu}
-          items={[
+  const items = React.useMemo(
+    () =>
+      filterTemplateItems([
         {
           title: t("New document"),
           visible: can.update,
@@ -173,8 +149,38 @@ function CollectionMenu({
           visible: !!(collection && can.delete),
           onClick: () => setShowCollectionDelete(true),
         },
-          ]}
+      ]),
+    [can, collection, handleNewDocument, handleImportDocument, t]
+  );
+
+  if (!items.length) {
+    return null;
+  }
+
+  return (
+    <>
+      <VisuallyHidden>
+        <input
+          type="file"
+          ref={file}
+          onChange={handleFilePicked}
+          onClick={stopPropagation}
+          accept={documents.importFileTypes.join(", ")}
+          tabIndex="-1"
         />
+      </VisuallyHidden>
+      {label ? (
+        <MenuButton {...menu}>{label}</MenuButton>
+      ) : (
+        <OverflowMenuButton aria-label={t("Show menu")} {...menu} />
+      )}
+      <ContextMenu
+        {...menu}
+        onOpen={handleOpen}
+        onClose={onClose}
+        aria-label={t("Collection")}
+      >
+        <Template {...menu} items={items} />
       </ContextMenu>
       {renderModals && (
         <>

app/scenes/Collection.js

@@ -149,6 +149,7 @@ function CollectionScene() {
             />
           </Action>
           {can.update && (
+            <>
               <Action>
                 <Tooltip
                   tooltip={t("New document")}
@@ -166,8 +167,9 @@ function CollectionScene() {
                   </Button>
                 </Tooltip>
               </Action>
-          )}
               <Separator />
+            </>
+          )}
           <Action>
             <CollectionMenu
               collection={collection}