@atlaskit/link-datasource 0.29.5 → 0.30.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 0.30.0
+
+### Minor Changes
+
+- [`d8d641d500b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d8d641d500b) - [ux] Add issueLikeDataTableView in assets modal
+
 ## 0.29.5
 
 ### Patch Changes

package/dist/cjs/ui/assets-modal/modal/index.js

@@ -19,11 +19,15 @@ var _searchContainer = require("../search-container");
 var _loadingState = require("../search-container/loading-state");
 var _messages = require("./messages");
 var _renderAssetsContent = require("./render-assets-content");
-var _styled = require("./styled");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /** @jsx jsx */
 
+var modalBodyWrapperStyles = (0, _react2.css)({
+  display: 'grid',
+  height: '420px',
+  overflow: 'auto'
+});
 var AssetsModalTitle = (0, _react2.jsx)(_modalDialog.ModalTitle, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertObjectsTitle));
 var AssetsConfigModal = function AssetsConfigModal(props) {
   var datasourceId = props.datasourceId,
@@ -54,22 +58,32 @@ var AssetsConfigModal = function AssetsConfigModal(props) {
     return {
       aql: aql || '',
       schemaId: schemaId || '',
-      workspaceId: '',
+      workspaceId: workspaceId || '',
       cloudId: ''
     };
-  }, [aql, schemaId]);
+  }, [aql, schemaId, workspaceId]);
+  var isParametersSet = !!(aql && workspaceId && schemaId);
   var _useDatasourceTableSt = (0, _useDatasourceTableState.useDatasourceTableState)({
       datasourceId: datasourceId,
-      parameters: parameters
+      parameters: isParametersSet ? parameters : undefined,
+      fieldKeys: visibleColumnKeys
     }),
     status = _useDatasourceTableSt.status,
+    onNextPage = _useDatasourceTableSt.onNextPage,
     responseItems = _useDatasourceTableSt.responseItems,
+    reset = _useDatasourceTableSt.reset,
+    loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails,
+    hasNextPage = _useDatasourceTableSt.hasNextPage,
+    columns = _useDatasourceTableSt.columns,
     defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys;
+  var onVisibleColumnKeysChange = (0, _react.useCallback)(function (visibleColumnKeys) {
+    setVisibleColumnKeys(visibleColumnKeys);
+  }, []);
   (0, _react.useEffect)(function () {
     var newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
-  var isDisabled = status === 'rejected' || status === 'loading' || status === 'empty' || !!workspaceError || assetsClientLoading || !aql || !schemaId;
+  var isDisabled = !!workspaceError || status === 'rejected' || status === 'loading' || status === 'empty' || !!workspaceError || assetsClientLoading || !aql || !schemaId;
   var retrieveUrlForSmartCardRender = (0, _react.useCallback)(function () {
     var _data$key, _data$key$data;
     var _responseItems = (0, _slicedToArray2.default)(responseItems, 1),
@@ -117,9 +131,10 @@ var AssetsConfigModal = function AssetsConfigModal(props) {
     }
   }, [aql, datasourceId, onInsert, responseItems.length, retrieveUrlForSmartCardRender, schemaId, visibleColumnKeys]);
   var handleOnSearch = (0, _react.useCallback)(function (aql, schemaId) {
+    reset();
     setAql(aql);
     setSchemaId(schemaId);
-  }, []);
+  }, [reset]);
   var renderModalTitleContent = (0, _react.useCallback)(function () {
     if (workspaceError) {
       return undefined;
@@ -136,21 +151,36 @@ var AssetsConfigModal = function AssetsConfigModal(props) {
           objectSchema: objectSchema
         },
         onSearch: handleOnSearch,
-        modalTitle: AssetsModalTitle
+        modalTitle: AssetsModalTitle,
+        isSearching: status === 'loading'
       });
     }
-  }, [aql, assetsClientLoading, handleOnSearch, objectSchema, workspaceError, workspaceId]);
+  }, [aql, assetsClientLoading, handleOnSearch, objectSchema, status, workspaceError, workspaceId]);
   return (0, _react2.jsx)(_modalDialog.ModalTransition, null, (0, _react2.jsx)(_modalDialog.default, {
     testId: 'asset-datasource-modal',
     onClose: onCancel,
     width: "x-large",
-    shouldScrollInViewport: true
-  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, renderModalTitleContent()), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)(_styled.ModalContentContainer, null, workspaceError ? (0, _react2.jsx)(_modalLoadingError.ModalLoadingError, null) : (0, _react2.jsx)(_renderAssetsContent.RenderAssetsContent, {
+    shouldScrollInViewport: true,
+    shouldCloseOnOverlayClick: false
+  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, renderModalTitleContent()), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)("div", {
+    css: modalBodyWrapperStyles
+  }, workspaceError ? (0, _react2.jsx)(_modalLoadingError.ModalLoadingError, null) : (0, _react2.jsx)(_renderAssetsContent.RenderAssetsContent, {
     status: status,
-    responseItems: responseItems
+    responseItems: responseItems,
+    visibleColumnKeys: visibleColumnKeys,
+    onVisibleColumnKeysChange: onVisibleColumnKeysChange,
+    datasourceId: datasourceId,
+    aql: aql,
+    schemaId: schemaId,
+    onNextPage: onNextPage,
+    hasNextPage: hasNextPage,
+    loadDatasourceDetails: loadDatasourceDetails,
+    columns: columns,
+    defaultVisibleColumnKeys: defaultVisibleColumnKeys
   }))), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_standardButton.default, {
     appearance: "default",
-    onClick: onCancel
+    onClick: onCancel,
+    testId: 'asset-datasource-modal--cancel-button'
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.cancelButtonText)), (0, _react2.jsx)(_standardButton.default, {
     appearance: "primary",
     onClick: onInsertPressed,

package/dist/cjs/ui/assets-modal/modal/render-assets-content/index.js

@@ -1,27 +1,52 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RenderAssetsContent = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _modalLoadingError = require("../../../common/error-state/modal-loading-error");
 var _noResults = require("../../../common/error-state/no-results");
 var _issueLikeTable = require("../../../issue-like-table");
+var _initialStateView = require("./initial-state-view");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var RenderAssetsContent = function RenderAssetsContent(props) {
   var status = props.status,
-    responseItems = props.responseItems;
+    responseItems = props.responseItems,
+    visibleColumnKeys = props.visibleColumnKeys,
+    onNextPage = props.onNextPage,
+    hasNextPage = props.hasNextPage,
+    loadDatasourceDetails = props.loadDatasourceDetails,
+    columns = props.columns,
+    defaultVisibleColumnKeys = props.defaultVisibleColumnKeys,
+    onVisibleColumnKeysChange = props.onVisibleColumnKeysChange;
   var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  var issueLikeDataTableView = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react.default.createElement(_issueLikeTable.IssueLikeDataTableView, {
+      testId: "asset-datasource-table",
+      status: status,
+      columns: columns,
+      items: responseItems,
+      hasNextPage: hasNextPage,
+      visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
+      onNextPage: onNextPage,
+      onLoadDatasourceDetails: loadDatasourceDetails,
+      onVisibleColumnKeysChange: onVisibleColumnKeysChange
+    });
+  }, [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, status, visibleColumnKeys]);
   if (status === 'rejected') {
     return /*#__PURE__*/_react.default.createElement(_modalLoadingError.ModalLoadingError, null);
+  } else if (status === 'empty') {
+    return /*#__PURE__*/_react.default.createElement(_initialStateView.InitialStateView, null);
   } else if (resolvedWithNoResults) {
     return /*#__PURE__*/_react.default.createElement(_noResults.NoResults, null);
-  } else if (status === 'empty') {
+  } else if (status === 'loading' && !columns.length) {
     return /*#__PURE__*/_react.default.createElement(_issueLikeTable.EmptyState, {
-      testId: "assets-aql-datasource-modal--empty-state"
+      testId: "assets-aql-datasource-modal--loading-state"
     });
   }
-  return /*#__PURE__*/_react.default.createElement("p", null, "TODO add IssueLikeDataTableView component.");
+  return issueLikeDataTableView;
 };
 exports.RenderAssetsContent = RenderAssetsContent;