@atlaskit/link-datasource 2.12.4 → 2.12.5

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/link-datasource
 
+## 2.12.5
+
+### Patch Changes
+
+- [`ede5da85dd723`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ede5da85dd723) -
+  [ux] Fixes loading skeleton loosing padding for two-way sync
+
 ## 2.12.4
 
 ### Patch Changes

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

@@ -24,6 +24,7 @@ var _reorderWithEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/util/re
 var _pragmaticDragAndDropReactBeautifulDndAutoscroll = require("@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _typography = require("@atlaskit/theme/typography");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -368,7 +369,14 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       key: 'loading',
       cells: headerColumns.map(function (column) {
         return {
-          content: (0, _react2.jsx)(_linkingCommon.Skeleton, {
+          content: (0, _platformFeatureFlags.fg)('platform-datasources-enable-two-way-sync') ? (0, _react2.jsx)(_primitives.Box, {
+            paddingInline: "space.100"
+          }, (0, _react2.jsx)(_linkingCommon.Skeleton, {
+            borderRadius: 8,
+            width: "100%",
+            height: 14,
+            testId: "issues-table-row-loading"
+          })) : (0, _react2.jsx)(_linkingCommon.Skeleton, {
             borderRadius: 8,
             width: "100%",
             height: 14,
@@ -708,12 +716,6 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
         shouldUseWidth: shouldUseWidth,
         width: width
       });
-      // extra padding is required around skeleton loader to avoid vertical jumps when data loads
-      if (key !== null && key !== void 0 && key.includes('loading')) {
-        loadingRowStyle = _objectSpread(_objectSpread({}, loadingRowStyle), {}, {
-          paddingBlock: "var(--ds-space-100, 8px)"
-        });
-      }
 
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       if ((0, _platformFeatureFlags.fg)('platform-datasources-enable-two-way-sync')) {
@@ -727,6 +729,12 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
         }, content);
       } else {
+        // extra padding is required around skeleton loader to avoid vertical jumps when data loads
+        if (key !== null && key !== void 0 && key.includes('loading')) {
+          loadingRowStyle = _objectSpread(_objectSpread({}, loadingRowStyle), {}, {
+            paddingBlock: "var(--ds-space-100, 8px)"
+          });
+        }
         return (0, _react2.jsx)(_styled2.TableCell, {
           key: cellKey,
           "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),

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

@@ -19,6 +19,7 @@ import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/r
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { Box } from '@atlaskit/primitives';
 import { N40 } from '@atlaskit/theme/colors';
 import { fontFallback } from '@atlaskit/theme/typography';
 import Tooltip from '@atlaskit/tooltip';
@@ -365,7 +366,14 @@ export const IssueLikeDataTableView = ({
   const loadingRow = useMemo(() => ({
     key: 'loading',
     cells: headerColumns.map(column => ({
-      content: jsx(Skeleton, {
+      content: fg('platform-datasources-enable-two-way-sync') ? jsx(Box, {
+        paddingInline: "space.100"
+      }, jsx(Skeleton, {
+        borderRadius: 8,
+        width: "100%",
+        height: 14,
+        testId: "issues-table-row-loading"
+      })) : jsx(Skeleton, {
         borderRadius: 8,
         width: "100%",
         height: 14,
@@ -681,13 +689,6 @@ export const IssueLikeDataTableView = ({
       shouldUseWidth,
       width
     });
-    // extra padding is required around skeleton loader to avoid vertical jumps when data loads
-    if (key !== null && key !== void 0 && key.includes('loading')) {
-      loadingRowStyle = {
-        ...loadingRowStyle,
-        paddingBlock: "var(--ds-space-100, 8px)"
-      };
-    }
 
     // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
     if (fg('platform-datasources-enable-two-way-sync')) {
@@ -701,6 +702,13 @@ export const IssueLikeDataTableView = ({
         css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
       }, content);
     } else {
+      // extra padding is required around skeleton loader to avoid vertical jumps when data loads
+      if (key !== null && key !== void 0 && key.includes('loading')) {
+        loadingRowStyle = {
+          ...loadingRowStyle,
+          paddingBlock: "var(--ds-space-100, 8px)"
+        };
+      }
       return jsx(TableCell, {
         key: cellKey,
         "data-testid": testId && `${testId}--cell-${cellIndex}`,

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

@@ -26,6 +26,7 @@ import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/r
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { Box } from '@atlaskit/primitives';
 import { N40 } from '@atlaskit/theme/colors';
 import { fontFallback } from '@atlaskit/theme/typography';
 import Tooltip from '@atlaskit/tooltip';
@@ -364,7 +365,14 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
       key: 'loading',
       cells: headerColumns.map(function (column) {
         return {
-          content: jsx(Skeleton, {
+          content: fg('platform-datasources-enable-two-way-sync') ? jsx(Box, {
+            paddingInline: "space.100"
+          }, jsx(Skeleton, {
+            borderRadius: 8,
+            width: "100%",
+            height: 14,
+            testId: "issues-table-row-loading"
+          })) : jsx(Skeleton, {
             borderRadius: 8,
             width: "100%",
             height: 14,
@@ -704,12 +712,6 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
         shouldUseWidth: shouldUseWidth,
         width: width
       });
-      // extra padding is required around skeleton loader to avoid vertical jumps when data loads
-      if (key !== null && key !== void 0 && key.includes('loading')) {
-        loadingRowStyle = _objectSpread(_objectSpread({}, loadingRowStyle), {}, {
-          paddingBlock: "var(--ds-space-100, 8px)"
-        });
-      }
 
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       if (fg('platform-datasources-enable-two-way-sync')) {
@@ -723,6 +725,12 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
           css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
         }, content);
       } else {
+        // extra padding is required around skeleton loader to avoid vertical jumps when data loads
+        if (key !== null && key !== void 0 && key.includes('loading')) {
+          loadingRowStyle = _objectSpread(_objectSpread({}, loadingRowStyle), {}, {
+            paddingBlock: "var(--ds-space-100, 8px)"
+          });
+        }
         return jsx(TableCell, {
           key: cellKey,
           "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),

package/examples-helpers/buildIssueLikeTable.tsx

@@ -29,6 +29,7 @@ interface Props {
 	canResizeColumns?: boolean;
 	canControlWrapping?: boolean;
 	skipIntl?: boolean;
+	forceLoading?: boolean;
 }
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
@@ -40,7 +41,12 @@ const TableViewWrapper = styled.div({
 	height: '100%',
 });
 
-const ExampleBody = ({ isReadonly, canResizeColumns = true, canControlWrapping = true }: Props) => {
+const ExampleBody = ({
+	isReadonly,
+	canResizeColumns = true,
+	canControlWrapping = true,
+	forceLoading = false,
+}: Props) => {
 	const parameters = useMemo<JiraIssueDatasourceParameters>(
 		() => ({
 			cloudId: 'some-cloud-id',
@@ -89,12 +95,12 @@ const ExampleBody = ({ isReadonly, canResizeColumns = true, canControlWrapping =
 			{visibleColumnKeys.length > 0 && columns.length > 0 ? (
 				<IssueLikeDataTableView
 					testId="link-datasource"
-					items={responseItems}
-					itemIds={responseItemIds}
+					items={forceLoading ? [] : responseItems}
+					itemIds={forceLoading ? [] : responseItemIds}
 					onNextPage={onNextPage}
 					onLoadDatasourceDetails={loadDatasourceDetails}
 					hasNextPage={hasNextPage}
-					status={status}
+					status={forceLoading ? 'loading' : status}
 					columns={columns}
 					visibleColumnKeys={visibleColumnKeys}
 					onVisibleColumnKeysChange={isReadonly ? undefined : onVisibleColumnKeysChange}
@@ -114,6 +120,7 @@ export const ExampleIssueLikeTable = ({
 	isReadonly,
 	canResizeColumns,
 	canControlWrapping,
+	forceLoading,
 }: Props) => {
 	return (
 		<DatasourceExperienceIdProvider>
@@ -123,6 +130,7 @@ export const ExampleIssueLikeTable = ({
 						isReadonly={isReadonly}
 						canResizeColumns={canResizeColumns}
 						canControlWrapping={canControlWrapping}
+						forceLoading={forceLoading}
 					/>
 				</SmartCardProvider>
 			</IntlMessagesProvider>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "2.12.4",
+	"version": "2.12.5",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -65,7 +65,7 @@
 		"@atlaskit/modal-dialog": "^12.15.0",
 		"@atlaskit/outbound-auth-flow-client": "^3.4.5",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/popup": "^1.24.0",
+		"@atlaskit/popup": "^1.25.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^1.2.0",