@atlaskit/link-datasource 5.5.1 → 5.6.1

package/dist/es2019/ui/datasource-table-view/datasource-column-sort.js

@@ -0,0 +1,52 @@
+import { JIRA_LIST_OF_LINKS_DATASOURCE_ID } from '../jira-issues-modal';
+const getNextSortDirection = (columnKey, currentSort) => {
+  if ((currentSort === null || currentSort === void 0 ? void 0 : currentSort.key) !== columnKey) {
+    return 'ASC';
+  }
+  if (currentSort.direction === 'ASC') {
+    return 'DESC';
+  }
+  return undefined;
+};
+// Match and remove an existing trailing ORDER BY clause before appending the next sort:
+// - (?:^|\\s+) allows ORDER BY at the start of the JQL or after whitespace.
+// - ORDER\\s+BY matches ORDER BY with flexible spacing and is case-insensitive (/i).
+// - [\\s\\S]*$ consumes everything after ORDER BY to the end of the JQL.
+// Examples:
+// - "project = TEST ORDER BY created DESC" -> "project = TEST"
+// - "ORDER BY priority ASC" -> ""
+const JIRA_ORDER_BY_PATTERN = /(?:^|\s+)ORDER\s+BY\s+[\s\S]*$/i;
+const getJiraColumnSortParameters = ({
+  parameters,
+  columnKey,
+  currentSort
+}) => {
+  const direction = getNextSortDirection(columnKey, currentSort);
+  if (!direction) {
+    return {
+      parameters,
+      sort: undefined
+    };
+  }
+  if (typeof parameters.jql !== 'string') {
+    return undefined;
+  }
+  const jqlWithoutOrder = parameters.jql.replace(JIRA_ORDER_BY_PATTERN, '').trim();
+  const nextOrderByClause = `ORDER BY ${columnKey} ${direction}`;
+  return {
+    parameters: {
+      ...parameters,
+      jql: [jqlWithoutOrder, nextOrderByClause].filter(Boolean).join(' ')
+    },
+    sort: {
+      key: columnKey,
+      direction
+    }
+  };
+};
+export const getDatasourceColumnSortGetter = datasourceId => {
+  if (datasourceId === JIRA_LIST_OF_LINKS_DATASOURCE_ID) {
+    return getJiraColumnSortParameters;
+  }
+  return undefined;
+};

package/dist/es2019/ui/datasource-table-view/datasourceTableView.js

