@atlaskit/link-datasource 2.3.0 → 2.3.2

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/link-datasource
 
+## 2.3.2
+
+### Patch Changes
+
+-   [#97435](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97435)
+    [`74d425408d1e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/74d425408d1e) -
+    [ux] Fix a bug where when sum of all column widths is less than container total width the
+    resizing is somewhat broken
+-   [#99133](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99133)
+    [`2de9d30e7ac6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2de9d30e7ac6) -
+    Updates docs to include in atlaskit for use of smart link list view and configuration modals and
+    respective props and examples.
+-   Updated dependencies
+
+## 2.3.1
+
+### Patch Changes
+
+-   [#96902](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/96902)
+    [`c5881211d3fd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c5881211d3fd) -
+    removing abort controller FF after rollout
+-   [#101524](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101524)
+    [`4821570088e6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4821570088e6) -
+    ED-23362 Bump ADF schema to version 36.8.1 and add support for adf validation and transformation
+
 ## 2.3.0
 
 ### Minor Changes

package/dist/cjs/hooks/useDatasourceTableState.js

@@ -12,7 +12,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _linkClientExtension = require("@atlaskit/link-client-extension");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics = require("../analytics");
 var _useErrorLogger2 = _interopRequireDefault(require("./useErrorLogger"));
 var useDatasourceTableState = exports.useDatasourceTableState = function useDatasourceTableState(_ref) {
@@ -203,6 +202,7 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
       shouldForceRequest,
       isFullSchemaLoaded,
       datasourceDataRequest,
+      _currentAbortControll,
       _yield$getDatasourceD3,
       _yield$getDatasourceD4,
       access,
@@ -215,7 +215,6 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
       nextPageCursor,
       _totalCount,
       schema,
-      _currentAbortControll,
       isUserLoadingNextPage,
       currentLoadedItemCount,
       newlyLoadedItemCount,
@@ -224,23 +223,21 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
           requestInfo = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {};
-          if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource.enable-abort-controller')) {
-            /**
-             * Abort whichever request was made before this one.
-             */
-            abortController.current.abort();
-            /**
-             * Setup new abort controller for this request.
-             */
-            abortController.current = new AbortController();
-            currentAbortController = abortController.current;
-          }
+          /**
+           * Abort whichever request was made before this one.
+           */
+          abortController.current.abort();
+          /**
+           * Setup new abort controller for this request.
+           */
+          abortController.current = new AbortController();
+          currentAbortController = abortController.current;
           if (parameters) {
-            _context2.next = 4;
+            _context2.next = 6;
             break;
           }
           return _context2.abrupt("return");
-        case 4:
+        case 6:
           _requestInfo$isSchema = requestInfo.isSchemaFromData, isSchemaFromData = _requestInfo$isSchema === void 0 ? true : _requestInfo$isSchema, shouldRequestFirstPage = requestInfo.shouldRequestFirstPage, _requestInfo$shouldFo = requestInfo.shouldForceRequest, shouldForceRequest = _requestInfo$shouldFo === void 0 ? false : _requestInfo$shouldFo;
           isFullSchemaLoaded = fullSchema.properties.length > 0;
           datasourceDataRequest = {
@@ -251,10 +248,10 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
             includeSchema: isFullSchemaLoaded ? false : isSchemaFromData
           };
           setStatus('loading');
-          _context2.prev = 8;
-          _context2.next = 11;
+          _context2.prev = 10;
+          _context2.next = 13;
           return getDatasourceData(datasourceId, datasourceDataRequest, shouldForceRequest);
-        case 11:
+        case 13:
           _yield$getDatasourceD3 = _context2.sent;
           _yield$getDatasourceD4 = _yield$getDatasourceD3.meta;
           access = _yield$getDatasourceD4.access;
@@ -267,37 +264,26 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
           nextPageCursor = _yield$getDatasourceD5.nextPageCursor;
           _totalCount = _yield$getDatasourceD5.totalCount;
           schema = _yield$getDatasourceD5.schema;
-          if (!(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource.enable-abort-controller')) {
-            _context2.next = 26;
-            break;
-          }
           if (!((_currentAbortControll = currentAbortController) !== null && _currentAbortControll !== void 0 && _currentAbortControll.signal.aborted)) {
-            _context2.next = 26;
+            _context2.next = 27;
             break;
           }
           throw new Error('Aborted');
-        case 26:
+        case 27:
           setExtensionKey(_extensionKey);
           setProviderName(_providerName);
           if (!(access === 'unauthorized' || access === 'forbidden')) {
-            _context2.next = 32;
+            _context2.next = 33;
             break;
           }
           setStatus(access);
           setAuthDetails(auth || initialEmptyArray);
           return _context2.abrupt("return");
-        case 32:
+        case 33:
           setDestinationObjectTypes(_destinationObjectTypes);
           setTotalCount(_totalCount);
           setNextCursor(nextPageCursor);
           setResponseItems(function (currentResponseItems) {
-            if (!(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource.enable-abort-controller')) {
-              var hasIdenticalResponseItems = (0, _isEqual.default)(currentResponseItems, items);
-              if (hasIdenticalResponseItems || shouldRequestFirstPage) {
-                return items;
-              }
-              return [].concat((0, _toConsumableArray2.default)(currentResponseItems), (0, _toConsumableArray2.default)(items));
-            }
             if (shouldRequestFirstPage) {
               return items;
             }
@@ -323,13 +309,9 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
           setStatus('resolved');
           _context2.next = 57;
           break;
-        case 44:
-          _context2.prev = 44;
-          _context2.t0 = _context2["catch"](8);
-          if (!(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource.enable-abort-controller')) {
-            _context2.next = 49;
-            break;
-          }
+        case 45:
+          _context2.prev = 45;
+          _context2.t0 = _context2["catch"](10);
           if (!(_context2.t0.message === 'Aborted')) {
             _context2.next = 49;
             break;
@@ -356,7 +338,7 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
         case "end":
           return _context2.stop();
       }
-    }, _callee2, null, [[8, 44]]);
+    }, _callee2, null, [[10, 45]]);
   })), [captureError, parameters, fieldKeys, nextCursor, getDatasourceData, datasourceId, responseItems, applySchemaProperties, fireEvent, fullSchema, initialEmptyArray]);
   var reset = (0, _react.useCallback)(function (options) {
     setResponseItems(initialEmptyArray);
@@ -417,11 +399,9 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
     }
   }, [fieldKeys, lastRequestedFieldKeys, responseItems, reset, onNextPage]);
   (0, _react.useEffect)(function () {
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource.enable-abort-controller')) {
-      return function () {
-        return abortController.current.abort();
-      };
-    }
+    return function () {
+      return abortController.current.abort();
+    };
   }, []);
   return {
     status: status,

package/dist/cjs/ui/issue-like-table/draggable-table-heading.js

@@ -124,6 +124,11 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
     closestEdge = _useState6[0],
     setClosestEdge = _useState6[1];
   var dropTargetRef = (0, _react.useRef)(null);
+  /**
+   * When width is not set (or callback is not set) we assume not resizing is needed.
+   * In our case width won't be set for last cell when table container is bigger than sum of all columns
+   */
+  var resizeIsEnabled = !!onWidthChange && !!width;
   (0, _react.useEffect)(function () {
     var cell = mainHeaderCellRef.current;
     (0, _tinyInvariant.default)(cell);
@@ -231,7 +236,7 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
 
   // Handling column resizing
   (0, _react.useEffect)(function () {
-    if (!onWidthChange) {
+    if (!resizeIsEnabled) {
       return;
     }
     var resizeHandle = columnResizeHandleRef.current;
@@ -287,7 +292,7 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
         }
       }
     });
-  }, [id, index, onWidthChange, state, tableId, width]);
+  }, [id, index, onWidthChange, resizeIsEnabled, state, tableId, width]);
   var _useState7 = (0, _react.useState)(false),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     buttonHovered = _useState8[0],
