@atlaskit/link-datasource 0.19.1 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 0.20.0
+
+### Minor Changes
+
+- [`0407e628d5b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0407e628d5b) - [ux] Fix some table bugs
+
 ## 0.19.1
 
 ### Patch Changes

package/dist/cjs/hooks/useDatasourceTableState.js

@@ -87,7 +87,7 @@ var useDatasourceTableState = function useDatasourceTableState(datasourceId, par
           _context2.next = 5;
           return getDatasourceData(datasourceId, {
             parameters: parameters,
-            pageSize: 10,
+            pageSize: 20,
             pageCursor: nextCursor,
             fields: fields
           });

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

@@ -11,16 +11,20 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _board = _interopRequireDefault(require("@atlaskit/icon/glyph/board"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _select = require("@atlaskit/select");
+var _messages = require("./messages");
 var _excluded = ["isOpen"];
 /** @jsx jsx */
 var ColumnPicker = function ColumnPicker(_ref) {
-  var columns = _ref.columns,
+  var isDatasourceLoading = _ref.isDatasourceLoading,
+    columns = _ref.columns,
     selectedColumnKeys = _ref.selectedColumnKeys,
     onSelectedColumnKeysChange = _ref.onSelectedColumnKeysChange;
+  var intl = (0, _reactIntlNext.useIntl)();
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     allOptions = _useState2[0],
@@ -85,8 +89,7 @@ var ColumnPicker = function ColumnPicker(_ref) {
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isMulti: true,
-    placeholder: "Search for fields" // TODO Translate
-    ,
+    placeholder: intl.formatMessage(_messages.columnPickerMessages.search),
     "aria-label": "Search for fields",
     onChange: handleChange,
     target: function target(_ref8) {
@@ -103,7 +106,8 @@ var ColumnPicker = function ColumnPicker(_ref) {
         })),
         spacing: "compact",
         appearance: "subtle",
-        testId: "column-picker-trigger-button"
+        testId: "column-picker-trigger-button",
+        isDisabled: isDatasourceLoading
       }));
     }
   });

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.columnPickerMessages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var columnPickerMessages = (0, _reactIntlNext.defineMessages)({
+  search: {
+    id: 'linkDataSource.column-picker.search',
+    description: 'Search bar message to look for more fields',
+    defaultMessage: 'Search for fields'
+  }
+});
+exports.columnPickerMessages = columnPickerMessages;

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

@@ -87,7 +87,7 @@ function getColumnWidth(key, type) {
     case 'string':
       return BASE_WIDTH * 22;
     default:
-      undefined;
+      return undefined;
   }
 }
 var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
@@ -129,7 +129,7 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     }).filter(Boolean);
   }, [orderedColumns, visibleColumnKeys]);
 
-  // TODO seems like this component can't handle some combination of incremental data retreaval.
+  // TODO seems like this component can't handle some combination of incremental data retrieval.
   // If data comes first, then columns and then visibleColumnKeys it blows up,
   // or some other combination.
 
@@ -288,7 +288,7 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
         css: truncatedCellStyles
       }, content);
     };
-    if (onVisibleColumnKeysChange) {
+    if (onVisibleColumnKeysChange && status !== 'loading') {
       return (0, _react2.jsx)(_draggableTableHeading.DraggableTableHeading, {
         tableId: tableId,
         key: key,
@@ -311,6 +311,7 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
   }), onVisibleColumnKeysChange && (0, _react2.jsx)("th", {
     css: columnPickerHeaderStyles
   }, (0, _react2.jsx)(_columnPicker.ColumnPicker, {
+    isDatasourceLoading: status === 'loading',
     columns: orderedColumns,
     selectedColumnKeys: visibleColumnKeys,
     onSelectedColumnKeysChange: onSelectedColumnKeysChange

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

@@ -8,7 +8,7 @@ exports.TableHeading = exports.Table = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject, _templateObject2;
-var Table = _styled.default.table(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: auto;\n"])));
+var Table = _styled.default.table(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n"])));
 exports.Table = Table;
 var TableHeading = _styled.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  padding-block: ", ";\n  line-height: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)");
 exports.TableHeading = TableHeading;

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

@@ -268,7 +268,7 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.cancelButtonText)), (0, _react2.jsx)(_standardButton.default, {
     appearance: "primary",
     onClick: onInsertPressed,
-    isDisabled: !isParametersSet,
+    isDisabled: !isParametersSet || status === 'loading',
     testId: 'jira-jql-datasource-modal--insert-button'
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesButtonText))))));
 };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.19.1",
+	"version": "0.20.0",
 	"sideEffects": false
 }

package/dist/es2019/hooks/useDatasourceTableState.js

@@ -35,7 +35,7 @@ export const useDatasourceTableState = (datasourceId, parameters, fields) => {
       totalIssues
     } = await getDatasourceData(datasourceId, {
       parameters,
-      pageSize: 10,
+      pageSize: 20,
       pageCursor: nextCursor,
       fields
     });

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

@@ -2,15 +2,19 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useCallback, useEffect, useState } from 'react';
 import { jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
 import BoardIcon from '@atlaskit/icon/glyph/board';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { CheckboxOption, PopupSelect } from '@atlaskit/select';
+import { columnPickerMessages } from './messages';
 export const ColumnPicker = ({
+  isDatasourceLoading,
   columns,
   selectedColumnKeys,
   onSelectedColumnKeysChange
 }) => {
+  const intl = useIntl();
   const [allOptions, setAllOptions] = useState([]);
   const mapColumnToOption = useCallback(({
     key,
@@ -62,8 +66,7 @@ export const ColumnPicker = ({
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isMulti: true,
-    placeholder: "Search for fields" // TODO Translate
-    ,
+    placeholder: intl.formatMessage(columnPickerMessages.search),
     "aria-label": "Search for fields",
     onChange: handleChange,
     target: ({
@@ -80,7 +83,8 @@ export const ColumnPicker = ({
       })),
       spacing: "compact",
       appearance: "subtle",
-      testId: "column-picker-trigger-button"
+      testId: "column-picker-trigger-button",
+      isDisabled: isDatasourceLoading
     }))
   });
 };

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

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const columnPickerMessages = defineMessages({
+  search: {
+    id: 'linkDataSource.column-picker.search',
+    description: 'Search bar message to look for more fields',
+    defaultMessage: 'Search for fields'
+  }
+});

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

@@ -79,7 +79,7 @@ function getColumnWidth(key, type) {
     case 'string':
       return BASE_WIDTH * 22;
     default:
-      undefined;
+      return undefined;
   }
 }
 export const IssueLikeDataTableView = ({
@@ -103,7 +103,7 @@ export const IssueLikeDataTableView = ({
     key
   }) => visibleKey === key)).filter(Boolean), [orderedColumns, visibleColumnKeys]);
 
-  // TODO seems like this component can't handle some combination of incremental data retreaval.
+  // TODO seems like this component can't handle some combination of incremental data retrieval.
   // If data comes first, then columns and then visibleColumnKeys it blows up,
   // or some other combination.
 
@@ -252,7 +252,7 @@ export const IssueLikeDataTableView = ({
     const TruncatedContent = () => jsx("div", {
       css: truncatedCellStyles
     }, content);
-    if (onVisibleColumnKeysChange) {
+    if (onVisibleColumnKeysChange && status !== 'loading') {
       return jsx(DraggableTableHeading, {
         tableId: tableId,
         key: key,
@@ -275,6 +275,7 @@ export const IssueLikeDataTableView = ({
   }), onVisibleColumnKeysChange && jsx("th", {
     css: columnPickerHeaderStyles
   }, jsx(ColumnPicker, {
+    isDatasourceLoading: status === 'loading',
     columns: orderedColumns,
     selectedColumnKeys: visibleColumnKeys,
     onSelectedColumnKeysChange: onSelectedColumnKeysChange

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

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 export const Table = styled.table`
-  width: auto;
+  width: 100%;
 `;
 export const TableHeading = styled.th`
   position: relative;

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

@@ -217,7 +217,7 @@ export const JiraIssuesConfigModal = props => {
   }, jsx(FormattedMessage, modalMessages.cancelButtonText)), jsx(Button, {
     appearance: "primary",
     onClick: onInsertPressed,
-    isDisabled: !isParametersSet,
+    isDisabled: !isParametersSet || status === 'loading',
     testId: 'jira-jql-datasource-modal--insert-button'
   }, jsx(FormattedMessage, modalMessages.insertIssuesButtonText))))));
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.19.1",
+	"version": "0.20.0",
 	"sideEffects": false
 }

