@atlaskit/link-datasource 0.29.4 → 0.29.5

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/link-datasource
 
+## 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,6 +14,9 @@ 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");
@@ -21,6 +24,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 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,22 +32,30 @@ 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: '',
+      cloudId: ''
     };
   }, [aql, schemaId]);
   var _useDatasourceTableSt = (0, _useDatasourceTableState.useDatasourceTableState)({
@@ -57,7 +69,7 @@ var AssetsConfigModal = function AssetsConfigModal(props) {
     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 = 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 +78,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,12 +116,36 @@ var AssetsConfigModal = function AssetsConfigModal(props) {
       });
     }
   }, [aql, datasourceId, onInsert, responseItems.length, retrieveUrlForSmartCardRender, schemaId, visibleColumnKeys]);
+  var handleOnSearch = (0, _react.useCallback)(function (aql, schemaId) {
+    setAql(aql);
+    setSchemaId(schemaId);
+  }, []);
+  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
+      });
+    }
+  }, [aql, assetsClientLoading, handleOnSearch, objectSchema, 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, {
+  }, (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, {
     status: status,
     responseItems: responseItems
   }))), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_standardButton.default, {

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/styled.js

@@ -8,5 +8,5 @@ exports.ModalContentContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject;
-var ModalContentContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: 'grid';\n  height: '420px';\n  overflow: 'auto';\n"])));
+var ModalContentContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  height: 420px;\n  overflow: auto;\n"])));
 exports.ModalContentContainer = ModalContentContainer;

package/dist/cjs/ui/assets-modal/search-container/aql-search-input/index.js

@@ -0,0 +1,161 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEARCH_DEBOUNCE_MS = exports.AqlSearchInput = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _form = require("@atlaskit/form");
+var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
+var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
+var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _useValidateAqlText2 = require("../../../../hooks/useValidateAqlText");
+var _types = require("../../../../types/assets/types");
+var _styled = require("../styled");
+var _messages = require("./messages");
+/** @jsx jsx */
+
+/* Meta isn't exported in @atlaskit/form
+Taken from packages/design-system/form/src/field.tsx */
+
+var searchButtonStyles = (0, _react2.css)({
+  marginRight: "var(--ds-space-075, 6px)"
+});
+var SEARCH_DEBOUNCE_MS = 350;
+exports.SEARCH_DEBOUNCE_MS = SEARCH_DEBOUNCE_MS;
+var renderValidatorIcon = function renderValidatorIcon(value, error, meta) {
+  if (value && meta !== null && meta !== void 0 && meta.validating) {
+    return (0, _react2.jsx)(_spinner.default, {
+      size: "medium",
+      testId: "assets-datasource-modal--aql-validating"
+    });
+  }
+  if (value && error) {
+    return (0, _react2.jsx)(_crossCircle.default, {
+      label: "label",
+      primaryColor: "red",
+      size: "medium",
+      testId: "assets-datasource-modal--aql-invalid"
+    });
+  }
+  if (value && meta.valid) {
+    return (0, _react2.jsx)(_checkCircle.default, {
+      label: "label",
+      primaryColor: "green",
+      size: "medium",
+      testId: "assets-datasource-modal--aql-valid"
+    });
+  }
+  return (0, _react2.jsx)(_search.default, {
+    label: "label",
+    size: "medium",
+    testId: "assets-datasource-modal--aql-idle"
+  });
+};
+var AqlSearchInput = function AqlSearchInput(_ref) {
+  var value = _ref.value,
+    workspaceId = _ref.workspaceId,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'assets-datasource-modal--aql-search-input' : _ref$testId;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var timeout = (0, _react.useRef)();
+  var lastValue = (0, _react.useRef)(value);
+  var lastResult = (0, _react.useRef)(Promise.resolve(undefined));
+  var _useValidateAqlText = (0, _useValidateAqlText2.useValidateAqlText)(workspaceId),
+    validateAqlText = _useValidateAqlText.validateAqlText;
+
+  // Validation expects undefined when valid and a string as an error message when invalid
+  var handleValidation = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(newUnvalidatedQlQuery) {
+      var isValid;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (newUnvalidatedQlQuery) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return", undefined);
+          case 2:
+            _context.next = 4;
+            return validateAqlText(newUnvalidatedQlQuery);
+          case 4:
+            isValid = _context.sent;
+            return _context.abrupt("return", isValid ? undefined : 'invalid');
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [validateAqlText]);
+
+  /* Debounce async validation for input, validation is also called on every field change
+  in a form so we need to also memoize. The async validate function is expected to either:
+  Immediately return a promise (which is then collected into an array, every single time validation is run),
+  or immediately return either undefined or an error message */
+  var debouncedMemoizedValidation = function debouncedMemoizedValidation(value) {
+    return new Promise(function (resolve) {
+      if (timeout.current) {
+        timeout.current();
+      }
+      if (value !== lastValue.current) {
+        var timerId = setTimeout(function () {
+          lastValue.current = value;
+          lastResult.current = handleValidation(value);
+          resolve(lastResult.current);
+        }, SEARCH_DEBOUNCE_MS);
+        timeout.current = function () {
+          clearTimeout(timerId);
+          resolve('debouncing');
+        };
+      } else {
+        resolve(lastResult.current);
+      }
+    });
+  };
+  return (0, _react2.jsx)(_styled.FieldContainer, null, (0, _react2.jsx)(_form.Field, {
+    name: _types.aqlKey,
+    defaultValue: value,
+    validate: debouncedMemoizedValidation
+  }, function (_ref3) {
+    var fieldProps = _ref3.fieldProps,
+      meta = _ref3.meta,
+      error = _ref3.error;
+    return (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, {
+      elemBeforeInput: (0, _react2.jsx)("span", {
+        style: {
+          paddingLeft: 6,
+          width: 24
+        }
+      }, renderValidatorIcon(fieldProps.value, error, meta)),
+      elemAfterInput: (0, _react2.jsx)(_button.default, {
+        appearance: "primary",
+        css: searchButtonStyles,
+        iconBefore: (0, _react2.jsx)(_search.default, {
+          label: formatMessage(_messages.searchInputMessages.placeholder),
+          size: "medium"
+        }),
+        spacing: "none",
+        testId: "assets-datasource-modal--aql-search-button",
+        type: "submit"
+      }),
+      placeholder: formatMessage(_messages.searchInputMessages.placeholder),
+      testId: testId
+    }));
+  }));
+};
+exports.AqlSearchInput = AqlSearchInput;

package/dist/cjs/ui/assets-modal/search-container/aql-search-input/loading-state.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AssetsAqlSearchInputSkeleton = void 0;
+var _react = require("@emotion/react");
+var _linkingCommon = require("@atlaskit/linking-common");
+/** @jsx jsx */
+
+var AssetsAqlSearchInputSkeleton = function AssetsAqlSearchInputSkeleton() {
+  return (0, _react.jsx)(_linkingCommon.Skeleton, {
+    width: "100%",
+    height: "40px",
+    testId: "assets-datasource-modal--aql-search-input-skeleton"
+  });
+};
+exports.AssetsAqlSearchInputSkeleton = AssetsAqlSearchInputSkeleton;