@@ -296,7 +301,9 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
     isDropdownOpen = _useState10[0],
     setIsDropdownOpen = _useState10[1];
-  var isWideEnoughToHaveChevron = width > 76;
+  // Width is not set when it is a last cell in a wide table.
+  // We make assumption thus that there is enough width for chevron.
+  var isWideEnoughToHaveChevron = !width || width > 76;
   var shouldShowTriggerIcon = (buttonHovered || isDropdownOpen) && isWideEnoughToHaveChevron;
   var triggerIcon = (0, _react.useMemo)(function () {
     return shouldShowTriggerIcon ? isDropdownOpen ? _chevronUp.default : _chevronDown.default : isWideEnoughToHaveChevron ? _customIcons.GlyphPlaceholder : undefined;
@@ -332,10 +339,10 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
     style: _objectSpread({
       cursor: 'grab'
     }, (0, _utils.getWidthCss)({
-      shouldUseWidth: !!onWidthChange,
+      shouldUseWidth: resizeIsEnabled,
       width: width
     }))
-  }, onWidthChange ? (0, _react2.jsx)("div", {
+  }, resizeIsEnabled ? (0, _react2.jsx)("div", {
     ref: columnResizeHandleRef,
     css: [resizerStyles, state.type === 'resizing' && resizingStyles],
     style: {

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

@@ -14,6 +14,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _reactIntlNext = require("react-intl-next");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _linkingCommon = require("@atlaskit/linking-common");
@@ -25,6 +26,7 @@ var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _colors = require("@atlaskit/theme/colors");
 var _typography = require("@atlaskit/theme/typography");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _widthDetector = require("@atlaskit/width-detector");
 var _ufoExperiences = require("../../analytics/ufoExperiences");
 var _zindex = require("../../common/zindex");
 var _columnPicker = require("./column-picker");
@@ -35,7 +37,7 @@ var _renderType = require("./render-type");
 var _styled2 = require("./styled");
 var _useIsOnScreen = require("./useIsOnScreen");
 var _utils = require("./utils");
-var _styled$th, _styled$td;
+var _styled$td;
 /** @jsx jsx */
 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; }
@@ -51,27 +53,30 @@ var truncateTextStyles = (0, _react2.css)({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var ColumnPickerHeader = _styled.default.th((_styled$th = {}, (0, _defineProperty2.default)(_styled$th, "".concat((0, _styled2.withTablePluginHeaderPrefix)()), {
-  boxSizing: 'content-box',
+var columnPickerWidth = 80;
+var ColumnPickerHeader = _styled.default.th((0, _defineProperty2.default)({}, "".concat((0, _styled2.withTablePluginHeaderPrefix)('&:last-of-type')), {
+  boxSizing: 'border-box',
   border: 0,
-  width: '56px',
+  width: "".concat(columnPickerWidth, "px"),
   zIndex: 10,
   position: 'sticky',
   right: "calc(-1 * ".concat(tableSidePadding, ")"),
   backgroundColor: "var(--ds-elevation-surface-current, #FFF)",
+  /* It is required to have solid (not half-transparent) color because of this gradient business below */
   borderBottom: "2px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
-  paddingRight: "var(--ds-space-100, 4px)",
+  paddingRight: tableSidePadding,
   background: "linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, ".concat("var(--ds-elevation-surface-current, #FFF)", " 10% )"),
+  /* Keeps dropdown button in the middle */
   verticalAlign: 'middle',
+  /* In case when TH itself is bigger we want to keep picker at the right side */
   textAlign: 'right'
-}), (0, _defineProperty2.default)(_styled$th, "".concat((0, _styled2.withTablePluginHeaderPrefix)('&:last-of-type')), {
-  paddingRight: tableSidePadding
-}), _styled$th));
+}));
 var truncateStyles = (0, _react2.css)({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
 var TableCell = _styled.default.td((_styled$td = {}, (0, _defineProperty2.default)(_styled$td, "".concat((0, _styled2.withTablePluginBodyPrefix)()), {
+  /* First section here is to override things editor table plugin css defines */
   font: _styled2.fieldTextFontSize,
   padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)"),
   border: 0,
@@ -92,7 +97,8 @@ var TableCell = _styled.default.td((_styled$td = {}, (0, _defineProperty2.defaul
 var tableContainerStyles = (0, _react2.css)({
   borderRadius: 'inherit',
   borderBottomLeftRadius: 0,
-  borderBottomRightRadius: 0
+  borderBottomRightRadius: 0,
+  position: 'relative'
 });
 
 /**
@@ -189,7 +195,10 @@ var tableStyles = (0, _react2.css)({
   // These styles are needed to prevent thead bottom border from scrolling away.
   // This happens because it is sticky. https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
   borderCollapse: 'separate',
-  borderSpacing: 0
+  borderSpacing: 0,
+  // There is a strange table:first-of-type rule that sets margin-top to 0 coming from container,
+  // but because our table is now not the first child (there is an empty div to measure width) we need to set it manually.
+  margin: 0
 });
 
 // By default tbody and thead have border-bottom: 2px ...
@@ -301,6 +310,19 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     orderedColumns = _useState6[0],
     setOrderedColumns = _useState6[1];
+
+  // Table container width is used to know if sum of all column widths is bigger of container or not.
+  // When sum of all columns is less than container size we make last column stretchable (width: undefined)
+  var _useState7 = (0, _react.useState)(),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    tableContainerWidth = _useState8[0],
+    setTableContainerWidth = _useState8[1];
+  (0, _react.useEffect)(function () {
+    var current = containerRef.current;
+    if (containerRef && current) {
+      setTableContainerWidth(current.getBoundingClientRect().width);
+    }
+  }, [containerRef]);
   (0, _react.useEffect)(function () {
     if (!hasFullSchema) {
       setOrderedColumns(getOrderedColumns((0, _toConsumableArray2.default)(columns), (0, _toConsumableArray2.default)(visibleColumnKeys)));
@@ -327,19 +349,33 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
   // or some other combination.
 
   var identityColumnKey = 'id';
-  var getColumnWidth = (0, _react.useCallback)(function (key, type) {
-    return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
-  }, [columnCustomSizes]);
-  var headerColumns = (0, _react.useMemo)(function () {
+  var columnsWidthsSum = (0, _react.useMemo)(function () {
     return visibleSortedColumns.map(function (_ref7) {
       var key = _ref7.key,
-        title = _ref7.title,
         type = _ref7.type;
+      return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
+    }).reduce(function (sum, width) {
+      return width + sum;
+    }, 0) + (onVisibleColumnKeysChange ? columnPickerWidth : 0);
+  }, [columnCustomSizes, onVisibleColumnKeysChange, visibleSortedColumns]);
+  var shouldUseWidth = !!(onColumnResize || columnCustomSizes);
+  var getColumnWidth = (0, _react.useCallback)(function (key, type, isLastCell) {
+    if (isLastCell && shouldUseWidth && (!tableContainerWidth || tableContainerWidth > columnsWidthsSum)) {
+      return undefined;
+    } else {
+      return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
+    }
+  }, [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 {
         key: key,
         content: title,
         shouldTruncate: true,
-        width: getColumnWidth(key, type)
+        width: getColumnWidth(key, type, index === visibleSortedColumns.length - 1)
       };
     });
   }, [getColumnWidth, visibleSortedColumns]);
@@ -376,9 +412,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       return;
     }
     return (0, _combine.combine)((0, _adapter.monitorForElements)({
-      onDragStart: function onDragStart(_ref8) {
-        var location = _ref8.location,
-          source = _ref8.source;
+      onDragStart: function onDragStart(_ref9) {
+        var location = _ref9.location,
+          source = _ref9.source;
         initialAutoScrollerClientY.current = location.current.input.clientY;
         if (source.data.type === 'table-header') {
           var _containerRef$current;
@@ -394,9 +430,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           });
         }
       },
-      onDrag: function onDrag(_ref9) {
-        var location = _ref9.location,
-          source = _ref9.source;
+      onDrag: function onDrag(_ref10) {
+        var location = _ref10.location,
+          source = _ref10.source;
         if (source.data.type === 'table-header') {
           var _containerRef$current2;
           _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.updateInput({
@@ -406,9 +442,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           });
         }
       },
-      onDrop: function onDrop(_ref10) {
-        var source = _ref10.source,
-          location = _ref10.location;
+      onDrop: function onDrop(_ref11) {
+        var source = _ref11.source,
+          location = _ref11.location;
         _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.stop();
         if (location.current.dropTargets.length === 0) {
           return;
@@ -443,10 +479,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     return items.map(function (newRowData, rowIndex) {
       return {
         key: "".concat(identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex),
-        cells: visibleSortedColumns.map(function (_ref11) {
+        cells: visibleSortedColumns.map(function (_ref12, cellIndex) {
           var _newRowData$key;
-          var key = _ref11.key,
-            type = _ref11.type;
+          var key = _ref12.key,
+            type = _ref12.type;
           // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
           var value = (_newRowData$key = newRowData[key]) === null || _newRowData$key === void 0 ? void 0 : _newRowData$key.data;
           var values = Array.isArray(value) ? value : [value];
@@ -470,7 +506,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           return {
             key: key,
             content: contentComponent,
-            width: getColumnWidth(key, type)
+            width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
           };
         }),
         ref: rowIndex === items.length - 1 ? function (el) {
@@ -536,7 +572,6 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       }
     }, _callee, null, [[3, 9]]);
   })), [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
-  var shouldUseWidth = !!(onColumnResize || columnCustomSizes);
   var isEditable = onVisibleColumnKeysChange && hasData;
   return (0, _react2.jsx)("div", {
     /* There is required contentEditable={true} in editor-card-plugin
@@ -548,8 +583,11 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     css: [tableContainerStyles, scrollableContainerHeight && scrollableContainerStyles],
     style: scrollableContainerHeight ? {
       maxHeight: "".concat(scrollableContainerHeight, "px")
-    } : undefined
-  }, (0, _react2.jsx)(_styled2.Table, {
+    } : undefined,
+    "data-testid": 'issue-like-table-container'
+  }, (0, _react2.jsx)(_widthDetector.WidthObserver, {
+    setWidth: (0, _debounce.default)(setTableContainerWidth, 100)
+  }), (0, _react2.jsx)(_styled2.Table, {
     css: tableStyles,
     "data-testid": testId,
     style: shouldUseWidth ? {
@@ -561,10 +599,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     className: !!onVisibleColumnKeysChange ? 'has-column-picker' : ''
   }, (0, _react2.jsx)("tr", {
     ref: tableHeaderRowRef
-  }, headerColumns.map(function (_ref13, cellIndex) {
-    var key = _ref13.key,
-      content = _ref13.content,
-      width = _ref13.width;
+  }, headerColumns.map(function (_ref14, cellIndex) {
+    var key = _ref14.key,
+      content = _ref14.content,
+      width = _ref14.width;
     var heading = (0, _react2.jsx)(_tooltip.default, {
       content: content,
       tag: "span",
@@ -581,10 +619,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     }
     if (isEditable) {
       var _containerRef$current3;
-      var previewRows = tableRows.map(function (_ref14) {
-        var cells = _ref14.cells;
-        var cell = cells.find(function (_ref15) {
-          var cellKey = _ref15.key;
+      var previewRows = tableRows.map(function (_ref15) {
+        var cells = _ref15.cells;
+        var cell = cells.find(function (_ref16) {
+          var cellKey = _ref16.key;
           return cellKey === key;
         });
         if (cell) {
@@ -626,18 +664,18 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
   })))), (0, _react2.jsx)("tbody", {
     css: noDefaultBorderStyles,
     "data-testid": testId && "".concat(testId, "--body")
-  }, rows.map(function (_ref16) {
-    var key = _ref16.key,
-      cells = _ref16.cells,
-      ref = _ref16.ref;
+  }, rows.map(function (_ref17) {
+    var key = _ref17.key,
+      cells = _ref17.cells,
+      ref = _ref17.ref;
     return (0, _react2.jsx)("tr", {
       key: key,
       "data-testid": testId && "".concat(testId, "--row-").concat(key),
       ref: ref
-    }, cells.map(function (_ref17, cellIndex) {
-      var cellKey = _ref17.key,
-        content = _ref17.content,
-        width = _ref17.width;
+    }, cells.map(function (_ref18, cellIndex) {
+      var cellKey = _ref18.key,
+        content = _ref18.content,
+        width = _ref18.width;
       var isLastCell = cellIndex === cells.length - 1;
       var loadingRowStyle = (0, _utils.getWidthCss)({
         shouldUseWidth: shouldUseWidth,

package/dist/cjs/ui/issue-like-table/render-type/richtext/index.js

@@ -14,8 +14,7 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 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; } /** @jsx jsx */
 var rootStyles = (0, _react2.css)({
-  position: 'relative',
-  display: 'block'
+  position: 'relative'
 });
 var smartLinkNodeToUrl = function smartLinkNodeToUrl(node) {
   var _node$attrs$url;
@@ -52,7 +51,7 @@ var RichTextType = function RichTextType(_ref) {
     return parseRichText(value);
   }, [value]);
   if (adfPlainText) {
-    return (0, _react2.jsx)("div", {
+    return (0, _react2.jsx)("span", {
       css: rootStyles,
       "data-testid": "richtext-plaintext"
     }, adfPlainText);

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

@@ -33,11 +33,19 @@ var withTablePluginBodyPrefix = exports.withTablePluginBodyPrefix = withTablePlu
 var TableHeading = exports.TableHeading = _styled.default.th((_styled$th = {}, (0, _defineProperty2.default)(_styled$th, "".concat(withTablePluginHeaderPrefix()), {
   border: 0,
   position: 'relative',
+  /* This makes resizing work with out jumping due to padding + changes overall width for same default values. */
   boxSizing: 'border-box',
   lineHeight: lineHeight,
   padding: "".concat(verticalPadding, " ", "var(--ds-space-050, 4px)"),
   borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
   borderBottom: "2px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  /*
+    lineHeight * 2 -> Max height of two lined header
+    verticalPadding * 2 -> padding for this component itself
+    verticalPadding * 2 -> padding inside span (--container)
+    2px -> Bottom border
+    Last two terms are needed because of border-box box sizing.
+  */
   height: "calc(".concat(lineHeight, " * 2 + ").concat(verticalPadding, " * 4 + 2px)"),
   verticalAlign: 'bottom',
   backgroundColor: "var(--ds-elevation-surface-current, #FFF)"
@@ -49,6 +57,9 @@ var TableHeading = exports.TableHeading = _styled.default.th((_styled$th = {}, (
   borderRight: 0
 }), (0, _defineProperty2.default)(_styled$th, "& [data-testid='datasource-header-content--container']", {
   width: '100%',
+  /* With Button now being a parent for this component it adds its lineHeight value and spoils
+    `height` calculation above. */
+  lineHeight: lineHeight,
   padding: "".concat(verticalPadding, " ", "var(--ds-space-050, 4px)"),
   display: '-webkit-box',
   WebkitLineClamp: 2,

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

@@ -14,16 +14,23 @@ var COLUMN_MIN_WIDTH = exports.COLUMN_MIN_WIDTH = COLUMN_BASE_WIDTH * 3;
  * or rather default width that should be treated as a maximum width. When table inserted initially
  * and no user custom width defined we set this value to `false`. As soon as user changes any of the
  * column widths we treat all width as custom hardcoded widths.
- * @param width
+ * @param width Sometimes set to undefined for last column to make it occupy remainder of the table width
  */
 var getWidthCss = exports.getWidthCss = function getWidthCss(_ref) {
   var shouldUseWidth = _ref.shouldUseWidth,
     width = _ref.width;
-  return shouldUseWidth ? {
-    width: width
-  } : {
-    maxWidth: width
-  };
+  if (!width) {
+    return {};
+  }
+  if (shouldUseWidth) {
+    return {
+      width: width
+    };
+  } else {
+    return {
+      maxWidth: width
+    };
+  }
 };
 
 /**

package/dist/cjs/ui/jira-issues-modal/modal/index.js

@@ -276,7 +276,7 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     // During insertion, we want the JQL of the datasource to be whatever is in the search bar,
     // even if the user didn't previously click search
     var upToDateJql = searchBarJql !== null && searchBarJql !== void 0 ? searchBarJql : jql;
-    var upToDateJqlUrl = selectedJiraSite && jql && "".concat(selectedJiraSite.url, "/issues/?jql=").concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource.enable-stricter-jql-encoding') ? encodeURIComponent(upToDateJql) : encodeURI(upToDateJql));
+    var upToDateJqlUrl = selectedJiraSite && jql && "".concat(selectedJiraSite.url, "/issues/?jql=").concat(encodeURIComponent(upToDateJql));
     var filterSelectionCount = _ui.availableBasicFilterTypes.reduce(function (current, filter) {
       var _basicFilterSelection;
       return _objectSpread(_objectSpread({}, current), {}, (0, _defineProperty2.default)({}, "".concat(filter, "BasicFilterSelectionCount"), ((_basicFilterSelection = basicFilterSelectionsSearchedWith.current[filter]) === null || _basicFilterSelection === void 0 ? void 0 : _basicFilterSelection.length) || 0));
@@ -401,7 +401,7 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
       if (responseItems.length === 1 && retrieveUrlForSmartCardRender()) {
         url = retrieveUrlForSmartCardRender();
       } else {
-        url = "".concat(selectedJiraSiteUrl, "/issues/?jql=").concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource.enable-stricter-jql-encoding') ? encodeURIComponent(jql) : encodeURI(jql));
+        url = "".concat(selectedJiraSiteUrl, "/issues/?jql=").concat(encodeURIComponent(jql));
       }
       return (0, _react2.jsx)(_countViewSmartLink.SmartLink, {
         url: url