@atlaskit/link-datasource 0.29.4 → 0.30.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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
+
+- [`2cb283138ce`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2cb283138ce) - Added Search Functionality to Assets Config Modal and added endpoints for Assets fetch mocks
+- Updated dependencies
+
 ## 0.29.4
 
 ### Patch Changes

package/dist/cjs/hooks/useAssetsClient.js

@@ -10,61 +10,80 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _cmdbService = require("../services/cmdbService");
-// TODO: Pass in localhost:3000 for testing locally - remember to remove this code after
-// You must also have a proxy server running to forward requests from http://localhost:3000 to a JSM premium url
-var useAssetsClient = function useAssetsClient(hostname) {
-  var _useState = (0, _react.useState)(),
+var useAssetsClient = function useAssetsClient(initialParameters) {
+  var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    objectSchemas = _useState2[0],
-    setObjectSchemas = _useState2[1];
+    loading = _useState2[0],
+    setLoading = _useState2[1];
   var _useState3 = (0, _react.useState)(),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     workspaceId = _useState4[0],
     setWorkspaceId = _useState4[1];
   var _useState5 = (0, _react.useState)(),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    error = _useState6[0],
-    setError = _useState6[1];
+    objectSchema = _useState6[0],
+    setObjectSchema = _useState6[1];
+  var _useState7 = (0, _react.useState)(),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    error = _useState8[0],
+    setError = _useState8[1];
   (0, _react.useEffect)(function () {
     (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-      var _workspaceId, objectSchemasResponse;
+      var _workspaceId, fetchedObjectSchema;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            _context.prev = 0;
-            _context.next = 3;
-            return (0, _cmdbService.getWorkspaceId)(hostname);
-          case 3:
+            setLoading(true);
+            setError(undefined);
+            _context.prev = 2;
+            _context.next = 5;
+            return (0, _cmdbService.getWorkspaceId)();
+          case 5:
             _workspaceId = _context.sent;
-            _context.next = 6;
-            return (0, _cmdbService.fetchObjectSchemas)(_workspaceId, hostname);
-          case 6:
-            objectSchemasResponse = _context.sent;
             setWorkspaceId(_workspaceId);
-            setObjectSchemas(objectSchemasResponse.values);
-            _context.next = 14;
-            break;
+            // Check schema from initial parameters still exists and fetch name for schema select
+            if (!(initialParameters !== null && initialParameters !== void 0 && initialParameters.schemaId)) {
+              _context.next = 17;
+              break;
+            }
+            _context.prev = 8;
+            _context.next = 11;
+            return (0, _cmdbService.fetchObjectSchema)(_workspaceId, initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.schemaId);
           case 11:
-            _context.prev = 11;
-            _context.t0 = _context["catch"](0);
-            if (_context.t0 instanceof Error) {
-              setError(_context.t0);
+            fetchedObjectSchema = _context.sent;
+            setObjectSchema(fetchedObjectSchema);
+            _context.next = 17;
+            break;
+          case 15:
+            _context.prev = 15;
+            _context.t0 = _context["catch"](8);
+          case 17:
+            _context.next = 22;
+            break;
+          case 19:
+            _context.prev = 19;
+            _context.t1 = _context["catch"](2);
+            if (_context.t1 instanceof Error) {
+              setError(_context.t1);
             } else {
               setError(new Error('Unexpected error occured'));
-              // eslint-disable-next-line no-console
-              console.error(_context.t0);
             }
-          case 14:
+          case 22:
+            _context.prev = 22;
+            setLoading(false);
+            return _context.finish(22);
+          case 25:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[0, 11]]);
+      }, _callee, null, [[2, 19, 22, 25], [8, 15]]);
     }))();
-  }, [hostname]);
+  }, [initialParameters]);
   return {
     workspaceId: workspaceId,
-    objectSchemas: objectSchemas,
-    error: error
+    workspaceError: error,
+    objectSchema: objectSchema,
+    assetsClientLoading: loading
   };
 };
 exports.useAssetsClient = useAssetsClient;

package/dist/cjs/hooks/useObjectSchemas.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useObjectSchemas = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _cmdbService = require("../services/cmdbService");
+var useObjectSchemas = function useObjectSchemas(workspaceId) {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    objectSchemas = _useState4[0],
+    setObjectSchemas = _useState4[1];
+  var _useState5 = (0, _react.useState)(),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
+  var request = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(query) {
+      var fetchedObjectSchemas, fetchedObjectSchemasResponse;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setLoading(true);
+            setError(undefined);
+            _context.prev = 2;
+            _context.next = 5;
+            return (0, _cmdbService.fetchObjectSchemas)(workspaceId, query);
+          case 5:
+            fetchedObjectSchemasResponse = _context.sent;
+            setObjectSchemas(fetchedObjectSchemasResponse.values);
+            fetchedObjectSchemas = fetchedObjectSchemasResponse.values;
+            _context.next = 13;
+            break;
+          case 10:
+            _context.prev = 10;
+            _context.t0 = _context["catch"](2);
+            if (_context.t0 instanceof Error) {
+              setError(_context.t0);
+            } else {
+              setError(new Error('Unexpected error occured'));
+            }
+          case 13:
+            _context.prev = 13;
+            setLoading(false);
+            return _context.finish(13);
+          case 16:
+            return _context.abrupt("return", fetchedObjectSchemas);
+          case 17:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 10, 13, 16]]);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [workspaceId]);
+  return {
+    objectSchemasLoading: loading,
+    objectSchemasError: error,
+    objectSchemas: objectSchemas,
+    fetchObjectSchemas: request
+  };
+};
+exports.useObjectSchemas = useObjectSchemas;