@@ -1,8 +1,10 @@
 /* datasourceTableView.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./datasourceTableView.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import isEqual from 'lodash/isEqual';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -26,6 +28,7 @@ import { ProviderAuthRequired } from '../common/error-state/provider-auth-requir
 import { IssueLikeDataTableView } from '../issue-like-table';
 import EmptyState from '../issue-like-table/empty-state';
 import { TableFooter } from '../table-footer';
+import { getDatasourceColumnSortGetter } from './datasource-column-sort';
 const containerStyles = null;
 const DefaultScrollableContainerHeight = 590;
 const DatasourceTableViewWithoutAnalytics = ({
@@ -40,6 +43,26 @@ const DatasourceTableViewWithoutAnalytics = ({
   onWrappedColumnChange,
   scrollableContainerHeight = DefaultScrollableContainerHeight
 }) => {
+  // Local copy lets us apply in-session sort mutations without mutating external parameters.
+  const [sessionParameters, setSessionParameters] = useState(parameters);
+  // Tracks the external parameters that the current session/sort state was derived from.
+  const sessionBaseParametersRef = useRef(parameters);
+  const [sortState, setSortState] = useState();
+  const columnSortGetter = getDatasourceColumnSortGetter(datasourceId);
+  // Sorting is only owned by this view when parent callbacks are absent (read-only rendering mode).
+  const isReadOnlyDatasourceTable = !onVisibleColumnKeysChange && !onColumnResize && !onWrappedColumnChange;
+  // Keep sort UI hidden unless datasource + ownership + feature gate all allow it.
+  const shouldEnableColumnSort = !!columnSortGetter && isReadOnlyDatasourceTable && fg('platform_lp_jira_sllv_renderer_column_sorting');
+  useDeepEffect(() => {
+    // External parameter updates should always reset local sort/session state back to source-of-truth.
+    sessionBaseParametersRef.current = parameters;
+    setSessionParameters(parameters);
+    setSortState(undefined);
+  }, [parameters]);
+  const isSessionBasedOnCurrentParameters = isEqual(sessionBaseParametersRef.current, parameters);
+  // Use session parameters only when they are known to be based on the current external parameters.
+  // This avoids a one-render stale read during the deep-effect update cycle above.
+  const activeParameters = isSessionBasedOnCurrentParameters && fg('platform_lp_jira_sllv_renderer_column_sorting') ? sessionParameters : parameters;
   const {
     reset,
     status,
@@ -57,7 +80,7 @@ const DatasourceTableViewWithoutAnalytics = ({
     authDetails
   } = useDatasourceTableState({
     datasourceId,
-    parameters,
+    parameters: activeParameters,
     fieldKeys: visibleColumnKeys
   });
   const isInPDFRender = useIsInPDFRender();
@@ -95,7 +118,7 @@ const DatasourceTableViewWithoutAnalytics = ({
       reset();
     }
     isInitialRender.current = false;
-  }, [reset, parameters]);
+  }, [reset, activeParameters]);
   useEffect(() => {
     if (onVisibleColumnKeysChange && (visibleColumnKeys || []).length === 0 && defaultVisibleColumnKeys.length > 0) {
       onVisibleColumnKeysChange(defaultVisibleColumnKeys);
@@ -141,6 +164,19 @@ const DatasourceTableViewWithoutAnalytics = ({
     });
     forcedReset();
   }, [destinationObjectTypes, extensionKey, fireEvent, forcedReset]);
+  const onColumnSort = useCallback(columnKey => {
+    // Build next params/sort atomically so UI state and query state stay in sync.
+    const result = columnSortGetter === null || columnSortGetter === void 0 ? void 0 : columnSortGetter({
+      parameters: sessionBaseParametersRef.current,
+      columnKey,
+      currentSort: sortState
+    });
+    if (!result) {
+      return;
+    }
+    setSortState(result.sort);
+    setSessionParameters(result.parameters);
+  }, [columnSortGetter, sortState]);
   const handleErrorRefresh = useCallback(() => {
     reset({
       shouldForceRequest: true
@@ -172,7 +208,7 @@ const DatasourceTableViewWithoutAnalytics = ({
     loaderFn: fetchMessagesForLocale
   }, /*#__PURE__*/React.createElement("div", {
     className: ax(["_2rko1kw7", "datasource-table"])
-  }, hasColumns ? /*#__PURE__*/React.createElement(IssueLikeDataTableView, {
+  }, hasColumns ? /*#__PURE__*/React.createElement(IssueLikeDataTableView, _extends({
     testId: 'datasource-table-view',
     hasNextPage: hasNextPage,
     items: responseItems,
@@ -184,12 +220,16 @@ const DatasourceTableViewWithoutAnalytics = ({
     visibleColumnKeys: hasStaleVisibleColumnKeys ? defaultVisibleColumnKeys : visibleColumnKeys || defaultVisibleColumnKeys,
     onVisibleColumnKeysChange: onVisibleColumnKeysChange,
     columnCustomSizes: columnCustomSizes,
-    onColumnResize: onColumnResize,
+    onColumnResize: onColumnResize
+  }, shouldEnableColumnSort && fg('platform_lp_jira_sllv_renderer_column_sorting') ? {
+    onColumnSort,
+    sortState
+  } : {}, {
     wrappedColumnKeys: wrappedColumnKeys,
     onWrappedColumnChange: onWrappedColumnChange,
     scrollableContainerHeight: isInPDFRender ? undefined : fg('lp_enable_datasource-table-view_height_override') ? scrollableContainerHeight : DefaultScrollableContainerHeight,
     extensionKey: extensionKey
-  }) : /*#__PURE__*/React.createElement(EmptyState, {
+  })) : /*#__PURE__*/React.createElement(EmptyState, {
     testId: "datasource-table-view-skeleton",
     isCompact: true
   }), /*#__PURE__*/React.createElement(TableFooter, {

package/dist/es2019/ui/issue-like-table/index.compiled.css

@@ -14,6 +14,7 @@
 .pm-table-wrapper>table thead ._1rmlidpf:last-of-type{border:0}
 .pm-table-wrapper>table thead ._1u3bidpf{border:0}
 .pm-table-wrapper>table thead ._ex0g13hi:last-of-type{background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,var(--ds-elevation-surface-current,#fff) 10%)}
+._1wtnze3t button{padding-block:var(--ds-space-0,0)}
 .ProseMirror .pm-table-wrapper>table tbody ._15lria51{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
 .ProseMirror .pm-table-wrapper>table tbody ._1ho1idpf:last-of-type{border-right:0}
 .ProseMirror .pm-table-wrapper>table tbody ._1xqpia51{border-right:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
@@ -66,6 +67,7 @@ thead.has-column-picker ._10i2idpf:nth-last-of-type(2){border-right:0}.ProseMirr
 .ProseMirror .pm-table-wrapper>table thead ._zjk41if8:last-of-type{position:sticky}
 ._11681tcg [data-testid=datasource-header-content--container]{line-height:24px}
 ._11j11b66 [data-testid=datasource-header-content--container]{padding-right:var(--ds-space-050,4px)}
+._11lvze3t button{padding-left:var(--ds-space-0,0)}
 ._124in7od [data-testid=inline-card-icon-and-title]{white-space:unset}
 ._12pn15vq [data-testid=datasource-header-content--container]{overflow-x:hidden}
 ._12ruusvi:last-of-type{box-sizing:border-box}
@@ -108,7 +110,9 @@ thead.has-column-picker ._10i2idpf:nth-last-of-type(2){border-right:0}.ProseMirr
 ._btyzidpf{border-spacing:0}
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._ficf1e5h button{text-align:left}
 ._iscccj1k [data-testid=datasource-header-content--container]{display:-webkit-box}
+._jq8g1wug button{height:auto}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._kqsw1if8{position:sticky}
 ._kqswh2mm{position:relative}
@@ -130,6 +134,7 @@ thead.has-column-picker ._10i2idpf:nth-last-of-type(2){border-right:0}.ProseMirr
 ._vchh1ntv{box-sizing:content-box}
 ._vchhusvi{box-sizing:border-box}
 ._vwz41tcg{line-height:24px}
+._yhjm1b66 button{padding-right:var(--ds-space-050,4px)}
 ._yq5hus1c{border-collapse:separate}
 .pm-table-wrapper>table tbody ._18a21kw7{vertical-align:inherit}
 .pm-table-wrapper>table tbody ._1h12ze3t{padding-right:var(--ds-space-0,0)}

package/dist/es2019/ui/issue-like-table/index.js

@@ -7,9 +7,14 @@ import { ax, ix } from "@compiled/react/runtime";
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
 import invariant from 'tiny-invariant';
+import Button from '@atlaskit/button/new';
 import { FlagsProvider } from '@atlaskit/flag';
+import SortAscendingIcon from '@atlaskit/icon/core/sort-ascending';
+import SortDescendingIcon from '@atlaskit/icon/core/sort-descending';
 import { Skeleton } from '@atlaskit/linking-common';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
@@ -24,6 +29,7 @@ import { ColumnPicker } from './column-picker';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
+import { issueLikeTableMessages } from './messages';
 import { renderType } from './render-type';
 import { TableCellContent } from './table-cell-content';
 import { useIsOnScreen } from './useIsOnScreen';
@@ -115,6 +121,22 @@ const tableStyles = null;
 const noDefaultBorderStyles = null;
 const headerStyles = null;
 const headingHoverEffectStyles = null;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Matches DraggableTableHeading button normalization.
+const SortableHeaderParent = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1e0c1txw _4cvr1h6o _o5721q9c _1wtnze3t _ficf1e5h _jq8g1wug _11lvze3t _yhjm1b66", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  SortableHeaderParent.displayName = 'SortableHeaderParent';
+}
 function extractIndex(data) {
   const {
     index
@@ -171,14 +193,19 @@ export const IssueLikeDataTableView = ({
   onVisibleColumnKeysChange,
   columnCustomSizes,
   onColumnResize,
+  onColumnSort,
   wrappedColumnKeys,
   onWrappedColumnChange,
+  sortState,
   status,
   hasNextPage,
   scrollableContainerHeight,
   extensionKey
 }) => {
   var _containerRef$current;
+  const {
+    formatMessage
+  } = useIntl();
   const tableId = useMemo(() => Symbol('unique-id'), []);
   const experienceId = useDatasourceExperienceId();
   const tableHeaderRowRef = useRef(null);
@@ -241,7 +268,8 @@ export const IssueLikeDataTableView = ({
         height: 14,
         testId: "issues-table-row-loading"
       })),
-      key: column.key
+      key: column.key,
+      width: column.width
     }))
   }), [headerColumns]);
   useEffect(() => {
@@ -363,10 +391,25 @@ export const IssueLikeDataTableView = ({
       ref: rowIndex === items.length - 1 ? el => setLastRowElement(el) : undefined
     };
   }), [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth]);
+  const previousRealRowsCountRef = useRef(undefined);
+  useEffect(() => {
+    if (tableRows.length > 0) {
+      previousRealRowsCountRef.current = tableRows.length;
+    }
+  }, [tableRows.length]);
   const rows = useMemo(() => {
-    if (status !== 'loading') {
-      return tableRows;
+    if (fg('platform_lp_jira_sllv_renderer_column_sorting')) {
+      const hasPreviousRealRows = !!previousRealRowsCountRef.current;
+      const isLoadingState = status === 'loading' || status === 'empty' && hasPreviousRealRows;
+      if (!isLoadingState) {
+        return tableRows;
+      }
+    } else {
+      if (status !== 'loading') {
+        return tableRows;
+      }
     }
+
     // if there are table rows, only add 1 loading row
     if (tableRows.length > 0) {
       return [...tableRows, {
@@ -376,7 +419,15 @@ export const IssueLikeDataTableView = ({
     }
     // if there are no table rows add 14 rows if it is compact (has scrollableContainerHeight or non-modal)
     // add 10 rows if it is modal (no scrollableContainerHeight)
-    const loadingRowsCount = scrollableContainerHeight ? 14 : 10;
+    let loadingRowsCount = scrollableContainerHeight ? 14 : 10;
+    if (fg('platform_lp_jira_sllv_renderer_column_sorting')) {
+      const defaultLoadingRowsCount = scrollableContainerHeight ? 14 : 10;
+      const previousRealRowsCount = previousRealRowsCountRef.current;
+      loadingRowsCount = defaultLoadingRowsCount;
+      if (previousRealRowsCount && previousRealRowsCount < defaultLoadingRowsCount) {
+        loadingRowsCount = previousRealRowsCount;
+      }
+    }
     return [...Array(loadingRowsCount)].map((_, index) => ({
       ...loadingRow,
       key: `loading-${index}`
@@ -405,6 +456,9 @@ export const IssueLikeDataTableView = ({
     }
   }, [experienceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
   const isEditable = onVisibleColumnKeysChange && hasData;
+  // Sorting is enabled only when the table owns the header interaction (read-only mode).
+  // Editable tables reserve header interactions for drag/resize/wrap controls.
+  const shouldEnableColumnSort = !!onColumnSort && !onVisibleColumnKeysChange && !onColumnResize && !onWrappedColumnChange;
   const orderedColumnsAreUpToDate = orderedColumns.length === columns.length;
   const shouldDisplayColumnsInPicker = hasFullSchema && orderedColumnsAreUpToDate;
   const view = /*#__PURE__*/React.createElement("div", {
@@ -449,7 +503,30 @@ export const IssueLikeDataTableView = ({
       className: ax(["_11c8wadc _k48p1wq8"])
     }, content));
     const isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
-    if (isHeadingOutsideButton) {
+    if (shouldEnableColumnSort) {
+      const sortedDirection = (sortState === null || sortState === void 0 ? void 0 : sortState.key) === key ? sortState.direction : undefined;
+      // Use directional icon only for the active sort column; keep width stable otherwise.
+      const SortIcon = sortedDirection ? sortedDirection === 'ASC' ? SortAscendingIcon : SortDescendingIcon : null;
+      const sortLabel = typeof content === 'string' ? content : key;
+      const sortButtonAriaLabel = sortedDirection === 'ASC' ? formatMessage(issueLikeTableMessages.sortByColumnDescendingAction, {
+        column: sortLabel
+      }) : formatMessage(issueLikeTableMessages.sortByColumnAscendingAction, {
+        column: sortLabel
+      });
+      heading = /*#__PURE__*/React.createElement(SortableHeaderParent, null, /*#__PURE__*/React.createElement(Button, _extends({
+        appearance: "subtle",
+        spacing: "compact",
+        shouldFitContainer: true,
+        testId: `${key}-column-sort-button`,
+        "aria-label": sortButtonAriaLabel
+      }, SortIcon ? {
+        iconAfter: iconProps => /*#__PURE__*/React.createElement(SortIcon, _extends({}, iconProps, {
+          size: "small"
+        }))
+      } : {}, {
+        onClick: () => onColumnSort === null || onColumnSort === void 0 ? void 0 : onColumnSort(key)
+      }), heading));
+    } else if (isHeadingOutsideButton) {
       heading = /*#__PURE__*/React.createElement("div", {
         className: ax(["_1e0c1txw _4cvr1h6o _o5721q9c _8vu418qm _irr3l4ek"])
       }, heading);
@@ -483,16 +560,18 @@ export const IssueLikeDataTableView = ({
         onIsWrappedChange: onWrappedColumnChange === null || onWrappedColumnChange === void 0 ? void 0 : onWrappedColumnChange.bind(null, key)
       }, heading);
     } else {
-      return /*#__PURE__*/React.createElement(TableHeading, {
+      return /*#__PURE__*/React.createElement(TableHeading, _extends({
         key: key,
         "data-testid": `${key}-column-heading`
+      }, fg('platform_lp_jira_sllv_renderer_column_sorting') ? {
+        'aria-sort': (sortState === null || sortState === void 0 ? void 0 : sortState.key) === key && sortState.direction === 'ASC' ? 'ascending' : (sortState === null || sortState === void 0 ? void 0 : sortState.key) === key && sortState.direction === 'DESC' ? 'descending' : undefined
+      } : {}, {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        ,
         style: getWidthCss({
           shouldUseWidth,
           width
         })
-      }, heading);
+      }), heading);
     }
   }), onVisibleColumnKeysChange && /*#__PURE__*/React.createElement(ColumnPickerHeader, null, /*#__PURE__*/React.createElement(ColumnPicker, {
     columns: shouldDisplayColumnsInPicker ? orderedColumns : [],

package/dist/es2019/ui/issue-like-table/messages.js

@@ -40,6 +40,16 @@ export const issueLikeTableMessages = defineMessages({
     description: 'Table header Dropdown item for making whole column to not wrap text',
     defaultMessage: 'Unwrap text'
   },
+  sortByColumnAscendingAction: {
+    id: 'linkDataSource.issue-line-table.sort-by-column-ascending-action',
+    description: 'Accessible label for sorting a table column in ascending order',
+    defaultMessage: 'Sort by {column} ascending.'
+  },
+  sortByColumnDescendingAction: {
+    id: 'linkDataSource.issue-line-table.sort-by-column-descending-action',
+    description: 'Accessible label for sorting a table column in descending order',
+    defaultMessage: 'Sort by {column} descending.'
+  },
   fetchActionErrorGenericDescriptionGalaxia: {
     id: 'linkDataSource.issue-line-table.fetch-action-error-generic-description-galaxia',
     description: 'Generic error message description shown when fetching inline edit dropdown field fails',

package/dist/esm/ui/datasource-table-view/datasource-column-sort.js

@@ -0,0 +1,53 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { JIRA_LIST_OF_LINKS_DATASOURCE_ID } from '../jira-issues-modal';
+var getNextSortDirection = function getNextSortDirection(columnKey, currentSort) {
+  if ((currentSort === null || currentSort === void 0 ? void 0 : currentSort.key) !== columnKey) {
+    return 'ASC';
+  }
+  if (currentSort.direction === 'ASC') {
+    return 'DESC';
+  }
+  return undefined;
+};
+// Match and remove an existing trailing ORDER BY clause before appending the next sort:
+// - (?:^|\\s+) allows ORDER BY at the start of the JQL or after whitespace.
+// - ORDER\\s+BY matches ORDER BY with flexible spacing and is case-insensitive (/i).
+// - [\\s\\S]*$ consumes everything after ORDER BY to the end of the JQL.
+// Examples:
+// - "project = TEST ORDER BY created DESC" -> "project = TEST"
+// - "ORDER BY priority ASC" -> ""
+var JIRA_ORDER_BY_PATTERN = /(?:^|\s+)ORDER\s+BY\s+[\s\S]*$/i;
+var getJiraColumnSortParameters = function getJiraColumnSortParameters(_ref) {
+  var parameters = _ref.parameters,
+    columnKey = _ref.columnKey,
+    currentSort = _ref.currentSort;
+  var direction = getNextSortDirection(columnKey, currentSort);
+  if (!direction) {
+    return {
+      parameters: parameters,
+      sort: undefined
+    };
+  }
+  if (typeof parameters.jql !== 'string') {
+    return undefined;
+  }
+  var jqlWithoutOrder = parameters.jql.replace(JIRA_ORDER_BY_PATTERN, '').trim();
+  var nextOrderByClause = "ORDER BY ".concat(columnKey, " ").concat(direction);
+  return {
+    parameters: _objectSpread(_objectSpread({}, parameters), {}, {
+      jql: [jqlWithoutOrder, nextOrderByClause].filter(Boolean).join(' ')
+    }),
+    sort: {
+      key: columnKey,
+      direction: direction
+    }
+  };
+};
+export var getDatasourceColumnSortGetter = function getDatasourceColumnSortGetter(datasourceId) {
+  if (datasourceId === JIRA_LIST_OF_LINKS_DATASOURCE_ID) {
+    return getJiraColumnSortParameters;
+  }
+  return undefined;
+};

package/dist/esm/ui/datasource-table-view/datasourceTableView.js

@@ -1,8 +1,11 @@
 /* datasourceTableView.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./datasourceTableView.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import isEqual from 'lodash/isEqual';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -26,6 +29,7 @@ import { ProviderAuthRequired } from '../common/error-state/provider-auth-requir
 import { IssueLikeDataTableView } from '../issue-like-table';
 import EmptyState from '../issue-like-table/empty-state';
 import { TableFooter } from '../table-footer';
+import { getDatasourceColumnSortGetter } from './datasource-column-sort';
 var containerStyles = null;
 var DefaultScrollableContainerHeight = 590;
 var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAnalytics(_ref) {
@@ -40,9 +44,35 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     onWrappedColumnChange = _ref.onWrappedColumnChange,
     _ref$scrollableContai = _ref.scrollableContainerHeight,
     scrollableContainerHeight = _ref$scrollableContai === void 0 ? DefaultScrollableContainerHeight : _ref$scrollableContai;
+  // Local copy lets us apply in-session sort mutations without mutating external parameters.
+  var _useState = useState(parameters),
+    _useState2 = _slicedToArray(_useState, 2),
+    sessionParameters = _useState2[0],
+    setSessionParameters = _useState2[1];
+  // Tracks the external parameters that the current session/sort state was derived from.
+  var sessionBaseParametersRef = useRef(parameters);
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    sortState = _useState4[0],
+    setSortState = _useState4[1];
+  var columnSortGetter = getDatasourceColumnSortGetter(datasourceId);
+  // Sorting is only owned by this view when parent callbacks are absent (read-only rendering mode).
+  var isReadOnlyDatasourceTable = !onVisibleColumnKeysChange && !onColumnResize && !onWrappedColumnChange;
+  // Keep sort UI hidden unless datasource + ownership + feature gate all allow it.
+  var shouldEnableColumnSort = !!columnSortGetter && isReadOnlyDatasourceTable && fg('platform_lp_jira_sllv_renderer_column_sorting');
+  useDeepEffect(function () {
+    // External parameter updates should always reset local sort/session state back to source-of-truth.
+    sessionBaseParametersRef.current = parameters;
+    setSessionParameters(parameters);
+    setSortState(undefined);
+  }, [parameters]);
+  var isSessionBasedOnCurrentParameters = isEqual(sessionBaseParametersRef.current, parameters);
+  // Use session parameters only when they are known to be based on the current external parameters.
+  // This avoids a one-render stale read during the deep-effect update cycle above.
+  var activeParameters = isSessionBasedOnCurrentParameters && fg('platform_lp_jira_sllv_renderer_column_sorting') ? sessionParameters : parameters;
   var _useDatasourceTableSt = useDatasourceTableState({
       datasourceId: datasourceId,
-      parameters: parameters,
+      parameters: activeParameters,
       fieldKeys: visibleColumnKeys
     }),
     reset = _useDatasourceTableSt.reset,
@@ -98,7 +128,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       reset();
     }
     isInitialRender.current = false;
-  }, [reset, parameters]);
+  }, [reset, activeParameters]);
   useEffect(function () {
     if (onVisibleColumnKeysChange && (visibleColumnKeys || []).length === 0 && defaultVisibleColumnKeys.length > 0) {
       onVisibleColumnKeysChange(defaultVisibleColumnKeys);
@@ -144,6 +174,19 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     });
     forcedReset();
   }, [destinationObjectTypes, extensionKey, fireEvent, forcedReset]);
+  var onColumnSort = useCallback(function (columnKey) {
+    // Build next params/sort atomically so UI state and query state stay in sync.
+    var result = columnSortGetter === null || columnSortGetter === void 0 ? void 0 : columnSortGetter({
+      parameters: sessionBaseParametersRef.current,
+      columnKey: columnKey,
+      currentSort: sortState
+    });
+    if (!result) {
+      return;
+    }
+    setSortState(result.sort);
+    setSessionParameters(result.parameters);
+  }, [columnSortGetter, sortState]);
   var handleErrorRefresh = useCallback(function () {
     reset({
       shouldForceRequest: true
@@ -175,7 +218,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     loaderFn: fetchMessagesForLocale
   }, /*#__PURE__*/React.createElement("div", {
     className: ax(["_2rko1kw7", "datasource-table"])
-  }, hasColumns ? /*#__PURE__*/React.createElement(IssueLikeDataTableView, {
+  }, hasColumns ? /*#__PURE__*/React.createElement(IssueLikeDataTableView, _extends({
     testId: 'datasource-table-view',
     hasNextPage: hasNextPage,
     items: responseItems,
@@ -187,12 +230,16 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     visibleColumnKeys: hasStaleVisibleColumnKeys ? defaultVisibleColumnKeys : visibleColumnKeys || defaultVisibleColumnKeys,
     onVisibleColumnKeysChange: onVisibleColumnKeysChange,
     columnCustomSizes: columnCustomSizes,
-    onColumnResize: onColumnResize,
+    onColumnResize: onColumnResize
+  }, shouldEnableColumnSort && fg('platform_lp_jira_sllv_renderer_column_sorting') ? {
+    onColumnSort: onColumnSort,
+    sortState: sortState
+  } : {}, {
     wrappedColumnKeys: wrappedColumnKeys,
     onWrappedColumnChange: onWrappedColumnChange,
     scrollableContainerHeight: isInPDFRender ? undefined : fg('lp_enable_datasource-table-view_height_override') ? scrollableContainerHeight : DefaultScrollableContainerHeight,
     extensionKey: extensionKey
-  }) : /*#__PURE__*/React.createElement(EmptyState, {
+  })) : /*#__PURE__*/React.createElement(EmptyState, {
     testId: "datasource-table-view-skeleton",
     isCompact: true
   }), /*#__PURE__*/React.createElement(TableFooter, {

package/dist/esm/ui/issue-like-table/index.compiled.css

@@ -14,6 +14,7 @@
 .pm-table-wrapper>table thead ._1rmlidpf:last-of-type{border:0}
 .pm-table-wrapper>table thead ._1u3bidpf{border:0}
 .pm-table-wrapper>table thead ._ex0g13hi:last-of-type{background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,var(--ds-elevation-surface-current,#fff) 10%)}
+._1wtnze3t button{padding-block:var(--ds-space-0,0)}
 .ProseMirror .pm-table-wrapper>table tbody ._15lria51{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
 .ProseMirror .pm-table-wrapper>table tbody ._1ho1idpf:last-of-type{border-right:0}
 .ProseMirror .pm-table-wrapper>table tbody ._1xqpia51{border-right:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
@@ -66,6 +67,7 @@ thead.has-column-picker ._10i2idpf:nth-last-of-type(2){border-right:0}.ProseMirr
 .ProseMirror .pm-table-wrapper>table thead ._zjk41if8:last-of-type{position:sticky}
 ._11681tcg [data-testid=datasource-header-content--container]{line-height:24px}
 ._11j11b66 [data-testid=datasource-header-content--container]{padding-right:var(--ds-space-050,4px)}
+._11lvze3t button{padding-left:var(--ds-space-0,0)}
 ._124in7od [data-testid=inline-card-icon-and-title]{white-space:unset}
 ._12pn15vq [data-testid=datasource-header-content--container]{overflow-x:hidden}
 ._12ruusvi:last-of-type{box-sizing:border-box}
@@ -108,7 +110,9 @@ thead.has-column-picker ._10i2idpf:nth-last-of-type(2){border-right:0}.ProseMirr
 ._btyzidpf{border-spacing:0}
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._ficf1e5h button{text-align:left}
 ._iscccj1k [data-testid=datasource-header-content--container]{display:-webkit-box}
+._jq8g1wug button{height:auto}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._kqsw1if8{position:sticky}
 ._kqswh2mm{position:relative}
@@ -130,6 +134,7 @@ thead.has-column-picker ._10i2idpf:nth-last-of-type(2){border-right:0}.ProseMirr
 ._vchh1ntv{box-sizing:content-box}
 ._vchhusvi{box-sizing:border-box}
 ._vwz41tcg{line-height:24px}
+._yhjm1b66 button{padding-right:var(--ds-space-050,4px)}
 ._yq5hus1c{border-collapse:separate}
 .pm-table-wrapper>table tbody ._18a21kw7{vertical-align:inherit}
 .pm-table-wrapper>table tbody ._1h12ze3t{padding-right:var(--ds-space-0,0)}