resolve #239

resources/lang/sources/en.yaml

@@ -54,6 +54,7 @@ extensions.available: "Available extensions"
 extensions.is.dependency: "Cannot deactivate this because this is a dependency of {{dependencies}}"
 extensions.title: "Content"
 extensions.viewer: "Extension information"
+extensions.priority.note: "Note: extensions listed higher can override lower extensions"
 failed: "Failed"
 file.all: "All files"
 file.config: "Config files"

src/components/ucp-tabs/extension-manager/extension-manager.css

@@ -61,15 +61,15 @@
 .extension-manager-control__box__buttons {
   display: flex;
   width: 100%;
-  margin-top: 10px;
+  /* margin-top: 10px; */
   flex-wrap: wrap;
 }
 
 .extension-manager-control__box__buttons--apply-button {
   margin-left: auto;
 }
 
-.extension-manager-control__box__buttons--apply-button>button {
+.extension-manager-control__box__buttons--apply-button > button {
   height: 100%;
 }
 
@@ -84,6 +84,7 @@
   margin-left: auto;
 }
 
-.extension-manager-control__box__buttons--user-override-switch>.user-override-switch {
+.extension-manager-control__box__buttons--user-override-switch
+  > .user-override-switch {
   margin: 0 5px 0 0;
-}
+}

src/components/ucp-tabs/extension-manager/extension-manager.tsx

@@ -201,6 +201,14 @@ export default function ExtensionManager() {
                 ...activated,
               ]}
             </div>
+            <div
+              style={{
+                backgroundColor: 'rgba(0, 0, 0, 0.75)',
+                paddingLeft: '10px',
+              }}
+            >
+              <Message message="extensions.priority.note" />
+            </div>
             {editorState.state === 'inactive' ? (
               <ExtensionManagerToolbar />
             ) : (

src/components/ucp-tabs/extension-manager/extensions-state-manipulation.tsx

@@ -10,13 +10,23 @@ const LOGGER = new Logger('extension-state.ts');
 
 export class DependencyError extends Error {}
 
+function setDisplayOrder(
+  ordering: Extension[],
+  extensions: Extension[],
+): Extension[] {
+  const orderingNames = ordering.map((e) => e.name);
+  // Get the extensions that were not defined in the ordering.
+  const extra = extensions.filter((e) => orderingNames.indexOf(e.name) === -1);
+  return [...extra, ...ordering];
+}
+
 function addExtensionToExplicityActivatedExtensions(
   extensionsState: ExtensionsState,
   ext: Extension,
-) {
+): ExtensionsState {
   const { tree } = extensionsState;
 
-  const newEAE = [...extensionsState.explicitlyActivatedExtensions, ext];
+  const newEAE = [ext, ...extensionsState.explicitlyActivatedExtensions];
 
   const tempTree = tree.copy();
 
@@ -35,28 +45,32 @@ function addExtensionToExplicityActivatedExtensions(
   }
 
   // Yoink ext to the top in extensions state here!
-  const allDependenciesInLoadOrder = [
-    ext,
-    ...solution.extensions.filter((e) => e !== ext).reverse(),
-  ];
+  // const allDependenciesInLoadOrder = [
+  //   ext,
+  //   ...solution.extensions.filter((e) => e !== ext).reverse(),
+  // ];
+  const allDependenciesInDisplayOrder = setDisplayOrder(
+    extensionsState.activeExtensions,
+    solution.extensions.toReversed(),
+  );
 
   // Filter out extensions with a different version than those that are now going to be activated
-  const depNames = new Set(allDependenciesInLoadOrder.map((e) => e.name));
+  const depNames = new Set(allDependenciesInDisplayOrder.map((e) => e.name));
   const installedExtensionsFilteredList =
     extensionsState.installedExtensions.filter((e) => !depNames.has(e.name));
 
   return {
     ...extensionsState,
     explicitlyActivatedExtensions: newEAE,
-    activeExtensions: allDependenciesInLoadOrder,
+    activeExtensions: allDependenciesInDisplayOrder,
     installedExtensions: installedExtensionsFilteredList,
   };
 }
 
 async function removeExtensionFromExplicitlyActivatedExtensions(
   extensionsState: ExtensionsState,
   ext: Extension,
-) {
+): Promise<ExtensionsState> {
   const { tree } = extensionsState;
 
   const newEAE = extensionsState.explicitlyActivatedExtensions.filter(
@@ -111,7 +125,7 @@ async function removeExtensionFromExplicitlyActivatedExtensions(
     explicitlyActivatedExtensions: eae,
     activeExtensions: ae,
     installedExtensions: ie,
-  } as ExtensionsState;
+  };
 }
 
 function moveExtension(

src/function/extensions/extensions-state.ts

@@ -19,12 +19,14 @@ export type ExtensionsState = {
   installedExtensions: Extension[];
 
   /**
-   * Extensions that are currently active. Used to determine UI option display
+   * Extensions that are currently active. Used to determine UI option display.
+   * Sorted in display order
    */
   activeExtensions: Extension[];
 
   /**
    * Extensions that are explicitly set to active
+   * Sorted in display order
    */
   explicitlyActivatedExtensions: Extension[];