Query: sort columns where name starts with '+'

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.16.0",
+  "version": "7.16.1-fb-sort-plus-442.1",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

packages/components/src/internal/renderers.tsx

@@ -47,6 +47,7 @@ import { usePortalRef } from './hooks';
 import { MenuDivider, MenuItem } from './dropdowns';
 import { LabelOverlay } from './components/forms/LabelOverlay';
 import { DOMAIN_FIELD } from './components/forms/DomainFieldHelpTipContents';
+import { SORT_ASC, SORT_DESC } from '../public/QuerySort';
 
 export function isFilterColumnNameMatch(filter: Filter.IFilter, col: QueryColumn): boolean {
     return filter.getColumnName() === col.name || filter.getColumnName() === col.resolveFieldKey();
@@ -108,11 +109,11 @@ export const EditableColumnTitle: FC<EditableColumnTitleProps> = memo(props => {
         return (
             <input
                 autoFocus
-                ref={titleInput}
                 defaultValue={title}
-                onKeyDown={onKeyDown}
-                onChange={onTitleChange}
                 onBlur={onEditFinish}
+                onChange={onTitleChange}
+                onKeyDown={onKeyDown}
+                ref={titleInput}
             />
         );
     }
@@ -318,8 +319,8 @@ const HeaderCellDropdownMenu: FC<HeaderCellDropdownMenuProps> = memo(props => {
                     )}
                     <DisableableMenuItem
                         disabled={!(handleHideColumn && !!model)}
-                        onClick={hideColumn}
                         disabledMessage={APP_FIELD_CANNOT_BE_REMOVED_MESSAGE}
+                        onClick={hideColumn}
                     >
                         <span className="fa fa-eye-slash grid-panel__menu-icon" />
                         Hide Column
@@ -397,18 +398,19 @@ export const HeaderCellDropdown: FC<HeaderCellDropdownProps> = memo(props => {
     const colQuerySortDir =
         model?.sorts?.find(sort => sort.fieldKey === queryColumn.resolveFieldKey())?.dir ??
         view?.sorts?.find(sort => sort.fieldKey === queryColumn.resolveFieldKey())?.dir;
-    const isSortAsc = queryColumn.sorts === '+' || colQuerySortDir === '+' || colQuerySortDir === '';
-    const isSortDesc = queryColumn.sorts === '-' || colQuerySortDir === '-';
+    const sortDir = queryColumn.sorts || colQuerySortDir;
+    const isSortAsc = sortDir === SORT_ASC;
+    const isSortDesc = sortDir === SORT_DESC;
 
     return (
         <div className={GRID_HEADER_CELL_BODY} onClick={click}>
             <div className="grid-header-cell__title-wrapper">
                 <EditableColumnTitle
                     column={queryColumn}
-                    onChange={onColumnTitleUpdate}
                     editing={editingTitle}
-                    onCancel={cancelEditTitle}
                     hideToolTip={!!column.helpTipRenderer}
+                    onCancel={cancelEditTitle}
+                    onChange={onColumnTitleUpdate}
                 />
 
                 {!editingTitle && colFilters?.length > 0 && (
@@ -426,10 +428,10 @@ export const HeaderCellDropdown: FC<HeaderCellDropdownProps> = memo(props => {
                 {!editingTitle && column.helpTipRenderer && (
                     <LabelHelpTip
                         placement="bottom"
-                        title={column.title}
                         popoverClassName={column.helpTipRenderer === DOMAIN_FIELD ? undefined : 'label-help-arrow-left'}
+                        title={column.title}
                     >
-                        <HelpTipRenderer type={column.helpTipRenderer} column={queryColumn} />
+                        <HelpTipRenderer column={queryColumn} type={column.helpTipRenderer} />
                     </LabelHelpTip>
                 )}
             </div>
@@ -445,8 +447,8 @@ export const HeaderCellDropdown: FC<HeaderCellDropdownProps> = memo(props => {
                     isSortAsc={isSortAsc}
                     isSortDesc={isSortDesc}
                     model={model}
-                    open={open}
                     onEditTitleClicked={editTitle}
+                    open={open}
                     queryColumn={queryColumn}
                     setOpen={setOpen}
                 />
@@ -476,8 +478,8 @@ export const HeaderSelectionCell: FC<HeaderSelectionCellProps> = memo(props => {
 
     return (
         <input
-            className={className}
             checked={selectedState === GRID_CHECKBOX_OPTIONS.ALL}
+            className={className}
             disabled={disabled}
             onChange={handleSelection}
             ref={checkboxRef}

packages/components/src/public/QueryColumn.ts

@@ -19,6 +19,7 @@ import { SAMPLES_WITH_TYPES_FILTER } from '../internal/components/samples/consta
 import { SchemaQuery } from './SchemaQuery';
 import { IQueryColumn } from './IQueryColumn';
 import { PropDescType } from '../internal/components/domainproperties/PropDescType';
+import { SortDirection } from './QuerySort';
 
 export enum Operation {
     insert = 'insert',
@@ -189,7 +190,7 @@ export class QueryColumn implements IQueryColumn {
     declare detailRenderer: string;
     declare helpTipRenderer: string;
     declare inputRenderer: string;
-    declare sorts: '+' | '-';
+    declare sorts: SortDirection;
     declare removeFromViews: boolean; // strips this column from all ViewInfo definitions
     declare removeFromFormInput: boolean; // strips this column from QueryFormInputs
     declare units: string;

packages/components/src/public/QueryModel/GridPanel.tsx

@@ -11,7 +11,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 import { fromJS, List, Map, Set } from 'immutable';
-import { Filter, getServerContext, Query } from '@labkey/api';
+import { Filter, Query } from '@labkey/api';
 
 import { EXPORT_TYPES, GRID_CHECKBOX_OPTIONS, GRID_SELECTION_INDEX } from '../../internal/constants';
 import { HeaderCellDropdown, HeaderSelectionCell, isFilterColumnNameMatch } from '../../internal/renderers';
@@ -25,15 +25,15 @@ import {
     saveSessionView,
 } from '../../internal/actions';
 
-import { hasServerContext, useServerContext } from '../../internal/components/base/ServerContext';
+import { useServerContext } from '../../internal/components/base/ServerContext';
 
 import { Pagination } from '../../internal/components/pagination/Pagination';
 
 import { ViewInfo } from '../../internal/ViewInfo';
 
 import { QueryColumn } from '../QueryColumn';
 
-import { QuerySort } from '../QuerySort';
+import { QuerySort, SortDirection } from '../QuerySort';
 
 import { GridColumn } from '../../internal/components/base/models/GridColumn';
 
@@ -711,12 +711,11 @@ export class GridPanel<T = {}> extends PureComponent<Props<T>, State> {
         this.setState({ showFilterModalFieldKey: undefined });
     };
 
-    sortColumn = (column: QueryColumn, direction?: string): void => {
+    sortColumn = (column: QueryColumn, direction?: SortDirection): void => {
         const fieldKey = column.resolveFieldKey(); // resolveFieldKey because of Issue 34627
 
         if (direction) {
-            const dir = direction === '+' ? '' : '-'; // Sort Action only uses '-' and ''
-            const sort = new QuerySort({ fieldKey, dir });
+            const sort = new QuerySort({ dir: direction, fieldKey });
             this.handleSortChange({ type: ChangeType.add }, sort);
         } else {
             const actionIndex = this.state.actionValues.findIndex(

packages/components/src/public/QueryModel/QueryModel.test.ts

@@ -140,7 +140,7 @@ describe('QueryModel', () => {
         let model = new QueryModel({ schemaQuery: SCHEMA_QUERY, sorts });
         expect(() => model.sortString).toThrow('Cannot construct sort string, no QueryInfo available');
         model = model.mutate({ queryInfo: QUERY_INFO });
-        expect(model.sortString).toEqual('-RowId,Data');
+        expect(model.sortString).toEqual('-RowId,+Data');
     });
 
     test('Columns', () => {

packages/components/src/public/QueryModel/QueryModel.ts

@@ -59,16 +59,8 @@ function offsetFromString(rowsPerPage: number, pageStr: string): number {
     return offset >= 0 ? offset : 0;
 }
 
-export function querySortFromString(sortStr: string): QuerySort {
-    if (sortStr.startsWith('-')) {
-        return new QuerySort({ dir: '-', fieldKey: sortStr.slice(1) });
-    } else {
-        return new QuerySort({ fieldKey: sortStr });
-    }
-}
-
 function querySortsFromString(sortsStr: string): QuerySort[] {
-    return sortsStr?.split(',').map(querySortFromString);
+    return sortsStr?.split(',').map(QuerySort.fromString);
 }
 
 function searchFiltersFromString(searchStr: string): Filter.IFilter[] {
@@ -1281,7 +1273,7 @@ export function getSettingsFromLocalStorage(id: string, containerPath: string):
     const filterArray = savedSettings.filterArray?.map(f =>
         Filter.create(f.columnName, f.value, Filter.getFilterTypeForURLSuffix(f.type))
     );
-    const sorts = savedSettings.sorts?.map(s => querySortFromString(s));
+    const sorts = savedSettings.sorts?.map(QuerySort.fromString);
 
     return {
         filterArray: filterArray ?? [],

packages/components/src/public/QuerySort.ts

@@ -1,18 +1,33 @@
+export const SORT_ASC = '+';
+export const SORT_DESC = '-';
+
+export type SortDirection = typeof SORT_ASC | typeof SORT_DESC;
+
 export interface QuerySortJson {
-    dir: string;
+    dir?: SortDirection;
     fieldKey: string;
 }
 
 export class QuerySort implements QuerySortJson {
-    declare dir: string;
-    declare fieldKey: string;
+    public dir?: SortDirection;
+    public fieldKey: string;
+
+    static fromString(sortStr: string): QuerySort {
+        if (sortStr.startsWith(SORT_DESC)) {
+            return new QuerySort({ dir: SORT_DESC, fieldKey: sortStr.slice(1) });
+        } else if (sortStr.startsWith(SORT_ASC)) {
+            return new QuerySort({ dir: SORT_ASC, fieldKey: sortStr.slice(1) });
+        }
+
+        return new QuerySort({ fieldKey: sortStr });
+    }
 
     constructor(props: Partial<QuerySort>) {
-        Object.assign(this, { dir: '' }, props);
+        this.dir = props.dir === SORT_DESC ? SORT_DESC : SORT_ASC;
+        this.fieldKey = props.fieldKey;
     }
 
     toRequestString(): string {
-        const { dir, fieldKey } = this;
-        return dir === '-' ? '-' + fieldKey : fieldKey;
+        return `${this.dir}${this.fieldKey}`;
     }
 }