feat(dashboard,medusa): Add updated Metadata Form (#8084)

**What**
- Adds new Metadata form component.
- Adds the Metadata section as an option to the Page layouts

<img width="576" alt="Skærmbillede 2024-07-11 kl  11 34 06" src="https://github.com/medusajs/medusa/assets/45367945/417810ee-26e2-4c8a-86e3-58ef327054af">
<img width="580" alt="Skærmbillede 2024-07-11 kl  11 34 33" src="https://github.com/medusajs/medusa/assets/45367945/437a5e01-01e2-4ff7-8c7e-42a86d1ce2b3">


**Note**
- When Metadata contains non-primitive data, we disable those rows, and show a placeholder value, a tooltip and an alert describing that the row can be edited through the API. I want to add a JSON editor to allow editing these things in admin, but awaiting approval on that.
- This PR only adds the new form to a couple of pages, to keep the PR light, especially since metadata is not implemented correctly in all validators so also needs some changes to the core. This still show some examples of how its used with the new Page layout components. Will follow up with more pages in future PRs. 
- We try to convert the inputs to the best fitting primitive, so if a user types "true" then we save the value as a boolean, "130" as number, "testing" as a string, etc.

packages/admin-next/dashboard/src/lib/metadata.ts

@@ -1,84 +0,0 @@
-export type MetadataField = {
-  key: string
-  value: string
-  /**
-   * Is the field provided as initial data
-   */
-  isInitial?: boolean
-  /**
-   * Whether the row was deleted
-   */
-  isDeleted?: boolean
-  /**
-   * True for initial values that are not primitives
-   */
-  isIgnored?: boolean
-}
-
-const isPrimitive = (value: any): boolean => {
-  return (
-    value === null ||
-    value === undefined ||
-    typeof value === "string" ||
-    typeof value === "number" ||
-    typeof value === "boolean"
-  )
-}
-
-/**
- * Convert metadata property to an array of form filed values.
- */
-export const metadataToFormValues = (
-  metadata?: Record<string, any> | null
-): MetadataField[] => {
-  const data: MetadataField[] = []
-
-  if (metadata) {
-    Object.entries(metadata).forEach(([key, value]) => {
-      data.push({
-        key,
-        value: value as string,
-        isInitial: true,
-        isIgnored: !isPrimitive(value),
-        isDeleted: false,
-      })
-    })
-  }
-
-  // DEFAULT field for adding a new metadata record
-  // it's added here so it's registered as a default value
-  data.push({
-    key: "",
-    value: "",
-    isInitial: false,
-    isIgnored: false,
-    isDeleted: false,
-  })
-
-  return data
-}
-
-/**
- * Convert a form fields array to a metadata object
- */
-export const formValuesToMetadata = (
-  data: MetadataField[]
-): Record<string, unknown> => {
-  return data.reduce((acc, { key, value, isDeleted, isIgnored, isInitial }) => {
-    if (isIgnored) {
-      acc[key] = value
-      return acc
-    }
-
-    if (isDeleted && isInitial) {
-      acc[key] = ""
-      return acc
-    }
-
-    if (key) {
-      acc[key] = value // TODO: since these are primitives should we parse strings to their primitive format e.g. "123" -> 123 , "true" -> true
-    }
-
-    return acc
-  }, {} as Record<string, unknown>)
-}