From 0720afb4d0369860ee3468e6eeda51876cac6517 Mon Sep 17 00:00:00 2001
From: Antoine Chassagne <antoine@poool.fr>
Date: Tue, 21 Nov 2023 15:21:08 +0100
Subject: [PATCH 1/2] feat(react): add priority override for settings

---
 packages/core/lib/Builder/index.js              |  2 +-
 packages/core/lib/types.d.ts                    |  2 ++
 packages/react/lib/DisplayableSettings/index.js | 15 ++++++++++++++-
 packages/react/lib/Editable/Form.js             | 15 ++++++++++++++-
 packages/react/lib/index.stories.js             |  7 +++++++
 5 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/packages/core/lib/Builder/index.js b/packages/core/lib/Builder/index.js
index cb40a0eaf..1ef7493a7 100644
--- a/packages/core/lib/Builder/index.js
+++ b/packages/core/lib/Builder/index.js
@@ -134,9 +134,9 @@ export default class Builder extends Emitter {
 
   getComponentDisplayableSettings (element, { component }) {
     return [
+      ...this.#settings.getDisplayable?.(element) || [],
       ...this.#components
         .getDisplayableSettings?.(element, { component }) || [],
-      ...this.#settings.getDisplayable?.(element) || [],
     ];
   }
 
diff --git a/packages/core/lib/types.d.ts b/packages/core/lib/types.d.ts
index a707cbca3..1a57fc4b8 100644
--- a/packages/core/lib/types.d.ts
+++ b/packages/core/lib/types.d.ts
@@ -100,6 +100,7 @@ export declare interface SettingOverrideObject {
   default?: any;
   displayable?: boolean;
   valueType?: string;
+  priority?: number;
   fields?: Array<ComponentSettingsFieldObject>;
   props?: object;
   condition: (element: Element | ElementObject, opts?: {
@@ -120,6 +121,7 @@ export declare class SettingOverride {
   default: any;
   displayable: boolean;
   valueType: string;
+  priority: number;
   fields: Array<ComponentSettingsField>;
   props: object;
   condition: (element: Element | ElementObject, opts?: {
diff --git a/packages/react/lib/DisplayableSettings/index.js b/packages/react/lib/DisplayableSettings/index.js
index 2c9db9a43..3baa5d6d7 100644
--- a/packages/react/lib/DisplayableSettings/index.js
+++ b/packages/react/lib/DisplayableSettings/index.js
@@ -8,11 +8,24 @@ import Property from './Property';
 const DisplayableSettings = ({ className, element, component, override }) => {
   const { builder } = useBuilder();
 
+  const getSettingPriority = setting => {
+    const fieldOverride = {
+      ...builder.getOverride('setting', element.type, { setting }),
+      ...builder.getOverride('component', element.type, {
+        output: 'field', setting,
+      }),
+    };
+
+    return Number.isSafeInteger(fieldOverride?.priority)
+      ? fieldOverride.priority
+      : setting.priority || 0;
+  };
+
   const displayableSettings = useMemo(() => (
     builder
       .getComponentDisplayableSettings(element, { component })
       .filter(s => !s.condition || s.condition(element))
-      .sort((a, b) => (b.priority || 0) - (a.priority || 0))
+      .sort((a, b) => getSettingPriority(b) - getSettingPriority(a))
   ), [element, component]);
 
   if (displayableSettings.length <= 0) {
diff --git a/packages/react/lib/Editable/Form.js b/packages/react/lib/Editable/Form.js
index c8a9c3bd2..6afd8891b 100644
--- a/packages/react/lib/Editable/Form.js
+++ b/packages/react/lib/Editable/Form.js
@@ -60,6 +60,19 @@ const Form = ({
     onCancel();
   };
 
+  const getFieldPriority = field => {
+    const fieldOverride = {
+      ...builder.getOverride('setting', element.type, { setting: field }),
+      ...builder.getOverride('component', element.type, {
+        output: 'field', setting: field,
+      }),
+    };
+
+    return Number.isSafeInteger(fieldOverride?.priority)
+      ? fieldOverride.priority
+      : field.priority || 0;
+  };
+
   const hasSubfields = setting =>
     Array.isArray(setting.fields) && setting.fields.length > 0;
 
@@ -99,7 +112,7 @@ const Form = ({
                       .filter(field => (tab.id === 'general' && !field.tab) ||
                         field.tab === tab.id)
                   )
-                  .sort((a, b) => (b.priority || 0) - (a.priority || 0))
+                  .sort((a, b) => getFieldPriority(b) - getFieldPriority(a))
                   .filter(f =>
                     !f.condition ||
                     f.condition(state.element, { component, builder })
diff --git a/packages/react/lib/index.stories.js b/packages/react/lib/index.stories.js
index 20eda5206..a3c9d9186 100644
--- a/packages/react/lib/index.stories.js
+++ b/packages/react/lib/index.stories.js
@@ -167,6 +167,13 @@ export const withMultipleCustomSettings = () => {
             fields: [{
               key: 'headingLevel',
               options: ['t1', 't2', 't3', 't4', 't5', 't6'],
+              priority: 3,
+            }, {
+              key: 'settings.foo',
+              priority: 1,
+            }, {
+              key: 'settings.bar',
+              priority: 2,
             }],
           }, {
             id: 'classNameOverride',

From 13ac8c44a95250875483e6f0deb097d1185a0a34 Mon Sep 17 00:00:00 2001
From: Antoine Chassagne <antoine@poool.fr>
Date: Wed, 22 Nov 2023 15:03:23 +0100
Subject: [PATCH 2/2] fix(react): wrong settings order

---
 packages/core/lib/Builder/index.js  |  2 +-
 packages/react/lib/Editable/Form.js | 11 ++++-------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/core/lib/Builder/index.js b/packages/core/lib/Builder/index.js
index 1ef7493a7..cb40a0eaf 100644
--- a/packages/core/lib/Builder/index.js
+++ b/packages/core/lib/Builder/index.js
@@ -134,9 +134,9 @@ export default class Builder extends Emitter {
 
   getComponentDisplayableSettings (element, { component }) {
     return [
-      ...this.#settings.getDisplayable?.(element) || [],
       ...this.#components
         .getDisplayableSettings?.(element, { component }) || [],
+      ...this.#settings.getDisplayable?.(element) || [],
     ];
   }
 
diff --git a/packages/react/lib/Editable/Form.js b/packages/react/lib/Editable/Form.js
index 6afd8891b..69a9f9b34 100644
--- a/packages/react/lib/Editable/Form.js
+++ b/packages/react/lib/Editable/Form.js
@@ -105,13 +105,10 @@ const Form = ({
           .map((tab, t) => (
             <Tab key={tab.id || t} title={<Text>{ tab.title }</Text>}>
               <div className="fields oak-flex oak-flex-col oak-gap-4">
-                { tab
-                  .fields
-                  .concat(
-                    (component.settings?.fields || [])
-                      .filter(field => (tab.id === 'general' && !field.tab) ||
-                        field.tab === tab.id)
-                  )
+                { (component.settings?.fields || [])
+                  .filter(field => (tab.id === 'general' && !field.tab) ||
+                    field.tab === tab.id)
+                  .concat(tab.fields)
                   .sort((a, b) => getFieldPriority(b) - getFieldPriority(a))
                   .filter(f =>
                     !f.condition ||