fix(app-page-builder): export Components namespace with composable components

Author: Pavel910

packages/app-page-builder/src/admin/components/Table/Preview/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { DrawerContent, DrawerRight } from "@webiny/ui/Drawer";
-import PageDetails from "~/admin/views/Pages/PageDetails";
+import { PageDetails } from "~/admin/views/Pages/PageDetails";
 
 interface PreviewProps {
     open: boolean;

packages/app-page-builder/src/admin/components/Table/Table/Actions/ChangePageStatus.tsx

@@ -4,8 +4,9 @@ import { ReactComponent as Unpublish } from "@material-design-icons/svg/outlined
 import { PageListConfig } from "~/admin/config/pages";
 import { usePage } from "~/admin/views/Pages/hooks/usePage";
 import { useChangePageStatus } from "~/admin/views/Pages/hooks/useChangePageStatus";
+import { makeComposable } from "@webiny/react-composition";
 
-export const ChangePageStatus = () => {
+export const ChangePageStatus = makeComposable("ChangePageStatus", () => {
     const { page } = usePage();
     const { openDialogUnpublishPage, openDialogPublishPage } = useChangePageStatus({ page });
     const { OptionsMenuItem } = PageListConfig.Browser.PageAction;
@@ -29,4 +30,4 @@ export const ChangePageStatus = () => {
             data-testid={"aco.actions.pb.page.publish"}
         />
     );
-};
+});

packages/app-page-builder/src/admin/components/Table/Table/Actions/DeletePage.tsx

@@ -1,10 +1,11 @@
 import React from "react";
+import { makeComposable } from "@webiny/app-admin";
 import { ReactComponent as Delete } from "@material-design-icons/svg/outlined/delete.svg";
 import { PageListConfig } from "~/admin/config/pages";
 import { usePage } from "~/admin/views/Pages/hooks/usePage";
 import { useDeletePage } from "~/admin/views/Pages/hooks/useDeletePage";
 
-export const DeletePage = () => {
+export const DeletePage = makeComposable("DeletePage", () => {
     const { page } = usePage();
     const { openDialogDeletePage } = useDeletePage({ page });
     const { OptionsMenuItem } = PageListConfig.Browser.PageAction;
@@ -17,4 +18,4 @@ export const DeletePage = () => {
             data-testid={"aco.actions.pb.page.delete"}
         />
     );
-};
+});

packages/app-page-builder/src/admin/components/Table/Table/Actions/EditPage.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import { ReactComponent as Edit } from "@material-design-icons/svg/outlined/edit.svg";
+import { makeComposable } from "@webiny/app-admin";
 import { PageListConfig } from "~/admin/config/pages";
 import { usePage } from "~/admin/views/Pages/hooks/usePage";
 import { useCreatePageFrom } from "~/admin/views/Pages/hooks/useCreatePageFrom";
 import { useNavigatePage } from "~/admin/hooks/useNavigatePage";
 
-export const EditPage = () => {
+export const EditPage = makeComposable("EditPage", () => {
     const { page } = usePage();
     const { OptionsMenuItem, OptionsMenuLink } = PageListConfig.Browser.PageAction;
     const { getPageEditorUrl, navigateToPageEditor } = useNavigatePage();
@@ -34,4 +35,4 @@ export const EditPage = () => {
             data-testid={"aco.actions.pb.page.edit"}
         />
     );
-};
+});

packages/app-page-builder/src/admin/components/Table/Table/Actions/MovePage.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { ReactComponent as Move } from "@material-design-icons/svg/outlined/drive_file_move.svg";
+import { makeComposable } from "@webiny/app-admin";
 import { PageListConfig } from "~/admin/config/pages";
 import { usePage } from "~/admin/views/Pages/hooks/usePage";
 import { useMovePageToFolder } from "~/admin/views/Pages/hooks/useMovePageToFolder";
 
-export const MovePage = () => {
+export const MovePage = makeComposable("MovePage", () => {
     const { page } = usePage();
     const movePageToFolder = useMovePageToFolder({ record: page });
     const { OptionsMenuItem } = PageListConfig.Browser.PageAction;
@@ -17,4 +18,4 @@ export const MovePage = () => {
             data-testid={"aco.actions.pb.page.move"}
         />
     );
-};
+});

packages/app-page-builder/src/admin/components/Table/Table/Actions/PreviewPage.tsx

@@ -1,12 +1,17 @@
 import React from "react";
 import { ReactComponent as Visibility } from "@material-design-icons/svg/outlined/visibility.svg";
+import { makeComposable } from "@webiny/app-admin";
 import { PageListConfig } from "~/admin/config/pages";
 import { usePage } from "~/admin/views/Pages/hooks/usePage";
-import { usePreviewPage } from "~/admin/views/Pages/hooks/usePreviewPage";
+import { usePreviewPage } from "~/admin/hooks/usePreviewPage";
 
-export const PreviewPage = () => {
+export const PreviewPage = makeComposable("PreviewPage", () => {
     const { page } = usePage();
-    const { previewPage } = usePreviewPage({ page });
+    const { previewPage } = usePreviewPage({
+        id: page.id,
+        status: page.data.status,
+        path: page.data.path
+    });
     const { OptionsMenuItem } = PageListConfig.Browser.PageAction;
 
     const label = page.data.status === "published" ? "View" : "Preview";
@@ -19,4 +24,4 @@ export const PreviewPage = () => {
             data-testid={"aco.actions.pb.page.preview"}
         />
     );
-};
+});

packages/app-page-builder/src/admin/components/Table/Table/Cells/CellActions.tsx

@@ -2,7 +2,8 @@ import React from "react";
 import { FolderProvider, useAcoConfig } from "@webiny/app-aco";
 import { OptionsMenu } from "@webiny/app-admin";
 import { PageListConfig } from "~/admin/config/pages";
-import { PageProvider } from "~/admin/views/Pages/hooks/usePage";
+import { PageProvider } from "~/admin/contexts/Page";
+import { PbPageTableItem } from "~/types";
 
 export const CellActions = () => {
     const { useTableRow, isFolderRow } = PageListConfig.Browser.Table.Column;
@@ -26,7 +27,7 @@ export const CellActions = () => {
     }
 
     return (
-        <PageProvider page={row}>
+        <PageProvider<PbPageTableItem> page={row}>
             <OptionsMenu
                 actions={recordConfig.actions}
                 data-testid={"table.row.pb.page.menu-action"}

packages/app-page-builder/src/admin/contexts/Page.tsx

@@ -0,0 +1,34 @@
+import React, { createContext } from "react";
+
+export interface PageContext<T = any> {
+    page: T;
+}
+
+export const PageContext = createContext<PageContext | undefined>(undefined);
+
+interface PageProviderProps<T> {
+    page: T;
+    children: React.ReactNode;
+}
+
+export function PageProvider<T>({ page, children }: PageProviderProps<T>) {
+    const value: PageContext = { page };
+
+    return <PageContext.Provider value={value}>{children}</PageContext.Provider>;
+}
+
+export function createUsePageHook<T>() {
+    return () => {
+        const context = React.useContext<PageContext<T>>(
+            PageContext as unknown as React.Context<PageContext<T>>
+        );
+
+        if (!context) {
+            throw Error(
+                `PageContext is missing in the component tree. Are you using "usePage()" hook in the right place?`
+            );
+        }
+
+        return context;
+    };
+}

packages/app-page-builder/src/admin/graphql/pages.ts

@@ -17,6 +17,15 @@ export interface PageResponseData {
     locked: boolean;
     status: string;
     revisions: PbPageRevision[];
+    createdBy: {
+        id: string;
+        displayName: string;
+    };
+    savedOn: string;
+    category: {
+        name: string;
+    };
+    content: Record<string, any>;
 }
 
 export const DATA_FIELDS = `
@@ -143,10 +152,10 @@ export const LIST_PAGES = gql`
  * ##############################
  * Get Page Query Response
  */
-export interface GetPageQueryResponse {
+export interface GetPageQueryResponse<T extends PageResponseData = PageResponseData> {
     pageBuilder: {
         getPage: {
-            data: PageResponseData | null;
+            data: T | null;
             error: PbErrorResponse | null;
         };
     };
@@ -163,7 +172,7 @@ export const GET_PAGE = gql`
                 data {
                     ${DATA_FIELDS}
                     createdBy {
-                        id,
+                        id
                         displayName
                     }
                     savedOn

packages/app-page-builder/src/admin/views/Pages/hooks/usePreviewPage.ts renamed to packages/app-page-builder/src/admin/hooks/usePreviewPage.ts

@@ -2,35 +2,31 @@ import { useCallback } from "react";
 import { usePageBuilderSettings } from "~/admin/hooks/usePageBuilderSettings";
 import { useSiteStatus } from "~/admin/hooks/useSiteStatus";
 import { useConfigureWebsiteUrlDialog } from "~/admin/hooks/useConfigureWebsiteUrl";
-import { PbPageTableItem } from "~/types";
+import { PbPageData } from "~/types";
 
-interface UsePreviewPageParams {
-    page: PbPageTableItem;
-}
-
-export const usePreviewPage = ({ page }: UsePreviewPageParams) => {
+/**
+ * This hook handles the logic of loading website preview URL, verifying that it exists, checking that the preview URL
+ * is accessible, and if not, shows a dialog to the user to either configure or ensure the endpoint is accessible.
+ */
+export function usePreviewPage(input: Pick<PbPageData, "id" | "status" | "path">) {
     const { getPageUrl, getWebsiteUrl } = usePageBuilderSettings();
     const [isSiteRunning, refreshSiteStatus] = useSiteStatus(getWebsiteUrl());
-
     const { showConfigureWebsiteUrlDialog } = useConfigureWebsiteUrlDialog(
         getWebsiteUrl(),
         refreshSiteStatus
     );
 
-    // We must prevent opening in new tab - Cypress doesn't work with new tabs.
+    // For test environments, we must not open new tabs. Cypress doesn't work with new tabs.
     const target = "Cypress" in window ? "_self" : "_blank";
+    const url = getPageUrl(input);
 
-    const url = getPageUrl(page.data);
-
-    const previewPage = useCallback(() => {
+    const handlePreviewClick = useCallback(() => {
         if (isSiteRunning) {
             window.open(url, target, "noopener");
         } else {
             showConfigureWebsiteUrlDialog();
         }
     }, [url, isSiteRunning]);
 
-    return {
-        previewPage
-    };
-};
+    return { previewPage: handlePreviewClick, previewUrl: url };
+}

packages/app-page-builder/src/admin/plugins/pageDetails/header/Header.tsx

@@ -1,12 +1,10 @@
-import React, { useCallback } from "react";
+import React from "react";
 import styled from "@emotion/styled";
 import { renderPlugins } from "@webiny/app/plugins";
 import { Typography } from "@webiny/ui/Typography";
-import { useConfigureWebsiteUrlDialog } from "~/admin/hooks/useConfigureWebsiteUrl";
-import { usePageBuilderSettings } from "~/admin/hooks/usePageBuilderSettings";
-import { useSiteStatus } from "~/admin/hooks/useSiteStatus";
 import { ReactComponent as OpenInNew } from "@material-design-icons/svg/round/open_in_new.svg";
 import { PbPageData } from "~/types";
+import { usePreviewPage } from "~/admin/hooks/usePreviewPage";
 
 const HeaderTitle = styled.div`
     display: flex;
@@ -77,24 +75,11 @@ interface HeaderProps {
 }
 const Header = (props: HeaderProps) => {
     const { page } = props;
-    const { getPageUrl, getWebsiteUrl } = usePageBuilderSettings();
-    const [isSiteRunning, refreshSiteStatus] = useSiteStatus(getWebsiteUrl());
-    const { showConfigureWebsiteUrlDialog } = useConfigureWebsiteUrlDialog(
-        getWebsiteUrl(),
-        refreshSiteStatus
-    );
-
-    // We must prevent opening in new tab - Cypress doesn't work with new tabs.
-    const target = "Cypress" in window ? "_self" : "_blank";
-    const url = getPageUrl(page);
-
-    const handlePreviewClick = useCallback(() => {
-        if (isSiteRunning) {
-            window.open(url, target, "noopener");
-        } else {
-            showConfigureWebsiteUrlDialog();
-        }
-    }, [url, isSiteRunning]);
+    const { previewPage, previewUrl } = usePreviewPage({
+        id: page.id,
+        status: page.status,
+        path: page.path
+    });
 
     return (
         <React.Fragment>
@@ -103,8 +88,8 @@ const Header = (props: HeaderProps) => {
                     <PageTitle>
                         <Typography use="headline6">{page.title}</Typography>
                     </PageTitle>
-                    <PageLink onClick={handlePreviewClick}>
-                        <Typography use="caption">{url}</Typography>
+                    <PageLink onClick={previewPage}>
+                        <Typography use="caption">{previewUrl}</Typography>
                         <OpenInNew />
                     </PageLink>
                 </PageInfo>

packages/app-page-builder/src/admin/plugins/pageDetails/header/deletePage/DeletePage.tsx

@@ -7,7 +7,7 @@ import { PbPageData } from "~/types";
 import { useDeletePage } from "~/admin/views/Pages/hooks/useDeletePage";
 import { useFolders } from "@webiny/app-aco";
 
-interface DeletePageProps {
+export interface DeletePageProps {
     page: PbPageData;
     onDelete?: () => void;
 }

packages/app-page-builder/src/admin/plugins/pageDetails/header/editRevision/EditRevision.tsx

@@ -14,7 +14,7 @@ import { useFolders } from "@webiny/app-aco";
 
 const t = i18n.ns("app-headless-cms/app-page-builder/page-details/header/edit");
 
-interface EditRevisionProps {
+export interface EditRevisionProps {
     page: PbPageData;
 }