fix(metadata): Disable updates to metadata

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}

src/common/types/metadata.js

@@ -88,6 +88,8 @@ type MetadataInstance = {
     cascadePolicy?: MetadataCascadePolicy,
     data: MetadataFields,
     id: string,
+    isCascadingPolicyApplicable?: boolean,
+    isFolderMetadata?: boolean,
 };
 
 type MetadataInstanceV2 = {

src/features/metadata-instance-editor/CascadePolicy.js

@@ -31,14 +31,14 @@ 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;
 
     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} />
@@ -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)}

src/features/metadata-instance-editor/Instance.js

@@ -52,8 +52,9 @@ type Props = {
     hasError: boolean,
     id: string,
     intl: Object,
-    isCascadingPolicyApplicable?: boolean,
+    isCascadingPolicyApplicable: boolean,
     isDirty: boolean,
+    isFolderMetadata?: boolean,
     isOpen: boolean,
     onModification?: (id: string, isDirty: boolean, type?: string) => void,
     onRemove?: (id: string) => void,
@@ -102,6 +103,8 @@ class Instance extends React.PureComponent<Props, State> {
     static defaultProps = {
         data: {},
         isDirty: false,
+        isCascadingPolicyApplicable: false,
+        isFolderMetadata: false,
     };
 
     constructor(props: Props) {
@@ -200,14 +203,7 @@ class Instance extends React.PureComponent<Props, State> {
      * @return {void}
      */
     onSave = (): void => {
-        const {
-            cascadePolicy,
-            data: originalData,
-            id,
-            isDirty,
-            isCascadingPolicyApplicable,
-            onSave,
-        }: 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) {
@@ -219,19 +215,16 @@ class Instance extends React.PureComponent<Props, State> {
             isEditing: false,
             shouldShowCascadeOptions: false,
         });
-        onSave(
-            id,
-            this.createJSONPatch(currentData, originalData),
-            isCascadingPolicyApplicable
-                ? {
-                      canEdit: cascadePolicy ? cascadePolicy.canEdit : false,
-                      id: cascadePolicy ? cascadePolicy.id : undefined,
-                      isEnabled: isCascadingEnabled,
-                      overwrite: isCascadingOverwritten,
-                  }
-                : undefined,
-            cloneDeep(currentData),
-        );
+
+        const cascadePolicyData = {
+            ...cascadePolicy,
+            isEnabled: isFolderMetadata ? isCascadingEnabled : false,
+            overwrite: isCascadingOverwritten,
+        };
+
+        const clonedCurrentData = cloneDeep(currentData);
+        const JSONPatch = this.createJSONPatch(clonedCurrentData, originalData);
+        onSave(id, JSONPatch, cascadePolicyData, clonedCurrentData);
     };
 
     /**
@@ -351,10 +344,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">
@@ -363,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>
@@ -398,8 +392,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, isFolderMetadata }: Props = this.props;
+        const isFile = !isFolderMetadata;
         return this.renderDeleteMessage(isFile, template);
     }
 
@@ -440,10 +434,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;
     }
 
     /**
@@ -531,6 +522,7 @@ class Instance extends React.PureComponent<Props, State> {
      */
     canEdit(): boolean {
         const { canEdit, onModification, onRemove, onSave }: Props = this.props;
+
         return (
             canEdit &&
             typeof onRemove === 'function' &&
@@ -579,7 +571,7 @@ class Instance extends React.PureComponent<Props, State> {
     };
 
     render() {
-        const { cascadePolicy = {}, isDirty, isCascadingPolicyApplicable, isOpen, template }: Props = this.props;
+        const { isDirty, isFolderMetadata, isOpen, template }: Props = this.props;
         const { fields = [] } = template;
         const {
             data,
@@ -590,8 +582,7 @@ class Instance extends React.PureComponent<Props, State> {
             shouldShowCascadeOptions,
             isCascadingOverwritten,
         }: State = this.state;
-        const isProperties = template.templateKey === TEMPLATE_CUSTOM_PROPERTIES;
-        const isEditing = this.isEditing();
+        const isCustomInstance = template.templateKey === TEMPLATE_CUSTOM_PROPERTIES;
 
         if (!template || isHidden(template)) {
             return null;
@@ -601,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={{
@@ -626,27 +617,29 @@ class Instance extends React.PureComponent<Props, State> {
                         <LoadingIndicatorWrapper isLoading={isBusy}>
                             <Form onValidSubmit={isDirty ? this.onSave : noop}>
                                 <div className="metadata-instance-editor-instance">
-                                    {isCascadingPolicyApplicable && (
+                                    {/* policies aren't enabled on custom instances but we show this anyway to display a message to inform the user */}
+                                    {isFolderMetadata && (
                                         <CascadePolicy
-                                            canEdit={isEditing && !!cascadePolicy.canEdit}
+                                            canEdit={this.isEditing()}
                                             isCascadingEnabled={isCascadingEnabled}
                                             isCascadingOverwritten={isCascadingOverwritten}
-                                            isCustomMetadata={isProperties}
+                                            isCustomMetadata={isCustomInstance}
                                             onCascadeModeChange={this.onCascadeModeChange}
                                             onCascadeToggle={this.onCascadeToggle}
                                             shouldShowCascadeOptions={shouldShowCascadeOptions}
                                         />
                                     )}
-                                    {isProperties ? (
+
+                                    {isCustomInstance ? (
                                         <CustomInstance
-                                            canEdit={isEditing}
+                                            canEdit={this.isEditing()}
                                             data={data}
                                             onFieldChange={this.onFieldChange}
                                             onFieldRemove={this.onFieldRemove}
                                         />
                                     ) : (
                                         <TemplatedInstance
-                                            canEdit={isEditing}
+                                            canEdit={this.isEditing()}
                                             data={data}
                                             errors={errors}
                                             onFieldChange={this.onFieldChange}
@@ -655,7 +648,7 @@ class Instance extends React.PureComponent<Props, State> {
                                         />
                                     )}
                                 </div>
-                                {isEditing && (
+                                {this.isEditing() && (
                                     <Footer
                                         onCancel={this.onCancel}
                                         onRemove={this.onConfirmRemove}

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,
+    isFolderMetadata?: boolean,
     onModification?: (id: string, isDirty: boolean) => void,
     onRemove?: (id: string) => void,
     onSave?: (
@@ -20,8 +21,9 @@ type Props = {
 };
 
 const Instances = ({
-    isCascadingPolicyApplicable = false,
     editors = [],
+    isCascadingPolicyApplicable = false,
+    isFolderMetadata = false,
     onModification,
     onRemove,
     onSave,
@@ -46,6 +48,7 @@ const Instances = ({
                     onSave={onSave}
                     onRemove={onRemove}
                     template={template}
+                    isFolderMetadata={isFolderMetadata}
                 />
             );
         },

src/features/metadata-instance-editor/MetadataInstanceEditor.js

@@ -17,6 +17,7 @@ type Props = {
     editors?: Array<MetadataEditor>,
     isCascadingPolicyApplicable?: boolean,
     isDropdownBusy?: boolean,
+    isFolderMetadata?: 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,
+    isFolderMetadata = false,
     editors = [],
     onModification,
     onRemove,
@@ -63,6 +65,7 @@ const MetadataInstanceEditor = ({
                     <Instances
                         editors={editors}
                         isCascadingPolicyApplicable={isCascadingPolicyApplicable}
+                        isFolderMetadata={isFolderMetadata}
                         onModification={onModification}
                         onRemove={onRemove}
                         onSave={onSave}