@atlaskit/link-datasource 0.29.3 → 0.29.5

package/dist/esm/hooks/useValidateAqlText.js

@@ -6,35 +6,64 @@ import { validateAql } from '../services/cmdbService';
 export var useValidateAqlText = function useValidateAqlText(workspaceId, hostname) {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    isLoading = _useState2[0],
-    setIsLoading = _useState2[1];
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isValidAqlText = _useState4[0],
+    setIsValidAqlText = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
   var validateAqlText = useCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(aql) {
-      var validateAqlResponse;
+      var isValid, validateAqlResponse;
       return _regeneratorRuntime.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 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
   };
 };

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 export { default as JiraIssuesConfigModal } from './ui/jira-issues-modal';
+export { default as AssetsConfigModal } from './ui/assets-modal';
 export { default as DatasourceTableView } from './ui/datasource-table-view';
 export { default as JSMAssetsConfigModal } from './ui/assets-modal';
 export { JIRA_LIST_OF_LINKS_DATASOURCE_ID } from './ui/jira-issues-modal';

package/dist/esm/services/cmdbService.js

@@ -2,13 +2,13 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { request } from '@atlaskit/linking-common';
 export var getWorkspaceId = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(hostname) {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _workspaceDetailsResp;
     var url, workspaceDetailsResponse;
     return _regeneratorRuntime.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 request('get', url, undefined, undefined, [200, 201, 202, 203, 204]);
         case 3:
@@ -26,18 +26,26 @@ export var getWorkspaceId = /*#__PURE__*/function () {
       }
     }, _callee);
   }));
-  return function getWorkspaceId(_x) {
+  return function getWorkspaceId() {
     return _ref.apply(this, arguments);
   };
 }();
