feat: add ability to override sort field on relationship level

src/components/inputs/select/select.component.tsx

@@ -36,7 +36,7 @@ export interface SelectProps<T> {
   selected?: T;
   options: SelectOption<T>[];
   label?: string;
-  labelVariant?: "default" | "form" | "header";
+  labelVariant?: "default" | "form" | "header" | "small";
   labelPosition?: "default" | "inline";
   placeholder: string | null;
   className?: string;
@@ -84,6 +84,7 @@ export const SelectLabel = <T extends string | number>({
       labelVariant === "default" && "text-sm font-light md:text-base",
       labelVariant === "form" && "block text-sm font-bold",
       labelVariant === "header" && "text-sm md:text-base",
+      labelVariant === "small" && "text-xs text-manatee-300",
     )}
   >
     {labelVariant === "form" ? formatObjectField(label) : label}
@@ -396,7 +397,9 @@ const SelectComponent = <T extends string | number>(
               className={clsx(
                 selectClassName,
                 label && labelPosition === "default" && "mt-2",
-                label && labelPosition === "inline" && "ml-2",
+                label &&
+                  labelPosition === "inline" &&
+                  (labelVariant === "small" ? "ml-1" : "ml-2"),
               )}
               ref={refs.setReference}
             >
@@ -457,15 +460,20 @@ const SelectComponent = <T extends string | number>(
               data-testid="select"
               className={clsx(
                 selectClassName,
+                roundedClassName,
                 sizingClassName,
-                label && "mt-2",
+                label && labelPosition === "default" && "mt-2",
+                label &&
+                  labelPosition === "inline" &&
+                  (labelVariant === "small" ? "ml-1" : "ml-2"),
               )}
               ref={mergeRefs([refs.setReference, propRef])}
             >
               <span
                 className={clsx(
                   "block truncate",
                   !selectedOption?.label && "text-gray-300",
+                  variant === "pill" && "pr-6",
                 )}
               >
                 {selectedOption?.label || placeholder || "Select option"}

src/components/panel/__tests__/tabs/relationships.test.tsx

@@ -73,9 +73,12 @@ describe("relationships view", () => {
 
     await waitFor(() => {
       expect(
-        withinEpisodesRelationship.getByText("Sorted by: Episode number"),
+        withinEpisodesRelationship.getByLabelText("Sorted by:"),
       ).toBeInTheDocument();
     });
+
+    const sortedBy = withinEpisodesRelationship.getByLabelText("Sorted by:");
+    expect(sortedBy).toHaveTextContent("Episode number (Default)");
   });
 
   test("displays the value of the relationship sort field", async () => {

src/components/panel/panel.component.tsx

@@ -33,6 +33,8 @@ import {
   BuiltInSkylarkObjectType,
   GQLSkylarkErrorResponse,
   ParsedSkylarkObjectConfig,
+  ParsedSkylarkRelationshipConfig,
+  ModifiedRelationshipsObject,
 } from "src/interfaces/skylark";
 import { parseMetadataForHTMLForm } from "src/lib/skylark/parsers";
 import {
@@ -274,10 +276,8 @@ export const Panel = ({
     updated: null,
   });
 
-  const [modifiedRelationships, setModifiedRelationships] = useState<Record<
-    string,
-    { added: ParsedSkylarkObject[]; removed: string[] }
-  > | null>(null);
+  const [modifiedRelationships, setModifiedRelationships] =
+    useState<ModifiedRelationshipsObject | null>(null);
 
   const [modifiedAvailabilityObjects, setModifiedAvailabilityObjects] =
     useState<{
@@ -543,13 +543,7 @@ export const Panel = ({
 
   const handleRelationshipsObjectsModified = useCallback(
     (
-      updatedModifiedRelationships: Record<
-        string,
-        {
-          added: ParsedSkylarkObject[];
-          removed: string[];
-        }
-      >,
+      updatedModifiedRelationships: ModifiedRelationshipsObject,
       errors: HandleDropError[],
     ) => {
       setModifiedRelationships(updatedModifiedRelationships);

src/components/panel/panelSections/panelRelationships.component.tsx

@@ -22,6 +22,9 @@
   SkylarkObjectType,
   ParsedSkylarkObject,
   ParsedSkylarkObjectRelationship,
+  ParsedSkylarkRelationshipConfig,
+  ModifiedRelationshipsObject,
+  ModifiedRelationship,
 } from "src/interfaces/skylark";
 import { DragType, DroppableType } from "src/lib/dndkit/dndkit";
 import { formatObjectField, hasProperty } from "src/lib/utils";
@@ -34,12 +37,9 @@
   objectType: SkylarkObjectType;
   uid: string;
   tabState: PanelTabState[PanelTab.Relationships];
-  modifiedRelationships: Record<
-    string,
-    { added: ParsedSkylarkObject[]; removed: string[] }
-  >;
+  modifiedRelationships: ModifiedRelationshipsObject;
   setModifiedRelationships: (
-    rels: Record<string, { added: ParsedSkylarkObject[]; removed: string[] }>,
+    rels: ModifiedRelationshipsObject,
     errors: HandleDropError[],
   ) => void;
   inEditMode: boolean;
@@ -184,10 +184,10 @@
 };
 
 const parseAddedAndRemovedRelationshipObjects = (
-  existing: { added: ParsedSkylarkObject[]; removed: string[] },
+  existing: ModifiedRelationship,
   added: ParsedSkylarkObject[],
   removed: string[],
-) => {
+): ModifiedRelationship => {
   const updatedAdded = added ? [...existing.added, ...added] : existing.added;
   const updatedRemoved = removed
     ? [...existing.removed, ...removed]
@@ -200,6 +200,7 @@
   return {
     added: updatedAdded.filter(({ uid }) => !duplicates.includes(uid)),
     removed: updatedRemoved.filter((uid) => !duplicates.includes(uid)),
+    config: existing.config,
   };
 };
 
@@ -276,7 +277,7 @@
   ) => {
     const relationship = hasProperty(modifiedRelationships, relationshipName)
       ? modifiedRelationships[relationshipName]
-      : { added: [], removed: [] };
+      : { added: [], removed: [], config: {} };
 
     setModifiedRelationships(
       {
@@ -291,6 +292,29 @@
     );
   };
 
+  const modifyRelationshipConfig = (
+    relationshipName: string,
+    config: Partial<ParsedSkylarkRelationshipConfig>,
+  ) => {
+    const relationship = hasProperty(modifiedRelationships, relationshipName)
+      ? modifiedRelationships[relationshipName]
+      : { added: [], removed: [], config: {} };
+
+    setModifiedRelationships(
+      {
+        ...modifiedRelationships,
+        [relationshipName]: {
+          ...relationship,
+          config: {
+            ...relationship.config,
+            ...config,
+          },
+        },
+      },
+      [],
+    );
+  };
+
   const relationshipNames = objectMetaRelationships.map(
     ({ relationshipName }) => relationshipName,
   );
@@ -338,14 +362,20 @@
             orderedRelationships,
             activeRelationship,
           )?.map((relationship) => {
-            const config =
+            const objectTypeDefaultConfig =
               objectTypeRelationshipConfig?.[relationship.name] || null;
 
             return (
               <PanelRelationshipSection
                 key={relationship.name}
                 relationship={relationship}
-                config={config}
+                config={{
+                  objectTypeDefault: objectTypeDefaultConfig,
+                  overrides: {},
+                }}
+                modifiedConfig={
+                  modifiedRelationships?.[relationship.name]?.config
+                }
                 inEditMode={inEditMode}
                 isFetchingMoreRelationships={isFetchingMoreRelationships}
                 newUids={getNewUidsForRelationship(
@@ -364,6 +394,9 @@
                     removed: [uid],
                   });
                 }}
+                updateRelationshipConfig={(
+                  updatedConfig: Partial<ParsedSkylarkRelationshipConfig>,
+                ) => modifyRelationshipConfig(relationship.name, updatedConfig)}
                 setSearchObjectsModalState={setSearchObjectsModalState}
               />
             );
@@ -379,7 +412,7 @@
             emptyOrderedRelationships,
             activeRelationship,
           )?.map((relationship) => {
-            const config =
+            const objectTypeDefaultConfig =
               objectTypeRelationshipConfig?.[relationship.name] || null;
 
             return (
@@ -389,7 +422,13 @@
                 isExpanded={!!activeRelationship}
                 key={relationship.name}
                 relationship={relationship}
-                config={config}
+                config={{
+                  objectTypeDefault: objectTypeDefaultConfig,
+                  overrides: {},
+                }}
+                modifiedConfig={
+                  modifiedRelationships?.[relationship.name]?.config
+                }
                 inEditMode={inEditMode}
                 isFetchingMoreRelationships={isFetchingMoreRelationships}
                 newUids={getNewUidsForRelationship(
@@ -402,6 +441,9 @@
                     removed: [uid],
                   });
                 }}
+                updateRelationshipConfig={(
+                  updatedConfig: Partial<ParsedSkylarkRelationshipConfig>,
+                ) => modifyRelationshipConfig(relationship.name, updatedConfig)}
                 setSearchObjectsModalState={setSearchObjectsModalState}
               />
             );