package/dist/esm/hooks/useDatasourceTableState.js

@@ -80,7 +80,7 @@ export var useDatasourceTableState = function useDatasourceTableState(datasource
           _context2.next = 5;
           return getDatasourceData(datasourceId, {
             parameters: parameters,
-            pageSize: 10,
+            pageSize: 20,
             pageCursor: nextCursor,
             fields: fields
           });

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

@@ -6,14 +6,18 @@ var _excluded = ["isOpen"];
 /** @jsx jsx */
 import { useCallback, useEffect, useState } from 'react';
 import { jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
 import BoardIcon from '@atlaskit/icon/glyph/board';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { CheckboxOption, PopupSelect } from '@atlaskit/select';
+import { columnPickerMessages } from './messages';
 export var ColumnPicker = function ColumnPicker(_ref) {
-  var columns = _ref.columns,
+  var isDatasourceLoading = _ref.isDatasourceLoading,
+    columns = _ref.columns,
     selectedColumnKeys = _ref.selectedColumnKeys,
     onSelectedColumnKeysChange = _ref.onSelectedColumnKeysChange;
+  var intl = useIntl();
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     allOptions = _useState2[0],
@@ -78,8 +82,7 @@ export var ColumnPicker = function ColumnPicker(_ref) {
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isMulti: true,
-    placeholder: "Search for fields" // TODO Translate
-    ,
+    placeholder: intl.formatMessage(columnPickerMessages.search),
     "aria-label": "Search for fields",
     onChange: handleChange,
     target: function target(_ref8) {
@@ -96,7 +99,8 @@ export var ColumnPicker = function ColumnPicker(_ref) {
         })),
         spacing: "compact",
         appearance: "subtle",
-        testId: "column-picker-trigger-button"
+        testId: "column-picker-trigger-button",
+        isDisabled: isDatasourceLoading
       }));
     }
   });