package/dist/cjs/hooks/useValidateAqlText.js

@@ -13,36 +13,65 @@ var _cmdbService = require("../services/cmdbService");
 var useValidateAqlText = function useValidateAqlText(workspaceId, hostname) {
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isLoading = _useState2[0],
-    setIsLoading = _useState2[1];
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isValidAqlText = _useState4[0],
+    setIsValidAqlText = _useState4[1];
+  var _useState5 = (0, _react.useState)(),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
   var validateAqlText = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(aql) {
-      var validateAqlResponse;
+      var isValid, validateAqlResponse;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            setIsLoading(true);
-            _context.next = 3;
+            setLoading(true);
+            setError(undefined);
+            isValid = false;
+            _context.prev = 3;
+            _context.next = 6;
             return (0, _cmdbService.validateAql)(workspaceId, {
               qlQuery: aql
-            }, hostname);
-          case 3:
-            validateAqlResponse = _context.sent;
-            setIsLoading(false);
-            return _context.abrupt("return", validateAqlResponse.isValid);
+            });
           case 6:
+            validateAqlResponse = _context.sent;
+            setIsValidAqlText(validateAqlResponse.isValid);
+            isValid = validateAqlResponse.isValid;
+            _context.next = 14;
+            break;
+          case 11:
+            _context.prev = 11;
+            _context.t0 = _context["catch"](3);
+            if (_context.t0 instanceof Error) {
+              setError(_context.t0);
+            } else {
+              setError(new Error('Unexpected error occured'));
+            }
+          case 14:
+            _context.prev = 14;
+            setLoading(false);
+            return _context.finish(14);
+          case 17:
+            return _context.abrupt("return", isValid);
+          case 18:
           case "end":
             return _context.stop();
         }
-      }, _callee);
+      }, _callee, null, [[3, 11, 14, 17]]);
     }));
     return function (_x) {
       return _ref.apply(this, arguments);
     };
-  }(), [hostname, workspaceId]);
+  }(), [workspaceId]);
   return {
+    isValidAqlText: isValidAqlText,
     validateAqlText: validateAqlText,
-    isLoading: isLoading
+    validateAqlTextLoading: loading,
+    validateAqlTextError: error
   };
 };
 exports.useValidateAqlText = useValidateAqlText;

package/dist/cjs/services/cmdbService.js

@@ -4,18 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateAql = exports.getWorkspaceId = exports.fetchObjectSchemas = void 0;
+exports.validateAql = exports.getWorkspaceId = exports.fetchObjectSchemas = exports.fetchObjectSchema = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _linkingCommon = require("@atlaskit/linking-common");
 var getWorkspaceId = /*#__PURE__*/function () {
-  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(hostname) {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
     var _workspaceDetailsResp;
     var url, workspaceDetailsResponse;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          url = "".concat(hostname || '', "/rest/servicedesk/cmdb/latest/workspace");
+          url = '/rest/servicedesk/cmdb/latest/workspace';
           _context.next = 3;
           return (0, _linkingCommon.request)('get', url, undefined, undefined, [200, 201, 202, 203, 204]);
         case 3:
@@ -33,21 +33,30 @@ var getWorkspaceId = /*#__PURE__*/function () {
       }
     }, _callee);
   }));
-  return function getWorkspaceId(_x) {
+  return function getWorkspaceId() {
     return _ref.apply(this, arguments);
   };
 }();
 exports.getWorkspaceId = getWorkspaceId;
