From 54b4e38f9645c09dbee07803768d5bbf35b2ce7b Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Tue, 25 Jul 2023 10:32:47 -0400
Subject: [PATCH 01/25] fix(metadata): Disable updates to metadata

---
 .../metadata-instance-editor/Instance.js      |   52 +-
 .../__tests__/Instance.test.js                |   58 +-
 .../__snapshots__/Instance.test.js.snap       | 1038 +++++++++++++++--
 3 files changed, 1047 insertions(+), 101 deletions(-)

diff --git a/src/features/metadata-instance-editor/Instance.js b/src/features/metadata-instance-editor/Instance.js
index 017e53fa05..d797f2897e 100644
--- a/src/features/metadata-instance-editor/Instance.js
+++ b/src/features/metadata-instance-editor/Instance.js
@@ -209,6 +209,8 @@ class Instance extends React.PureComponent<Props, State> {
             onSave,
         }: Props = this.props;
         const { data: currentData, errors, isCascadingEnabled, isCascadingOverwritten }: State = this.state;
+        const hasCascadePolicy = !!cascadePolicy?.id;
+        const hasCascadePermission = !hasCascadePolicy || (hasCascadePolicy && isCascadingPolicyApplicable);
 
         if (!this.isEditing() || !isDirty || !onSave || Object.keys(errors).length) {
             return;
@@ -222,7 +224,7 @@ class Instance extends React.PureComponent<Props, State> {
         onSave(
             id,
             this.createJSONPatch(currentData, originalData),
-            isCascadingPolicyApplicable
+            hasCascadePermission
                 ? {
                       canEdit: cascadePolicy ? cascadePolicy.canEdit : false,
                       id: cascadePolicy ? cascadePolicy.id : undefined,
@@ -351,10 +353,10 @@ class Instance extends React.PureComponent<Props, State> {
      * @return {Object} - react title element
      */
     getTitle(): React.Node {
-        const { cascadePolicy = {}, hasError, isCascadingPolicyApplicable, template }: Props = this.props;
+        const { cascadePolicy = {}, hasError, template }: Props = this.props;
         const isProperties = template.templateKey === TEMPLATE_CUSTOM_PROPERTIES;
 
-        const type = isCascadingPolicyApplicable && cascadePolicy.id ? 'cascade' : 'default';
+        const type = cascadePolicy?.id ? 'cascade' : 'default';
 
         return (
             <span className="metadata-instance-editor-instance-title">
@@ -549,10 +551,10 @@ class Instance extends React.PureComponent<Props, State> {
         return this.canEdit() && isEditing;
     }
 
-    renderEditButton = () => {
+    renderEditButton = (canEditInstance: boolean) => {
         const { intl, isDirty }: Props = this.props;
         const { isBusy }: State = this.state;
-        const canEdit = this.canEdit();
+        const canEdit = this.canEdit() && canEditInstance;
         const isEditing = this.isEditing();
         const editClassName = classNames('metadata-instance-editor-instance-edit', {
             'metadata-instance-editor-instance-is-editing': isEditing,
@@ -579,7 +581,13 @@ class Instance extends React.PureComponent<Props, State> {
     };
 
     render() {
-        const { cascadePolicy = {}, isDirty, isCascadingPolicyApplicable, isOpen, template }: Props = this.props;
+        const {
+            cascadePolicy = {},
+            isDirty,
+            isCascadingPolicyApplicable = false, // does user have cascading policy permissions
+            isOpen,
+            template,
+        }: Props = this.props;
         const { fields = [] } = template;
         const {
             data,
@@ -592,6 +600,9 @@ class Instance extends React.PureComponent<Props, State> {
         }: State = this.state;
         const isProperties = template.templateKey === TEMPLATE_CUSTOM_PROPERTIES;
         const isEditing = this.isEditing();
+        const hasCascadePolicy = !!cascadePolicy?.id;
+        const hasCascadePermission = !hasCascadePolicy || (hasCascadePolicy && isCascadingPolicyApplicable);
+        const canEditInstance = !!(isEditing && hasCascadePermission);
 
         if (!template || isHidden(template)) {
             return null;
@@ -608,7 +619,7 @@ class Instance extends React.PureComponent<Props, State> {
                         [RESIN_TAG_TARGET]: 'metadata-card',
                     }}
                     hasStickyHeader
-                    headerActionItems={this.renderEditButton()}
+                    headerActionItems={this.renderEditButton(hasCascadePermission)}
                     isBordered
                     isOpen={isOpen}
                     title={this.getTitle()}
@@ -626,27 +637,26 @@ class Instance extends React.PureComponent<Props, State> {
                         <LoadingIndicatorWrapper isLoading={isBusy}>
                             <Form onValidSubmit={isDirty ? this.onSave : noop}>
                                 <div className="metadata-instance-editor-instance">
-                                    {isCascadingPolicyApplicable && (
-                                        <CascadePolicy
-                                            canEdit={isEditing && !!cascadePolicy.canEdit}
-                                            isCascadingEnabled={isCascadingEnabled}
-                                            isCascadingOverwritten={isCascadingOverwritten}
-                                            isCustomMetadata={isProperties}
-                                            onCascadeModeChange={this.onCascadeModeChange}
-                                            onCascadeToggle={this.onCascadeToggle}
-                                            shouldShowCascadeOptions={shouldShowCascadeOptions}
-                                        />
-                                    )}
+                                    <CascadePolicy
+                                        canEdit={canEditInstance}
+                                        isCascadingEnabled={isCascadingEnabled}
+                                        isCascadingOverwritten={isCascadingOverwritten}
+                                        isCustomMetadata={isProperties}
+                                        onCascadeModeChange={this.onCascadeModeChange}
+                                        onCascadeToggle={this.onCascadeToggle}
+                                        shouldShowCascadeOptions={shouldShowCascadeOptions}
+                                    />
+
                                     {isProperties ? (
                                         <CustomInstance
-                                            canEdit={isEditing}
+                                            canEdit={canEditInstance}
                                             data={data}
                                             onFieldChange={this.onFieldChange}
                                             onFieldRemove={this.onFieldRemove}
                                         />
                                     ) : (
                                         <TemplatedInstance
-                                            canEdit={isEditing}
+                                            canEdit={canEditInstance}
                                             data={data}
                                             errors={errors}
                                             onFieldChange={this.onFieldChange}
@@ -655,7 +665,7 @@ class Instance extends React.PureComponent<Props, State> {
                                         />
                                     )}
                                 </div>
-                                {isEditing && (
+                                {canEditInstance && (
                                     <Footer
                                         onCancel={this.onCancel}
                                         onRemove={this.onConfirmRemove}
diff --git a/src/features/metadata-instance-editor/__tests__/Instance.test.js b/src/features/metadata-instance-editor/__tests__/Instance.test.js
index d7d08fdfca..3035d96b8f 100644
--- a/src/features/metadata-instance-editor/__tests__/Instance.test.js
+++ b/src/features/metadata-instance-editor/__tests__/Instance.test.js
@@ -164,65 +164,101 @@ describe('features/metadata-instance-editor/fields/Instance', () => {
         expect(wrapper).toMatchSnapshot();
     });
 
-    test('should correctly render templated metadata instance with CascadePolicy', () => {
+    test.each`
+        cascadePolicy                     | isCascadingPolicyApplicable
+        ${{ canEdit: true, id: 'hello' }} | ${true}
+        ${{ canEdit: true, id: 'hello' }} | ${false}
+        ${null}                           | ${true}
+        ${null}                           | ${false}
+    `(
+        'should correctly render templated metadata instance when cascadePolicy is $cascadePolicy and isCascadingPolicyApplicable is $isCascadingPolicyApplicable',
+        ({ cascadePolicy, isCascadingPolicyApplicable }) => {
+            const wrapper = shallow(
+                <Instance
+                    cascadePolicy={cascadePolicy}
+                    data={data}
+                    dataValue="value"
+                    intl={intl}
+                    isCascadingPolicyApplicable={isCascadingPolicyApplicable}
+                    shouldShowCascadingOptions
+                    onModification={jest.fn()}
+                    onRemove={jest.fn()}
+                    onSave={jest.fn()}
+                    canEdit
+                    template={{
+                        fields,
+                    }}
+                />,
+            );
+
+            wrapper.setState({ isEditing: true });
+            expect(wrapper).toMatchSnapshot();
+        },
+    );
+
+    test('should correctly render custom metadata instance', () => {
         const wrapper = shallow(
             <Instance
-                cascadePolicy={{
-                    canEdit: true,
-                    id: 'hello',
-                }}
                 data={data}
                 dataValue="value"
                 intl={intl}
-                isCascadingPolicyApplicable
-                shouldShowCascadingOptions
                 template={{
                     fields,
+                    templateKey: 'properties',
                 }}
             />,
         );
         expect(wrapper).toMatchSnapshot();
     });
 
-    test('should correctly render custom metadata instance', () => {
+    test('should not render footer when not editing', () => {
         const wrapper = shallow(
             <Instance
+                canEdit
                 data={data}
                 dataValue="value"
                 intl={intl}
+                onRemove={jest.fn()}
                 template={{
                     fields,
-                    templateKey: 'properties',
                 }}
             />,
         );
+
         expect(wrapper).toMatchSnapshot();
     });
 
-    test('should not render footer when not editing', () => {
+    test('should correctly render the footer when editing and no cascade policy', () => {
         const wrapper = shallow(
             <Instance
                 canEdit
                 data={data}
                 dataValue="value"
                 intl={intl}
+                onModification={jest.fn()}
                 onRemove={jest.fn()}
+                onSave={jest.fn()}
                 template={{
                     fields,
                 }}
             />,
         );
 
+        wrapper.setState({ isEditing: true });
         expect(wrapper).toMatchSnapshot();
     });
 
-    test('should correctly render the footer', () => {
+    test('should correctly render the footer when editing and cascade policy', () => {
         const wrapper = shallow(
             <Instance
                 canEdit
                 data={data}
                 dataValue="value"
                 intl={intl}
+                cascadePolicy={{
+                    id: 'hello',
+                }}
+                isCascadingPolicyApplicable
                 onModification={jest.fn()}
                 onRemove={jest.fn()}
                 onSave={jest.fn()}
diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
index 99b6164bb3..7c70af70db 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
@@ -54,6 +54,15 @@ exports[`features/metadata-instance-editor/fields/Instance collapsible isOpen pr
         <div
           className="metadata-instance-editor-instance"
         >
+          <CascadePolicy
+            canEdit={false}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
           <TemplatedInstance
             canEdit={false}
             data={
@@ -181,8 +190,17 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
         <div
           className="metadata-instance-editor-instance"
         >
+          <CascadePolicy
+            canEdit={false}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={true}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
           <CustomInstance
-            canEdit={true}
+            canEdit={false}
             data={
               Object {
                 "datefield": "2018-06-20T00:00:00.000Z",
@@ -241,7 +259,17 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
         <div
           className="metadata-instance-editor-instance"
         >
+          <CascadePolicy
+            canEdit={false}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
           <TemplatedInstance
+            canEdit={false}
             data={
               Object {
                 "datefield": "2018-06-20T00:00:00.000Z",
@@ -376,7 +404,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 </div>
 `;
 
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance with CascadePolicy 1`] = `
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true, "id": "hello"} and isCascadingPolicyApplicable is false 1`] = `
 <div>
   <Collapsible
     animationDuration={550}
@@ -413,6 +441,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
           className="metadata-instance-editor-instance"
         >
           <CascadePolicy
+            canEdit={false}
             isCascadingEnabled={true}
             isCascadingOverwritten={false}
             isCustomMetadata={false}
@@ -421,6 +450,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
             shouldShowCascadeOptions={false}
           />
           <TemplatedInstance
+            canEdit={false}
             data={
               Object {
                 "datefield": "2018-06-20T00:00:00.000Z",
@@ -555,7 +585,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 </div>
 `;
 
-exports[`features/metadata-instance-editor/fields/Instance should correctly render the busy indicator 1`] = `
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true, "id": "hello"} and isCascadingPolicyApplicable is true 1`] = `
 <div>
   <Collapsible
     animationDuration={550}
@@ -566,7 +596,25 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
     }
     className=""
     hasStickyHeader={true}
-    headerActionItems={null}
+    headerActionItems={
+      <Tooltip
+        constrainToScrollParent={false}
+        constrainToWindow={true}
+        isDisabled={false}
+        position="top-left"
+        theme="default"
+      >
+        <PlainButton
+          aria-pressed={true}
+          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+          data-resin-target="metadata-instanceedit"
+          onClick={[Function]}
+          type="button"
+        >
+          <IconEdit />
+        </PlainButton>
+      </Tooltip>
+    }
     isBordered={true}
     isOpen={true}
     title={
@@ -574,7 +622,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
         className="metadata-instance-editor-instance-title"
       >
         <IconMetadataColored
-          type="default"
+          type="cascade"
         />
         <span
           className="metadata-instance-editor-instance-title-text"
@@ -583,7 +631,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
     }
   >
     <LoadingIndicatorWrapper
-      isLoading={true}
+      isLoading={false}
     >
       <Form
         onValidSubmit={[Function]}
@@ -591,8 +639,17 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
         <div
           className="metadata-instance-editor-instance"
         >
+          <CascadePolicy
+            canEdit={true}
+            isCascadingEnabled={true}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
           <TemplatedInstance
-            canEdit={false}
+            canEdit={true}
             data={
               Object {
                 "datefield": "2018-06-20T00:00:00.000Z",
@@ -721,13 +778,18 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
             }
           />
         </div>
+        <Footer
+          onCancel={[Function]}
+          onRemove={[Function]}
+          showSave={false}
+        />
       </Form>
     </LoadingIndicatorWrapper>
   </Collapsible>
 </div>
 `;
 
-exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer 1`] = `
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is null and isCascadingPolicyApplicable is false 1`] = `
 <div>
   <Collapsible
     animationDuration={550}
@@ -781,6 +843,15 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
         <div
           className="metadata-instance-editor-instance"
         >
+          <CascadePolicy
+            canEdit={true}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
           <TemplatedInstance
             canEdit={true}
             data={
@@ -922,10 +993,10 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 </div>
 `;
 
-exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer even when all fields are hidden 1`] = `
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is null and isCascadingPolicyApplicable is true 1`] = `
 <div>
   <Collapsible
-    animationDuration={150}
+    animationDuration={550}
     buttonProps={
       Object {
         "data-resin-target": "metadata-card",
@@ -976,6 +1047,15 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
         <div
           className="metadata-instance-editor-instance"
         >
+          <CascadePolicy
+            canEdit={true}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
           <TemplatedInstance
             canEdit={true}
             data={
@@ -997,19 +1077,110 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
               Object {
                 "fields": Array [
                   Object {
-                    "displayName": "No Description Field that is hidden",
-                    "hidden": true,
+                    "displayName": "No Description Field",
                     "id": "field0",
                     "key": "nodescfield",
                     "type": "string",
                   },
                   Object {
-                    "displayName": "No Description Field that is also hidden",
+                    "description": "example of a string field",
+                    "displayName": "String Field",
                     "id": "field1",
-                    "isHidden": true,
-                    "key": "nodescfield",
+                    "key": "stringfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of an empty string field",
+                    "displayName": "Empty String Field",
+                    "id": "field2",
+                    "key": "emptystring",
                     "type": "string",
                   },
+                  Object {
+                    "description": "example of a float field",
+                    "displayName": "Float Field",
+                    "id": "field3",
+                    "key": "floatfield",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of an empty float field",
+                    "displayName": "Empty Float Field",
+                    "id": "field4",
+                    "key": "emptyfloat",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of a enum field",
+                    "displayName": "Enum Field",
+                    "id": "field5",
+                    "key": "enumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of an empty enum field",
+                    "displayName": "Empty Enum Field",
+                    "id": "field6",
+                    "key": "emptyenumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of a date field",
+                    "displayName": "Date Field",
+                    "id": "field7",
+                    "key": "datefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of an empty date field",
+                    "displayName": "Empty Date Field",
+                    "id": "field8",
+                    "key": "emptydatefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of a multi select field field",
+                    "displayName": "Multi Select Field",
+                    "id": "field9",
+                    "key": "multiselectfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                      Object {
+                        "key": "maybe",
+                      },
+                      Object {
+                        "key": "idk?",
+                      },
+                      Object {
+                        "key": "oh well",
+                      },
+                      Object {
+                        "key": "whatever",
+                      },
+                    ],
+                    "type": "multiSelect",
+                  },
                 ],
               }
             }
@@ -1026,10 +1197,10 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 </div>
 `;
 
-exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer even when there are no fields in a template 1`] = `
+exports[`features/metadata-instance-editor/fields/Instance should correctly render the busy indicator 1`] = `
 <div>
   <Collapsible
-    animationDuration={50}
+    animationDuration={550}
     buttonProps={
       Object {
         "data-resin-target": "metadata-card",
@@ -1037,25 +1208,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
     }
     className=""
     hasStickyHeader={true}
-    headerActionItems={
-      <Tooltip
-        constrainToScrollParent={false}
-        constrainToWindow={true}
-        isDisabled={false}
-        position="top-left"
-        theme="default"
-      >
-        <PlainButton
-          aria-pressed={true}
-          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-          data-resin-target="metadata-instanceedit"
-          onClick={[Function]}
-          type="button"
-        >
-          <IconEdit />
-        </PlainButton>
-      </Tooltip>
-    }
+    headerActionItems={null}
     isBordered={true}
     isOpen={true}
     title={
@@ -1072,7 +1225,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
     }
   >
     <LoadingIndicatorWrapper
-      isLoading={false}
+      isLoading={true}
     >
       <Form
         onValidSubmit={[Function]}
@@ -1080,8 +1233,17 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
         <div
           className="metadata-instance-editor-instance"
         >
+          <CascadePolicy
+            canEdit={false}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
           <TemplatedInstance
-            canEdit={true}
+            canEdit={false}
             data={
               Object {
                 "datefield": "2018-06-20T00:00:00.000Z",
@@ -1099,37 +1261,757 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
             onFieldRemove={[Function]}
             template={
               Object {
-                "fields": Array [],
-              }
-            }
-          />
-        </div>
-        <Footer
-          onCancel={[Function]}
-          onRemove={[Function]}
-          showSave={false}
-        />
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer with save button when dirty 1`] = `
-<div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={null}
-    isBordered={true}
-    isOpen={true}
-    title={
+                "fields": Array [
+                  Object {
+                    "displayName": "No Description Field",
+                    "id": "field0",
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a string field",
+                    "displayName": "String Field",
+                    "id": "field1",
+                    "key": "stringfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of an empty string field",
+                    "displayName": "Empty String Field",
+                    "id": "field2",
+                    "key": "emptystring",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a float field",
+                    "displayName": "Float Field",
+                    "id": "field3",
+                    "key": "floatfield",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of an empty float field",
+                    "displayName": "Empty Float Field",
+                    "id": "field4",
+                    "key": "emptyfloat",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of a enum field",
+                    "displayName": "Enum Field",
+                    "id": "field5",
+                    "key": "enumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of an empty enum field",
+                    "displayName": "Empty Enum Field",
+                    "id": "field6",
+                    "key": "emptyenumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of a date field",
+                    "displayName": "Date Field",
+                    "id": "field7",
+                    "key": "datefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of an empty date field",
+                    "displayName": "Empty Date Field",
+                    "id": "field8",
+                    "key": "emptydatefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of a multi select field field",
+                    "displayName": "Multi Select Field",
+                    "id": "field9",
+                    "key": "multiselectfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                      Object {
+                        "key": "maybe",
+                      },
+                      Object {
+                        "key": "idk?",
+                      },
+                      Object {
+                        "key": "oh well",
+                      },
+                      Object {
+                        "key": "whatever",
+                      },
+                    ],
+                    "type": "multiSelect",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer even when all fields are hidden 1`] = `
+<div>
+  <Collapsible
+    animationDuration={150}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={
+      <Tooltip
+        constrainToScrollParent={false}
+        constrainToWindow={true}
+        isDisabled={false}
+        position="top-left"
+        theme="default"
+      >
+        <PlainButton
+          aria-pressed={true}
+          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+          data-resin-target="metadata-instanceedit"
+          onClick={[Function]}
+          type="button"
+        >
+          <IconEdit />
+        </PlainButton>
+      </Tooltip>
+    }
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={true}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={true}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [
+                  Object {
+                    "displayName": "No Description Field that is hidden",
+                    "hidden": true,
+                    "id": "field0",
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "displayName": "No Description Field that is also hidden",
+                    "id": "field1",
+                    "isHidden": true,
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+        <Footer
+          onCancel={[Function]}
+          onRemove={[Function]}
+          showSave={false}
+        />
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer even when there are no fields in a template 1`] = `
+<div>
+  <Collapsible
+    animationDuration={50}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={
+      <Tooltip
+        constrainToScrollParent={false}
+        constrainToWindow={true}
+        isDisabled={false}
+        position="top-left"
+        theme="default"
+      >
+        <PlainButton
+          aria-pressed={true}
+          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+          data-resin-target="metadata-instanceedit"
+          onClick={[Function]}
+          type="button"
+        >
+          <IconEdit />
+        </PlainButton>
+      </Tooltip>
+    }
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={true}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={true}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [],
+              }
+            }
+          />
+        </div>
+        <Footer
+          onCancel={[Function]}
+          onRemove={[Function]}
+          showSave={false}
+        />
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer when editing and cascade policy 1`] = `
+<div>
+  <Collapsible
+    animationDuration={550}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={
+      <Tooltip
+        constrainToScrollParent={false}
+        constrainToWindow={true}
+        isDisabled={false}
+        position="top-left"
+        theme="default"
+      >
+        <PlainButton
+          aria-pressed={true}
+          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+          data-resin-target="metadata-instanceedit"
+          onClick={[Function]}
+          type="button"
+        >
+          <IconEdit />
+        </PlainButton>
+      </Tooltip>
+    }
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="cascade"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={true}
+            isCascadingEnabled={true}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={true}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [
+                  Object {
+                    "displayName": "No Description Field",
+                    "id": "field0",
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a string field",
+                    "displayName": "String Field",
+                    "id": "field1",
+                    "key": "stringfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of an empty string field",
+                    "displayName": "Empty String Field",
+                    "id": "field2",
+                    "key": "emptystring",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a float field",
+                    "displayName": "Float Field",
+                    "id": "field3",
+                    "key": "floatfield",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of an empty float field",
+                    "displayName": "Empty Float Field",
+                    "id": "field4",
+                    "key": "emptyfloat",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of a enum field",
+                    "displayName": "Enum Field",
+                    "id": "field5",
+                    "key": "enumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of an empty enum field",
+                    "displayName": "Empty Enum Field",
+                    "id": "field6",
+                    "key": "emptyenumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of a date field",
+                    "displayName": "Date Field",
+                    "id": "field7",
+                    "key": "datefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of an empty date field",
+                    "displayName": "Empty Date Field",
+                    "id": "field8",
+                    "key": "emptydatefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of a multi select field field",
+                    "displayName": "Multi Select Field",
+                    "id": "field9",
+                    "key": "multiselectfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                      Object {
+                        "key": "maybe",
+                      },
+                      Object {
+                        "key": "idk?",
+                      },
+                      Object {
+                        "key": "oh well",
+                      },
+                      Object {
+                        "key": "whatever",
+                      },
+                    ],
+                    "type": "multiSelect",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+        <Footer
+          onCancel={[Function]}
+          onRemove={[Function]}
+          showSave={false}
+        />
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer when editing and no cascade policy 1`] = `
+<div>
+  <Collapsible
+    animationDuration={550}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={
+      <Tooltip
+        constrainToScrollParent={false}
+        constrainToWindow={true}
+        isDisabled={false}
+        position="top-left"
+        theme="default"
+      >
+        <PlainButton
+          aria-pressed={true}
+          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+          data-resin-target="metadata-instanceedit"
+          onClick={[Function]}
+          type="button"
+        >
+          <IconEdit />
+        </PlainButton>
+      </Tooltip>
+    }
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={true}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={true}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [
+                  Object {
+                    "displayName": "No Description Field",
+                    "id": "field0",
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a string field",
+                    "displayName": "String Field",
+                    "id": "field1",
+                    "key": "stringfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of an empty string field",
+                    "displayName": "Empty String Field",
+                    "id": "field2",
+                    "key": "emptystring",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a float field",
+                    "displayName": "Float Field",
+                    "id": "field3",
+                    "key": "floatfield",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of an empty float field",
+                    "displayName": "Empty Float Field",
+                    "id": "field4",
+                    "key": "emptyfloat",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of a enum field",
+                    "displayName": "Enum Field",
+                    "id": "field5",
+                    "key": "enumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of an empty enum field",
+                    "displayName": "Empty Enum Field",
+                    "id": "field6",
+                    "key": "emptyenumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of a date field",
+                    "displayName": "Date Field",
+                    "id": "field7",
+                    "key": "datefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of an empty date field",
+                    "displayName": "Empty Date Field",
+                    "id": "field8",
+                    "key": "emptydatefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of a multi select field field",
+                    "displayName": "Multi Select Field",
+                    "id": "field9",
+                    "key": "multiselectfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                      Object {
+                        "key": "maybe",
+                      },
+                      Object {
+                        "key": "idk?",
+                      },
+                      Object {
+                        "key": "oh well",
+                      },
+                      Object {
+                        "key": "whatever",
+                      },
+                    ],
+                    "type": "multiSelect",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+        <Footer
+          onCancel={[Function]}
+          onRemove={[Function]}
+          showSave={false}
+        />
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer with save button when dirty 1`] = `
+<div>
+  <Collapsible
+    animationDuration={550}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={null}
+    isBordered={true}
+    isOpen={true}
+    title={
       <span
         className="metadata-instance-editor-instance-title"
       >
@@ -1151,6 +2033,15 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
         <div
           className="metadata-instance-editor-instance"
         >
+          <CascadePolicy
+            canEdit={true}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
           <TemplatedInstance
             canEdit={true}
             data={
@@ -1328,6 +2219,15 @@ exports[`features/metadata-instance-editor/fields/Instance should not render foo
         <div
           className="metadata-instance-editor-instance"
         >
+          <CascadePolicy
+            canEdit={false}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
           <TemplatedInstance
             canEdit={false}
             data={

From 853d4d13c0b435bdc1af40d77660c9b7a25ada9c Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Tue, 25 Jul 2023 13:09:30 -0400
Subject: [PATCH 02/25] fix(metadata): Disable updates to metadata

---
 .../metadata-instance-editor/Instance.js      |    1 +
 .../__tests__/Instance.test.js                |   12 +-
 .../__snapshots__/Instance.test.js.snap       | 5920 ++++++++++-------
 3 files changed, 3631 insertions(+), 2302 deletions(-)

diff --git a/src/features/metadata-instance-editor/Instance.js b/src/features/metadata-instance-editor/Instance.js
index d797f2897e..c698167b09 100644
--- a/src/features/metadata-instance-editor/Instance.js
+++ b/src/features/metadata-instance-editor/Instance.js
@@ -571,6 +571,7 @@ class Instance extends React.PureComponent<Props, State> {
                         data-resin-target="metadata-instanceedit"
                         onClick={this.toggleIsEditing}
                         type="button"
+                        data-testid="metadata-instance-edit-button"
                     >
                         <IconEdit />
                     </PlainButton>
diff --git a/src/features/metadata-instance-editor/__tests__/Instance.test.js b/src/features/metadata-instance-editor/__tests__/Instance.test.js
index 3035d96b8f..2d1326f69f 100644
--- a/src/features/metadata-instance-editor/__tests__/Instance.test.js
+++ b/src/features/metadata-instance-editor/__tests__/Instance.test.js
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { render, screen, fireEvent } from '@testing-library/react';
 import TEMPLATE_CUSTOM_PROPERTIES from '../constants';
 import { InstanceBase as Instance } from '../Instance';
 import { isValidValue } from '../../metadata-instance-fields/validateMetadataField';
@@ -168,12 +169,14 @@ describe('features/metadata-instance-editor/fields/Instance', () => {
         cascadePolicy                     | isCascadingPolicyApplicable
         ${{ canEdit: true, id: 'hello' }} | ${true}
         ${{ canEdit: true, id: 'hello' }} | ${false}
+        ${{ canEdit: true }}              | ${true}
+        ${{ canEdit: true }}              | ${false}
         ${null}                           | ${true}
         ${null}                           | ${false}
     `(
         'should correctly render templated metadata instance when cascadePolicy is $cascadePolicy and isCascadingPolicyApplicable is $isCascadingPolicyApplicable',
         ({ cascadePolicy, isCascadingPolicyApplicable }) => {
-            const wrapper = shallow(
+            const { container } = render(
                 <Instance
                     cascadePolicy={cascadePolicy}
                     data={data}
@@ -191,8 +194,11 @@ describe('features/metadata-instance-editor/fields/Instance', () => {
                 />,
             );
 
-            wrapper.setState({ isEditing: true });
-            expect(wrapper).toMatchSnapshot();
+            const editButton = screen.queryByTestId('metadata-instance-edit-button');
+            if (editButton) {
+                fireEvent.click(editButton);
+            }
+            expect(container).toMatchSnapshot();
         },
     );
 
diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
index 7c70af70db..202f8a159e 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
@@ -1,2365 +1,3687 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`features/metadata-instance-editor/fields/Instance collapsible isOpen prop should be true 1`] = `
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true, "id": "hello"} and isCascadingPolicyApplicable is false 1`] = `
 <div>
-  <Collapsible
-    animationDuration={50}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={
-      <Tooltip
-        constrainToScrollParent={false}
-        constrainToWindow={true}
-        isDisabled={false}
-        position="top-left"
-        theme="default"
+  <div>
+    <div
+      class="collapsible-card is-open is-bordered"
+    >
+      <div
+        class="collapsible-card-header has-sticky-header"
       >
-        <PlainButton
-          aria-pressed={false}
-          className="metadata-instance-editor-instance-edit"
-          data-resin-target="metadata-instanceedit"
-          onClick={[Function]}
+        <button
+          aria-expanded="true"
+          class="btn-plain collapsible-card-title"
+          data-resin-target="metadata-cardcollapse"
           type="button"
         >
-          <IconEdit />
-        </PlainButton>
-      </Tooltip>
-    }
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
-    >
-      <Form
-        onValidSubmit={[Function]}
+          <span
+            class="metadata-instance-editor-instance-title"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-metadata "
+              focusable="false"
+              height="16"
+              role="presentation"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                class="fill-color"
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
+                fill="#9f3fed"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <span
+              class="metadata-instance-editor-instance-title-text"
+            />
+          </span>
+          <svg
+            aria-hidden="true"
+            class="icon-caret-down collapsible-card-header-caret"
+            focusable="false"
+            height="6"
+            role="presentation"
+            viewBox="0 0 10 6"
+            width="8"
+          >
+            <path
+              class="fill-color"
+              d="M0 .5l5 5 5-5H0z"
+              fill="#909090"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        aria-hidden="false"
+        class="rah-static rah-static--height-auto"
+        style="height: auto; overflow: visible;"
       >
-        <div
-          className="metadata-instance-editor-instance"
-        >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={false}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "singleTemplateField": Array [
-                  Object {
-                    "description": "example of an empty enum field",
-                    "displayName": "Empty Enum Field",
-                    "id": "field0",
-                    "key": "emptyenumfield",
-                    "type": "enum",
-                  },
-                ],
-              }
-            }
-          />
+        <div>
+          <div
+            class="collapsible-card-content"
+          >
+            <div
+              class="loading-indicator-wrapper "
+            >
+              <form
+                novalidate=""
+              >
+                <div
+                  class="metadata-instance-editor-instance"
+                >
+                  <div
+                    class="metadata-cascade-notice"
+                  >
+                    <div />
+                  </div>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      No Description Field
+                    </dt>
+                    <dd>
+                      <div />
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      String Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of a string field
+                    </i>
+                    <dd>
+                      some string
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      Empty String Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of an empty string field
+                    </i>
+                    <dd>
+                      <div />
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      Float Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of a float field
+                    </i>
+                    <dd>
+                      1
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      Empty Float Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of an empty float field
+                    </i>
+                    <dd>
+                      <div />
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      Enum Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of a enum field
+                    </i>
+                    <dd>
+                      yes
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      Empty Enum Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of an empty enum field
+                    </i>
+                    <dd>
+                      <div />
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      Date Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of a date field
+                    </i>
+                    <dd>
+                      <div />
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      Empty Date Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of an empty date field
+                    </i>
+                    <dd>
+                      <div />
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      Multi Select Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of a multi select field field
+                    </i>
+                    <dd>
+                      yes, no
+                    </dd>
+                  </dl>
+                </div>
+              </form>
+            </div>
+          </div>
         </div>
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
-exports[`features/metadata-instance-editor/fields/Instance message id should be fileMetadataRemoveCustomTemplateConfirm 1`] = `
-<FormattedMessage
-  defaultMessage="Are you sure you want to delete this custom metadata and all of its values from this file?"
-  id="boxui.metadataInstanceEditor.fileMetadataRemoveCustomTemplateConfirm"
-  values={
-    Object {
-      "metadataName": "Empty Enum Field",
-    }
-  }
-/>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance message id should be fileMetadataRemoveTemplateConfirm 1`] = `
-<FormattedMessage
-  defaultMessage="Are you sure you want to delete \\"{metadataName}\\" and all of its values from this file?"
-  id="boxui.metadataInstanceEditor.fileMetadataRemoveTemplateConfirm"
-  values={
-    Object {
-      "metadataName": "Empty Enum Field",
-    }
-  }
-/>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance message id should be folderMetadataRemoveCustomTemplateConfirm 1`] = `
-<FormattedMessage
-  defaultMessage="Are you sure you want to delete this custom metadata and all of its values? Any metadata template values already applied to files in this folder will not be deleted."
-  id="boxui.metadataInstanceEditor.folderMetadataRemoveCustomTemplateConfirm"
-  values={
-    Object {
-      "metadataName": "Empty Enum Field",
-    }
-  }
-/>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance message id should be folderMetadataRemoveTemplateConfirm 1`] = `
-<FormattedMessage
-  defaultMessage="Are you sure you want to delete \\"{metadataName}\\" and all of its values? Any metadata template values already applied to files in this folder will not be deleted."
-  id="boxui.metadataInstanceEditor.folderMetadataRemoveTemplateConfirm"
-  values={
-    Object {
-      "metadataName": "Empty Enum Field",
-    }
-  }
-/>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render custom metadata instance 1`] = `
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true, "id": "hello"} and isCascadingPolicyApplicable is true 1`] = `
 <div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={null}
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        >
-          <FormattedMessage
-            defaultMessage="Custom Metadata"
-            id="boxui.metadataInstanceEditor.customTitle"
-          />
-        </span>
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
+  <div>
+    <div
+      class="collapsible-card is-open is-bordered"
     >
-      <Form
-        onValidSubmit={[Function]}
+      <div
+        class="collapsible-card-header has-sticky-header"
       >
-        <div
-          className="metadata-instance-editor-instance"
+        <button
+          aria-expanded="true"
+          class="btn-plain collapsible-card-title"
+          data-resin-target="metadata-cardcollapse"
+          type="button"
         >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={true}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <CustomInstance
-            canEdit={false}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-          />
-        </div>
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance 1`] = `
-<div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={null}
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
+          <span
+            class="metadata-instance-editor-instance-title"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-metadata "
+              focusable="false"
+              height="16"
+              role="presentation"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                class="fill-color"
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
+                fill="#9f3fed"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <span
+              class="metadata-instance-editor-instance-title-text"
+            />
+          </span>
+          <svg
+            aria-hidden="true"
+            class="icon-caret-down collapsible-card-header-caret"
+            focusable="false"
+            height="6"
+            role="presentation"
+            viewBox="0 0 10 6"
+            width="8"
+          >
+            <path
+              class="fill-color"
+              d="M0 .5l5 5 5-5H0z"
+              fill="#909090"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
         <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
-    >
-      <Form
-        onValidSubmit={[Function]}
-      >
-        <div
-          className="metadata-instance-editor-instance"
+          class="bdl-Collapsible-actionItems"
         >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={false}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [
-                  Object {
-                    "displayName": "No Description Field",
-                    "id": "field0",
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a string field",
-                    "displayName": "String Field",
-                    "id": "field1",
-                    "key": "stringfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of an empty string field",
-                    "displayName": "Empty String Field",
-                    "id": "field2",
-                    "key": "emptystring",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a float field",
-                    "displayName": "Float Field",
-                    "id": "field3",
-                    "key": "floatfield",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of an empty float field",
-                    "displayName": "Empty Float Field",
-                    "id": "field4",
-                    "key": "emptyfloat",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of a enum field",
-                    "displayName": "Enum Field",
-                    "id": "field5",
-                    "key": "enumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of an empty enum field",
-                    "displayName": "Empty Enum Field",
-                    "id": "field6",
-                    "key": "emptyenumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of a date field",
-                    "displayName": "Date Field",
-                    "id": "field7",
-                    "key": "datefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of an empty date field",
-                    "displayName": "Empty Date Field",
-                    "id": "field8",
-                    "key": "emptydatefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of a multi select field field",
-                    "displayName": "Multi Select Field",
-                    "id": "field9",
-                    "key": "multiselectfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                      Object {
-                        "key": "maybe",
-                      },
-                      Object {
-                        "key": "idk?",
-                      },
-                      Object {
-                        "key": "oh well",
-                      },
-                      Object {
-                        "key": "whatever",
-                      },
-                    ],
-                    "type": "multiSelect",
-                  },
-                ],
-              }
-            }
-          />
-        </div>
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true, "id": "hello"} and isCascadingPolicyApplicable is false 1`] = `
-<div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={null}
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="cascade"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
-    >
-      <Form
-        onValidSubmit={[Function]}
+          <button
+            aria-pressed="true"
+            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+            data-resin-target="metadata-instanceedit"
+            data-testid="metadata-instance-edit-button"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-edit "
+              focusable="false"
+              height="14"
+              role="presentation"
+              viewBox="0 0 14 14"
+              width="14"
+            >
+              <path
+                class="fill-color"
+                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
+                fill="#6f6f6f"
+              />
+            </svg>
+          </button>
+        </span>
+      </div>
+      <div
+        aria-hidden="false"
+        class="rah-static rah-static--height-auto"
+        style="height: auto; overflow: visible;"
       >
-        <div
-          className="metadata-instance-editor-instance"
-        >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={true}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={false}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [
-                  Object {
-                    "displayName": "No Description Field",
-                    "id": "field0",
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a string field",
-                    "displayName": "String Field",
-                    "id": "field1",
-                    "key": "stringfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of an empty string field",
-                    "displayName": "Empty String Field",
-                    "id": "field2",
-                    "key": "emptystring",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a float field",
-                    "displayName": "Float Field",
-                    "id": "field3",
-                    "key": "floatfield",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of an empty float field",
-                    "displayName": "Empty Float Field",
-                    "id": "field4",
-                    "key": "emptyfloat",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of a enum field",
-                    "displayName": "Enum Field",
-                    "id": "field5",
-                    "key": "enumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of an empty enum field",
-                    "displayName": "Empty Enum Field",
-                    "id": "field6",
-                    "key": "emptyenumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of a date field",
-                    "displayName": "Date Field",
-                    "id": "field7",
-                    "key": "datefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of an empty date field",
-                    "displayName": "Empty Date Field",
-                    "id": "field8",
-                    "key": "emptydatefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of a multi select field field",
-                    "displayName": "Multi Select Field",
-                    "id": "field9",
-                    "key": "multiselectfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                      Object {
-                        "key": "maybe",
-                      },
-                      Object {
-                        "key": "idk?",
-                      },
-                      Object {
-                        "key": "oh well",
-                      },
-                      Object {
-                        "key": "whatever",
-                      },
-                    ],
-                    "type": "multiSelect",
-                  },
-                ],
-              }
-            }
-          />
+        <div>
+          <div
+            class="collapsible-card-content"
+          >
+            <div
+              class="loading-indicator-wrapper "
+            >
+              <form
+                novalidate=""
+              >
+                <div
+                  class="metadata-instance-editor-instance"
+                >
+                  <div
+                    class="metadata-cascade-editor"
+                  >
+                    <div
+                      class="metadata-cascade-enable"
+                    >
+                      <div>
+                        <div />
+                        <div
+                          class="toggle-container metadata-cascade-toggle cascade-on"
+                        >
+                          <label
+                            class="toggle-simple"
+                          >
+                            <input
+                              checked=""
+                              class="toggle-simple-input"
+                              role="switch"
+                              type="checkbox"
+                            />
+                            <div
+                              class="toggle-simple-switch"
+                            />
+                            <div
+                              class="toggle-simple-label"
+                            />
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        class="cascade-policy-text"
+                      >
+                        <div />
+                         
+                        <a
+                          class="link cascade-policy-learnmore-link"
+                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
+                          rel="noopener"
+                          target="_blank"
+                        >
+                          <div />
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          No Description Field
+                        </span>
+                      </span>
+                      <input
+                        aria-invalid="false"
+                        name="nodescfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description7"
+                      >
+                        example of a string field
+                      </div>
+                      <input
+                        aria-describedby="description7"
+                        aria-invalid="false"
+                        name="stringfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="some string"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description9"
+                      >
+                        example of an empty string field
+                      </div>
+                      <input
+                        aria-describedby="description9"
+                        aria-invalid="false"
+                        name="emptystring"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description11"
+                      >
+                        example of a float field
+                      </div>
+                      <input
+                        aria-describedby="description11"
+                        aria-invalid="false"
+                        name="floatfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="1"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description13"
+                      >
+                        example of an empty float field
+                      </div>
+                      <input
+                        aria-describedby="description13"
+                        aria-invalid="false"
+                        name="emptyfloat"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of a enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield15"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes"
+                          type="button"
+                        >
+                          yes
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of an empty enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield17"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="Select Value"
+                          type="button"
+                        >
+                          Select Value
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description20"
+                        >
+                          example of a date field
+                        </div>
+                        <input
+                          aria-describedby="description20"
+                          aria-errormessage="errorMessage19"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage19"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Clear Date"
+                        class="btn-plain date-picker-clear-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <path
+                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </button>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value="2018-06-20T00:00:00.000Z"
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Empty Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description25"
+                        >
+                          example of an empty date field
+                        </div>
+                        <input
+                          aria-describedby="description25"
+                          aria-errormessage="errorMessage24"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value=""
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage24"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value=""
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-MultiSelectMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Multi Select Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-MultiSelectMetadataField-desc"
+                      >
+                        example of a multi select field field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield28"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes, no"
+                          type="button"
+                        >
+                          yes, no
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="metadata-instance-editor-footer"
+                >
+                  <div
+                    class="metadata-instance-editor-footer-delete"
+                  >
+                    <button
+                      class="btn-plain "
+                      data-resin-target="metadata-instanceremove"
+                      type="button"
+                    >
+                      <div />
+                    </button>
+                  </div>
+                  <div
+                    class="metadata-instance-editor-footer-save-cancel"
+                  >
+                    <button
+                      class="btn"
+                      data-resin-target="metadata-instancecancel"
+                      type="button"
+                    >
+                      <span
+                        class="btn-content"
+                      >
+                        <div />
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
         </div>
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true, "id": "hello"} and isCascadingPolicyApplicable is true 1`] = `
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true} and isCascadingPolicyApplicable is false 1`] = `
 <div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={
-      <Tooltip
-        constrainToScrollParent={false}
-        constrainToWindow={true}
-        isDisabled={false}
-        position="top-left"
-        theme="default"
-      >
-        <PlainButton
-          aria-pressed={true}
-          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-          data-resin-target="metadata-instanceedit"
-          onClick={[Function]}
-          type="button"
-        >
-          <IconEdit />
-        </PlainButton>
-      </Tooltip>
-    }
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="cascade"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
+  <div>
+    <div
+      class="collapsible-card is-open is-bordered"
     >
-      <Form
-        onValidSubmit={[Function]}
-      >
-        <div
-          className="metadata-instance-editor-instance"
-        >
-          <CascadePolicy
-            canEdit={true}
-            isCascadingEnabled={true}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={true}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [
-                  Object {
-                    "displayName": "No Description Field",
-                    "id": "field0",
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a string field",
-                    "displayName": "String Field",
-                    "id": "field1",
-                    "key": "stringfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of an empty string field",
-                    "displayName": "Empty String Field",
-                    "id": "field2",
-                    "key": "emptystring",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a float field",
-                    "displayName": "Float Field",
-                    "id": "field3",
-                    "key": "floatfield",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of an empty float field",
-                    "displayName": "Empty Float Field",
-                    "id": "field4",
-                    "key": "emptyfloat",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of a enum field",
-                    "displayName": "Enum Field",
-                    "id": "field5",
-                    "key": "enumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of an empty enum field",
-                    "displayName": "Empty Enum Field",
-                    "id": "field6",
-                    "key": "emptyenumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of a date field",
-                    "displayName": "Date Field",
-                    "id": "field7",
-                    "key": "datefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of an empty date field",
-                    "displayName": "Empty Date Field",
-                    "id": "field8",
-                    "key": "emptydatefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of a multi select field field",
-                    "displayName": "Multi Select Field",
-                    "id": "field9",
-                    "key": "multiselectfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                      Object {
-                        "key": "maybe",
-                      },
-                      Object {
-                        "key": "idk?",
-                      },
-                      Object {
-                        "key": "oh well",
-                      },
-                      Object {
-                        "key": "whatever",
-                      },
-                    ],
-                    "type": "multiSelect",
-                  },
-                ],
-              }
-            }
-          />
-        </div>
-        <Footer
-          onCancel={[Function]}
-          onRemove={[Function]}
-          showSave={false}
-        />
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is null and isCascadingPolicyApplicable is false 1`] = `
-<div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={
-      <Tooltip
-        constrainToScrollParent={false}
-        constrainToWindow={true}
-        isDisabled={false}
-        position="top-left"
-        theme="default"
+      <div
+        class="collapsible-card-header has-sticky-header"
       >
-        <PlainButton
-          aria-pressed={true}
-          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-          data-resin-target="metadata-instanceedit"
-          onClick={[Function]}
+        <button
+          aria-expanded="true"
+          class="btn-plain collapsible-card-title"
+          data-resin-target="metadata-cardcollapse"
           type="button"
         >
-          <IconEdit />
-        </PlainButton>
-      </Tooltip>
-    }
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
+          <span
+            class="metadata-instance-editor-instance-title"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-metadata "
+              focusable="false"
+              height="16"
+              role="presentation"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                class="fill-color"
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
+                fill="#0061d5"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <span
+              class="metadata-instance-editor-instance-title-text"
+            />
+          </span>
+          <svg
+            aria-hidden="true"
+            class="icon-caret-down collapsible-card-header-caret"
+            focusable="false"
+            height="6"
+            role="presentation"
+            viewBox="0 0 10 6"
+            width="8"
+          >
+            <path
+              class="fill-color"
+              d="M0 .5l5 5 5-5H0z"
+              fill="#909090"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
         <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
-    >
-      <Form
-        onValidSubmit={[Function]}
-      >
-        <div
-          className="metadata-instance-editor-instance"
+          class="bdl-Collapsible-actionItems"
         >
-          <CascadePolicy
-            canEdit={true}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={true}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [
-                  Object {
-                    "displayName": "No Description Field",
-                    "id": "field0",
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a string field",
-                    "displayName": "String Field",
-                    "id": "field1",
-                    "key": "stringfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of an empty string field",
-                    "displayName": "Empty String Field",
-                    "id": "field2",
-                    "key": "emptystring",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a float field",
-                    "displayName": "Float Field",
-                    "id": "field3",
-                    "key": "floatfield",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of an empty float field",
-                    "displayName": "Empty Float Field",
-                    "id": "field4",
-                    "key": "emptyfloat",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of a enum field",
-                    "displayName": "Enum Field",
-                    "id": "field5",
-                    "key": "enumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of an empty enum field",
-                    "displayName": "Empty Enum Field",
-                    "id": "field6",
-                    "key": "emptyenumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of a date field",
-                    "displayName": "Date Field",
-                    "id": "field7",
-                    "key": "datefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of an empty date field",
-                    "displayName": "Empty Date Field",
-                    "id": "field8",
-                    "key": "emptydatefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of a multi select field field",
-                    "displayName": "Multi Select Field",
-                    "id": "field9",
-                    "key": "multiselectfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                      Object {
-                        "key": "maybe",
-                      },
-                      Object {
-                        "key": "idk?",
-                      },
-                      Object {
-                        "key": "oh well",
-                      },
-                      Object {
-                        "key": "whatever",
-                      },
-                    ],
-                    "type": "multiSelect",
-                  },
-                ],
-              }
-            }
-          />
-        </div>
-        <Footer
-          onCancel={[Function]}
-          onRemove={[Function]}
-          showSave={false}
-        />
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is null and isCascadingPolicyApplicable is true 1`] = `
-<div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={
-      <Tooltip
-        constrainToScrollParent={false}
-        constrainToWindow={true}
-        isDisabled={false}
-        position="top-left"
-        theme="default"
-      >
-        <PlainButton
-          aria-pressed={true}
-          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-          data-resin-target="metadata-instanceedit"
-          onClick={[Function]}
-          type="button"
-        >
-          <IconEdit />
-        </PlainButton>
-      </Tooltip>
-    }
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
-    >
-      <Form
-        onValidSubmit={[Function]}
+          <button
+            aria-pressed="true"
+            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+            data-resin-target="metadata-instanceedit"
+            data-testid="metadata-instance-edit-button"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-edit "
+              focusable="false"
+              height="14"
+              role="presentation"
+              viewBox="0 0 14 14"
+              width="14"
+            >
+              <path
+                class="fill-color"
+                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
+                fill="#6f6f6f"
+              />
+            </svg>
+          </button>
+        </span>
+      </div>
+      <div
+        aria-hidden="false"
+        class="rah-static rah-static--height-auto"
+        style="height: auto; overflow: visible;"
       >
-        <div
-          className="metadata-instance-editor-instance"
-        >
-          <CascadePolicy
-            canEdit={true}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={true}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [
-                  Object {
-                    "displayName": "No Description Field",
-                    "id": "field0",
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a string field",
-                    "displayName": "String Field",
-                    "id": "field1",
-                    "key": "stringfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of an empty string field",
-                    "displayName": "Empty String Field",
-                    "id": "field2",
-                    "key": "emptystring",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a float field",
-                    "displayName": "Float Field",
-                    "id": "field3",
-                    "key": "floatfield",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of an empty float field",
-                    "displayName": "Empty Float Field",
-                    "id": "field4",
-                    "key": "emptyfloat",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of a enum field",
-                    "displayName": "Enum Field",
-                    "id": "field5",
-                    "key": "enumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of an empty enum field",
-                    "displayName": "Empty Enum Field",
-                    "id": "field6",
-                    "key": "emptyenumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of a date field",
-                    "displayName": "Date Field",
-                    "id": "field7",
-                    "key": "datefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of an empty date field",
-                    "displayName": "Empty Date Field",
-                    "id": "field8",
-                    "key": "emptydatefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of a multi select field field",
-                    "displayName": "Multi Select Field",
-                    "id": "field9",
-                    "key": "multiselectfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                      Object {
-                        "key": "maybe",
-                      },
-                      Object {
-                        "key": "idk?",
-                      },
-                      Object {
-                        "key": "oh well",
-                      },
-                      Object {
-                        "key": "whatever",
-                      },
-                    ],
-                    "type": "multiSelect",
-                  },
-                ],
-              }
-            }
-          />
+        <div>
+          <div
+            class="collapsible-card-content"
+          >
+            <div
+              class="loading-indicator-wrapper "
+            >
+              <form
+                novalidate=""
+              >
+                <div
+                  class="metadata-instance-editor-instance"
+                >
+                  <div
+                    class="metadata-cascade-editor"
+                  >
+                    <div
+                      class="metadata-cascade-enable"
+                    >
+                      <div>
+                        <div />
+                        <div
+                          class="toggle-container metadata-cascade-toggle cascade-off"
+                        >
+                          <label
+                            class="toggle-simple"
+                          >
+                            <input
+                              class="toggle-simple-input"
+                              role="switch"
+                              type="checkbox"
+                            />
+                            <div
+                              class="toggle-simple-switch"
+                            />
+                            <div
+                              class="toggle-simple-label"
+                            />
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        class="cascade-policy-text"
+                      >
+                        <div />
+                         
+                        <a
+                          class="link cascade-policy-learnmore-link"
+                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
+                          rel="noopener"
+                          target="_blank"
+                        >
+                          <div />
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          No Description Field
+                        </span>
+                      </span>
+                      <input
+                        aria-invalid="false"
+                        name="nodescfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description67"
+                      >
+                        example of a string field
+                      </div>
+                      <input
+                        aria-describedby="description67"
+                        aria-invalid="false"
+                        name="stringfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="some string"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description69"
+                      >
+                        example of an empty string field
+                      </div>
+                      <input
+                        aria-describedby="description69"
+                        aria-invalid="false"
+                        name="emptystring"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description71"
+                      >
+                        example of a float field
+                      </div>
+                      <input
+                        aria-describedby="description71"
+                        aria-invalid="false"
+                        name="floatfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="1"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description73"
+                      >
+                        example of an empty float field
+                      </div>
+                      <input
+                        aria-describedby="description73"
+                        aria-invalid="false"
+                        name="emptyfloat"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of a enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield75"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes"
+                          type="button"
+                        >
+                          yes
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of an empty enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield77"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="Select Value"
+                          type="button"
+                        >
+                          Select Value
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description80"
+                        >
+                          example of a date field
+                        </div>
+                        <input
+                          aria-describedby="description80"
+                          aria-errormessage="errorMessage79"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage79"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Clear Date"
+                        class="btn-plain date-picker-clear-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <path
+                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </button>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value="2018-06-20T00:00:00.000Z"
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Empty Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description85"
+                        >
+                          example of an empty date field
+                        </div>
+                        <input
+                          aria-describedby="description85"
+                          aria-errormessage="errorMessage84"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value=""
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage84"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value=""
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-MultiSelectMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Multi Select Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-MultiSelectMetadataField-desc"
+                      >
+                        example of a multi select field field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield88"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes, no"
+                          type="button"
+                        >
+                          yes, no
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="metadata-instance-editor-footer"
+                >
+                  <div
+                    class="metadata-instance-editor-footer-delete"
+                  >
+                    <button
+                      class="btn-plain "
+                      data-resin-target="metadata-instanceremove"
+                      type="button"
+                    >
+                      <div />
+                    </button>
+                  </div>
+                  <div
+                    class="metadata-instance-editor-footer-save-cancel"
+                  >
+                    <button
+                      class="btn"
+                      data-resin-target="metadata-instancecancel"
+                      type="button"
+                    >
+                      <span
+                        class="btn-content"
+                      >
+                        <div />
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
         </div>
-        <Footer
-          onCancel={[Function]}
-          onRemove={[Function]}
-          showSave={false}
-        />
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
-exports[`features/metadata-instance-editor/fields/Instance should correctly render the busy indicator 1`] = `
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true} and isCascadingPolicyApplicable is true 1`] = `
 <div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={null}
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={true}
+  <div>
+    <div
+      class="collapsible-card is-open is-bordered"
     >
-      <Form
-        onValidSubmit={[Function]}
+      <div
+        class="collapsible-card-header has-sticky-header"
       >
-        <div
-          className="metadata-instance-editor-instance"
-        >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={false}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [
-                  Object {
-                    "displayName": "No Description Field",
-                    "id": "field0",
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a string field",
-                    "displayName": "String Field",
-                    "id": "field1",
-                    "key": "stringfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of an empty string field",
-                    "displayName": "Empty String Field",
-                    "id": "field2",
-                    "key": "emptystring",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a float field",
-                    "displayName": "Float Field",
-                    "id": "field3",
-                    "key": "floatfield",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of an empty float field",
-                    "displayName": "Empty Float Field",
-                    "id": "field4",
-                    "key": "emptyfloat",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of a enum field",
-                    "displayName": "Enum Field",
-                    "id": "field5",
-                    "key": "enumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of an empty enum field",
-                    "displayName": "Empty Enum Field",
-                    "id": "field6",
-                    "key": "emptyenumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of a date field",
-                    "displayName": "Date Field",
-                    "id": "field7",
-                    "key": "datefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of an empty date field",
-                    "displayName": "Empty Date Field",
-                    "id": "field8",
-                    "key": "emptydatefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of a multi select field field",
-                    "displayName": "Multi Select Field",
-                    "id": "field9",
-                    "key": "multiselectfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                      Object {
-                        "key": "maybe",
-                      },
-                      Object {
-                        "key": "idk?",
-                      },
-                      Object {
-                        "key": "oh well",
-                      },
-                      Object {
-                        "key": "whatever",
-                      },
-                    ],
-                    "type": "multiSelect",
-                  },
-                ],
-              }
-            }
-          />
-        </div>
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer even when all fields are hidden 1`] = `
-<div>
-  <Collapsible
-    animationDuration={150}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={
-      <Tooltip
-        constrainToScrollParent={false}
-        constrainToWindow={true}
-        isDisabled={false}
-        position="top-left"
-        theme="default"
-      >
-        <PlainButton
-          aria-pressed={true}
-          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-          data-resin-target="metadata-instanceedit"
-          onClick={[Function]}
+        <button
+          aria-expanded="true"
+          class="btn-plain collapsible-card-title"
+          data-resin-target="metadata-cardcollapse"
           type="button"
         >
-          <IconEdit />
-        </PlainButton>
-      </Tooltip>
-    }
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
+          <span
+            class="metadata-instance-editor-instance-title"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-metadata "
+              focusable="false"
+              height="16"
+              role="presentation"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                class="fill-color"
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
+                fill="#0061d5"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <span
+              class="metadata-instance-editor-instance-title-text"
+            />
+          </span>
+          <svg
+            aria-hidden="true"
+            class="icon-caret-down collapsible-card-header-caret"
+            focusable="false"
+            height="6"
+            role="presentation"
+            viewBox="0 0 10 6"
+            width="8"
+          >
+            <path
+              class="fill-color"
+              d="M0 .5l5 5 5-5H0z"
+              fill="#909090"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
         <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
-    >
-      <Form
-        onValidSubmit={[Function]}
-      >
-        <div
-          className="metadata-instance-editor-instance"
-        >
-          <CascadePolicy
-            canEdit={true}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={true}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [
-                  Object {
-                    "displayName": "No Description Field that is hidden",
-                    "hidden": true,
-                    "id": "field0",
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "displayName": "No Description Field that is also hidden",
-                    "id": "field1",
-                    "isHidden": true,
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                ],
-              }
-            }
-          />
-        </div>
-        <Footer
-          onCancel={[Function]}
-          onRemove={[Function]}
-          showSave={false}
-        />
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer even when there are no fields in a template 1`] = `
-<div>
-  <Collapsible
-    animationDuration={50}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={
-      <Tooltip
-        constrainToScrollParent={false}
-        constrainToWindow={true}
-        isDisabled={false}
-        position="top-left"
-        theme="default"
-      >
-        <PlainButton
-          aria-pressed={true}
-          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-          data-resin-target="metadata-instanceedit"
-          onClick={[Function]}
-          type="button"
+          class="bdl-Collapsible-actionItems"
         >
-          <IconEdit />
-        </PlainButton>
-      </Tooltip>
-    }
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
-    >
-      <Form
-        onValidSubmit={[Function]}
+          <button
+            aria-pressed="true"
+            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+            data-resin-target="metadata-instanceedit"
+            data-testid="metadata-instance-edit-button"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-edit "
+              focusable="false"
+              height="14"
+              role="presentation"
+              viewBox="0 0 14 14"
+              width="14"
+            >
+              <path
+                class="fill-color"
+                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
+                fill="#6f6f6f"
+              />
+            </svg>
+          </button>
+        </span>
+      </div>
+      <div
+        aria-hidden="false"
+        class="rah-static rah-static--height-auto"
+        style="height: auto; overflow: visible;"
       >
-        <div
-          className="metadata-instance-editor-instance"
-        >
-          <CascadePolicy
-            canEdit={true}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={true}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [],
-              }
-            }
-          />
+        <div>
+          <div
+            class="collapsible-card-content"
+          >
+            <div
+              class="loading-indicator-wrapper "
+            >
+              <form
+                novalidate=""
+              >
+                <div
+                  class="metadata-instance-editor-instance"
+                >
+                  <div
+                    class="metadata-cascade-editor"
+                  >
+                    <div
+                      class="metadata-cascade-enable"
+                    >
+                      <div>
+                        <div />
+                        <div
+                          class="toggle-container metadata-cascade-toggle cascade-off"
+                        >
+                          <label
+                            class="toggle-simple"
+                          >
+                            <input
+                              class="toggle-simple-input"
+                              role="switch"
+                              type="checkbox"
+                            />
+                            <div
+                              class="toggle-simple-switch"
+                            />
+                            <div
+                              class="toggle-simple-label"
+                            />
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        class="cascade-policy-text"
+                      >
+                        <div />
+                         
+                        <a
+                          class="link cascade-policy-learnmore-link"
+                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
+                          rel="noopener"
+                          target="_blank"
+                        >
+                          <div />
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          No Description Field
+                        </span>
+                      </span>
+                      <input
+                        aria-invalid="false"
+                        name="nodescfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description38"
+                      >
+                        example of a string field
+                      </div>
+                      <input
+                        aria-describedby="description38"
+                        aria-invalid="false"
+                        name="stringfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="some string"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description40"
+                      >
+                        example of an empty string field
+                      </div>
+                      <input
+                        aria-describedby="description40"
+                        aria-invalid="false"
+                        name="emptystring"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description42"
+                      >
+                        example of a float field
+                      </div>
+                      <input
+                        aria-describedby="description42"
+                        aria-invalid="false"
+                        name="floatfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="1"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description44"
+                      >
+                        example of an empty float field
+                      </div>
+                      <input
+                        aria-describedby="description44"
+                        aria-invalid="false"
+                        name="emptyfloat"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of a enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield46"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes"
+                          type="button"
+                        >
+                          yes
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of an empty enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield48"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="Select Value"
+                          type="button"
+                        >
+                          Select Value
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description51"
+                        >
+                          example of a date field
+                        </div>
+                        <input
+                          aria-describedby="description51"
+                          aria-errormessage="errorMessage50"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage50"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Clear Date"
+                        class="btn-plain date-picker-clear-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <path
+                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </button>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value="2018-06-20T00:00:00.000Z"
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Empty Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description56"
+                        >
+                          example of an empty date field
+                        </div>
+                        <input
+                          aria-describedby="description56"
+                          aria-errormessage="errorMessage55"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value=""
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage55"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value=""
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-MultiSelectMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Multi Select Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-MultiSelectMetadataField-desc"
+                      >
+                        example of a multi select field field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield59"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes, no"
+                          type="button"
+                        >
+                          yes, no
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="metadata-instance-editor-footer"
+                >
+                  <div
+                    class="metadata-instance-editor-footer-delete"
+                  >
+                    <button
+                      class="btn-plain "
+                      data-resin-target="metadata-instanceremove"
+                      type="button"
+                    >
+                      <div />
+                    </button>
+                  </div>
+                  <div
+                    class="metadata-instance-editor-footer-save-cancel"
+                  >
+                    <button
+                      class="btn"
+                      data-resin-target="metadata-instancecancel"
+                      type="button"
+                    >
+                      <span
+                        class="btn-content"
+                      >
+                        <div />
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
         </div>
-        <Footer
-          onCancel={[Function]}
-          onRemove={[Function]}
-          showSave={false}
-        />
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
-exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer when editing and cascade policy 1`] = `
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is null and isCascadingPolicyApplicable is false 1`] = `
 <div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={
-      <Tooltip
-        constrainToScrollParent={false}
-        constrainToWindow={true}
-        isDisabled={false}
-        position="top-left"
-        theme="default"
-      >
-        <PlainButton
-          aria-pressed={true}
-          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-          data-resin-target="metadata-instanceedit"
-          onClick={[Function]}
-          type="button"
-        >
-          <IconEdit />
-        </PlainButton>
-      </Tooltip>
-    }
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="cascade"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
+  <div>
+    <div
+      class="collapsible-card is-open is-bordered"
     >
-      <Form
-        onValidSubmit={[Function]}
-      >
-        <div
-          className="metadata-instance-editor-instance"
-        >
-          <CascadePolicy
-            canEdit={true}
-            isCascadingEnabled={true}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={true}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [
-                  Object {
-                    "displayName": "No Description Field",
-                    "id": "field0",
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a string field",
-                    "displayName": "String Field",
-                    "id": "field1",
-                    "key": "stringfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of an empty string field",
-                    "displayName": "Empty String Field",
-                    "id": "field2",
-                    "key": "emptystring",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a float field",
-                    "displayName": "Float Field",
-                    "id": "field3",
-                    "key": "floatfield",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of an empty float field",
-                    "displayName": "Empty Float Field",
-                    "id": "field4",
-                    "key": "emptyfloat",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of a enum field",
-                    "displayName": "Enum Field",
-                    "id": "field5",
-                    "key": "enumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of an empty enum field",
-                    "displayName": "Empty Enum Field",
-                    "id": "field6",
-                    "key": "emptyenumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of a date field",
-                    "displayName": "Date Field",
-                    "id": "field7",
-                    "key": "datefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of an empty date field",
-                    "displayName": "Empty Date Field",
-                    "id": "field8",
-                    "key": "emptydatefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of a multi select field field",
-                    "displayName": "Multi Select Field",
-                    "id": "field9",
-                    "key": "multiselectfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                      Object {
-                        "key": "maybe",
-                      },
-                      Object {
-                        "key": "idk?",
-                      },
-                      Object {
-                        "key": "oh well",
-                      },
-                      Object {
-                        "key": "whatever",
-                      },
-                    ],
-                    "type": "multiSelect",
-                  },
-                ],
-              }
-            }
-          />
-        </div>
-        <Footer
-          onCancel={[Function]}
-          onRemove={[Function]}
-          showSave={false}
-        />
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer when editing and no cascade policy 1`] = `
-<div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={
-      <Tooltip
-        constrainToScrollParent={false}
-        constrainToWindow={true}
-        isDisabled={false}
-        position="top-left"
-        theme="default"
+      <div
+        class="collapsible-card-header has-sticky-header"
       >
-        <PlainButton
-          aria-pressed={true}
-          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-          data-resin-target="metadata-instanceedit"
-          onClick={[Function]}
+        <button
+          aria-expanded="true"
+          class="btn-plain collapsible-card-title"
+          data-resin-target="metadata-cardcollapse"
           type="button"
         >
-          <IconEdit />
-        </PlainButton>
-      </Tooltip>
-    }
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
+          <span
+            class="metadata-instance-editor-instance-title"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-metadata "
+              focusable="false"
+              height="16"
+              role="presentation"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                class="fill-color"
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
+                fill="#0061d5"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <span
+              class="metadata-instance-editor-instance-title-text"
+            />
+          </span>
+          <svg
+            aria-hidden="true"
+            class="icon-caret-down collapsible-card-header-caret"
+            focusable="false"
+            height="6"
+            role="presentation"
+            viewBox="0 0 10 6"
+            width="8"
+          >
+            <path
+              class="fill-color"
+              d="M0 .5l5 5 5-5H0z"
+              fill="#909090"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
         <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
-    >
-      <Form
-        onValidSubmit={[Function]}
-      >
-        <div
-          className="metadata-instance-editor-instance"
+          class="bdl-Collapsible-actionItems"
         >
-          <CascadePolicy
-            canEdit={true}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={true}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [
-                  Object {
-                    "displayName": "No Description Field",
-                    "id": "field0",
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a string field",
-                    "displayName": "String Field",
-                    "id": "field1",
-                    "key": "stringfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of an empty string field",
-                    "displayName": "Empty String Field",
-                    "id": "field2",
-                    "key": "emptystring",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a float field",
-                    "displayName": "Float Field",
-                    "id": "field3",
-                    "key": "floatfield",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of an empty float field",
-                    "displayName": "Empty Float Field",
-                    "id": "field4",
-                    "key": "emptyfloat",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of a enum field",
-                    "displayName": "Enum Field",
-                    "id": "field5",
-                    "key": "enumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of an empty enum field",
-                    "displayName": "Empty Enum Field",
-                    "id": "field6",
-                    "key": "emptyenumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of a date field",
-                    "displayName": "Date Field",
-                    "id": "field7",
-                    "key": "datefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of an empty date field",
-                    "displayName": "Empty Date Field",
-                    "id": "field8",
-                    "key": "emptydatefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of a multi select field field",
-                    "displayName": "Multi Select Field",
-                    "id": "field9",
-                    "key": "multiselectfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                      Object {
-                        "key": "maybe",
-                      },
-                      Object {
-                        "key": "idk?",
-                      },
-                      Object {
-                        "key": "oh well",
-                      },
-                      Object {
-                        "key": "whatever",
-                      },
-                    ],
-                    "type": "multiSelect",
-                  },
-                ],
-              }
-            }
-          />
+          <button
+            aria-pressed="true"
+            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+            data-resin-target="metadata-instanceedit"
+            data-testid="metadata-instance-edit-button"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-edit "
+              focusable="false"
+              height="14"
+              role="presentation"
+              viewBox="0 0 14 14"
+              width="14"
+            >
+              <path
+                class="fill-color"
+                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
+                fill="#6f6f6f"
+              />
+            </svg>
+          </button>
+        </span>
+      </div>
+      <div
+        aria-hidden="false"
+        class="rah-static rah-static--height-auto"
+        style="height: auto; overflow: visible;"
+      >
+        <div>
+          <div
+            class="collapsible-card-content"
+          >
+            <div
+              class="loading-indicator-wrapper "
+            >
+              <form
+                novalidate=""
+              >
+                <div
+                  class="metadata-instance-editor-instance"
+                >
+                  <div
+                    class="metadata-cascade-editor"
+                  >
+                    <div
+                      class="metadata-cascade-enable"
+                    >
+                      <div>
+                        <div />
+                        <div
+                          class="toggle-container metadata-cascade-toggle cascade-off"
+                        >
+                          <label
+                            class="toggle-simple"
+                          >
+                            <input
+                              class="toggle-simple-input"
+                              role="switch"
+                              type="checkbox"
+                            />
+                            <div
+                              class="toggle-simple-switch"
+                            />
+                            <div
+                              class="toggle-simple-label"
+                            />
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        class="cascade-policy-text"
+                      >
+                        <div />
+                         
+                        <a
+                          class="link cascade-policy-learnmore-link"
+                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
+                          rel="noopener"
+                          target="_blank"
+                        >
+                          <div />
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          No Description Field
+                        </span>
+                      </span>
+                      <input
+                        aria-invalid="false"
+                        name="nodescfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description125"
+                      >
+                        example of a string field
+                      </div>
+                      <input
+                        aria-describedby="description125"
+                        aria-invalid="false"
+                        name="stringfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="some string"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description127"
+                      >
+                        example of an empty string field
+                      </div>
+                      <input
+                        aria-describedby="description127"
+                        aria-invalid="false"
+                        name="emptystring"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description129"
+                      >
+                        example of a float field
+                      </div>
+                      <input
+                        aria-describedby="description129"
+                        aria-invalid="false"
+                        name="floatfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="1"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description131"
+                      >
+                        example of an empty float field
+                      </div>
+                      <input
+                        aria-describedby="description131"
+                        aria-invalid="false"
+                        name="emptyfloat"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of a enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield133"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes"
+                          type="button"
+                        >
+                          yes
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of an empty enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield135"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="Select Value"
+                          type="button"
+                        >
+                          Select Value
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description138"
+                        >
+                          example of a date field
+                        </div>
+                        <input
+                          aria-describedby="description138"
+                          aria-errormessage="errorMessage137"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage137"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Clear Date"
+                        class="btn-plain date-picker-clear-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <path
+                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </button>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value="2018-06-20T00:00:00.000Z"
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Empty Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description143"
+                        >
+                          example of an empty date field
+                        </div>
+                        <input
+                          aria-describedby="description143"
+                          aria-errormessage="errorMessage142"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value=""
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage142"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value=""
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-MultiSelectMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Multi Select Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-MultiSelectMetadataField-desc"
+                      >
+                        example of a multi select field field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield146"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes, no"
+                          type="button"
+                        >
+                          yes, no
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="metadata-instance-editor-footer"
+                >
+                  <div
+                    class="metadata-instance-editor-footer-delete"
+                  >
+                    <button
+                      class="btn-plain "
+                      data-resin-target="metadata-instanceremove"
+                      type="button"
+                    >
+                      <div />
+                    </button>
+                  </div>
+                  <div
+                    class="metadata-instance-editor-footer-save-cancel"
+                  >
+                    <button
+                      class="btn"
+                      data-resin-target="metadata-instancecancel"
+                      type="button"
+                    >
+                      <span
+                        class="btn-content"
+                      >
+                        <div />
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
         </div>
-        <Footer
-          onCancel={[Function]}
-          onRemove={[Function]}
-          showSave={false}
-        />
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
-exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer with save button when dirty 1`] = `
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is null and isCascadingPolicyApplicable is true 1`] = `
 <div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={null}
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
+  <div>
+    <div
+      class="collapsible-card is-open is-bordered"
     >
-      <Form
-        onValidSubmit={[Function]}
+      <div
+        class="collapsible-card-header has-sticky-header"
       >
-        <div
-          className="metadata-instance-editor-instance"
+        <button
+          aria-expanded="true"
+          class="btn-plain collapsible-card-title"
+          data-resin-target="metadata-cardcollapse"
+          type="button"
         >
-          <CascadePolicy
-            canEdit={true}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={true}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [
-                  Object {
-                    "displayName": "No Description Field",
-                    "id": "field0",
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a string field",
-                    "displayName": "String Field",
-                    "id": "field1",
-                    "key": "stringfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of an empty string field",
-                    "displayName": "Empty String Field",
-                    "id": "field2",
-                    "key": "emptystring",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a float field",
-                    "displayName": "Float Field",
-                    "id": "field3",
-                    "key": "floatfield",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of an empty float field",
-                    "displayName": "Empty Float Field",
-                    "id": "field4",
-                    "key": "emptyfloat",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of a enum field",
-                    "displayName": "Enum Field",
-                    "id": "field5",
-                    "key": "enumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of an empty enum field",
-                    "displayName": "Empty Enum Field",
-                    "id": "field6",
-                    "key": "emptyenumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of a date field",
-                    "displayName": "Date Field",
-                    "id": "field7",
-                    "key": "datefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of an empty date field",
-                    "displayName": "Empty Date Field",
-                    "id": "field8",
-                    "key": "emptydatefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of a multi select field field",
-                    "displayName": "Multi Select Field",
-                    "id": "field9",
-                    "key": "multiselectfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                      Object {
-                        "key": "maybe",
-                      },
-                      Object {
-                        "key": "idk?",
-                      },
-                      Object {
-                        "key": "oh well",
-                      },
-                      Object {
-                        "key": "whatever",
-                      },
-                    ],
-                    "type": "multiSelect",
-                  },
-                ],
-              }
-            }
-          />
-        </div>
-        <Footer
-          onCancel={[Function]}
-          onRemove={[Function]}
-          showSave={true}
-        />
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should not render footer when not editing 1`] = `
-<div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={null}
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
+          <span
+            class="metadata-instance-editor-instance-title"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-metadata "
+              focusable="false"
+              height="16"
+              role="presentation"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                class="fill-color"
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
+                fill="#0061d5"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <span
+              class="metadata-instance-editor-instance-title-text"
+            />
+          </span>
+          <svg
+            aria-hidden="true"
+            class="icon-caret-down collapsible-card-header-caret"
+            focusable="false"
+            height="6"
+            role="presentation"
+            viewBox="0 0 10 6"
+            width="8"
+          >
+            <path
+              class="fill-color"
+              d="M0 .5l5 5 5-5H0z"
+              fill="#909090"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
         <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
-    >
-      <Form
-        onValidSubmit={[Function]}
-      >
-        <div
-          className="metadata-instance-editor-instance"
+          class="bdl-Collapsible-actionItems"
         >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={false}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [
-                  Object {
-                    "displayName": "No Description Field",
-                    "id": "field0",
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a string field",
-                    "displayName": "String Field",
-                    "id": "field1",
-                    "key": "stringfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of an empty string field",
-                    "displayName": "Empty String Field",
-                    "id": "field2",
-                    "key": "emptystring",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a float field",
-                    "displayName": "Float Field",
-                    "id": "field3",
-                    "key": "floatfield",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of an empty float field",
-                    "displayName": "Empty Float Field",
-                    "id": "field4",
-                    "key": "emptyfloat",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of a enum field",
-                    "displayName": "Enum Field",
-                    "id": "field5",
-                    "key": "enumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of an empty enum field",
-                    "displayName": "Empty Enum Field",
-                    "id": "field6",
-                    "key": "emptyenumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of a date field",
-                    "displayName": "Date Field",
-                    "id": "field7",
-                    "key": "datefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of an empty date field",
-                    "displayName": "Empty Date Field",
-                    "id": "field8",
-                    "key": "emptydatefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of a multi select field field",
-                    "displayName": "Multi Select Field",
-                    "id": "field9",
-                    "key": "multiselectfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                      Object {
-                        "key": "maybe",
-                      },
-                      Object {
-                        "key": "idk?",
-                      },
-                      Object {
-                        "key": "oh well",
-                      },
-                      Object {
-                        "key": "whatever",
-                      },
-                    ],
-                    "type": "multiSelect",
-                  },
-                ],
-              }
-            }
-          />
+          <button
+            aria-pressed="true"
+            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+            data-resin-target="metadata-instanceedit"
+            data-testid="metadata-instance-edit-button"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-edit "
+              focusable="false"
+              height="14"
+              role="presentation"
+              viewBox="0 0 14 14"
+              width="14"
+            >
+              <path
+                class="fill-color"
+                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
+                fill="#6f6f6f"
+              />
+            </svg>
+          </button>
+        </span>
+      </div>
+      <div
+        aria-hidden="false"
+        class="rah-static rah-static--height-auto"
+        style="height: auto; overflow: visible;"
+      >
+        <div>
+          <div
+            class="collapsible-card-content"
+          >
+            <div
+              class="loading-indicator-wrapper "
+            >
+              <form
+                novalidate=""
+              >
+                <div
+                  class="metadata-instance-editor-instance"
+                >
+                  <div
+                    class="metadata-cascade-editor"
+                  >
+                    <div
+                      class="metadata-cascade-enable"
+                    >
+                      <div>
+                        <div />
+                        <div
+                          class="toggle-container metadata-cascade-toggle cascade-off"
+                        >
+                          <label
+                            class="toggle-simple"
+                          >
+                            <input
+                              class="toggle-simple-input"
+                              role="switch"
+                              type="checkbox"
+                            />
+                            <div
+                              class="toggle-simple-switch"
+                            />
+                            <div
+                              class="toggle-simple-label"
+                            />
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        class="cascade-policy-text"
+                      >
+                        <div />
+                         
+                        <a
+                          class="link cascade-policy-learnmore-link"
+                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
+                          rel="noopener"
+                          target="_blank"
+                        >
+                          <div />
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          No Description Field
+                        </span>
+                      </span>
+                      <input
+                        aria-invalid="false"
+                        name="nodescfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description96"
+                      >
+                        example of a string field
+                      </div>
+                      <input
+                        aria-describedby="description96"
+                        aria-invalid="false"
+                        name="stringfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="some string"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description98"
+                      >
+                        example of an empty string field
+                      </div>
+                      <input
+                        aria-describedby="description98"
+                        aria-invalid="false"
+                        name="emptystring"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description100"
+                      >
+                        example of a float field
+                      </div>
+                      <input
+                        aria-describedby="description100"
+                        aria-invalid="false"
+                        name="floatfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="1"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description102"
+                      >
+                        example of an empty float field
+                      </div>
+                      <input
+                        aria-describedby="description102"
+                        aria-invalid="false"
+                        name="emptyfloat"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of a enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield104"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes"
+                          type="button"
+                        >
+                          yes
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of an empty enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield106"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="Select Value"
+                          type="button"
+                        >
+                          Select Value
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description109"
+                        >
+                          example of a date field
+                        </div>
+                        <input
+                          aria-describedby="description109"
+                          aria-errormessage="errorMessage108"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage108"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Clear Date"
+                        class="btn-plain date-picker-clear-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <path
+                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </button>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value="2018-06-20T00:00:00.000Z"
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Empty Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description114"
+                        >
+                          example of an empty date field
+                        </div>
+                        <input
+                          aria-describedby="description114"
+                          aria-errormessage="errorMessage113"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value=""
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage113"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value=""
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-MultiSelectMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Multi Select Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-MultiSelectMetadataField-desc"
+                      >
+                        example of a multi select field field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield117"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes, no"
+                          type="button"
+                        >
+                          yes, no
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="metadata-instance-editor-footer"
+                >
+                  <div
+                    class="metadata-instance-editor-footer-delete"
+                  >
+                    <button
+                      class="btn-plain "
+                      data-resin-target="metadata-instanceremove"
+                      type="button"
+                    >
+                      <div />
+                    </button>
+                  </div>
+                  <div
+                    class="metadata-instance-editor-footer-save-cancel"
+                  >
+                    <button
+                      class="btn"
+                      data-resin-target="metadata-instancecancel"
+                      type="button"
+                    >
+                      <span
+                        class="btn-content"
+                      >
+                        <div />
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
         </div>
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
+      </div>
+    </div>
+  </div>
 </div>
 `;

From b3bf5ad4090c4fc658716986fd4360dbd36f31c4 Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Wed, 26 Jul 2023 09:55:37 -0400
Subject: [PATCH 03/25] fix(metadata): Disable updates to metadata

---
 .../__snapshots__/Instance.test.js.snap       | 1576 +++++++++++++++++
 1 file changed, 1576 insertions(+)

diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
index 202f8a159e..65d4061f7c 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
@@ -1,5 +1,410 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`features/metadata-instance-editor/fields/Instance collapsible isOpen prop should be true 1`] = `
+<div>
+  <Collapsible
+    animationDuration={50}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={
+      <Tooltip
+        constrainToScrollParent={false}
+        constrainToWindow={true}
+        isDisabled={false}
+        position="top-left"
+        theme="default"
+      >
+        <PlainButton
+          aria-pressed={false}
+          className="metadata-instance-editor-instance-edit"
+          data-resin-target="metadata-instanceedit"
+          data-testid="metadata-instance-edit-button"
+          onClick={[Function]}
+          type="button"
+        >
+          <IconEdit />
+        </PlainButton>
+      </Tooltip>
+    }
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={false}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={false}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "singleTemplateField": Array [
+                  Object {
+                    "description": "example of an empty enum field",
+                    "displayName": "Empty Enum Field",
+                    "id": "field0",
+                    "key": "emptyenumfield",
+                    "type": "enum",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance message id should be fileMetadataRemoveCustomTemplateConfirm 1`] = `
+<FormattedMessage
+  defaultMessage="Are you sure you want to delete this custom metadata and all of its values from this file?"
+  id="boxui.metadataInstanceEditor.fileMetadataRemoveCustomTemplateConfirm"
+  values={
+    Object {
+      "metadataName": "Empty Enum Field",
+    }
+  }
+/>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance message id should be fileMetadataRemoveTemplateConfirm 1`] = `
+<FormattedMessage
+  defaultMessage="Are you sure you want to delete \\"{metadataName}\\" and all of its values from this file?"
+  id="boxui.metadataInstanceEditor.fileMetadataRemoveTemplateConfirm"
+  values={
+    Object {
+      "metadataName": "Empty Enum Field",
+    }
+  }
+/>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance message id should be folderMetadataRemoveCustomTemplateConfirm 1`] = `
+<FormattedMessage
+  defaultMessage="Are you sure you want to delete this custom metadata and all of its values? Any metadata template values already applied to files in this folder will not be deleted."
+  id="boxui.metadataInstanceEditor.folderMetadataRemoveCustomTemplateConfirm"
+  values={
+    Object {
+      "metadataName": "Empty Enum Field",
+    }
+  }
+/>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance message id should be folderMetadataRemoveTemplateConfirm 1`] = `
+<FormattedMessage
+  defaultMessage="Are you sure you want to delete \\"{metadataName}\\" and all of its values? Any metadata template values already applied to files in this folder will not be deleted."
+  id="boxui.metadataInstanceEditor.folderMetadataRemoveTemplateConfirm"
+  values={
+    Object {
+      "metadataName": "Empty Enum Field",
+    }
+  }
+/>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render custom metadata instance 1`] = `
+<div>
+  <Collapsible
+    animationDuration={550}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={null}
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        >
+          <FormattedMessage
+            defaultMessage="Custom Metadata"
+            id="boxui.metadataInstanceEditor.customTitle"
+          />
+        </span>
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={false}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={true}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <CustomInstance
+            canEdit={false}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+          />
+        </div>
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance 1`] = `
+<div>
+  <Collapsible
+    animationDuration={550}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={null}
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={false}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={false}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [
+                  Object {
+                    "displayName": "No Description Field",
+                    "id": "field0",
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a string field",
+                    "displayName": "String Field",
+                    "id": "field1",
+                    "key": "stringfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of an empty string field",
+                    "displayName": "Empty String Field",
+                    "id": "field2",
+                    "key": "emptystring",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a float field",
+                    "displayName": "Float Field",
+                    "id": "field3",
+                    "key": "floatfield",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of an empty float field",
+                    "displayName": "Empty Float Field",
+                    "id": "field4",
+                    "key": "emptyfloat",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of a enum field",
+                    "displayName": "Enum Field",
+                    "id": "field5",
+                    "key": "enumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of an empty enum field",
+                    "displayName": "Empty Enum Field",
+                    "id": "field6",
+                    "key": "emptyenumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of a date field",
+                    "displayName": "Date Field",
+                    "id": "field7",
+                    "key": "datefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of an empty date field",
+                    "displayName": "Empty Date Field",
+                    "id": "field8",
+                    "key": "emptydatefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of a multi select field field",
+                    "displayName": "Multi Select Field",
+                    "id": "field9",
+                    "key": "multiselectfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                      Object {
+                        "key": "maybe",
+                      },
+                      Object {
+                        "key": "idk?",
+                      },
+                      Object {
+                        "key": "oh well",
+                      },
+                      Object {
+                        "key": "whatever",
+                      },
+                    ],
+                    "type": "multiSelect",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
 exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true, "id": "hello"} and isCascadingPolicyApplicable is false 1`] = `
 <div>
   <div>
@@ -3685,3 +4090,1174 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
   </div>
 </div>
 `;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render the busy indicator 1`] = `
+<div>
+  <Collapsible
+    animationDuration={550}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={null}
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={true}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={false}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={false}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [
+                  Object {
+                    "displayName": "No Description Field",
+                    "id": "field0",
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a string field",
+                    "displayName": "String Field",
+                    "id": "field1",
+                    "key": "stringfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of an empty string field",
+                    "displayName": "Empty String Field",
+                    "id": "field2",
+                    "key": "emptystring",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a float field",
+                    "displayName": "Float Field",
+                    "id": "field3",
+                    "key": "floatfield",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of an empty float field",
+                    "displayName": "Empty Float Field",
+                    "id": "field4",
+                    "key": "emptyfloat",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of a enum field",
+                    "displayName": "Enum Field",
+                    "id": "field5",
+                    "key": "enumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of an empty enum field",
+                    "displayName": "Empty Enum Field",
+                    "id": "field6",
+                    "key": "emptyenumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of a date field",
+                    "displayName": "Date Field",
+                    "id": "field7",
+                    "key": "datefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of an empty date field",
+                    "displayName": "Empty Date Field",
+                    "id": "field8",
+                    "key": "emptydatefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of a multi select field field",
+                    "displayName": "Multi Select Field",
+                    "id": "field9",
+                    "key": "multiselectfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                      Object {
+                        "key": "maybe",
+                      },
+                      Object {
+                        "key": "idk?",
+                      },
+                      Object {
+                        "key": "oh well",
+                      },
+                      Object {
+                        "key": "whatever",
+                      },
+                    ],
+                    "type": "multiSelect",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer even when all fields are hidden 1`] = `
+<div>
+  <Collapsible
+    animationDuration={150}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={
+      <Tooltip
+        constrainToScrollParent={false}
+        constrainToWindow={true}
+        isDisabled={false}
+        position="top-left"
+        theme="default"
+      >
+        <PlainButton
+          aria-pressed={true}
+          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+          data-resin-target="metadata-instanceedit"
+          data-testid="metadata-instance-edit-button"
+          onClick={[Function]}
+          type="button"
+        >
+          <IconEdit />
+        </PlainButton>
+      </Tooltip>
+    }
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={true}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={true}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [
+                  Object {
+                    "displayName": "No Description Field that is hidden",
+                    "hidden": true,
+                    "id": "field0",
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "displayName": "No Description Field that is also hidden",
+                    "id": "field1",
+                    "isHidden": true,
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+        <Footer
+          onCancel={[Function]}
+          onRemove={[Function]}
+          showSave={false}
+        />
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer even when there are no fields in a template 1`] = `
+<div>
+  <Collapsible
+    animationDuration={50}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={
+      <Tooltip
+        constrainToScrollParent={false}
+        constrainToWindow={true}
+        isDisabled={false}
+        position="top-left"
+        theme="default"
+      >
+        <PlainButton
+          aria-pressed={true}
+          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+          data-resin-target="metadata-instanceedit"
+          data-testid="metadata-instance-edit-button"
+          onClick={[Function]}
+          type="button"
+        >
+          <IconEdit />
+        </PlainButton>
+      </Tooltip>
+    }
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={true}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={true}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [],
+              }
+            }
+          />
+        </div>
+        <Footer
+          onCancel={[Function]}
+          onRemove={[Function]}
+          showSave={false}
+        />
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer when editing and cascade policy 1`] = `
+<div>
+  <Collapsible
+    animationDuration={550}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={
+      <Tooltip
+        constrainToScrollParent={false}
+        constrainToWindow={true}
+        isDisabled={false}
+        position="top-left"
+        theme="default"
+      >
+        <PlainButton
+          aria-pressed={true}
+          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+          data-resin-target="metadata-instanceedit"
+          data-testid="metadata-instance-edit-button"
+          onClick={[Function]}
+          type="button"
+        >
+          <IconEdit />
+        </PlainButton>
+      </Tooltip>
+    }
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="cascade"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={true}
+            isCascadingEnabled={true}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={true}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [
+                  Object {
+                    "displayName": "No Description Field",
+                    "id": "field0",
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a string field",
+                    "displayName": "String Field",
+                    "id": "field1",
+                    "key": "stringfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of an empty string field",
+                    "displayName": "Empty String Field",
+                    "id": "field2",
+                    "key": "emptystring",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a float field",
+                    "displayName": "Float Field",
+                    "id": "field3",
+                    "key": "floatfield",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of an empty float field",
+                    "displayName": "Empty Float Field",
+                    "id": "field4",
+                    "key": "emptyfloat",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of a enum field",
+                    "displayName": "Enum Field",
+                    "id": "field5",
+                    "key": "enumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of an empty enum field",
+                    "displayName": "Empty Enum Field",
+                    "id": "field6",
+                    "key": "emptyenumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of a date field",
+                    "displayName": "Date Field",
+                    "id": "field7",
+                    "key": "datefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of an empty date field",
+                    "displayName": "Empty Date Field",
+                    "id": "field8",
+                    "key": "emptydatefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of a multi select field field",
+                    "displayName": "Multi Select Field",
+                    "id": "field9",
+                    "key": "multiselectfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                      Object {
+                        "key": "maybe",
+                      },
+                      Object {
+                        "key": "idk?",
+                      },
+                      Object {
+                        "key": "oh well",
+                      },
+                      Object {
+                        "key": "whatever",
+                      },
+                    ],
+                    "type": "multiSelect",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+        <Footer
+          onCancel={[Function]}
+          onRemove={[Function]}
+          showSave={false}
+        />
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer when editing and no cascade policy 1`] = `
+<div>
+  <Collapsible
+    animationDuration={550}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={
+      <Tooltip
+        constrainToScrollParent={false}
+        constrainToWindow={true}
+        isDisabled={false}
+        position="top-left"
+        theme="default"
+      >
+        <PlainButton
+          aria-pressed={true}
+          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+          data-resin-target="metadata-instanceedit"
+          data-testid="metadata-instance-edit-button"
+          onClick={[Function]}
+          type="button"
+        >
+          <IconEdit />
+        </PlainButton>
+      </Tooltip>
+    }
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={true}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={true}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [
+                  Object {
+                    "displayName": "No Description Field",
+                    "id": "field0",
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a string field",
+                    "displayName": "String Field",
+                    "id": "field1",
+                    "key": "stringfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of an empty string field",
+                    "displayName": "Empty String Field",
+                    "id": "field2",
+                    "key": "emptystring",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a float field",
+                    "displayName": "Float Field",
+                    "id": "field3",
+                    "key": "floatfield",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of an empty float field",
+                    "displayName": "Empty Float Field",
+                    "id": "field4",
+                    "key": "emptyfloat",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of a enum field",
+                    "displayName": "Enum Field",
+                    "id": "field5",
+                    "key": "enumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of an empty enum field",
+                    "displayName": "Empty Enum Field",
+                    "id": "field6",
+                    "key": "emptyenumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of a date field",
+                    "displayName": "Date Field",
+                    "id": "field7",
+                    "key": "datefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of an empty date field",
+                    "displayName": "Empty Date Field",
+                    "id": "field8",
+                    "key": "emptydatefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of a multi select field field",
+                    "displayName": "Multi Select Field",
+                    "id": "field9",
+                    "key": "multiselectfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                      Object {
+                        "key": "maybe",
+                      },
+                      Object {
+                        "key": "idk?",
+                      },
+                      Object {
+                        "key": "oh well",
+                      },
+                      Object {
+                        "key": "whatever",
+                      },
+                    ],
+                    "type": "multiSelect",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+        <Footer
+          onCancel={[Function]}
+          onRemove={[Function]}
+          showSave={false}
+        />
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer with save button when dirty 1`] = `
+<div>
+  <Collapsible
+    animationDuration={550}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={null}
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={true}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={true}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [
+                  Object {
+                    "displayName": "No Description Field",
+                    "id": "field0",
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a string field",
+                    "displayName": "String Field",
+                    "id": "field1",
+                    "key": "stringfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of an empty string field",
+                    "displayName": "Empty String Field",
+                    "id": "field2",
+                    "key": "emptystring",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a float field",
+                    "displayName": "Float Field",
+                    "id": "field3",
+                    "key": "floatfield",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of an empty float field",
+                    "displayName": "Empty Float Field",
+                    "id": "field4",
+                    "key": "emptyfloat",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of a enum field",
+                    "displayName": "Enum Field",
+                    "id": "field5",
+                    "key": "enumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of an empty enum field",
+                    "displayName": "Empty Enum Field",
+                    "id": "field6",
+                    "key": "emptyenumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of a date field",
+                    "displayName": "Date Field",
+                    "id": "field7",
+                    "key": "datefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of an empty date field",
+                    "displayName": "Empty Date Field",
+                    "id": "field8",
+                    "key": "emptydatefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of a multi select field field",
+                    "displayName": "Multi Select Field",
+                    "id": "field9",
+                    "key": "multiselectfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                      Object {
+                        "key": "maybe",
+                      },
+                      Object {
+                        "key": "idk?",
+                      },
+                      Object {
+                        "key": "oh well",
+                      },
+                      Object {
+                        "key": "whatever",
+                      },
+                    ],
+                    "type": "multiSelect",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+        <Footer
+          onCancel={[Function]}
+          onRemove={[Function]}
+          showSave={true}
+        />
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should not render footer when not editing 1`] = `
+<div>
+  <Collapsible
+    animationDuration={550}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={null}
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={false}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={false}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [
+                  Object {
+                    "displayName": "No Description Field",
+                    "id": "field0",
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a string field",
+                    "displayName": "String Field",
+                    "id": "field1",
+                    "key": "stringfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of an empty string field",
+                    "displayName": "Empty String Field",
+                    "id": "field2",
+                    "key": "emptystring",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a float field",
+                    "displayName": "Float Field",
+                    "id": "field3",
+                    "key": "floatfield",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of an empty float field",
+                    "displayName": "Empty Float Field",
+                    "id": "field4",
+                    "key": "emptyfloat",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of a enum field",
+                    "displayName": "Enum Field",
+                    "id": "field5",
+                    "key": "enumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of an empty enum field",
+                    "displayName": "Empty Enum Field",
+                    "id": "field6",
+                    "key": "emptyenumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of a date field",
+                    "displayName": "Date Field",
+                    "id": "field7",
+                    "key": "datefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of an empty date field",
+                    "displayName": "Empty Date Field",
+                    "id": "field8",
+                    "key": "emptydatefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of a multi select field field",
+                    "displayName": "Multi Select Field",
+                    "id": "field9",
+                    "key": "multiselectfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                      Object {
+                        "key": "maybe",
+                      },
+                      Object {
+                        "key": "idk?",
+                      },
+                      Object {
+                        "key": "oh well",
+                      },
+                      Object {
+                        "key": "whatever",
+                      },
+                    ],
+                    "type": "multiSelect",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;

From 66ced6dde2acca6ea72138623176dc52df1cb103 Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Wed, 26 Jul 2023 10:30:27 -0400
Subject: [PATCH 04/25] fix(metadata): Disable updates to metadata

---
 src/components/plain-button/PlainButton.tsx       |  1 +
 .../__tests__/Instance.test.js                    |  4 ++--
 .../__tests__/__snapshots__/Instance.test.js.snap | 15 +++++++++++++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/plain-button/PlainButton.tsx b/src/components/plain-button/PlainButton.tsx
index 6c66a61520..fa63e4d02e 100644
--- a/src/components/plain-button/PlainButton.tsx
+++ b/src/components/plain-button/PlainButton.tsx
@@ -34,6 +34,7 @@ const PlainButton = ({
             event.stopPropagation();
         };
     }
+    // console.log(rest);
 
     return (
         // eslint-disable-next-line react/button-has-type
diff --git a/src/features/metadata-instance-editor/__tests__/Instance.test.js b/src/features/metadata-instance-editor/__tests__/Instance.test.js
index 2d1326f69f..93564e4f5f 100644
--- a/src/features/metadata-instance-editor/__tests__/Instance.test.js
+++ b/src/features/metadata-instance-editor/__tests__/Instance.test.js
@@ -148,7 +148,7 @@ const userDefinedTemplateField = [
     },
 ];
 
-const intl = { formatMessage: () => {} };
+const intl = { formatMessage: jest.fn().mockReturnValue('Edit Metadata') };
 
 describe('features/metadata-instance-editor/fields/Instance', () => {
     test('should correctly render templated metadata instance', () => {
@@ -194,7 +194,7 @@ describe('features/metadata-instance-editor/fields/Instance', () => {
                 />,
             );
 
-            const editButton = screen.queryByTestId('metadata-instance-edit-button');
+            const editButton = screen.queryByLabelText('Edit Metadata');
             if (editButton) {
                 fireEvent.click(editButton);
             }
diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
index 65d4061f7c..3f447ae372 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
@@ -17,9 +17,11 @@ exports[`features/metadata-instance-editor/fields/Instance collapsible isOpen pr
         constrainToWindow={true}
         isDisabled={false}
         position="top-left"
+        text="Edit Metadata"
         theme="default"
       >
         <PlainButton
+          aria-label="Edit Metadata"
           aria-pressed={false}
           className="metadata-instance-editor-instance-edit"
           data-resin-target="metadata-instanceedit"
@@ -699,6 +701,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
           class="bdl-Collapsible-actionItems"
         >
           <button
+            aria-label="Edit Metadata"
             aria-pressed="true"
             class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
             data-resin-target="metadata-instanceedit"
@@ -1390,6 +1393,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
           class="bdl-Collapsible-actionItems"
         >
           <button
+            aria-label="Edit Metadata"
             aria-pressed="true"
             class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
             data-resin-target="metadata-instanceedit"
@@ -2080,6 +2084,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
           class="bdl-Collapsible-actionItems"
         >
           <button
+            aria-label="Edit Metadata"
             aria-pressed="true"
             class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
             data-resin-target="metadata-instanceedit"
@@ -2770,6 +2775,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
           class="bdl-Collapsible-actionItems"
         >
           <button
+            aria-label="Edit Metadata"
             aria-pressed="true"
             class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
             data-resin-target="metadata-instanceedit"
@@ -3460,6 +3466,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
           class="bdl-Collapsible-actionItems"
         >
           <button
+            aria-label="Edit Metadata"
             aria-pressed="true"
             class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
             data-resin-target="metadata-instanceedit"
@@ -4289,9 +4296,11 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
         constrainToWindow={true}
         isDisabled={false}
         position="top-left"
+        text="Edit Metadata"
         theme="default"
       >
         <PlainButton
+          aria-label="Edit Metadata"
           aria-pressed={true}
           className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
           data-resin-target="metadata-instanceedit"
@@ -4403,9 +4412,11 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
         constrainToWindow={true}
         isDisabled={false}
         position="top-left"
+        text="Edit Metadata"
         theme="default"
       >
         <PlainButton
+          aria-label="Edit Metadata"
           aria-pressed={true}
           className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
           data-resin-target="metadata-instanceedit"
@@ -4502,9 +4513,11 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
         constrainToWindow={true}
         isDisabled={false}
         position="top-left"
+        text="Edit Metadata"
         theme="default"
       >
         <PlainButton
+          aria-label="Edit Metadata"
           aria-pressed={true}
           className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
           data-resin-target="metadata-instanceedit"
@@ -4707,9 +4720,11 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
         constrainToWindow={true}
         isDisabled={false}
         position="top-left"
+        text="Edit Metadata"
         theme="default"
       >
         <PlainButton
+          aria-label="Edit Metadata"
           aria-pressed={true}
           className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
           data-resin-target="metadata-instanceedit"

From bd22736c99c1baffbea9096ace074c19bb7b7a97 Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Wed, 26 Jul 2023 10:32:03 -0400
Subject: [PATCH 05/25] fix(metadata): Disable updates to metadata

---
 src/features/metadata-instance-editor/Instance.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/features/metadata-instance-editor/Instance.js b/src/features/metadata-instance-editor/Instance.js
index c698167b09..d797f2897e 100644
--- a/src/features/metadata-instance-editor/Instance.js
+++ b/src/features/metadata-instance-editor/Instance.js
@@ -571,7 +571,6 @@ class Instance extends React.PureComponent<Props, State> {
                         data-resin-target="metadata-instanceedit"
                         onClick={this.toggleIsEditing}
                         type="button"
-                        data-testid="metadata-instance-edit-button"
                     >
                         <IconEdit />
                     </PlainButton>

From b00d3e0856cc20b328440e8eddfce8c4127f5215 Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Wed, 26 Jul 2023 10:33:19 -0400
Subject: [PATCH 06/25] fix(metadata): Disable updates to metadata

---
 src/components/plain-button/PlainButton.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/plain-button/PlainButton.tsx b/src/components/plain-button/PlainButton.tsx
index fa63e4d02e..6c66a61520 100644
--- a/src/components/plain-button/PlainButton.tsx
+++ b/src/components/plain-button/PlainButton.tsx
@@ -34,7 +34,6 @@ const PlainButton = ({
             event.stopPropagation();
         };
     }
-    // console.log(rest);
 
     return (
         // eslint-disable-next-line react/button-has-type

From ca8e8fc3017f9e57183707a56850a53b772e3734 Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Wed, 26 Jul 2023 10:44:15 -0400
Subject: [PATCH 07/25] fix(metadata): Disable updates to metadata

---
 .../__tests__/__snapshots__/Instance.test.js.snap      | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
index 3f447ae372..7b18064773 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
@@ -25,7 +25,6 @@ exports[`features/metadata-instance-editor/fields/Instance collapsible isOpen pr
           aria-pressed={false}
           className="metadata-instance-editor-instance-edit"
           data-resin-target="metadata-instanceedit"
-          data-testid="metadata-instance-edit-button"
           onClick={[Function]}
           type="button"
         >
@@ -705,7 +704,6 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
             aria-pressed="true"
             class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
             data-resin-target="metadata-instanceedit"
-            data-testid="metadata-instance-edit-button"
             tabindex="0"
             type="button"
           >
@@ -1397,7 +1395,6 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
             aria-pressed="true"
             class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
             data-resin-target="metadata-instanceedit"
-            data-testid="metadata-instance-edit-button"
             tabindex="0"
             type="button"
           >
@@ -2088,7 +2085,6 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
             aria-pressed="true"
             class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
             data-resin-target="metadata-instanceedit"
-            data-testid="metadata-instance-edit-button"
             tabindex="0"
             type="button"
           >
@@ -2779,7 +2775,6 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
             aria-pressed="true"
             class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
             data-resin-target="metadata-instanceedit"
-            data-testid="metadata-instance-edit-button"
             tabindex="0"
             type="button"
           >
@@ -3470,7 +3465,6 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
             aria-pressed="true"
             class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
             data-resin-target="metadata-instanceedit"
-            data-testid="metadata-instance-edit-button"
             tabindex="0"
             type="button"
           >
@@ -4304,7 +4298,6 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
           aria-pressed={true}
           className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
           data-resin-target="metadata-instanceedit"
-          data-testid="metadata-instance-edit-button"
           onClick={[Function]}
           type="button"
         >
@@ -4420,7 +4413,6 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
           aria-pressed={true}
           className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
           data-resin-target="metadata-instanceedit"
-          data-testid="metadata-instance-edit-button"
           onClick={[Function]}
           type="button"
         >
@@ -4521,7 +4513,6 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
           aria-pressed={true}
           className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
           data-resin-target="metadata-instanceedit"
-          data-testid="metadata-instance-edit-button"
           onClick={[Function]}
           type="button"
         >
@@ -4728,7 +4719,6 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
           aria-pressed={true}
           className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
           data-resin-target="metadata-instanceedit"
-          data-testid="metadata-instance-edit-button"
           onClick={[Function]}
           type="button"
         >

From 255ebf5d53cc0d78b5188b2fc7d491e03bde812e Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Thu, 27 Jul 2023 13:32:57 -0400
Subject: [PATCH 08/25] fix(metadata): Disable updates to metadata

---
 .../metadata-instance-editor/Instance.js      |   53 +-
 .../__snapshots__/Instance.test.js.snap       | 5066 +----------------
 2 files changed, 158 insertions(+), 4961 deletions(-)

diff --git a/src/features/metadata-instance-editor/Instance.js b/src/features/metadata-instance-editor/Instance.js
index d797f2897e..5e01a9e1b4 100644
--- a/src/features/metadata-instance-editor/Instance.js
+++ b/src/features/metadata-instance-editor/Instance.js
@@ -52,7 +52,7 @@ type Props = {
     hasError: boolean,
     id: string,
     intl: Object,
-    isCascadingPolicyApplicable?: boolean,
+    isCascadingPolicyApplicable: boolean,
     isDirty: boolean,
     isOpen: boolean,
     onModification?: (id: string, isDirty: boolean, type?: string) => void,
@@ -102,6 +102,7 @@ class Instance extends React.PureComponent<Props, State> {
     static defaultProps = {
         data: {},
         isDirty: false,
+        isCascadingPolicyApplicable: false,
     };
 
     constructor(props: Props) {
@@ -207,10 +208,11 @@ class Instance extends React.PureComponent<Props, State> {
             isDirty,
             isCascadingPolicyApplicable,
             onSave,
+            template,
         }: Props = this.props;
         const { data: currentData, errors, isCascadingEnabled, isCascadingOverwritten }: State = this.state;
-        const hasCascadePolicy = !!cascadePolicy?.id;
-        const hasCascadePermission = !hasCascadePolicy || (hasCascadePolicy && isCascadingPolicyApplicable);
+        const isCustomInstance = template.templateKey === TEMPLATE_CUSTOM_PROPERTIES;
+        const hasCascadePermission = isCustomInstance ? true : isCascadingPolicyApplicable;
 
         if (!this.isEditing() || !isDirty || !onSave || Object.keys(errors).length) {
             return;
@@ -532,12 +534,16 @@ class Instance extends React.PureComponent<Props, State> {
      * @return {boolean} true if editable
      */
     canEdit(): boolean {
-        const { canEdit, onModification, onRemove, onSave }: Props = this.props;
-        return (
+        const { canEdit, onModification, onRemove, onSave, template, isCascadingPolicyApplicable }: Props = this.props;
+        const isCustom = template.templateKey === TEMPLATE_CUSTOM_PROPERTIES;
+        const hasCascadePermission = isCustom ? true : isCascadingPolicyApplicable;
+
+        return !!(
             canEdit &&
             typeof onRemove === 'function' &&
             typeof onSave === 'function' &&
-            typeof onModification === 'function'
+            typeof onModification === 'function' &&
+            hasCascadePermission
         );
     }
 
@@ -551,10 +557,10 @@ class Instance extends React.PureComponent<Props, State> {
         return this.canEdit() && isEditing;
     }
 
-    renderEditButton = (canEditInstance: boolean) => {
+    renderEditButton = () => {
         const { intl, isDirty }: Props = this.props;
         const { isBusy }: State = this.state;
-        const canEdit = this.canEdit() && canEditInstance;
+        const canEdit = this.canEdit();
         const isEditing = this.isEditing();
         const editClassName = classNames('metadata-instance-editor-instance-edit', {
             'metadata-instance-editor-instance-is-editing': isEditing,
@@ -581,13 +587,7 @@ class Instance extends React.PureComponent<Props, State> {
     };
 
     render() {
-        const {
-            cascadePolicy = {},
-            isDirty,
-            isCascadingPolicyApplicable = false, // does user have cascading policy permissions
-            isOpen,
-            template,
-        }: Props = this.props;
+        const { isDirty, isOpen, template }: Props = this.props;
         const { fields = [] } = template;
         const {
             data,
@@ -598,11 +598,10 @@ class Instance extends React.PureComponent<Props, State> {
             shouldShowCascadeOptions,
             isCascadingOverwritten,
         }: State = this.state;
-        const isProperties = template.templateKey === TEMPLATE_CUSTOM_PROPERTIES;
-        const isEditing = this.isEditing();
-        const hasCascadePolicy = !!cascadePolicy?.id;
-        const hasCascadePermission = !hasCascadePolicy || (hasCascadePolicy && isCascadingPolicyApplicable);
-        const canEditInstance = !!(isEditing && hasCascadePermission);
+        const isCustomInstance = template.templateKey === TEMPLATE_CUSTOM_PROPERTIES;
+        console.log(this.isEditing());
+        console.log(this.props);
+        console.log(this.state);
 
         if (!template || isHidden(template)) {
             return null;
@@ -619,7 +618,7 @@ class Instance extends React.PureComponent<Props, State> {
                         [RESIN_TAG_TARGET]: 'metadata-card',
                     }}
                     hasStickyHeader
-                    headerActionItems={this.renderEditButton(hasCascadePermission)}
+                    headerActionItems={this.renderEditButton()}
                     isBordered
                     isOpen={isOpen}
                     title={this.getTitle()}
@@ -638,25 +637,25 @@ class Instance extends React.PureComponent<Props, State> {
                             <Form onValidSubmit={isDirty ? this.onSave : noop}>
                                 <div className="metadata-instance-editor-instance">
                                     <CascadePolicy
-                                        canEdit={canEditInstance}
+                                        canEdit={this.isEditing()}
                                         isCascadingEnabled={isCascadingEnabled}
                                         isCascadingOverwritten={isCascadingOverwritten}
-                                        isCustomMetadata={isProperties}
+                                        isCustomMetadata={isCustomInstance}
                                         onCascadeModeChange={this.onCascadeModeChange}
                                         onCascadeToggle={this.onCascadeToggle}
                                         shouldShowCascadeOptions={shouldShowCascadeOptions}
                                     />
 
-                                    {isProperties ? (
+                                    {isCustomInstance ? (
                                         <CustomInstance
-                                            canEdit={canEditInstance}
+                                            canEdit={this.isEditing()}
                                             data={data}
                                             onFieldChange={this.onFieldChange}
                                             onFieldRemove={this.onFieldRemove}
                                         />
                                     ) : (
                                         <TemplatedInstance
-                                            canEdit={canEditInstance}
+                                            canEdit={this.isEditing()}
                                             data={data}
                                             errors={errors}
                                             onFieldChange={this.onFieldChange}
@@ -665,7 +664,7 @@ class Instance extends React.PureComponent<Props, State> {
                                         />
                                     )}
                                 </div>
-                                {canEditInstance && (
+                                {this.isEditing() && (
                                     <Footer
                                         onCancel={this.onCancel}
                                         onRemove={this.onConfirmRemove}
diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
index 7b18064773..8574a58c55 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
@@ -1,411 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`features/metadata-instance-editor/fields/Instance collapsible isOpen prop should be true 1`] = `
-<div>
-  <Collapsible
-    animationDuration={50}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={
-      <Tooltip
-        constrainToScrollParent={false}
-        constrainToWindow={true}
-        isDisabled={false}
-        position="top-left"
-        text="Edit Metadata"
-        theme="default"
-      >
-        <PlainButton
-          aria-label="Edit Metadata"
-          aria-pressed={false}
-          className="metadata-instance-editor-instance-edit"
-          data-resin-target="metadata-instanceedit"
-          onClick={[Function]}
-          type="button"
-        >
-          <IconEdit />
-        </PlainButton>
-      </Tooltip>
-    }
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
-    >
-      <Form
-        onValidSubmit={[Function]}
-      >
-        <div
-          className="metadata-instance-editor-instance"
-        >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={false}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "singleTemplateField": Array [
-                  Object {
-                    "description": "example of an empty enum field",
-                    "displayName": "Empty Enum Field",
-                    "id": "field0",
-                    "key": "emptyenumfield",
-                    "type": "enum",
-                  },
-                ],
-              }
-            }
-          />
-        </div>
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance message id should be fileMetadataRemoveCustomTemplateConfirm 1`] = `
-<FormattedMessage
-  defaultMessage="Are you sure you want to delete this custom metadata and all of its values from this file?"
-  id="boxui.metadataInstanceEditor.fileMetadataRemoveCustomTemplateConfirm"
-  values={
-    Object {
-      "metadataName": "Empty Enum Field",
-    }
-  }
-/>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance message id should be fileMetadataRemoveTemplateConfirm 1`] = `
-<FormattedMessage
-  defaultMessage="Are you sure you want to delete \\"{metadataName}\\" and all of its values from this file?"
-  id="boxui.metadataInstanceEditor.fileMetadataRemoveTemplateConfirm"
-  values={
-    Object {
-      "metadataName": "Empty Enum Field",
-    }
-  }
-/>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance message id should be folderMetadataRemoveCustomTemplateConfirm 1`] = `
-<FormattedMessage
-  defaultMessage="Are you sure you want to delete this custom metadata and all of its values? Any metadata template values already applied to files in this folder will not be deleted."
-  id="boxui.metadataInstanceEditor.folderMetadataRemoveCustomTemplateConfirm"
-  values={
-    Object {
-      "metadataName": "Empty Enum Field",
-    }
-  }
-/>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance message id should be folderMetadataRemoveTemplateConfirm 1`] = `
-<FormattedMessage
-  defaultMessage="Are you sure you want to delete \\"{metadataName}\\" and all of its values? Any metadata template values already applied to files in this folder will not be deleted."
-  id="boxui.metadataInstanceEditor.folderMetadataRemoveTemplateConfirm"
-  values={
-    Object {
-      "metadataName": "Empty Enum Field",
-    }
-  }
-/>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render custom metadata instance 1`] = `
-<div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={null}
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        >
-          <FormattedMessage
-            defaultMessage="Custom Metadata"
-            id="boxui.metadataInstanceEditor.customTitle"
-          />
-        </span>
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
-    >
-      <Form
-        onValidSubmit={[Function]}
-      >
-        <div
-          className="metadata-instance-editor-instance"
-        >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={true}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <CustomInstance
-            canEdit={false}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-          />
-        </div>
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance 1`] = `
-<div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={null}
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
-    >
-      <Form
-        onValidSubmit={[Function]}
-      >
-        <div
-          className="metadata-instance-editor-instance"
-        >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={false}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [
-                  Object {
-                    "displayName": "No Description Field",
-                    "id": "field0",
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a string field",
-                    "displayName": "String Field",
-                    "id": "field1",
-                    "key": "stringfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of an empty string field",
-                    "displayName": "Empty String Field",
-                    "id": "field2",
-                    "key": "emptystring",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a float field",
-                    "displayName": "Float Field",
-                    "id": "field3",
-                    "key": "floatfield",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of an empty float field",
-                    "displayName": "Empty Float Field",
-                    "id": "field4",
-                    "key": "emptyfloat",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of a enum field",
-                    "displayName": "Enum Field",
-                    "id": "field5",
-                    "key": "enumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of an empty enum field",
-                    "displayName": "Empty Enum Field",
-                    "id": "field6",
-                    "key": "emptyenumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of a date field",
-                    "displayName": "Date Field",
-                    "id": "field7",
-                    "key": "datefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of an empty date field",
-                    "displayName": "Empty Date Field",
-                    "id": "field8",
-                    "key": "emptydatefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of a multi select field field",
-                    "displayName": "Multi Select Field",
-                    "id": "field9",
-                    "key": "multiselectfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                      Object {
-                        "key": "maybe",
-                      },
-                      Object {
-                        "key": "idk?",
-                      },
-                      Object {
-                        "key": "oh well",
-                      },
-                      Object {
-                        "key": "whatever",
-                      },
-                    ],
-                    "type": "multiSelect",
-                  },
-                ],
-              }
-            }
-          />
-        </div>
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;
-
 exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true, "id": "hello"} and isCascadingPolicyApplicable is false 1`] = `
 <div>
   <div>
@@ -641,7 +235,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 </div>
 `;
 
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true, "id": "hello"} and isCascadingPolicyApplicable is true 1`] = `
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is null and isCascadingPolicyApplicable is false 1`] = `
 <div>
   <div>
     <div
@@ -671,7 +265,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
               <path
                 class="fill-color"
                 d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
-                fill="#9f3fed"
+                fill="#0061d5"
                 fill-rule="evenodd"
               />
             </svg>
@@ -696,34 +290,6 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
             />
           </svg>
         </button>
-        <span
-          class="bdl-Collapsible-actionItems"
-        >
-          <button
-            aria-label="Edit Metadata"
-            aria-pressed="true"
-            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-            data-resin-target="metadata-instanceedit"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-edit "
-              focusable="false"
-              height="14"
-              role="presentation"
-              viewBox="0 0 14 14"
-              width="14"
-            >
-              <path
-                class="fill-color"
-                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
-                fill="#6f6f6f"
-              />
-            </svg>
-          </button>
-        </span>
       </div>
       <div
         aria-hidden="false"
@@ -743,584 +309,151 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                 <div
                   class="metadata-instance-editor-instance"
                 >
-                  <div
-                    class="metadata-cascade-editor"
-                  >
-                    <div
-                      class="metadata-cascade-enable"
-                    >
-                      <div>
-                        <div />
-                        <div
-                          class="toggle-container metadata-cascade-toggle cascade-on"
-                        >
-                          <label
-                            class="toggle-simple"
-                          >
-                            <input
-                              checked=""
-                              class="toggle-simple-input"
-                              role="switch"
-                              type="checkbox"
-                            />
-                            <div
-                              class="toggle-simple-switch"
-                            />
-                            <div
-                              class="toggle-simple-label"
-                            />
-                          </label>
-                        </div>
-                      </div>
-                      <div
-                        class="cascade-policy-text"
-                      >
-                        <div />
-                         
-                        <a
-                          class="link cascade-policy-learnmore-link"
-                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
-                          rel="noopener"
-                          target="_blank"
-                        >
-                          <div />
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          No Description Field
-                        </span>
-                      </span>
-                      <input
-                        aria-invalid="false"
-                        name="nodescfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description7"
-                      >
-                        example of a string field
-                      </div>
-                      <input
-                        aria-describedby="description7"
-                        aria-invalid="false"
-                        name="stringfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="some string"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
                   >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description9"
-                      >
-                        example of an empty string field
-                      </div>
-                      <input
-                        aria-describedby="description9"
-                        aria-invalid="false"
-                        name="emptystring"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
+                    <dt>
+                      No Description Field
+                    </dt>
+                    <dd>
+                      <div />
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
                   >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description11"
-                      >
-                        example of a float field
-                      </div>
-                      <input
-                        aria-describedby="description11"
-                        aria-invalid="false"
-                        name="floatfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="1"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
+                    <dt>
+                      String Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of a string field
+                    </i>
+                    <dd>
+                      some string
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
                   >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description13"
-                      >
-                        example of an empty float field
-                      </div>
-                      <input
-                        aria-describedby="description13"
-                        aria-invalid="false"
-                        name="emptyfloat"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
+                    <dt>
+                      Empty String Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of an empty string field
+                    </i>
+                    <dd>
+                      <div />
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
                   >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of a enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield15"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes"
-                          type="button"
-                        >
-                          yes
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
+                    <dt>
+                      Float Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of a float field
+                    </i>
+                    <dd>
+                      1
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
                   >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of an empty enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield17"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="Select Value"
-                          type="button"
-                        >
-                          Select Value
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
+                    <dt>
+                      Empty Float Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of an empty float field
+                    </i>
+                    <dd>
+                      <div />
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
                   >
-                    <span
-                      class="date-picker-icon-holder"
+                    <dt>
+                      Enum Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
                     >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description20"
-                        >
-                          example of a date field
-                        </div>
-                        <input
-                          aria-describedby="description20"
-                          aria-errormessage="errorMessage19"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage19"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Clear Date"
-                        class="btn-plain date-picker-clear-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <path
-                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value="2018-06-20T00:00:00.000Z"
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper"
+                      example of a enum field
+                    </i>
+                    <dd>
+                      yes
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
                   >
-                    <span
-                      class="date-picker-icon-holder"
+                    <dt>
+                      Empty Enum Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
                     >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Empty Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description25"
-                        >
-                          example of an empty date field
-                        </div>
-                        <input
-                          aria-describedby="description25"
-                          aria-errormessage="errorMessage24"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value=""
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage24"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value=""
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-MultiSelectMetadataField"
+                      example of an empty enum field
+                    </i>
+                    <dd>
+                      <div />
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
                   >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Multi Select Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-MultiSelectMetadataField-desc"
-                      >
-                        example of a multi select field field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield28"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes, no"
-                          type="button"
-                        >
-                          yes, no
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                </div>
-                <div
-                  class="metadata-instance-editor-footer"
-                >
-                  <div
-                    class="metadata-instance-editor-footer-delete"
+                    <dt>
+                      Date Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of a date field
+                    </i>
+                    <dd>
+                      <div />
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
                   >
-                    <button
-                      class="btn-plain "
-                      data-resin-target="metadata-instanceremove"
-                      type="button"
+                    <dt>
+                      Empty Date Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
                     >
+                      example of an empty date field
+                    </i>
+                    <dd>
                       <div />
-                    </button>
-                  </div>
-                  <div
-                    class="metadata-instance-editor-footer-save-cancel"
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
                   >
-                    <button
-                      class="btn"
-                      data-resin-target="metadata-instancecancel"
-                      type="button"
+                    <dt>
+                      Multi Select Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
                     >
-                      <span
-                        class="btn-content"
-                      >
-                        <div />
-                      </span>
-                    </button>
-                  </div>
+                      example of a multi select field field
+                    </i>
+                    <dd>
+                      yes, no
+                    </dd>
+                  </dl>
                 </div>
               </form>
             </div>
@@ -1331,3938 +464,3 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
   </div>
 </div>
 `;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true} and isCascadingPolicyApplicable is false 1`] = `
-<div>
-  <div>
-    <div
-      class="collapsible-card is-open is-bordered"
-    >
-      <div
-        class="collapsible-card-header has-sticky-header"
-      >
-        <button
-          aria-expanded="true"
-          class="btn-plain collapsible-card-title"
-          data-resin-target="metadata-cardcollapse"
-          type="button"
-        >
-          <span
-            class="metadata-instance-editor-instance-title"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-metadata "
-              focusable="false"
-              height="16"
-              role="presentation"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                class="fill-color"
-                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
-                fill="#0061d5"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <span
-              class="metadata-instance-editor-instance-title-text"
-            />
-          </span>
-          <svg
-            aria-hidden="true"
-            class="icon-caret-down collapsible-card-header-caret"
-            focusable="false"
-            height="6"
-            role="presentation"
-            viewBox="0 0 10 6"
-            width="8"
-          >
-            <path
-              class="fill-color"
-              d="M0 .5l5 5 5-5H0z"
-              fill="#909090"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </button>
-        <span
-          class="bdl-Collapsible-actionItems"
-        >
-          <button
-            aria-label="Edit Metadata"
-            aria-pressed="true"
-            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-            data-resin-target="metadata-instanceedit"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-edit "
-              focusable="false"
-              height="14"
-              role="presentation"
-              viewBox="0 0 14 14"
-              width="14"
-            >
-              <path
-                class="fill-color"
-                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
-                fill="#6f6f6f"
-              />
-            </svg>
-          </button>
-        </span>
-      </div>
-      <div
-        aria-hidden="false"
-        class="rah-static rah-static--height-auto"
-        style="height: auto; overflow: visible;"
-      >
-        <div>
-          <div
-            class="collapsible-card-content"
-          >
-            <div
-              class="loading-indicator-wrapper "
-            >
-              <form
-                novalidate=""
-              >
-                <div
-                  class="metadata-instance-editor-instance"
-                >
-                  <div
-                    class="metadata-cascade-editor"
-                  >
-                    <div
-                      class="metadata-cascade-enable"
-                    >
-                      <div>
-                        <div />
-                        <div
-                          class="toggle-container metadata-cascade-toggle cascade-off"
-                        >
-                          <label
-                            class="toggle-simple"
-                          >
-                            <input
-                              class="toggle-simple-input"
-                              role="switch"
-                              type="checkbox"
-                            />
-                            <div
-                              class="toggle-simple-switch"
-                            />
-                            <div
-                              class="toggle-simple-label"
-                            />
-                          </label>
-                        </div>
-                      </div>
-                      <div
-                        class="cascade-policy-text"
-                      >
-                        <div />
-                         
-                        <a
-                          class="link cascade-policy-learnmore-link"
-                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
-                          rel="noopener"
-                          target="_blank"
-                        >
-                          <div />
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          No Description Field
-                        </span>
-                      </span>
-                      <input
-                        aria-invalid="false"
-                        name="nodescfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description67"
-                      >
-                        example of a string field
-                      </div>
-                      <input
-                        aria-describedby="description67"
-                        aria-invalid="false"
-                        name="stringfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="some string"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description69"
-                      >
-                        example of an empty string field
-                      </div>
-                      <input
-                        aria-describedby="description69"
-                        aria-invalid="false"
-                        name="emptystring"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description71"
-                      >
-                        example of a float field
-                      </div>
-                      <input
-                        aria-describedby="description71"
-                        aria-invalid="false"
-                        name="floatfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="1"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description73"
-                      >
-                        example of an empty float field
-                      </div>
-                      <input
-                        aria-describedby="description73"
-                        aria-invalid="false"
-                        name="emptyfloat"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of a enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield75"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes"
-                          type="button"
-                        >
-                          yes
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of an empty enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield77"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="Select Value"
-                          type="button"
-                        >
-                          Select Value
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description80"
-                        >
-                          example of a date field
-                        </div>
-                        <input
-                          aria-describedby="description80"
-                          aria-errormessage="errorMessage79"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage79"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Clear Date"
-                        class="btn-plain date-picker-clear-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <path
-                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value="2018-06-20T00:00:00.000Z"
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Empty Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description85"
-                        >
-                          example of an empty date field
-                        </div>
-                        <input
-                          aria-describedby="description85"
-                          aria-errormessage="errorMessage84"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value=""
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage84"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value=""
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-MultiSelectMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Multi Select Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-MultiSelectMetadataField-desc"
-                      >
-                        example of a multi select field field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield88"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes, no"
-                          type="button"
-                        >
-                          yes, no
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                </div>
-                <div
-                  class="metadata-instance-editor-footer"
-                >
-                  <div
-                    class="metadata-instance-editor-footer-delete"
-                  >
-                    <button
-                      class="btn-plain "
-                      data-resin-target="metadata-instanceremove"
-                      type="button"
-                    >
-                      <div />
-                    </button>
-                  </div>
-                  <div
-                    class="metadata-instance-editor-footer-save-cancel"
-                  >
-                    <button
-                      class="btn"
-                      data-resin-target="metadata-instancecancel"
-                      type="button"
-                    >
-                      <span
-                        class="btn-content"
-                      >
-                        <div />
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true} and isCascadingPolicyApplicable is true 1`] = `
-<div>
-  <div>
-    <div
-      class="collapsible-card is-open is-bordered"
-    >
-      <div
-        class="collapsible-card-header has-sticky-header"
-      >
-        <button
-          aria-expanded="true"
-          class="btn-plain collapsible-card-title"
-          data-resin-target="metadata-cardcollapse"
-          type="button"
-        >
-          <span
-            class="metadata-instance-editor-instance-title"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-metadata "
-              focusable="false"
-              height="16"
-              role="presentation"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                class="fill-color"
-                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
-                fill="#0061d5"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <span
-              class="metadata-instance-editor-instance-title-text"
-            />
-          </span>
-          <svg
-            aria-hidden="true"
-            class="icon-caret-down collapsible-card-header-caret"
-            focusable="false"
-            height="6"
-            role="presentation"
-            viewBox="0 0 10 6"
-            width="8"
-          >
-            <path
-              class="fill-color"
-              d="M0 .5l5 5 5-5H0z"
-              fill="#909090"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </button>
-        <span
-          class="bdl-Collapsible-actionItems"
-        >
-          <button
-            aria-label="Edit Metadata"
-            aria-pressed="true"
-            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-            data-resin-target="metadata-instanceedit"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-edit "
-              focusable="false"
-              height="14"
-              role="presentation"
-              viewBox="0 0 14 14"
-              width="14"
-            >
-              <path
-                class="fill-color"
-                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
-                fill="#6f6f6f"
-              />
-            </svg>
-          </button>
-        </span>
-      </div>
-      <div
-        aria-hidden="false"
-        class="rah-static rah-static--height-auto"
-        style="height: auto; overflow: visible;"
-      >
-        <div>
-          <div
-            class="collapsible-card-content"
-          >
-            <div
-              class="loading-indicator-wrapper "
-            >
-              <form
-                novalidate=""
-              >
-                <div
-                  class="metadata-instance-editor-instance"
-                >
-                  <div
-                    class="metadata-cascade-editor"
-                  >
-                    <div
-                      class="metadata-cascade-enable"
-                    >
-                      <div>
-                        <div />
-                        <div
-                          class="toggle-container metadata-cascade-toggle cascade-off"
-                        >
-                          <label
-                            class="toggle-simple"
-                          >
-                            <input
-                              class="toggle-simple-input"
-                              role="switch"
-                              type="checkbox"
-                            />
-                            <div
-                              class="toggle-simple-switch"
-                            />
-                            <div
-                              class="toggle-simple-label"
-                            />
-                          </label>
-                        </div>
-                      </div>
-                      <div
-                        class="cascade-policy-text"
-                      >
-                        <div />
-                         
-                        <a
-                          class="link cascade-policy-learnmore-link"
-                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
-                          rel="noopener"
-                          target="_blank"
-                        >
-                          <div />
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          No Description Field
-                        </span>
-                      </span>
-                      <input
-                        aria-invalid="false"
-                        name="nodescfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description38"
-                      >
-                        example of a string field
-                      </div>
-                      <input
-                        aria-describedby="description38"
-                        aria-invalid="false"
-                        name="stringfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="some string"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description40"
-                      >
-                        example of an empty string field
-                      </div>
-                      <input
-                        aria-describedby="description40"
-                        aria-invalid="false"
-                        name="emptystring"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description42"
-                      >
-                        example of a float field
-                      </div>
-                      <input
-                        aria-describedby="description42"
-                        aria-invalid="false"
-                        name="floatfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="1"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description44"
-                      >
-                        example of an empty float field
-                      </div>
-                      <input
-                        aria-describedby="description44"
-                        aria-invalid="false"
-                        name="emptyfloat"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of a enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield46"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes"
-                          type="button"
-                        >
-                          yes
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of an empty enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield48"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="Select Value"
-                          type="button"
-                        >
-                          Select Value
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description51"
-                        >
-                          example of a date field
-                        </div>
-                        <input
-                          aria-describedby="description51"
-                          aria-errormessage="errorMessage50"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage50"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Clear Date"
-                        class="btn-plain date-picker-clear-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <path
-                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value="2018-06-20T00:00:00.000Z"
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Empty Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description56"
-                        >
-                          example of an empty date field
-                        </div>
-                        <input
-                          aria-describedby="description56"
-                          aria-errormessage="errorMessage55"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value=""
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage55"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value=""
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-MultiSelectMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Multi Select Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-MultiSelectMetadataField-desc"
-                      >
-                        example of a multi select field field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield59"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes, no"
-                          type="button"
-                        >
-                          yes, no
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                </div>
-                <div
-                  class="metadata-instance-editor-footer"
-                >
-                  <div
-                    class="metadata-instance-editor-footer-delete"
-                  >
-                    <button
-                      class="btn-plain "
-                      data-resin-target="metadata-instanceremove"
-                      type="button"
-                    >
-                      <div />
-                    </button>
-                  </div>
-                  <div
-                    class="metadata-instance-editor-footer-save-cancel"
-                  >
-                    <button
-                      class="btn"
-                      data-resin-target="metadata-instancecancel"
-                      type="button"
-                    >
-                      <span
-                        class="btn-content"
-                      >
-                        <div />
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is null and isCascadingPolicyApplicable is false 1`] = `
-<div>
-  <div>
-    <div
-      class="collapsible-card is-open is-bordered"
-    >
-      <div
-        class="collapsible-card-header has-sticky-header"
-      >
-        <button
-          aria-expanded="true"
-          class="btn-plain collapsible-card-title"
-          data-resin-target="metadata-cardcollapse"
-          type="button"
-        >
-          <span
-            class="metadata-instance-editor-instance-title"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-metadata "
-              focusable="false"
-              height="16"
-              role="presentation"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                class="fill-color"
-                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
-                fill="#0061d5"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <span
-              class="metadata-instance-editor-instance-title-text"
-            />
-          </span>
-          <svg
-            aria-hidden="true"
-            class="icon-caret-down collapsible-card-header-caret"
-            focusable="false"
-            height="6"
-            role="presentation"
-            viewBox="0 0 10 6"
-            width="8"
-          >
-            <path
-              class="fill-color"
-              d="M0 .5l5 5 5-5H0z"
-              fill="#909090"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </button>
-        <span
-          class="bdl-Collapsible-actionItems"
-        >
-          <button
-            aria-label="Edit Metadata"
-            aria-pressed="true"
-            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-            data-resin-target="metadata-instanceedit"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-edit "
-              focusable="false"
-              height="14"
-              role="presentation"
-              viewBox="0 0 14 14"
-              width="14"
-            >
-              <path
-                class="fill-color"
-                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
-                fill="#6f6f6f"
-              />
-            </svg>
-          </button>
-        </span>
-      </div>
-      <div
-        aria-hidden="false"
-        class="rah-static rah-static--height-auto"
-        style="height: auto; overflow: visible;"
-      >
-        <div>
-          <div
-            class="collapsible-card-content"
-          >
-            <div
-              class="loading-indicator-wrapper "
-            >
-              <form
-                novalidate=""
-              >
-                <div
-                  class="metadata-instance-editor-instance"
-                >
-                  <div
-                    class="metadata-cascade-editor"
-                  >
-                    <div
-                      class="metadata-cascade-enable"
-                    >
-                      <div>
-                        <div />
-                        <div
-                          class="toggle-container metadata-cascade-toggle cascade-off"
-                        >
-                          <label
-                            class="toggle-simple"
-                          >
-                            <input
-                              class="toggle-simple-input"
-                              role="switch"
-                              type="checkbox"
-                            />
-                            <div
-                              class="toggle-simple-switch"
-                            />
-                            <div
-                              class="toggle-simple-label"
-                            />
-                          </label>
-                        </div>
-                      </div>
-                      <div
-                        class="cascade-policy-text"
-                      >
-                        <div />
-                         
-                        <a
-                          class="link cascade-policy-learnmore-link"
-                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
-                          rel="noopener"
-                          target="_blank"
-                        >
-                          <div />
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          No Description Field
-                        </span>
-                      </span>
-                      <input
-                        aria-invalid="false"
-                        name="nodescfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description125"
-                      >
-                        example of a string field
-                      </div>
-                      <input
-                        aria-describedby="description125"
-                        aria-invalid="false"
-                        name="stringfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="some string"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description127"
-                      >
-                        example of an empty string field
-                      </div>
-                      <input
-                        aria-describedby="description127"
-                        aria-invalid="false"
-                        name="emptystring"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description129"
-                      >
-                        example of a float field
-                      </div>
-                      <input
-                        aria-describedby="description129"
-                        aria-invalid="false"
-                        name="floatfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="1"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description131"
-                      >
-                        example of an empty float field
-                      </div>
-                      <input
-                        aria-describedby="description131"
-                        aria-invalid="false"
-                        name="emptyfloat"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of a enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield133"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes"
-                          type="button"
-                        >
-                          yes
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of an empty enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield135"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="Select Value"
-                          type="button"
-                        >
-                          Select Value
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description138"
-                        >
-                          example of a date field
-                        </div>
-                        <input
-                          aria-describedby="description138"
-                          aria-errormessage="errorMessage137"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage137"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Clear Date"
-                        class="btn-plain date-picker-clear-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <path
-                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value="2018-06-20T00:00:00.000Z"
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Empty Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description143"
-                        >
-                          example of an empty date field
-                        </div>
-                        <input
-                          aria-describedby="description143"
-                          aria-errormessage="errorMessage142"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value=""
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage142"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value=""
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-MultiSelectMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Multi Select Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-MultiSelectMetadataField-desc"
-                      >
-                        example of a multi select field field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield146"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes, no"
-                          type="button"
-                        >
-                          yes, no
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                </div>
-                <div
-                  class="metadata-instance-editor-footer"
-                >
-                  <div
-                    class="metadata-instance-editor-footer-delete"
-                  >
-                    <button
-                      class="btn-plain "
-                      data-resin-target="metadata-instanceremove"
-                      type="button"
-                    >
-                      <div />
-                    </button>
-                  </div>
-                  <div
-                    class="metadata-instance-editor-footer-save-cancel"
-                  >
-                    <button
-                      class="btn"
-                      data-resin-target="metadata-instancecancel"
-                      type="button"
-                    >
-                      <span
-                        class="btn-content"
-                      >
-                        <div />
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is null and isCascadingPolicyApplicable is true 1`] = `
-<div>
-  <div>
-    <div
-      class="collapsible-card is-open is-bordered"
-    >
-      <div
-        class="collapsible-card-header has-sticky-header"
-      >
-        <button
-          aria-expanded="true"
-          class="btn-plain collapsible-card-title"
-          data-resin-target="metadata-cardcollapse"
-          type="button"
-        >
-          <span
-            class="metadata-instance-editor-instance-title"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-metadata "
-              focusable="false"
-              height="16"
-              role="presentation"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                class="fill-color"
-                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
-                fill="#0061d5"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <span
-              class="metadata-instance-editor-instance-title-text"
-            />
-          </span>
-          <svg
-            aria-hidden="true"
-            class="icon-caret-down collapsible-card-header-caret"
-            focusable="false"
-            height="6"
-            role="presentation"
-            viewBox="0 0 10 6"
-            width="8"
-          >
-            <path
-              class="fill-color"
-              d="M0 .5l5 5 5-5H0z"
-              fill="#909090"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </button>
-        <span
-          class="bdl-Collapsible-actionItems"
-        >
-          <button
-            aria-label="Edit Metadata"
-            aria-pressed="true"
-            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-            data-resin-target="metadata-instanceedit"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-edit "
-              focusable="false"
-              height="14"
-              role="presentation"
-              viewBox="0 0 14 14"
-              width="14"
-            >
-              <path
-                class="fill-color"
-                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
-                fill="#6f6f6f"
-              />
-            </svg>
-          </button>
-        </span>
-      </div>
-      <div
-        aria-hidden="false"
-        class="rah-static rah-static--height-auto"
-        style="height: auto; overflow: visible;"
-      >
-        <div>
-          <div
-            class="collapsible-card-content"
-          >
-            <div
-              class="loading-indicator-wrapper "
-            >
-              <form
-                novalidate=""
-              >
-                <div
-                  class="metadata-instance-editor-instance"
-                >
-                  <div
-                    class="metadata-cascade-editor"
-                  >
-                    <div
-                      class="metadata-cascade-enable"
-                    >
-                      <div>
-                        <div />
-                        <div
-                          class="toggle-container metadata-cascade-toggle cascade-off"
-                        >
-                          <label
-                            class="toggle-simple"
-                          >
-                            <input
-                              class="toggle-simple-input"
-                              role="switch"
-                              type="checkbox"
-                            />
-                            <div
-                              class="toggle-simple-switch"
-                            />
-                            <div
-                              class="toggle-simple-label"
-                            />
-                          </label>
-                        </div>
-                      </div>
-                      <div
-                        class="cascade-policy-text"
-                      >
-                        <div />
-                         
-                        <a
-                          class="link cascade-policy-learnmore-link"
-                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
-                          rel="noopener"
-                          target="_blank"
-                        >
-                          <div />
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          No Description Field
-                        </span>
-                      </span>
-                      <input
-                        aria-invalid="false"
-                        name="nodescfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description96"
-                      >
-                        example of a string field
-                      </div>
-                      <input
-                        aria-describedby="description96"
-                        aria-invalid="false"
-                        name="stringfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="some string"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description98"
-                      >
-                        example of an empty string field
-                      </div>
-                      <input
-                        aria-describedby="description98"
-                        aria-invalid="false"
-                        name="emptystring"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description100"
-                      >
-                        example of a float field
-                      </div>
-                      <input
-                        aria-describedby="description100"
-                        aria-invalid="false"
-                        name="floatfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="1"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description102"
-                      >
-                        example of an empty float field
-                      </div>
-                      <input
-                        aria-describedby="description102"
-                        aria-invalid="false"
-                        name="emptyfloat"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of a enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield104"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes"
-                          type="button"
-                        >
-                          yes
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of an empty enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield106"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="Select Value"
-                          type="button"
-                        >
-                          Select Value
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description109"
-                        >
-                          example of a date field
-                        </div>
-                        <input
-                          aria-describedby="description109"
-                          aria-errormessage="errorMessage108"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage108"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Clear Date"
-                        class="btn-plain date-picker-clear-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <path
-                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value="2018-06-20T00:00:00.000Z"
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Empty Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description114"
-                        >
-                          example of an empty date field
-                        </div>
-                        <input
-                          aria-describedby="description114"
-                          aria-errormessage="errorMessage113"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value=""
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage113"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value=""
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-MultiSelectMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Multi Select Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-MultiSelectMetadataField-desc"
-                      >
-                        example of a multi select field field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield117"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes, no"
-                          type="button"
-                        >
-                          yes, no
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                </div>
-                <div
-                  class="metadata-instance-editor-footer"
-                >
-                  <div
-                    class="metadata-instance-editor-footer-delete"
-                  >
-                    <button
-                      class="btn-plain "
-                      data-resin-target="metadata-instanceremove"
-                      type="button"
-                    >
-                      <div />
-                    </button>
-                  </div>
-                  <div
-                    class="metadata-instance-editor-footer-save-cancel"
-                  >
-                    <button
-                      class="btn"
-                      data-resin-target="metadata-instancecancel"
-                      type="button"
-                    >
-                      <span
-                        class="btn-content"
-                      >
-                        <div />
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render the busy indicator 1`] = `
-<div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={null}
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={true}
-    >
-      <Form
-        onValidSubmit={[Function]}
-      >
-        <div
-          className="metadata-instance-editor-instance"
-        >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={false}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [
-                  Object {
-                    "displayName": "No Description Field",
-                    "id": "field0",
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a string field",
-                    "displayName": "String Field",
-                    "id": "field1",
-                    "key": "stringfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of an empty string field",
-                    "displayName": "Empty String Field",
-                    "id": "field2",
-                    "key": "emptystring",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a float field",
-                    "displayName": "Float Field",
-                    "id": "field3",
-                    "key": "floatfield",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of an empty float field",
-                    "displayName": "Empty Float Field",
-                    "id": "field4",
-                    "key": "emptyfloat",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of a enum field",
-                    "displayName": "Enum Field",
-                    "id": "field5",
-                    "key": "enumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of an empty enum field",
-                    "displayName": "Empty Enum Field",
-                    "id": "field6",
-                    "key": "emptyenumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of a date field",
-                    "displayName": "Date Field",
-                    "id": "field7",
-                    "key": "datefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of an empty date field",
-                    "displayName": "Empty Date Field",
-                    "id": "field8",
-                    "key": "emptydatefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of a multi select field field",
-                    "displayName": "Multi Select Field",
-                    "id": "field9",
-                    "key": "multiselectfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                      Object {
-                        "key": "maybe",
-                      },
-                      Object {
-                        "key": "idk?",
-                      },
-                      Object {
-                        "key": "oh well",
-                      },
-                      Object {
-                        "key": "whatever",
-                      },
-                    ],
-                    "type": "multiSelect",
-                  },
-                ],
-              }
-            }
-          />
-        </div>
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer even when all fields are hidden 1`] = `
-<div>
-  <Collapsible
-    animationDuration={150}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={
-      <Tooltip
-        constrainToScrollParent={false}
-        constrainToWindow={true}
-        isDisabled={false}
-        position="top-left"
-        text="Edit Metadata"
-        theme="default"
-      >
-        <PlainButton
-          aria-label="Edit Metadata"
-          aria-pressed={true}
-          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-          data-resin-target="metadata-instanceedit"
-          onClick={[Function]}
-          type="button"
-        >
-          <IconEdit />
-        </PlainButton>
-      </Tooltip>
-    }
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
-    >
-      <Form
-        onValidSubmit={[Function]}
-      >
-        <div
-          className="metadata-instance-editor-instance"
-        >
-          <CascadePolicy
-            canEdit={true}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={true}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [
-                  Object {
-                    "displayName": "No Description Field that is hidden",
-                    "hidden": true,
-                    "id": "field0",
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "displayName": "No Description Field that is also hidden",
-                    "id": "field1",
-                    "isHidden": true,
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                ],
-              }
-            }
-          />
-        </div>
-        <Footer
-          onCancel={[Function]}
-          onRemove={[Function]}
-          showSave={false}
-        />
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer even when there are no fields in a template 1`] = `
-<div>
-  <Collapsible
-    animationDuration={50}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={
-      <Tooltip
-        constrainToScrollParent={false}
-        constrainToWindow={true}
-        isDisabled={false}
-        position="top-left"
-        text="Edit Metadata"
-        theme="default"
-      >
-        <PlainButton
-          aria-label="Edit Metadata"
-          aria-pressed={true}
-          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-          data-resin-target="metadata-instanceedit"
-          onClick={[Function]}
-          type="button"
-        >
-          <IconEdit />
-        </PlainButton>
-      </Tooltip>
-    }
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
-    >
-      <Form
-        onValidSubmit={[Function]}
-      >
-        <div
-          className="metadata-instance-editor-instance"
-        >
-          <CascadePolicy
-            canEdit={true}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={true}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [],
-              }
-            }
-          />
-        </div>
-        <Footer
-          onCancel={[Function]}
-          onRemove={[Function]}
-          showSave={false}
-        />
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer when editing and cascade policy 1`] = `
-<div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={
-      <Tooltip
-        constrainToScrollParent={false}
-        constrainToWindow={true}
-        isDisabled={false}
-        position="top-left"
-        text="Edit Metadata"
-        theme="default"
-      >
-        <PlainButton
-          aria-label="Edit Metadata"
-          aria-pressed={true}
-          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-          data-resin-target="metadata-instanceedit"
-          onClick={[Function]}
-          type="button"
-        >
-          <IconEdit />
-        </PlainButton>
-      </Tooltip>
-    }
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="cascade"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
-    >
-      <Form
-        onValidSubmit={[Function]}
-      >
-        <div
-          className="metadata-instance-editor-instance"
-        >
-          <CascadePolicy
-            canEdit={true}
-            isCascadingEnabled={true}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={true}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [
-                  Object {
-                    "displayName": "No Description Field",
-                    "id": "field0",
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a string field",
-                    "displayName": "String Field",
-                    "id": "field1",
-                    "key": "stringfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of an empty string field",
-                    "displayName": "Empty String Field",
-                    "id": "field2",
-                    "key": "emptystring",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a float field",
-                    "displayName": "Float Field",
-                    "id": "field3",
-                    "key": "floatfield",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of an empty float field",
-                    "displayName": "Empty Float Field",
-                    "id": "field4",
-                    "key": "emptyfloat",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of a enum field",
-                    "displayName": "Enum Field",
-                    "id": "field5",
-                    "key": "enumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of an empty enum field",
-                    "displayName": "Empty Enum Field",
-                    "id": "field6",
-                    "key": "emptyenumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of a date field",
-                    "displayName": "Date Field",
-                    "id": "field7",
-                    "key": "datefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of an empty date field",
-                    "displayName": "Empty Date Field",
-                    "id": "field8",
-                    "key": "emptydatefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of a multi select field field",
-                    "displayName": "Multi Select Field",
-                    "id": "field9",
-                    "key": "multiselectfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                      Object {
-                        "key": "maybe",
-                      },
-                      Object {
-                        "key": "idk?",
-                      },
-                      Object {
-                        "key": "oh well",
-                      },
-                      Object {
-                        "key": "whatever",
-                      },
-                    ],
-                    "type": "multiSelect",
-                  },
-                ],
-              }
-            }
-          />
-        </div>
-        <Footer
-          onCancel={[Function]}
-          onRemove={[Function]}
-          showSave={false}
-        />
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer when editing and no cascade policy 1`] = `
-<div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={
-      <Tooltip
-        constrainToScrollParent={false}
-        constrainToWindow={true}
-        isDisabled={false}
-        position="top-left"
-        text="Edit Metadata"
-        theme="default"
-      >
-        <PlainButton
-          aria-label="Edit Metadata"
-          aria-pressed={true}
-          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-          data-resin-target="metadata-instanceedit"
-          onClick={[Function]}
-          type="button"
-        >
-          <IconEdit />
-        </PlainButton>
-      </Tooltip>
-    }
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
-    >
-      <Form
-        onValidSubmit={[Function]}
-      >
-        <div
-          className="metadata-instance-editor-instance"
-        >
-          <CascadePolicy
-            canEdit={true}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={true}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [
-                  Object {
-                    "displayName": "No Description Field",
-                    "id": "field0",
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a string field",
-                    "displayName": "String Field",
-                    "id": "field1",
-                    "key": "stringfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of an empty string field",
-                    "displayName": "Empty String Field",
-                    "id": "field2",
-                    "key": "emptystring",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a float field",
-                    "displayName": "Float Field",
-                    "id": "field3",
-                    "key": "floatfield",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of an empty float field",
-                    "displayName": "Empty Float Field",
-                    "id": "field4",
-                    "key": "emptyfloat",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of a enum field",
-                    "displayName": "Enum Field",
-                    "id": "field5",
-                    "key": "enumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of an empty enum field",
-                    "displayName": "Empty Enum Field",
-                    "id": "field6",
-                    "key": "emptyenumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of a date field",
-                    "displayName": "Date Field",
-                    "id": "field7",
-                    "key": "datefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of an empty date field",
-                    "displayName": "Empty Date Field",
-                    "id": "field8",
-                    "key": "emptydatefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of a multi select field field",
-                    "displayName": "Multi Select Field",
-                    "id": "field9",
-                    "key": "multiselectfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                      Object {
-                        "key": "maybe",
-                      },
-                      Object {
-                        "key": "idk?",
-                      },
-                      Object {
-                        "key": "oh well",
-                      },
-                      Object {
-                        "key": "whatever",
-                      },
-                    ],
-                    "type": "multiSelect",
-                  },
-                ],
-              }
-            }
-          />
-        </div>
-        <Footer
-          onCancel={[Function]}
-          onRemove={[Function]}
-          showSave={false}
-        />
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer with save button when dirty 1`] = `
-<div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={null}
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
-    >
-      <Form
-        onValidSubmit={[Function]}
-      >
-        <div
-          className="metadata-instance-editor-instance"
-        >
-          <CascadePolicy
-            canEdit={true}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={true}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [
-                  Object {
-                    "displayName": "No Description Field",
-                    "id": "field0",
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a string field",
-                    "displayName": "String Field",
-                    "id": "field1",
-                    "key": "stringfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of an empty string field",
-                    "displayName": "Empty String Field",
-                    "id": "field2",
-                    "key": "emptystring",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a float field",
-                    "displayName": "Float Field",
-                    "id": "field3",
-                    "key": "floatfield",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of an empty float field",
-                    "displayName": "Empty Float Field",
-                    "id": "field4",
-                    "key": "emptyfloat",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of a enum field",
-                    "displayName": "Enum Field",
-                    "id": "field5",
-                    "key": "enumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of an empty enum field",
-                    "displayName": "Empty Enum Field",
-                    "id": "field6",
-                    "key": "emptyenumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of a date field",
-                    "displayName": "Date Field",
-                    "id": "field7",
-                    "key": "datefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of an empty date field",
-                    "displayName": "Empty Date Field",
-                    "id": "field8",
-                    "key": "emptydatefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of a multi select field field",
-                    "displayName": "Multi Select Field",
-                    "id": "field9",
-                    "key": "multiselectfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                      Object {
-                        "key": "maybe",
-                      },
-                      Object {
-                        "key": "idk?",
-                      },
-                      Object {
-                        "key": "oh well",
-                      },
-                      Object {
-                        "key": "whatever",
-                      },
-                    ],
-                    "type": "multiSelect",
-                  },
-                ],
-              }
-            }
-          />
-        </div>
-        <Footer
-          onCancel={[Function]}
-          onRemove={[Function]}
-          showSave={true}
-        />
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should not render footer when not editing 1`] = `
-<div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={null}
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
-    >
-      <Form
-        onValidSubmit={[Function]}
-      >
-        <div
-          className="metadata-instance-editor-instance"
-        >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={false}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [
-                  Object {
-                    "displayName": "No Description Field",
-                    "id": "field0",
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a string field",
-                    "displayName": "String Field",
-                    "id": "field1",
-                    "key": "stringfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of an empty string field",
-                    "displayName": "Empty String Field",
-                    "id": "field2",
-                    "key": "emptystring",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a float field",
-                    "displayName": "Float Field",
-                    "id": "field3",
-                    "key": "floatfield",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of an empty float field",
-                    "displayName": "Empty Float Field",
-                    "id": "field4",
-                    "key": "emptyfloat",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of a enum field",
-                    "displayName": "Enum Field",
-                    "id": "field5",
-                    "key": "enumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of an empty enum field",
-                    "displayName": "Empty Enum Field",
-                    "id": "field6",
-                    "key": "emptyenumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of a date field",
-                    "displayName": "Date Field",
-                    "id": "field7",
-                    "key": "datefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of an empty date field",
-                    "displayName": "Empty Date Field",
-                    "id": "field8",
-                    "key": "emptydatefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of a multi select field field",
-                    "displayName": "Multi Select Field",
-                    "id": "field9",
-                    "key": "multiselectfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                      Object {
-                        "key": "maybe",
-                      },
-                      Object {
-                        "key": "idk?",
-                      },
-                      Object {
-                        "key": "oh well",
-                      },
-                      Object {
-                        "key": "whatever",
-                      },
-                    ],
-                    "type": "multiSelect",
-                  },
-                ],
-              }
-            }
-          />
-        </div>
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;

From 3876b2e30bbd6e7f25ff7ace4e6bfc674642f284 Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Thu, 27 Jul 2023 13:41:18 -0400
Subject: [PATCH 09/25] fix(metadata): Disable updates to metadata

---
 .../metadata-instance-editor/Instance.js      |    3 -
 .../__snapshots__/Instance.test.js.snap       | 3784 ++++++++++++++++-
 2 files changed, 3783 insertions(+), 4 deletions(-)

diff --git a/src/features/metadata-instance-editor/Instance.js b/src/features/metadata-instance-editor/Instance.js
index 5e01a9e1b4..cf742ecb50 100644
--- a/src/features/metadata-instance-editor/Instance.js
+++ b/src/features/metadata-instance-editor/Instance.js
@@ -599,9 +599,6 @@ class Instance extends React.PureComponent<Props, State> {
             isCascadingOverwritten,
         }: State = this.state;
         const isCustomInstance = template.templateKey === TEMPLATE_CUSTOM_PROPERTIES;
-        console.log(this.isEditing());
-        console.log(this.props);
-        console.log(this.state);
 
         if (!template || isHidden(template)) {
             return null;
diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
index 8574a58c55..bd41963cc7 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
@@ -1,5 +1,391 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`features/metadata-instance-editor/fields/Instance collapsible isOpen prop should be true 1`] = `
+<div>
+  <Collapsible
+    animationDuration={50}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={null}
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={false}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={false}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "singleTemplateField": Array [
+                  Object {
+                    "description": "example of an empty enum field",
+                    "displayName": "Empty Enum Field",
+                    "id": "field0",
+                    "key": "emptyenumfield",
+                    "type": "enum",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance message id should be fileMetadataRemoveCustomTemplateConfirm 1`] = `
+<FormattedMessage
+  defaultMessage="Are you sure you want to delete this custom metadata and all of its values from this file?"
+  id="boxui.metadataInstanceEditor.fileMetadataRemoveCustomTemplateConfirm"
+  values={
+    Object {
+      "metadataName": "Empty Enum Field",
+    }
+  }
+/>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance message id should be fileMetadataRemoveTemplateConfirm 1`] = `
+<FormattedMessage
+  defaultMessage="Are you sure you want to delete \\"{metadataName}\\" and all of its values from this file?"
+  id="boxui.metadataInstanceEditor.fileMetadataRemoveTemplateConfirm"
+  values={
+    Object {
+      "metadataName": "Empty Enum Field",
+    }
+  }
+/>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance message id should be folderMetadataRemoveCustomTemplateConfirm 1`] = `
+<FormattedMessage
+  defaultMessage="Are you sure you want to delete this custom metadata and all of its values? Any metadata template values already applied to files in this folder will not be deleted."
+  id="boxui.metadataInstanceEditor.folderMetadataRemoveCustomTemplateConfirm"
+  values={
+    Object {
+      "metadataName": "Empty Enum Field",
+    }
+  }
+/>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance message id should be folderMetadataRemoveTemplateConfirm 1`] = `
+<FormattedMessage
+  defaultMessage="Are you sure you want to delete \\"{metadataName}\\" and all of its values? Any metadata template values already applied to files in this folder will not be deleted."
+  id="boxui.metadataInstanceEditor.folderMetadataRemoveTemplateConfirm"
+  values={
+    Object {
+      "metadataName": "Empty Enum Field",
+    }
+  }
+/>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render custom metadata instance 1`] = `
+<div>
+  <Collapsible
+    animationDuration={550}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={null}
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        >
+          <FormattedMessage
+            defaultMessage="Custom Metadata"
+            id="boxui.metadataInstanceEditor.customTitle"
+          />
+        </span>
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={false}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={true}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <CustomInstance
+            canEdit={false}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+          />
+        </div>
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance 1`] = `
+<div>
+  <Collapsible
+    animationDuration={550}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={null}
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={false}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={false}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [
+                  Object {
+                    "displayName": "No Description Field",
+                    "id": "field0",
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a string field",
+                    "displayName": "String Field",
+                    "id": "field1",
+                    "key": "stringfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of an empty string field",
+                    "displayName": "Empty String Field",
+                    "id": "field2",
+                    "key": "emptystring",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a float field",
+                    "displayName": "Float Field",
+                    "id": "field3",
+                    "key": "floatfield",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of an empty float field",
+                    "displayName": "Empty Float Field",
+                    "id": "field4",
+                    "key": "emptyfloat",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of a enum field",
+                    "displayName": "Enum Field",
+                    "id": "field5",
+                    "key": "enumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of an empty enum field",
+                    "displayName": "Empty Enum Field",
+                    "id": "field6",
+                    "key": "emptyenumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of a date field",
+                    "displayName": "Date Field",
+                    "id": "field7",
+                    "key": "datefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of an empty date field",
+                    "displayName": "Empty Date Field",
+                    "id": "field8",
+                    "key": "emptydatefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of a multi select field field",
+                    "displayName": "Multi Select Field",
+                    "id": "field9",
+                    "key": "multiselectfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                      Object {
+                        "key": "maybe",
+                      },
+                      Object {
+                        "key": "idk?",
+                      },
+                      Object {
+                        "key": "oh well",
+                      },
+                      Object {
+                        "key": "whatever",
+                      },
+                    ],
+                    "type": "multiSelect",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
 exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true, "id": "hello"} and isCascadingPolicyApplicable is false 1`] = `
 <div>
   <div>
@@ -235,7 +621,698 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 </div>
 `;
 
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is null and isCascadingPolicyApplicable is false 1`] = `
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true, "id": "hello"} and isCascadingPolicyApplicable is true 1`] = `
+<div>
+  <div>
+    <div
+      class="collapsible-card is-open is-bordered"
+    >
+      <div
+        class="collapsible-card-header has-sticky-header"
+      >
+        <button
+          aria-expanded="true"
+          class="btn-plain collapsible-card-title"
+          data-resin-target="metadata-cardcollapse"
+          type="button"
+        >
+          <span
+            class="metadata-instance-editor-instance-title"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-metadata "
+              focusable="false"
+              height="16"
+              role="presentation"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                class="fill-color"
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
+                fill="#9f3fed"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <span
+              class="metadata-instance-editor-instance-title-text"
+            />
+          </span>
+          <svg
+            aria-hidden="true"
+            class="icon-caret-down collapsible-card-header-caret"
+            focusable="false"
+            height="6"
+            role="presentation"
+            viewBox="0 0 10 6"
+            width="8"
+          >
+            <path
+              class="fill-color"
+              d="M0 .5l5 5 5-5H0z"
+              fill="#909090"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
+        <span
+          class="bdl-Collapsible-actionItems"
+        >
+          <button
+            aria-label="Edit Metadata"
+            aria-pressed="true"
+            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+            data-resin-target="metadata-instanceedit"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-edit "
+              focusable="false"
+              height="14"
+              role="presentation"
+              viewBox="0 0 14 14"
+              width="14"
+            >
+              <path
+                class="fill-color"
+                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
+                fill="#6f6f6f"
+              />
+            </svg>
+          </button>
+        </span>
+      </div>
+      <div
+        aria-hidden="false"
+        class="rah-static rah-static--height-auto"
+        style="height: auto; overflow: visible;"
+      >
+        <div>
+          <div
+            class="collapsible-card-content"
+          >
+            <div
+              class="loading-indicator-wrapper "
+            >
+              <form
+                novalidate=""
+              >
+                <div
+                  class="metadata-instance-editor-instance"
+                >
+                  <div
+                    class="metadata-cascade-editor"
+                  >
+                    <div
+                      class="metadata-cascade-enable"
+                    >
+                      <div>
+                        <div />
+                        <div
+                          class="toggle-container metadata-cascade-toggle cascade-on"
+                        >
+                          <label
+                            class="toggle-simple"
+                          >
+                            <input
+                              checked=""
+                              class="toggle-simple-input"
+                              role="switch"
+                              type="checkbox"
+                            />
+                            <div
+                              class="toggle-simple-switch"
+                            />
+                            <div
+                              class="toggle-simple-label"
+                            />
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        class="cascade-policy-text"
+                      >
+                        <div />
+                         
+                        <a
+                          class="link cascade-policy-learnmore-link"
+                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
+                          rel="noopener"
+                          target="_blank"
+                        >
+                          <div />
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          No Description Field
+                        </span>
+                      </span>
+                      <input
+                        aria-invalid="false"
+                        name="nodescfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description7"
+                      >
+                        example of a string field
+                      </div>
+                      <input
+                        aria-describedby="description7"
+                        aria-invalid="false"
+                        name="stringfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="some string"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description9"
+                      >
+                        example of an empty string field
+                      </div>
+                      <input
+                        aria-describedby="description9"
+                        aria-invalid="false"
+                        name="emptystring"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description11"
+                      >
+                        example of a float field
+                      </div>
+                      <input
+                        aria-describedby="description11"
+                        aria-invalid="false"
+                        name="floatfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="1"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description13"
+                      >
+                        example of an empty float field
+                      </div>
+                      <input
+                        aria-describedby="description13"
+                        aria-invalid="false"
+                        name="emptyfloat"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of a enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield15"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes"
+                          type="button"
+                        >
+                          yes
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of an empty enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield17"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="Select Value"
+                          type="button"
+                        >
+                          Select Value
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description20"
+                        >
+                          example of a date field
+                        </div>
+                        <input
+                          aria-describedby="description20"
+                          aria-errormessage="errorMessage19"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage19"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Clear Date"
+                        class="btn-plain date-picker-clear-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <path
+                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </button>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value="2018-06-20T00:00:00.000Z"
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Empty Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description25"
+                        >
+                          example of an empty date field
+                        </div>
+                        <input
+                          aria-describedby="description25"
+                          aria-errormessage="errorMessage24"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value=""
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage24"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value=""
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-MultiSelectMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Multi Select Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-MultiSelectMetadataField-desc"
+                      >
+                        example of a multi select field field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield28"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes, no"
+                          type="button"
+                        >
+                          yes, no
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="metadata-instance-editor-footer"
+                >
+                  <div
+                    class="metadata-instance-editor-footer-delete"
+                  >
+                    <button
+                      class="btn-plain "
+                      data-resin-target="metadata-instanceremove"
+                      type="button"
+                    >
+                      <div />
+                    </button>
+                  </div>
+                  <div
+                    class="metadata-instance-editor-footer-save-cancel"
+                  >
+                    <button
+                      class="btn"
+                      data-resin-target="metadata-instancecancel"
+                      type="button"
+                    >
+                      <span
+                        class="btn-content"
+                      >
+                        <div />
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true} and isCascadingPolicyApplicable is false 1`] = `
 <div>
   <div>
     <div
@@ -464,3 +1541,2708 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
   </div>
 </div>
 `;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true} and isCascadingPolicyApplicable is true 1`] = `
+<div>
+  <div>
+    <div
+      class="collapsible-card is-open is-bordered"
+    >
+      <div
+        class="collapsible-card-header has-sticky-header"
+      >
+        <button
+          aria-expanded="true"
+          class="btn-plain collapsible-card-title"
+          data-resin-target="metadata-cardcollapse"
+          type="button"
+        >
+          <span
+            class="metadata-instance-editor-instance-title"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-metadata "
+              focusable="false"
+              height="16"
+              role="presentation"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                class="fill-color"
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
+                fill="#0061d5"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <span
+              class="metadata-instance-editor-instance-title-text"
+            />
+          </span>
+          <svg
+            aria-hidden="true"
+            class="icon-caret-down collapsible-card-header-caret"
+            focusable="false"
+            height="6"
+            role="presentation"
+            viewBox="0 0 10 6"
+            width="8"
+          >
+            <path
+              class="fill-color"
+              d="M0 .5l5 5 5-5H0z"
+              fill="#909090"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
+        <span
+          class="bdl-Collapsible-actionItems"
+        >
+          <button
+            aria-label="Edit Metadata"
+            aria-pressed="true"
+            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+            data-resin-target="metadata-instanceedit"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-edit "
+              focusable="false"
+              height="14"
+              role="presentation"
+              viewBox="0 0 14 14"
+              width="14"
+            >
+              <path
+                class="fill-color"
+                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
+                fill="#6f6f6f"
+              />
+            </svg>
+          </button>
+        </span>
+      </div>
+      <div
+        aria-hidden="false"
+        class="rah-static rah-static--height-auto"
+        style="height: auto; overflow: visible;"
+      >
+        <div>
+          <div
+            class="collapsible-card-content"
+          >
+            <div
+              class="loading-indicator-wrapper "
+            >
+              <form
+                novalidate=""
+              >
+                <div
+                  class="metadata-instance-editor-instance"
+                >
+                  <div
+                    class="metadata-cascade-editor"
+                  >
+                    <div
+                      class="metadata-cascade-enable"
+                    >
+                      <div>
+                        <div />
+                        <div
+                          class="toggle-container metadata-cascade-toggle cascade-off"
+                        >
+                          <label
+                            class="toggle-simple"
+                          >
+                            <input
+                              class="toggle-simple-input"
+                              role="switch"
+                              type="checkbox"
+                            />
+                            <div
+                              class="toggle-simple-switch"
+                            />
+                            <div
+                              class="toggle-simple-label"
+                            />
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        class="cascade-policy-text"
+                      >
+                        <div />
+                         
+                        <a
+                          class="link cascade-policy-learnmore-link"
+                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
+                          rel="noopener"
+                          target="_blank"
+                        >
+                          <div />
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          No Description Field
+                        </span>
+                      </span>
+                      <input
+                        aria-invalid="false"
+                        name="nodescfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description38"
+                      >
+                        example of a string field
+                      </div>
+                      <input
+                        aria-describedby="description38"
+                        aria-invalid="false"
+                        name="stringfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="some string"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description40"
+                      >
+                        example of an empty string field
+                      </div>
+                      <input
+                        aria-describedby="description40"
+                        aria-invalid="false"
+                        name="emptystring"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description42"
+                      >
+                        example of a float field
+                      </div>
+                      <input
+                        aria-describedby="description42"
+                        aria-invalid="false"
+                        name="floatfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="1"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description44"
+                      >
+                        example of an empty float field
+                      </div>
+                      <input
+                        aria-describedby="description44"
+                        aria-invalid="false"
+                        name="emptyfloat"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of a enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield46"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes"
+                          type="button"
+                        >
+                          yes
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of an empty enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield48"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="Select Value"
+                          type="button"
+                        >
+                          Select Value
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description51"
+                        >
+                          example of a date field
+                        </div>
+                        <input
+                          aria-describedby="description51"
+                          aria-errormessage="errorMessage50"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage50"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Clear Date"
+                        class="btn-plain date-picker-clear-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <path
+                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </button>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value="2018-06-20T00:00:00.000Z"
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Empty Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description56"
+                        >
+                          example of an empty date field
+                        </div>
+                        <input
+                          aria-describedby="description56"
+                          aria-errormessage="errorMessage55"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value=""
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage55"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value=""
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-MultiSelectMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Multi Select Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-MultiSelectMetadataField-desc"
+                      >
+                        example of a multi select field field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield59"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes, no"
+                          type="button"
+                        >
+                          yes, no
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="metadata-instance-editor-footer"
+                >
+                  <div
+                    class="metadata-instance-editor-footer-delete"
+                  >
+                    <button
+                      class="btn-plain "
+                      data-resin-target="metadata-instanceremove"
+                      type="button"
+                    >
+                      <div />
+                    </button>
+                  </div>
+                  <div
+                    class="metadata-instance-editor-footer-save-cancel"
+                  >
+                    <button
+                      class="btn"
+                      data-resin-target="metadata-instancecancel"
+                      type="button"
+                    >
+                      <span
+                        class="btn-content"
+                      >
+                        <div />
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is null and isCascadingPolicyApplicable is false 1`] = `
+<div>
+  <div>
+    <div
+      class="collapsible-card is-open is-bordered"
+    >
+      <div
+        class="collapsible-card-header has-sticky-header"
+      >
+        <button
+          aria-expanded="true"
+          class="btn-plain collapsible-card-title"
+          data-resin-target="metadata-cardcollapse"
+          type="button"
+        >
+          <span
+            class="metadata-instance-editor-instance-title"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-metadata "
+              focusable="false"
+              height="16"
+              role="presentation"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                class="fill-color"
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
+                fill="#0061d5"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <span
+              class="metadata-instance-editor-instance-title-text"
+            />
+          </span>
+          <svg
+            aria-hidden="true"
+            class="icon-caret-down collapsible-card-header-caret"
+            focusable="false"
+            height="6"
+            role="presentation"
+            viewBox="0 0 10 6"
+            width="8"
+          >
+            <path
+              class="fill-color"
+              d="M0 .5l5 5 5-5H0z"
+              fill="#909090"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        aria-hidden="false"
+        class="rah-static rah-static--height-auto"
+        style="height: auto; overflow: visible;"
+      >
+        <div>
+          <div
+            class="collapsible-card-content"
+          >
+            <div
+              class="loading-indicator-wrapper "
+            >
+              <form
+                novalidate=""
+              >
+                <div
+                  class="metadata-instance-editor-instance"
+                >
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      No Description Field
+                    </dt>
+                    <dd>
+                      <div />
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      String Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of a string field
+                    </i>
+                    <dd>
+                      some string
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      Empty String Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of an empty string field
+                    </i>
+                    <dd>
+                      <div />
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      Float Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of a float field
+                    </i>
+                    <dd>
+                      1
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      Empty Float Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of an empty float field
+                    </i>
+                    <dd>
+                      <div />
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      Enum Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of a enum field
+                    </i>
+                    <dd>
+                      yes
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      Empty Enum Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of an empty enum field
+                    </i>
+                    <dd>
+                      <div />
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      Date Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of a date field
+                    </i>
+                    <dd>
+                      <div />
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      Empty Date Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of an empty date field
+                    </i>
+                    <dd>
+                      <div />
+                    </dd>
+                  </dl>
+                  <dl
+                    class="bdl-ReadOnlyMetadataField"
+                  >
+                    <dt>
+                      Multi Select Field
+                    </dt>
+                    <i
+                      class="bdl-ReadOnlyMetadataField-desc"
+                    >
+                      example of a multi select field field
+                    </i>
+                    <dd>
+                      yes, no
+                    </dd>
+                  </dl>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is null and isCascadingPolicyApplicable is true 1`] = `
+<div>
+  <div>
+    <div
+      class="collapsible-card is-open is-bordered"
+    >
+      <div
+        class="collapsible-card-header has-sticky-header"
+      >
+        <button
+          aria-expanded="true"
+          class="btn-plain collapsible-card-title"
+          data-resin-target="metadata-cardcollapse"
+          type="button"
+        >
+          <span
+            class="metadata-instance-editor-instance-title"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-metadata "
+              focusable="false"
+              height="16"
+              role="presentation"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                class="fill-color"
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
+                fill="#0061d5"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <span
+              class="metadata-instance-editor-instance-title-text"
+            />
+          </span>
+          <svg
+            aria-hidden="true"
+            class="icon-caret-down collapsible-card-header-caret"
+            focusable="false"
+            height="6"
+            role="presentation"
+            viewBox="0 0 10 6"
+            width="8"
+          >
+            <path
+              class="fill-color"
+              d="M0 .5l5 5 5-5H0z"
+              fill="#909090"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
+        <span
+          class="bdl-Collapsible-actionItems"
+        >
+          <button
+            aria-label="Edit Metadata"
+            aria-pressed="true"
+            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+            data-resin-target="metadata-instanceedit"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-edit "
+              focusable="false"
+              height="14"
+              role="presentation"
+              viewBox="0 0 14 14"
+              width="14"
+            >
+              <path
+                class="fill-color"
+                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
+                fill="#6f6f6f"
+              />
+            </svg>
+          </button>
+        </span>
+      </div>
+      <div
+        aria-hidden="false"
+        class="rah-static rah-static--height-auto"
+        style="height: auto; overflow: visible;"
+      >
+        <div>
+          <div
+            class="collapsible-card-content"
+          >
+            <div
+              class="loading-indicator-wrapper "
+            >
+              <form
+                novalidate=""
+              >
+                <div
+                  class="metadata-instance-editor-instance"
+                >
+                  <div
+                    class="metadata-cascade-editor"
+                  >
+                    <div
+                      class="metadata-cascade-enable"
+                    >
+                      <div>
+                        <div />
+                        <div
+                          class="toggle-container metadata-cascade-toggle cascade-off"
+                        >
+                          <label
+                            class="toggle-simple"
+                          >
+                            <input
+                              class="toggle-simple-input"
+                              role="switch"
+                              type="checkbox"
+                            />
+                            <div
+                              class="toggle-simple-switch"
+                            />
+                            <div
+                              class="toggle-simple-label"
+                            />
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        class="cascade-policy-text"
+                      >
+                        <div />
+                         
+                        <a
+                          class="link cascade-policy-learnmore-link"
+                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
+                          rel="noopener"
+                          target="_blank"
+                        >
+                          <div />
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          No Description Field
+                        </span>
+                      </span>
+                      <input
+                        aria-invalid="false"
+                        name="nodescfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description69"
+                      >
+                        example of a string field
+                      </div>
+                      <input
+                        aria-describedby="description69"
+                        aria-invalid="false"
+                        name="stringfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="some string"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description71"
+                      >
+                        example of an empty string field
+                      </div>
+                      <input
+                        aria-describedby="description71"
+                        aria-invalid="false"
+                        name="emptystring"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description73"
+                      >
+                        example of a float field
+                      </div>
+                      <input
+                        aria-describedby="description73"
+                        aria-invalid="false"
+                        name="floatfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="1"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description75"
+                      >
+                        example of an empty float field
+                      </div>
+                      <input
+                        aria-describedby="description75"
+                        aria-invalid="false"
+                        name="emptyfloat"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of a enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield77"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes"
+                          type="button"
+                        >
+                          yes
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of an empty enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield79"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="Select Value"
+                          type="button"
+                        >
+                          Select Value
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description82"
+                        >
+                          example of a date field
+                        </div>
+                        <input
+                          aria-describedby="description82"
+                          aria-errormessage="errorMessage81"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage81"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Clear Date"
+                        class="btn-plain date-picker-clear-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <path
+                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </button>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value="2018-06-20T00:00:00.000Z"
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Empty Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description87"
+                        >
+                          example of an empty date field
+                        </div>
+                        <input
+                          aria-describedby="description87"
+                          aria-errormessage="errorMessage86"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value=""
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage86"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value=""
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-MultiSelectMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Multi Select Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-MultiSelectMetadataField-desc"
+                      >
+                        example of a multi select field field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield90"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes, no"
+                          type="button"
+                        >
+                          yes, no
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="metadata-instance-editor-footer"
+                >
+                  <div
+                    class="metadata-instance-editor-footer-delete"
+                  >
+                    <button
+                      class="btn-plain "
+                      data-resin-target="metadata-instanceremove"
+                      type="button"
+                    >
+                      <div />
+                    </button>
+                  </div>
+                  <div
+                    class="metadata-instance-editor-footer-save-cancel"
+                  >
+                    <button
+                      class="btn"
+                      data-resin-target="metadata-instancecancel"
+                      type="button"
+                    >
+                      <span
+                        class="btn-content"
+                      >
+                        <div />
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render the busy indicator 1`] = `
+<div>
+  <Collapsible
+    animationDuration={550}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={null}
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={true}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={false}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={false}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [
+                  Object {
+                    "displayName": "No Description Field",
+                    "id": "field0",
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a string field",
+                    "displayName": "String Field",
+                    "id": "field1",
+                    "key": "stringfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of an empty string field",
+                    "displayName": "Empty String Field",
+                    "id": "field2",
+                    "key": "emptystring",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a float field",
+                    "displayName": "Float Field",
+                    "id": "field3",
+                    "key": "floatfield",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of an empty float field",
+                    "displayName": "Empty Float Field",
+                    "id": "field4",
+                    "key": "emptyfloat",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of a enum field",
+                    "displayName": "Enum Field",
+                    "id": "field5",
+                    "key": "enumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of an empty enum field",
+                    "displayName": "Empty Enum Field",
+                    "id": "field6",
+                    "key": "emptyenumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of a date field",
+                    "displayName": "Date Field",
+                    "id": "field7",
+                    "key": "datefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of an empty date field",
+                    "displayName": "Empty Date Field",
+                    "id": "field8",
+                    "key": "emptydatefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of a multi select field field",
+                    "displayName": "Multi Select Field",
+                    "id": "field9",
+                    "key": "multiselectfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                      Object {
+                        "key": "maybe",
+                      },
+                      Object {
+                        "key": "idk?",
+                      },
+                      Object {
+                        "key": "oh well",
+                      },
+                      Object {
+                        "key": "whatever",
+                      },
+                    ],
+                    "type": "multiSelect",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer even when all fields are hidden 1`] = `
+<div>
+  <Collapsible
+    animationDuration={150}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={null}
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={false}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={false}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [
+                  Object {
+                    "displayName": "No Description Field that is hidden",
+                    "hidden": true,
+                    "id": "field0",
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "displayName": "No Description Field that is also hidden",
+                    "id": "field1",
+                    "isHidden": true,
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer even when there are no fields in a template 1`] = `
+<div>
+  <Collapsible
+    animationDuration={50}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={null}
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={false}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={false}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [],
+              }
+            }
+          />
+        </div>
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer when editing and cascade policy 1`] = `
+<div>
+  <Collapsible
+    animationDuration={550}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={
+      <Tooltip
+        constrainToScrollParent={false}
+        constrainToWindow={true}
+        isDisabled={false}
+        position="top-left"
+        text="Edit Metadata"
+        theme="default"
+      >
+        <PlainButton
+          aria-label="Edit Metadata"
+          aria-pressed={true}
+          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+          data-resin-target="metadata-instanceedit"
+          onClick={[Function]}
+          type="button"
+        >
+          <IconEdit />
+        </PlainButton>
+      </Tooltip>
+    }
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="cascade"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={true}
+            isCascadingEnabled={true}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={true}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [
+                  Object {
+                    "displayName": "No Description Field",
+                    "id": "field0",
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a string field",
+                    "displayName": "String Field",
+                    "id": "field1",
+                    "key": "stringfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of an empty string field",
+                    "displayName": "Empty String Field",
+                    "id": "field2",
+                    "key": "emptystring",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a float field",
+                    "displayName": "Float Field",
+                    "id": "field3",
+                    "key": "floatfield",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of an empty float field",
+                    "displayName": "Empty Float Field",
+                    "id": "field4",
+                    "key": "emptyfloat",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of a enum field",
+                    "displayName": "Enum Field",
+                    "id": "field5",
+                    "key": "enumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of an empty enum field",
+                    "displayName": "Empty Enum Field",
+                    "id": "field6",
+                    "key": "emptyenumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of a date field",
+                    "displayName": "Date Field",
+                    "id": "field7",
+                    "key": "datefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of an empty date field",
+                    "displayName": "Empty Date Field",
+                    "id": "field8",
+                    "key": "emptydatefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of a multi select field field",
+                    "displayName": "Multi Select Field",
+                    "id": "field9",
+                    "key": "multiselectfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                      Object {
+                        "key": "maybe",
+                      },
+                      Object {
+                        "key": "idk?",
+                      },
+                      Object {
+                        "key": "oh well",
+                      },
+                      Object {
+                        "key": "whatever",
+                      },
+                    ],
+                    "type": "multiSelect",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+        <Footer
+          onCancel={[Function]}
+          onRemove={[Function]}
+          showSave={false}
+        />
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer when editing and no cascade policy 1`] = `
+<div>
+  <Collapsible
+    animationDuration={550}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={null}
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={false}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={false}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [
+                  Object {
+                    "displayName": "No Description Field",
+                    "id": "field0",
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a string field",
+                    "displayName": "String Field",
+                    "id": "field1",
+                    "key": "stringfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of an empty string field",
+                    "displayName": "Empty String Field",
+                    "id": "field2",
+                    "key": "emptystring",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a float field",
+                    "displayName": "Float Field",
+                    "id": "field3",
+                    "key": "floatfield",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of an empty float field",
+                    "displayName": "Empty Float Field",
+                    "id": "field4",
+                    "key": "emptyfloat",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of a enum field",
+                    "displayName": "Enum Field",
+                    "id": "field5",
+                    "key": "enumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of an empty enum field",
+                    "displayName": "Empty Enum Field",
+                    "id": "field6",
+                    "key": "emptyenumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of a date field",
+                    "displayName": "Date Field",
+                    "id": "field7",
+                    "key": "datefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of an empty date field",
+                    "displayName": "Empty Date Field",
+                    "id": "field8",
+                    "key": "emptydatefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of a multi select field field",
+                    "displayName": "Multi Select Field",
+                    "id": "field9",
+                    "key": "multiselectfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                      Object {
+                        "key": "maybe",
+                      },
+                      Object {
+                        "key": "idk?",
+                      },
+                      Object {
+                        "key": "oh well",
+                      },
+                      Object {
+                        "key": "whatever",
+                      },
+                    ],
+                    "type": "multiSelect",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer with save button when dirty 1`] = `
+<div>
+  <Collapsible
+    animationDuration={550}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={null}
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={false}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={false}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [
+                  Object {
+                    "displayName": "No Description Field",
+                    "id": "field0",
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a string field",
+                    "displayName": "String Field",
+                    "id": "field1",
+                    "key": "stringfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of an empty string field",
+                    "displayName": "Empty String Field",
+                    "id": "field2",
+                    "key": "emptystring",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a float field",
+                    "displayName": "Float Field",
+                    "id": "field3",
+                    "key": "floatfield",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of an empty float field",
+                    "displayName": "Empty Float Field",
+                    "id": "field4",
+                    "key": "emptyfloat",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of a enum field",
+                    "displayName": "Enum Field",
+                    "id": "field5",
+                    "key": "enumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of an empty enum field",
+                    "displayName": "Empty Enum Field",
+                    "id": "field6",
+                    "key": "emptyenumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of a date field",
+                    "displayName": "Date Field",
+                    "id": "field7",
+                    "key": "datefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of an empty date field",
+                    "displayName": "Empty Date Field",
+                    "id": "field8",
+                    "key": "emptydatefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of a multi select field field",
+                    "displayName": "Multi Select Field",
+                    "id": "field9",
+                    "key": "multiselectfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                      Object {
+                        "key": "maybe",
+                      },
+                      Object {
+                        "key": "idk?",
+                      },
+                      Object {
+                        "key": "oh well",
+                      },
+                      Object {
+                        "key": "whatever",
+                      },
+                    ],
+                    "type": "multiSelect",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should not render footer when not editing 1`] = `
+<div>
+  <Collapsible
+    animationDuration={550}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={null}
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={false}
+    >
+      <Form
+        onValidSubmit={[Function]}
+      >
+        <div
+          className="metadata-instance-editor-instance"
+        >
+          <CascadePolicy
+            canEdit={false}
+            isCascadingEnabled={false}
+            isCascadingOverwritten={false}
+            isCustomMetadata={false}
+            onCascadeModeChange={[Function]}
+            onCascadeToggle={[Function]}
+            shouldShowCascadeOptions={false}
+          />
+          <TemplatedInstance
+            canEdit={false}
+            data={
+              Object {
+                "datefield": "2018-06-20T00:00:00.000Z",
+                "enumfield": "yes",
+                "floatfield": 1,
+                "multiselectfield": Array [
+                  "yes",
+                  "no",
+                ],
+                "stringfield": "some string",
+              }
+            }
+            errors={Object {}}
+            onFieldChange={[Function]}
+            onFieldRemove={[Function]}
+            template={
+              Object {
+                "fields": Array [
+                  Object {
+                    "displayName": "No Description Field",
+                    "id": "field0",
+                    "key": "nodescfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a string field",
+                    "displayName": "String Field",
+                    "id": "field1",
+                    "key": "stringfield",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of an empty string field",
+                    "displayName": "Empty String Field",
+                    "id": "field2",
+                    "key": "emptystring",
+                    "type": "string",
+                  },
+                  Object {
+                    "description": "example of a float field",
+                    "displayName": "Float Field",
+                    "id": "field3",
+                    "key": "floatfield",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of an empty float field",
+                    "displayName": "Empty Float Field",
+                    "id": "field4",
+                    "key": "emptyfloat",
+                    "type": "float",
+                  },
+                  Object {
+                    "description": "example of a enum field",
+                    "displayName": "Enum Field",
+                    "id": "field5",
+                    "key": "enumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of an empty enum field",
+                    "displayName": "Empty Enum Field",
+                    "id": "field6",
+                    "key": "emptyenumfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                    ],
+                    "type": "enum",
+                  },
+                  Object {
+                    "description": "example of a date field",
+                    "displayName": "Date Field",
+                    "id": "field7",
+                    "key": "datefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of an empty date field",
+                    "displayName": "Empty Date Field",
+                    "id": "field8",
+                    "key": "emptydatefield",
+                    "type": "date",
+                  },
+                  Object {
+                    "description": "example of a multi select field field",
+                    "displayName": "Multi Select Field",
+                    "id": "field9",
+                    "key": "multiselectfield",
+                    "options": Array [
+                      Object {
+                        "key": "yes",
+                      },
+                      Object {
+                        "key": "no",
+                      },
+                      Object {
+                        "key": "maybe",
+                      },
+                      Object {
+                        "key": "idk?",
+                      },
+                      Object {
+                        "key": "oh well",
+                      },
+                      Object {
+                        "key": "whatever",
+                      },
+                    ],
+                    "type": "multiSelect",
+                  },
+                ],
+              }
+            }
+          />
+        </div>
+      </Form>
+    </LoadingIndicatorWrapper>
+  </Collapsible>
+</div>
+`;

From ec98e5acb44de793d172b6e9af06fa446e38a710 Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Mon, 31 Jul 2023 15:48:29 -0400
Subject: [PATCH 10/25] fix(metadata): Disable updates to metadata

---
 .../metadata-instance-editor/Instance.js      | 40 ++++++++++++++-----
 .../metadata-instance-editor/Instances.js     |  3 ++
 .../MetadataInstanceEditor.js                 |  3 ++
 3 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/features/metadata-instance-editor/Instance.js b/src/features/metadata-instance-editor/Instance.js
index cf742ecb50..20bd09359e 100644
--- a/src/features/metadata-instance-editor/Instance.js
+++ b/src/features/metadata-instance-editor/Instance.js
@@ -54,6 +54,7 @@ type Props = {
     intl: Object,
     isCascadingPolicyApplicable: boolean,
     isDirty: boolean,
+    isFromFolder?: boolean,
     isOpen: boolean,
     onModification?: (id: string, isDirty: boolean, type?: string) => void,
     onRemove?: (id: string) => void,
@@ -103,6 +104,7 @@ class Instance extends React.PureComponent<Props, State> {
         data: {},
         isDirty: false,
         isCascadingPolicyApplicable: false,
+        isFromFolder: false,
     };
 
     constructor(props: Props) {
@@ -528,15 +530,29 @@ class Instance extends React.PureComponent<Props, State> {
         return ops;
     }
 
+    isInstanceCascadingPolicyApplicable = () => {
+        const { template, isFromFolder }: Props = this.props;
+        const isNotCustom = template.templateKey !== TEMPLATE_CUSTOM_PROPERTIES;
+        return isNotCustom && isFromFolder;
+    };
+
     /**
      * Utility function to determine if instance is editable
      *
      * @return {boolean} true if editable
      */
     canEdit(): boolean {
-        const { canEdit, onModification, onRemove, onSave, template, isCascadingPolicyApplicable }: Props = this.props;
+        const {
+            canEdit,
+            onModification,
+            onRemove,
+            onSave,
+            template,
+            isCascadingPolicyApplicable,
+            isFromFolder,
+        }: Props = this.props;
         const isCustom = template.templateKey === TEMPLATE_CUSTOM_PROPERTIES;
-        const hasCascadePermission = isCustom ? true : isCascadingPolicyApplicable;
+        const hasCascadePermission = isCustom || !isFromFolder ? true : isCascadingPolicyApplicable;
 
         return !!(
             canEdit &&
@@ -633,15 +649,17 @@ class Instance extends React.PureComponent<Props, State> {
                         <LoadingIndicatorWrapper isLoading={isBusy}>
                             <Form onValidSubmit={isDirty ? this.onSave : noop}>
                                 <div className="metadata-instance-editor-instance">
-                                    <CascadePolicy
-                                        canEdit={this.isEditing()}
-                                        isCascadingEnabled={isCascadingEnabled}
-                                        isCascadingOverwritten={isCascadingOverwritten}
-                                        isCustomMetadata={isCustomInstance}
-                                        onCascadeModeChange={this.onCascadeModeChange}
-                                        onCascadeToggle={this.onCascadeToggle}
-                                        shouldShowCascadeOptions={shouldShowCascadeOptions}
-                                    />
+                                    {this.isInstanceCascadingPolicyApplicable() && (
+                                        <CascadePolicy
+                                            canEdit={this.isEditing()}
+                                            isCascadingEnabled={isCascadingEnabled}
+                                            isCascadingOverwritten={isCascadingOverwritten}
+                                            isCustomMetadata={isCustomInstance}
+                                            onCascadeModeChange={this.onCascadeModeChange}
+                                            onCascadeToggle={this.onCascadeToggle}
+                                            shouldShowCascadeOptions={shouldShowCascadeOptions}
+                                        />
+                                    )}
 
                                     {isCustomInstance ? (
                                         <CustomInstance
diff --git a/src/features/metadata-instance-editor/Instances.js b/src/features/metadata-instance-editor/Instances.js
index cbf738befe..0c69a3d34d 100644
--- a/src/features/metadata-instance-editor/Instances.js
+++ b/src/features/metadata-instance-editor/Instances.js
@@ -8,6 +8,7 @@ import type { JSONPatchOperations } from '../../common/types/api';
 type Props = {
     editors?: Array<MetadataEditor>,
     isCascadingPolicyApplicable?: boolean,
+    isFromFolder?: boolean,
     onModification?: (id: string, isDirty: boolean) => void,
     onRemove?: (id: string) => void,
     onSave?: (
@@ -21,6 +22,7 @@ type Props = {
 
 const Instances = ({
     isCascadingPolicyApplicable = false,
+    isFromFolder,
     editors = [],
     onModification,
     onRemove,
@@ -46,6 +48,7 @@ const Instances = ({
                     onSave={onSave}
                     onRemove={onRemove}
                     template={template}
+                    isFromFolder={isFromFolder}
                 />
             );
         },
diff --git a/src/features/metadata-instance-editor/MetadataInstanceEditor.js b/src/features/metadata-instance-editor/MetadataInstanceEditor.js
index 267a840837..2775813d8c 100644
--- a/src/features/metadata-instance-editor/MetadataInstanceEditor.js
+++ b/src/features/metadata-instance-editor/MetadataInstanceEditor.js
@@ -17,6 +17,7 @@ type Props = {
     editors?: Array<MetadataEditor>,
     isCascadingPolicyApplicable?: boolean,
     isDropdownBusy?: boolean,
+    isFromFolder?: boolean,
     onAdd?: (template: MetadataTemplate) => void,
     onModification?: (id: string, isDirty: boolean) => void,
     onRemove?: (id: string) => void,
@@ -37,6 +38,7 @@ const MetadataInstanceEditor = ({
     canAdd,
     isCascadingPolicyApplicable = false,
     isDropdownBusy,
+    isFromFolder = false,
     editors = [],
     onModification,
     onRemove,
@@ -67,6 +69,7 @@ const MetadataInstanceEditor = ({
                         onRemove={onRemove}
                         onSave={onSave}
                         selectedTemplateKey={selectedTemplateKey}
+                        isFromFolder={isFromFolder}
                     />
                 </ScrollWrapper>
             )}

From ae1efb835564f973cb324ca331faa9cb1977dde6 Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Tue, 1 Aug 2023 10:13:59 -0400
Subject: [PATCH 11/25] fix(metadata): Disable updates to metadata

---
 .../metadata-instance-editor/CascadePolicy.js |    2 +-
 .../metadata-instance-editor/Instance.js      |   23 +-
 .../metadata-instance-editor/Instances.js     |    6 +-
 .../MetadataInstanceEditor.js                 |    6 +-
 .../__tests__/Instance.test.js                |   52 +-
 .../__snapshots__/Instance.test.js.snap       | 1244 ++++++++++++-----
 6 files changed, 948 insertions(+), 385 deletions(-)

diff --git a/src/features/metadata-instance-editor/CascadePolicy.js b/src/features/metadata-instance-editor/CascadePolicy.js
index 3c1acf46b2..3ca8c19bec 100644
--- a/src/features/metadata-instance-editor/CascadePolicy.js
+++ b/src/features/metadata-instance-editor/CascadePolicy.js
@@ -38,7 +38,7 @@ const CascadePolicy = ({
 
     return canEdit ? (
         <>
-            <div className="metadata-cascade-editor">
+            <div className="metadata-cascade-editor" data-testid="metadata-cascade-policy">
                 <div className="metadata-cascade-enable">
                     <div>
                         <FormattedMessage tagName="strong" {...messages.enableCascadePolicy} />
diff --git a/src/features/metadata-instance-editor/Instance.js b/src/features/metadata-instance-editor/Instance.js
index 20bd09359e..6cec6265bc 100644
--- a/src/features/metadata-instance-editor/Instance.js
+++ b/src/features/metadata-instance-editor/Instance.js
@@ -54,7 +54,7 @@ type Props = {
     intl: Object,
     isCascadingPolicyApplicable: boolean,
     isDirty: boolean,
-    isFromFolder?: boolean,
+    isFolderInstance?: boolean,
     isOpen: boolean,
     onModification?: (id: string, isDirty: boolean, type?: string) => void,
     onRemove?: (id: string) => void,
@@ -104,7 +104,7 @@ class Instance extends React.PureComponent<Props, State> {
         data: {},
         isDirty: false,
         isCascadingPolicyApplicable: false,
-        isFromFolder: false,
+        isFolderInstance: false,
     };
 
     constructor(props: Props) {
@@ -530,10 +530,15 @@ class Instance extends React.PureComponent<Props, State> {
         return ops;
     }
 
-    isInstanceCascadingPolicyApplicable = () => {
-        const { template, isFromFolder }: Props = this.props;
-        const isNotCustom = template.templateKey !== TEMPLATE_CUSTOM_PROPERTIES;
-        return isNotCustom && isFromFolder;
+    /**
+     * Utility function to determine if instance should consider cascading policy
+     *
+     * @return {boolean} true if cascading policy is applicable
+     */
+    isCascadingPolicyApplicable = () => {
+        const { template, isFolderInstance }: Props = this.props;
+        const isTemplatedInstance = template.templateKey !== TEMPLATE_CUSTOM_PROPERTIES;
+        return isTemplatedInstance && isFolderInstance;
     };
 
     /**
@@ -549,10 +554,10 @@ class Instance extends React.PureComponent<Props, State> {
             onSave,
             template,
             isCascadingPolicyApplicable,
-            isFromFolder,
+            isFolderInstance,
         }: Props = this.props;
         const isCustom = template.templateKey === TEMPLATE_CUSTOM_PROPERTIES;
-        const hasCascadePermission = isCustom || !isFromFolder ? true : isCascadingPolicyApplicable;
+        const hasCascadePermission = isCustom || !isFolderInstance ? true : isCascadingPolicyApplicable;
 
         return !!(
             canEdit &&
@@ -649,7 +654,7 @@ class Instance extends React.PureComponent<Props, State> {
                         <LoadingIndicatorWrapper isLoading={isBusy}>
                             <Form onValidSubmit={isDirty ? this.onSave : noop}>
                                 <div className="metadata-instance-editor-instance">
-                                    {this.isInstanceCascadingPolicyApplicable() && (
+                                    {this.isCascadingPolicyApplicable() && (
                                         <CascadePolicy
                                             canEdit={this.isEditing()}
                                             isCascadingEnabled={isCascadingEnabled}
diff --git a/src/features/metadata-instance-editor/Instances.js b/src/features/metadata-instance-editor/Instances.js
index 0c69a3d34d..07a3d28842 100644
--- a/src/features/metadata-instance-editor/Instances.js
+++ b/src/features/metadata-instance-editor/Instances.js
@@ -8,7 +8,7 @@ import type { JSONPatchOperations } from '../../common/types/api';
 type Props = {
     editors?: Array<MetadataEditor>,
     isCascadingPolicyApplicable?: boolean,
-    isFromFolder?: boolean,
+    isFolderInstance?: boolean,
     onModification?: (id: string, isDirty: boolean) => void,
     onRemove?: (id: string) => void,
     onSave?: (
@@ -22,7 +22,7 @@ type Props = {
 
 const Instances = ({
     isCascadingPolicyApplicable = false,
-    isFromFolder,
+    isFolderInstance,
     editors = [],
     onModification,
     onRemove,
@@ -48,7 +48,7 @@ const Instances = ({
                     onSave={onSave}
                     onRemove={onRemove}
                     template={template}
-                    isFromFolder={isFromFolder}
+                    isFolderInstance={isFolderInstance}
                 />
             );
         },
diff --git a/src/features/metadata-instance-editor/MetadataInstanceEditor.js b/src/features/metadata-instance-editor/MetadataInstanceEditor.js
index 2775813d8c..464ff581d6 100644
--- a/src/features/metadata-instance-editor/MetadataInstanceEditor.js
+++ b/src/features/metadata-instance-editor/MetadataInstanceEditor.js
@@ -17,7 +17,7 @@ type Props = {
     editors?: Array<MetadataEditor>,
     isCascadingPolicyApplicable?: boolean,
     isDropdownBusy?: boolean,
-    isFromFolder?: boolean,
+    isFolderInstance?: boolean,
     onAdd?: (template: MetadataTemplate) => void,
     onModification?: (id: string, isDirty: boolean) => void,
     onRemove?: (id: string) => void,
@@ -38,7 +38,7 @@ const MetadataInstanceEditor = ({
     canAdd,
     isCascadingPolicyApplicable = false,
     isDropdownBusy,
-    isFromFolder = false,
+    isFolderInstance = false,
     editors = [],
     onModification,
     onRemove,
@@ -69,7 +69,7 @@ const MetadataInstanceEditor = ({
                         onRemove={onRemove}
                         onSave={onSave}
                         selectedTemplateKey={selectedTemplateKey}
-                        isFromFolder={isFromFolder}
+                        isFolderInstance={isFolderInstance}
                     />
                 </ScrollWrapper>
             )}
diff --git a/src/features/metadata-instance-editor/__tests__/Instance.test.js b/src/features/metadata-instance-editor/__tests__/Instance.test.js
index 93564e4f5f..ac78c39ee5 100644
--- a/src/features/metadata-instance-editor/__tests__/Instance.test.js
+++ b/src/features/metadata-instance-editor/__tests__/Instance.test.js
@@ -151,19 +151,44 @@ const userDefinedTemplateField = [
 const intl = { formatMessage: jest.fn().mockReturnValue('Edit Metadata') };
 
 describe('features/metadata-instance-editor/fields/Instance', () => {
-    test('should correctly render templated metadata instance', () => {
-        const wrapper = shallow(
-            <Instance
-                data={data}
-                dataValue="value"
-                intl={intl}
-                template={{
-                    fields,
-                }}
-            />,
-        );
-        expect(wrapper).toMatchSnapshot();
-    });
+    test.each`
+        isFolderInstance
+        ${true}
+        ${false}
+    `(
+        'should correctly render templated metadata instance when isFolderInstance is $isFolderInstance',
+        ({ isFolderInstance }) => {
+            render(
+                <Instance
+                    cascadePolicy={{ canEdit: true, id: 'hello' }}
+                    data={data}
+                    dataValue="value"
+                    intl={intl}
+                    isCascadingPolicyApplicable
+                    isFolderInstance={isFolderInstance}
+                    shouldShowCascadingOptions
+                    onModification={jest.fn()}
+                    onRemove={jest.fn()}
+                    onSave={jest.fn()}
+                    canEdit
+                    template={{
+                        fields,
+                    }}
+                />,
+            );
+
+            const editButton = screen.queryByLabelText('Edit Metadata');
+            if (editButton) {
+                fireEvent.click(editButton);
+            }
+            const metadataInstanceEditor = screen.queryByTestId('metadata-cascade-policy');
+            if (isFolderInstance) {
+                expect(metadataInstanceEditor).toBeInTheDocument();
+            } else {
+                expect(metadataInstanceEditor).not.toBeInTheDocument();
+            }
+        },
+    );
 
     test.each`
         cascadePolicy                     | isCascadingPolicyApplicable
@@ -183,6 +208,7 @@ describe('features/metadata-instance-editor/fields/Instance', () => {
                     dataValue="value"
                     intl={intl}
                     isCascadingPolicyApplicable={isCascadingPolicyApplicable}
+                    isFolderInstance
                     shouldShowCascadingOptions
                     onModification={jest.fn()}
                     onRemove={jest.fn()}
diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
index bd41963cc7..f07a6e1f9b 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
@@ -11,7 +11,27 @@ exports[`features/metadata-instance-editor/fields/Instance collapsible isOpen pr
     }
     className=""
     hasStickyHeader={true}
-    headerActionItems={null}
+    headerActionItems={
+      <Tooltip
+        constrainToScrollParent={false}
+        constrainToWindow={true}
+        isDisabled={false}
+        position="top-left"
+        text="Edit Metadata"
+        theme="default"
+      >
+        <PlainButton
+          aria-label="Edit Metadata"
+          aria-pressed={false}
+          className="metadata-instance-editor-instance-edit"
+          data-resin-target="metadata-instanceedit"
+          onClick={[Function]}
+          type="button"
+        >
+          <IconEdit />
+        </PlainButton>
+      </Tooltip>
+    }
     isBordered={true}
     isOpen={true}
     title={
@@ -36,15 +56,6 @@ exports[`features/metadata-instance-editor/fields/Instance collapsible isOpen pr
         <div
           className="metadata-instance-editor-instance"
         >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
           <TemplatedInstance
             canEdit={false}
             data={
@@ -172,15 +183,6 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
         <div
           className="metadata-instance-editor-instance"
         >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={true}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
           <CustomInstance
             canEdit={false}
             data={
@@ -205,187 +207,6 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 </div>
 `;
 
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance 1`] = `
-<div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={null}
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={false}
-    >
-      <Form
-        onValidSubmit={[Function]}
-      >
-        <div
-          className="metadata-instance-editor-instance"
-        >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
-          <TemplatedInstance
-            canEdit={false}
-            data={
-              Object {
-                "datefield": "2018-06-20T00:00:00.000Z",
-                "enumfield": "yes",
-                "floatfield": 1,
-                "multiselectfield": Array [
-                  "yes",
-                  "no",
-                ],
-                "stringfield": "some string",
-              }
-            }
-            errors={Object {}}
-            onFieldChange={[Function]}
-            onFieldRemove={[Function]}
-            template={
-              Object {
-                "fields": Array [
-                  Object {
-                    "displayName": "No Description Field",
-                    "id": "field0",
-                    "key": "nodescfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a string field",
-                    "displayName": "String Field",
-                    "id": "field1",
-                    "key": "stringfield",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of an empty string field",
-                    "displayName": "Empty String Field",
-                    "id": "field2",
-                    "key": "emptystring",
-                    "type": "string",
-                  },
-                  Object {
-                    "description": "example of a float field",
-                    "displayName": "Float Field",
-                    "id": "field3",
-                    "key": "floatfield",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of an empty float field",
-                    "displayName": "Empty Float Field",
-                    "id": "field4",
-                    "key": "emptyfloat",
-                    "type": "float",
-                  },
-                  Object {
-                    "description": "example of a enum field",
-                    "displayName": "Enum Field",
-                    "id": "field5",
-                    "key": "enumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of an empty enum field",
-                    "displayName": "Empty Enum Field",
-                    "id": "field6",
-                    "key": "emptyenumfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                    ],
-                    "type": "enum",
-                  },
-                  Object {
-                    "description": "example of a date field",
-                    "displayName": "Date Field",
-                    "id": "field7",
-                    "key": "datefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of an empty date field",
-                    "displayName": "Empty Date Field",
-                    "id": "field8",
-                    "key": "emptydatefield",
-                    "type": "date",
-                  },
-                  Object {
-                    "description": "example of a multi select field field",
-                    "displayName": "Multi Select Field",
-                    "id": "field9",
-                    "key": "multiselectfield",
-                    "options": Array [
-                      Object {
-                        "key": "yes",
-                      },
-                      Object {
-                        "key": "no",
-                      },
-                      Object {
-                        "key": "maybe",
-                      },
-                      Object {
-                        "key": "idk?",
-                      },
-                      Object {
-                        "key": "oh well",
-                      },
-                      Object {
-                        "key": "whatever",
-                      },
-                    ],
-                    "type": "multiSelect",
-                  },
-                ],
-              }
-            }
-          />
-        </div>
-      </Form>
-    </LoadingIndicatorWrapper>
-  </Collapsible>
-</div>
-`;
-
 exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true, "id": "hello"} and isCascadingPolicyApplicable is false 1`] = `
 <div>
   <div>
@@ -725,6 +546,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                 >
                   <div
                     class="metadata-cascade-editor"
+                    data-testid="metadata-cascade-policy"
                   >
                     <div
                       class="metadata-cascade-enable"
@@ -801,12 +623,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description7"
+                        id="description65"
                       >
                         example of a string field
                       </div>
                       <input
-                        aria-describedby="description7"
+                        aria-describedby="description65"
                         aria-invalid="false"
                         name="stringfield"
                         placeholder="Set Value"
@@ -828,12 +650,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description9"
+                        id="description67"
                       >
                         example of an empty string field
                       </div>
                       <input
-                        aria-describedby="description9"
+                        aria-describedby="description67"
                         aria-invalid="false"
                         name="emptystring"
                         placeholder="Set Value"
@@ -855,12 +677,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description11"
+                        id="description69"
                       >
                         example of a float field
                       </div>
                       <input
-                        aria-describedby="description11"
+                        aria-describedby="description69"
                         aria-invalid="false"
                         name="floatfield"
                         placeholder="Set Value"
@@ -882,12 +704,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description13"
+                        id="description71"
                       >
                         example of an empty float field
                       </div>
                       <input
-                        aria-describedby="description13"
+                        aria-describedby="description71"
                         aria-invalid="false"
                         name="emptyfloat"
                         placeholder="Set Value"
@@ -918,7 +740,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         <button
                           aria-autocomplete="list"
                           aria-expanded="false"
-                          aria-owns="selectfield15"
+                          aria-owns="selectfield73"
                           class="select-button bdl-SelectButton"
                           role="listbox"
                           title="yes"
@@ -951,7 +773,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         <button
                           aria-autocomplete="list"
                           aria-expanded="false"
-                          aria-owns="selectfield17"
+                          aria-owns="selectfield75"
                           class="select-button bdl-SelectButton"
                           role="listbox"
                           title="Select Value"
@@ -978,13 +800,13 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         </span>
                         <div
                           class="date-picker-description"
-                          id="description20"
+                          id="description78"
                         >
                           example of a date field
                         </div>
                         <input
-                          aria-describedby="description20"
-                          aria-errormessage="errorMessage19"
+                          aria-describedby="description78"
+                          aria-errormessage="errorMessage77"
                           aria-invalid="false"
                           class="date-picker-input"
                           placeholder="Set Date"
@@ -993,7 +815,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         />
                         <span
                           class="accessibility-hidden"
-                          id="errorMessage19"
+                          id="errorMessage77"
                           role="alert"
                         />
                       </label>
@@ -1126,13 +948,13 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         </span>
                         <div
                           class="date-picker-description"
-                          id="description25"
+                          id="description83"
                         >
                           example of an empty date field
                         </div>
                         <input
-                          aria-describedby="description25"
-                          aria-errormessage="errorMessage24"
+                          aria-describedby="description83"
+                          aria-errormessage="errorMessage82"
                           aria-invalid="false"
                           class="date-picker-input"
                           placeholder="Set Date"
@@ -1141,7 +963,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         />
                         <span
                           class="accessibility-hidden"
-                          id="errorMessage24"
+                          id="errorMessage82"
                           role="alert"
                         />
                       </label>
@@ -1260,7 +1082,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         <button
                           aria-autocomplete="list"
                           aria-expanded="false"
-                          aria-owns="selectfield28"
+                          aria-owns="selectfield86"
                           class="select-button bdl-SelectButton"
                           role="listbox"
                           title="yes, no"
@@ -1646,6 +1468,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                 >
                   <div
                     class="metadata-cascade-editor"
+                    data-testid="metadata-cascade-policy"
                   >
                     <div
                       class="metadata-cascade-enable"
@@ -1721,12 +1544,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description38"
+                        id="description96"
                       >
                         example of a string field
                       </div>
                       <input
-                        aria-describedby="description38"
+                        aria-describedby="description96"
                         aria-invalid="false"
                         name="stringfield"
                         placeholder="Set Value"
@@ -1748,12 +1571,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description40"
+                        id="description98"
                       >
                         example of an empty string field
                       </div>
                       <input
-                        aria-describedby="description40"
+                        aria-describedby="description98"
                         aria-invalid="false"
                         name="emptystring"
                         placeholder="Set Value"
@@ -1775,12 +1598,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description42"
+                        id="description100"
                       >
                         example of a float field
                       </div>
                       <input
-                        aria-describedby="description42"
+                        aria-describedby="description100"
                         aria-invalid="false"
                         name="floatfield"
                         placeholder="Set Value"
@@ -1802,12 +1625,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description44"
+                        id="description102"
                       >
                         example of an empty float field
                       </div>
                       <input
-                        aria-describedby="description44"
+                        aria-describedby="description102"
                         aria-invalid="false"
                         name="emptyfloat"
                         placeholder="Set Value"
@@ -1838,7 +1661,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         <button
                           aria-autocomplete="list"
                           aria-expanded="false"
-                          aria-owns="selectfield46"
+                          aria-owns="selectfield104"
                           class="select-button bdl-SelectButton"
                           role="listbox"
                           title="yes"
@@ -1871,7 +1694,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         <button
                           aria-autocomplete="list"
                           aria-expanded="false"
-                          aria-owns="selectfield48"
+                          aria-owns="selectfield106"
                           class="select-button bdl-SelectButton"
                           role="listbox"
                           title="Select Value"
@@ -1898,13 +1721,13 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         </span>
                         <div
                           class="date-picker-description"
-                          id="description51"
+                          id="description109"
                         >
                           example of a date field
                         </div>
                         <input
-                          aria-describedby="description51"
-                          aria-errormessage="errorMessage50"
+                          aria-describedby="description109"
+                          aria-errormessage="errorMessage108"
                           aria-invalid="false"
                           class="date-picker-input"
                           placeholder="Set Date"
@@ -1913,7 +1736,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         />
                         <span
                           class="accessibility-hidden"
-                          id="errorMessage50"
+                          id="errorMessage108"
                           role="alert"
                         />
                       </label>
@@ -2046,13 +1869,13 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         </span>
                         <div
                           class="date-picker-description"
-                          id="description56"
+                          id="description114"
                         >
                           example of an empty date field
                         </div>
                         <input
-                          aria-describedby="description56"
-                          aria-errormessage="errorMessage55"
+                          aria-describedby="description114"
+                          aria-errormessage="errorMessage113"
                           aria-invalid="false"
                           class="date-picker-input"
                           placeholder="Set Date"
@@ -2061,7 +1884,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         />
                         <span
                           class="accessibility-hidden"
-                          id="errorMessage55"
+                          id="errorMessage113"
                           role="alert"
                         />
                       </label>
@@ -2180,7 +2003,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         <button
                           aria-autocomplete="list"
                           aria-expanded="false"
-                          aria-owns="selectfield59"
+                          aria-owns="selectfield117"
                           class="select-button bdl-SelectButton"
                           role="listbox"
                           title="yes, no"
@@ -2566,6 +2389,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                 >
                   <div
                     class="metadata-cascade-editor"
+                    data-testid="metadata-cascade-policy"
                   >
                     <div
                       class="metadata-cascade-enable"
@@ -2641,12 +2465,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description69"
+                        id="description127"
                       >
                         example of a string field
                       </div>
                       <input
-                        aria-describedby="description69"
+                        aria-describedby="description127"
                         aria-invalid="false"
                         name="stringfield"
                         placeholder="Set Value"
@@ -2668,12 +2492,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description71"
+                        id="description129"
                       >
                         example of an empty string field
                       </div>
                       <input
-                        aria-describedby="description71"
+                        aria-describedby="description129"
                         aria-invalid="false"
                         name="emptystring"
                         placeholder="Set Value"
@@ -2695,12 +2519,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description73"
+                        id="description131"
                       >
                         example of a float field
                       </div>
                       <input
-                        aria-describedby="description73"
+                        aria-describedby="description131"
                         aria-invalid="false"
                         name="floatfield"
                         placeholder="Set Value"
@@ -2722,12 +2546,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description75"
+                        id="description133"
                       >
                         example of an empty float field
                       </div>
                       <input
-                        aria-describedby="description75"
+                        aria-describedby="description133"
                         aria-invalid="false"
                         name="emptyfloat"
                         placeholder="Set Value"
@@ -2758,7 +2582,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         <button
                           aria-autocomplete="list"
                           aria-expanded="false"
-                          aria-owns="selectfield77"
+                          aria-owns="selectfield135"
                           class="select-button bdl-SelectButton"
                           role="listbox"
                           title="yes"
@@ -2791,7 +2615,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         <button
                           aria-autocomplete="list"
                           aria-expanded="false"
-                          aria-owns="selectfield79"
+                          aria-owns="selectfield137"
                           class="select-button bdl-SelectButton"
                           role="listbox"
                           title="Select Value"
@@ -2818,13 +2642,13 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         </span>
                         <div
                           class="date-picker-description"
-                          id="description82"
+                          id="description140"
                         >
                           example of a date field
                         </div>
                         <input
-                          aria-describedby="description82"
-                          aria-errormessage="errorMessage81"
+                          aria-describedby="description140"
+                          aria-errormessage="errorMessage139"
                           aria-invalid="false"
                           class="date-picker-input"
                           placeholder="Set Date"
@@ -2833,7 +2657,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         />
                         <span
                           class="accessibility-hidden"
-                          id="errorMessage81"
+                          id="errorMessage139"
                           role="alert"
                         />
                       </label>
@@ -2966,13 +2790,13 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         </span>
                         <div
                           class="date-picker-description"
-                          id="description87"
+                          id="description145"
                         >
                           example of an empty date field
                         </div>
                         <input
-                          aria-describedby="description87"
-                          aria-errormessage="errorMessage86"
+                          aria-describedby="description145"
+                          aria-errormessage="errorMessage144"
                           aria-invalid="false"
                           class="date-picker-input"
                           placeholder="Set Date"
@@ -2981,7 +2805,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         />
                         <span
                           class="accessibility-hidden"
-                          id="errorMessage86"
+                          id="errorMessage144"
                           role="alert"
                         />
                       </label>
@@ -3100,7 +2924,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         <button
                           aria-autocomplete="list"
                           aria-expanded="false"
-                          aria-owns="selectfield90"
+                          aria-owns="selectfield148"
                           class="select-button bdl-SelectButton"
                           role="listbox"
                           title="yes, no"
@@ -3152,51 +2976,733 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 </div>
 `;
 
-exports[`features/metadata-instance-editor/fields/Instance should correctly render the busy indicator 1`] = `
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when isFolderInstance is true 1`] = `
 <div>
-  <Collapsible
-    animationDuration={550}
-    buttonProps={
-      Object {
-        "data-resin-target": "metadata-card",
-      }
-    }
-    className=""
-    hasStickyHeader={true}
-    headerActionItems={null}
-    isBordered={true}
-    isOpen={true}
-    title={
-      <span
-        className="metadata-instance-editor-instance-title"
-      >
-        <IconMetadataColored
-          type="default"
-        />
-        <span
-          className="metadata-instance-editor-instance-title-text"
-        />
-      </span>
-    }
-  >
-    <LoadingIndicatorWrapper
-      isLoading={true}
+  <div>
+    <div
+      class="collapsible-card is-open is-bordered"
     >
-      <Form
+      <div
+        class="collapsible-card-header has-sticky-header"
+      >
+        <button
+          aria-expanded="true"
+          class="btn-plain collapsible-card-title"
+          data-resin-target="metadata-cardcollapse"
+          type="button"
+        >
+          <span
+            class="metadata-instance-editor-instance-title"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-metadata "
+              focusable="false"
+              height="16"
+              role="presentation"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                class="fill-color"
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
+                fill="#9f3fed"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <span
+              class="metadata-instance-editor-instance-title-text"
+            />
+          </span>
+          <svg
+            aria-hidden="true"
+            class="icon-caret-down collapsible-card-header-caret"
+            focusable="false"
+            height="6"
+            role="presentation"
+            viewBox="0 0 10 6"
+            width="8"
+          >
+            <path
+              class="fill-color"
+              d="M0 .5l5 5 5-5H0z"
+              fill="#909090"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
+        <span
+          class="bdl-Collapsible-actionItems"
+        >
+          <button
+            aria-label="Edit Metadata"
+            aria-pressed="true"
+            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+            data-resin-target="metadata-instanceedit"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-edit "
+              focusable="false"
+              height="14"
+              role="presentation"
+              viewBox="0 0 14 14"
+              width="14"
+            >
+              <path
+                class="fill-color"
+                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
+                fill="#6f6f6f"
+              />
+            </svg>
+          </button>
+        </span>
+      </div>
+      <div
+        aria-hidden="false"
+        class="rah-static rah-static--height-auto"
+        style="height: auto; overflow: visible;"
+      >
+        <div>
+          <div
+            class="collapsible-card-content"
+          >
+            <div
+              class="loading-indicator-wrapper "
+            >
+              <form
+                novalidate=""
+              >
+                <div
+                  class="metadata-instance-editor-instance"
+                >
+                  <div
+                    class="metadata-cascade-editor"
+                  >
+                    <div
+                      class="metadata-cascade-enable"
+                    >
+                      <div>
+                        <div />
+                        <div
+                          class="toggle-container metadata-cascade-toggle cascade-on"
+                        >
+                          <label
+                            class="toggle-simple"
+                          >
+                            <input
+                              checked=""
+                              class="toggle-simple-input"
+                              role="switch"
+                              type="checkbox"
+                            />
+                            <div
+                              class="toggle-simple-switch"
+                            />
+                            <div
+                              class="toggle-simple-label"
+                            />
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        class="cascade-policy-text"
+                      >
+                        <div />
+                         
+                        <a
+                          class="link cascade-policy-learnmore-link"
+                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
+                          rel="noopener"
+                          target="_blank"
+                        >
+                          <div />
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          No Description Field
+                        </span>
+                      </span>
+                      <input
+                        aria-invalid="false"
+                        name="nodescfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description7"
+                      >
+                        example of a string field
+                      </div>
+                      <input
+                        aria-describedby="description7"
+                        aria-invalid="false"
+                        name="stringfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="some string"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description9"
+                      >
+                        example of an empty string field
+                      </div>
+                      <input
+                        aria-describedby="description9"
+                        aria-invalid="false"
+                        name="emptystring"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description11"
+                      >
+                        example of a float field
+                      </div>
+                      <input
+                        aria-describedby="description11"
+                        aria-invalid="false"
+                        name="floatfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="1"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description13"
+                      >
+                        example of an empty float field
+                      </div>
+                      <input
+                        aria-describedby="description13"
+                        aria-invalid="false"
+                        name="emptyfloat"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of a enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield15"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes"
+                          type="button"
+                        >
+                          yes
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of an empty enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield17"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="Select Value"
+                          type="button"
+                        >
+                          Select Value
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description20"
+                        >
+                          example of a date field
+                        </div>
+                        <input
+                          aria-describedby="description20"
+                          aria-errormessage="errorMessage19"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage19"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Clear Date"
+                        class="btn-plain date-picker-clear-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <path
+                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </button>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value="2018-06-20T00:00:00.000Z"
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Empty Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description25"
+                        >
+                          example of an empty date field
+                        </div>
+                        <input
+                          aria-describedby="description25"
+                          aria-errormessage="errorMessage24"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value=""
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage24"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value=""
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-MultiSelectMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Multi Select Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-MultiSelectMetadataField-desc"
+                      >
+                        example of a multi select field field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield28"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes, no"
+                          type="button"
+                        >
+                          yes, no
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="metadata-instance-editor-footer"
+                >
+                  <div
+                    class="metadata-instance-editor-footer-delete"
+                  >
+                    <button
+                      class="btn-plain "
+                      data-resin-target="metadata-instanceremove"
+                      type="button"
+                    >
+                      <div />
+                    </button>
+                  </div>
+                  <div
+                    class="metadata-instance-editor-footer-save-cancel"
+                  >
+                    <button
+                      class="btn"
+                      data-resin-target="metadata-instancecancel"
+                      type="button"
+                    >
+                      <span
+                        class="btn-content"
+                      >
+                        <div />
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render the busy indicator 1`] = `
+<div>
+  <Collapsible
+    animationDuration={550}
+    buttonProps={
+      Object {
+        "data-resin-target": "metadata-card",
+      }
+    }
+    className=""
+    hasStickyHeader={true}
+    headerActionItems={null}
+    isBordered={true}
+    isOpen={true}
+    title={
+      <span
+        className="metadata-instance-editor-instance-title"
+      >
+        <IconMetadataColored
+          type="default"
+        />
+        <span
+          className="metadata-instance-editor-instance-title-text"
+        />
+      </span>
+    }
+  >
+    <LoadingIndicatorWrapper
+      isLoading={true}
+    >
+      <Form
         onValidSubmit={[Function]}
       >
         <div
           className="metadata-instance-editor-instance"
         >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
           <TemplatedInstance
             canEdit={false}
             data={
@@ -3344,7 +3850,27 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
     }
     className=""
     hasStickyHeader={true}
-    headerActionItems={null}
+    headerActionItems={
+      <Tooltip
+        constrainToScrollParent={false}
+        constrainToWindow={true}
+        isDisabled={false}
+        position="top-left"
+        text="Edit Metadata"
+        theme="default"
+      >
+        <PlainButton
+          aria-label="Edit Metadata"
+          aria-pressed={true}
+          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+          data-resin-target="metadata-instanceedit"
+          onClick={[Function]}
+          type="button"
+        >
+          <IconEdit />
+        </PlainButton>
+      </Tooltip>
+    }
     isBordered={true}
     isOpen={true}
     title={
@@ -3369,17 +3895,8 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
         <div
           className="metadata-instance-editor-instance"
         >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
           <TemplatedInstance
-            canEdit={false}
+            canEdit={true}
             data={
               Object {
                 "datefield": "2018-06-20T00:00:00.000Z",
@@ -3417,6 +3934,11 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
             }
           />
         </div>
+        <Footer
+          onCancel={[Function]}
+          onRemove={[Function]}
+          showSave={false}
+        />
       </Form>
     </LoadingIndicatorWrapper>
   </Collapsible>
@@ -3434,7 +3956,27 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
     }
     className=""
     hasStickyHeader={true}
-    headerActionItems={null}
+    headerActionItems={
+      <Tooltip
+        constrainToScrollParent={false}
+        constrainToWindow={true}
+        isDisabled={false}
+        position="top-left"
+        text="Edit Metadata"
+        theme="default"
+      >
+        <PlainButton
+          aria-label="Edit Metadata"
+          aria-pressed={true}
+          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+          data-resin-target="metadata-instanceedit"
+          onClick={[Function]}
+          type="button"
+        >
+          <IconEdit />
+        </PlainButton>
+      </Tooltip>
+    }
     isBordered={true}
     isOpen={true}
     title={
@@ -3459,17 +4001,8 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
         <div
           className="metadata-instance-editor-instance"
         >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
           <TemplatedInstance
-            canEdit={false}
+            canEdit={true}
             data={
               Object {
                 "datefield": "2018-06-20T00:00:00.000Z",
@@ -3492,6 +4025,11 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
             }
           />
         </div>
+        <Footer
+          onCancel={[Function]}
+          onRemove={[Function]}
+          showSave={false}
+        />
       </Form>
     </LoadingIndicatorWrapper>
   </Collapsible>
@@ -3554,15 +4092,6 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
         <div
           className="metadata-instance-editor-instance"
         >
-          <CascadePolicy
-            canEdit={true}
-            isCascadingEnabled={true}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
           <TemplatedInstance
             canEdit={true}
             data={
@@ -3715,7 +4244,27 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
     }
     className=""
     hasStickyHeader={true}
-    headerActionItems={null}
+    headerActionItems={
+      <Tooltip
+        constrainToScrollParent={false}
+        constrainToWindow={true}
+        isDisabled={false}
+        position="top-left"
+        text="Edit Metadata"
+        theme="default"
+      >
+        <PlainButton
+          aria-label="Edit Metadata"
+          aria-pressed={true}
+          className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+          data-resin-target="metadata-instanceedit"
+          onClick={[Function]}
+          type="button"
+        >
+          <IconEdit />
+        </PlainButton>
+      </Tooltip>
+    }
     isBordered={true}
     isOpen={true}
     title={
@@ -3740,17 +4289,8 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
         <div
           className="metadata-instance-editor-instance"
         >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
           <TemplatedInstance
-            canEdit={false}
+            canEdit={true}
             data={
               Object {
                 "datefield": "2018-06-20T00:00:00.000Z",
@@ -3879,6 +4419,11 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
             }
           />
         </div>
+        <Footer
+          onCancel={[Function]}
+          onRemove={[Function]}
+          showSave={false}
+        />
       </Form>
     </LoadingIndicatorWrapper>
   </Collapsible>
@@ -3921,17 +4466,8 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
         <div
           className="metadata-instance-editor-instance"
         >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
           <TemplatedInstance
-            canEdit={false}
+            canEdit={true}
             data={
               Object {
                 "datefield": "2018-06-20T00:00:00.000Z",
@@ -4060,6 +4596,11 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
             }
           />
         </div>
+        <Footer
+          onCancel={[Function]}
+          onRemove={[Function]}
+          showSave={true}
+        />
       </Form>
     </LoadingIndicatorWrapper>
   </Collapsible>
@@ -4102,15 +4643,6 @@ exports[`features/metadata-instance-editor/fields/Instance should not render foo
         <div
           className="metadata-instance-editor-instance"
         >
-          <CascadePolicy
-            canEdit={false}
-            isCascadingEnabled={false}
-            isCascadingOverwritten={false}
-            isCustomMetadata={false}
-            onCascadeModeChange={[Function]}
-            onCascadeToggle={[Function]}
-            shouldShowCascadeOptions={false}
-          />
           <TemplatedInstance
             canEdit={false}
             data={

From 91062a837fdfc97c6eed2b5a5e7e2ac4c0559c7c Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Wed, 2 Aug 2023 10:27:11 -0400
Subject: [PATCH 12/25] fix(metadata): Disable updates to metadata

---
 .../__snapshots__/Instance.test.js.snap       | 691 ------------------
 1 file changed, 691 deletions(-)

diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
index f07a6e1f9b..aaabab93b1 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
@@ -2976,697 +2976,6 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 </div>
 `;
 
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when isFolderInstance is true 1`] = `
-<div>
-  <div>
-    <div
-      class="collapsible-card is-open is-bordered"
-    >
-      <div
-        class="collapsible-card-header has-sticky-header"
-      >
-        <button
-          aria-expanded="true"
-          class="btn-plain collapsible-card-title"
-          data-resin-target="metadata-cardcollapse"
-          type="button"
-        >
-          <span
-            class="metadata-instance-editor-instance-title"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-metadata "
-              focusable="false"
-              height="16"
-              role="presentation"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                class="fill-color"
-                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
-                fill="#9f3fed"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <span
-              class="metadata-instance-editor-instance-title-text"
-            />
-          </span>
-          <svg
-            aria-hidden="true"
-            class="icon-caret-down collapsible-card-header-caret"
-            focusable="false"
-            height="6"
-            role="presentation"
-            viewBox="0 0 10 6"
-            width="8"
-          >
-            <path
-              class="fill-color"
-              d="M0 .5l5 5 5-5H0z"
-              fill="#909090"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </button>
-        <span
-          class="bdl-Collapsible-actionItems"
-        >
-          <button
-            aria-label="Edit Metadata"
-            aria-pressed="true"
-            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-            data-resin-target="metadata-instanceedit"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-edit "
-              focusable="false"
-              height="14"
-              role="presentation"
-              viewBox="0 0 14 14"
-              width="14"
-            >
-              <path
-                class="fill-color"
-                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
-                fill="#6f6f6f"
-              />
-            </svg>
-          </button>
-        </span>
-      </div>
-      <div
-        aria-hidden="false"
-        class="rah-static rah-static--height-auto"
-        style="height: auto; overflow: visible;"
-      >
-        <div>
-          <div
-            class="collapsible-card-content"
-          >
-            <div
-              class="loading-indicator-wrapper "
-            >
-              <form
-                novalidate=""
-              >
-                <div
-                  class="metadata-instance-editor-instance"
-                >
-                  <div
-                    class="metadata-cascade-editor"
-                  >
-                    <div
-                      class="metadata-cascade-enable"
-                    >
-                      <div>
-                        <div />
-                        <div
-                          class="toggle-container metadata-cascade-toggle cascade-on"
-                        >
-                          <label
-                            class="toggle-simple"
-                          >
-                            <input
-                              checked=""
-                              class="toggle-simple-input"
-                              role="switch"
-                              type="checkbox"
-                            />
-                            <div
-                              class="toggle-simple-switch"
-                            />
-                            <div
-                              class="toggle-simple-label"
-                            />
-                          </label>
-                        </div>
-                      </div>
-                      <div
-                        class="cascade-policy-text"
-                      >
-                        <div />
-                         
-                        <a
-                          class="link cascade-policy-learnmore-link"
-                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
-                          rel="noopener"
-                          target="_blank"
-                        >
-                          <div />
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          No Description Field
-                        </span>
-                      </span>
-                      <input
-                        aria-invalid="false"
-                        name="nodescfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description7"
-                      >
-                        example of a string field
-                      </div>
-                      <input
-                        aria-describedby="description7"
-                        aria-invalid="false"
-                        name="stringfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="some string"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description9"
-                      >
-                        example of an empty string field
-                      </div>
-                      <input
-                        aria-describedby="description9"
-                        aria-invalid="false"
-                        name="emptystring"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description11"
-                      >
-                        example of a float field
-                      </div>
-                      <input
-                        aria-describedby="description11"
-                        aria-invalid="false"
-                        name="floatfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="1"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description13"
-                      >
-                        example of an empty float field
-                      </div>
-                      <input
-                        aria-describedby="description13"
-                        aria-invalid="false"
-                        name="emptyfloat"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of a enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield15"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes"
-                          type="button"
-                        >
-                          yes
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of an empty enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield17"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="Select Value"
-                          type="button"
-                        >
-                          Select Value
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description20"
-                        >
-                          example of a date field
-                        </div>
-                        <input
-                          aria-describedby="description20"
-                          aria-errormessage="errorMessage19"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage19"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Clear Date"
-                        class="btn-plain date-picker-clear-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <path
-                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value="2018-06-20T00:00:00.000Z"
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Empty Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description25"
-                        >
-                          example of an empty date field
-                        </div>
-                        <input
-                          aria-describedby="description25"
-                          aria-errormessage="errorMessage24"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value=""
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage24"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value=""
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-MultiSelectMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Multi Select Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-MultiSelectMetadataField-desc"
-                      >
-                        example of a multi select field field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield28"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes, no"
-                          type="button"
-                        >
-                          yes, no
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                </div>
-                <div
-                  class="metadata-instance-editor-footer"
-                >
-                  <div
-                    class="metadata-instance-editor-footer-delete"
-                  >
-                    <button
-                      class="btn-plain "
-                      data-resin-target="metadata-instanceremove"
-                      type="button"
-                    >
-                      <div />
-                    </button>
-                  </div>
-                  <div
-                    class="metadata-instance-editor-footer-save-cancel"
-                  >
-                    <button
-                      class="btn"
-                      data-resin-target="metadata-instancecancel"
-                      type="button"
-                    >
-                      <span
-                        class="btn-content"
-                      >
-                        <div />
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`features/metadata-instance-editor/fields/Instance should correctly render the busy indicator 1`] = `
 <div>
   <Collapsible

From 4a6a954e7cf9a28164c693e30128c4097267eda2 Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Wed, 2 Aug 2023 15:37:02 -0400
Subject: [PATCH 13/25] fix(metadata): Disable updates to metadata

---
 .../__tests__/__snapshots__/CascadePolicy.test.js.snap           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/CascadePolicy.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/CascadePolicy.test.js.snap
index ee02b24279..57bdf950bf 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/CascadePolicy.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/CascadePolicy.test.js.snap
@@ -37,6 +37,7 @@ exports[`features/metadata-instance-editor/CascadePolicy should correctly render
 <Fragment>
   <div
     className="metadata-cascade-editor"
+    data-testid="metadata-cascade-policy"
   >
     <div
       className="metadata-cascade-enable"

From e56de3b3565d7ee20e3bfba97ad18c96b46e2fdb Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Thu, 3 Aug 2023 08:26:34 -0400
Subject: [PATCH 14/25] fix(metadata): Disable updates to metadata

---
 .../__tests__/__snapshots__/MetadataInstanceEditor.test.js.snap  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/MetadataInstanceEditor.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/MetadataInstanceEditor.test.js.snap
index be0a02ab7b..6f32c82b2d 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/MetadataInstanceEditor.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/MetadataInstanceEditor.test.js.snap
@@ -1092,6 +1092,7 @@ exports[`features/metadata-editor-editor/MetadataInstanceEditor should correctly
           ]
         }
         isCascadingPolicyApplicable={false}
+        isFolderInstance={false}
       />
     </ScrollWrapper>
   </div>

From 3c06a6abef114c0e6ac9cc0b6451a10fa1194ea0 Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Mon, 7 Aug 2023 10:42:12 -0400
Subject: [PATCH 15/25] fix(metadata): Disable updates to metadata

---
 src/common/types/metadata.js                  |  2 +
 .../metadata-instance-editor/Instance.js      | 41 ++++---------------
 .../metadata-instance-editor/Instances.js     | 16 ++------
 .../MetadataInstanceEditor.js                 |  6 ---
 4 files changed, 13 insertions(+), 52 deletions(-)

diff --git a/src/common/types/metadata.js b/src/common/types/metadata.js
index afd4ea1e09..8074287dd6 100644
--- a/src/common/types/metadata.js
+++ b/src/common/types/metadata.js
@@ -88,6 +88,8 @@ type MetadataInstance = {
     cascadePolicy?: MetadataCascadePolicy,
     data: MetadataFields,
     id: string,
+    isCascadingPolicyApplicable?: boolean,
+    isFolderInstance?: boolean,
 };
 
 type MetadataInstanceV2 = {
diff --git a/src/features/metadata-instance-editor/Instance.js b/src/features/metadata-instance-editor/Instance.js
index 6cec6265bc..0ea9364eb3 100644
--- a/src/features/metadata-instance-editor/Instance.js
+++ b/src/features/metadata-instance-editor/Instance.js
@@ -209,12 +209,11 @@ class Instance extends React.PureComponent<Props, State> {
             id,
             isDirty,
             isCascadingPolicyApplicable,
+            isFolderInstance,
             onSave,
-            template,
         }: Props = this.props;
         const { data: currentData, errors, isCascadingEnabled, isCascadingOverwritten }: State = this.state;
-        const isCustomInstance = template.templateKey === TEMPLATE_CUSTOM_PROPERTIES;
-        const hasCascadePermission = isCustomInstance ? true : isCascadingPolicyApplicable;
+        const hasCascadePermission = isFolderInstance ? isCascadingPolicyApplicable : true;
 
         if (!this.isEditing() || !isDirty || !onSave || Object.keys(errors).length) {
             return;
@@ -446,10 +445,7 @@ class Instance extends React.PureComponent<Props, State> {
      * @return {boolean} true if cascading policy is enabled
      */
     isCascadingEnabled(props: Props) {
-        if (props.cascadePolicy) {
-            return !!props.cascadePolicy.id;
-        }
-        return false;
+        return !!props?.cascadePolicy?.id;
     }
 
     /**
@@ -530,41 +526,19 @@ class Instance extends React.PureComponent<Props, State> {
         return ops;
     }
 
-    /**
-     * Utility function to determine if instance should consider cascading policy
-     *
-     * @return {boolean} true if cascading policy is applicable
-     */
-    isCascadingPolicyApplicable = () => {
-        const { template, isFolderInstance }: Props = this.props;
-        const isTemplatedInstance = template.templateKey !== TEMPLATE_CUSTOM_PROPERTIES;
-        return isTemplatedInstance && isFolderInstance;
-    };
-
     /**
      * Utility function to determine if instance is editable
      *
      * @return {boolean} true if editable
      */
     canEdit(): boolean {
-        const {
-            canEdit,
-            onModification,
-            onRemove,
-            onSave,
-            template,
-            isCascadingPolicyApplicable,
-            isFolderInstance,
-        }: Props = this.props;
-        const isCustom = template.templateKey === TEMPLATE_CUSTOM_PROPERTIES;
-        const hasCascadePermission = isCustom || !isFolderInstance ? true : isCascadingPolicyApplicable;
+        const { canEdit, onModification, onRemove, onSave }: Props = this.props;
 
         return !!(
             canEdit &&
             typeof onRemove === 'function' &&
             typeof onSave === 'function' &&
-            typeof onModification === 'function' &&
-            hasCascadePermission
+            typeof onModification === 'function'
         );
     }
 
@@ -608,7 +582,7 @@ class Instance extends React.PureComponent<Props, State> {
     };
 
     render() {
-        const { isDirty, isOpen, template }: Props = this.props;
+        const { isDirty, isOpen, template, isFolderInstance }: Props = this.props;
         const { fields = [] } = template;
         const {
             data,
@@ -654,7 +628,8 @@ class Instance extends React.PureComponent<Props, State> {
                         <LoadingIndicatorWrapper isLoading={isBusy}>
                             <Form onValidSubmit={isDirty ? this.onSave : noop}>
                                 <div className="metadata-instance-editor-instance">
-                                    {this.isCascadingPolicyApplicable() && (
+                                    {/* policies aren't enabled on custom instances but we show this anyway to display a message to inform the user */}
+                                    {isFolderInstance && (
                                         <CascadePolicy
                                             canEdit={this.isEditing()}
                                             isCascadingEnabled={isCascadingEnabled}
diff --git a/src/features/metadata-instance-editor/Instances.js b/src/features/metadata-instance-editor/Instances.js
index 07a3d28842..80b39113e1 100644
--- a/src/features/metadata-instance-editor/Instances.js
+++ b/src/features/metadata-instance-editor/Instances.js
@@ -7,8 +7,6 @@ import type { JSONPatchOperations } from '../../common/types/api';
 
 type Props = {
     editors?: Array<MetadataEditor>,
-    isCascadingPolicyApplicable?: boolean,
-    isFolderInstance?: boolean,
     onModification?: (id: string, isDirty: boolean) => void,
     onRemove?: (id: string) => void,
     onSave?: (
@@ -20,15 +18,7 @@ type Props = {
     selectedTemplateKey?: string,
 };
 
-const Instances = ({
-    isCascadingPolicyApplicable = false,
-    isFolderInstance,
-    editors = [],
-    onModification,
-    onRemove,
-    onSave,
-    selectedTemplateKey,
-}: Props) =>
+const Instances = ({ editors = [], onModification, onRemove, onSave, selectedTemplateKey }: Props) =>
     editors.map<React.Element<typeof Instance>>(
         ({ isDirty = false, instance, hasError = false, template }: MetadataEditor) => {
             const { templateKey } = template;
@@ -40,7 +30,7 @@ const Instances = ({
                     data={instance.data}
                     hasError={hasError}
                     id={instance.id}
-                    isCascadingPolicyApplicable={isCascadingPolicyApplicable}
+                    isCascadingPolicyApplicable={!!instance?.isCascadingPolicyApplicable}
                     isDirty={isDirty}
                     isOpen={isOpen}
                     key={`${instance.id}-${templateKey}`}
@@ -48,7 +38,7 @@ const Instances = ({
                     onSave={onSave}
                     onRemove={onRemove}
                     template={template}
-                    isFolderInstance={isFolderInstance}
+                    isFolderInstance={!!instance?.isFolderInstance}
                 />
             );
         },
diff --git a/src/features/metadata-instance-editor/MetadataInstanceEditor.js b/src/features/metadata-instance-editor/MetadataInstanceEditor.js
index 464ff581d6..c8d6c4ca18 100644
--- a/src/features/metadata-instance-editor/MetadataInstanceEditor.js
+++ b/src/features/metadata-instance-editor/MetadataInstanceEditor.js
@@ -15,9 +15,7 @@ type Props = {
     blurExceptionClassNames?: Array<string>,
     canAdd: boolean,
     editors?: Array<MetadataEditor>,
-    isCascadingPolicyApplicable?: boolean,
     isDropdownBusy?: boolean,
-    isFolderInstance?: boolean,
     onAdd?: (template: MetadataTemplate) => void,
     onModification?: (id: string, isDirty: boolean) => void,
     onRemove?: (id: string) => void,
@@ -36,9 +34,7 @@ type Props = {
 const MetadataInstanceEditor = ({
     blurExceptionClassNames,
     canAdd,
-    isCascadingPolicyApplicable = false,
     isDropdownBusy,
-    isFolderInstance = false,
     editors = [],
     onModification,
     onRemove,
@@ -64,12 +60,10 @@ const MetadataInstanceEditor = ({
                 <ScrollWrapper>
                     <Instances
                         editors={editors}
-                        isCascadingPolicyApplicable={isCascadingPolicyApplicable}
                         onModification={onModification}
                         onRemove={onRemove}
                         onSave={onSave}
                         selectedTemplateKey={selectedTemplateKey}
-                        isFolderInstance={isFolderInstance}
                     />
                 </ScrollWrapper>
             )}

From 9d109ee7d98f815d74bd8304d2ba314814c827c8 Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Wed, 9 Aug 2023 15:16:11 -0400
Subject: [PATCH 16/25] fix(metadata): Disable updates to metadata

---
 .../metadata-instance-editor/Instance.js      | 38 +++++++------------
 .../metadata-instance-editor/Instances.js     | 16 ++++++--
 .../MetadataInstanceEditor.js                 |  6 +++
 3 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/features/metadata-instance-editor/Instance.js b/src/features/metadata-instance-editor/Instance.js
index 0ea9364eb3..5f83de999c 100644
--- a/src/features/metadata-instance-editor/Instance.js
+++ b/src/features/metadata-instance-editor/Instance.js
@@ -203,17 +203,8 @@ class Instance extends React.PureComponent<Props, State> {
      * @return {void}
      */
     onSave = (): void => {
-        const {
-            cascadePolicy,
-            data: originalData,
-            id,
-            isDirty,
-            isCascadingPolicyApplicable,
-            isFolderInstance,
-            onSave,
-        }: Props = this.props;
+        const { cascadePolicy = {}, data: originalData, id, isDirty, onSave, isFolderInstance }: Props = this.props;
         const { data: currentData, errors, isCascadingEnabled, isCascadingOverwritten }: State = this.state;
-        const hasCascadePermission = isFolderInstance ? isCascadingPolicyApplicable : true;
 
         if (!this.isEditing() || !isDirty || !onSave || Object.keys(errors).length) {
             return;
@@ -224,19 +215,16 @@ class Instance extends React.PureComponent<Props, State> {
             isEditing: false,
             shouldShowCascadeOptions: false,
         });
-        onSave(
-            id,
-            this.createJSONPatch(currentData, originalData),
-            hasCascadePermission
-                ? {
-                      canEdit: cascadePolicy ? cascadePolicy.canEdit : false,
-                      id: cascadePolicy ? cascadePolicy.id : undefined,
-                      isEnabled: isCascadingEnabled,
-                      overwrite: isCascadingOverwritten,
-                  }
-                : undefined,
-            cloneDeep(currentData),
-        );
+
+        const cascadePolicyData = {
+            ...cascadePolicy,
+            isEnabled: isFolderInstance ? isCascadingEnabled : false,
+            overwrite: isCascadingOverwritten,
+        };
+
+        const clonedCurrentData = cloneDeep(currentData);
+        const JSONPatch = this.createJSONPatch(clonedCurrentData, originalData);
+        onSave(id, JSONPatch, cascadePolicyData, clonedCurrentData);
     };
 
     /**
@@ -403,8 +391,8 @@ class Instance extends React.PureComponent<Props, State> {
      * Get the delete confirmation message base on the template key
      */
     getConfirmationMessage(): React.Node {
-        const { template, isCascadingPolicyApplicable }: Props = this.props;
-        const isFile = !isCascadingPolicyApplicable;
+        const { template, isFolderInstance }: Props = this.props;
+        const isFile = !isFolderInstance;
         return this.renderDeleteMessage(isFile, template);
     }
 
diff --git a/src/features/metadata-instance-editor/Instances.js b/src/features/metadata-instance-editor/Instances.js
index 80b39113e1..ddff32c842 100644
--- a/src/features/metadata-instance-editor/Instances.js
+++ b/src/features/metadata-instance-editor/Instances.js
@@ -7,6 +7,8 @@ import type { JSONPatchOperations } from '../../common/types/api';
 
 type Props = {
     editors?: Array<MetadataEditor>,
+    isCascadingPolicyApplicable?: boolean,
+    isFolderInstance?: boolean,
     onModification?: (id: string, isDirty: boolean) => void,
     onRemove?: (id: string) => void,
     onSave?: (
@@ -18,7 +20,15 @@ type Props = {
     selectedTemplateKey?: string,
 };
 
-const Instances = ({ editors = [], onModification, onRemove, onSave, selectedTemplateKey }: Props) =>
+const Instances = ({
+    editors = [],
+    isCascadingPolicyApplicable = false,
+    isFolderInstance = false,
+    onModification,
+    onRemove,
+    onSave,
+    selectedTemplateKey,
+}: Props) =>
     editors.map<React.Element<typeof Instance>>(
         ({ isDirty = false, instance, hasError = false, template }: MetadataEditor) => {
             const { templateKey } = template;
@@ -30,7 +40,7 @@ const Instances = ({ editors = [], onModification, onRemove, onSave, selectedTem
                     data={instance.data}
                     hasError={hasError}
                     id={instance.id}
-                    isCascadingPolicyApplicable={!!instance?.isCascadingPolicyApplicable}
+                    isCascadingPolicyApplicable={isCascadingPolicyApplicable}
                     isDirty={isDirty}
                     isOpen={isOpen}
                     key={`${instance.id}-${templateKey}`}
@@ -38,7 +48,7 @@ const Instances = ({ editors = [], onModification, onRemove, onSave, selectedTem
                     onSave={onSave}
                     onRemove={onRemove}
                     template={template}
-                    isFolderInstance={!!instance?.isFolderInstance}
+                    isFolderInstance={isFolderInstance}
                 />
             );
         },
diff --git a/src/features/metadata-instance-editor/MetadataInstanceEditor.js b/src/features/metadata-instance-editor/MetadataInstanceEditor.js
index c8d6c4ca18..0bdfcc75f3 100644
--- a/src/features/metadata-instance-editor/MetadataInstanceEditor.js
+++ b/src/features/metadata-instance-editor/MetadataInstanceEditor.js
@@ -15,7 +15,9 @@ type Props = {
     blurExceptionClassNames?: Array<string>,
     canAdd: boolean,
     editors?: Array<MetadataEditor>,
+    isCascadingPolicyApplicable?: boolean,
     isDropdownBusy?: boolean,
+    isFolderInstance?: boolean,
     onAdd?: (template: MetadataTemplate) => void,
     onModification?: (id: string, isDirty: boolean) => void,
     onRemove?: (id: string) => void,
@@ -34,7 +36,9 @@ type Props = {
 const MetadataInstanceEditor = ({
     blurExceptionClassNames,
     canAdd,
+    isCascadingPolicyApplicable = false,
     isDropdownBusy,
+    isFolderInstance = false,
     editors = [],
     onModification,
     onRemove,
@@ -60,6 +64,8 @@ const MetadataInstanceEditor = ({
                 <ScrollWrapper>
                     <Instances
                         editors={editors}
+                        isCascadingPolicyApplicable={isCascadingPolicyApplicable}
+                        isFolderInstance={isFolderInstance}
                         onModification={onModification}
                         onRemove={onRemove}
                         onSave={onSave}

From 496f857885dfc4de8352ce7f5b28cb7117134912 Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Thu, 10 Aug 2023 10:11:39 -0400
Subject: [PATCH 17/25] fix(metadata): Disable updates to metadata

---
 .../__snapshots__/Instances.test.js.snap      | 214 ------------------
 1 file changed, 214 deletions(-)

diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instances.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instances.test.js.snap
index 04b53d04d1..e69de29bb2 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instances.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instances.test.js.snap
@@ -1,214 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`features/metadata-editor-editor/Instances should correctly render editors 1`] = `
-Array [
-  <Instance
-    canEdit={true}
-    data={
-      Object {
-        "datefield": "2018-06-20T00:00:00.000Z",
-        "enumfield": "yes",
-        "floatfield": 1,
-        "stringfield": "some string",
-      }
-    }
-    hasError={false}
-    id="editor1"
-    isCascadingPolicyApplicable={false}
-    isDirty={false}
-    isOpen={false}
-    key="editor1-template1"
-    template={
-      Object {
-        "displayName": "template1 title",
-        "fields": Array [
-          Object {
-            "displayName": "No Description Field",
-            "id": "field0",
-            "key": "nodescfield",
-            "type": "string",
-          },
-          Object {
-            "description": "example of a string field",
-            "displayName": "String Field",
-            "id": "field1",
-            "key": "stringfield",
-            "type": "string",
-          },
-          Object {
-            "description": "example of an empty string field",
-            "displayName": "Empty String Field",
-            "id": "field2",
-            "key": "emptystring",
-            "type": "string",
-          },
-          Object {
-            "description": "example of a float field",
-            "displayName": "Float Field",
-            "id": "field3",
-            "key": "floatfield",
-            "type": "float",
-          },
-          Object {
-            "description": "example of an empty float field",
-            "displayName": "Empty Float Field",
-            "id": "field4",
-            "key": "emptyfloat",
-            "type": "float",
-          },
-          Object {
-            "description": "example of a enum field",
-            "displayName": "Enum Field",
-            "id": "field5",
-            "key": "enumfield",
-            "options": Array [
-              Object {
-                "key": "yes",
-              },
-              Object {
-                "key": "no",
-              },
-            ],
-            "type": "enum",
-          },
-          Object {
-            "description": "example of an empty enum field",
-            "displayName": "Empty Enum Field",
-            "id": "field6",
-            "key": "emptyenumfield",
-            "options": Array [
-              Object {
-                "key": "yes",
-              },
-              Object {
-                "key": "no",
-              },
-            ],
-            "type": "enum",
-          },
-          Object {
-            "description": "example of a date field",
-            "displayName": "Date Field",
-            "id": "field7",
-            "key": "datefield",
-            "type": "date",
-          },
-          Object {
-            "description": "example of an empty date field",
-            "displayName": "Empty Date Field",
-            "id": "field8",
-            "key": "emptydatefield",
-            "type": "date",
-          },
-        ],
-        "id": "template1",
-        "templateKey": "template1",
-      }
-    }
-  />,
-  <Instance
-    canEdit={false}
-    data={
-      Object {
-        "datefield": "2018-06-20T00:00:00.000Z",
-        "enumfield": "yes",
-        "floatfield": 1,
-        "stringfield": "some string",
-      }
-    }
-    hasError={false}
-    id="editor2"
-    isCascadingPolicyApplicable={false}
-    isDirty={true}
-    isOpen={false}
-    key="editor2-template2"
-    template={
-      Object {
-        "displayName": "template2 title",
-        "fields": Array [
-          Object {
-            "displayName": "No Description Field",
-            "id": "field0",
-            "key": "nodescfield",
-            "type": "string",
-          },
-          Object {
-            "description": "example of a string field",
-            "displayName": "String Field",
-            "id": "field1",
-            "key": "stringfield",
-            "type": "string",
-          },
-          Object {
-            "description": "example of an empty string field",
-            "displayName": "Empty String Field",
-            "id": "field2",
-            "key": "emptystring",
-            "type": "string",
-          },
-          Object {
-            "description": "example of a float field",
-            "displayName": "Float Field",
-            "id": "field3",
-            "key": "floatfield",
-            "type": "float",
-          },
-          Object {
-            "description": "example of an empty float field",
-            "displayName": "Empty Float Field",
-            "id": "field4",
-            "key": "emptyfloat",
-            "type": "float",
-          },
-          Object {
-            "description": "example of a enum field",
-            "displayName": "Enum Field",
-            "id": "field5",
-            "key": "enumfield",
-            "options": Array [
-              Object {
-                "key": "yes",
-              },
-              Object {
-                "key": "no",
-              },
-            ],
-            "type": "enum",
-          },
-          Object {
-            "description": "example of an empty enum field",
-            "displayName": "Empty Enum Field",
-            "id": "field6",
-            "key": "emptyenumfield",
-            "options": Array [
-              Object {
-                "key": "yes",
-              },
-              Object {
-                "key": "no",
-              },
-            ],
-            "type": "enum",
-          },
-          Object {
-            "description": "example of a date field",
-            "displayName": "Date Field",
-            "id": "field7",
-            "key": "datefield",
-            "type": "date",
-          },
-          Object {
-            "description": "example of an empty date field",
-            "displayName": "Empty Date Field",
-            "id": "field8",
-            "key": "emptydatefield",
-            "type": "date",
-          },
-        ],
-        "id": "template2",
-        "templateKey": "template2",
-      }
-    }
-  />,
-]
-`;

From 8166c3ac45eb8ef394266092d35ce5f90f3ddfa7 Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Thu, 10 Aug 2023 11:10:50 -0400
Subject: [PATCH 18/25] fix(metadata): Disable updates to metadata

---
 .../__snapshots__/Instance.test.js.snap       | 2713 +++++++++++++----
 .../__snapshots__/Instances.test.js.snap      |  216 ++
 2 files changed, 2262 insertions(+), 667 deletions(-)

diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
index aaabab93b1..ca97d809d2 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
@@ -262,6 +262,34 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
             />
           </svg>
         </button>
+        <span
+          class="bdl-Collapsible-actionItems"
+        >
+          <button
+            aria-label="Edit Metadata"
+            aria-pressed="true"
+            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+            data-resin-target="metadata-instanceedit"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-edit "
+              focusable="false"
+              height="14"
+              role="presentation"
+              viewBox="0 0 14 14"
+              width="14"
+            >
+              <path
+                class="fill-color"
+                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
+                fill="#6f6f6f"
+              />
+            </svg>
+          </button>
+        </span>
       </div>
       <div
         aria-hidden="false"
@@ -282,155 +310,1967 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                   class="metadata-instance-editor-instance"
                 >
                   <div
-                    class="metadata-cascade-notice"
+                    class="metadata-cascade-editor"
+                    data-testid="metadata-cascade-policy"
+                  >
+                    <div
+                      class="metadata-cascade-enable"
+                    >
+                      <div>
+                        <div />
+                        <div
+                          class="toggle-container metadata-cascade-toggle cascade-on"
+                        >
+                          <label
+                            class="toggle-simple"
+                          >
+                            <input
+                              checked=""
+                              class="toggle-simple-input"
+                              role="switch"
+                              type="checkbox"
+                            />
+                            <div
+                              class="toggle-simple-switch"
+                            />
+                            <div
+                              class="toggle-simple-label"
+                            />
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        class="cascade-policy-text"
+                      >
+                        <div />
+                         
+                        <a
+                          class="link cascade-policy-learnmore-link"
+                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
+                          rel="noopener"
+                          target="_blank"
+                        >
+                          <div />
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
                   >
-                    <div />
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          No Description Field
+                        </span>
+                      </span>
+                      <input
+                        aria-invalid="false"
+                        name="nodescfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
                   </div>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
                   >
-                    <dt>
-                      No Description Field
-                    </dt>
-                    <dd>
-                      <div />
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      String Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of a string field
-                    </i>
-                    <dd>
-                      some string
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Empty String Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of an empty string field
-                    </i>
-                    <dd>
-                      <div />
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Float Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of a float field
-                    </i>
-                    <dd>
-                      1
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Empty Float Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of an empty float field
-                    </i>
-                    <dd>
-                      <div />
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Enum Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of a enum field
-                    </i>
-                    <dd>
-                      yes
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Empty Enum Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of an empty enum field
-                    </i>
-                    <dd>
-                      <div />
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Date Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of a date field
-                    </i>
-                    <dd>
-                      <div />
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Empty Date Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of an empty date field
-                    </i>
-                    <dd>
-                      <div />
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Multi Select Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description94"
+                      >
+                        example of a string field
+                      </div>
+                      <input
+                        aria-describedby="description94"
+                        aria-invalid="false"
+                        name="stringfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="some string"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description96"
+                      >
+                        example of an empty string field
+                      </div>
+                      <input
+                        aria-describedby="description96"
+                        aria-invalid="false"
+                        name="emptystring"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description98"
+                      >
+                        example of a float field
+                      </div>
+                      <input
+                        aria-describedby="description98"
+                        aria-invalid="false"
+                        name="floatfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="1"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description100"
+                      >
+                        example of an empty float field
+                      </div>
+                      <input
+                        aria-describedby="description100"
+                        aria-invalid="false"
+                        name="emptyfloat"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of a enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield102"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes"
+                          type="button"
+                        >
+                          yes
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of an empty enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield104"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="Select Value"
+                          type="button"
+                        >
+                          Select Value
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description107"
+                        >
+                          example of a date field
+                        </div>
+                        <input
+                          aria-describedby="description107"
+                          aria-errormessage="errorMessage106"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage106"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Clear Date"
+                        class="btn-plain date-picker-clear-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <path
+                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </button>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value="2018-06-20T00:00:00.000Z"
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Empty Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description112"
+                        >
+                          example of an empty date field
+                        </div>
+                        <input
+                          aria-describedby="description112"
+                          aria-errormessage="errorMessage111"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value=""
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage111"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value=""
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-MultiSelectMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Multi Select Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-MultiSelectMetadataField-desc"
+                      >
+                        example of a multi select field field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield115"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes, no"
+                          type="button"
+                        >
+                          yes, no
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="metadata-instance-editor-footer"
+                >
+                  <div
+                    class="metadata-instance-editor-footer-delete"
+                  >
+                    <button
+                      class="btn-plain "
+                      data-resin-target="metadata-instanceremove"
+                      type="button"
+                    >
+                      <div />
+                    </button>
+                  </div>
+                  <div
+                    class="metadata-instance-editor-footer-save-cancel"
+                  >
+                    <button
+                      class="btn"
+                      data-resin-target="metadata-instancecancel"
+                      type="button"
+                    >
+                      <span
+                        class="btn-content"
+                      >
+                        <div />
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true, "id": "hello"} and isCascadingPolicyApplicable is true 1`] = `
+<div>
+  <div>
+    <div
+      class="collapsible-card is-open is-bordered"
+    >
+      <div
+        class="collapsible-card-header has-sticky-header"
+      >
+        <button
+          aria-expanded="true"
+          class="btn-plain collapsible-card-title"
+          data-resin-target="metadata-cardcollapse"
+          type="button"
+        >
+          <span
+            class="metadata-instance-editor-instance-title"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-metadata "
+              focusable="false"
+              height="16"
+              role="presentation"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                class="fill-color"
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
+                fill="#9f3fed"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <span
+              class="metadata-instance-editor-instance-title-text"
+            />
+          </span>
+          <svg
+            aria-hidden="true"
+            class="icon-caret-down collapsible-card-header-caret"
+            focusable="false"
+            height="6"
+            role="presentation"
+            viewBox="0 0 10 6"
+            width="8"
+          >
+            <path
+              class="fill-color"
+              d="M0 .5l5 5 5-5H0z"
+              fill="#909090"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
+        <span
+          class="bdl-Collapsible-actionItems"
+        >
+          <button
+            aria-label="Edit Metadata"
+            aria-pressed="true"
+            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+            data-resin-target="metadata-instanceedit"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-edit "
+              focusable="false"
+              height="14"
+              role="presentation"
+              viewBox="0 0 14 14"
+              width="14"
+            >
+              <path
+                class="fill-color"
+                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
+                fill="#6f6f6f"
+              />
+            </svg>
+          </button>
+        </span>
+      </div>
+      <div
+        aria-hidden="false"
+        class="rah-static rah-static--height-auto"
+        style="height: auto; overflow: visible;"
+      >
+        <div>
+          <div
+            class="collapsible-card-content"
+          >
+            <div
+              class="loading-indicator-wrapper "
+            >
+              <form
+                novalidate=""
+              >
+                <div
+                  class="metadata-instance-editor-instance"
+                >
+                  <div
+                    class="metadata-cascade-editor"
+                    data-testid="metadata-cascade-policy"
+                  >
+                    <div
+                      class="metadata-cascade-enable"
+                    >
+                      <div>
+                        <div />
+                        <div
+                          class="toggle-container metadata-cascade-toggle cascade-on"
+                        >
+                          <label
+                            class="toggle-simple"
+                          >
+                            <input
+                              checked=""
+                              class="toggle-simple-input"
+                              role="switch"
+                              type="checkbox"
+                            />
+                            <div
+                              class="toggle-simple-switch"
+                            />
+                            <div
+                              class="toggle-simple-label"
+                            />
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        class="cascade-policy-text"
+                      >
+                        <div />
+                         
+                        <a
+                          class="link cascade-policy-learnmore-link"
+                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
+                          rel="noopener"
+                          target="_blank"
+                        >
+                          <div />
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          No Description Field
+                        </span>
+                      </span>
+                      <input
+                        aria-invalid="false"
+                        name="nodescfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description65"
+                      >
+                        example of a string field
+                      </div>
+                      <input
+                        aria-describedby="description65"
+                        aria-invalid="false"
+                        name="stringfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="some string"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description67"
+                      >
+                        example of an empty string field
+                      </div>
+                      <input
+                        aria-describedby="description67"
+                        aria-invalid="false"
+                        name="emptystring"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description69"
+                      >
+                        example of a float field
+                      </div>
+                      <input
+                        aria-describedby="description69"
+                        aria-invalid="false"
+                        name="floatfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="1"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description71"
+                      >
+                        example of an empty float field
+                      </div>
+                      <input
+                        aria-describedby="description71"
+                        aria-invalid="false"
+                        name="emptyfloat"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of a enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield73"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes"
+                          type="button"
+                        >
+                          yes
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of an empty enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield75"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="Select Value"
+                          type="button"
+                        >
+                          Select Value
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description78"
+                        >
+                          example of a date field
+                        </div>
+                        <input
+                          aria-describedby="description78"
+                          aria-errormessage="errorMessage77"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage77"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Clear Date"
+                        class="btn-plain date-picker-clear-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <path
+                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </button>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value="2018-06-20T00:00:00.000Z"
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Empty Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description83"
+                        >
+                          example of an empty date field
+                        </div>
+                        <input
+                          aria-describedby="description83"
+                          aria-errormessage="errorMessage82"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value=""
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage82"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value=""
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-MultiSelectMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Multi Select Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-MultiSelectMetadataField-desc"
+                      >
+                        example of a multi select field field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield86"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes, no"
+                          type="button"
+                        >
+                          yes, no
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="metadata-instance-editor-footer"
+                >
+                  <div
+                    class="metadata-instance-editor-footer-delete"
+                  >
+                    <button
+                      class="btn-plain "
+                      data-resin-target="metadata-instanceremove"
+                      type="button"
+                    >
+                      <div />
+                    </button>
+                  </div>
+                  <div
+                    class="metadata-instance-editor-footer-save-cancel"
+                  >
+                    <button
+                      class="btn"
+                      data-resin-target="metadata-instancecancel"
+                      type="button"
+                    >
+                      <span
+                        class="btn-content"
+                      >
+                        <div />
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true} and isCascadingPolicyApplicable is false 1`] = `
+<div>
+  <div>
+    <div
+      class="collapsible-card is-open is-bordered"
+    >
+      <div
+        class="collapsible-card-header has-sticky-header"
+      >
+        <button
+          aria-expanded="true"
+          class="btn-plain collapsible-card-title"
+          data-resin-target="metadata-cardcollapse"
+          type="button"
+        >
+          <span
+            class="metadata-instance-editor-instance-title"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-metadata "
+              focusable="false"
+              height="16"
+              role="presentation"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                class="fill-color"
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
+                fill="#0061d5"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <span
+              class="metadata-instance-editor-instance-title-text"
+            />
+          </span>
+          <svg
+            aria-hidden="true"
+            class="icon-caret-down collapsible-card-header-caret"
+            focusable="false"
+            height="6"
+            role="presentation"
+            viewBox="0 0 10 6"
+            width="8"
+          >
+            <path
+              class="fill-color"
+              d="M0 .5l5 5 5-5H0z"
+              fill="#909090"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
+        <span
+          class="bdl-Collapsible-actionItems"
+        >
+          <button
+            aria-label="Edit Metadata"
+            aria-pressed="true"
+            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
+            data-resin-target="metadata-instanceedit"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon-edit "
+              focusable="false"
+              height="14"
+              role="presentation"
+              viewBox="0 0 14 14"
+              width="14"
+            >
+              <path
+                class="fill-color"
+                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
+                fill="#6f6f6f"
+              />
+            </svg>
+          </button>
+        </span>
+      </div>
+      <div
+        aria-hidden="false"
+        class="rah-static rah-static--height-auto"
+        style="height: auto; overflow: visible;"
+      >
+        <div>
+          <div
+            class="collapsible-card-content"
+          >
+            <div
+              class="loading-indicator-wrapper "
+            >
+              <form
+                novalidate=""
+              >
+                <div
+                  class="metadata-instance-editor-instance"
+                >
+                  <div
+                    class="metadata-cascade-editor"
+                    data-testid="metadata-cascade-policy"
+                  >
+                    <div
+                      class="metadata-cascade-enable"
+                    >
+                      <div>
+                        <div />
+                        <div
+                          class="toggle-container metadata-cascade-toggle cascade-off"
+                        >
+                          <label
+                            class="toggle-simple"
+                          >
+                            <input
+                              class="toggle-simple-input"
+                              role="switch"
+                              type="checkbox"
+                            />
+                            <div
+                              class="toggle-simple-switch"
+                            />
+                            <div
+                              class="toggle-simple-label"
+                            />
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        class="cascade-policy-text"
+                      >
+                        <div />
+                         
+                        <a
+                          class="link cascade-policy-learnmore-link"
+                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
+                          rel="noopener"
+                          target="_blank"
+                        >
+                          <div />
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          No Description Field
+                        </span>
+                      </span>
+                      <input
+                        aria-invalid="false"
+                        name="nodescfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description152"
+                      >
+                        example of a string field
+                      </div>
+                      <input
+                        aria-describedby="description152"
+                        aria-invalid="false"
+                        name="stringfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="some string"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty String Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description154"
+                      >
+                        example of an empty string field
+                      </div>
+                      <input
+                        aria-describedby="description154"
+                        aria-invalid="false"
+                        name="emptystring"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description156"
+                      >
+                        example of a float field
+                      </div>
+                      <input
+                        aria-describedby="description156"
+                        aria-invalid="false"
+                        name="floatfield"
+                        placeholder="Set Value"
+                        type="text"
+                        value="1"
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-TextMetadataField text-input-container"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Float Field
+                        </span>
+                      </span>
+                      <div
+                        class="text-input-description"
+                        id="description158"
+                      >
+                        example of an empty float field
+                      </div>
+                      <input
+                        aria-describedby="description158"
+                        aria-invalid="false"
+                        name="emptyfloat"
+                        placeholder="Set Value"
+                        type="text"
+                        value=""
+                      />
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of a enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield160"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes"
+                          type="button"
+                        >
+                          yes
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-EnumMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Empty Enum Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-EnumMetadataField-desc"
+                      >
+                        example of an empty enum field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield162"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="Select Value"
+                          type="button"
+                        >
+                          Select Value
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description165"
+                        >
+                          example of a date field
+                        </div>
+                        <input
+                          aria-describedby="description165"
+                          aria-errormessage="errorMessage164"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage164"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Clear Date"
+                        class="btn-plain date-picker-clear-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <path
+                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </button>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value="2018-06-20T00:00:00.000Z"
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-DateMetadataField date-picker-wrapper"
+                  >
+                    <span
+                      class="date-picker-icon-holder"
+                    >
+                      <label>
+                        <span
+                          class="label bdl-Label"
+                        >
+                          <span>
+                            Empty Date Field
+                          </span>
+                        </span>
+                        <div
+                          class="date-picker-description"
+                          id="description170"
+                        >
+                          example of an empty date field
+                        </div>
+                        <input
+                          aria-describedby="description170"
+                          aria-errormessage="errorMessage169"
+                          aria-invalid="false"
+                          class="date-picker-input"
+                          placeholder="Set Date"
+                          type="text"
+                          value=""
+                        />
+                        <span
+                          class="accessibility-hidden"
+                          id="errorMessage169"
+                          role="alert"
+                        />
+                      </label>
+                      <button
+                        aria-label="Choose Date"
+                        class="btn-plain date-picker-open-btn"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          height="16"
+                          role="presentation"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <g
+                            fill="#909090"
+                            fill-rule="evenodd"
+                          >
+                            <path
+                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
+                            />
+                            <g
+                              transform="translate(3 5.5)"
+                            >
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.833"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.667"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="5.67"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="8.5"
+                                y="2.5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                y="5"
+                              />
+                              <rect
+                                height="1.5"
+                                rx="0.5"
+                                width="1.5"
+                                x="2.83"
+                                y="5"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </button>
+                      <input
+                        class="date-picker-unix-time-input"
+                        readonly=""
+                        type="hidden"
+                        value=""
+                      />
+                    </span>
+                  </div>
+                  <div
+                    class="bdl-MultiSelectMetadataField"
+                  >
+                    <label>
+                      <span
+                        class="label bdl-Label"
+                      >
+                        <span>
+                          Multi Select Field
+                        </span>
+                      </span>
+                      <i
+                        class="bdl-MultiSelectMetadataField-desc"
+                      >
+                        example of a multi select field field
+                      </i>
+                      <div
+                        class="bdl-SelectField select-container"
+                      >
+                        <button
+                          aria-autocomplete="list"
+                          aria-expanded="false"
+                          aria-owns="selectfield173"
+                          class="select-button bdl-SelectButton"
+                          role="listbox"
+                          title="yes, no"
+                          type="button"
+                        >
+                          yes, no
+                        </button>
+                      </div>
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="metadata-instance-editor-footer"
+                >
+                  <div
+                    class="metadata-instance-editor-footer-delete"
+                  >
+                    <button
+                      class="btn-plain "
+                      data-resin-target="metadata-instanceremove"
+                      type="button"
+                    >
+                      <div />
+                    </button>
+                  </div>
+                  <div
+                    class="metadata-instance-editor-footer-save-cancel"
+                  >
+                    <button
+                      class="btn"
+                      data-resin-target="metadata-instancecancel"
+                      type="button"
                     >
-                      example of a multi select field field
-                    </i>
-                    <dd>
-                      yes, no
-                    </dd>
-                  </dl>
+                      <span
+                        class="btn-content"
+                      >
+                        <div />
+                      </span>
+                    </button>
+                  </div>
                 </div>
               </form>
             </div>
@@ -442,7 +2282,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 </div>
 `;
 
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true, "id": "hello"} and isCascadingPolicyApplicable is true 1`] = `
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true} and isCascadingPolicyApplicable is true 1`] = `
 <div>
   <div>
     <div
@@ -472,7 +2312,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
               <path
                 class="fill-color"
                 d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
-                fill="#9f3fed"
+                fill="#0061d5"
                 fill-rule="evenodd"
               />
             </svg>
@@ -554,13 +2394,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       <div>
                         <div />
                         <div
-                          class="toggle-container metadata-cascade-toggle cascade-on"
+                          class="toggle-container metadata-cascade-toggle cascade-off"
                         >
                           <label
                             class="toggle-simple"
                           >
                             <input
-                              checked=""
                               class="toggle-simple-input"
                               role="switch"
                               type="checkbox"
@@ -623,12 +2462,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description65"
+                        id="description123"
                       >
                         example of a string field
                       </div>
                       <input
-                        aria-describedby="description65"
+                        aria-describedby="description123"
                         aria-invalid="false"
                         name="stringfield"
                         placeholder="Set Value"
@@ -650,12 +2489,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description67"
+                        id="description125"
                       >
                         example of an empty string field
                       </div>
                       <input
-                        aria-describedby="description67"
+                        aria-describedby="description125"
                         aria-invalid="false"
                         name="emptystring"
                         placeholder="Set Value"
@@ -677,12 +2516,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description69"
+                        id="description127"
                       >
                         example of a float field
                       </div>
                       <input
-                        aria-describedby="description69"
+                        aria-describedby="description127"
                         aria-invalid="false"
                         name="floatfield"
                         placeholder="Set Value"
@@ -704,12 +2543,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description71"
+                        id="description129"
                       >
                         example of an empty float field
                       </div>
                       <input
-                        aria-describedby="description71"
+                        aria-describedby="description129"
                         aria-invalid="false"
                         name="emptyfloat"
                         placeholder="Set Value"
@@ -740,7 +2579,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         <button
                           aria-autocomplete="list"
                           aria-expanded="false"
-                          aria-owns="selectfield73"
+                          aria-owns="selectfield131"
                           class="select-button bdl-SelectButton"
                           role="listbox"
                           title="yes"
@@ -773,7 +2612,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         <button
                           aria-autocomplete="list"
                           aria-expanded="false"
-                          aria-owns="selectfield75"
+                          aria-owns="selectfield133"
                           class="select-button bdl-SelectButton"
                           role="listbox"
                           title="Select Value"
@@ -800,13 +2639,13 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         </span>
                         <div
                           class="date-picker-description"
-                          id="description78"
+                          id="description136"
                         >
                           example of a date field
                         </div>
                         <input
-                          aria-describedby="description78"
-                          aria-errormessage="errorMessage77"
+                          aria-describedby="description136"
+                          aria-errormessage="errorMessage135"
                           aria-invalid="false"
                           class="date-picker-input"
                           placeholder="Set Date"
@@ -815,7 +2654,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         />
                         <span
                           class="accessibility-hidden"
-                          id="errorMessage77"
+                          id="errorMessage135"
                           role="alert"
                         />
                       </label>
@@ -948,13 +2787,13 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         </span>
                         <div
                           class="date-picker-description"
-                          id="description83"
+                          id="description141"
                         >
                           example of an empty date field
                         </div>
                         <input
-                          aria-describedby="description83"
-                          aria-errormessage="errorMessage82"
+                          aria-describedby="description141"
+                          aria-errormessage="errorMessage140"
                           aria-invalid="false"
                           class="date-picker-input"
                           placeholder="Set Date"
@@ -963,7 +2802,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         />
                         <span
                           class="accessibility-hidden"
-                          id="errorMessage82"
+                          id="errorMessage140"
                           role="alert"
                         />
                       </label>
@@ -1082,7 +2921,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         <button
                           aria-autocomplete="list"
                           aria-expanded="false"
-                          aria-owns="selectfield86"
+                          aria-owns="selectfield144"
                           class="select-button bdl-SelectButton"
                           role="listbox"
                           title="yes, no"
@@ -1134,237 +2973,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 </div>
 `;
 
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true} and isCascadingPolicyApplicable is false 1`] = `
-<div>
-  <div>
-    <div
-      class="collapsible-card is-open is-bordered"
-    >
-      <div
-        class="collapsible-card-header has-sticky-header"
-      >
-        <button
-          aria-expanded="true"
-          class="btn-plain collapsible-card-title"
-          data-resin-target="metadata-cardcollapse"
-          type="button"
-        >
-          <span
-            class="metadata-instance-editor-instance-title"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-metadata "
-              focusable="false"
-              height="16"
-              role="presentation"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                class="fill-color"
-                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
-                fill="#0061d5"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <span
-              class="metadata-instance-editor-instance-title-text"
-            />
-          </span>
-          <svg
-            aria-hidden="true"
-            class="icon-caret-down collapsible-card-header-caret"
-            focusable="false"
-            height="6"
-            role="presentation"
-            viewBox="0 0 10 6"
-            width="8"
-          >
-            <path
-              class="fill-color"
-              d="M0 .5l5 5 5-5H0z"
-              fill="#909090"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        aria-hidden="false"
-        class="rah-static rah-static--height-auto"
-        style="height: auto; overflow: visible;"
-      >
-        <div>
-          <div
-            class="collapsible-card-content"
-          >
-            <div
-              class="loading-indicator-wrapper "
-            >
-              <form
-                novalidate=""
-              >
-                <div
-                  class="metadata-instance-editor-instance"
-                >
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      No Description Field
-                    </dt>
-                    <dd>
-                      <div />
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      String Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of a string field
-                    </i>
-                    <dd>
-                      some string
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Empty String Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of an empty string field
-                    </i>
-                    <dd>
-                      <div />
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Float Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of a float field
-                    </i>
-                    <dd>
-                      1
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Empty Float Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of an empty float field
-                    </i>
-                    <dd>
-                      <div />
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Enum Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of a enum field
-                    </i>
-                    <dd>
-                      yes
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Empty Enum Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of an empty enum field
-                    </i>
-                    <dd>
-                      <div />
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Date Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of a date field
-                    </i>
-                    <dd>
-                      <div />
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Empty Date Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of an empty date field
-                    </i>
-                    <dd>
-                      <div />
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Multi Select Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of a multi select field field
-                    </i>
-                    <dd>
-                      yes, no
-                    </dd>
-                  </dl>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true} and isCascadingPolicyApplicable is true 1`] = `
+exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is null and isCascadingPolicyApplicable is false 1`] = `
 <div>
   <div>
     <div
@@ -1544,12 +3153,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description96"
+                        id="description210"
                       >
                         example of a string field
                       </div>
                       <input
-                        aria-describedby="description96"
+                        aria-describedby="description210"
                         aria-invalid="false"
                         name="stringfield"
                         placeholder="Set Value"
@@ -1571,12 +3180,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description98"
+                        id="description212"
                       >
                         example of an empty string field
                       </div>
                       <input
-                        aria-describedby="description98"
+                        aria-describedby="description212"
                         aria-invalid="false"
                         name="emptystring"
                         placeholder="Set Value"
@@ -1598,12 +3207,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description100"
+                        id="description214"
                       >
                         example of a float field
                       </div>
                       <input
-                        aria-describedby="description100"
+                        aria-describedby="description214"
                         aria-invalid="false"
                         name="floatfield"
                         placeholder="Set Value"
@@ -1625,12 +3234,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description102"
+                        id="description216"
                       >
                         example of an empty float field
                       </div>
                       <input
-                        aria-describedby="description102"
+                        aria-describedby="description216"
                         aria-invalid="false"
                         name="emptyfloat"
                         placeholder="Set Value"
@@ -1661,7 +3270,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         <button
                           aria-autocomplete="list"
                           aria-expanded="false"
-                          aria-owns="selectfield104"
+                          aria-owns="selectfield218"
                           class="select-button bdl-SelectButton"
                           role="listbox"
                           title="yes"
@@ -1694,7 +3303,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         <button
                           aria-autocomplete="list"
                           aria-expanded="false"
-                          aria-owns="selectfield106"
+                          aria-owns="selectfield220"
                           class="select-button bdl-SelectButton"
                           role="listbox"
                           title="Select Value"
@@ -1721,13 +3330,13 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         </span>
                         <div
                           class="date-picker-description"
-                          id="description109"
+                          id="description223"
                         >
                           example of a date field
                         </div>
                         <input
-                          aria-describedby="description109"
-                          aria-errormessage="errorMessage108"
+                          aria-describedby="description223"
+                          aria-errormessage="errorMessage222"
                           aria-invalid="false"
                           class="date-picker-input"
                           placeholder="Set Date"
@@ -1736,7 +3345,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         />
                         <span
                           class="accessibility-hidden"
-                          id="errorMessage108"
+                          id="errorMessage222"
                           role="alert"
                         />
                       </label>
@@ -1869,13 +3478,13 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         </span>
                         <div
                           class="date-picker-description"
-                          id="description114"
+                          id="description228"
                         >
                           example of an empty date field
                         </div>
                         <input
-                          aria-describedby="description114"
-                          aria-errormessage="errorMessage113"
+                          aria-describedby="description228"
+                          aria-errormessage="errorMessage227"
                           aria-invalid="false"
                           class="date-picker-input"
                           placeholder="Set Date"
@@ -1884,7 +3493,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         />
                         <span
                           class="accessibility-hidden"
-                          id="errorMessage113"
+                          id="errorMessage227"
                           role="alert"
                         />
                       </label>
@@ -2003,7 +3612,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         <button
                           aria-autocomplete="list"
                           aria-expanded="false"
-                          aria-owns="selectfield117"
+                          aria-owns="selectfield231"
                           class="select-button bdl-SelectButton"
                           role="listbox"
                           title="yes, no"
@@ -2055,236 +3664,6 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 </div>
 `;
 
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is null and isCascadingPolicyApplicable is false 1`] = `
-<div>
-  <div>
-    <div
-      class="collapsible-card is-open is-bordered"
-    >
-      <div
-        class="collapsible-card-header has-sticky-header"
-      >
-        <button
-          aria-expanded="true"
-          class="btn-plain collapsible-card-title"
-          data-resin-target="metadata-cardcollapse"
-          type="button"
-        >
-          <span
-            class="metadata-instance-editor-instance-title"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-metadata "
-              focusable="false"
-              height="16"
-              role="presentation"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                class="fill-color"
-                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
-                fill="#0061d5"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <span
-              class="metadata-instance-editor-instance-title-text"
-            />
-          </span>
-          <svg
-            aria-hidden="true"
-            class="icon-caret-down collapsible-card-header-caret"
-            focusable="false"
-            height="6"
-            role="presentation"
-            viewBox="0 0 10 6"
-            width="8"
-          >
-            <path
-              class="fill-color"
-              d="M0 .5l5 5 5-5H0z"
-              fill="#909090"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        aria-hidden="false"
-        class="rah-static rah-static--height-auto"
-        style="height: auto; overflow: visible;"
-      >
-        <div>
-          <div
-            class="collapsible-card-content"
-          >
-            <div
-              class="loading-indicator-wrapper "
-            >
-              <form
-                novalidate=""
-              >
-                <div
-                  class="metadata-instance-editor-instance"
-                >
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      No Description Field
-                    </dt>
-                    <dd>
-                      <div />
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      String Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of a string field
-                    </i>
-                    <dd>
-                      some string
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Empty String Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of an empty string field
-                    </i>
-                    <dd>
-                      <div />
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Float Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of a float field
-                    </i>
-                    <dd>
-                      1
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Empty Float Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of an empty float field
-                    </i>
-                    <dd>
-                      <div />
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Enum Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of a enum field
-                    </i>
-                    <dd>
-                      yes
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Empty Enum Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of an empty enum field
-                    </i>
-                    <dd>
-                      <div />
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Date Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of a date field
-                    </i>
-                    <dd>
-                      <div />
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Empty Date Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of an empty date field
-                    </i>
-                    <dd>
-                      <div />
-                    </dd>
-                  </dl>
-                  <dl
-                    class="bdl-ReadOnlyMetadataField"
-                  >
-                    <dt>
-                      Multi Select Field
-                    </dt>
-                    <i
-                      class="bdl-ReadOnlyMetadataField-desc"
-                    >
-                      example of a multi select field field
-                    </i>
-                    <dd>
-                      yes, no
-                    </dd>
-                  </dl>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is null and isCascadingPolicyApplicable is true 1`] = `
 <div>
   <div>
@@ -2465,12 +3844,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description127"
+                        id="description181"
                       >
                         example of a string field
                       </div>
                       <input
-                        aria-describedby="description127"
+                        aria-describedby="description181"
                         aria-invalid="false"
                         name="stringfield"
                         placeholder="Set Value"
@@ -2492,12 +3871,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description129"
+                        id="description183"
                       >
                         example of an empty string field
                       </div>
                       <input
-                        aria-describedby="description129"
+                        aria-describedby="description183"
                         aria-invalid="false"
                         name="emptystring"
                         placeholder="Set Value"
@@ -2519,12 +3898,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description131"
+                        id="description185"
                       >
                         example of a float field
                       </div>
                       <input
-                        aria-describedby="description131"
+                        aria-describedby="description185"
                         aria-invalid="false"
                         name="floatfield"
                         placeholder="Set Value"
@@ -2546,12 +3925,12 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                       </span>
                       <div
                         class="text-input-description"
-                        id="description133"
+                        id="description187"
                       >
                         example of an empty float field
                       </div>
                       <input
-                        aria-describedby="description133"
+                        aria-describedby="description187"
                         aria-invalid="false"
                         name="emptyfloat"
                         placeholder="Set Value"
@@ -2582,7 +3961,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         <button
                           aria-autocomplete="list"
                           aria-expanded="false"
-                          aria-owns="selectfield135"
+                          aria-owns="selectfield189"
                           class="select-button bdl-SelectButton"
                           role="listbox"
                           title="yes"
@@ -2615,7 +3994,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         <button
                           aria-autocomplete="list"
                           aria-expanded="false"
-                          aria-owns="selectfield137"
+                          aria-owns="selectfield191"
                           class="select-button bdl-SelectButton"
                           role="listbox"
                           title="Select Value"
@@ -2642,13 +4021,13 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         </span>
                         <div
                           class="date-picker-description"
-                          id="description140"
+                          id="description194"
                         >
                           example of a date field
                         </div>
                         <input
-                          aria-describedby="description140"
-                          aria-errormessage="errorMessage139"
+                          aria-describedby="description194"
+                          aria-errormessage="errorMessage193"
                           aria-invalid="false"
                           class="date-picker-input"
                           placeholder="Set Date"
@@ -2657,7 +4036,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         />
                         <span
                           class="accessibility-hidden"
-                          id="errorMessage139"
+                          id="errorMessage193"
                           role="alert"
                         />
                       </label>
@@ -2790,13 +4169,13 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         </span>
                         <div
                           class="date-picker-description"
-                          id="description145"
+                          id="description199"
                         >
                           example of an empty date field
                         </div>
                         <input
-                          aria-describedby="description145"
-                          aria-errormessage="errorMessage144"
+                          aria-describedby="description199"
+                          aria-errormessage="errorMessage198"
                           aria-invalid="false"
                           class="date-picker-input"
                           placeholder="Set Date"
@@ -2805,7 +4184,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         />
                         <span
                           class="accessibility-hidden"
-                          id="errorMessage144"
+                          id="errorMessage198"
                           role="alert"
                         />
                       </label>
@@ -2924,7 +4303,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
                         <button
                           aria-autocomplete="list"
                           aria-expanded="false"
-                          aria-owns="selectfield148"
+                          aria-owns="selectfield202"
                           class="select-button bdl-SelectButton"
                           role="listbox"
                           title="yes, no"
diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instances.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instances.test.js.snap
index e69de29bb2..6ac2fbae19 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instances.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instances.test.js.snap
@@ -0,0 +1,216 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`features/metadata-editor-editor/Instances should correctly render editors 1`] = `
+Array [
+  <Instance
+    canEdit={true}
+    data={
+      Object {
+        "datefield": "2018-06-20T00:00:00.000Z",
+        "enumfield": "yes",
+        "floatfield": 1,
+        "stringfield": "some string",
+      }
+    }
+    hasError={false}
+    id="editor1"
+    isCascadingPolicyApplicable={false}
+    isDirty={false}
+    isFolderInstance={false}
+    isOpen={false}
+    key="editor1-template1"
+    template={
+      Object {
+        "displayName": "template1 title",
+        "fields": Array [
+          Object {
+            "displayName": "No Description Field",
+            "id": "field0",
+            "key": "nodescfield",
+            "type": "string",
+          },
+          Object {
+            "description": "example of a string field",
+            "displayName": "String Field",
+            "id": "field1",
+            "key": "stringfield",
+            "type": "string",
+          },
+          Object {
+            "description": "example of an empty string field",
+            "displayName": "Empty String Field",
+            "id": "field2",
+            "key": "emptystring",
+            "type": "string",
+          },
+          Object {
+            "description": "example of a float field",
+            "displayName": "Float Field",
+            "id": "field3",
+            "key": "floatfield",
+            "type": "float",
+          },
+          Object {
+            "description": "example of an empty float field",
+            "displayName": "Empty Float Field",
+            "id": "field4",
+            "key": "emptyfloat",
+            "type": "float",
+          },
+          Object {
+            "description": "example of a enum field",
+            "displayName": "Enum Field",
+            "id": "field5",
+            "key": "enumfield",
+            "options": Array [
+              Object {
+                "key": "yes",
+              },
+              Object {
+                "key": "no",
+              },
+            ],
+            "type": "enum",
+          },
+          Object {
+            "description": "example of an empty enum field",
+            "displayName": "Empty Enum Field",
+            "id": "field6",
+            "key": "emptyenumfield",
+            "options": Array [
+              Object {
+                "key": "yes",
+              },
+              Object {
+                "key": "no",
+              },
+            ],
+            "type": "enum",
+          },
+          Object {
+            "description": "example of a date field",
+            "displayName": "Date Field",
+            "id": "field7",
+            "key": "datefield",
+            "type": "date",
+          },
+          Object {
+            "description": "example of an empty date field",
+            "displayName": "Empty Date Field",
+            "id": "field8",
+            "key": "emptydatefield",
+            "type": "date",
+          },
+        ],
+        "id": "template1",
+        "templateKey": "template1",
+      }
+    }
+  />,
+  <Instance
+    canEdit={false}
+    data={
+      Object {
+        "datefield": "2018-06-20T00:00:00.000Z",
+        "enumfield": "yes",
+        "floatfield": 1,
+        "stringfield": "some string",
+      }
+    }
+    hasError={false}
+    id="editor2"
+    isCascadingPolicyApplicable={false}
+    isDirty={true}
+    isFolderInstance={false}
+    isOpen={false}
+    key="editor2-template2"
+    template={
+      Object {
+        "displayName": "template2 title",
+        "fields": Array [
+          Object {
+            "displayName": "No Description Field",
+            "id": "field0",
+            "key": "nodescfield",
+            "type": "string",
+          },
+          Object {
+            "description": "example of a string field",
+            "displayName": "String Field",
+            "id": "field1",
+            "key": "stringfield",
+            "type": "string",
+          },
+          Object {
+            "description": "example of an empty string field",
+            "displayName": "Empty String Field",
+            "id": "field2",
+            "key": "emptystring",
+            "type": "string",
+          },
+          Object {
+            "description": "example of a float field",
+            "displayName": "Float Field",
+            "id": "field3",
+            "key": "floatfield",
+            "type": "float",
+          },
+          Object {
+            "description": "example of an empty float field",
+            "displayName": "Empty Float Field",
+            "id": "field4",
+            "key": "emptyfloat",
+            "type": "float",
+          },
+          Object {
+            "description": "example of a enum field",
+            "displayName": "Enum Field",
+            "id": "field5",
+            "key": "enumfield",
+            "options": Array [
+              Object {
+                "key": "yes",
+              },
+              Object {
+                "key": "no",
+              },
+            ],
+            "type": "enum",
+          },
+          Object {
+            "description": "example of an empty enum field",
+            "displayName": "Empty Enum Field",
+            "id": "field6",
+            "key": "emptyenumfield",
+            "options": Array [
+              Object {
+                "key": "yes",
+              },
+              Object {
+                "key": "no",
+              },
+            ],
+            "type": "enum",
+          },
+          Object {
+            "description": "example of a date field",
+            "displayName": "Date Field",
+            "id": "field7",
+            "key": "datefield",
+            "type": "date",
+          },
+          Object {
+            "description": "example of an empty date field",
+            "displayName": "Empty Date Field",
+            "id": "field8",
+            "key": "emptydatefield",
+            "type": "date",
+          },
+        ],
+        "id": "template2",
+        "templateKey": "template2",
+      }
+    }
+  />,
+]
+`;

From 853765289ea8c181ec0ec622bc183f16e277999f Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Thu, 17 Aug 2023 16:42:05 -0400
Subject: [PATCH 19/25] fix(metadata): Disable updates to metadata

---
 src/common/types/metadata.js                     |  2 +-
 .../metadata-instance-editor/Instance.js         | 16 ++++++++--------
 .../metadata-instance-editor/Instances.js        |  6 +++---
 .../MetadataInstanceEditor.js                    |  6 +++---
 .../__tests__/Instance.test.js                   | 12 ++++++------
 .../__snapshots__/Instances.test.js.snap         |  4 ++--
 .../MetadataInstanceEditor.test.js.snap          |  2 +-
 7 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/common/types/metadata.js b/src/common/types/metadata.js
index 8074287dd6..75f73c7e07 100644
--- a/src/common/types/metadata.js
+++ b/src/common/types/metadata.js
@@ -89,7 +89,7 @@ type MetadataInstance = {
     data: MetadataFields,
     id: string,
     isCascadingPolicyApplicable?: boolean,
-    isFolderInstance?: boolean,
+    isFolderMetadata?: boolean,
 };
 
 type MetadataInstanceV2 = {
diff --git a/src/features/metadata-instance-editor/Instance.js b/src/features/metadata-instance-editor/Instance.js
index 5f83de999c..c740d54968 100644
--- a/src/features/metadata-instance-editor/Instance.js
+++ b/src/features/metadata-instance-editor/Instance.js
@@ -54,7 +54,7 @@ type Props = {
     intl: Object,
     isCascadingPolicyApplicable: boolean,
     isDirty: boolean,
-    isFolderInstance?: boolean,
+    isFolderMetadata?: boolean,
     isOpen: boolean,
     onModification?: (id: string, isDirty: boolean, type?: string) => void,
     onRemove?: (id: string) => void,
@@ -104,7 +104,7 @@ class Instance extends React.PureComponent<Props, State> {
         data: {},
         isDirty: false,
         isCascadingPolicyApplicable: false,
-        isFolderInstance: false,
+        isFolderMetadata: false,
     };
 
     constructor(props: Props) {
@@ -203,7 +203,7 @@ class Instance extends React.PureComponent<Props, State> {
      * @return {void}
      */
     onSave = (): void => {
-        const { cascadePolicy = {}, data: originalData, id, isDirty, onSave, isFolderInstance }: Props = this.props;
+        const { cascadePolicy = {}, data: originalData, id, isDirty, onSave, isFolderMetadata }: Props = this.props;
         const { data: currentData, errors, isCascadingEnabled, isCascadingOverwritten }: State = this.state;
 
         if (!this.isEditing() || !isDirty || !onSave || Object.keys(errors).length) {
@@ -218,7 +218,7 @@ class Instance extends React.PureComponent<Props, State> {
 
         const cascadePolicyData = {
             ...cascadePolicy,
-            isEnabled: isFolderInstance ? isCascadingEnabled : false,
+            isEnabled: isFolderMetadata ? isCascadingEnabled : false,
             overwrite: isCascadingOverwritten,
         };
 
@@ -391,8 +391,8 @@ class Instance extends React.PureComponent<Props, State> {
      * Get the delete confirmation message base on the template key
      */
     getConfirmationMessage(): React.Node {
-        const { template, isFolderInstance }: Props = this.props;
-        const isFile = !isFolderInstance;
+        const { template, isFolderMetadata }: Props = this.props;
+        const isFile = !isFolderMetadata;
         return this.renderDeleteMessage(isFile, template);
     }
 
@@ -570,7 +570,7 @@ class Instance extends React.PureComponent<Props, State> {
     };
 
     render() {
-        const { isDirty, isOpen, template, isFolderInstance }: Props = this.props;
+        const { isDirty, isOpen, template, isFolderMetadata }: Props = this.props;
         const { fields = [] } = template;
         const {
             data,
@@ -617,7 +617,7 @@ class Instance extends React.PureComponent<Props, State> {
                             <Form onValidSubmit={isDirty ? this.onSave : noop}>
                                 <div className="metadata-instance-editor-instance">
                                     {/* policies aren't enabled on custom instances but we show this anyway to display a message to inform the user */}
-                                    {isFolderInstance && (
+                                    {isFolderMetadata && (
                                         <CascadePolicy
                                             canEdit={this.isEditing()}
                                             isCascadingEnabled={isCascadingEnabled}
diff --git a/src/features/metadata-instance-editor/Instances.js b/src/features/metadata-instance-editor/Instances.js
index ddff32c842..78d389d2a5 100644
--- a/src/features/metadata-instance-editor/Instances.js
+++ b/src/features/metadata-instance-editor/Instances.js
@@ -8,7 +8,7 @@ import type { JSONPatchOperations } from '../../common/types/api';
 type Props = {
     editors?: Array<MetadataEditor>,
     isCascadingPolicyApplicable?: boolean,
-    isFolderInstance?: boolean,
+    isFolderMetadata?: boolean,
     onModification?: (id: string, isDirty: boolean) => void,
     onRemove?: (id: string) => void,
     onSave?: (
@@ -23,7 +23,7 @@ type Props = {
 const Instances = ({
     editors = [],
     isCascadingPolicyApplicable = false,
-    isFolderInstance = false,
+    isFolderMetadata = false,
     onModification,
     onRemove,
     onSave,
@@ -48,7 +48,7 @@ const Instances = ({
                     onSave={onSave}
                     onRemove={onRemove}
                     template={template}
-                    isFolderInstance={isFolderInstance}
+                    isFolderMetadata={isFolderMetadata}
                 />
             );
         },
diff --git a/src/features/metadata-instance-editor/MetadataInstanceEditor.js b/src/features/metadata-instance-editor/MetadataInstanceEditor.js
index 0bdfcc75f3..ce70f60158 100644
--- a/src/features/metadata-instance-editor/MetadataInstanceEditor.js
+++ b/src/features/metadata-instance-editor/MetadataInstanceEditor.js
@@ -17,7 +17,7 @@ type Props = {
     editors?: Array<MetadataEditor>,
     isCascadingPolicyApplicable?: boolean,
     isDropdownBusy?: boolean,
-    isFolderInstance?: boolean,
+    isFolderMetadata?: boolean,
     onAdd?: (template: MetadataTemplate) => void,
     onModification?: (id: string, isDirty: boolean) => void,
     onRemove?: (id: string) => void,
@@ -38,7 +38,7 @@ const MetadataInstanceEditor = ({
     canAdd,
     isCascadingPolicyApplicable = false,
     isDropdownBusy,
-    isFolderInstance = false,
+    isFolderMetadata = false,
     editors = [],
     onModification,
     onRemove,
@@ -65,7 +65,7 @@ const MetadataInstanceEditor = ({
                     <Instances
                         editors={editors}
                         isCascadingPolicyApplicable={isCascadingPolicyApplicable}
-                        isFolderInstance={isFolderInstance}
+                        isFolderMetadata={isFolderMetadata}
                         onModification={onModification}
                         onRemove={onRemove}
                         onSave={onSave}
diff --git a/src/features/metadata-instance-editor/__tests__/Instance.test.js b/src/features/metadata-instance-editor/__tests__/Instance.test.js
index ac78c39ee5..beab9a83cd 100644
--- a/src/features/metadata-instance-editor/__tests__/Instance.test.js
+++ b/src/features/metadata-instance-editor/__tests__/Instance.test.js
@@ -152,12 +152,12 @@ const intl = { formatMessage: jest.fn().mockReturnValue('Edit Metadata') };
 
 describe('features/metadata-instance-editor/fields/Instance', () => {
     test.each`
-        isFolderInstance
+        isFolderMetadata
         ${true}
         ${false}
     `(
-        'should correctly render templated metadata instance when isFolderInstance is $isFolderInstance',
-        ({ isFolderInstance }) => {
+        'should correctly render templated metadata instance when isFolderMetadata is $isFolderMetadata',
+        ({ isFolderMetadata }) => {
             render(
                 <Instance
                     cascadePolicy={{ canEdit: true, id: 'hello' }}
@@ -165,7 +165,7 @@ describe('features/metadata-instance-editor/fields/Instance', () => {
                     dataValue="value"
                     intl={intl}
                     isCascadingPolicyApplicable
-                    isFolderInstance={isFolderInstance}
+                    isFolderMetadata={isFolderMetadata}
                     shouldShowCascadingOptions
                     onModification={jest.fn()}
                     onRemove={jest.fn()}
@@ -182,7 +182,7 @@ describe('features/metadata-instance-editor/fields/Instance', () => {
                 fireEvent.click(editButton);
             }
             const metadataInstanceEditor = screen.queryByTestId('metadata-cascade-policy');
-            if (isFolderInstance) {
+            if (isFolderMetadata) {
                 expect(metadataInstanceEditor).toBeInTheDocument();
             } else {
                 expect(metadataInstanceEditor).not.toBeInTheDocument();
@@ -208,7 +208,7 @@ describe('features/metadata-instance-editor/fields/Instance', () => {
                     dataValue="value"
                     intl={intl}
                     isCascadingPolicyApplicable={isCascadingPolicyApplicable}
-                    isFolderInstance
+                    isFolderMetadata
                     shouldShowCascadingOptions
                     onModification={jest.fn()}
                     onRemove={jest.fn()}
diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instances.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instances.test.js.snap
index 6ac2fbae19..fbdb269a34 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instances.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instances.test.js.snap
@@ -16,7 +16,7 @@ Array [
     id="editor1"
     isCascadingPolicyApplicable={false}
     isDirty={false}
-    isFolderInstance={false}
+    isFolderMetadata={false}
     isOpen={false}
     key="editor1-template1"
     template={
@@ -121,7 +121,7 @@ Array [
     id="editor2"
     isCascadingPolicyApplicable={false}
     isDirty={true}
-    isFolderInstance={false}
+    isFolderMetadata={false}
     isOpen={false}
     key="editor2-template2"
     template={
diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/MetadataInstanceEditor.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/MetadataInstanceEditor.test.js.snap
index 6f32c82b2d..74e912f581 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/MetadataInstanceEditor.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/MetadataInstanceEditor.test.js.snap
@@ -1092,7 +1092,7 @@ exports[`features/metadata-editor-editor/MetadataInstanceEditor should correctly
           ]
         }
         isCascadingPolicyApplicable={false}
-        isFolderInstance={false}
+        isFolderMetadata={false}
       />
     </ScrollWrapper>
   </div>

From c826ee1ade40a7ed7e32ee3d1f91cd3a5ee047a3 Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Mon, 21 Aug 2023 10:54:32 -0400
Subject: [PATCH 20/25] fix(metadata): Disable updates to metadata

---
 src/features/metadata-instance-editor/Instance.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/metadata-instance-editor/Instance.js b/src/features/metadata-instance-editor/Instance.js
index c740d54968..0b1deffe57 100644
--- a/src/features/metadata-instance-editor/Instance.js
+++ b/src/features/metadata-instance-editor/Instance.js
@@ -570,7 +570,7 @@ class Instance extends React.PureComponent<Props, State> {
     };
 
     render() {
-        const { isDirty, isOpen, template, isFolderMetadata }: Props = this.props;
+        const { isDirty, isFolderMetadata, isOpen, template }: Props = this.props;
         const { fields = [] } = template;
         const {
             data,

From f71d399611511a1d7e146034577597de558c3d55 Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Mon, 21 Aug 2023 11:50:48 -0400
Subject: [PATCH 21/25] fix(metadata): Disable updates to metadata

---
 .../metadata-instance-editor/Instance.js      |  3 +-
 .../__tests__/MetadataInstanceEditor.test.js  | 18 ++++++
 .../__snapshots__/Instance.test.js.snap       | 60 ++++++++++++++-----
 3 files changed, 65 insertions(+), 16 deletions(-)

diff --git a/src/features/metadata-instance-editor/Instance.js b/src/features/metadata-instance-editor/Instance.js
index 0b1deffe57..cff40907e9 100644
--- a/src/features/metadata-instance-editor/Instance.js
+++ b/src/features/metadata-instance-editor/Instance.js
@@ -356,6 +356,7 @@ class Instance extends React.PureComponent<Props, State> {
                     className={classNames('metadata-instance-editor-instance-title-text', {
                         'metadata-instance-editor-instance-has-error': hasError,
                     })}
+                    data-testid={hasError ? 'metadata-instance-has-error' : undefined}
                 >
                     {isProperties ? <FormattedMessage {...messages.customTitle} /> : template.displayName}
                 </span>
@@ -591,7 +592,7 @@ class Instance extends React.PureComponent<Props, State> {
         const animationDuration = (fields.length + 1) * 50;
 
         return (
-            <div ref={this.collapsibleRef}>
+            <div ref={this.collapsibleRef} data-testid="metadata-instance">
                 <Collapsible
                     animationDuration={animationDuration}
                     buttonProps={{
diff --git a/src/features/metadata-instance-editor/__tests__/MetadataInstanceEditor.test.js b/src/features/metadata-instance-editor/__tests__/MetadataInstanceEditor.test.js
index 880c508e09..c2e8b44bb6 100644
--- a/src/features/metadata-instance-editor/__tests__/MetadataInstanceEditor.test.js
+++ b/src/features/metadata-instance-editor/__tests__/MetadataInstanceEditor.test.js
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { render, screen } from '@testing-library/react';
 import MetadataInstanceEditor from '../MetadataInstanceEditor';
 import Instances from '../Instances';
 
@@ -457,6 +458,23 @@ describe('features/metadata-editor-editor/MetadataInstanceEditor', () => {
         expect(wrapper).toMatchSnapshot();
     });
 
+    test('should render editors with errors', () => {
+        render(
+            <MetadataInstanceEditor
+                editors={[editor5, editor5, editor3]}
+                onModification={jest.fn()}
+                onSave={jest.fn()}
+                templates={[]}
+            />,
+        );
+
+        const instances = screen.queryAllByTestId('metadata-instance');
+        expect(instances).toHaveLength(3);
+
+        const errorInstances = screen.queryAllByTestId('metadata-instance-has-error');
+        expect(errorInstances).toHaveLength(2);
+    });
+
     test('should correctly render editors with template filters', () => {
         const selectedTemplateKey = 'armadillos';
         const wrapper = shallow(
diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
index ca97d809d2..d61d6febfc 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`features/metadata-instance-editor/fields/Instance collapsible isOpen prop should be true 1`] = `
-<div>
+<div
+  data-testid="metadata-instance"
+>
   <Collapsible
     animationDuration={50}
     buttonProps={
@@ -143,7 +145,9 @@ exports[`features/metadata-instance-editor/fields/Instance message id should be
 `;
 
 exports[`features/metadata-instance-editor/fields/Instance should correctly render custom metadata instance 1`] = `
-<div>
+<div
+  data-testid="metadata-instance"
+>
   <Collapsible
     animationDuration={550}
     buttonProps={
@@ -209,7 +213,9 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 
 exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true, "id": "hello"} and isCascadingPolicyApplicable is false 1`] = `
 <div>
-  <div>
+  <div
+    data-testid="metadata-instance"
+  >
     <div
       class="collapsible-card is-open is-bordered"
     >
@@ -901,7 +907,9 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 
 exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true, "id": "hello"} and isCascadingPolicyApplicable is true 1`] = `
 <div>
-  <div>
+  <div
+    data-testid="metadata-instance"
+  >
     <div
       class="collapsible-card is-open is-bordered"
     >
@@ -1593,7 +1601,9 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 
 exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true} and isCascadingPolicyApplicable is false 1`] = `
 <div>
-  <div>
+  <div
+    data-testid="metadata-instance"
+  >
     <div
       class="collapsible-card is-open is-bordered"
     >
@@ -2284,7 +2294,9 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 
 exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true} and isCascadingPolicyApplicable is true 1`] = `
 <div>
-  <div>
+  <div
+    data-testid="metadata-instance"
+  >
     <div
       class="collapsible-card is-open is-bordered"
     >
@@ -2975,7 +2987,9 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 
 exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is null and isCascadingPolicyApplicable is false 1`] = `
 <div>
-  <div>
+  <div
+    data-testid="metadata-instance"
+  >
     <div
       class="collapsible-card is-open is-bordered"
     >
@@ -3666,7 +3680,9 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 
 exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is null and isCascadingPolicyApplicable is true 1`] = `
 <div>
-  <div>
+  <div
+    data-testid="metadata-instance"
+  >
     <div
       class="collapsible-card is-open is-bordered"
     >
@@ -4356,7 +4372,9 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 `;
 
 exports[`features/metadata-instance-editor/fields/Instance should correctly render the busy indicator 1`] = `
-<div>
+<div
+  data-testid="metadata-instance"
+>
   <Collapsible
     animationDuration={550}
     buttonProps={
@@ -4528,7 +4546,9 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 `;
 
 exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer even when all fields are hidden 1`] = `
-<div>
+<div
+  data-testid="metadata-instance"
+>
   <Collapsible
     animationDuration={150}
     buttonProps={
@@ -4634,7 +4654,9 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 `;
 
 exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer even when there are no fields in a template 1`] = `
-<div>
+<div
+  data-testid="metadata-instance"
+>
   <Collapsible
     animationDuration={50}
     buttonProps={
@@ -4725,7 +4747,9 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 `;
 
 exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer when editing and cascade policy 1`] = `
-<div>
+<div
+  data-testid="metadata-instance"
+>
   <Collapsible
     animationDuration={550}
     buttonProps={
@@ -4922,7 +4946,9 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 `;
 
 exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer when editing and no cascade policy 1`] = `
-<div>
+<div
+  data-testid="metadata-instance"
+>
   <Collapsible
     animationDuration={550}
     buttonProps={
@@ -5119,7 +5145,9 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 `;
 
 exports[`features/metadata-instance-editor/fields/Instance should correctly render the footer with save button when dirty 1`] = `
-<div>
+<div
+  data-testid="metadata-instance"
+>
   <Collapsible
     animationDuration={550}
     buttonProps={
@@ -5296,7 +5324,9 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 `;
 
 exports[`features/metadata-instance-editor/fields/Instance should not render footer when not editing 1`] = `
-<div>
+<div
+  data-testid="metadata-instance"
+>
   <Collapsible
     animationDuration={550}
     buttonProps={

From c55f43084c6d12f9c1cf8e2fc19b4bbe32ef901f Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Tue, 22 Aug 2023 11:28:07 -0400
Subject: [PATCH 22/25] fix(metadata): Disable updates to metadata

---
 .../metadata-instance-editor/CascadePolicy.js |  2 +-
 .../__tests__/MetadataInstanceEditor.test.js  | 21 +++++++++++++++++++
 .../MetadataInstanceEditor.test.js.snap       |  6 ++++++
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/features/metadata-instance-editor/CascadePolicy.js b/src/features/metadata-instance-editor/CascadePolicy.js
index 3ca8c19bec..7b33d31e24 100644
--- a/src/features/metadata-instance-editor/CascadePolicy.js
+++ b/src/features/metadata-instance-editor/CascadePolicy.js
@@ -31,7 +31,7 @@ const CascadePolicy = ({
     shouldShowCascadeOptions,
 }: Props) => {
     const readOnlyState = isCascadingEnabled ? (
-        <div className="metadata-cascade-notice">
+        <div className="metadata-cascade-notice" data-testid="metadata-cascade-notice">
             <FormattedMessage {...messages.metadataCascadePolicyEnabledInfo} />
         </div>
     ) : null;
diff --git a/src/features/metadata-instance-editor/__tests__/MetadataInstanceEditor.test.js b/src/features/metadata-instance-editor/__tests__/MetadataInstanceEditor.test.js
index c2e8b44bb6..9f0c3708ba 100644
--- a/src/features/metadata-instance-editor/__tests__/MetadataInstanceEditor.test.js
+++ b/src/features/metadata-instance-editor/__tests__/MetadataInstanceEditor.test.js
@@ -1,9 +1,16 @@
+// @flow
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
 import MetadataInstanceEditor from '../MetadataInstanceEditor';
 import Instances from '../Instances';
 
+jest.mock('react-intl', () => ({
+    ...jest.requireActual('react-intl'),
+    FormattedMessage: ({ defaultMessage }: { defaultMessage: string }) => <span>{defaultMessage}</span>,
+}));
+
 // Templates
 
 const template1 = {
@@ -407,6 +414,9 @@ const editor3 = {
         canEdit: true,
         id: 'editor3',
         data: {},
+        cascadePolicy: {
+            id: 'test',
+        },
     },
     template: template3,
 };
@@ -444,6 +454,10 @@ const templatesOnServer = [template1, template2, template3, template4, template5
 // State of editors from server
 const editorsOnServer = [editor1, editor2, editor3, editor4, editor5];
 
+const Wrapper = ({ children }: { children?: React.ReactNode }) => {
+    return <IntlProvider locale="en">{children}</IntlProvider>;
+};
+
 describe('features/metadata-editor-editor/MetadataInstanceEditor', () => {
     test('should correctly render editors', () => {
         const wrapper = shallow(<MetadataInstanceEditor editors={editorsOnServer} templates={templatesOnServer} />);
@@ -461,11 +475,15 @@ describe('features/metadata-editor-editor/MetadataInstanceEditor', () => {
     test('should render editors with errors', () => {
         render(
             <MetadataInstanceEditor
+                isFolderMetadata
                 editors={[editor5, editor5, editor3]}
                 onModification={jest.fn()}
                 onSave={jest.fn()}
                 templates={[]}
             />,
+            {
+                wrapper: Wrapper,
+            },
         );
 
         const instances = screen.queryAllByTestId('metadata-instance');
@@ -473,6 +491,9 @@ describe('features/metadata-editor-editor/MetadataInstanceEditor', () => {
 
         const errorInstances = screen.queryAllByTestId('metadata-instance-has-error');
         expect(errorInstances).toHaveLength(2);
+
+        const noticeInstances = screen.queryAllByTestId('metadata-cascade-notice');
+        expect(noticeInstances).toHaveLength(1);
     });
 
     test('should correctly render editors with template filters', () => {
diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/MetadataInstanceEditor.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/MetadataInstanceEditor.test.js.snap
index 74e912f581..259e2ba6f0 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/MetadataInstanceEditor.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/MetadataInstanceEditor.test.js.snap
@@ -212,6 +212,9 @@ exports[`features/metadata-editor-editor/MetadataInstanceEditor should correctly
           Object {
             "instance": Object {
               "canEdit": true,
+              "cascadePolicy": Object {
+                "id": "test",
+              },
               "data": Object {},
               "id": "editor3",
             },
@@ -971,6 +974,9 @@ exports[`features/metadata-editor-editor/MetadataInstanceEditor should correctly
             Object {
               "instance": Object {
                 "canEdit": true,
+                "cascadePolicy": Object {
+                  "id": "test",
+                },
                 "data": Object {},
                 "id": "editor3",
               },

From d1a4709e8d192451674b2c67ee0eb67b0afb8a37 Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Tue, 22 Aug 2023 11:40:43 -0400
Subject: [PATCH 23/25] fix(metadata): Disable updates to metadata

---
 .../__tests__/__snapshots__/CascadePolicy.test.js.snap         | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/CascadePolicy.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/CascadePolicy.test.js.snap
index 57bdf950bf..64be28ff47 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/CascadePolicy.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/CascadePolicy.test.js.snap
@@ -3,6 +3,7 @@
 exports[`features/metadata-instance-editor/CascadePolicy should correctly render cascade policy in edit mode 1`] = `
 <div
   className="metadata-cascade-notice"
+  data-testid="metadata-cascade-notice"
 >
   <FormattedMessage
     defaultMessage="This template and its values are being cascaded to all items in this folder and its subfolders."
@@ -14,6 +15,7 @@ exports[`features/metadata-instance-editor/CascadePolicy should correctly render
 exports[`features/metadata-instance-editor/CascadePolicy should correctly render cascade policy in edit mode and overwrite is on 1`] = `
 <div
   className="metadata-cascade-notice"
+  data-testid="metadata-cascade-notice"
 >
   <FormattedMessage
     defaultMessage="This template and its values are being cascaded to all items in this folder and its subfolders."
@@ -25,6 +27,7 @@ exports[`features/metadata-instance-editor/CascadePolicy should correctly render
 exports[`features/metadata-instance-editor/CascadePolicy should correctly render cascade policy read only mode 1`] = `
 <div
   className="metadata-cascade-notice"
+  data-testid="metadata-cascade-notice"
 >
   <FormattedMessage
     defaultMessage="This template and its values are being cascaded to all items in this folder and its subfolders."

From b831683f7976a0e8bd1f3a1778a6a62b7644837e Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Tue, 22 Aug 2023 16:13:15 -0400
Subject: [PATCH 24/25] fix(metadata): Disable updates to metadata

---
 .../metadata-instance-editor/CascadePolicy.js |    1 +
 .../metadata-instance-editor/Instance.js      |    2 +-
 .../__tests__/Instance.test.js                |   30 +-
 .../__snapshots__/Instance.test.js.snap       | 4162 +----------------
 4 files changed, 20 insertions(+), 4175 deletions(-)

diff --git a/src/features/metadata-instance-editor/CascadePolicy.js b/src/features/metadata-instance-editor/CascadePolicy.js
index 7b33d31e24..e381efc764 100644
--- a/src/features/metadata-instance-editor/CascadePolicy.js
+++ b/src/features/metadata-instance-editor/CascadePolicy.js
@@ -47,6 +47,7 @@ const CascadePolicy = ({
                                 className={`metadata-cascade-toggle ${
                                     isCascadingEnabled ? 'cascade-on' : 'cascade-off'
                                 }`}
+                                data-testid={`metadata-cascade-toggle-${isCascadingEnabled ? 'on' : 'off'}`}
                                 isOn={isCascadingEnabled}
                                 label=""
                                 onChange={e => onCascadeToggle(e.target.checked)}
diff --git a/src/features/metadata-instance-editor/Instance.js b/src/features/metadata-instance-editor/Instance.js
index cff40907e9..621da9c1cb 100644
--- a/src/features/metadata-instance-editor/Instance.js
+++ b/src/features/metadata-instance-editor/Instance.js
@@ -523,7 +523,7 @@ class Instance extends React.PureComponent<Props, State> {
     canEdit(): boolean {
         const { canEdit, onModification, onRemove, onSave }: Props = this.props;
 
-        return !!(
+        return (
             canEdit &&
             typeof onRemove === 'function' &&
             typeof onSave === 'function' &&
diff --git a/src/features/metadata-instance-editor/__tests__/Instance.test.js b/src/features/metadata-instance-editor/__tests__/Instance.test.js
index beab9a83cd..98adb2674f 100644
--- a/src/features/metadata-instance-editor/__tests__/Instance.test.js
+++ b/src/features/metadata-instance-editor/__tests__/Instance.test.js
@@ -148,7 +148,7 @@ const userDefinedTemplateField = [
     },
 ];
 
-const intl = { formatMessage: jest.fn().mockReturnValue('Edit Metadata') };
+const intl = { formatMessage: message => message.defaultMessage };
 
 describe('features/metadata-instance-editor/fields/Instance', () => {
     test.each`
@@ -191,29 +191,26 @@ describe('features/metadata-instance-editor/fields/Instance', () => {
     );
 
     test.each`
-        cascadePolicy                     | isCascadingPolicyApplicable
-        ${{ canEdit: true, id: 'hello' }} | ${true}
-        ${{ canEdit: true, id: 'hello' }} | ${false}
-        ${{ canEdit: true }}              | ${true}
-        ${{ canEdit: true }}              | ${false}
-        ${null}                           | ${true}
-        ${null}                           | ${false}
+        cascadePolicy
+        ${{ canEdit: true, id: 'hello' }}
+        ${{ canEdit: true }}
     `(
-        'should correctly render templated metadata instance when cascadePolicy is $cascadePolicy and isCascadingPolicyApplicable is $isCascadingPolicyApplicable',
-        ({ cascadePolicy, isCascadingPolicyApplicable }) => {
-            const { container } = render(
+        'should correctly render templated metadata and its cascade policy when editing and when the cascade policy is $cascadePolicy',
+        ({ cascadePolicy }) => {
+            render(
                 <Instance
                     cascadePolicy={cascadePolicy}
                     data={data}
                     dataValue="value"
                     intl={intl}
-                    isCascadingPolicyApplicable={isCascadingPolicyApplicable}
+                    isCascadingPolicyApplicable
                     isFolderMetadata
                     shouldShowCascadingOptions
                     onModification={jest.fn()}
                     onRemove={jest.fn()}
                     onSave={jest.fn()}
                     canEdit
+                    // templated instance since templateKey is not set
                     template={{
                         fields,
                     }}
@@ -224,7 +221,14 @@ describe('features/metadata-instance-editor/fields/Instance', () => {
             if (editButton) {
                 fireEvent.click(editButton);
             }
-            expect(container).toMatchSnapshot();
+
+            if (cascadePolicy.canEdit && cascadePolicy.id) {
+                const cascadeToggle = screen.queryByTestId('metadata-cascade-toggle-on');
+                expect(cascadeToggle).toBeInTheDocument();
+            } else if (cascadePolicy.canEdit && !cascadePolicy.id) {
+                const cascadeToggle = screen.queryByTestId('metadata-cascade-toggle-off');
+                expect(cascadeToggle).toBeInTheDocument();
+            }
         },
     );
 
diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
index d61d6febfc..9dabb6c982 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
@@ -188,7 +188,7 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
           className="metadata-instance-editor-instance"
         >
           <CustomInstance
-            canEdit={false}
+            canEdit={true}
             data={
               Object {
                 "datefield": "2018-06-20T00:00:00.000Z",
@@ -211,4166 +211,6 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
 </div>
 `;
 
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true, "id": "hello"} and isCascadingPolicyApplicable is false 1`] = `
-<div>
-  <div
-    data-testid="metadata-instance"
-  >
-    <div
-      class="collapsible-card is-open is-bordered"
-    >
-      <div
-        class="collapsible-card-header has-sticky-header"
-      >
-        <button
-          aria-expanded="true"
-          class="btn-plain collapsible-card-title"
-          data-resin-target="metadata-cardcollapse"
-          type="button"
-        >
-          <span
-            class="metadata-instance-editor-instance-title"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-metadata "
-              focusable="false"
-              height="16"
-              role="presentation"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                class="fill-color"
-                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
-                fill="#9f3fed"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <span
-              class="metadata-instance-editor-instance-title-text"
-            />
-          </span>
-          <svg
-            aria-hidden="true"
-            class="icon-caret-down collapsible-card-header-caret"
-            focusable="false"
-            height="6"
-            role="presentation"
-            viewBox="0 0 10 6"
-            width="8"
-          >
-            <path
-              class="fill-color"
-              d="M0 .5l5 5 5-5H0z"
-              fill="#909090"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </button>
-        <span
-          class="bdl-Collapsible-actionItems"
-        >
-          <button
-            aria-label="Edit Metadata"
-            aria-pressed="true"
-            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-            data-resin-target="metadata-instanceedit"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-edit "
-              focusable="false"
-              height="14"
-              role="presentation"
-              viewBox="0 0 14 14"
-              width="14"
-            >
-              <path
-                class="fill-color"
-                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
-                fill="#6f6f6f"
-              />
-            </svg>
-          </button>
-        </span>
-      </div>
-      <div
-        aria-hidden="false"
-        class="rah-static rah-static--height-auto"
-        style="height: auto; overflow: visible;"
-      >
-        <div>
-          <div
-            class="collapsible-card-content"
-          >
-            <div
-              class="loading-indicator-wrapper "
-            >
-              <form
-                novalidate=""
-              >
-                <div
-                  class="metadata-instance-editor-instance"
-                >
-                  <div
-                    class="metadata-cascade-editor"
-                    data-testid="metadata-cascade-policy"
-                  >
-                    <div
-                      class="metadata-cascade-enable"
-                    >
-                      <div>
-                        <div />
-                        <div
-                          class="toggle-container metadata-cascade-toggle cascade-on"
-                        >
-                          <label
-                            class="toggle-simple"
-                          >
-                            <input
-                              checked=""
-                              class="toggle-simple-input"
-                              role="switch"
-                              type="checkbox"
-                            />
-                            <div
-                              class="toggle-simple-switch"
-                            />
-                            <div
-                              class="toggle-simple-label"
-                            />
-                          </label>
-                        </div>
-                      </div>
-                      <div
-                        class="cascade-policy-text"
-                      >
-                        <div />
-                         
-                        <a
-                          class="link cascade-policy-learnmore-link"
-                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
-                          rel="noopener"
-                          target="_blank"
-                        >
-                          <div />
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          No Description Field
-                        </span>
-                      </span>
-                      <input
-                        aria-invalid="false"
-                        name="nodescfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description94"
-                      >
-                        example of a string field
-                      </div>
-                      <input
-                        aria-describedby="description94"
-                        aria-invalid="false"
-                        name="stringfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="some string"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description96"
-                      >
-                        example of an empty string field
-                      </div>
-                      <input
-                        aria-describedby="description96"
-                        aria-invalid="false"
-                        name="emptystring"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description98"
-                      >
-                        example of a float field
-                      </div>
-                      <input
-                        aria-describedby="description98"
-                        aria-invalid="false"
-                        name="floatfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="1"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description100"
-                      >
-                        example of an empty float field
-                      </div>
-                      <input
-                        aria-describedby="description100"
-                        aria-invalid="false"
-                        name="emptyfloat"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of a enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield102"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes"
-                          type="button"
-                        >
-                          yes
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of an empty enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield104"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="Select Value"
-                          type="button"
-                        >
-                          Select Value
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description107"
-                        >
-                          example of a date field
-                        </div>
-                        <input
-                          aria-describedby="description107"
-                          aria-errormessage="errorMessage106"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage106"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Clear Date"
-                        class="btn-plain date-picker-clear-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <path
-                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value="2018-06-20T00:00:00.000Z"
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Empty Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description112"
-                        >
-                          example of an empty date field
-                        </div>
-                        <input
-                          aria-describedby="description112"
-                          aria-errormessage="errorMessage111"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value=""
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage111"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value=""
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-MultiSelectMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Multi Select Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-MultiSelectMetadataField-desc"
-                      >
-                        example of a multi select field field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield115"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes, no"
-                          type="button"
-                        >
-                          yes, no
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                </div>
-                <div
-                  class="metadata-instance-editor-footer"
-                >
-                  <div
-                    class="metadata-instance-editor-footer-delete"
-                  >
-                    <button
-                      class="btn-plain "
-                      data-resin-target="metadata-instanceremove"
-                      type="button"
-                    >
-                      <div />
-                    </button>
-                  </div>
-                  <div
-                    class="metadata-instance-editor-footer-save-cancel"
-                  >
-                    <button
-                      class="btn"
-                      data-resin-target="metadata-instancecancel"
-                      type="button"
-                    >
-                      <span
-                        class="btn-content"
-                      >
-                        <div />
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true, "id": "hello"} and isCascadingPolicyApplicable is true 1`] = `
-<div>
-  <div
-    data-testid="metadata-instance"
-  >
-    <div
-      class="collapsible-card is-open is-bordered"
-    >
-      <div
-        class="collapsible-card-header has-sticky-header"
-      >
-        <button
-          aria-expanded="true"
-          class="btn-plain collapsible-card-title"
-          data-resin-target="metadata-cardcollapse"
-          type="button"
-        >
-          <span
-            class="metadata-instance-editor-instance-title"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-metadata "
-              focusable="false"
-              height="16"
-              role="presentation"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                class="fill-color"
-                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
-                fill="#9f3fed"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <span
-              class="metadata-instance-editor-instance-title-text"
-            />
-          </span>
-          <svg
-            aria-hidden="true"
-            class="icon-caret-down collapsible-card-header-caret"
-            focusable="false"
-            height="6"
-            role="presentation"
-            viewBox="0 0 10 6"
-            width="8"
-          >
-            <path
-              class="fill-color"
-              d="M0 .5l5 5 5-5H0z"
-              fill="#909090"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </button>
-        <span
-          class="bdl-Collapsible-actionItems"
-        >
-          <button
-            aria-label="Edit Metadata"
-            aria-pressed="true"
-            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-            data-resin-target="metadata-instanceedit"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-edit "
-              focusable="false"
-              height="14"
-              role="presentation"
-              viewBox="0 0 14 14"
-              width="14"
-            >
-              <path
-                class="fill-color"
-                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
-                fill="#6f6f6f"
-              />
-            </svg>
-          </button>
-        </span>
-      </div>
-      <div
-        aria-hidden="false"
-        class="rah-static rah-static--height-auto"
-        style="height: auto; overflow: visible;"
-      >
-        <div>
-          <div
-            class="collapsible-card-content"
-          >
-            <div
-              class="loading-indicator-wrapper "
-            >
-              <form
-                novalidate=""
-              >
-                <div
-                  class="metadata-instance-editor-instance"
-                >
-                  <div
-                    class="metadata-cascade-editor"
-                    data-testid="metadata-cascade-policy"
-                  >
-                    <div
-                      class="metadata-cascade-enable"
-                    >
-                      <div>
-                        <div />
-                        <div
-                          class="toggle-container metadata-cascade-toggle cascade-on"
-                        >
-                          <label
-                            class="toggle-simple"
-                          >
-                            <input
-                              checked=""
-                              class="toggle-simple-input"
-                              role="switch"
-                              type="checkbox"
-                            />
-                            <div
-                              class="toggle-simple-switch"
-                            />
-                            <div
-                              class="toggle-simple-label"
-                            />
-                          </label>
-                        </div>
-                      </div>
-                      <div
-                        class="cascade-policy-text"
-                      >
-                        <div />
-                         
-                        <a
-                          class="link cascade-policy-learnmore-link"
-                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
-                          rel="noopener"
-                          target="_blank"
-                        >
-                          <div />
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          No Description Field
-                        </span>
-                      </span>
-                      <input
-                        aria-invalid="false"
-                        name="nodescfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description65"
-                      >
-                        example of a string field
-                      </div>
-                      <input
-                        aria-describedby="description65"
-                        aria-invalid="false"
-                        name="stringfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="some string"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description67"
-                      >
-                        example of an empty string field
-                      </div>
-                      <input
-                        aria-describedby="description67"
-                        aria-invalid="false"
-                        name="emptystring"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description69"
-                      >
-                        example of a float field
-                      </div>
-                      <input
-                        aria-describedby="description69"
-                        aria-invalid="false"
-                        name="floatfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="1"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description71"
-                      >
-                        example of an empty float field
-                      </div>
-                      <input
-                        aria-describedby="description71"
-                        aria-invalid="false"
-                        name="emptyfloat"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of a enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield73"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes"
-                          type="button"
-                        >
-                          yes
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of an empty enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield75"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="Select Value"
-                          type="button"
-                        >
-                          Select Value
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description78"
-                        >
-                          example of a date field
-                        </div>
-                        <input
-                          aria-describedby="description78"
-                          aria-errormessage="errorMessage77"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage77"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Clear Date"
-                        class="btn-plain date-picker-clear-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <path
-                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value="2018-06-20T00:00:00.000Z"
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Empty Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description83"
-                        >
-                          example of an empty date field
-                        </div>
-                        <input
-                          aria-describedby="description83"
-                          aria-errormessage="errorMessage82"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value=""
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage82"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value=""
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-MultiSelectMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Multi Select Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-MultiSelectMetadataField-desc"
-                      >
-                        example of a multi select field field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield86"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes, no"
-                          type="button"
-                        >
-                          yes, no
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                </div>
-                <div
-                  class="metadata-instance-editor-footer"
-                >
-                  <div
-                    class="metadata-instance-editor-footer-delete"
-                  >
-                    <button
-                      class="btn-plain "
-                      data-resin-target="metadata-instanceremove"
-                      type="button"
-                    >
-                      <div />
-                    </button>
-                  </div>
-                  <div
-                    class="metadata-instance-editor-footer-save-cancel"
-                  >
-                    <button
-                      class="btn"
-                      data-resin-target="metadata-instancecancel"
-                      type="button"
-                    >
-                      <span
-                        class="btn-content"
-                      >
-                        <div />
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true} and isCascadingPolicyApplicable is false 1`] = `
-<div>
-  <div
-    data-testid="metadata-instance"
-  >
-    <div
-      class="collapsible-card is-open is-bordered"
-    >
-      <div
-        class="collapsible-card-header has-sticky-header"
-      >
-        <button
-          aria-expanded="true"
-          class="btn-plain collapsible-card-title"
-          data-resin-target="metadata-cardcollapse"
-          type="button"
-        >
-          <span
-            class="metadata-instance-editor-instance-title"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-metadata "
-              focusable="false"
-              height="16"
-              role="presentation"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                class="fill-color"
-                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
-                fill="#0061d5"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <span
-              class="metadata-instance-editor-instance-title-text"
-            />
-          </span>
-          <svg
-            aria-hidden="true"
-            class="icon-caret-down collapsible-card-header-caret"
-            focusable="false"
-            height="6"
-            role="presentation"
-            viewBox="0 0 10 6"
-            width="8"
-          >
-            <path
-              class="fill-color"
-              d="M0 .5l5 5 5-5H0z"
-              fill="#909090"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </button>
-        <span
-          class="bdl-Collapsible-actionItems"
-        >
-          <button
-            aria-label="Edit Metadata"
-            aria-pressed="true"
-            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-            data-resin-target="metadata-instanceedit"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-edit "
-              focusable="false"
-              height="14"
-              role="presentation"
-              viewBox="0 0 14 14"
-              width="14"
-            >
-              <path
-                class="fill-color"
-                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
-                fill="#6f6f6f"
-              />
-            </svg>
-          </button>
-        </span>
-      </div>
-      <div
-        aria-hidden="false"
-        class="rah-static rah-static--height-auto"
-        style="height: auto; overflow: visible;"
-      >
-        <div>
-          <div
-            class="collapsible-card-content"
-          >
-            <div
-              class="loading-indicator-wrapper "
-            >
-              <form
-                novalidate=""
-              >
-                <div
-                  class="metadata-instance-editor-instance"
-                >
-                  <div
-                    class="metadata-cascade-editor"
-                    data-testid="metadata-cascade-policy"
-                  >
-                    <div
-                      class="metadata-cascade-enable"
-                    >
-                      <div>
-                        <div />
-                        <div
-                          class="toggle-container metadata-cascade-toggle cascade-off"
-                        >
-                          <label
-                            class="toggle-simple"
-                          >
-                            <input
-                              class="toggle-simple-input"
-                              role="switch"
-                              type="checkbox"
-                            />
-                            <div
-                              class="toggle-simple-switch"
-                            />
-                            <div
-                              class="toggle-simple-label"
-                            />
-                          </label>
-                        </div>
-                      </div>
-                      <div
-                        class="cascade-policy-text"
-                      >
-                        <div />
-                         
-                        <a
-                          class="link cascade-policy-learnmore-link"
-                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
-                          rel="noopener"
-                          target="_blank"
-                        >
-                          <div />
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          No Description Field
-                        </span>
-                      </span>
-                      <input
-                        aria-invalid="false"
-                        name="nodescfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description152"
-                      >
-                        example of a string field
-                      </div>
-                      <input
-                        aria-describedby="description152"
-                        aria-invalid="false"
-                        name="stringfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="some string"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description154"
-                      >
-                        example of an empty string field
-                      </div>
-                      <input
-                        aria-describedby="description154"
-                        aria-invalid="false"
-                        name="emptystring"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description156"
-                      >
-                        example of a float field
-                      </div>
-                      <input
-                        aria-describedby="description156"
-                        aria-invalid="false"
-                        name="floatfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="1"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description158"
-                      >
-                        example of an empty float field
-                      </div>
-                      <input
-                        aria-describedby="description158"
-                        aria-invalid="false"
-                        name="emptyfloat"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of a enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield160"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes"
-                          type="button"
-                        >
-                          yes
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of an empty enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield162"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="Select Value"
-                          type="button"
-                        >
-                          Select Value
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description165"
-                        >
-                          example of a date field
-                        </div>
-                        <input
-                          aria-describedby="description165"
-                          aria-errormessage="errorMessage164"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage164"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Clear Date"
-                        class="btn-plain date-picker-clear-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <path
-                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value="2018-06-20T00:00:00.000Z"
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Empty Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description170"
-                        >
-                          example of an empty date field
-                        </div>
-                        <input
-                          aria-describedby="description170"
-                          aria-errormessage="errorMessage169"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value=""
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage169"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value=""
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-MultiSelectMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Multi Select Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-MultiSelectMetadataField-desc"
-                      >
-                        example of a multi select field field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield173"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes, no"
-                          type="button"
-                        >
-                          yes, no
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                </div>
-                <div
-                  class="metadata-instance-editor-footer"
-                >
-                  <div
-                    class="metadata-instance-editor-footer-delete"
-                  >
-                    <button
-                      class="btn-plain "
-                      data-resin-target="metadata-instanceremove"
-                      type="button"
-                    >
-                      <div />
-                    </button>
-                  </div>
-                  <div
-                    class="metadata-instance-editor-footer-save-cancel"
-                  >
-                    <button
-                      class="btn"
-                      data-resin-target="metadata-instancecancel"
-                      type="button"
-                    >
-                      <span
-                        class="btn-content"
-                      >
-                        <div />
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is {"canEdit": true} and isCascadingPolicyApplicable is true 1`] = `
-<div>
-  <div
-    data-testid="metadata-instance"
-  >
-    <div
-      class="collapsible-card is-open is-bordered"
-    >
-      <div
-        class="collapsible-card-header has-sticky-header"
-      >
-        <button
-          aria-expanded="true"
-          class="btn-plain collapsible-card-title"
-          data-resin-target="metadata-cardcollapse"
-          type="button"
-        >
-          <span
-            class="metadata-instance-editor-instance-title"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-metadata "
-              focusable="false"
-              height="16"
-              role="presentation"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                class="fill-color"
-                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
-                fill="#0061d5"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <span
-              class="metadata-instance-editor-instance-title-text"
-            />
-          </span>
-          <svg
-            aria-hidden="true"
-            class="icon-caret-down collapsible-card-header-caret"
-            focusable="false"
-            height="6"
-            role="presentation"
-            viewBox="0 0 10 6"
-            width="8"
-          >
-            <path
-              class="fill-color"
-              d="M0 .5l5 5 5-5H0z"
-              fill="#909090"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </button>
-        <span
-          class="bdl-Collapsible-actionItems"
-        >
-          <button
-            aria-label="Edit Metadata"
-            aria-pressed="true"
-            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-            data-resin-target="metadata-instanceedit"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-edit "
-              focusable="false"
-              height="14"
-              role="presentation"
-              viewBox="0 0 14 14"
-              width="14"
-            >
-              <path
-                class="fill-color"
-                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
-                fill="#6f6f6f"
-              />
-            </svg>
-          </button>
-        </span>
-      </div>
-      <div
-        aria-hidden="false"
-        class="rah-static rah-static--height-auto"
-        style="height: auto; overflow: visible;"
-      >
-        <div>
-          <div
-            class="collapsible-card-content"
-          >
-            <div
-              class="loading-indicator-wrapper "
-            >
-              <form
-                novalidate=""
-              >
-                <div
-                  class="metadata-instance-editor-instance"
-                >
-                  <div
-                    class="metadata-cascade-editor"
-                    data-testid="metadata-cascade-policy"
-                  >
-                    <div
-                      class="metadata-cascade-enable"
-                    >
-                      <div>
-                        <div />
-                        <div
-                          class="toggle-container metadata-cascade-toggle cascade-off"
-                        >
-                          <label
-                            class="toggle-simple"
-                          >
-                            <input
-                              class="toggle-simple-input"
-                              role="switch"
-                              type="checkbox"
-                            />
-                            <div
-                              class="toggle-simple-switch"
-                            />
-                            <div
-                              class="toggle-simple-label"
-                            />
-                          </label>
-                        </div>
-                      </div>
-                      <div
-                        class="cascade-policy-text"
-                      >
-                        <div />
-                         
-                        <a
-                          class="link cascade-policy-learnmore-link"
-                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
-                          rel="noopener"
-                          target="_blank"
-                        >
-                          <div />
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          No Description Field
-                        </span>
-                      </span>
-                      <input
-                        aria-invalid="false"
-                        name="nodescfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description123"
-                      >
-                        example of a string field
-                      </div>
-                      <input
-                        aria-describedby="description123"
-                        aria-invalid="false"
-                        name="stringfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="some string"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description125"
-                      >
-                        example of an empty string field
-                      </div>
-                      <input
-                        aria-describedby="description125"
-                        aria-invalid="false"
-                        name="emptystring"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description127"
-                      >
-                        example of a float field
-                      </div>
-                      <input
-                        aria-describedby="description127"
-                        aria-invalid="false"
-                        name="floatfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="1"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description129"
-                      >
-                        example of an empty float field
-                      </div>
-                      <input
-                        aria-describedby="description129"
-                        aria-invalid="false"
-                        name="emptyfloat"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of a enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield131"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes"
-                          type="button"
-                        >
-                          yes
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of an empty enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield133"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="Select Value"
-                          type="button"
-                        >
-                          Select Value
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description136"
-                        >
-                          example of a date field
-                        </div>
-                        <input
-                          aria-describedby="description136"
-                          aria-errormessage="errorMessage135"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage135"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Clear Date"
-                        class="btn-plain date-picker-clear-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <path
-                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value="2018-06-20T00:00:00.000Z"
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Empty Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description141"
-                        >
-                          example of an empty date field
-                        </div>
-                        <input
-                          aria-describedby="description141"
-                          aria-errormessage="errorMessage140"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value=""
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage140"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value=""
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-MultiSelectMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Multi Select Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-MultiSelectMetadataField-desc"
-                      >
-                        example of a multi select field field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield144"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes, no"
-                          type="button"
-                        >
-                          yes, no
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                </div>
-                <div
-                  class="metadata-instance-editor-footer"
-                >
-                  <div
-                    class="metadata-instance-editor-footer-delete"
-                  >
-                    <button
-                      class="btn-plain "
-                      data-resin-target="metadata-instanceremove"
-                      type="button"
-                    >
-                      <div />
-                    </button>
-                  </div>
-                  <div
-                    class="metadata-instance-editor-footer-save-cancel"
-                  >
-                    <button
-                      class="btn"
-                      data-resin-target="metadata-instancecancel"
-                      type="button"
-                    >
-                      <span
-                        class="btn-content"
-                      >
-                        <div />
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is null and isCascadingPolicyApplicable is false 1`] = `
-<div>
-  <div
-    data-testid="metadata-instance"
-  >
-    <div
-      class="collapsible-card is-open is-bordered"
-    >
-      <div
-        class="collapsible-card-header has-sticky-header"
-      >
-        <button
-          aria-expanded="true"
-          class="btn-plain collapsible-card-title"
-          data-resin-target="metadata-cardcollapse"
-          type="button"
-        >
-          <span
-            class="metadata-instance-editor-instance-title"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-metadata "
-              focusable="false"
-              height="16"
-              role="presentation"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                class="fill-color"
-                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
-                fill="#0061d5"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <span
-              class="metadata-instance-editor-instance-title-text"
-            />
-          </span>
-          <svg
-            aria-hidden="true"
-            class="icon-caret-down collapsible-card-header-caret"
-            focusable="false"
-            height="6"
-            role="presentation"
-            viewBox="0 0 10 6"
-            width="8"
-          >
-            <path
-              class="fill-color"
-              d="M0 .5l5 5 5-5H0z"
-              fill="#909090"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </button>
-        <span
-          class="bdl-Collapsible-actionItems"
-        >
-          <button
-            aria-label="Edit Metadata"
-            aria-pressed="true"
-            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-            data-resin-target="metadata-instanceedit"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-edit "
-              focusable="false"
-              height="14"
-              role="presentation"
-              viewBox="0 0 14 14"
-              width="14"
-            >
-              <path
-                class="fill-color"
-                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
-                fill="#6f6f6f"
-              />
-            </svg>
-          </button>
-        </span>
-      </div>
-      <div
-        aria-hidden="false"
-        class="rah-static rah-static--height-auto"
-        style="height: auto; overflow: visible;"
-      >
-        <div>
-          <div
-            class="collapsible-card-content"
-          >
-            <div
-              class="loading-indicator-wrapper "
-            >
-              <form
-                novalidate=""
-              >
-                <div
-                  class="metadata-instance-editor-instance"
-                >
-                  <div
-                    class="metadata-cascade-editor"
-                    data-testid="metadata-cascade-policy"
-                  >
-                    <div
-                      class="metadata-cascade-enable"
-                    >
-                      <div>
-                        <div />
-                        <div
-                          class="toggle-container metadata-cascade-toggle cascade-off"
-                        >
-                          <label
-                            class="toggle-simple"
-                          >
-                            <input
-                              class="toggle-simple-input"
-                              role="switch"
-                              type="checkbox"
-                            />
-                            <div
-                              class="toggle-simple-switch"
-                            />
-                            <div
-                              class="toggle-simple-label"
-                            />
-                          </label>
-                        </div>
-                      </div>
-                      <div
-                        class="cascade-policy-text"
-                      >
-                        <div />
-                         
-                        <a
-                          class="link cascade-policy-learnmore-link"
-                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
-                          rel="noopener"
-                          target="_blank"
-                        >
-                          <div />
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          No Description Field
-                        </span>
-                      </span>
-                      <input
-                        aria-invalid="false"
-                        name="nodescfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description210"
-                      >
-                        example of a string field
-                      </div>
-                      <input
-                        aria-describedby="description210"
-                        aria-invalid="false"
-                        name="stringfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="some string"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description212"
-                      >
-                        example of an empty string field
-                      </div>
-                      <input
-                        aria-describedby="description212"
-                        aria-invalid="false"
-                        name="emptystring"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description214"
-                      >
-                        example of a float field
-                      </div>
-                      <input
-                        aria-describedby="description214"
-                        aria-invalid="false"
-                        name="floatfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="1"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description216"
-                      >
-                        example of an empty float field
-                      </div>
-                      <input
-                        aria-describedby="description216"
-                        aria-invalid="false"
-                        name="emptyfloat"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of a enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield218"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes"
-                          type="button"
-                        >
-                          yes
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of an empty enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield220"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="Select Value"
-                          type="button"
-                        >
-                          Select Value
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description223"
-                        >
-                          example of a date field
-                        </div>
-                        <input
-                          aria-describedby="description223"
-                          aria-errormessage="errorMessage222"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage222"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Clear Date"
-                        class="btn-plain date-picker-clear-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <path
-                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value="2018-06-20T00:00:00.000Z"
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Empty Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description228"
-                        >
-                          example of an empty date field
-                        </div>
-                        <input
-                          aria-describedby="description228"
-                          aria-errormessage="errorMessage227"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value=""
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage227"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value=""
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-MultiSelectMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Multi Select Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-MultiSelectMetadataField-desc"
-                      >
-                        example of a multi select field field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield231"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes, no"
-                          type="button"
-                        >
-                          yes, no
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                </div>
-                <div
-                  class="metadata-instance-editor-footer"
-                >
-                  <div
-                    class="metadata-instance-editor-footer-delete"
-                  >
-                    <button
-                      class="btn-plain "
-                      data-resin-target="metadata-instanceremove"
-                      type="button"
-                    >
-                      <div />
-                    </button>
-                  </div>
-                  <div
-                    class="metadata-instance-editor-footer-save-cancel"
-                  >
-                    <button
-                      class="btn"
-                      data-resin-target="metadata-instancecancel"
-                      type="button"
-                    >
-                      <span
-                        class="btn-content"
-                      >
-                        <div />
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`features/metadata-instance-editor/fields/Instance should correctly render templated metadata instance when cascadePolicy is null and isCascadingPolicyApplicable is true 1`] = `
-<div>
-  <div
-    data-testid="metadata-instance"
-  >
-    <div
-      class="collapsible-card is-open is-bordered"
-    >
-      <div
-        class="collapsible-card-header has-sticky-header"
-      >
-        <button
-          aria-expanded="true"
-          class="btn-plain collapsible-card-title"
-          data-resin-target="metadata-cardcollapse"
-          type="button"
-        >
-          <span
-            class="metadata-instance-editor-instance-title"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-metadata "
-              focusable="false"
-              height="16"
-              role="presentation"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                class="fill-color"
-                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-2.515-5.879L6.2 7.263l1.376 2.202a.5.5 0 0 0 .848 0L9.8 7.263l.715 2.858a.5.5 0 0 0 .97-.242l-1-4a.5.5 0 0 0-.909-.144L8 8.257 6.424 5.735a.5.5 0 0 0-.91.144l-1 4a.5.5 0 0 0 .971.242z"
-                fill="#0061d5"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <span
-              class="metadata-instance-editor-instance-title-text"
-            />
-          </span>
-          <svg
-            aria-hidden="true"
-            class="icon-caret-down collapsible-card-header-caret"
-            focusable="false"
-            height="6"
-            role="presentation"
-            viewBox="0 0 10 6"
-            width="8"
-          >
-            <path
-              class="fill-color"
-              d="M0 .5l5 5 5-5H0z"
-              fill="#909090"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </button>
-        <span
-          class="bdl-Collapsible-actionItems"
-        >
-          <button
-            aria-label="Edit Metadata"
-            aria-pressed="true"
-            class="btn-plain metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
-            data-resin-target="metadata-instanceedit"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon-edit "
-              focusable="false"
-              height="14"
-              role="presentation"
-              viewBox="0 0 14 14"
-              width="14"
-            >
-              <path
-                class="fill-color"
-                d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
-                fill="#6f6f6f"
-              />
-            </svg>
-          </button>
-        </span>
-      </div>
-      <div
-        aria-hidden="false"
-        class="rah-static rah-static--height-auto"
-        style="height: auto; overflow: visible;"
-      >
-        <div>
-          <div
-            class="collapsible-card-content"
-          >
-            <div
-              class="loading-indicator-wrapper "
-            >
-              <form
-                novalidate=""
-              >
-                <div
-                  class="metadata-instance-editor-instance"
-                >
-                  <div
-                    class="metadata-cascade-editor"
-                    data-testid="metadata-cascade-policy"
-                  >
-                    <div
-                      class="metadata-cascade-enable"
-                    >
-                      <div>
-                        <div />
-                        <div
-                          class="toggle-container metadata-cascade-toggle cascade-off"
-                        >
-                          <label
-                            class="toggle-simple"
-                          >
-                            <input
-                              class="toggle-simple-input"
-                              role="switch"
-                              type="checkbox"
-                            />
-                            <div
-                              class="toggle-simple-switch"
-                            />
-                            <div
-                              class="toggle-simple-label"
-                            />
-                          </label>
-                        </div>
-                      </div>
-                      <div
-                        class="cascade-policy-text"
-                      >
-                        <div />
-                         
-                        <a
-                          class="link cascade-policy-learnmore-link"
-                          href="https://community.box.com/t5/Organizing-and-Tracking-Content/Metadata/ta-p/30765"
-                          rel="noopener"
-                          target="_blank"
-                        >
-                          <div />
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          No Description Field
-                        </span>
-                      </span>
-                      <input
-                        aria-invalid="false"
-                        name="nodescfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description181"
-                      >
-                        example of a string field
-                      </div>
-                      <input
-                        aria-describedby="description181"
-                        aria-invalid="false"
-                        name="stringfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="some string"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty String Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description183"
-                      >
-                        example of an empty string field
-                      </div>
-                      <input
-                        aria-describedby="description183"
-                        aria-invalid="false"
-                        name="emptystring"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description185"
-                      >
-                        example of a float field
-                      </div>
-                      <input
-                        aria-describedby="description185"
-                        aria-invalid="false"
-                        name="floatfield"
-                        placeholder="Set Value"
-                        type="text"
-                        value="1"
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-TextMetadataField text-input-container"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Float Field
-                        </span>
-                      </span>
-                      <div
-                        class="text-input-description"
-                        id="description187"
-                      >
-                        example of an empty float field
-                      </div>
-                      <input
-                        aria-describedby="description187"
-                        aria-invalid="false"
-                        name="emptyfloat"
-                        placeholder="Set Value"
-                        type="text"
-                        value=""
-                      />
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of a enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield189"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes"
-                          type="button"
-                        >
-                          yes
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-EnumMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Empty Enum Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-EnumMetadataField-desc"
-                      >
-                        example of an empty enum field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield191"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="Select Value"
-                          type="button"
-                        >
-                          Select Value
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper show-clear-btn"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description194"
-                        >
-                          example of a date field
-                        </div>
-                        <input
-                          aria-describedby="description194"
-                          aria-errormessage="errorMessage193"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value="Wed Jun 20 2018 00:00:00 GMT-0700 (Pacific Daylight Time)"
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage193"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Clear Date"
-                        class="btn-plain date-picker-clear-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <path
-                            d="M7.19 8L4.46 5.27a.572.572 0 01.81-.81L8 7.19l2.73-2.73a.572.572 0 01.81.81L8.81 8l2.73 2.73a.572.572 0 01-.81.81L8 8.81l-2.73 2.73a.572.572 0 01-.81-.81L7.19 8zm5.76 4.95a7 7 0 10-9.9-9.9 7 7 0 009.9 9.9z"
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value="2018-06-20T00:00:00.000Z"
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-DateMetadataField date-picker-wrapper"
-                  >
-                    <span
-                      class="date-picker-icon-holder"
-                    >
-                      <label>
-                        <span
-                          class="label bdl-Label"
-                        >
-                          <span>
-                            Empty Date Field
-                          </span>
-                        </span>
-                        <div
-                          class="date-picker-description"
-                          id="description199"
-                        >
-                          example of an empty date field
-                        </div>
-                        <input
-                          aria-describedby="description199"
-                          aria-errormessage="errorMessage198"
-                          aria-invalid="false"
-                          class="date-picker-input"
-                          placeholder="Set Date"
-                          type="text"
-                          value=""
-                        />
-                        <span
-                          class="accessibility-hidden"
-                          id="errorMessage198"
-                          role="alert"
-                        />
-                      </label>
-                      <button
-                        aria-label="Choose Date"
-                        class="btn-plain date-picker-open-btn"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="16"
-                          role="presentation"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <g
-                            fill="#909090"
-                            fill-rule="evenodd"
-                          >
-                            <path
-                              d="M13.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v10.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 14.65 0 14.327 0 13.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0h10.873zM13 4H3a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"
-                            />
-                            <g
-                              transform="translate(3 5.5)"
-                            >
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.833"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.667"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="5.67"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="8.5"
-                                y="2.5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                y="5"
-                              />
-                              <rect
-                                height="1.5"
-                                rx="0.5"
-                                width="1.5"
-                                x="2.83"
-                                y="5"
-                              />
-                            </g>
-                          </g>
-                        </svg>
-                      </button>
-                      <input
-                        class="date-picker-unix-time-input"
-                        readonly=""
-                        type="hidden"
-                        value=""
-                      />
-                    </span>
-                  </div>
-                  <div
-                    class="bdl-MultiSelectMetadataField"
-                  >
-                    <label>
-                      <span
-                        class="label bdl-Label"
-                      >
-                        <span>
-                          Multi Select Field
-                        </span>
-                      </span>
-                      <i
-                        class="bdl-MultiSelectMetadataField-desc"
-                      >
-                        example of a multi select field field
-                      </i>
-                      <div
-                        class="bdl-SelectField select-container"
-                      >
-                        <button
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-owns="selectfield202"
-                          class="select-button bdl-SelectButton"
-                          role="listbox"
-                          title="yes, no"
-                          type="button"
-                        >
-                          yes, no
-                        </button>
-                      </div>
-                    </label>
-                  </div>
-                </div>
-                <div
-                  class="metadata-instance-editor-footer"
-                >
-                  <div
-                    class="metadata-instance-editor-footer-delete"
-                  >
-                    <button
-                      class="btn-plain "
-                      data-resin-target="metadata-instanceremove"
-                      type="button"
-                    >
-                      <div />
-                    </button>
-                  </div>
-                  <div
-                    class="metadata-instance-editor-footer-save-cancel"
-                  >
-                    <button
-                      class="btn"
-                      data-resin-target="metadata-instancecancel"
-                      type="button"
-                    >
-                      <span
-                        class="btn-content"
-                      >
-                        <div />
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`features/metadata-instance-editor/fields/Instance should correctly render the busy indicator 1`] = `
 <div
   data-testid="metadata-instance"

From 85586c4148bcedffd346209d951b1bf9f4468ba9 Mon Sep 17 00:00:00 2001
From: Joshua Arnold <jarnld2@gmail.com>
Date: Tue, 22 Aug 2023 17:39:08 -0400
Subject: [PATCH 25/25] fix(metadata): Disable updates to metadata

---
 examples/src/MetadataExamples.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/examples/src/MetadataExamples.js b/examples/src/MetadataExamples.js
index bfc6604637..ebb94995d9 100644
--- a/examples/src/MetadataExamples.js
+++ b/examples/src/MetadataExamples.js
@@ -1036,6 +1036,7 @@ class MetadataExamples extends React.PureComponent {
                         canAdd
                         editors={this.state.editors}
                         isCascadingPolicyApplicable
+                        isFolderMetadata
                         onAdd={this.onAdd}
                         onModification={this.onModification}
                         onRemove={this.onRemove}
@@ -1053,6 +1054,7 @@ class MetadataExamples extends React.PureComponent {
                     <MetadataInstanceEditor
                         canAdd
                         editors={this.state.editors}
+                        isFolderMetadata
                         onAdd={this.onAdd}
                         onModification={this.onModification}
                         onRemove={this.onRemove}
@@ -1067,6 +1069,7 @@ class MetadataExamples extends React.PureComponent {
                 <div className="metadata-container">
                     <MetadataInstanceEditor
                         canAdd
+                        isFolderMetadata
                         onAdd={this.onAdd}
                         onModification={this.onModification}
                         onRemove={this.onRemove}
@@ -1082,6 +1085,7 @@ class MetadataExamples extends React.PureComponent {
                     <MetadataInstanceEditor
                         canAdd
                         editors={this.state.editors}
+                        isFolderMetadata
                         onAdd={this.onAdd}
                         onModification={this.onModification}
                         onRemove={this.onRemove}