Allow disabling the "Open preview" button in the PageTree for certa…

…in document types (#2054)

The "Open preview" button is shown for all document types in the
`PageTree`. But some document types (e.g., links) don't have a preview.
Clicking on the preview button causes an error.

Now, it's possible to disable the button by setting `hasNoPreview` for
the document:

```diff
export const Link: DocumentInterface<Pick<GQLLink, "content">, GQLLinkInput> = {
    // ...
+   hasNoSitePreview: true,
};
```

(For now the button is disabled. I already asked UX for a crossed-out
Preview icon)

.changeset/few-actors-impress.md

@@ -0,0 +1,18 @@
+---
+"@comet/cms-admin": minor
+---
+
+Allow disabling the "Open preview" button in the `PageTree` for certain document types
+
+The "Open preview" button is shown for all document types in the `PageTree`.
+But some document types (e.g., links) don't have a preview.
+Clicking on the preview button leads to an error page.
+
+Now, it's possible to disable the button by setting `hasNoSitePreview` for the document:
+
+```diff
+export const Link: DocumentInterface<Pick<GQLLink, "content">, GQLLinkInput> = {
+    // ...
++   hasNoSitePreview: true,
+};
+```

demo/admin/src/links/Link.tsx

@@ -55,6 +55,7 @@ export const Link: DocumentInterface<Pick<GQLLink, "content">, GQLLinkInput> & D
         return null;
     },
     menuIcon: LinkIcon,
+    hasNoSitePreview: true,
     ...createDocumentRootBlocksMethods(rootBlocks),
     ...createDocumentDependencyMethods({
         rootQueryName: "link",

packages/admin/cms-admin/src/documents/types.ts

@@ -47,4 +47,5 @@ export interface DocumentInterface<
     anchors: (input: DocumentInput) => string[];
     dependencies: (input: DocumentInput) => BlockDependency[];
     replaceDependenciesInOutput: (output: DocumentOutput, replacements: ReplaceDependencyObject[]) => DocumentOutput;
+    hasNoSitePreview?: true;
 }

packages/admin/cms-admin/src/pages/pageTree/PageActions.tsx

@@ -1,6 +1,6 @@
 import { useApolloClient } from "@apollo/client";
 import { IEditDialogApi, RowActionsItem, RowActionsMenu, useStackSwitchApi, writeClipboardText } from "@comet/admin";
-import { Add, Delete, Domain, Edit, Preview, Settings } from "@comet/admin-icons";
+import { Add, Delete, Domain, Edit, Preview, PreviewUnavailable, Settings } from "@comet/admin-icons";
 import { Divider } from "@mui/material";
 import React from "react";
 import { FormattedMessage } from "react-intl";
@@ -31,7 +31,8 @@ export default function PageActions({ page, editDialog, children, siteUrl }: Pro
     const client = useApolloClient();
 
     const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
-    const isEditable = !!(page.visibility !== "Archived" && documentTypes[page.documentType].editComponent);
+    const documentType = documentTypes[page.documentType];
+    const isEditable = !!(page.visibility !== "Archived" && documentType.editComponent);
 
     const handleDeleteClick = async () => {
         const subTree = subTreeFromNode(page, tree);
@@ -75,10 +76,11 @@ export default function PageActions({ page, editDialog, children, siteUrl }: Pro
                     </RowActionsItem>,
                     <RowActionsItem
                         key="preview"
-                        icon={<Preview />}
+                        icon={documentType.hasNoSitePreview ? <PreviewUnavailable /> : <Preview />}
                         onClick={() => {
                             openSitePreviewWindow(page.path, contentScopeMatch.url);
                         }}
+                        disabled={documentType.hasNoSitePreview}
                     >
                         <FormattedMessage id="comet.pages.pages.page.openPreview" defaultMessage="Open preview" />
                     </RowActionsItem>,