feat(app-page-builder): add configure domain confirmation

add `configure domain` confirmation before page preview
webiny · Jun 30, 2020 · 07fe0bf · 07fe0bf
1 parent bcc41d0
commit 07fe0bf
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 14 deletions.
diff --git a/...app-page-builder/src/admin/plugins/pageDetails/header/pageOptionsMenu/PageOptionsMenu.tsx b/...app-page-builder/src/admin/plugins/pageDetails/header/pageOptionsMenu/PageOptionsMenu.tsx
@@ -15,6 +15,10 @@ import { setHomePage } from "./graphql";
 import { useConfirmationDialog } from "@webiny/app-admin/hooks/useConfirmationDialog";
 import { getPlugins } from "@webiny/plugins";
 import { PbPageDetailsHeaderRightOptionsMenuItemPlugin } from "@webiny/app-page-builder/types";
+import {
+    ConfigureDomainMessage,
+    configureDomainTitle
+} from "@webiny/app-page-builder/utils/configureDomain";
 
 const menuStyles = css({
     width: 250,
@@ -31,7 +35,7 @@ const PageOptionsMenu = props => {
         pageDetails: { page }
     } = props;
 
-    const { getPageUrl, getPagePreviewUrl } = usePageBuilderSettings();
+    const { getPageUrl, getPagePreviewUrl, getDomain, isSiteRunning } = usePageBuilderSettings();
     const { showSnackbar } = useSnackbar();
     const { showConfirmation } = useConfirmationDialog({
         title: "Delete page",
@@ -44,6 +48,11 @@ const PageOptionsMenu = props => {
         )
     });
 
+    const { showConfirmation: showSettingsConfirmation } = useConfirmationDialog({
+        title: configureDomainTitle,
+        message: <ConfigureDomainMessage domain={getDomain()} />
+    });
+
     // We must prevent opening in new tab - Cypress doesn't work with new tabs.
     const target = window.Cypress ? "_self" : "_blank";
 
@@ -68,7 +77,15 @@ const PageOptionsMenu = props => {
                     View
                 </MenuItem>
             ) : (
-                <MenuItem onClick={() => window.open(getPagePreviewUrl(page), target)}>
+                <MenuItem
+                    onClick={() => {
+                        if (isSiteRunning) {
+                            window.open(getPagePreviewUrl(page), target);
+                        } else {
+                            showSettingsConfirmation(null);
+                        }
+                    }}
+                >
                     <ListItemGraphic>
                         <Icon
                             data-testid="pb-page-details-header-page-options-menu-preview"

diff --git a/packages/app-page-builder/src/admin/plugins/pageDetails/pageRevisions/Revision.tsx b/packages/app-page-builder/src/admin/plugins/pageDetails/pageRevisions/Revision.tsx
@@ -26,6 +26,11 @@ import { ReactComponent as PublishIcon } from "@webiny/app-page-builder/admin/as
 import { ReactComponent as DeleteIcon } from "@webiny/app-page-builder/admin/assets/delete.svg";
 import { ReactComponent as PreviewIcon } from "@webiny/app-page-builder/admin/assets/visibility.svg";
 import { PbPageRevision } from "@webiny/app-page-builder/types";
+import { useConfirmationDialog } from "@webiny/app-admin/hooks/useConfirmationDialog";
+import {
+    ConfigureDomainMessage,
+    configureDomainTitle
+} from "@webiny/app-page-builder/utils/configureDomain";
 
 type RevisionProps = {
     rev: PbPageRevision;
@@ -65,11 +70,16 @@ const Div = ({ children }) => {
 
 const Revision = ({ rev }: RevisionProps) => {
     const { icon, text: tooltipText } = getIcon(rev);
-    const { getPagePreviewUrl } = usePageBuilderSettings();
+    const { getPagePreviewUrl, getDomain, isSiteRunning } = usePageBuilderSettings();
     const { deleteRevision, createRevision, publishRevision, editRevision } = useRevisionHandlers({
         rev
     });
 
+    const { showConfirmation: showPreviewConfirmation } = useConfirmationDialog({
+        title: configureDomainTitle,
+        message: <ConfigureDomainMessage domain={getDomain()} />
+    });
+
     return (
         <ConfirmationDialog
             title="Confirmation required!"
@@ -119,7 +129,15 @@ const Revision = ({ rev }: RevisionProps) => {
                                 </MenuItem>
                             )}
 
-                            <MenuItem onClick={() => window.open(getPagePreviewUrl(rev), "_blank")}>
+                            <MenuItem
+                                onClick={() => {
+                                    if (isSiteRunning) {
+                                        window.open(getPagePreviewUrl(rev), "_blank");
+                                    } else {
+                                        showPreviewConfirmation(null);
+                                    }
+                                }}
+                            >
                                 <ListItemGraphic>
                                     <Icon icon={<PreviewIcon />} />
                                 </ListItemGraphic>

diff --git a/packages/app-page-builder/src/editor/plugins/defaultBar/components/PreviewPageButton.tsx b/packages/app-page-builder/src/editor/plugins/defaultBar/components/PreviewPageButton.tsx
@@ -1,27 +1,48 @@
 import React from "react";
 import { connect } from "@webiny/app-page-builder/editor/redux";
-import { getPage } from "@webiny/app-page-builder/editor/selectors";
 import { omit, isEqual } from "lodash";
+import { getPage } from "@webiny/app-page-builder/editor/selectors";
 import { MenuItem } from "@webiny/ui/Menu";
 import { usePageBuilderSettings } from "@webiny/app-page-builder/admin/hooks/usePageBuilderSettings";
 import { ListItemGraphic } from "@webiny/ui/List";
 import { Icon } from "@webiny/ui/Icon";
+import { ConfirmationDialog } from "@webiny/ui/ConfirmationDialog";
 import { ReactComponent as PreviewIcon } from "@webiny/app-page-builder/admin/assets/visibility.svg";
+import {
+    ConfigureDomainMessage,
+    configureDomainTitle
+} from "@webiny/app-page-builder/utils/configureDomain";
 
 const openTarget = window.Cypress ? "_self" : "_blank";
 
 const PreviewPageButton = ({ page }) => {
-    const { getPagePreviewUrl } = usePageBuilderSettings();
+    const { getPagePreviewUrl, getDomain, isSiteRunning } = usePageBuilderSettings();
+
     return (
-        <MenuItem
-            onClick={() => window.open(getPagePreviewUrl(page), openTarget)}
-            data-testid={"pb-editor-page-options-menu-preview"}
+        <ConfirmationDialog
+            title={configureDomainTitle}
+            message={<ConfigureDomainMessage domain={getDomain()} />}
         >
-            <ListItemGraphic>
-                <Icon icon={<PreviewIcon />} />
-            </ListItemGraphic>
-            Preview
-        </MenuItem>
+            {({ showConfirmation }) => {
+                return (
+                    <MenuItem
+                        onClick={() => {
+                            if (isSiteRunning) {
+                                window.open(getPagePreviewUrl(page), openTarget);
+                            } else {
+                                showConfirmation();
+                            }
+                        }}
+                        data-testid={"pb-editor-page-options-menu-preview"}
+                    >
+                        <ListItemGraphic>
+                            <Icon icon={<PreviewIcon />} />
+                        </ListItemGraphic>
+                        Preview
+                    </MenuItem>
+                );
+            }}
+        </ConfirmationDialog>
     );
 };
 

diff --git a/packages/app-page-builder/src/utils/configureDomain.tsx b/packages/app-page-builder/src/utils/configureDomain.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { css } from "emotion";
+import {i18n} from "@webiny/app/i18n";
+
+const t = i18n.ns("app-page-builder/utils");
+
+const confirmationMessageStyles = css({
+    "& code": {
+        backgroundColor: "var(--mdc-theme-background)",
+        padding: "0px 8px"
+    }
+});
+
+export const configureDomainTitle = t`Configure domain`;
+
+export const ConfigureDomainMessage = ({ domain }) => (
+    <span className={confirmationMessageStyles}>
+        No site is running at <strong>{domain}</strong>
+        <br />
+        Either start the server by <code>cd apps/site && yarn start</code>
+        <br />
+        or update the domain by going into{" "}
+        <a href={"/settings/page-builder/general"}>page builder settings</a>
+    </span>
+);