fix: Options to create a document is available when the policies of collection in the context doesn't permits the user (#2424)

app/menus/DocumentMenu.js

@@ -139,6 +139,27 @@ function DocumentMenu({
   const collection = collections.get(document.collectionId);
   const can = policies.abilities(document.id);
   const canViewHistory = can.read && !can.restore;
+  const restoreItems = React.useMemo(
+    () => [
+      ...collections.orderedData.reduce((filtered, collection) => {
+        const can = policies.abilities(collection.id);
+
+        if (can.update) {
+          filtered.push({
+            onClick: (ev) => handleRestore(ev, { collectionId: collection.id }),
+            title: (
+              <Flex align="center">
+                <CollectionIcon collection={collection} />
+                <CollectionName>{collection.name}</CollectionName>
+              </Flex>
+            ),
+          });
+        }
+        return filtered;
+      }, []),
+    ],
+    [collections.orderedData, handleRestore, policies]
+  );
 
   const stopPropagation = React.useCallback((ev: SyntheticEvent<>) => {
     ev.stopPropagation();
@@ -230,7 +251,8 @@ function DocumentMenu({
             },
             {
               title: t("Restore"),
-              visible: !collection && !!can.restore,
+              visible:
+                !collection && !!can.restore && restoreItems.length !== 0,
               style: {
                 left: -170,
                 position: "relative",
@@ -242,21 +264,7 @@ function DocumentMenu({
                   type: "heading",
                   title: t("Choose a collection"),
                 },
-                ...collections.orderedData.map((collection) => {
-                  const can = policies.abilities(collection.id);
-
-                  return {
-                    title: (
-                      <Flex align="center">
-                        <CollectionIcon collection={collection} />
-                        <CollectionName>{collection.name}</CollectionName>
-                      </Flex>
-                    ),
-                    onClick: (ev) =>
-                      handleRestore(ev, { collectionId: collection.id }),
-                    disabled: !can.update,
-                  };
-                }),
+                ...restoreItems,
               ],
             },
             {

app/menus/NewDocumentMenu.js

@@ -21,20 +21,36 @@ function NewDocumentMenu() {
   const { t } = useTranslation();
   const team = useCurrentTeam();
   const { collections, policies } = useStores();
-  const singleCollection = collections.orderedData.length === 1;
   const can = policies.abilities(team.id);
 
-  if (!can.createDocument) {
+  const items = React.useMemo(
+    () =>
+      collections.orderedData.reduce((filtered, collection) => {
+        const can = policies.abilities(collection.id);
+
+        if (can.update) {
+          filtered.push({
+            to: newDocumentUrl(collection.id),
+            title: (
+              <Flex align="center">
+                <CollectionIcon collection={collection} />
+                <CollectionName>{collection.name}</CollectionName>
+              </Flex>
+            ),
+          });
+        }
+        return filtered;
+      }, []),
+    [collections.orderedData, policies]
+  );
+
+  if (!can.createDocument || items.length === 0) {
     return null;
   }
 
-  if (singleCollection) {
+  if (items.length === 1) {
     return (
-      <Button
-        as={Link}
-        to={newDocumentUrl(collections.orderedData[0].id)}
-        icon={<PlusIcon />}
-      >
+      <Button as={Link} to={items[0].to} icon={<PlusIcon />}>
         {t("New doc")}
       </Button>
     );
@@ -51,19 +67,7 @@ function NewDocumentMenu() {
       </MenuButton>
       <ContextMenu {...menu} aria-label={t("New document")}>
         <Header>{t("Choose a collection")}</Header>
-        <Template
-          {...menu}
-          items={collections.orderedData.map((collection) => ({
-            to: newDocumentUrl(collection.id),
-            disabled: !policies.abilities(collection.id).update,
-            title: (
-              <Flex align="center">
-                <CollectionIcon collection={collection} />
-                <CollectionName>{collection.name}</CollectionName>
-              </Flex>
-            ),
-          }))}
-        />
+        <Template {...menu} items={items} />
       </ContextMenu>
     </>
   );

app/menus/NewTemplateMenu.js

@@ -22,7 +22,27 @@ function NewTemplateMenu() {
   const { collections, policies } = useStores();
   const can = policies.abilities(team.id);
 
-  if (!can.createDocument) {
+  const items = React.useMemo(
+    () =>
+      collections.orderedData.reduce((filtered, collection) => {
+        const can = policies.abilities(collection.id);
+        if (can.update) {
+          filtered.push({
+            to: newDocumentUrl(collection.id, { template: true }),
+            title: (
+              <Flex align="center">
+                <CollectionIcon collection={collection} />
+                <CollectionName>{collection.name}</CollectionName>
+              </Flex>
+            ),
+          });
+        }
+        return filtered;
+      }, []),
+    [collections.orderedData, policies]
+  );
+
+  if (!can.createDocument || items.length === 0) {
     return null;
   }
 
@@ -37,21 +57,7 @@ function NewTemplateMenu() {
       </MenuButton>
       <ContextMenu aria-label={t("New template")} {...menu}>
         <Header>{t("Choose a collection")}</Header>
-        <Template
-          {...menu}
-          items={collections.orderedData.map((collection) => ({
-            to: newDocumentUrl(collection.id, {
-              template: true,
-            }),
-            disabled: !policies.abilities(collection.id).update,
-            title: (
-              <Flex align="center">
-                <CollectionIcon collection={collection} />
-                <CollectionName>{collection.name}</CollectionName>
-              </Flex>
-            ),
-          }))}
-        />
+        <Template {...menu} items={items} />
       </ContextMenu>
     </>
   );