-export var validateAql = function validateAql(workspaceId, data, hostname) {
-  var url = "".concat(hostname || '', "/gateway/api/jsm/assets/workspace/").concat(workspaceId, "/v1/aql/validate");
+export var validateAql = function validateAql(workspaceId, data) {
+  var url = "/gateway/api/jsm/assets/workspace/".concat(workspaceId, "/v1/aql/validate");
   return request('post', url, {
     qlQuery: data.qlQuery,
     context: 'SMART_LINKS'
   }, undefined, [200, 201, 202, 203, 204]);
 };
-export var fetchObjectSchemas = function fetchObjectSchemas(workspaceId, hostname) {
-  var url = "".concat(hostname || '', "/gateway/api/jsm/assets/workspace/").concat(workspaceId, "/v1/objectschema/list?maxResults=100");
+export var fetchObjectSchema = function fetchObjectSchema(workspaceId, schemaId) {
+  var url = "/gateway/api/jsm/assets/workspace/".concat(workspaceId, "/v1/objectschema/").concat(schemaId);
+  return request('get', url, undefined, undefined, [200, 201, 202, 203, 204]);
+};
+export 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 request('get', url, undefined, undefined, [200, 201, 202, 203, 204]);
 };

package/dist/esm/types/assets/types.js

@@ -1 +1,3 @@
-export {};
+// These are to enforce the field "name" property and keep everything typed
+export var objectSchemaKey = 'objectSchema';
+export var aqlKey = 'aql';

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

@@ -7,9 +7,13 @@ import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { useAssetsClient } from '../../../hooks/useAssetsClient';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
+import { ModalLoadingError } from '../../common/error-state/modal-loading-error';
+import { AssetsSearchContainer } from '../search-container';
+import { AssetsSearchContainerLoading } from '../search-container/loading-state';
 import { modalMessages } from './messages';
 import { RenderAssetsContent } from './render-assets-content';
 import { ModalContentContainer } from './styled';
+var AssetsModalTitle = jsx(ModalTitle, null, jsx(FormattedMessage, modalMessages.insertObjectsTitle));
 export var AssetsConfigModal = function AssetsConfigModal(props) {
   var datasourceId = props.datasourceId,
     initialParameters = props.parameters,
@@ -17,22 +21,30 @@ export var AssetsConfigModal = function AssetsConfigModal(props) {
     onInsert = props.onInsert,
     initialVisibleColumnKeys = props.visibleColumnKeys;
   var _useState = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql),
-    _useState2 = _slicedToArray(_useState, 1),
-    aql = _useState2[0];
+    _useState2 = _slicedToArray(_useState, 2),
+    aql = _useState2[0],
+    setAql = _useState2[1];
   var _useState3 = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.schemaId),
-    _useState4 = _slicedToArray(_useState3, 1),
-    schemaId = _useState4[0];
+    _useState4 = _slicedToArray(_useState3, 2),
+    schemaId = _useState4[0],
+    setSchemaId = _useState4[1];
   var _useState5 = useState(initialVisibleColumnKeys),
     _useState6 = _slicedToArray(_useState5, 2),
     visibleColumnKeys = _useState6[0],
     setVisibleColumnKeys = _useState6[1];
-  var _useAssetsClient = useAssetsClient(),
-    workspaceId = _useAssetsClient.workspaceId;
+
+  // If a workspaceError occurs this is a critical error
+  var _useAssetsClient = useAssetsClient(initialParameters),
+    workspaceId = _useAssetsClient.workspaceId,
+    workspaceError = _useAssetsClient.workspaceError,
+    objectSchema = _useAssetsClient.objectSchema,
+    assetsClientLoading = _useAssetsClient.assetsClientLoading;
   var parameters = useMemo(function () {
     return {
       aql: aql || '',
       schemaId: schemaId || '',
-      workspaceId: '' /* TODO FLY-1240: Add workspace Id */
+      workspaceId: '',
+      cloudId: ''
     };
   }, [aql, schemaId]);
   var _useDatasourceTableSt = useDatasourceTableState({
@@ -46,7 +58,7 @@ export 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 = useCallback(function () {
     var _data$key, _data$key$data;
     var _responseItems = _slicedToArray(responseItems, 1),
@@ -55,7 +67,7 @@ export 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 = useCallback(function () {
-    if (!aql) {
+    if (!aql || !schemaId) {
       return;
     }
     var firstAssetUrl = retrieveUrlForSmartCardRender();
@@ -93,12 +105,36 @@ export var AssetsConfigModal = function AssetsConfigModal(props) {
       });
     }
   }, [aql, datasourceId, onInsert, responseItems.length, retrieveUrlForSmartCardRender, schemaId, visibleColumnKeys]);
+  var handleOnSearch = useCallback(function (aql, schemaId) {
+    setAql(aql);
+    setSchemaId(schemaId);
+  }, []);
+  var renderModalTitleContent = useCallback(function () {
+    if (workspaceError) {
+      return undefined;
+    } else {
+      if (!workspaceId || assetsClientLoading) {
+        return jsx(AssetsSearchContainerLoading, {
+          modalTitle: AssetsModalTitle
+        });
+      }
+      return jsx(AssetsSearchContainer, {
+        workspaceId: workspaceId,
+        initialSearchData: {
+          aql: aql,
+          objectSchema: objectSchema
+        },
+        onSearch: handleOnSearch,
+        modalTitle: AssetsModalTitle
+      });
+    }
+  }, [aql, assetsClientLoading, handleOnSearch, objectSchema, workspaceError, workspaceId]);
   return jsx(ModalTransition, null, jsx(Modal, {
     testId: 'asset-datasource-modal',
     onClose: onCancel,
     width: "x-large",
     shouldScrollInViewport: true
-  }, jsx(ModalHeader, null, jsx(ModalTitle, null)), jsx(ModalBody, null, jsx(ModalContentContainer, null, jsx(RenderAssetsContent, {
+  }, jsx(ModalHeader, null, renderModalTitleContent()), jsx(ModalBody, null, jsx(ModalContentContainer, null, workspaceError ? jsx(ModalLoadingError, null) : jsx(RenderAssetsContent, {
     status: status,
     responseItems: responseItems
   }))), jsx(ModalFooter, null, jsx(Button, {

package/dist/esm/ui/assets-modal/modal/messages.js

@@ -9,5 +9,10 @@ export var modalMessages = 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'
   }
 });

package/dist/esm/ui/assets-modal/modal/styled.js

@@ -1,4 +1,4 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 import styled from '@emotion/styled';
-export var ModalContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: 'grid';\n  height: '420px';\n  overflow: 'auto';\n"])));
+export var ModalContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  height: 420px;\n  overflow: auto;\n"])));

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

@@ -0,0 +1,152 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/** @jsx jsx */
+import { useCallback, useRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button';
+import { Field } from '@atlaskit/form';
+import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
+import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
+import SearchIcon from '@atlaskit/icon/glyph/editor/search';
+import Spinner from '@atlaskit/spinner';
+import Textfield from '@atlaskit/textfield';
+import { useValidateAqlText } from '../../../../hooks/useValidateAqlText';
+import { aqlKey } from '../../../../types/assets/types';
+import { FieldContainer } from '../styled';
+import { searchInputMessages } from './messages';
+
+/* Meta isn't exported in @atlaskit/form
+Taken from packages/design-system/form/src/field.tsx */
+
+var searchButtonStyles = css({
+  marginRight: "var(--ds-space-075, 6px)"
+});
+export var SEARCH_DEBOUNCE_MS = 350;
+var renderValidatorIcon = function renderValidatorIcon(value, error, meta) {
+  if (value && meta !== null && meta !== void 0 && meta.validating) {
+    return jsx(Spinner, {
+      size: "medium",
+      testId: "assets-datasource-modal--aql-validating"
+    });
+  }
+  if (value && error) {
+    return jsx(CrossCircleIcon, {
+      label: "label",
+      primaryColor: "red",
+      size: "medium",
+      testId: "assets-datasource-modal--aql-invalid"
+    });
+  }
+  if (value && meta.valid) {
+    return jsx(CheckCircleIcon, {
+      label: "label",
+      primaryColor: "green",
+      size: "medium",
+      testId: "assets-datasource-modal--aql-valid"
+    });
+  }
+  return jsx(SearchIcon, {
+    label: "label",
+    size: "medium",
+    testId: "assets-datasource-modal--aql-idle"
+  });
+};
+export 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 = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var timeout = useRef();
+  var lastValue = useRef(value);
+  var lastResult = useRef(Promise.resolve(undefined));
+  var _useValidateAqlText = useValidateAqlText(workspaceId),
+    validateAqlText = _useValidateAqlText.validateAqlText;
+
+  // Validation expects undefined when valid and a string as an error message when invalid
+  var handleValidation = useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(newUnvalidatedQlQuery) {
+      var isValid;
+      return _regeneratorRuntime.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 jsx(FieldContainer, null, jsx(Field, {
+    name: aqlKey,
+    defaultValue: value,
+    validate: debouncedMemoizedValidation
+  }, function (_ref3) {
+    var fieldProps = _ref3.fieldProps,
+      meta = _ref3.meta,
+      error = _ref3.error;
+    return jsx(Textfield, _extends({}, fieldProps, {
+      elemBeforeInput: jsx("span", {
+        style: {
+          paddingLeft: 6,
+          width: 24
+        }
+      }, renderValidatorIcon(fieldProps.value, error, meta)),
+      elemAfterInput: jsx(Button, {
+        appearance: "primary",
+        css: searchButtonStyles,
+        iconBefore: jsx(SearchIcon, {
+          label: formatMessage(searchInputMessages.placeholder),
+          size: "medium"
+        }),
+        spacing: "none",
+        testId: "assets-datasource-modal--aql-search-button",
+        type: "submit"
+      }),
+      placeholder: formatMessage(searchInputMessages.placeholder),
+      testId: testId
+    }));
+  }));
+};

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

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { Skeleton } from '@atlaskit/linking-common';
+export var AssetsAqlSearchInputSkeleton = function AssetsAqlSearchInputSkeleton() {
+  return jsx(Skeleton, {
+    width: "100%",
+    height: "40px",
+    testId: "assets-datasource-modal--aql-search-input-skeleton"
+  });
+};

package/dist/esm/ui/assets-modal/search-container/aql-search-input/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var searchInputMessages = defineMessages({
+  placeholder: {
+    id: 'linkDataSource.assets.configModal.aqlSearchInput.placeholder',
+    description: 'Display text for AQL search button',
+    defaultMessage: 'Search via AQL'
+  }
+});

package/dist/esm/ui/assets-modal/search-container/index.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import Form from '@atlaskit/form';
+import { AqlSearchInput } from './aql-search-input';
+import { AssetsObjectSchemaSelect } from './object-schema-select';
+import { FormContainer, FormRowContainer, SchemaSelectContainer } from './styled';
+var DEFAULT_AQL_QUERY = '';
+var SEARCH_FORM_ID = 'linkDataSource.assets.configModal.searchContainer-form';
+export var AssetsSearchContainer = function AssetsSearchContainer(props) {
+  var onSearch = props.onSearch,
+    workspaceId = props.workspaceId,
+    initialSearchData = props.initialSearchData,
+    modalTitle = props.modalTitle;
+  var onFormSubmit = function onFormSubmit(searchFormValues) {
+    var aql = searchFormValues.aql,
+      objectSchema = searchFormValues.objectSchema;
+    if (objectSchema) {
+      // Pass the validated aql and object schema back to modal
+      onSearch(aql, objectSchema.value);
+    }
+  };
+  return jsx(Form, {
+    onSubmit: onFormSubmit
+  }, function (_ref) {
+    var _initialSearchData$ob, _initialSearchData$aq;
+    var formProps = _ref.formProps;
+    return jsx(FormContainer, _extends({}, formProps, {
+      id: SEARCH_FORM_ID
+    }), jsx(FormRowContainer, {
+      isNarrowGap: true
+    }, modalTitle, jsx(SchemaSelectContainer, null, jsx(AssetsObjectSchemaSelect, {
+      value: (_initialSearchData$ob = initialSearchData.objectSchema) !== null && _initialSearchData$ob !== void 0 ? _initialSearchData$ob : undefined,
+      workspaceId: workspaceId,
+      classNamePrefix: "assets-datasource-modal--object-schema-select"
+    }))), jsx(FormRowContainer, null, jsx(AqlSearchInput, {
+      value: (_initialSearchData$aq = initialSearchData.aql) !== null && _initialSearchData$aq !== void 0 ? _initialSearchData$aq : DEFAULT_AQL_QUERY,
+      workspaceId: workspaceId
+    })));
+  });
+};

package/dist/esm/ui/assets-modal/search-container/loading-state.js

@@ -0,0 +1,13 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { AssetsAqlSearchInputSkeleton } from './aql-search-input/loading-state';
+import { AssetsObjectSchemaSelectSkeleton } from './object-schema-select/loading-state';
+import { FormContainer, FormRowContainer, SchemaSelectContainer } from './styled';
+export var AssetsSearchContainerLoading = function AssetsSearchContainerLoading(_ref) {
+  var modalTitle = _ref.modalTitle;
+  return jsx(FormContainer, {
+    "data-testid": "assets-datasource-modal--search-container-skeleton"
+  }, jsx(FormRowContainer, {
+    isNarrowGap: true
+  }, modalTitle, jsx(SchemaSelectContainer, null, jsx(AssetsObjectSchemaSelectSkeleton, null))), jsx(FormRowContainer, null, jsx(AssetsAqlSearchInputSkeleton, null)));
+};

package/dist/esm/ui/assets-modal/search-container/object-schema-select/index.js

@@ -0,0 +1,94 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["onChange", "onFocus"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/** @jsx jsx */
+import { useState } from 'react';
+import { jsx } from '@emotion/react';
+import debounce from 'debounce-promise';
+import { useIntl } from 'react-intl-next';
+import { Field } from '@atlaskit/form';
+import { AsyncSelect } from '@atlaskit/select';
+import { useObjectSchemas } from '../../../../hooks/useObjectSchemas';
+import { objectSchemaKey } from '../../../../types/assets/types';
+import { FieldContainer } from '../styled';
+import { objectSchemaSelectMessages } from './messages';
+import { objectSchemaToSelectOption } from './utils';
+export var SEARCH_DEBOUNCE_MS = 350;
+export var AssetsObjectSchemaSelect = function AssetsObjectSchemaSelect(_ref) {
+  var value = _ref.value,
+    workspaceId = _ref.workspaceId,
+    _ref$classNamePrefix = _ref.classNamePrefix,
+    classNamePrefix = _ref$classNamePrefix === void 0 ? 'assets-datasource-modal--object-schema-select' : _ref$classNamePrefix;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useObjectSchemas = useObjectSchemas(workspaceId),
+    fetchObjectSchemas = _useObjectSchemas.fetchObjectSchemas,
+    objectSchemasLoading = _useObjectSchemas.objectSchemasLoading;
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    defaultOptions = _useState2[0],
+    setDefaultOptions = _useState2[1];
+  var selectedObjectSchema = value ? objectSchemaToSelectOption(value) : undefined;
+  var loadOptions = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(inputValue) {
+      var objectSchemas, options;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return fetchObjectSchemas(inputValue);
+          case 2:
+            objectSchemas = _context.sent;
+            options = objectSchemas ? objectSchemas.map(function (objectSchema) {
+              return objectSchemaToSelectOption(objectSchema);
+            }) : [];
+            return _context.abrupt("return", options);
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function loadOptions(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var debouncedLoadOptions = debounce(loadOptions, SEARCH_DEBOUNCE_MS);
+  var validateSchema = function validateSchema(value) {
+    if (!value || !value.value) {
+      return formatMessage(objectSchemaSelectMessages.schemaRequired);
+    }
+    return undefined;
+  };
+  return jsx(FieldContainer, null, jsx(Field, {
+    name: objectSchemaKey,
+    defaultValue: selectedObjectSchema,
+    validate: function validate(value) {
+      return validateSchema(value);
+    }
+  }, function (_ref3) {
+    var _ref3$fieldProps = _ref3.fieldProps,
+      _onChange = _ref3$fieldProps.onChange,
+      onFocus = _ref3$fieldProps.onFocus,
+      restFieldProps = _objectWithoutProperties(_ref3$fieldProps, _excluded);
+    return jsx(AsyncSelect, _extends({
+      classNamePrefix: classNamePrefix,
+      isLoading: objectSchemasLoading,
+      defaultOptions: defaultOptions || [],
+      isSearchable: true,
+      loadOptions: debouncedLoadOptions,
+      placeholder: formatMessage(objectSchemaSelectMessages.placeholder),
+      onChange: function onChange(newOption) {
+        return newOption && _onChange(newOption);
+      },
+      onFocus: function onFocus() {
+        if (!defaultOptions) {
+          loadOptions('').then(setDefaultOptions);
+        }
+      }
+    }, restFieldProps));
+  }));
+};

package/dist/esm/ui/assets-modal/search-container/object-schema-select/loading-state.js

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { Skeleton } from '@atlaskit/linking-common';
+export var AssetsObjectSchemaSelectSkeleton = function AssetsObjectSchemaSelectSkeleton() {
+  return jsx(Skeleton, {
+    width: "100%",
+    height: "40px",
+    testId: "assets-datasource-modal--object-schema-select-skeleton"
+  });
+};

package/dist/esm/ui/assets-modal/search-container/object-schema-select/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl-next';
+export var objectSchemaSelectMessages = defineMessages({
+  label: {
+    id: 'linkDataSource.assets.configModal.objectSchemaSelect.label',
+    description: 'Label text for a select input where users can choose an Assets object schema to use',
+    defaultMessage: 'Select schema'
+  },
+  placeholder: {
+    id: 'linkDataSource.assets.configModal.objectSchemaSelect.placeholder',
+    description: 'Placeholder text for a select input where users can choose an Assets object schema to use',
+    defaultMessage: 'Select schema'
+  },
+  schemaRequired: {
+    id: 'linkDataSource.assets.configModal.objectSchemaSelect.schemaRequired',
+    description: 'Validation message displayed to the user when the select is blank',
+    defaultMessage: 'Schema is required'
+  }
+});

package/dist/esm/ui/assets-modal/search-container/object-schema-select/utils.js

@@ -0,0 +1,6 @@
+export var objectSchemaToSelectOption = function objectSchemaToSelectOption(objectSchema) {
+  return {
+    label: objectSchema.name,
+    value: objectSchema.id
+  };
+};

package/dist/esm/ui/assets-modal/search-container/styled.js

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import styled from '@emotion/styled';
+export var FormRowContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n  flex-grow: 1;\n  width: 100%;\n"])), function (props) {
+  return props.isNarrowGap ? "var(--ds-space-100, 8px)" : "var(--ds-space-200, 16px)";
+});
+export var FormContainer = styled.form(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: grid;\n  row-gap: ", ";\n  width: 100%;\n"])), "var(--ds-space-200, 16px)");
+
+// Override the top margin of fields
+export var FieldContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  margin-top: calc(-1 * ", ");\n"])), "var(--ds-space-100, 8px)");
+export var SchemaSelectContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 200px;\n"])));

package/dist/esm/version.json

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