package/dist/esm/ui/issue-like-table/column-picker/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var columnPickerMessages = defineMessages({
+  search: {
+    id: 'linkDataSource.column-picker.search',
+    description: 'Search bar message to look for more fields',
+    defaultMessage: 'Search for fields'
+  }
+});

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

@@ -81,7 +81,7 @@ function getColumnWidth(key, type) {
     case 'string':
       return BASE_WIDTH * 22;
     default:
-      undefined;
+      return undefined;
   }
 }
 export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
@@ -123,7 +123,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     }).filter(Boolean);
   }, [orderedColumns, visibleColumnKeys]);
 
-  // TODO seems like this component can't handle some combination of incremental data retreaval.
+  // TODO seems like this component can't handle some combination of incremental data retrieval.
   // If data comes first, then columns and then visibleColumnKeys it blows up,
   // or some other combination.
 
@@ -282,7 +282,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
         css: truncatedCellStyles
       }, content);
     };
-    if (onVisibleColumnKeysChange) {
+    if (onVisibleColumnKeysChange && status !== 'loading') {
       return jsx(DraggableTableHeading, {
         tableId: tableId,
         key: key,
@@ -305,6 +305,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
   }), onVisibleColumnKeysChange && jsx("th", {
     css: columnPickerHeaderStyles
   }, jsx(ColumnPicker, {
+    isDatasourceLoading: status === 'loading',
     columns: orderedColumns,
     selectedColumnKeys: visibleColumnKeys,
     onSelectedColumnKeysChange: onSelectedColumnKeysChange

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

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
 import styled from '@emotion/styled';
-export var Table = styled.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: auto;\n"])));
+export var Table = styled.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
 export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  padding-block: ", ";\n  line-height: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)");

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

@@ -257,7 +257,7 @@ export var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
   }, jsx(FormattedMessage, modalMessages.cancelButtonText)), jsx(Button, {
     appearance: "primary",
     onClick: onInsertPressed,
-    isDisabled: !isParametersSet,
+    isDisabled: !isParametersSet || status === 'loading',
     testId: 'jira-jql-datasource-modal--insert-button'
   }, jsx(FormattedMessage, modalMessages.insertIssuesButtonText))))));
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.19.1",
+	"version": "0.20.0",
 	"sideEffects": false
 }

package/dist/types/ui/issue-like-table/column-picker/index.d.ts

@@ -1,3 +1,3 @@
 import { jsx } from '@emotion/react';
 import { ColumnPickerProps } from './types';
-export declare const ColumnPicker: ({ columns, selectedColumnKeys, onSelectedColumnKeysChange, }: ColumnPickerProps) => jsx.JSX.Element;
+export declare const ColumnPicker: ({ isDatasourceLoading, columns, selectedColumnKeys, onSelectedColumnKeysChange, }: ColumnPickerProps) => jsx.JSX.Element;

package/dist/types/ui/issue-like-table/column-picker/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const columnPickerMessages: {
+    search: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};

package/dist/types/ui/issue-like-table/column-picker/types.d.ts

@@ -1,5 +1,6 @@
 import { DatasourceResponseSchemaProperty } from '@atlaskit/linking-types';
 export type ColumnPickerProps = {
+    isDatasourceLoading: boolean;
     columns: DatasourceResponseSchemaProperty[];
     selectedColumnKeys: string[];
     onSelectedColumnKeysChange: (selectedColumnKeys: string[]) => void;

package/dist/types-ts4.5/ui/issue-like-table/column-picker/index.d.ts

@@ -1,3 +1,3 @@
 import { jsx } from '@emotion/react';
 import { ColumnPickerProps } from './types';
-export declare const ColumnPicker: ({ columns, selectedColumnKeys, onSelectedColumnKeysChange, }: ColumnPickerProps) => jsx.JSX.Element;
+export declare const ColumnPicker: ({ isDatasourceLoading, columns, selectedColumnKeys, onSelectedColumnKeysChange, }: ColumnPickerProps) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/issue-like-table/column-picker/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const columnPickerMessages: {
+    search: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};

package/dist/types-ts4.5/ui/issue-like-table/column-picker/types.d.ts

@@ -1,5 +1,6 @@
 import { DatasourceResponseSchemaProperty } from '@atlaskit/linking-types';
 export type ColumnPickerProps = {
+    isDatasourceLoading: boolean;
     columns: DatasourceResponseSchemaProperty[];
     selectedColumnKeys: string[];
     onSelectedColumnKeysChange: (selectedColumnKeys: string[]) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"