From 0abf151073ead48262d743a03091ac40134c7452 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Mon, 24 Aug 2020 15:41:00 +0200
Subject: [PATCH 01/12] Update snapshots

---
 .../__snapshots__/Stories.test.ts.snap        | 283 ++++++++++++++++++
 1 file changed, 283 insertions(+)

diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 1d5c30a43..5220c55fc 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -150576,6 +150576,289 @@ Ctrl + K"
               </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="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

From 7bb5ca231bcd49a9b95daa20e8f044714b803f5f Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Thu, 27 Aug 2020 17:04:53 +0200
Subject: [PATCH 02/12] Update changelog and snapshots

---
 .../__snapshots__/Stories.test.ts.snap        | 244 ------------------
 1 file changed, 244 deletions(-)

diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 5220c55fc..c58c34259 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -158747,250 +158747,6 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                     </button>
                   </td>
                 </tr>
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="2"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body2-id"
-                    >
-                      Assign Warehouse
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colAction-id"
-                  >
-                    <div>
-                      <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                        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="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </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

From dde82e07568c5ce380aa8e94be4d9db1cbf6c38a Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Mon, 31 Aug 2020 16:58:07 +0200
Subject: [PATCH 03/12] Add metadata editor to product creator

---
 .../ProductCreatePage/ProductCreatePage.tsx   | 31 +++++++--
 src/products/views/ProductCreate.tsx          | 18 ++++-
 src/utils/handlers/metadataCreateHandler.ts   | 68 +++++++++++++++++++
 3 files changed, 111 insertions(+), 6 deletions(-)
 create mode 100644 src/utils/handlers/metadataCreateHandler.ts

