Add metadata editor to page views

schema.graphql

@@ -1184,6 +1184,7 @@ enum CollectionSortField {
   NAME
   AVAILABILITY
   PRODUCT_COUNT
+  PUBLICATION_DATE
 }
 
 input CollectionSortingInput {
@@ -2306,6 +2307,7 @@ type Margin {
 type Menu implements Node {
   id: ID!
   name: String!
+  slug: String!
   items: [MenuItem]
 }
 
@@ -2334,6 +2336,7 @@ type MenuCreate {
 
 input MenuCreateInput {
   name: String!
+  slug: String
   items: [MenuItemInput]
 }
 
@@ -2363,10 +2366,12 @@ enum MenuErrorCode {
 
 input MenuFilterInput {
   search: String
+  slug: [String]
 }
 
 input MenuInput {
   name: String
+  slug: String
 }
 
 type MenuItem implements Node {
@@ -3229,7 +3234,7 @@ type OrderVoid {
   orderErrors: [OrderError!]!
 }
 
-type Page implements Node {
+type Page implements Node & ObjectWithMetadata {
   seoTitle: String
   seoDescription: String
   id: ID!
@@ -3240,6 +3245,10 @@ type Page implements Node {
   isPublished: Boolean!
   slug: String!
   created: DateTime!
+  privateMetadata: [MetadataItem]!
+  metadata: [MetadataItem]!
+  privateMeta: [MetaStore]! @deprecated(reason: "Use the `privetaMetadata` field. This field will be removed after 2020-07-31.")
+  meta: [MetaStore]! @deprecated(reason: "Use the `metadata` field. This field will be removed after 2020-07-31.")
   translation(languageCode: LanguageCodeEnum!): PageTranslation
 }
 
@@ -3792,6 +3801,7 @@ input ProductFilterInput {
   price: PriceRangeInput
   minimalPrice: PriceRangeInput
   productTypes: [ID]
+  ids: [ID]
 }
 
 type ProductImage implements Node {
@@ -3878,6 +3888,7 @@ enum ProductOrderField {
   DATE
   TYPE
   PUBLISHED
+  PUBLICATION_DATE
 }
 
 type ProductPricingInfo {
@@ -4288,7 +4299,7 @@ type Query {
   draftOrders(sortBy: OrderSortingInput, filter: OrderDraftFilterInput, created: ReportingPeriod, before: String, after: String, first: Int, last: Int): OrderCountableConnection
   ordersTotal(period: ReportingPeriod): TaxedMoney
   orderByToken(token: UUID!): Order
-  menu(id: ID, name: String): Menu
+  menu(id: ID, name: String, slug: String): Menu
   menus(sortBy: MenuSortingInput, filter: MenuFilterInput, before: String, after: String, first: Int, last: Int): MenuCountableConnection
   menuItem(id: ID!): MenuItem
   menuItems(sortBy: MenuItemSortingInput, filter: MenuItemFilterInput, before: String, after: String, first: Int, last: Int): MenuItemCountableConnection
@@ -4755,10 +4766,10 @@ type Shop {
   defaultMailSenderAddress: String
   description: String
   domain: Domain!
-  homepageCollection: Collection
+  homepageCollection: Collection @deprecated(reason: "Use the `collection` query with the `slug` parameter. This field will be removed in Saleor 3.0")
   languages: [LanguageDisplay]!
   name: String!
-  navigation: Navigation
+  navigation: Navigation @deprecated(reason: "Fetch menus using the `menu` query with `slug` parameter.")
   permissions: [Permission]!
   phonePrefixes: [String]!
   headerText: String

src/fragments/pages.ts

@@ -1,5 +1,7 @@
 import gql from "graphql-tag";
 
+import { metadataFragment } from "./metadata";
+
 export const pageFragment = gql`
   fragment PageFragment on Page {
     id
@@ -11,8 +13,10 @@ export const pageFragment = gql`
 
 export const pageDetailsFragment = gql`
   ${pageFragment}
+  ${metadataFragment}
   fragment PageDetailsFragment on Page {
     ...PageFragment
+    ...MetadataFragment
     contentJson
     seoTitle
     seoDescription

src/fragments/types/MetadataFragment.ts

@@ -19,7 +19,7 @@ export interface MetadataFragment_privateMetadata {
 }
 
 export interface MetadataFragment {
-  __typename: "ServiceAccount" | "App" | "Product" | "ProductType" | "Attribute" | "Category" | "ProductVariant" | "DigitalContent" | "Collection" | "User" | "Checkout" | "Order" | "Fulfillment" | "Invoice";
+  __typename: "ServiceAccount" | "App" | "Product" | "ProductType" | "Attribute" | "Category" | "ProductVariant" | "DigitalContent" | "Collection" | "Page" | "User" | "Checkout" | "Order" | "Fulfillment" | "Invoice";
   metadata: (MetadataFragment_metadata | null)[];
   privateMetadata: (MetadataFragment_privateMetadata | null)[];
 }

src/fragments/types/PageDetailsFragment.ts

@@ -6,12 +6,26 @@
 // GraphQL fragment: PageDetailsFragment
 // ====================================================
 
+export interface PageDetailsFragment_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface PageDetailsFragment_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface PageDetailsFragment {
   __typename: "Page";
   id: string;
   title: string;
   slug: string;
   isPublished: boolean;
+  metadata: (PageDetailsFragment_metadata | null)[];
+  privateMetadata: (PageDetailsFragment_privateMetadata | null)[];
   contentJson: any;
   seoTitle: string | null;
   seoDescription: string | null;

src/pages/components/PageDetailsPage/PageDetailsPage.tsx

@@ -4,6 +4,7 @@ import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
+import Metadata, { MetadataFormData } from "@saleor/components/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import SeoForm from "@saleor/components/SeoForm";
@@ -11,6 +12,8 @@ import VisibilityCard from "@saleor/components/VisibilityCard";
 import { PageErrorFragment } from "@saleor/fragments/types/PageErrorFragment";
 import useDateLocalize from "@saleor/hooks/useDateLocalize";
 import { sectionNames } from "@saleor/intl";
+import { mapMetadataItemToInput } from "@saleor/utils/maps";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import {
   ContentState,
   convertFromRaw,
@@ -24,7 +27,7 @@ import { maybe } from "../../../misc";
 import { PageDetails_page } from "../../types/PageDetails";
 import PageInfo from "../PageInfo";
 
-export interface FormData {
+export interface FormData extends MetadataFormData {
   content: RawDraftContentState;
   isPublished: boolean;
   publicationDate: string;
@@ -56,6 +59,12 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
 }) => {
   const intl = useIntl();
   const localizeDate = useDateLocalize();
+  const {
+    isMetadataModified,
+    isPrivateMetadataModified,
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
+
   const pageExists = page !== null;
 
   const initialForm: FormData = {
@@ -63,109 +72,126 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
       () => JSON.parse(page.contentJson),
       convertToRaw(ContentState.createFromText(""))
     ),
-    isPublished: maybe(() => page.isPublished, false),
+    isPublished: page?.isPublished,
-    publicationDate: maybe(() => page.publicationDate, ""),
+    metadata: pageExists ? page?.metadata?.map(mapMetadataItemToInput) : [],
-    seoDescription: maybe(() => page.seoDescription || "", ""),
+    privateMetadata: pageExists
-    seoTitle: maybe(() => page.seoTitle || "", ""),
+      ? page?.privateMetadata?.map(mapMetadataItemToInput)
-    slug: maybe(() => page.slug, ""),
+      : [],
-    title: maybe(() => page.title, "")
+    publicationDate: page?.publicationDate || "",
+    seoDescription: page?.seoDescription || "",
+    seoTitle: page?.seoTitle || "",
+    slug: page?.slug || "",
+    title: page?.title || ""
   };
 
-  const handleSubmit = (data: FormData) => onSubmit(getParsedData(data));
+  const handleSubmit = (data: FormData) => {
+    const metadata = isMetadataModified ? data.metadata : undefined;
+    const privateMetadata = isPrivateMetadataModified
+      ? data.privateMetadata
+      : undefined;
 
-  const getParsedData = (data: FormData) => ({
+    onSubmit({
-    ...data,
+      ...data,
-    isPublished: data.isPublished || !!data.publicationDate
+      isPublished: data.isPublished || !!data.publicationDate,
-  });
+      metadata,
+      privateMetadata
+    });
+  };
 
   return (
     <Form initial={initialForm} onSubmit={handleSubmit}>
-      {({ change, data, hasChanged, submit }) => (
+      {({ change, data, hasChanged, submit }) => {
-        <Container>
+        const changeMetadata = makeMetadataChangeHandler(change);
-          <AppHeader onBack={onBack}>
+
-            {intl.formatMessage(sectionNames.pages)}
+        return (
-          </AppHeader>
+          <Container>
-          <PageHeader
+            <AppHeader onBack={onBack}>
-            title={
+              {intl.formatMessage(sectionNames.pages)}
-              !pageExists
+            </AppHeader>
-                ? intl.formatMessage({
+            <PageHeader
-                    defaultMessage: "Create Page",
+              title={
-                    description: "page header"
+                !pageExists
-                  })
+                  ? intl.formatMessage({
-                : maybe(() => page.title)
+                      defaultMessage: "Create Page",
-            }
+                      description: "page header"
-          />
+                    })
-          <Grid>
+                  : maybe(() => page.title)
-            <div>
+              }
-              <PageInfo
+            />
-                data={data}
+            <Grid>
-                disabled={disabled}
+              <div>
-                errors={errors}
+                <PageInfo
-                page={page}
+                  data={data}
-                onChange={change}
+                  disabled={disabled}
-              />
+                  errors={errors}
-              <CardSpacer />
+                  page={page}
-              <SeoForm
+                  onChange={change}
-                errors={errors}
+                />
-                allowEmptySlug={!pageExists}
+                <CardSpacer />
-                description={data.seoDescription}
+                <SeoForm
-                disabled={disabled}
+                  errors={errors}
-                descriptionPlaceholder={maybe(
+                  allowEmptySlug={!pageExists}
-                  () =>
+                  description={data.seoDescription}
-                    convertFromRaw(data.content)
+                  disabled={disabled}
-                      .getPlainText()
+                  descriptionPlaceholder={maybe(
-                      .slice(0, 300),
+                    () =>
-                  ""
+                      convertFromRaw(data.content)
-                )}
+                        .getPlainText()
-                onChange={change}
+                        .slice(0, 300),
-                slug={data.slug}
+                    ""
-                slugPlaceholder={data.title}
+                  )}
-                title={data.seoTitle}
+                  onChange={change}
-                titlePlaceholder={data.title}
+                  slug={data.slug}
-                helperText={intl.formatMessage({
+                  slugPlaceholder={data.title}
-                  defaultMessage:
+                  title={data.seoTitle}
-                    "Add search engine title and description to make this page easier to find"
+                  titlePlaceholder={data.title}
-                })}
+                  helperText={intl.formatMessage({
-              />
+                    defaultMessage:
-            </div>
+                      "Add search engine title and description to make this page easier to find"
-            <div>
+                  })}
-              <CardSpacer />
+                />
-              <VisibilityCard
+                <CardSpacer />
-                data={data}
+                <Metadata data={data} onChange={changeMetadata} />
-                errors={errors}
+              </div>
-                disabled={disabled}
+              <div>
-                messages={{
+                <CardSpacer />
-                  hiddenLabel: intl.formatMessage({
+                <VisibilityCard
-                    defaultMessage: "Hidden",
+                  data={data}
-                    description: "page label"
+                  errors={errors}
-                  }),
+                  disabled={disabled}
-                  hiddenSecondLabel: intl.formatMessage(
+                  messages={{
-                    {
+                    hiddenLabel: intl.formatMessage({
-                      defaultMessage: "will be visible from {date}",
+                      defaultMessage: "Hidden",
-                      description: "page"
+                      description: "page label"
-                    },
+                    }),
-                    {
+                    hiddenSecondLabel: intl.formatMessage(
-                      date: localizeDate(data.publicationDate, "L")
+                      {
-                    }
+                        defaultMessage: "will be visible from {date}",
-                  ),
+                        description: "page"
-                  visibleLabel: intl.formatMessage({
+                      },
-                    defaultMessage: "Visible",
+                      {
-                    description: "page label"
+                        date: localizeDate(data.publicationDate, "L")
-                  })
+                      }
-                }}
+                    ),
-                onChange={change}
+                    visibleLabel: intl.formatMessage({
-              />
+                      defaultMessage: "Visible",
-            </div>
+                      description: "page label"
-          </Grid>
+                    })
-          <SaveButtonBar
+                  }}
-            disabled={disabled || !hasChanged}
+                  onChange={change}
-            state={saveButtonBarState}
+                />
-            onCancel={onBack}
+              </div>
-            onDelete={page === null ? undefined : onRemove}
+            </Grid>
-            onSave={submit}
+            <SaveButtonBar
-          />
+              disabled={disabled || !hasChanged}
-        </Container>
+              state={saveButtonBarState}
-      )}
+              onCancel={onBack}
+              onDelete={page === null ? undefined : onRemove}
+              onSave={submit}
+            />
+          </Container>
+        );
+      }}
     </Form>
   );
 };

src/pages/fixtures.ts

@@ -37,6 +37,14 @@ export const page: PageDetails_page = {
   contentJson: JSON.stringify(content),
   id: "Kzx152sEm==",
   isPublished: false,
+  metadata: [
+    {
+      __typename: "MetadataItem",
+      key: "integration.id",
+      value: "100023123"
+    }
+  ],
+  privateMetadata: [],
   publicationDate: "",
   seoDescription: "About",
   seoTitle: "About",

src/pages/types/PageCreate.ts

@@ -14,12 +14,26 @@ export interface PageCreate_pageCreate_errors {
   field: string | null;
 }
 
+export interface PageCreate_pageCreate_page_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface PageCreate_pageCreate_page_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface PageCreate_pageCreate_page {
   __typename: "Page";
   id: string;
   title: string;
   slug: string;
   isPublished: boolean;
+  metadata: (PageCreate_pageCreate_page_metadata | null)[];
+  privateMetadata: (PageCreate_pageCreate_page_privateMetadata | null)[];
   contentJson: any;
   seoTitle: string | null;
   seoDescription: string | null;

src/pages/types/PageDetails.ts

@@ -6,12 +6,26 @@
 // GraphQL query operation: PageDetails
 // ====================================================
 
+export interface PageDetails_page_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface PageDetails_page_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface PageDetails_page {
   __typename: "Page";
   id: string;
   title: string;
   slug: string;
   isPublished: boolean;
+  metadata: (PageDetails_page_metadata | null)[];
+  privateMetadata: (PageDetails_page_privateMetadata | null)[];
   contentJson: any;
   seoTitle: string | null;
   seoDescription: string | null;

src/pages/types/PageUpdate.ts

@@ -14,12 +14,26 @@ export interface PageUpdate_pageUpdate_errors {
   field: string | null;
 }
 
+export interface PageUpdate_pageUpdate_page_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface PageUpdate_pageUpdate_page_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface PageUpdate_pageUpdate_page {
   __typename: "Page";
   id: string;
   title: string;
   slug: string;
   isPublished: boolean;
+  metadata: (PageUpdate_pageUpdate_page_metadata | null)[];
+  privateMetadata: (PageUpdate_pageUpdate_page_privateMetadata | null)[];
   contentJson: any;
   seoTitle: string | null;
   seoDescription: string | null;

src/pages/views/PageCreate.tsx

@@ -1,10 +1,15 @@
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
+import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
+import {
+  useMetadataUpdate,
+  usePrivateMetadataUpdate
+} from "@saleor/utils/metadata/updateMetadata";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import PageDetailsPage from "../components/PageDetailsPage";
+import PageDetailsPage, { FormData } from "../components/PageDetailsPage";
 import { TypedPageCreate } from "../mutations";
 import { PageCreate as PageCreateData } from "../types/PageCreate";
 import { pageListUrl, pageUrl } from "../urls";
@@ -17,6 +22,8 @@ export const PageCreate: React.FC<PageCreateProps> = () => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
+  const [updateMetadata] = useMetadataUpdate({});
+  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
   const handlePageCreate = (data: PageCreateData) => {
     if (data.pageCreate.errors.length === 0) {
@@ -32,41 +39,52 @@ export const PageCreate: React.FC<PageCreateProps> = () => {
 
   return (
     <TypedPageCreate onCompleted={handlePageCreate}>
-      {(pageCreate, pageCreateOpts) => (
+      {(pageCreate, pageCreateOpts) => {
-        <>
+        const handleCreate = async (formData: FormData) => {
-          <WindowTitle
+          const result = await pageCreate({
-            title={intl.formatMessage({
+            variables: {
-              defaultMessage: "Create Page",
+              input: {
-              description: "header"
+                contentJson: JSON.stringify(formData.content),
-            })}
+                isPublished: formData.isPublished,
-          />
+                publicationDate: formData.publicationDate,
-          <PageDetailsPage
+                seo: {
-            disabled={pageCreateOpts.loading}
+                  description: formData.seoDescription,
-            errors={pageCreateOpts.data?.pageCreate.errors || []}
+                  title: formData.seoTitle
-            saveButtonBarState={pageCreateOpts.status}
+                },
-            page={null}
+                slug: formData.slug === "" ? null : formData.slug,
-            onBack={() => navigate(pageListUrl())}
+                title: formData.title
-            onRemove={() => undefined}
+              }
-            onSubmit={formData =>
-              pageCreate({
-                variables: {
-                  input: {
-                    contentJson: JSON.stringify(formData.content),
-                    isPublished: formData.isPublished,
-                    publicationDate: formData.publicationDate,
-                    seo: {
-                      description: formData.seoDescription,
-                      title: formData.seoTitle
-                    },
-                    slug: formData.slug === "" ? null : formData.slug,
-                    title: formData.title
-                  }
-                }
-              })
             }
-          />
+          });
-        </>
+
-      )}
+          return result.data.pageCreate.page?.id || null;
+        };
+        const handleSubmit = createMetadataCreateHandler(
+          handleCreate,
+          updateMetadata,
+          updatePrivateMetadata
+        );
+
+        return (
+          <>
+            <WindowTitle
+              title={intl.formatMessage({
+                defaultMessage: "Create Page",
+                description: "header"
+              })}
+            />
+            <PageDetailsPage
+              disabled={pageCreateOpts.loading}
+              errors={pageCreateOpts.data?.pageCreate.errors || []}
+              saveButtonBarState={pageCreateOpts.status}
+              page={null}
+              onBack={() => navigate(pageListUrl())}
+              onRemove={() => undefined}
+              onSubmit={handleSubmit}
+            />
+          </>
+        );
+      }}
     </TypedPageCreate>
   );
 };

src/pages/views/PageDetails.tsx

@@ -4,6 +4,11 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
+import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
+import {
+  useMetadataUpdate,
+  usePrivateMetadataUpdate
+} from "@saleor/utils/metadata/updateMetadata";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -36,6 +41,8 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
+  const [updateMetadata] = useMetadataUpdate({});
+  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
   const handlePageRemove = (data: PageRemove) => {
     if (data.pageDelete.errors.length === 0) {
@@ -46,68 +53,82 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
       navigate(pageListUrl());
     }
   };
+
   return (
     <TypedPageRemove variables={{ id }} onCompleted={handlePageRemove}>
       {(pageRemove, pageRemoveOpts) => (
         <TypedPageUpdate>
           {(pageUpdate, pageUpdateOpts) => (
             <TypedPageDetailsQuery variables={{ id }}>
-              {pageDetails => (
+              {pageDetails => {
-                <>
+                const handleUpdate = async (data: FormData) => {
-                  <WindowTitle
+                  const result = await pageUpdate({
-                    title={maybe(() => pageDetails.data.page.title)}
+                    variables: {
-                  />
+                      id,
-                  <PageDetailsPage
+                      input: createPageInput(data)
-                    disabled={pageDetails.loading}
-                    errors={pageUpdateOpts.data?.pageUpdate.errors || []}
-                    saveButtonBarState={pageUpdateOpts.status}
-                    page={pageDetails.data?.page}
-                    onBack={() => navigate(pageListUrl())}
-                    onRemove={() =>
-                      navigate(
-                        pageUrl(id, {
-                          action: "remove"
-                        })
-                      )
                     }
-                    onSubmit={formData =>
+                  });
-                      pageUpdate({
+
-                        variables: {
+                  return result.data.pageUpdate.errors;
-                          id,
+                };
-                          input: createPageInput(formData)
+
-                        }
+                const handleSubmit = createMetadataUpdateHandler(
-                      })
+                  pageDetails.data?.page,
-                    }
+                  handleUpdate,
-                  />
+                  variables => updateMetadata({ variables }),
-                  <ActionDialog
+                  variables => updatePrivateMetadata({ variables })
-                    open={params.action === "remove"}
+                );
-                    confirmButtonState={pageRemoveOpts.status}
+
-                    title={intl.formatMessage({
+                return (
-                      defaultMessage: "Delete Page",
+                  <>
-                      description: "dialog header"
+                    <WindowTitle
-                    })}
+                      title={maybe(() => pageDetails.data.page.title)}
-                    onClose={() => navigate(pageUrl(id))}
+                    />
-                    onConfirm={pageRemove}
+                    <PageDetailsPage
-                    variant="delete"
+                      disabled={pageDetails.loading}
-                  >
+                      errors={pageUpdateOpts.data?.pageUpdate.errors || []}
-                    <DialogContentText>
+                      saveButtonBarState={pageUpdateOpts.status}
-                      <FormattedMessage
+                      page={pageDetails.data?.page}
-                        defaultMessage="Are you sure you want to delete {title}?"
+                      onBack={() => navigate(pageListUrl())}
-                        description="delete page"
+                      onRemove={() =>
-                        values={{
+                        navigate(
-                          title: (
+                          pageUrl(id, {
-                            <strong>
+                            action: "remove"
-                              {getStringOrPlaceholder(
+                          })
-                                pageDetails.data?.page?.title
+                        )
-                              )}
+                      }
-                            </strong>
+                      onSubmit={handleSubmit}
-                          )
+                    />
-                        }}
+                    <ActionDialog
-                      />
+                      open={params.action === "remove"}
-                    </DialogContentText>
+                      confirmButtonState={pageRemoveOpts.status}
-                  </ActionDialog>
+                      title={intl.formatMessage({
-                </>
+                        defaultMessage: "Delete Page",
-              )}
+                        description: "dialog header"
+                      })}
+                      onClose={() => navigate(pageUrl(id))}
+                      onConfirm={pageRemove}
+                      variant="delete"
+                    >
+                      <DialogContentText>
+                        <FormattedMessage
+                          defaultMessage="Are you sure you want to delete {title}?"
+                          description="delete page"
+                          values={{
+                            title: (
+                              <strong>
+                                {getStringOrPlaceholder(
+                                  pageDetails.data?.page?.title
+                                )}
+                              </strong>
+                            )
+                          }}
+                        />
+                      </DialogContentText>
+                    </ActionDialog>
+                  </>
+                );
+              }}
             </TypedPageDetailsQuery>
           )}
         </TypedPageUpdate>

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -113412,6 +113412,289 @@ Ctrl + K"
               </div>
             </div>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="false"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id Metadata-content-id"
+            >
+              <div
+                class="Metadata-togglable-id"
+              >
+                <div
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
+                >
+                  1 Field
+                </div>
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id"
+                  data-test="expand"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </div>
+            </div>
+            <table
+              class="MuiTable-root-id Metadata-table-id"
+            >
+              <thead
+                class="MuiTableHead-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                >
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
+                    scope="col"
+                  >
+                    Field
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
+                    scope="col"
+                  >
+                    Value
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
+                    scope="col"
+                  >
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id"
+                  data-test="field"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
+                  >
+                    <div
+                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                    >
+                      <div
+                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                      >
+                        <input
+                          aria-invalid="false"
+                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
+                          name="name:0"
+                          type="text"
+                          value="integration.id"
+                        />
+                        <fieldset
+                          aria-hidden="true"
+                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                          style="padding-left:8px"
+                        >
+                          <legend
+                            class="PrivateNotchedOutline-legend-id"
+                            style="width:0"
+                          >
+                            <span>
+                              ​
+                            </span>
+                          </legend>
+                        </fieldset>
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
+                  >
+                    <div
+                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                    >
+                      <div
+                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                      >
+                        <textarea
+                          aria-invalid="false"
+                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                          name="value:0"
+                          rows="1"
+                        >
+                          100023123
+                        </textarea>
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                          readonly=""
+                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
+                          tabindex="-1"
+                        />
+                        <fieldset
+                          aria-hidden="true"
+                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                          style="padding-left:8px"
+                        >
+                          <legend
+                            class="PrivateNotchedOutline-legend-id"
+                            style="width:0"
+                          >
+                            <span>
+                              ​
+                            </span>
+                          </legend>
+                        </fieldset>
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                      data-test="deleteField"
+                      data-test-id="0"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <div
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test="addField"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add Field
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="true"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Private Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id Metadata-content-id"
+            />
+            <div
+              class="Metadata-emptyContainer-id"
+            >
+              <span
+                class="isvg pending Metadata-emptyImage-id"
+              />
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no private metadata created for this element.
+              </div>
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                Use the button below to add new metadata field
+              </div>
+            </div>
+            <div
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test="addField"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add Field
+                </span>
+              </button>
+            </div>
+          </div>
         </div>
         <div>
           <div
@@ -114236,6 +114519,289 @@ Ctrl + K"
               </div>
             </div>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="false"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id Metadata-content-id"
+            >
+              <div
+                class="Metadata-togglable-id"
+              >
+                <div
+                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
+                >
+                  1 Field
+                </div>
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id"
+                  data-test="expand"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </div>
+            </div>
+            <table
+              class="MuiTable-root-id Metadata-table-id"
+            >
+              <thead
+                class="MuiTableHead-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id MuiTableRow-head-id"
+                >
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
+                    scope="col"
+                  >
+                    Field
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
+                    scope="col"
+                  >
+                    Value
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
+                    scope="col"
+                  >
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root-id"
+              >
+                <tr
+                  class="MuiTableRow-root-id"
+                  data-test="field"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
+                  >
+                    <div
+                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                    >
+                      <div
+                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                      >
+                        <input
+                          aria-invalid="false"
+                          class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
+                          name="name:0"
+                          type="text"
+                          value="integration.id"
+                        />
+                        <fieldset
+                          aria-hidden="true"
+                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                          style="padding-left:8px"
+                        >
+                          <legend
+                            class="PrivateNotchedOutline-legend-id"
+                            style="width:0"
+                          >
+                            <span>
+                              ​
+                            </span>
+                          </legend>
+                        </fieldset>
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
+                  >
+                    <div
+                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                    >
+                      <div
+                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                      >
+                        <textarea
+                          aria-invalid="false"
+                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                          name="value:0"
+                          rows="1"
+                        >
+                          100023123
+                        </textarea>
+                        <textarea
+                          aria-hidden="true"
+                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                          readonly=""
+                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
+                          tabindex="-1"
+                        />
+                        <fieldset
+                          aria-hidden="true"
+                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                          style="padding-left:8px"
+                        >
+                          <legend
+                            class="PrivateNotchedOutline-legend-id"
+                            style="width:0"
+                          >
+                            <span>
+                              ​
+                            </span>
+                          </legend>
+                        </fieldset>
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
+                  >
+                    <button
+                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                      data-test="deleteField"
+                      data-test-id="0"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root-id"
+                          focusable="false"
+                          role="presentation"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <div
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test="addField"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add Field
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="true"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Private Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id Metadata-content-id"
+            />
+            <div
+              class="Metadata-emptyContainer-id"
+            >
+              <span
+                class="isvg pending Metadata-emptyImage-id"
+              />
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no private metadata created for this element.
+              </div>
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                Use the button below to add new metadata field
+              </div>
+            </div>
+            <div
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test="addField"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add Field
+                </span>
+              </button>
+            </div>
+          </div>
         </div>
         <div>
           <div
@@ -114863,6 +115429,80 @@ Ctrl + K"
               </div>
             </div>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="false"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="true"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Private Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </div>
+          </div>
         </div>
         <div>
           <div

src/types/globalTypes.ts

@@ -119,6 +119,7 @@ export enum CollectionSortField {
   AVAILABILITY = "AVAILABILITY",
   NAME = "NAME",
   PRODUCT_COUNT = "PRODUCT_COUNT",
+  PUBLICATION_DATE = "PUBLICATION_DATE",
 }
 
 export enum ConfigurationTypeFieldEnum {
@@ -737,6 +738,7 @@ export enum ProductOrderField {
   MINIMAL_PRICE = "MINIMAL_PRICE",
   NAME = "NAME",
   PRICE = "PRICE",
+  PUBLICATION_DATE = "PUBLICATION_DATE",
   PUBLISHED = "PUBLISHED",
   TYPE = "TYPE",
 }
@@ -1176,6 +1178,7 @@ export interface IntRangeInput {
 
 export interface MenuCreateInput {
   name: string;
+  slug?: string | null;
   items?: (MenuItemInput | null)[] | null;
 }
 
@@ -1379,6 +1382,7 @@ export interface ProductFilterInput {
   price?: PriceRangeInput | null;
   minimalPrice?: PriceRangeInput | null;
   productTypes?: (string | null)[] | null;
+  ids?: (string | null)[] | null;
 }
 
 export interface ProductInput {

src/utils/metadata/types/UpdateMetadata.ts

@@ -38,7 +38,7 @@ export interface UpdateMetadata_deleteMetadata_item_privateMetadata {
 }
 
 export interface UpdateMetadata_deleteMetadata_item {
-  __typename: "ServiceAccount" | "App" | "Product" | "ProductType" | "Attribute" | "Category" | "ProductVariant" | "DigitalContent" | "Collection" | "User" | "Checkout" | "Order" | "Fulfillment" | "Invoice";
+  __typename: "ServiceAccount" | "App" | "Product" | "ProductType" | "Attribute" | "Category" | "ProductVariant" | "DigitalContent" | "Collection" | "Page" | "User" | "Checkout" | "Order" | "Fulfillment" | "Invoice";
   metadata: (UpdateMetadata_deleteMetadata_item_metadata | null)[];
   privateMetadata: (UpdateMetadata_deleteMetadata_item_privateMetadata | null)[];
   id: string;

src/utils/metadata/types/UpdatePrivateMetadata.ts

@@ -38,7 +38,7 @@ export interface UpdatePrivateMetadata_deletePrivateMetadata_item_privateMetadat
 }
 
 export interface UpdatePrivateMetadata_deletePrivateMetadata_item {
-  __typename: "ServiceAccount" | "App" | "Product" | "ProductType" | "Attribute" | "Category" | "ProductVariant" | "DigitalContent" | "Collection" | "User" | "Checkout" | "Order" | "Fulfillment" | "Invoice";
+  __typename: "ServiceAccount" | "App" | "Product" | "ProductType" | "Attribute" | "Category" | "ProductVariant" | "DigitalContent" | "Collection" | "Page" | "User" | "Checkout" | "Order" | "Fulfillment" | "Invoice";
   metadata: (UpdatePrivateMetadata_deletePrivateMetadata_item_metadata | null)[];
   privateMetadata: (UpdatePrivateMetadata_deletePrivateMetadata_item_privateMetadata | null)[];
   id: string;