Keep Content database columns in user-defined order

templates/content/actions/update-content-database-view.test.ts

@@ -56,6 +56,7 @@ describe("update content database view", () => {
         },
       ],
       collapsedGroupIds: ["status:done"],
+      propertyOrderIds: ["name", "status"],
       hideEmptyGroups: true,
       calculations: { status: "count_values" },
       wrapCells: true,

templates/content/app/components/editor/database/DatabaseView.test.ts

@@ -54,6 +54,8 @@ import {
   databaseNextBuilderHydrationSource,
   databasePreviewItem,
   databaseItemPagePath,
+  orderDatabasePropertiesForView,
+  reorderDatabaseViewProperty,
   databaseRecordBuilderContinuationAttempt,
   databaseSourceOperationIsPending,
   databaseSourceChangeSetsAreComplete,
@@ -1270,6 +1272,87 @@ const baseProperty = (
   editable: true,
 });
 
+describe("database property column order", () => {
+  const view = {
+    id: "table",
+    name: "Table",
+    type: "table" as const,
+    sorts: [],
+    filters: [],
+    columnWidths: {},
+  };
+  const propertyIds = (properties: DocumentProperty[]) =>
+    properties.map((property) => property.definition.id);
+
+  it("moves a visible property before another while preserving hidden columns", () => {
+    const allProperties = [
+      baseProperty("alpha"),
+      baseProperty("hidden"),
+      baseProperty("bravo"),
+      baseProperty("charlie"),
+    ];
+    const visibleProperties = [
+      allProperties[0],
+      allProperties[2],
+      allProperties[3],
+    ];
+
+    const reordered = reorderDatabaseViewProperty(
+      view,
+      "charlie",
+      "alpha",
+      { allProperties, visibleProperties },
+      "before",
+    );
+
+    expect(reordered.propertyOrderIds).toEqual([
+      "charlie",
+      "alpha",
+      "hidden",
+      "bravo",
+    ]);
+    expect(
+      propertyIds(orderDatabasePropertiesForView(allProperties, reordered)),
+    ).toEqual(["charlie", "alpha", "hidden", "bravo"]);
+  });
+
+  it("keeps surviving explicit order and appends new properties", () => {
+    const properties = [
+      baseProperty("alpha"),
+      baseProperty("bravo"),
+      baseProperty("charlie"),
+      baseProperty("delta"),
+    ];
+
+    expect(
+      propertyIds(
+        orderDatabasePropertiesForView(properties, {
+          propertyOrderIds: ["deleted", "charlie", "alpha", "bravo"],
+        }),
+      ),
+    ).toEqual(["charlie", "alpha", "bravo", "delta"]);
+  });
+
+  it("does not reorder from or onto a hidden property", () => {
+    const allProperties = [
+      baseProperty("alpha"),
+      baseProperty("hidden"),
+      baseProperty("bravo"),
+    ];
+    const visibleProperties = [allProperties[0], allProperties[2]];
+
+    expect(
+      reorderDatabaseViewProperty(
+        view,
+        "hidden",
+        "alpha",
+        { allProperties, visibleProperties },
+        "before",
+      ),
+    ).toBe(view);
+  });
+});
+
 const builderRowItem = (id: string): ContentDatabaseItem => ({
   id: `item-${id}`,
   databaseId: "database",

templates/content/app/components/editor/database/DatabaseView.tsx

@@ -993,7 +993,7 @@
   );
   const orderedProperties = useMemo(
     () => orderDatabasePropertiesForView(properties, activeView),
     [properties, activeView],
   );
   const sorts = activeView.sorts;
   const filters = activeView.filters;
@@ -1051,7 +1051,7 @@
       orderedProperties.filter((property) =>
         isDatabasePropertyVisibleInView(property, items, activeView),
       ),
     [orderedProperties, items, activeView],
   );
   const hiddenProperties = useMemo(
     () =>
@@ -1059,7 +1059,7 @@
         (property) =>
           !isDatabasePropertyVisibleInView(property, items, activeView),
       ),
     [orderedProperties, items, activeView],
   );
   const visibleItems = useMemo(
     () =>
@@ -1071,7 +1071,7 @@
         sorts,
         filterMode,
       ),
     [items, properties, searchQuery, filters, sorts, filterMode],
   );
   const screenVisibleItems = useMemo(
     () =>
@@ -1259,7 +1259,7 @@
       if (!acquireDatabaseSourceOperation(refreshSourceInFlightRef, sourceId)) {
         return false;
       }
       refreshSource.mutate(
         {
           documentId: document.id,
           sourceId,
@@ -1277,7 +1277,7 @@
       );
       return true;
     },
     [document.id, refreshSource.mutate],
   );
   const handleBuilderContinuationError = useCallback(
     (continuationKey: string) => {
@@ -1314,7 +1314,7 @@
       }
       const pump = () => {
         let result: ProcessBuilderBodyHydrationResponse | null = null;
         processBuilderBodies.mutate(
           { sourceId, ...request },
           {
             onSuccess: (nextResult) => {
@@ -1343,7 +1343,7 @@
       pump();
       return true;
     },
     [processBuilderBodies.mutate],
   );
 
   useEffect(() => {
@@ -1498,7 +1498,7 @@
       hostDocumentId,
       renderMode,
       source,
       views: viewConfig.views,
       activeView,
       searchQuery,
       sorts,
@@ -2431,6 +2431,14 @@
                 : nextViewConfig,
             );
           },
+          onError: (err) => {
+            toast.error(dbText("failedToSaveView"), {
+              description:
+                err instanceof Error
+                  ? err.message
+                  : dbText("somethingWentWrong"),
+            });
+          },
         },
       );
     }, 350);