Issue 53983: Sort fields by caption

Author: labkey-nicka

packages/components/src/internal/components/ColumnSelectionModal.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 
 import { QueryColumn } from '../../public/QueryColumn';
 import { QueryInfo } from '../../public/QueryInfo';
+import { naturalSortByProperty } from '../../public/sort';
 
 import { Modal, ModalProps } from '../Modal';
 
@@ -219,6 +220,7 @@ export const ColumnChoiceGroup: FC<ColumnChoiceGroupProps> = memo(props => {
             {isLookupExpanded &&
                 expandedColumns[column.index].columns.valueArray
                     .filter(fkCol => expandedColumnFilter?.(fkCol, showAllColumns) ?? true)
+                    .sort(naturalSortByProperty('caption')) // Issue 53983: Sort fields by caption
                     .map(fkCol => (
                         <ColumnChoiceGroup
                             column={fkCol}
@@ -506,7 +508,8 @@ export const ColumnSelectionModal: FC<ColumnSelectionModalProps> = memo(props =>
         if (!isLoaded || !queryInfo) return [];
         return queryInfo.columns.valueArray
             .filter(c => expandedColumnFilter?.(c, showAllColumns) ?? true)
-            .filter(c => c.fieldKeyArray.length === 1); // at the top level don't include lookup fields
+            .filter(c => c.fieldKeyArray.length === 1) // at the top level don't include lookup fields
+            .sort(naturalSortByProperty('caption')); // Issue 53983: Sort fields by caption
     }, [expandedColumnFilter, isLoaded, queryInfo, showAllColumns]);
 
     const disabledMsg = useMemo<string>(() => {

packages/components/src/internal/components/search/QueryFilterPanel.tsx

@@ -9,6 +9,7 @@ import { ChoicesListItem } from '../base/ChoicesListItem';
 
 import { QueryColumn } from '../../../public/QueryColumn';
 import { QueryInfo } from '../../../public/QueryInfo';
+import { naturalSortByProperty } from '../../../public/sort';
 
 import { NOT_ANY_FILTER_TYPE } from '../../url/NotAnyFilterType';
 
@@ -146,7 +147,7 @@ export const QueryFilterPanel: FC<Props> = memo(props => {
         setActiveField(undefined);
         if (!queryInfo) return;
 
-        let validFields;
+        let validFields: QueryColumn[];
         if (fields) validFields = fields;
         else {
             const qFields = skipDefaultViewCheck
@@ -159,6 +160,11 @@ export const QueryFilterPanel: FC<Props> = memo(props => {
             );
         }
 
+        // Issue 53983: Sort fields by caption
+        if (validFields) {
+            validFields = validFields.sort(naturalSortByProperty('caption'));
+        }
+
         setQueryFields(validFields);
         if (fieldKey) {
             const field = validFields.find(f => f.getDisplayFieldKey() === fieldKey);