@atlaskit/link-datasource 5.5.1 → 5.6.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/link-datasource
 
+## 5.6.1
+
+### Patch Changes
+
+- [`c7fb26d1c5d03`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c7fb26d1c5d03) -
+  Fixing read-only SLLV sorting problems with default type losing the label visually and introducing
+  third state of sorting - going back to default
+
+## 5.6.0
+
+### Minor Changes
+
+- [`5700d1a0bb7b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5700d1a0bb7b0) -
+  [ux] Add sortable columns to read only (Renderer) view without persistance
+
 ## 5.5.1
 
 ### Patch Changes

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

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDatasourceColumnSortGetter = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _jiraIssuesModal = require("../jira-issues-modal");
+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) { (0, _defineProperty2.default)(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; }
+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
+    }
+  };
+};
+var getDatasourceColumnSortGetter = exports.getDatasourceColumnSortGetter = function getDatasourceColumnSortGetter(datasourceId) {
+  if (datasourceId === _jiraIssuesModal.JIRA_LIST_OF_LINKS_DATASOURCE_ID) {
+    return getJiraColumnSortParameters;
+  }
+  return undefined;
+};

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

@@ -11,6 +11,9 @@ require("./datasourceTableView.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -34,6 +37,7 @@ var _providerAuthRequired = require("../common/error-state/provider-auth-require
 var _issueLikeTable = require("../issue-like-table");
 var _emptyState = _interopRequireDefault(require("../issue-like-table/empty-state"));
 var _tableFooter = require("../table-footer");
+var _datasourceColumnSort = require("./datasource-column-sort");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var containerStyles = null;
 var DefaultScrollableContainerHeight = 590;
@@ -49,9 +53,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 = (0, _react.useState)(parameters),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    sessionParameters = _useState2[0],
+    setSessionParameters = _useState2[1];
+  // Tracks the external parameters that the current session/sort state was derived from.
+  var sessionBaseParametersRef = (0, _react.useRef)(parameters);
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    sortState = _useState4[0],
+    setSortState = _useState4[1];
+  var columnSortGetter = (0, _datasourceColumnSort.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 && (0, _platformFeatureFlags.fg)('platform_lp_jira_sllv_renderer_column_sorting');
+  (0, _useDeepEffect.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 = (0, _isEqual.default)(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 && (0, _platformFeatureFlags.fg)('platform_lp_jira_sllv_renderer_column_sorting') ? sessionParameters : parameters;
   var _useDatasourceTableSt = (0, _useDatasourceTableState.useDatasourceTableState)({
       datasourceId: datasourceId,
-      parameters: parameters,
+      parameters: activeParameters,
       fieldKeys: visibleColumnKeys
     }),
     reset = _useDatasourceTableSt.reset,
@@ -107,7 +137,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       reset();
     }
     isInitialRender.current = false;
-  }, [reset, parameters]);
+  }, [reset, activeParameters]);
   (0, _react.useEffect)(function () {
     if (onVisibleColumnKeysChange && (visibleColumnKeys || []).length === 0 && defaultVisibleColumnKeys.length > 0) {
       onVisibleColumnKeysChange(defaultVisibleColumnKeys);
@@ -153,6 +183,19 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     });
     forcedReset();
   }, [destinationObjectTypes, extensionKey, fireEvent, forcedReset]);
+  var onColumnSort = (0, _react.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 = (0, _react.useCallback)(function () {
     reset({
       shouldForceRequest: true
@@ -184,7 +227,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     loaderFn: _fetchMessagesForLocale.fetchMessagesForLocale
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_2rko1kw7", "datasource-table"])
-  }, hasColumns ? /*#__PURE__*/React.createElement(_issueLikeTable.IssueLikeDataTableView, {
+  }, hasColumns ? /*#__PURE__*/React.createElement(_issueLikeTable.IssueLikeDataTableView, (0, _extends2.default)({
     testId: 'datasource-table-view',
     hasNextPage: hasNextPage,
     items: responseItems,
@@ -196,12 +239,16 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     visibleColumnKeys: hasStaleVisibleColumnKeys ? defaultVisibleColumnKeys : visibleColumnKeys || defaultVisibleColumnKeys,
     onVisibleColumnKeysChange: onVisibleColumnKeysChange,
     columnCustomSizes: columnCustomSizes,
-    onColumnResize: onColumnResize,
+    onColumnResize: onColumnResize
+  }, shouldEnableColumnSort && (0, _platformFeatureFlags.fg)('platform_lp_jira_sllv_renderer_column_sorting') ? {
+    onColumnSort: onColumnSort,
+    sortState: sortState
+  } : {}, {
     wrappedColumnKeys: wrappedColumnKeys,
     onWrappedColumnChange: onWrappedColumnChange,
     scrollableContainerHeight: isInPDFRender ? undefined : (0, _platformFeatureFlags.fg)('lp_enable_datasource-table-view_height_override') ? scrollableContainerHeight : DefaultScrollableContainerHeight,
     extensionKey: extensionKey
-  }) : /*#__PURE__*/React.createElement(_emptyState.default, {
+  })) : /*#__PURE__*/React.createElement(_emptyState.default, {
     testId: "datasource-table-view-skeleton",
     isCompact: true
   }), /*#__PURE__*/React.createElement(_tableFooter.TableFooter, {

package/dist/cjs/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/cjs/ui/issue-like-table/index.js

@@ -18,9 +18,14 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _reactIntl = require("react-intl");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _flag = require("@atlaskit/flag");
+var _sortAscending = _interopRequireDefault(require("@atlaskit/icon/core/sort-ascending"));
+var _sortDescending = _interopRequireDefault(require("@atlaskit/icon/core/sort-descending"));
 var _linkingCommon = require("@atlaskit/linking-common");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
 var _reorderWithEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge");
 var _pragmaticDragAndDropReactBeautifulDndAutoscroll = require("@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll");
@@ -35,6 +40,7 @@ var _columnPicker = require("./column-picker");
 var _dragColumnPreview = require("./drag-column-preview");
 var _draggableTableHeading = require("./draggable-table-heading");
 var _emptyState = _interopRequireDefault(require("./empty-state"));
+var _messages = require("./messages");
 var _renderType = require("./render-type");
 var _tableCellContent = require("./table-cell-content");
 var _useIsOnScreen = require("./useIsOnScreen");
@@ -42,7 +48,8 @@ var _utils = require("./utils");
 var _excluded = ["as", "style"],
   _excluded2 = ["as", "style"],
   _excluded3 = ["as", "style"],
-  _excluded4 = ["as", "style"];
+  _excluded4 = ["as", "style"],
+  _excluded5 = ["as", "style"];
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 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; }
@@ -134,6 +141,22 @@ var tableStyles = null;
 var noDefaultBorderStyles = null;
 var headerStyles = null;
 var headingHoverEffectStyles = null;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Matches DraggableTableHeading button normalization.
+var SortableHeaderParent = (0, _react.forwardRef)(function (_ref5, __cmplr) {
+  var _ref5$as = _ref5.as,
+    C = _ref5$as === void 0 ? "div" : _ref5$as,
+    __cmpls = _ref5.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref5, _excluded5);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_1e0c1txw _4cvr1h6o _o5721q9c _1wtnze3t _ficf1e5h _jq8g1wug _11lvze3t _yhjm1b66", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  SortableHeaderParent.displayName = 'SortableHeaderParent';
+}
 function extractIndex(data) {
   var index = data.index;
   (0, _tinyInvariant.default)(typeof index === 'number');
@@ -180,26 +203,30 @@ function getDefaultColumnWidth(key, type) {
       return DEFAULT_WIDTH;
   }
 }
-var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
+var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLikeDataTableView(_ref6) {
   var _containerRef$current;
-  var testId = _ref5.testId,
-    onNextPage = _ref5.onNextPage,
-    onLoadDatasourceDetails = _ref5.onLoadDatasourceDetails,
-    items = _ref5.items,
-    itemIds = _ref5.itemIds,
-    columns = _ref5.columns,
-    _ref5$renderItem = _ref5.renderItem,
-    renderItem = _ref5$renderItem === void 0 ? _renderType.renderType : _ref5$renderItem,
-    visibleColumnKeys = _ref5.visibleColumnKeys,
-    onVisibleColumnKeysChange = _ref5.onVisibleColumnKeysChange,
-    columnCustomSizes = _ref5.columnCustomSizes,
-    onColumnResize = _ref5.onColumnResize,
-    wrappedColumnKeys = _ref5.wrappedColumnKeys,
-    onWrappedColumnChange = _ref5.onWrappedColumnChange,
-    status = _ref5.status,
-    hasNextPage = _ref5.hasNextPage,
-    scrollableContainerHeight = _ref5.scrollableContainerHeight,
-    extensionKey = _ref5.extensionKey;
+  var testId = _ref6.testId,
+    onNextPage = _ref6.onNextPage,
+    onLoadDatasourceDetails = _ref6.onLoadDatasourceDetails,
+    items = _ref6.items,
+    itemIds = _ref6.itemIds,
+    columns = _ref6.columns,
+    _ref6$renderItem = _ref6.renderItem,
+    renderItem = _ref6$renderItem === void 0 ? _renderType.renderType : _ref6$renderItem,
+    visibleColumnKeys = _ref6.visibleColumnKeys,
+    onVisibleColumnKeysChange = _ref6.onVisibleColumnKeysChange,
+    columnCustomSizes = _ref6.columnCustomSizes,
+    onColumnResize = _ref6.onColumnResize,
+    onColumnSort = _ref6.onColumnSort,
+    wrappedColumnKeys = _ref6.wrappedColumnKeys,
+    onWrappedColumnChange = _ref6.onWrappedColumnChange,
+    sortState = _ref6.sortState,
+    status = _ref6.status,
+    hasNextPage = _ref6.hasNextPage,
+    scrollableContainerHeight = _ref6.scrollableContainerHeight,
+    extensionKey = _ref6.extensionKey;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
   var tableId = (0, _react.useMemo)(function () {
     return Symbol('unique-id');
   }, []);
@@ -236,8 +263,8 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
   }, [experienceId, status]);
   var visibleSortedColumns = (0, _react.useMemo)(function () {
     return visibleColumnKeys.map(function (visibleKey) {
-      return orderedColumns.find(function (_ref6) {
-        var key = _ref6.key;
+      return orderedColumns.find(function (_ref7) {
+        var key = _ref7.key;
         return visibleKey === key;
       });
     }).filter(Boolean);
@@ -247,9 +274,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
   // If data comes first, then columns and then visibleColumnKeys it blows up,
   // or some other combination.
   var columnsWidthsSum = (0, _react.useMemo)(function () {
-    return visibleSortedColumns.map(function (_ref7) {
-      var key = _ref7.key,
-        type = _ref7.type;
+    return visibleSortedColumns.map(function (_ref8) {
+      var key = _ref8.key,
+        type = _ref8.type;
       return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
     }).reduce(function (sum, width) {
       return width + sum;
@@ -265,10 +292,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     }
   }, [columnCustomSizes, columnsWidthsSum, shouldUseWidth, tableContainerWidth]);
   var headerColumns = (0, _react.useMemo)(function () {
-    return visibleSortedColumns.map(function (_ref8, index) {
-      var key = _ref8.key,
-        title = _ref8.title,
-        type = _ref8.type;
+    return visibleSortedColumns.map(function (_ref9, index) {
+      var key = _ref9.key,
+        title = _ref9.title,
+        type = _ref9.type;
       return {
         key: key,
         content: title,
@@ -290,7 +317,8 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
             height: 14,
             testId: "issues-table-row-loading"
           })),
-          key: column.key
+          key: column.key,
+          width: column.width
         };
       })
     };
@@ -323,9 +351,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       return;
     }
     return (0, _combine.combine)((0, _adapter.monitorForElements)({
-      onDragStart: function onDragStart(_ref9) {
-        var location = _ref9.location,
-          source = _ref9.source;
+      onDragStart: function onDragStart(_ref0) {
+        var location = _ref0.location,
+          source = _ref0.source;
         initialAutoScrollerClientY.current = location.current.input.clientY;
         if (source.data.type === 'table-header') {
           var _containerRef$current2;
@@ -341,9 +369,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           });
         }
       },
-      onDrag: function onDrag(_ref0) {
-        var location = _ref0.location,
-          source = _ref0.source;
+      onDrag: function onDrag(_ref1) {
+        var location = _ref1.location,
+          source = _ref1.source;
         if (source.data.type === 'table-header') {
           var _containerRef$current3;
           _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.updateInput({
@@ -353,9 +381,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           });
         }
       },
-      onDrop: function onDrop(_ref1) {
-        var source = _ref1.source,
-          location = _ref1.location;
+      onDrop: function onDrop(_ref10) {
+        var source = _ref10.source,
+          location = _ref10.location;
         _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.stop();
         if (location.current.dropTargets.length === 0) {
           return;
@@ -390,10 +418,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     return itemIds.map(function (id, rowIndex) {
       return {
         key: id,
-        cells: visibleSortedColumns.map(function (_ref10, cellIndex) {
-          var key = _ref10.key,
-            type = _ref10.type,
-            title = _ref10.title;
+        cells: visibleSortedColumns.map(function (_ref11, cellIndex) {
+          var key = _ref11.key,
+            type = _ref11.type,
+            title = _ref11.title;
           return {
             key: key,
             columnKey: key,
@@ -414,10 +442,25 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       };
     });
   }, [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth]);
+  var previousRealRowsCountRef = (0, _react.useRef)(undefined);
+  (0, _react.useEffect)(function () {
+    if (tableRows.length > 0) {
+      previousRealRowsCountRef.current = tableRows.length;
+    }
+  }, [tableRows.length]);
   var rows = (0, _react.useMemo)(function () {
-    if (status !== 'loading') {
-      return tableRows;
+    if ((0, _platformFeatureFlags.fg)('platform_lp_jira_sllv_renderer_column_sorting')) {
+      var hasPreviousRealRows = !!previousRealRowsCountRef.current;
+      var 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 [].concat((0, _toConsumableArray2.default)(tableRows), [_objectSpread(_objectSpread({}, loadingRow), {}, {
@@ -427,6 +470,14 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     // 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)
     var loadingRowsCount = scrollableContainerHeight ? 14 : 10;
+    if ((0, _platformFeatureFlags.fg)('platform_lp_jira_sllv_renderer_column_sorting')) {
+      var defaultLoadingRowsCount = scrollableContainerHeight ? 14 : 10;
+      var previousRealRowsCount = previousRealRowsCountRef.current;
+      loadingRowsCount = defaultLoadingRowsCount;
+      if (previousRealRowsCount && previousRealRowsCount < defaultLoadingRowsCount) {
+        loadingRowsCount = previousRealRowsCount;
+      }
+    }
     return (0, _toConsumableArray2.default)(Array(loadingRowsCount)).map(function (_, index) {
       return _objectSpread(_objectSpread({}, loadingRow), {}, {
         key: "loading-".concat(index)
@@ -473,6 +524,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     }, _callee, null, [[2, 4]]);
   })), [experienceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
   var 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.
+  var shouldEnableColumnSort = !!onColumnSort && !onVisibleColumnKeysChange && !onColumnResize && !onWrappedColumnChange;
   var orderedColumnsAreUpToDate = orderedColumns.length === columns.length;
   var shouldDisplayColumnsInPicker = hasFullSchema && orderedColumnsAreUpToDate;
   var view = /*#__PURE__*/React.createElement("div", {
@@ -502,10 +556,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     className: (0, _runtime.ax)(["_n7zlidpf", "_bfhkchd4 _kqsw1if8 _154iidpf _1pbyzo7u", !!onVisibleColumnKeysChange ? 'has-column-picker' : ''])
   }, /*#__PURE__*/React.createElement("tr", {
     ref: tableHeaderRowRef
-  }, headerColumns.map(function (_ref12, cellIndex) {
-    var key = _ref12.key,
-      content = _ref12.content,
-      width = _ref12.width;
+  }, headerColumns.map(function (_ref13, cellIndex) {
+    var key = _ref13.key,
+      content = _ref13.content,
+      width = _ref13.width;
     var heading = /*#__PURE__*/React.createElement(_tooltip.default, {
       content: content,
       tag: "span",
@@ -516,17 +570,44 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       className: (0, _runtime.ax)(["_11c8wadc _k48p1wq8"])
     }, content));
     var isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
-    if (isHeadingOutsideButton) {
+    if (shouldEnableColumnSort) {
+      var 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.
+      var SortIcon = sortedDirection ? sortedDirection === 'ASC' ? _sortAscending.default : _sortDescending.default : null;
+      var sortLabel = typeof content === 'string' ? content : key;
+      var sortButtonAriaLabel = sortedDirection === 'ASC' ? formatMessage(_messages.issueLikeTableMessages.sortByColumnDescendingAction, {
+        column: sortLabel
+      }) : formatMessage(_messages.issueLikeTableMessages.sortByColumnAscendingAction, {
+        column: sortLabel
+      });
+      heading = /*#__PURE__*/React.createElement(SortableHeaderParent, null, /*#__PURE__*/React.createElement(_new.default, (0, _extends2.default)({
+        appearance: "subtle",
+        spacing: "compact",
+        shouldFitContainer: true,
+        testId: "".concat(key, "-column-sort-button"),
+        "aria-label": sortButtonAriaLabel
+      }, SortIcon ? {
+        iconAfter: function iconAfter(iconProps) {
+          return /*#__PURE__*/React.createElement(SortIcon, (0, _extends2.default)({}, iconProps, {
+            size: "small"
+          }));
+        }
+      } : {}, {
+        onClick: function onClick() {
+          return onColumnSort === null || onColumnSort === void 0 ? void 0 : onColumnSort(key);
+        }
+      }), heading));
+    } else if (isHeadingOutsideButton) {
       heading = /*#__PURE__*/React.createElement("div", {
         className: (0, _runtime.ax)(["_1e0c1txw _4cvr1h6o _o5721q9c _8vu418qm _irr3l4ek"])
       }, heading);
     }
     if (isEditable) {
       var _containerRef$current4;
-      var previewRows = tableRows.map(function (_ref13) {
-        var cells = _ref13.cells;
-        var cell = cells.find(function (_ref14) {
-          var cellKey = _ref14.key;
+      var previewRows = tableRows.map(function (_ref14) {
+        var cells = _ref14.cells;
+        var cell = cells.find(function (_ref15) {
+          var cellKey = _ref15.key;
           return cellKey === key;
         });
         if (cell) {
@@ -550,16 +631,18 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
         onIsWrappedChange: onWrappedColumnChange === null || onWrappedColumnChange === void 0 ? void 0 : onWrappedColumnChange.bind(null, key)
       }, heading);
     } else {
-      return /*#__PURE__*/React.createElement(TableHeading, {
+      return /*#__PURE__*/React.createElement(TableHeading, (0, _extends2.default)({
         key: key,
         "data-testid": "".concat(key, "-column-heading")
+      }, (0, _platformFeatureFlags.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: (0, _utils.getWidthCss)({
           shouldUseWidth: shouldUseWidth,
           width: width
         })
-      }, heading);
+      }), heading);
     }
   }), onVisibleColumnKeysChange && /*#__PURE__*/React.createElement(ColumnPickerHeader, null, /*#__PURE__*/React.createElement(_columnPicker.ColumnPicker, {
     columns: shouldDisplayColumnsInPicker ? orderedColumns : [],
@@ -569,18 +652,18 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
   })))), /*#__PURE__*/React.createElement("tbody", {
     "data-testid": testId && "".concat(testId, "--body"),
     className: (0, _runtime.ax)(["_n7zlidpf"])
-  }, rows.map(function (_ref15) {
-    var key = _ref15.key,
-      cells = _ref15.cells,
-      ref = _ref15.ref;
+  }, rows.map(function (_ref16) {
+    var key = _ref16.key,
+      cells = _ref16.cells,
+      ref = _ref16.ref;
     return /*#__PURE__*/React.createElement("tr", {
       key: key,
       "data-testid": testId && "".concat(testId, "--row-").concat(key),
       ref: ref
-    }, cells.map(function (_ref16, cellIndex) {
-      var cellKey = _ref16.key,
-        content = _ref16.content,
-        width = _ref16.width;
+    }, cells.map(function (_ref17, cellIndex) {
+      var cellKey = _ref17.key,
+        content = _ref17.content,
+        width = _ref17.width;
       var isLastCell = cellIndex === cells.length - 1;
       var loadingRowStyle = (0, _utils.getWidthCss)({
         shouldUseWidth: shouldUseWidth,

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

@@ -46,6 +46,16 @@ var issueLikeTableMessages = exports.issueLikeTableMessages = (0, _reactIntl.def
     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',