Fixed: Table column order resetting after refresh

#4297

(cherry picked from commit 044cb563a6488c16916ea7617d1f91404330b06f)

frontend/src/Store/Middleware/createPersistState.js

@@ -28,27 +28,29 @@ function mergeColumns(path, initialState, persistedState, computedState) {
 
   const columns = [];
 
-  initialColumns.forEach((initialColumn) => {
+  // Add persisted columns in the same order they're currently in
-    const persistedColumnIndex = _.findIndex(persistedColumns, { name: initialColumn.name });
+  // as long as they haven't been removed.
-    const column = Object.assign({}, initialColumn);
+
-    const persistedColumn = persistedColumnIndex > -1 ? persistedColumns[persistedColumnIndex] : undefined;
+  persistedColumns.forEach((persistedColumn) => {
+    const columnIndex = initialColumns.findIndex((i) => i.name === persistedColumn.name);
 
-    if (persistedColumn) {
+    if (columnIndex >= 0) {
-      column.isVisible = persistedColumn.isVisible;
+      columns.push({ ...persistedColumn });
     }
+  });
 
-    // If there is a persisted column, it's index doesn't exceed the column list
+  // Add any columns added to the app in the initial position.
-    // and it's modifiable, insert it in the proper position.
+  initialColumns.forEach((initialColumn, index) => {
+    const persistedColumnIndex = persistedColumns.findIndex((i) => i.name === initialColumn.name);
+    const column = Object.assign({}, initialColumn);
 
-    if (persistedColumn && columns.length - 1 > persistedColumnIndex && persistedColumn.isModifiable !== false) {
+    if (persistedColumnIndex === -1) {
-      columns.splice(persistedColumnIndex, 0, column);
+      columns.splice(index, 0, column);
-    } else {
-      columns.push(column);
     }
+  });
 
   // Set the columns in the persisted state
   _.set(computedState, path, columns);
-  });
 }
 
 function slicer(paths_) {