From e10753b65e2460b0f6c5c4151751587cc1e82a45 Mon Sep 17 00:00:00 2001 From: Thomas Dax Date: Tue, 21 May 2024 08:20:43 +0200 Subject: [PATCH] Allow disabling the "Open preview" button in the `PageTree` for certain 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, GQLLinkInput> = { // ... + hasNoSitePreview: true, }; ``` (For now the button is disabled. I already asked UX for a crossed-out Preview icon) --- .changeset/few-actors-impress.md | 18 ++++++++++++++++++ demo/admin/src/links/Link.tsx | 1 + .../admin-icons/icons/preview-unavailable.svg | 3 +++ .../admin/cms-admin/src/documents/types.ts | 1 + .../src/pages/pageTree/PageActions.tsx | 8 +++++--- 5 files changed, 28 insertions(+), 3 deletions(-) create mode 100644 .changeset/few-actors-impress.md create mode 100644 packages/admin/admin-icons/icons/preview-unavailable.svg diff --git a/.changeset/few-actors-impress.md b/.changeset/few-actors-impress.md new file mode 100644 index 0000000000..08d2173463 --- /dev/null +++ b/.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, GQLLinkInput> = { + // ... ++ hasNoSitePreview: true, +}; +``` diff --git a/demo/admin/src/links/Link.tsx b/demo/admin/src/links/Link.tsx index c998bc7dd5..2e76b5b61e 100644 --- a/demo/admin/src/links/Link.tsx +++ b/demo/admin/src/links/Link.tsx @@ -55,6 +55,7 @@ export const Link: DocumentInterface, GQLLinkInput> & D return null; }, menuIcon: LinkIcon, + hasNoSitePreview: true, ...createDocumentRootBlocksMethods(rootBlocks), ...createDocumentDependencyMethods({ rootQueryName: "link", diff --git a/packages/admin/admin-icons/icons/preview-unavailable.svg b/packages/admin/admin-icons/icons/preview-unavailable.svg new file mode 100644 index 0000000000..2c17d3e499 --- /dev/null +++ b/packages/admin/admin-icons/icons/preview-unavailable.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/admin/cms-admin/src/documents/types.ts b/packages/admin/cms-admin/src/documents/types.ts index 82d9105410..bec8f230f2 100644 --- a/packages/admin/cms-admin/src/documents/types.ts +++ b/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; } diff --git a/packages/admin/cms-admin/src/pages/pageTree/PageActions.tsx b/packages/admin/cms-admin/src/pages/pageTree/PageActions.tsx index 02fec34c12..dfa61823ff 100644 --- a/packages/admin/cms-admin/src/pages/pageTree/PageActions.tsx +++ b/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 , } + icon={documentType.hasNoSitePreview ? : } onClick={() => { openSitePreviewWindow(page.path, contentScopeMatch.url); }} + disabled={documentType.hasNoSitePreview} > ,