@atlaskit/link-datasource 2.3.0 → 2.3.2

package/dist/es2019/hooks/useDatasourceTableState.js

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import isEqual from 'lodash/isEqual';
 import { DEFAULT_GET_DATASOURCE_DATA_PAGE_SIZE, useDatasourceClientExtension } from '@atlaskit/link-client-extension';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { useDatasourceAnalyticsEvents } from '../analytics';
 import useErrorLogger from './useErrorLogger';
 export const useDatasourceTableState = ({
@@ -115,17 +114,15 @@ export const useDatasourceTableState = ({
   }, [columns, defaultVisibleColumnKeys, lastRequestedFieldKeys]);
   const onNextPage = useCallback(async (requestInfo = {}) => {
     let currentAbortController;
-    if (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) {
       return;
     }
@@ -144,6 +141,7 @@ export const useDatasourceTableState = ({
     };
     setStatus('loading');
     try {
+      var _currentAbortControll;
       const {
         meta: {
           access,
@@ -159,14 +157,12 @@ export const useDatasourceTableState = ({
           schema
         }
       } = await getDatasourceData(datasourceId, datasourceDataRequest, shouldForceRequest);
-      if (getBooleanFF('platform.linking-platform.datasource.enable-abort-controller')) {
-        var _currentAbortControll;
-        /**
-         * Let the response finish and store in cache, but throw error if signal is aborted
-         */
-        if ((_currentAbortControll = currentAbortController) !== null && _currentAbortControll !== void 0 && _currentAbortControll.signal.aborted) {
-          throw new Error('Aborted');
-        }
+
+      /**
+       * Let the response finish and store in cache, but throw error if signal is aborted
+       */
+      if ((_currentAbortControll = currentAbortController) !== null && _currentAbortControll !== void 0 && _currentAbortControll.signal.aborted) {
+        throw new Error('Aborted');
       }
       setExtensionKey(extensionKey);
       setProviderName(providerName);
@@ -179,13 +175,6 @@ export const useDatasourceTableState = ({
       setTotalCount(totalCount);
       setNextCursor(nextPageCursor);
       setResponseItems(currentResponseItems => {
-        if (!getBooleanFF('platform.linking-platform.datasource.enable-abort-controller')) {
-          const hasIdenticalResponseItems = isEqual(currentResponseItems, items);
-          if (hasIdenticalResponseItems || shouldRequestFirstPage) {
-            return items;
-          }
-          return [...currentResponseItems, ...items];
-        }
         if (shouldRequestFirstPage) {
           return items;
         }
@@ -210,16 +199,14 @@ export const useDatasourceTableState = ({
       }
       setStatus('resolved');
     } catch (e) {
-      if (getBooleanFF('platform.linking-platform.datasource.enable-abort-controller')) {
-        if (e.message === 'Aborted') {
-          /**
-           * If the request was aborted, we don't want to change the status of the table
-           * as we are already loading the next request attempt
-           *
-           * Is not an exceptional state, do not need to captureError
-           */
-          return;
-        }
+      if (e.message === 'Aborted') {
+        /**
+         * If the request was aborted, we don't want to change the status of the table
+         * as we are already loading the next request attempt
+         *
+         * Is not an exceptional state, do not need to captureError
+         */
+        return;
       }
       captureError('onNextPage', e);
       if (e instanceof Response && e.status === 401) {
@@ -288,9 +275,7 @@ export const useDatasourceTableState = ({
     }
   }, [fieldKeys, lastRequestedFieldKeys, responseItems, reset, onNextPage]);
   useEffect(() => {
-    if (getBooleanFF('platform.linking-platform.datasource.enable-abort-controller')) {
-      return () => abortController.current.abort();
-    }
+    return () => abortController.current.abort();
   }, []);
   return {
     status,

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

@@ -100,6 +100,11 @@ export const DraggableTableHeading = ({
   const [isDraggingAnyColumn, setIsDraggingAnyColumn] = useState(false);
   const [closestEdge, setClosestEdge] = useState(null);
   const dropTargetRef = 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
+   */
+  const resizeIsEnabled = !!onWidthChange && !!width;
   useEffect(() => {
     const cell = mainHeaderCellRef.current;
     invariant(cell);
@@ -209,7 +214,7 @@ export const DraggableTableHeading = ({
 
   // Handling column resizing
   useEffect(() => {
-    if (!onWidthChange) {
+    if (!resizeIsEnabled) {
       return;
     }
     const resizeHandle = columnResizeHandleRef.current;
@@ -269,10 +274,12 @@ export const DraggableTableHeading = ({
         }
       }
     });
-  }, [id, index, onWidthChange, state, tableId, width]);
+  }, [id, index, onWidthChange, resizeIsEnabled, state, tableId, width]);
   const [buttonHovered, setButtonHovered] = useState(false);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const 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.
+  const isWideEnoughToHaveChevron = !width || width > 76;
   const shouldShowTriggerIcon = (buttonHovered || isDropdownOpen) && isWideEnoughToHaveChevron;
   const triggerIcon = useMemo(() => shouldShowTriggerIcon ? isDropdownOpen ? ChevronUp : ChevronDown : isWideEnoughToHaveChevron ? GlyphPlaceholder : undefined, [shouldShowTriggerIcon, isDropdownOpen, isWideEnoughToHaveChevron]);
   const getTriggerButton = useCallback(({
@@ -300,11 +307,11 @@ export const DraggableTableHeading = ({
     style: {
       cursor: 'grab',
       ...getWidthCss({
-        shouldUseWidth: !!onWidthChange,
+        shouldUseWidth: resizeIsEnabled,
         width
       })
     }
-  }, onWidthChange ? jsx("div", {
+  }, resizeIsEnabled ? jsx("div", {
     ref: columnResizeHandleRef,
     css: [resizerStyles, state.type === 'resizing' && resizingStyles],
     style: {

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

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import styled from '@emotion/styled';
+import debounce from 'lodash/debounce';
 import { useIntl } from 'react-intl-next';
 import invariant from 'tiny-invariant';
 import { Skeleton } from '@atlaskit/linking-common';
@@ -14,6 +15,7 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/ad
 import { N40 } from '@atlaskit/theme/colors';
 import { fontFallback } from '@atlaskit/theme/typography';
 import Tooltip from '@atlaskit/tooltip';
+import { WidthObserver } from '@atlaskit/width-detector';
 import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
 import { stickyTableHeadersIndex } from '../../common/zindex';
 import { ColumnPicker } from './column-picker';
@@ -36,23 +38,24 @@ const truncateTextStyles = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
+const columnPickerWidth = 80;
 const ColumnPickerHeader = styled.th({
-  [`${withTablePluginHeaderPrefix()}`]: {
-    boxSizing: 'content-box',
+  [`${withTablePluginHeaderPrefix('&:last-of-type')}`]: {
+    boxSizing: 'border-box',
     border: 0,
-    width: '56px',
+    width: `${columnPickerWidth}px`,
     zIndex: 10,
     position: 'sticky',
     right: `calc(-1 * ${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 ${`var(--ds-border, ${N40})`}`,
-    paddingRight: "var(--ds-space-100, 4px)",
+    paddingRight: tableSidePadding,
     background: `linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, ${"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'
-  },
-  [`${withTablePluginHeaderPrefix('&:last-of-type')}`]: {
-    paddingRight: tableSidePadding
   }
 });
 const truncateStyles = css({
@@ -61,6 +64,7 @@ const truncateStyles = css({
 });
 const TableCell = styled.td({
   [`${withTablePluginBodyPrefix()}`]: {
+    /* First section here is to override things editor table plugin css defines */
     font: fieldTextFontSize,
     padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`,
     border: 0,
@@ -87,7 +91,8 @@ const TableCell = styled.td({
 const tableContainerStyles = css({
   borderRadius: 'inherit',
   borderBottomLeftRadius: 0,
-  borderBottomRightRadius: 0
+  borderBottomRightRadius: 0,
+  position: 'relative'
 });
 
 /**
@@ -220,7 +225,10 @@ const tableStyles = 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 ...
@@ -317,6 +325,18 @@ export const IssueLikeDataTableView = ({
   const isBottomOfTableVisibleRaw = useIsOnScreen(lastRowElement);
   const containerRef = useRef(null);
   const [orderedColumns, setOrderedColumns] = useState(() => getOrderedColumns([...columns], [...visibleColumnKeys]));
+
+  // 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)
+  const [tableContainerWidth, setTableContainerWidth] = useState();
+  useEffect(() => {
+    const {
+      current
+    } = containerRef;
+    if (containerRef && current) {
+      setTableContainerWidth(current.getBoundingClientRect().width);
+    }
+  }, [containerRef]);
   useEffect(() => {
     if (!hasFullSchema) {
       setOrderedColumns(getOrderedColumns([...columns], [...visibleColumnKeys]));
@@ -338,16 +358,27 @@ export const IssueLikeDataTableView = ({
   // or some other combination.
 
   const identityColumnKey = 'id';
-  const getColumnWidth = useCallback((key, type) => (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type), [columnCustomSizes]);
+  const columnsWidthsSum = useMemo(() => visibleSortedColumns.map(({
+    key,
+    type
+  }) => (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type)).reduce((sum, width) => width + sum, 0) + (onVisibleColumnKeysChange ? columnPickerWidth : 0), [columnCustomSizes, onVisibleColumnKeysChange, visibleSortedColumns]);
+  const shouldUseWidth = !!(onColumnResize || columnCustomSizes);
+  const getColumnWidth = useCallback((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]);
   const headerColumns = useMemo(() => visibleSortedColumns.map(({
     key,
     title,
     type
-  }) => ({
+  }, index) => ({
     key,
     content: title,
     shouldTruncate: true,
-    width: getColumnWidth(key, type)
+    width: getColumnWidth(key, type, index === visibleSortedColumns.length - 1)
   })), [getColumnWidth, visibleSortedColumns]);
   const loadingRow = useMemo(() => ({
     key: 'loading',
@@ -450,7 +481,7 @@ export const IssueLikeDataTableView = ({
     cells: visibleSortedColumns.map(({
       key,
       type
-    }) => {
+    }, cellIndex) => {
       var _newRowData$key;
       // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
       const value = (_newRowData$key = newRowData[key]) === null || _newRowData$key === void 0 ? void 0 : _newRowData$key.data;
@@ -471,7 +502,7 @@ export const IssueLikeDataTableView = ({
       return {
         key,
         content: contentComponent,
-        width: getColumnWidth(key, type)
+        width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
       };
     }),
     ref: rowIndex === items.length - 1 ? el => setLastRowElement(el) : undefined
@@ -517,7 +548,6 @@ export const IssueLikeDataTableView = ({
       setHasFullSchema(false);
     }
   }, [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
-  const shouldUseWidth = !!(onColumnResize || columnCustomSizes);
   const isEditable = onVisibleColumnKeysChange && hasData;
   return jsx("div", {
     /* There is required contentEditable={true} in editor-card-plugin
@@ -529,8 +559,11 @@ export const IssueLikeDataTableView = ({
     css: [tableContainerStyles, scrollableContainerHeight && scrollableContainerStyles],
     style: scrollableContainerHeight ? {
       maxHeight: `${scrollableContainerHeight}px`
-    } : undefined
-  }, jsx(Table, {
+    } : undefined,
+    "data-testid": 'issue-like-table-container'
+  }, jsx(WidthObserver, {
+    setWidth: debounce(setTableContainerWidth, 100)
+  }), jsx(Table, {
     css: tableStyles,
     "data-testid": testId,
     style: shouldUseWidth ? {

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

@@ -4,8 +4,7 @@ import { css, jsx } from '@emotion/react';
 import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
 import { Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model';
 const rootStyles = css({
-  position: 'relative',
-  display: 'block'
+  position: 'relative'
 });
 const smartLinkNodeToUrl = node => {
   var _node$attrs$url;
@@ -45,7 +44,7 @@ const RichTextType = ({
 }) => {
   const adfPlainText = useMemo(() => parseRichText(value), [value]);
   if (adfPlainText) {
-    return jsx("div", {
+    return jsx("span", {
       css: rootStyles,
       "data-testid": "richtext-plaintext"
     }, adfPlainText);

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

@@ -26,11 +26,19 @@ export const TableHeading = styled.th({
   [`${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: `${verticalPadding} ${"var(--ds-space-050, 4px)"}`,
     borderRight: `0.5px solid ${`var(--ds-border, ${N40})`}`,
     borderBottom: `2px solid ${`var(--ds-border, ${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(${lineHeight} * 2 + ${verticalPadding} * 4 + 2px)`,
     verticalAlign: 'bottom',
     backgroundColor: "var(--ds-elevation-surface-current, #FFF)"
@@ -46,6 +54,9 @@ export const TableHeading = 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: `${verticalPadding} ${"var(--ds-space-050, 4px)"}`,
     display: '-webkit-box',
     WebkitLineClamp: 2,

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

@@ -8,15 +8,24 @@ export const 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
  */
 export const getWidthCss = ({
   shouldUseWidth,
   width
-}) => shouldUseWidth ? {
-  width
-} : {
-  maxWidth: width
+}) => {
+  if (!width) {
+    return {};
+  }
+  if (shouldUseWidth) {
+    return {
+      width
+    };
+  } else {
+    return {
+      maxWidth: width
+    };
+  }
 };
 
 /**

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

@@ -253,7 +253,7 @@ export const PlainJiraIssuesConfigModal = props => {
     // 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
     const upToDateJql = searchBarJql !== null && searchBarJql !== void 0 ? searchBarJql : jql;
-    const upToDateJqlUrl = selectedJiraSite && jql && `${selectedJiraSite.url}/issues/?jql=${getBooleanFF('platform.linking-platform.datasource.enable-stricter-jql-encoding') ? encodeURIComponent(upToDateJql) : encodeURI(upToDateJql)}`;
+    const upToDateJqlUrl = selectedJiraSite && jql && `${selectedJiraSite.url}/issues/?jql=${encodeURIComponent(upToDateJql)}`;
     const filterSelectionCount = availableBasicFilterTypes.reduce((current, filter) => {
       var _basicFilterSelection;
       return {
@@ -384,7 +384,7 @@ export const PlainJiraIssuesConfigModal = props => {
       if (responseItems.length === 1 && retrieveUrlForSmartCardRender()) {
         url = retrieveUrlForSmartCardRender();
       } else {
-        url = `${selectedJiraSiteUrl}/issues/?jql=${getBooleanFF('platform.linking-platform.datasource.enable-stricter-jql-encoding') ? encodeURIComponent(jql) : encodeURI(jql)}`;
+        url = `${selectedJiraSiteUrl}/issues/?jql=${encodeURIComponent(jql)}`;
       }
       return jsx(SmartLink, {
         url: url

package/dist/esm/hooks/useDatasourceTableState.js

@@ -5,7 +5,6 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import isEqual from 'lodash/isEqual';
 import { DEFAULT_GET_DATASOURCE_DATA_PAGE_SIZE, useDatasourceClientExtension } from '@atlaskit/link-client-extension';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { useDatasourceAnalyticsEvents } from '../analytics';
 import useErrorLogger from './useErrorLogger';
 export var useDatasourceTableState = function useDatasourceTableState(_ref) {
@@ -196,6 +195,7 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
       shouldForceRequest,
       isFullSchemaLoaded,
       datasourceDataRequest,
+      _currentAbortControll,
       _yield$getDatasourceD3,
       _yield$getDatasourceD4,
       access,
@@ -208,7 +208,6 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
       nextPageCursor,
       _totalCount,
       schema,
-      _currentAbortControll,
       isUserLoadingNextPage,
       currentLoadedItemCount,
       newlyLoadedItemCount,
@@ -217,23 +216,21 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
           requestInfo = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {};
-          if (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 = {
@@ -244,10 +241,10 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
             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;
@@ -260,37 +257,26 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
           nextPageCursor = _yield$getDatasourceD5.nextPageCursor;
           _totalCount = _yield$getDatasourceD5.totalCount;
           schema = _yield$getDatasourceD5.schema;
-          if (!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 (!getBooleanFF('platform.linking-platform.datasource.enable-abort-controller')) {
-              var hasIdenticalResponseItems = isEqual(currentResponseItems, items);
-              if (hasIdenticalResponseItems || shouldRequestFirstPage) {
-                return items;
-              }
-              return [].concat(_toConsumableArray(currentResponseItems), _toConsumableArray(items));
-            }
             if (shouldRequestFirstPage) {
               return items;
             }
@@ -316,13 +302,9 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
           setStatus('resolved');
           _context2.next = 57;
           break;
-        case 44:
-          _context2.prev = 44;
-          _context2.t0 = _context2["catch"](8);
-          if (!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;
@@ -349,7 +331,7 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
         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 = useCallback(function (options) {
     setResponseItems(initialEmptyArray);
@@ -410,11 +392,9 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
     }
   }, [fieldKeys, lastRequestedFieldKeys, responseItems, reset, onNextPage]);
   useEffect(function () {
-    if (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/esm/ui/issue-like-table/draggable-table-heading.js

@@ -114,6 +114,11 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
     closestEdge = _useState6[0],
     setClosestEdge = _useState6[1];
   var dropTargetRef = 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;
   useEffect(function () {
     var cell = mainHeaderCellRef.current;
     invariant(cell);
@@ -221,7 +226,7 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
 
   // Handling column resizing
   useEffect(function () {
-    if (!onWidthChange) {
+    if (!resizeIsEnabled) {
       return;
     }
     var resizeHandle = columnResizeHandleRef.current;
@@ -277,7 +282,7 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
         }
       }
     });
-  }, [id, index, onWidthChange, state, tableId, width]);
+  }, [id, index, onWidthChange, resizeIsEnabled, state, tableId, width]);
   var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
     buttonHovered = _useState8[0],
@@ -286,7 +291,9 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
     _useState10 = _slicedToArray(_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 = useMemo(function () {
     return shouldShowTriggerIcon ? isDropdownOpen ? ChevronUp : ChevronDown : isWideEnoughToHaveChevron ? GlyphPlaceholder : undefined;
@@ -322,10 +329,10 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
     style: _objectSpread({
       cursor: 'grab'
     }, getWidthCss({
-      shouldUseWidth: !!onWidthChange,
+      shouldUseWidth: resizeIsEnabled,
       width: width
     }))
-  }, onWidthChange ? jsx("div", {
+  }, resizeIsEnabled ? jsx("div", {
     ref: columnResizeHandleRef,
     css: [resizerStyles, state.type === 'resizing' && resizingStyles],
     style: {