diff --git a/src/products/components/ProductCreatePage/ProductCreatePage.tsx b/src/products/components/ProductCreatePage/ProductCreatePage.tsx
index 9797ff062..0d729ce4d 100644
--- a/src/products/components/ProductCreatePage/ProductCreatePage.tsx
+++ b/src/products/components/ProductCreatePage/ProductCreatePage.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 { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
@@ -25,6 +26,7 @@ import { SearchProductTypes_search_edges_node_productAttributes } from "@saleor/
 import { SearchWarehouses_search_edges_node } from "@saleor/searches/types/SearchWarehouses";
 import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import { ContentState, convertToRaw, RawDraftContentState } from "draft-js";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -45,7 +47,7 @@ import ProductPricing from "../ProductPricing";
 import ProductShipping from "../ProductShipping/ProductShipping";
 import ProductStocks, { ProductStockInput } from "../ProductStocks";
 
-interface FormData {
+interface FormData extends MetadataFormData {
   basePrice: number;
   publicationDate: string;
   category: string;
@@ -133,6 +135,13 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
   const initialDescription = React.useRef(
     convertToRaw(ContentState.createFromText(""))
   );
+
+  const {
+    isMetadataModified,
+    isPrivateMetadataModified,
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
+
   const initialData: FormData = {
     basePrice: 0,
     category: "",
@@ -140,7 +149,9 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
     collections: [],
     description: {} as any,
     isPublished: false,
+    metadata: [],
     name: "",
+    privateMetadata: [],
     productType: "",
     publicationDate: "",
     seoDescription: "",
@@ -168,12 +179,20 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
   const collections = getChoices(collectionChoiceList);
   const productTypes = getChoices(productTypeChoiceList);
 
-  const handleSubmit = (data: FormData) =>
+  const handleSubmit = (data: FormData) => {
+    const metadata = isMetadataModified ? data.metadata : undefined;
+    const privateMetadata = isPrivateMetadataModified
+      ? data.privateMetadata
+      : undefined;
+
     onSubmit({
+      ...data,
       attributes,
-      stocks,
-      ...data
+      metadata,
+      privateMetadata,
+      stocks
     });
+  };
 
   return (
     <Form onSubmit={handleSubmit} initial={initialData} confirmLeave>
@@ -212,6 +231,8 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
           productTypeChoiceList
         );
 
+        const changeMetadata = makeMetadataChangeHandler(change);
+
         return (
           <Container>
             <AppHeader onBack={onBack}>
@@ -296,6 +317,8 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                   loading={disabled}
                   onChange={change}
                 />
+                <CardSpacer />
+                <Metadata data={data} onChange={changeMetadata} />
               </div>
               <div>
                 <ProductOrganization
diff --git a/src/products/views/ProductCreate.tsx b/src/products/views/ProductCreate.tsx
index 18a45ab71..24d06a9da 100644
--- a/src/products/views/ProductCreate.tsx
+++ b/src/products/views/ProductCreate.tsx
@@ -6,6 +6,11 @@ import useShop from "@saleor/hooks/useShop";
 import useCategorySearch from "@saleor/searches/useCategorySearch";
 import useCollectionSearch from "@saleor/searches/useCollectionSearch";
 import useProductTypeSearch from "@saleor/searches/useProductTypeSearch";
+import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
+import {
+  useMetadataUpdate,
+  usePrivateMetadataUpdate
+} from "@saleor/utils/metadata/updateMetadata";
 import { useWarehouseList } from "@saleor/warehouses/queries";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -49,6 +54,8 @@ export const ProductCreateView: React.FC = () => {
       first: 50
     }
   });
+  const [updateMetadata] = useMetadataUpdate({});
+  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
   const handleBack = () => navigate(productListUrl());
 
@@ -66,8 +73,8 @@ export const ProductCreateView: React.FC = () => {
     }
   });
 
-  const handleSubmit = (formData: ProductCreatePageSubmitData) => {
-    productCreate({
+  const handleCreate = async (formData: ProductCreatePageSubmitData) => {
+    const result = await productCreate({
       variables: {
         attributes: formData.attributes.map(attribute => ({
           id: attribute.id,
@@ -96,7 +103,14 @@ export const ProductCreateView: React.FC = () => {
         weight: weight(formData.weight)
       }
     });
+
+    return result.data.productCreate?.product?.id || null;
   };
+  const handleSubmit = createMetadataCreateHandler(
+    handleCreate,
+    updateMetadata,
+    updatePrivateMetadata
+  );
 
   return (
     <>
diff --git a/src/utils/handlers/metadataCreateHandler.ts b/src/utils/handlers/metadataCreateHandler.ts
new file mode 100644
index 000000000..e24491b80
--- /dev/null
+++ b/src/utils/handlers/metadataCreateHandler.ts
@@ -0,0 +1,68 @@
+import { MetadataFormData } from "@saleor/components/Metadata/types";
+import { MutationFunction } from "react-apollo";
+
+import {
+  UpdateMetadata,
+  UpdateMetadataVariables
+} from "../metadata/types/UpdateMetadata";
+import {
+  UpdatePrivateMetadata,
+  UpdatePrivateMetadataVariables
+} from "../metadata/types/UpdatePrivateMetadata";
+
+function createMetadataCreateHandler<T extends MetadataFormData>(
+  create: (data: T) => Promise<string>,
+  setMetadata: MutationFunction<UpdateMetadata, UpdateMetadataVariables>,
+  setPrivateMetadata: MutationFunction<
+    UpdatePrivateMetadata,
+    UpdatePrivateMetadataVariables
+  >
+) {
+  return async (data: T) => {
+    const id = await create(data);
+
+    if (id === null) {
+      return null;
+    }
+
+    if (data.metadata.length > 0) {
+      const updateMetaResult = await setMetadata({
+        variables: {
+          id,
+          input: data.metadata,
+          keysToDelete: []
+        }
+      });
+      const updateMetaErrors = [
+        ...(updateMetaResult.data.deleteMetadata.errors || []),
+        ...(updateMetaResult.data.updateMetadata.errors || [])
+      ];
+
+      if (updateMetaErrors.length > 0) {
+        return updateMetaErrors;
+      }
+    }
+    if (data.privateMetadata.length > 0) {
+      const updatePrivateMetaResult = await setPrivateMetadata({
+        variables: {
+          id,
+          input: data.privateMetadata,
+          keysToDelete: []
+        }
+      });
+
+      const updatePrivateMetaErrors = [
+        ...(updatePrivateMetaResult.data.deletePrivateMetadata.errors || []),
+        ...(updatePrivateMetaResult.data.updatePrivateMetadata.errors || [])
+      ];
+
+      if (updatePrivateMetaErrors.length > 0) {
+        return updatePrivateMetaErrors;
+      }
+    }
+
+    return [];
+  };
+}
+
+export default createMetadataCreateHandler;

From 5737e5f64d82d4f6b3ed43dd62abe8059b4197df Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 1 Sep 2020 12:12:45 +0200
Subject: [PATCH 04/12] Add metadata editor to category creator

---
 .../CategoryCreatePage/CategoryCreatePage.tsx | 111 +++++++++++-------
 src/categories/views/CategoryCreate.tsx       |  52 ++++----
 2 files changed, 101 insertions(+), 62 deletions(-)

diff --git a/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx b/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx
index 4e350ce2a..d646b821b 100644
--- a/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx
+++ b/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx
@@ -3,18 +3,20 @@ import { CardSpacer } from "@saleor/components/CardSpacer";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
+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";
 import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
 import { sectionNames } from "@saleor/intl";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import { ContentState, convertToRaw, RawDraftContentState } from "draft-js";
 import React from "react";
 import { useIntl } from "react-intl";
 
 import CategoryDetailsForm from "../../components/CategoryDetailsForm";
 
-interface FormData {
+export interface FormData extends MetadataFormData {
   description: RawDraftContentState;
   name: string;
   seoTitle: string;
@@ -23,7 +25,9 @@ interface FormData {
 
 const initialData: FormData = {
   description: convertToRaw(ContentState.createFromText("")),
+  metadata: [],
   name: "",
+  privateMetadata: [],
   seoDescription: "",
   seoTitle: ""
 };
@@ -44,49 +48,74 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
   saveButtonBarState
 }) => {
   const intl = useIntl();
+  const {
+    isMetadataModified,
+    isPrivateMetadataModified,
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
+
+  const handleSubmit = (data: FormData) => {
+    const metadata = isMetadataModified ? data.metadata : undefined;
+    const privateMetadata = isPrivateMetadataModified
+      ? data.privateMetadata
+      : undefined;
+
+    onSubmit({
+      ...data,
+      metadata,
+      privateMetadata
+    });
+  };
+
   return (
-    <Form onSubmit={onSubmit} initial={initialData} confirmLeave>
-      {({ data, change, submit, hasChanged }) => (
-        <Container>
-          <AppHeader onBack={onBack}>
-            {intl.formatMessage(sectionNames.categories)}
-          </AppHeader>
-          <PageHeader
-            title={intl.formatMessage({
-              defaultMessage: "Create New Category",
-              description: "page header"
-            })}
-          />
-          <div>
-            <CategoryDetailsForm
-              disabled={disabled}
-              data={data}
-              onChange={change}
-              errors={errors}
-            />
-            <CardSpacer />
-            <SeoForm
-              helperText={intl.formatMessage({
-                defaultMessage:
-                  "Add search engine title and description to make this category easier to find"
+    <Form onSubmit={handleSubmit} initial={initialData} confirmLeave>
+      {({ data, change, submit, hasChanged }) => {
+        const changeMetadata = makeMetadataChangeHandler(change);
+
+        return (
+          <Container>
+            <AppHeader onBack={onBack}>
+              {intl.formatMessage(sectionNames.categories)}
+            </AppHeader>
+            <PageHeader
+              title={intl.formatMessage({
+                defaultMessage: "Create New Category",
+                description: "page header"
               })}
-              title={data.seoTitle}
-              titlePlaceholder={data.name}
-              description={data.seoDescription}
-              descriptionPlaceholder={data.name}
-              loading={disabled}
-              onChange={change}
-              disabled={disabled}
             />
-            <SaveButtonBar
-              onCancel={onBack}
-              onSave={submit}
-              state={saveButtonBarState}
-              disabled={disabled || !hasChanged}
-            />
-          </div>
-        </Container>
-      )}
+            <div>
+              <CategoryDetailsForm
+                disabled={disabled}
+                data={data}
+                onChange={change}
+                errors={errors}
+              />
+              <CardSpacer />
+              <SeoForm
+                helperText={intl.formatMessage({
+                  defaultMessage:
+                    "Add search engine title and description to make this category easier to find"
+                })}
+                title={data.seoTitle}
+                titlePlaceholder={data.name}
+                description={data.seoDescription}
+                descriptionPlaceholder={data.name}
+                loading={disabled}
+                onChange={change}
+                disabled={disabled}
+              />
+              <CardSpacer />
+              <Metadata data={data} onChange={changeMetadata} />
+              <SaveButtonBar
+                onCancel={onBack}
+                onSave={submit}
+                state={saveButtonBarState}
+                disabled={disabled || !hasChanged}
+              />
+            </div>
+          </Container>
+        );
+      }}
     </Form>
   );
 };
diff --git a/src/categories/views/CategoryCreate.tsx b/src/categories/views/CategoryCreate.tsx
index aab98691a..606fab85b 100644
--- a/src/categories/views/CategoryCreate.tsx
+++ b/src/categories/views/CategoryCreate.tsx
@@ -1,11 +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 { maybe } from "../../misc";
-import CategoryCreatePage from "../components/CategoryCreatePage";
+import CategoryCreatePage, { FormData } from "../components/CategoryCreatePage";
 import { useCategoryCreateMutation } from "../mutations";
 import { CategoryCreate } from "../types/CategoryCreate";
 import { categoryListUrl, categoryUrl } from "../urls";
@@ -20,6 +24,8 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
+  const [updateMetadata] = useMetadataUpdate({});
+  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
   const handleSuccess = (data: CategoryCreate) => {
     if (data.categoryCreate.errors.length === 0) {
@@ -37,9 +43,27 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
     onCompleted: handleSuccess
   });
 
-  const errors = maybe(
-    () => createCategoryResult.data.categoryCreate.errors,
-    []
+  const handleCreate = async (formData: FormData) => {
+    const result = await createCategory({
+      variables: {
+        input: {
+          descriptionJson: JSON.stringify(formData.description),
+          name: formData.name,
+          seo: {
+            description: formData.seoDescription,
+            title: formData.seoTitle
+          }
+        },
+        parent: parentId || null
+      }
+    });
+
+    return result.data?.categoryCreate.category?.id || null;
+  };
+  const handleSubmit = createMetadataCreateHandler(
+    handleCreate,
+    updateMetadata,
+    updatePrivateMetadata
   );
 
   return (
@@ -52,26 +76,12 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
       />
       <CategoryCreatePage
         saveButtonBarState={createCategoryResult.status}
-        errors={errors}
+        errors={createCategoryResult.data?.categoryCreate.errors || []}
         disabled={createCategoryResult.loading}
         onBack={() =>
           navigate(parentId ? categoryUrl(parentId) : categoryListUrl())
         }
-        onSubmit={formData =>
-          createCategory({
-            variables: {
-              input: {
-                descriptionJson: JSON.stringify(formData.description),
-                name: formData.name,
-                seo: {
-                  description: formData.seoDescription,
-                  title: formData.seoTitle
-                }
-              },
-              parent: parentId || null
-            }
-          })
-        }
+        onSubmit={handleSubmit}
       />
     </>
   );

From 2353e54ab24b7fd340cca5206b3168e6d47c6df5 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 1 Sep 2020 13:46:15 +0200
Subject: [PATCH 05/12] Add metadata editor to collection creator

---
 .../CollectionCreatePage.tsx                  | 229 +++++++++---------
 src/collections/views/CollectionCreate.tsx    |  54 +++--
 2 files changed, 151 insertions(+), 132 deletions(-)

diff --git a/src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx b/src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx
index fdea99d5c..4aea831cb 100644
--- a/src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx
+++ b/src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx
@@ -1,19 +1,18 @@
-import Card from "@material-ui/core/Card";
-import CardContent from "@material-ui/core/CardContent";
 import AppHeader from "@saleor/components/AppHeader";
 import { CardSpacer } from "@saleor/components/CardSpacer";
-import CardTitle from "@saleor/components/CardTitle";
 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";
 import VisibilityCard from "@saleor/components/VisibilityCard";
 import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
 import useDateLocalize from "@saleor/hooks/useDateLocalize";
-import { commonMessages, sectionNames } from "@saleor/intl";
+import { sectionNames } from "@saleor/intl";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import { ContentState, convertToRaw, RawDraftContentState } from "draft-js";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -21,7 +20,7 @@ import { useIntl } from "react-intl";
 import CollectionDetails from "../CollectionDetails/CollectionDetails";
 import { CollectionImage } from "../CollectionImage/CollectionImage";
 
-export interface CollectionCreatePageFormData {
+export interface CollectionCreatePageFormData extends MetadataFormData {
   backgroundImage: {
     url: string;
     value: string;
@@ -51,7 +50,9 @@ const initialForm: CollectionCreatePageFormData = {
   backgroundImageAlt: "",
   description: convertToRaw(ContentState.createFromText("")),
   isPublished: false,
+  metadata: [],
   name: "",
+  privateMetadata: [],
   publicationDate: "",
   seoDescription: "",
   seoTitle: ""
@@ -66,122 +67,122 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
 }: CollectionCreatePageProps) => {
   const intl = useIntl();
   const localizeDate = useDateLocalize();
+  const {
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
 
   return (
     <Form initial={initialForm} onSubmit={onSubmit}>
-      {({ change, data, hasChanged, submit }) => (
-        <Container>
-          <AppHeader onBack={onBack}>
-            {intl.formatMessage(sectionNames.collections)}
-          </AppHeader>
-          <PageHeader
-            title={intl.formatMessage({
-              defaultMessage: "Add Collection",
-              description: "page header"
-            })}
-          />
-          <Grid>
-            <div>
-              <CollectionDetails
-                data={data}
-                disabled={disabled}
-                errors={errors}
-                onChange={change}
-              />
-              <CardSpacer />
-              <CollectionImage
-                image={
-                  data.backgroundImage.url
-                    ? {
-                        __typename: "Image",
-                        alt: data.backgroundImageAlt,
-                        url: data.backgroundImage.url
-                      }
-                    : null
-                }
-                onImageDelete={() =>
-                  change({
-                    target: {
-                      name: "backgroundImage",
-                      value: {
-                        url: null,
-                        value: null
-                      }
-                    }
-                  } as any)
-                }
-                onImageUpload={file =>
-                  change({
-                    target: {
-                      name: "backgroundImage",
-                      value: {
-                        url: URL.createObjectURL(file),
-                        value: file
-                      }
-                    }
-                  } as any)
-                }
-                onChange={change}
-                data={data}
-              />
-              <CardSpacer />
-              <SeoForm
-                description={data.seoDescription}
-                disabled={disabled}
-                descriptionPlaceholder=""
-                helperText={intl.formatMessage({
-                  defaultMessage:
-                    "Add search engine title and description to make this collection easier to find"
-                })}
-                title={data.seoTitle}
-                titlePlaceholder={data.name}
-                onChange={change}
-              />
-            </div>
-            <div>
+      {({ change, data, hasChanged, submit }) => {
+        const changeMetadata = makeMetadataChangeHandler(change);
+
+        return (
+          <Container>
+            <AppHeader onBack={onBack}>
+              {intl.formatMessage(sectionNames.collections)}
+            </AppHeader>
+            <PageHeader
+              title={intl.formatMessage({
+                defaultMessage: "Add Collection",
+                description: "page header"
+              })}
+            />
+            <Grid>
               <div>
-                <Card>
-                  <CardTitle
-                    title={intl.formatMessage(commonMessages.availability)}
-                  />
-                  <CardContent>
-                    <VisibilityCard
-                      data={data}
-                      errors={errors}
-                      disabled={disabled}
-                      hiddenMessage={intl.formatMessage(
-                        {
-                          defaultMessage: "will be visible from {date}",
-                          description: "collection"
-                        },
-                        {
-                          date: localizeDate(data.publicationDate)
+                <CollectionDetails
+                  data={data}
+                  disabled={disabled}
+                  errors={errors}
+                  onChange={change}
+                />
+                <CardSpacer />
+                <CollectionImage
+                  image={
+                    data.backgroundImage.url
+                      ? {
+                          __typename: "Image",
+                          alt: data.backgroundImageAlt,
+                          url: data.backgroundImage.url
                         }
-                      )}
-                      onChange={change}
-                      visibleMessage={intl.formatMessage(
-                        {
-                          defaultMessage: "since {date}",
-                          description: "collection"
-                        },
-                        {
-                          date: localizeDate(data.publicationDate)
+                      : null
+                  }
+                  onImageDelete={() =>
+                    change({
+                      target: {
+                        name: "backgroundImage",
+                        value: {
+                          url: null,
+                          value: null
                         }
-                      )}
-                    />
-                  </CardContent>
-                </Card>
+                      }
+                    } as any)
+                  }
+                  onImageUpload={file =>
+                    change({
+                      target: {
+                        name: "backgroundImage",
+                        value: {
+                          url: URL.createObjectURL(file),
+                          value: file
+                        }
+                      }
+                    } as any)
+                  }
+                  onChange={change}
+                  data={data}
+                />
+                <CardSpacer />
+                <SeoForm
+                  description={data.seoDescription}
+                  disabled={disabled}
+                  descriptionPlaceholder=""
+                  helperText={intl.formatMessage({
+                    defaultMessage:
+                      "Add search engine title and description to make this collection easier to find"
+                  })}
+                  title={data.seoTitle}
+                  titlePlaceholder={data.name}
+                  onChange={change}
+                />
+                <CardSpacer />
+                <Metadata data={data} onChange={changeMetadata} />
               </div>
-            </div>
-          </Grid>
-          <SaveButtonBar
-            state={saveButtonBarState}
-            disabled={disabled || !hasChanged}
-            onCancel={onBack}
-            onSave={submit}
-          />
-        </Container>
-      )}
+              <div>
+                <VisibilityCard
+                  data={data}
+                  errors={errors}
+                  disabled={disabled}
+                  hiddenMessage={intl.formatMessage(
+                    {
+                      defaultMessage: "will be visible from {date}",
+                      description: "collection"
+                    },
+                    {
+                      date: localizeDate(data.publicationDate)
+                    }
+                  )}
+                  onChange={change}
+                  visibleMessage={intl.formatMessage(
+                    {
+                      defaultMessage: "since {date}",
+                      description: "collection"
+                    },
+                    {
+                      date: localizeDate(data.publicationDate)
+                    }
+                  )}
+                />
+              </div>
+            </Grid>
+            <SaveButtonBar
+              state={saveButtonBarState}
+              disabled={disabled || !hasChanged}
+              onCancel={onBack}
+              onSave={submit}
+            />
+          </Container>
+        );
+      }}
     </Form>
   );
 };
diff --git a/src/collections/views/CollectionCreate.tsx b/src/collections/views/CollectionCreate.tsx
index 6e90baf6b..ab2c29615 100644
--- a/src/collections/views/CollectionCreate.tsx
+++ b/src/collections/views/CollectionCreate.tsx
@@ -2,11 +2,18 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
+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 { CollectionCreateInput } from "../../types/globalTypes";
-import CollectionCreatePage from "../components/CollectionCreatePage/CollectionCreatePage";
+import CollectionCreatePage, {
+  CollectionCreatePageFormData
+} from "../components/CollectionCreatePage/CollectionCreatePage";
 import { useCollectionCreateMutation } from "../mutations";
 import { collectionListUrl, collectionUrl } from "../urls";
 
@@ -14,6 +21,8 @@ export const CollectionCreate: React.FC = () => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
+  const [updateMetadata] = useMetadataUpdate({});
+  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
   const [createCollection, createCollectionOpts] = useCollectionCreateMutation({
     onCompleted: data => {
@@ -38,6 +47,31 @@ export const CollectionCreate: React.FC = () => {
     }
   });
 
+  const handleCreate = async (formData: CollectionCreatePageFormData) => {
+    const result = await createCollection({
+      variables: {
+        input: {
+          backgroundImage: formData.backgroundImage.value,
+          backgroundImageAlt: formData.backgroundImageAlt,
+          descriptionJson: JSON.stringify(formData.description),
+          isPublished: formData.isPublished,
+          name: formData.name,
+          seo: {
+            description: formData.seoDescription,
+            title: formData.seoTitle
+          }
+        }
+      }
+    });
+
+    return result.data?.collectionCreate.collection?.id || null;
+  };
+  const handleSubmit = createMetadataCreateHandler(
+    handleCreate,
+    updateMetadata,
+    updatePrivateMetadata
+  );
+
   return (
     <>
       <WindowTitle
@@ -50,23 +84,7 @@ export const CollectionCreate: React.FC = () => {
         errors={createCollectionOpts.data?.collectionCreate.errors || []}
         onBack={() => navigate(collectionListUrl())}
         disabled={createCollectionOpts.loading}
-        onSubmit={formData =>
-          createCollection({
-            variables: {
-              input: {
-                backgroundImage: formData.backgroundImage.value,
-                backgroundImageAlt: formData.backgroundImageAlt,
-                descriptionJson: JSON.stringify(formData.description),
-                isPublished: formData.isPublished,
-                name: formData.name,
-                seo: {
-                  description: formData.seoDescription,
-                  title: formData.seoTitle
-                }
-              }
-            }
-          })
-        }
+        onSubmit={handleSubmit}
         saveButtonBarState={createCollectionOpts.status}
       />
     </>

From e268ddd3d2d51b5bdcaa3c553c60ec3d3a0fdb88 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 1 Sep 2020 13:47:56 +0200
Subject: [PATCH 06/12] Simpliify code

---
 .../CategoryCreatePage/CategoryCreatePage.tsx   | 17 +----------------
 .../ProductCreatePage/ProductCreatePage.tsx     | 12 +-----------
 2 files changed, 2 insertions(+), 27 deletions(-)

diff --git a/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx b/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx
index d646b821b..202abe404 100644
--- a/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx
+++ b/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx
@@ -49,26 +49,11 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
 }) => {
   const intl = useIntl();
   const {
-    isMetadataModified,
-    isPrivateMetadataModified,
     makeChangeHandler: makeMetadataChangeHandler
   } = useMetadataChangeTrigger();
 
-  const handleSubmit = (data: FormData) => {
-    const metadata = isMetadataModified ? data.metadata : undefined;
-    const privateMetadata = isPrivateMetadataModified
-      ? data.privateMetadata
-      : undefined;
-
-    onSubmit({
-      ...data,
-      metadata,
-      privateMetadata
-    });
-  };
-
   return (
-    <Form onSubmit={handleSubmit} initial={initialData} confirmLeave>
+    <Form onSubmit={onSubmit} initial={initialData} confirmLeave>
       {({ data, change, submit, hasChanged }) => {
         const changeMetadata = makeMetadataChangeHandler(change);
 
diff --git a/src/products/components/ProductCreatePage/ProductCreatePage.tsx b/src/products/components/ProductCreatePage/ProductCreatePage.tsx
index 0d729ce4d..5aeb02678 100644
--- a/src/products/components/ProductCreatePage/ProductCreatePage.tsx
+++ b/src/products/components/ProductCreatePage/ProductCreatePage.tsx
@@ -137,8 +137,6 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
   );
 
   const {
-    isMetadataModified,
-    isPrivateMetadataModified,
     makeChangeHandler: makeMetadataChangeHandler
   } = useMetadataChangeTrigger();
 
@@ -179,20 +177,12 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
   const collections = getChoices(collectionChoiceList);
   const productTypes = getChoices(productTypeChoiceList);
 
-  const handleSubmit = (data: FormData) => {
-    const metadata = isMetadataModified ? data.metadata : undefined;
-    const privateMetadata = isPrivateMetadataModified
-      ? data.privateMetadata
-      : undefined;
-
+  const handleSubmit = (data: FormData) =>
     onSubmit({
       ...data,
       attributes,
-      metadata,
-      privateMetadata,
       stocks
     });
-  };
 
   return (
     <Form onSubmit={handleSubmit} initial={initialData} confirmLeave>

From 4391e79a90b6ef52790ec18b5fe33905b6f5e174 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 1 Sep 2020 13:53:28 +0200
Subject: [PATCH 07/12] Add metadata editor to product type creator

---
 .../ProductTypeCreatePage.tsx                 | 109 ++++++++++--------
 src/productTypes/views/ProductTypeCreate.tsx  |  31 +++--
 2 files changed, 84 insertions(+), 56 deletions(-)

diff --git a/src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.tsx b/src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.tsx
index 93506b17e..79568ae1c 100644
--- a/src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.tsx
+++ b/src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.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 { ChangeEvent, FormChange } from "@saleor/hooks/useForm";
@@ -12,6 +13,7 @@ import { sectionNames } from "@saleor/intl";
 import { ProductTypeDetails_taxTypes } from "@saleor/productTypes/types/ProductTypeDetails";
 import { UserError } from "@saleor/types";
 import { WeightUnitsEnum } from "@saleor/types/globalTypes";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -19,7 +21,7 @@ import ProductTypeDetails from "../ProductTypeDetails/ProductTypeDetails";
 import ProductTypeShipping from "../ProductTypeShipping/ProductTypeShipping";
 import ProductTypeTaxes from "../ProductTypeTaxes/ProductTypeTaxes";
 
-export interface ProductTypeForm {
+export interface ProductTypeForm extends MetadataFormData {
   name: string;
   isShippingRequired: boolean;
   taxType: string;
@@ -39,7 +41,9 @@ export interface ProductTypeCreatePageProps {
 
 const formInitialData: ProductTypeForm = {
   isShippingRequired: false,
+  metadata: [],
   name: "",
+  privateMetadata: [],
   taxType: "",
   weight: 0
 };
@@ -68,56 +72,65 @@ const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
 }: ProductTypeCreatePageProps) => {
   const intl = useIntl();
   const [taxTypeDisplayName, setTaxTypeDisplayName] = useStateFromProps("");
+  const {
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
 
   return (
     <Form initial={formInitialData} onSubmit={onSubmit} confirmLeave>
-      {({ change, data, hasChanged, submit }) => (
-        <Container>
-          <AppHeader onBack={onBack}>
-            {intl.formatMessage(sectionNames.productTypes)}
-          </AppHeader>
-          <PageHeader title={pageTitle} />
-          <Grid>
-            <div>
-              <ProductTypeDetails
-                data={data}
-                disabled={disabled}
-                errors={errors}
-                onChange={change}
-              />
-              <CardSpacer />
-              <ProductTypeTaxes
-                disabled={disabled}
-                data={data}
-                taxTypes={taxTypes}
-                taxTypeDisplayName={taxTypeDisplayName}
-                onChange={event =>
-                  handleTaxTypeChange(
-                    event,
-                    taxTypes,
-                    change,
-                    setTaxTypeDisplayName
-                  )
-                }
-              />
-            </div>
-            <div>
-              <ProductTypeShipping
-                disabled={disabled}
-                data={data}
-                weightUnit={defaultWeightUnit}
-                onChange={change}
-              />
-            </div>
-          </Grid>
-          <SaveButtonBar
-            onCancel={onBack}
-            onSave={submit}
-            disabled={disabled || !hasChanged}
-            state={saveButtonBarState}
-          />
-        </Container>
-      )}
+      {({ change, data, hasChanged, submit }) => {
+        const changeMetadata = makeMetadataChangeHandler(change);
+
+        return (
+          <Container>
+            <AppHeader onBack={onBack}>
+              {intl.formatMessage(sectionNames.productTypes)}
+            </AppHeader>
+            <PageHeader title={pageTitle} />
+            <Grid>
+              <div>
+                <ProductTypeDetails
+                  data={data}
+                  disabled={disabled}
+                  errors={errors}
+                  onChange={change}
+                />
+                <CardSpacer />
+                <ProductTypeTaxes
+                  disabled={disabled}
+                  data={data}
+                  taxTypes={taxTypes}
+                  taxTypeDisplayName={taxTypeDisplayName}
+                  onChange={event =>
+                    handleTaxTypeChange(
+                      event,
+                      taxTypes,
+                      change,
+                      setTaxTypeDisplayName
+                    )
+                  }
+                />
+                <CardSpacer />
+                <Metadata data={data} onChange={changeMetadata} />
+              </div>
+              <div>
+                <ProductTypeShipping
+                  disabled={disabled}
+                  data={data}
+                  weightUnit={defaultWeightUnit}
+                  onChange={change}
+                />
+              </div>
+            </Grid>
+            <SaveButtonBar
+              onCancel={onBack}
+              onSave={submit}
+              disabled={disabled || !hasChanged}
+              state={saveButtonBarState}
+            />
+          </Container>
+        );
+      }}
     </Form>
   );
 };
diff --git a/src/productTypes/views/ProductTypeCreate.tsx b/src/productTypes/views/ProductTypeCreate.tsx
index 0c2c9a70a..80317b77a 100644
--- a/src/productTypes/views/ProductTypeCreate.tsx
+++ b/src/productTypes/views/ProductTypeCreate.tsx
@@ -1,6 +1,11 @@
 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";
 
@@ -17,6 +22,8 @@ export const ProductTypeCreate: React.FC = () => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
+  const [updateMetadata] = useMetadataUpdate({});
+  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
   const handleCreateSuccess = (updateData: ProductTypeCreateMutation) => {
     if (updateData.productTypeCreate.errors.length === 0) {
@@ -32,8 +39,8 @@ export const ProductTypeCreate: React.FC = () => {
   return (
     <TypedProductTypeCreateMutation onCompleted={handleCreateSuccess}>
       {(createProductType, createProductTypeOpts) => {
-        const handleCreate = (formData: ProductTypeForm) =>
-          createProductType({
+        const handleCreate = async (formData: ProductTypeForm) => {
+          const result = await createProductType({
             variables: {
               input: {
                 hasVariants: false,
@@ -44,6 +51,15 @@ export const ProductTypeCreate: React.FC = () => {
               }
             }
           });
+
+          return result.data?.productTypeCreate.productType?.id || null;
+        };
+        const handleSubmit = createMetadataCreateHandler(
+          handleCreate,
+          updateMetadata,
+          updatePrivateMetadata
+        );
+
         return (
           <TypedProductTypeCreateDataQuery displayLoader>
             {({ data, loading }) => (
@@ -58,19 +74,18 @@ export const ProductTypeCreate: React.FC = () => {
                 <ProductTypeCreatePage
                   defaultWeightUnit={maybe(() => data.shop.defaultWeightUnit)}
                   disabled={loading}
-                  errors={maybe(
-                    () => createProductTypeOpts.data.productTypeCreate.errors,
-                    []
-                  )}
+                  errors={
+                    createProductTypeOpts.data?.productTypeCreate.errors || []
+                  }
                   pageTitle={intl.formatMessage({
                     defaultMessage: "Create Product Type",
                     description: "header",
                     id: "productTypeCreatePageHeader"
                   })}
                   saveButtonBarState={createProductTypeOpts.status}
-                  taxTypes={maybe(() => data.taxTypes, [])}
+                  taxTypes={data?.taxTypes || []}
                   onBack={() => navigate(productTypeListUrl())}
-                  onSubmit={handleCreate}
+                  onSubmit={handleSubmit}
                 />
               </>
             )}

From ca78ecc19f5d6825a450e71851f0f5efef80f4c1 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 1 Sep 2020 16:16:50 +0200
Subject: [PATCH 08/12] Add metadata editor to attribute creator

---
 .../AttributePage/AttributePage.tsx           | 22 ++++----
 .../views/AttributeCreate/AttributeCreate.tsx | 53 +++++++++++++------
 2 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/src/attributes/components/AttributePage/AttributePage.tsx b/src/attributes/components/AttributePage/AttributePage.tsx
index c0195e699..2aa7aa0c9 100644
--- a/src/attributes/components/AttributePage/AttributePage.tsx
+++ b/src/attributes/components/AttributePage/AttributePage.tsx
@@ -82,9 +82,9 @@ const AttributePage: React.FC<AttributePageProps> = ({
           filterableInDashboard: true,
           filterableInStorefront: true,
           inputType: AttributeInputTypeEnum.DROPDOWN,
-          metadata: undefined,
+          metadata: [],
           name: "",
-          privateMetadata: undefined,
+          privateMetadata: [],
           slug: "",
           storefrontSearchPosition: "",
           valueRequired: true,
@@ -119,8 +119,14 @@ const AttributePage: React.FC<AttributePageProps> = ({
         };
 
   const handleSubmit = (data: AttributePageFormData) => {
-    const metadata = isMetadataModified ? data.metadata : undefined;
-    const privateMetadata = isPrivateMetadataModified
+    const metadata = !attribute
+      ? data.metadata
+      : isMetadataModified
+      ? data.metadata
+      : undefined;
+    const privateMetadata = !attribute
+      ? data.privateMetadata
+      : isPrivateMetadataModified
       ? data.privateMetadata
       : undefined;
 
@@ -170,12 +176,8 @@ const AttributePage: React.FC<AttributePageProps> = ({
                   onValueReorder={onValueReorder}
                   onValueUpdate={onValueUpdate}
                 />
-                {!!attribute && (
-                  <>
-                    <CardSpacer />
-                    <Metadata data={data} onChange={changeMetadata} />
-                  </>
-                )}
+                <CardSpacer />
+                <Metadata data={data} onChange={changeMetadata} />
               </div>
               <div>
                 <AttributeProperties
diff --git a/src/attributes/views/AttributeCreate/AttributeCreate.tsx b/src/attributes/views/AttributeCreate/AttributeCreate.tsx
index ef09d65a0..36be29c40 100644
--- a/src/attributes/views/AttributeCreate/AttributeCreate.tsx
+++ b/src/attributes/views/AttributeCreate/AttributeCreate.tsx
@@ -5,6 +5,7 @@ import { getStringOrPlaceholder } from "@saleor/misc";
 import { ReorderEvent } from "@saleor/types";
 import { ProductErrorCode } from "@saleor/types/globalTypes";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
+import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
 import {
   add,
   isSelected,
@@ -12,11 +13,17 @@ import {
   remove,
   updateAtIndex
 } from "@saleor/utils/lists";
+import {
+  useMetadataUpdate,
+  usePrivateMetadataUpdate
+} from "@saleor/utils/metadata/updateMetadata";
 import React from "react";
 import { useIntl } from "react-intl";
 import slugify from "slugify";
 
-import AttributePage from "../../components/AttributePage";
+import AttributePage, {
+  AttributePageFormData
+} from "../../components/AttributePage";
 import AttributeValueDeleteDialog from "../../components/AttributeValueDeleteDialog";
 import AttributeValueEditDialog, {
   AttributeValueEditDialogFormData
@@ -72,6 +79,8 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
       }
     }
   });
+  const [updateMetadata] = useMetadataUpdate({});
+  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
   const id = params.id ? parseInt(params.id, 0) : undefined;
 
@@ -105,6 +114,31 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
   const handleValueReorder = ({ newIndex, oldIndex }: ReorderEvent) =>
     setValues(move(values[oldIndex], values, areValuesEqual, newIndex));
 
+  const handleCreate = async (data: AttributePageFormData) => {
+    const input = {
+      ...data,
+      metadata: undefined,
+      privateMetadata: undefined,
+      storefrontSearchPosition: parseInt(data.storefrontSearchPosition, 0),
+      values: values.map(value => ({
+        name: value.name
+      }))
+    };
+
+    const result = await attributeCreate({
+      variables: {
+        input
+      }
+    });
+
+    return result.data.attributeCreate?.attribute?.id || null;
+  };
+  const handleSubmit = createMetadataCreateHandler(
+    handleCreate,
+    updateMetadata,
+    updatePrivateMetadata
+  );
+
   return (
     <>
       <AttributePage
@@ -113,22 +147,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
         errors={attributeCreateOpts.data?.attributeCreate.errors || []}
         onBack={() => navigate(attributeListUrl())}
         onDelete={undefined}
-        onSubmit={input =>
-          attributeCreate({
-            variables: {
-              input: {
-                ...input,
-                storefrontSearchPosition: parseInt(
-                  input.storefrontSearchPosition,
-                  0
-                ),
-                values: values.map(value => ({
-                  name: value.name
-                }))
-              }
-            }
-          })
-        }
+        onSubmit={handleSubmit}
         onValueAdd={() => openModal("add-value")}
         onValueDelete={id =>
           openModal("remove-value", {

From cb4e2fd050fefa0c4377325fba8395d9514a1e4f Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 1 Sep 2020 16:27:35 +0200
Subject: [PATCH 09/12] Add metadata editor to variant creator

---
 .../ProductVariantCreatePage.tsx              | 12 +++++++++++-
 src/products/views/ProductVariantCreate.tsx   | 19 +++++++++++++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
index 87b43bf85..ac79fad42 100644
--- a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
+++ b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.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 { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
@@ -13,6 +14,7 @@ import useFormset, {
 } from "@saleor/hooks/useFormset";
 import { getVariantAttributeInputFromProduct } from "@saleor/products/utils/data";
 import { SearchWarehouses_search_edges_node } from "@saleor/searches/types/SearchWarehouses";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -26,7 +28,7 @@ import ProductVariantAttributes, {
 import ProductVariantNavigation from "../ProductVariantNavigation";
 import ProductVariantPrice from "../ProductVariantPrice";
 
-interface ProductVariantCreatePageFormData {
+interface ProductVariantCreatePageFormData extends MetadataFormData {
   costPrice: string;
   images: string[];
   price: string;
@@ -83,11 +85,16 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
     data: stocks,
     remove: removeStock
   } = useFormset<null, string>([]);
+  const {
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
 
   const initialForm: ProductVariantCreatePageFormData = {
     costPrice: "",
     images: maybe(() => product.images.map(image => image.id)),
+    metadata: [],
     price: "",
+    privateMetadata: [],
     quantity: "0",
     sku: "",
     trackInventory: true,
@@ -108,6 +115,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
           changeAttributeData(id, value);
           triggerChange();
         };
+        const changeMetadata = makeMetadataChangeHandler(change);
 
         return (
           <Container>
@@ -176,6 +184,8 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
                     removeStock(id);
                   }}
                 />
+                <CardSpacer />
+                <Metadata data={data} onChange={changeMetadata} />
               </div>
             </Grid>
             <SaveButtonBar
diff --git a/src/products/views/ProductVariantCreate.tsx b/src/products/views/ProductVariantCreate.tsx
index 36b821eff..bb52bf67d 100644
--- a/src/products/views/ProductVariantCreate.tsx
+++ b/src/products/views/ProductVariantCreate.tsx
@@ -4,6 +4,11 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import useShop from "@saleor/hooks/useShop";
 import { commonMessages } from "@saleor/intl";
+import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
+import {
+  useMetadataUpdate,
+  usePrivateMetadataUpdate
+} from "@saleor/utils/metadata/updateMetadata";
 import { useWarehouseList } from "@saleor/warehouses/queries";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -55,6 +60,8 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
       }
     }
   });
+  const [updateMetadata] = useMetadataUpdate({});
+  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
   const product = data?.product;
 
@@ -63,8 +70,8 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
   }
 
   const handleBack = () => navigate(productUrl(productId));
-  const handleSubmit = (formData: ProductVariantCreatePageSubmitData) =>
-    variantCreate({
+  const handleCreate = async (formData: ProductVariantCreatePageSubmitData) => {
+    const result = await variantCreate({
       variables: {
         input: {
           attributes: formData.attributes
@@ -86,6 +93,14 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
         }
       }
     });
+
+    return result.data.productVariantCreate?.productVariant?.id || null;
+  };
+  const handleSubmit = createMetadataCreateHandler(
+    handleCreate,
+    updateMetadata,
+    updatePrivateMetadata
+  );
   const handleVariantClick = (id: string) =>
     navigate(productVariantEditUrl(productId, id));
 

From 6181b1139c22a7c1429be078ffbdaed943db03c9 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 1 Sep 2020 17:31:13 +0200
Subject: [PATCH 10/12] Update snapshots

---
 .../__snapshots__/Stories.test.ts.snap        | 3685 +++++++++++++----
 1 file changed, 2906 insertions(+), 779 deletions(-)

diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index c58c34259..50e66badb 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -21058,6 +21058,134 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
               </table>
             </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-emptyContainer-id"
+            >
+              <span
+                class="isvg pending Metadata-emptyImage-id"
+              />
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no 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
+            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
@@ -23850,6 +23978,80 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
               </table>
             </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
@@ -31081,6 +31283,134 @@ 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-emptyContainer-id"
+          >
+            <span
+              class="isvg pending Metadata-emptyImage-id"
+            />
+            <div
+              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            >
+              There is no 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
+          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>
   </form>
@@ -31536,6 +31866,134 @@ 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-emptyContainer-id"
+          >
+            <span
+              class="isvg pending Metadata-emptyImage-id"
+            />
+            <div
+              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            >
+              There is no 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
+          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>
   </form>
@@ -32001,6 +32459,134 @@ 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-emptyContainer-id"
+          >
+            <span
+              class="isvg pending Metadata-emptyImage-id"
+            />
+            <div
+              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+            >
+              There is no 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
+          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>
   </form>
@@ -49811,193 +50397,293 @@ Ctrl + K"
               </div>
             </div>
           </div>
-        </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="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+              class="CardTitle-root-id"
             >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Metadata
+              </span>
               <div
-                class="CardTitle-root-id"
+                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 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="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+                  class="MuiButton-label-id"
                 >
-                  Availability
+                  Add Field
                 </span>
-                <div
-                  class="CardTitle-toolbar-id"
-                />
+              </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="CardTitle-children-id"
-              />
-              <hr
-                class="CardTitle-hr-id"
-              />
+                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
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Visibility
+              </span>
               <div
-                class="MuiCardContent-root-id"
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
               >
                 <div
-                  class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+                  aria-label="isPublished"
+                  class="MuiFormGroup-root-id"
+                  role="radiogroup"
                 >
-                  <div
-                    class="CardTitle-root-id"
+                  <label
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
-                      class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+                      aria-disabled="false"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                     >
-                      Visibility
-                    </span>
-                    <div
-                      class="CardTitle-toolbar-id"
-                    />
-                  </div>
-                  <div
-                    class="CardTitle-children-id"
-                  />
-                  <hr
-                    class="CardTitle-hr-id"
-                  />
-                  <div
-                    class="MuiCardContent-root-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id RadioSwitchField-formControl-id"
-                    >
-                      <div
-                        aria-label="isPublished"
-                        class="MuiFormGroup-root-id"
-                        role="radiogroup"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <label
-                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
+                        <input
+                          class="PrivateSwitchBase-input-id"
+                          name="isPublished"
+                          type="radio"
+                          value="true"
+                        />
+                        <div
+                          class="PrivateRadioButtonIcon-root-id"
                         >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
                           >
-                            <span
-                              class="MuiIconButton-label-id"
-                            >
-                              <input
-                                class="PrivateSwitchBase-input-id"
-                                name="isPublished"
-                                type="radio"
-                                value="true"
-                              />
-                              <div
-                                class="PrivateRadioButtonIcon-root-id"
-                              >
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  role="presentation"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                                  />
-                                </svg>
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                                  focusable="false"
-                                  role="presentation"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                                  />
-                                </svg>
-                              </div>
-                            </span>
-                          </span>
-                          <span
-                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                          >
-                            <p
-                              class="VisibilityCard-label-id"
-                            >
-                              Visible
-                            </p>
-                            <span
-                              class="VisibilityCard-secondLabel-id"
+                            <path
+                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                             />
-                          </span>
-                        </label>
-                        <label
-                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
-                        >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
+                          </svg>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
                           >
-                            <span
-                              class="MuiIconButton-label-id"
-                            >
-                              <input
-                                checked=""
-                                class="PrivateSwitchBase-input-id"
-                                name="isPublished"
-                                type="radio"
-                                value="false"
-                              />
-                              <div
-                                class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
-                              >
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  role="presentation"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                                  />
-                                </svg>
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                                  focusable="false"
-                                  role="presentation"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                                  />
-                                </svg>
-                              </div>
-                            </span>
-                          </span>
-                          <span
-                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                          >
-                            <p
-                              class="VisibilityCard-label-id"
-                            >
-                              Hidden
-                            </p>
-                            <span
-                              class="VisibilityCard-secondLabel-id"
+                            <path
+                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                             />
-                          </span>
-                        </label>
-                      </div>
-                    </div>
-                    <div
-                      class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                          </svg>
+                        </div>
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
-                      Set publication date
-                    </div>
-                    <div
-                      class="VisibilityCard-children-id"
-                    />
-                  </div>
+                      <p
+                        class="VisibilityCard-label-id"
+                      >
+                        Visible
+                      </p>
+                      <span
+                        class="VisibilityCard-secondLabel-id"
+                      />
+                    </span>
+                  </label>
+                  <label
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <input
+                          checked=""
+                          class="PrivateSwitchBase-input-id"
+                          name="isPublished"
+                          type="radio"
+                          value="false"
+                        />
+                        <div
+                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                            />
+                          </svg>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
+                    >
+                      <p
+                        class="VisibilityCard-label-id"
+                      >
+                        Hidden
+                      </p>
+                      <span
+                        class="VisibilityCard-secondLabel-id"
+                      />
+                    </span>
+                  </label>
                 </div>
               </div>
+              <div
+                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+              >
+                Set publication date
+              </div>
+              <div
+                class="VisibilityCard-children-id"
+              />
             </div>
           </div>
         </div>
@@ -50563,199 +51249,299 @@ Ctrl + K"
               </div>
             </div>
           </div>
-        </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="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+              class="CardTitle-root-id"
             >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Metadata
+              </span>
               <div
-                class="CardTitle-root-id"
+                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 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="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+                  class="MuiButton-label-id"
                 >
-                  Availability
+                  Add Field
                 </span>
-                <div
-                  class="CardTitle-toolbar-id"
-                />
+              </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="CardTitle-children-id"
-              />
-              <hr
-                class="CardTitle-hr-id"
-              />
+                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
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Visibility
+              </span>
               <div
-                class="MuiCardContent-root-id"
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
               >
                 <div
-                  class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+                  aria-label="isPublished"
+                  class="MuiFormGroup-root-id"
+                  role="radiogroup"
                 >
-                  <div
-                    class="CardTitle-root-id"
+                  <label
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
                   >
                     <span
-                      class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+                      aria-disabled="false"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
                     >
-                      Visibility
-                    </span>
-                    <div
-                      class="CardTitle-toolbar-id"
-                    />
-                  </div>
-                  <div
-                    class="CardTitle-children-id"
-                  />
-                  <hr
-                    class="CardTitle-hr-id"
-                  />
-                  <div
-                    class="MuiCardContent-root-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id RadioSwitchField-formControl-id"
-                    >
-                      <div
-                        aria-label="isPublished"
-                        class="MuiFormGroup-root-id"
-                        role="radiogroup"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <label
-                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
+                        <input
+                          class="PrivateSwitchBase-input-id"
+                          name="isPublished"
+                          type="radio"
+                          value="true"
+                        />
+                        <div
+                          class="PrivateRadioButtonIcon-root-id"
                         >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
                           >
-                            <span
-                              class="MuiIconButton-label-id"
-                            >
-                              <input
-                                class="PrivateSwitchBase-input-id"
-                                name="isPublished"
-                                type="radio"
-                                value="true"
-                              />
-                              <div
-                                class="PrivateRadioButtonIcon-root-id"
-                              >
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  role="presentation"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                                  />
-                                </svg>
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                                  focusable="false"
-                                  role="presentation"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                                  />
-                                </svg>
-                              </div>
-                            </span>
-                          </span>
-                          <span
-                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                          >
-                            <p
-                              class="VisibilityCard-label-id"
-                            >
-                              Visible
-                            </p>
-                            <span
-                              class="VisibilityCard-secondLabel-id"
+                            <path
+                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                             />
-                          </span>
-                        </label>
-                        <label
-                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
-                        >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
+                          </svg>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
                           >
-                            <span
-                              class="MuiIconButton-label-id"
-                            >
-                              <input
-                                checked=""
-                                class="PrivateSwitchBase-input-id"
-                                name="isPublished"
-                                type="radio"
-                                value="false"
-                              />
-                              <div
-                                class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
-                              >
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  role="presentation"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                                  />
-                                </svg>
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                                  focusable="false"
-                                  role="presentation"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                                  />
-                                </svg>
-                              </div>
-                            </span>
-                          </span>
-                          <span
-                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                          >
-                            <p
-                              class="VisibilityCard-label-id"
-                            >
-                              Hidden
-                            </p>
-                            <span
-                              class="VisibilityCard-secondLabel-id"
+                            <path
+                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                             />
-                          </span>
-                        </label>
-                      </div>
-                    </div>
-                    <div
-                      class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                          </svg>
+                        </div>
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                     >
-                      Set publication date
-                    </div>
-                    <div
-                      class="FormSpacer-spacer-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
-                    />
-                    <div
-                      class="VisibilityCard-children-id"
-                    />
-                  </div>
+                      <p
+                        class="VisibilityCard-label-id"
+                      >
+                        Visible
+                      </p>
+                      <span
+                        class="VisibilityCard-secondLabel-id"
+                      />
+                    </span>
+                  </label>
+                  <label
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <input
+                          checked=""
+                          class="PrivateSwitchBase-input-id"
+                          name="isPublished"
+                          type="radio"
+                          value="false"
+                        />
+                        <div
+                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                            />
+                          </svg>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
+                    >
+                      <p
+                        class="VisibilityCard-label-id"
+                      >
+                        Hidden
+                      </p>
+                      <span
+                        class="VisibilityCard-secondLabel-id"
+                      />
+                    </span>
+                  </label>
                 </div>
               </div>
+              <div
+                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+              >
+                Set publication date
+              </div>
+              <div
+                class="FormSpacer-spacer-id"
+              />
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
+              />
+              <div
+                class="VisibilityCard-children-id"
+              />
             </div>
           </div>
         </div>
@@ -51312,197 +52098,297 @@ Ctrl + K"
               </div>
             </div>
           </div>
-        </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="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+              class="CardTitle-root-id"
             >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Metadata
+              </span>
               <div
-                class="CardTitle-root-id"
+                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 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="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+                  class="MuiButton-label-id"
                 >
-                  Availability
+                  Add Field
                 </span>
-                <div
-                  class="CardTitle-toolbar-id"
-                />
+              </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="CardTitle-children-id"
-              />
-              <hr
-                class="CardTitle-hr-id"
-              />
+                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
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Visibility
+              </span>
               <div
-                class="MuiCardContent-root-id"
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
               >
                 <div
-                  class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+                  aria-label="isPublished"
+                  class="MuiFormGroup-root-id"
+                  role="radiogroup"
                 >
-                  <div
-                    class="CardTitle-root-id"
+                  <label
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
                   >
                     <span
-                      class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+                      aria-disabled="true"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      tabindex="-1"
                     >
-                      Visibility
-                    </span>
-                    <div
-                      class="CardTitle-toolbar-id"
-                    />
-                  </div>
-                  <div
-                    class="CardTitle-children-id"
-                  />
-                  <hr
-                    class="CardTitle-hr-id"
-                  />
-                  <div
-                    class="MuiCardContent-root-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id RadioSwitchField-formControl-id"
-                    >
-                      <div
-                        aria-label="isPublished"
-                        class="MuiFormGroup-root-id"
-                        role="radiogroup"
+                      <span
+                        class="MuiIconButton-label-id"
                       >
-                        <label
-                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
+                        <input
+                          class="PrivateSwitchBase-input-id"
+                          disabled=""
+                          name="isPublished"
+                          type="radio"
+                          value="true"
+                        />
+                        <div
+                          class="PrivateRadioButtonIcon-root-id"
                         >
-                          <span
-                            aria-disabled="true"
-                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                            tabindex="-1"
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
                           >
-                            <span
-                              class="MuiIconButton-label-id"
-                            >
-                              <input
-                                class="PrivateSwitchBase-input-id"
-                                disabled=""
-                                name="isPublished"
-                                type="radio"
-                                value="true"
-                              />
-                              <div
-                                class="PrivateRadioButtonIcon-root-id"
-                              >
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  role="presentation"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                                  />
-                                </svg>
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                                  focusable="false"
-                                  role="presentation"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                                  />
-                                </svg>
-                              </div>
-                            </span>
-                          </span>
-                          <span
-                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                          >
-                            <p
-                              class="VisibilityCard-label-id"
-                            >
-                              Visible
-                            </p>
-                            <span
-                              class="VisibilityCard-secondLabel-id"
+                            <path
+                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                             />
-                          </span>
-                        </label>
-                        <label
-                          class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
-                        >
-                          <span
-                            aria-disabled="true"
-                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                            tabindex="-1"
+                          </svg>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
                           >
-                            <span
-                              class="MuiIconButton-label-id"
-                            >
-                              <input
-                                checked=""
-                                class="PrivateSwitchBase-input-id"
-                                disabled=""
-                                name="isPublished"
-                                type="radio"
-                                value="false"
-                              />
-                              <div
-                                class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
-                              >
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  role="presentation"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                                  />
-                                </svg>
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                                  focusable="false"
-                                  role="presentation"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                                  />
-                                </svg>
-                              </div>
-                            </span>
-                          </span>
-                          <span
-                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                          >
-                            <p
-                              class="VisibilityCard-label-id"
-                            >
-                              Hidden
-                            </p>
-                            <span
-                              class="VisibilityCard-secondLabel-id"
+                            <path
+                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                             />
-                          </span>
-                        </label>
-                      </div>
-                    </div>
-                    <div
-                      class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                          </svg>
+                        </div>
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                     >
-                      Set publication date
-                    </div>
-                    <div
-                      class="VisibilityCard-children-id"
-                    />
-                  </div>
+                      <p
+                        class="VisibilityCard-label-id"
+                      >
+                        Visible
+                      </p>
+                      <span
+                        class="VisibilityCard-secondLabel-id"
+                      />
+                    </span>
+                  </label>
+                  <label
+                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
+                  >
+                    <span
+                      aria-disabled="true"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      tabindex="-1"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <input
+                          checked=""
+                          class="PrivateSwitchBase-input-id"
+                          disabled=""
+                          name="isPublished"
+                          type="radio"
+                          value="false"
+                        />
+                        <div
+                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                            />
+                          </svg>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
+                    >
+                      <p
+                        class="VisibilityCard-label-id"
+                      >
+                        Hidden
+                      </p>
+                      <span
+                        class="VisibilityCard-secondLabel-id"
+                      />
+                    </span>
+                  </label>
                 </div>
               </div>
+              <div
+                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+              >
+                Set publication date
+              </div>
+              <div
+                class="VisibilityCard-children-id"
+              />
             </div>
           </div>
         </div>
@@ -118416,6 +119302,134 @@ exports[`Storyshots Views / Product types / Create product type default 1`] = `
               </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-emptyContainer-id"
+            >
+              <span
+                class="isvg pending Metadata-emptyImage-id"
+              />
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no 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
+            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
@@ -118673,6 +119687,134 @@ exports[`Storyshots Views / Product types / Create product type form errors 1`]
               </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-emptyContainer-id"
+            >
+              <span
+                class="isvg pending Metadata-emptyImage-id"
+              />
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no 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
+            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
@@ -118932,6 +120074,134 @@ exports[`Storyshots Views / Product types / Create product type loading 1`] = `
               </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-emptyContainer-id"
+            >
+              <span
+                class="isvg pending Metadata-emptyImage-id"
+              />
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no 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
+            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
@@ -130157,6 +131427,134 @@ 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-emptyContainer-id"
+            >
+              <span
+                class="isvg pending Metadata-emptyImage-id"
+              />
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no 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
+            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
@@ -131019,6 +132417,134 @@ 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-emptyContainer-id"
+            >
+              <span
+                class="isvg pending Metadata-emptyImage-id"
+              />
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no 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
+            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
@@ -131880,6 +133406,134 @@ 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-emptyContainer-id"
+            >
+              <span
+                class="isvg pending Metadata-emptyImage-id"
+              />
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no 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
+            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
@@ -132922,6 +134576,134 @@ exports[`Storyshots Views / Products / Create product variant add first variant
               </tbody>
             </table>
           </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-emptyContainer-id"
+            >
+              <span
+                class="isvg pending Metadata-emptyImage-id"
+              />
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no 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
+            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>
@@ -133614,6 +135396,134 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
               </tbody>
             </table>
           </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-emptyContainer-id"
+            >
+              <span
+                class="isvg pending Metadata-emptyImage-id"
+              />
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no 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
+            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>
@@ -134234,6 +136144,134 @@ exports[`Storyshots Views / Products / Create product variant when loading data
               </tbody>
             </table>
           </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-emptyContainer-id"
+            >
+              <span
+                class="isvg pending Metadata-emptyImage-id"
+              />
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no 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
+            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>
@@ -134939,6 +136977,134 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
               </tbody>
             </table>
           </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-emptyContainer-id"
+            >
+              <span
+                class="isvg pending Metadata-emptyImage-id"
+              />
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no 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
+            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>
@@ -150576,289 +152742,6 @@ Ctrl + K"
               </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="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
@@ -158747,6 +160630,250 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                     </button>
                   </td>
                 </tr>
+                <tr
+                  class="MuiTableRow-root-id"
+                >
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                    colspan="2"
+                  >
+                    <div
+                      class="MuiTypography-root-id MuiTypography-body2-id"
+                    >
+                      Assign Warehouse
+                    </div>
+                  </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colAction-id"
+                  >
+                    <div>
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        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="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </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

From cddb73d0caf2ee7d14932e82de67ad7ce95915d9 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 1 Sep 2020 17:42:25 +0200
Subject: [PATCH 11/12] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e76500be7..77c7478e7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Use hooks instead of containers with render props in product mutations - #667 by @dominik-zeglen
 - Add apps and permission groups to navigator - #678 by @dominik-zeglen
 - Add metadata - #670 by @dominik-zeglen
+- Add metadata editor to creator views - #684 by @dominik-zeglen
 
 ## 2.10.1
 

From 5ef0da5b1e75d08170544dd28ecc27680398ec1c Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Wed, 2 Sep 2020 12:12:32 +0200
Subject: [PATCH 12/12] Simpify logic

---
 .../components/AttributePage/AttributePage.tsx   | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/attributes/components/AttributePage/AttributePage.tsx b/src/attributes/components/AttributePage/AttributePage.tsx
index 2aa7aa0c9..9fe12bdb0 100644
--- a/src/attributes/components/AttributePage/AttributePage.tsx
+++ b/src/attributes/components/AttributePage/AttributePage.tsx
@@ -119,16 +119,12 @@ const AttributePage: React.FC<AttributePageProps> = ({
         };
 
   const handleSubmit = (data: AttributePageFormData) => {
-    const metadata = !attribute
-      ? data.metadata
-      : isMetadataModified
-      ? data.metadata
-      : undefined;
-    const privateMetadata = !attribute
-      ? data.privateMetadata
-      : isPrivateMetadataModified
-      ? data.privateMetadata
-      : undefined;
+    const metadata =
+      !attribute || isMetadataModified ? data.metadata : undefined;
+    const privateMetadata =
+      !attribute || isPrivateMetadataModified
+        ? data.privateMetadata
+        : undefined;
 
     onSubmit({
       ...data,