-var validateAql = function validateAql(workspaceId, data, hostname) {
-  var url = "".concat(hostname || '', "/gateway/api/jsm/assets/workspace/").concat(workspaceId, "/v1/aql/validate");
+var validateAql = function validateAql(workspaceId, data) {
+  var url = "/gateway/api/jsm/assets/workspace/".concat(workspaceId, "/v1/aql/validate");
   return (0, _linkingCommon.request)('post', url, {
     qlQuery: data.qlQuery,
     context: 'SMART_LINKS'
   }, undefined, [200, 201, 202, 203, 204]);
 };
 exports.validateAql = validateAql;
-var fetchObjectSchemas = function fetchObjectSchemas(workspaceId, hostname) {
-  var url = "".concat(hostname || '', "/gateway/api/jsm/assets/workspace/").concat(workspaceId, "/v1/objectschema/list?maxResults=100");
+var fetchObjectSchema = function fetchObjectSchema(workspaceId, schemaId) {
+  var url = "/gateway/api/jsm/assets/workspace/".concat(workspaceId, "/v1/objectschema/").concat(schemaId);
+  return (0, _linkingCommon.request)('get', url, undefined, undefined, [200, 201, 202, 203, 204]);
+};
+exports.fetchObjectSchema = fetchObjectSchema;
+var fetchObjectSchemas = function fetchObjectSchemas(workspaceId, query) {
+  var queryParams = new URLSearchParams();
+  queryParams.set('maxResults', '20');
+  queryParams.set('includeCounts', 'false');
+  query && queryParams.set('query', query);
+  var url = "/gateway/api/jsm/assets/workspace/".concat(workspaceId, "/v1/objectschema/list?").concat(queryParams);
   return (0, _linkingCommon.request)('get', url, undefined, undefined, [200, 201, 202, 203, 204]);
 };
 exports.fetchObjectSchemas = fetchObjectSchemas;

package/dist/cjs/types/assets/types.js

@@ -2,4 +2,10 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.objectSchemaKey = exports.aqlKey = void 0;
+// These are to enforce the field "name" property and keep everything typed
+var objectSchemaKey = 'objectSchema';
+exports.objectSchemaKey = objectSchemaKey;
+var aqlKey = 'aql';
+exports.aqlKey = aqlKey;

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

@@ -14,13 +14,21 @@ var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 var _useAssetsClient2 = require("../../../hooks/useAssetsClient");
 var _useDatasourceTableState = require("../../../hooks/useDatasourceTableState");
+var _modalLoadingError = require("../../common/error-state/modal-loading-error");
+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,
     initialParameters = props.parameters,
@@ -28,36 +36,54 @@ var AssetsConfigModal = function AssetsConfigModal(props) {
     onInsert = props.onInsert,
     initialVisibleColumnKeys = props.visibleColumnKeys;
   var _useState = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
-    aql = _useState2[0];
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    aql = _useState2[0],
+    setAql = _useState2[1];
   var _useState3 = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.schemaId),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
-    schemaId = _useState4[0];
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    schemaId = _useState4[0],
+    setSchemaId = _useState4[1];
   var _useState5 = (0, _react.useState)(initialVisibleColumnKeys),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     visibleColumnKeys = _useState6[0],
     setVisibleColumnKeys = _useState6[1];
-  var _useAssetsClient = (0, _useAssetsClient2.useAssetsClient)(),
-    workspaceId = _useAssetsClient.workspaceId;
+
+  // If a workspaceError occurs this is a critical error
+  var _useAssetsClient = (0, _useAssetsClient2.useAssetsClient)(initialParameters),
+    workspaceId = _useAssetsClient.workspaceId,
+    workspaceError = _useAssetsClient.workspaceError,
+    objectSchema = _useAssetsClient.objectSchema,
+    assetsClientLoading = _useAssetsClient.assetsClientLoading;
   var parameters = (0, _react.useMemo)(function () {
     return {
       aql: aql || '',
       schemaId: schemaId || '',
-      workspaceId: '' /* TODO FLY-1240: Add workspace Id */
+      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' || !aql || !workspaceId || !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),
@@ -66,7 +92,7 @@ var AssetsConfigModal = function AssetsConfigModal(props) {
     return data === null || data === void 0 ? void 0 : (_data$key = data.key) === null || _data$key === void 0 ? void 0 : (_data$key$data = _data$key.data) === null || _data$key$data === void 0 ? void 0 : _data$key$data.url;
   }, [responseItems]);
   var onInsertPressed = (0, _react.useCallback)(function () {
-    if (!aql) {
+    if (!aql || !schemaId) {
       return;
     }
     var firstAssetUrl = retrieveUrlForSmartCardRender();
@@ -104,17 +130,57 @@ 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;
+    } else {
+      if (!workspaceId || assetsClientLoading) {
+        return (0, _react2.jsx)(_loadingState.AssetsSearchContainerLoading, {
+          modalTitle: AssetsModalTitle
+        });
+      }
+      return (0, _react2.jsx)(_searchContainer.AssetsSearchContainer, {
+        workspaceId: workspaceId,
+        initialSearchData: {
+          aql: aql,
+          objectSchema: objectSchema
+        },
+        onSearch: handleOnSearch,
+        modalTitle: AssetsModalTitle,
+        isSearching: status === 'loading'
+      });
+    }
+  }, [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, (0, _react2.jsx)(_modalDialog.ModalTitle, null)), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)(_styled.ModalContentContainer, 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/messages.js

@@ -15,6 +15,11 @@ var modalMessages = (0, _reactIntlNext.defineMessages)({
     id: 'linkDataSource.assets.configmodal.insertIssuesButtonText',
     description: 'Button text to insert the displayed content',
     defaultMessage: 'Insert objects'
+  },
+  insertObjectsTitle: {
+    id: 'linkDataSource.assets.configmodal.insertObjectsTitle',
+    description: 'Title for the Assets Objects Datasource config modal which prefixes a select picker',
+    defaultMessage: 'Insert objects from'
   }
 });
 exports.modalMessages = modalMessages;

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;