@atlaskit/link-datasource 0.29.4 → 0.29.5

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.searchInputMessages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var searchInputMessages = (0, _reactIntlNext.defineMessages)({
+  placeholder: {
+    id: 'linkDataSource.assets.configModal.aqlSearchInput.placeholder',
+    description: 'Display text for AQL search button',
+    defaultMessage: 'Search via AQL'
+  }
+});
+exports.searchInputMessages = searchInputMessages;

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

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AssetsSearchContainer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@emotion/react");
+var _form = _interopRequireDefault(require("@atlaskit/form"));
+var _aqlSearchInput = require("./aql-search-input");
+var _objectSchemaSelect = require("./object-schema-select");
+var _styled = require("./styled");
+/** @jsx jsx */
+
+var DEFAULT_AQL_QUERY = '';
+var SEARCH_FORM_ID = 'linkDataSource.assets.configModal.searchContainer-form';
+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 (0, _react.jsx)(_form.default, {
+    onSubmit: onFormSubmit
+  }, function (_ref) {
+    var _initialSearchData$ob, _initialSearchData$aq;
+    var formProps = _ref.formProps;
+    return (0, _react.jsx)(_styled.FormContainer, (0, _extends2.default)({}, formProps, {
+      id: SEARCH_FORM_ID
+    }), (0, _react.jsx)(_styled.FormRowContainer, {
+      isNarrowGap: true
+    }, modalTitle, (0, _react.jsx)(_styled.SchemaSelectContainer, null, (0, _react.jsx)(_objectSchemaSelect.AssetsObjectSchemaSelect, {
+      value: (_initialSearchData$ob = initialSearchData.objectSchema) !== null && _initialSearchData$ob !== void 0 ? _initialSearchData$ob : undefined,
+      workspaceId: workspaceId,
+      classNamePrefix: "assets-datasource-modal--object-schema-select"
+    }))), (0, _react.jsx)(_styled.FormRowContainer, null, (0, _react.jsx)(_aqlSearchInput.AqlSearchInput, {
+      value: (_initialSearchData$aq = initialSearchData.aql) !== null && _initialSearchData$aq !== void 0 ? _initialSearchData$aq : DEFAULT_AQL_QUERY,
+      workspaceId: workspaceId
+    })));
+  });
+};
+exports.AssetsSearchContainer = AssetsSearchContainer;

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AssetsSearchContainerLoading = void 0;
+var _react = require("@emotion/react");
+var _loadingState = require("./aql-search-input/loading-state");
+var _loadingState2 = require("./object-schema-select/loading-state");
+var _styled = require("./styled");
+/** @jsx jsx */
+
+var AssetsSearchContainerLoading = function AssetsSearchContainerLoading(_ref) {
+  var modalTitle = _ref.modalTitle;
+  return (0, _react.jsx)(_styled.FormContainer, {
+    "data-testid": "assets-datasource-modal--search-container-skeleton"
+  }, (0, _react.jsx)(_styled.FormRowContainer, {
+    isNarrowGap: true
+  }, modalTitle, (0, _react.jsx)(_styled.SchemaSelectContainer, null, (0, _react.jsx)(_loadingState2.AssetsObjectSchemaSelectSkeleton, null))), (0, _react.jsx)(_styled.FormRowContainer, null, (0, _react.jsx)(_loadingState.AssetsAqlSearchInputSkeleton, null)));
+};
+exports.AssetsSearchContainerLoading = AssetsSearchContainerLoading;

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

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEARCH_DEBOUNCE_MS = exports.AssetsObjectSchemaSelect = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+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 _react2 = require("@emotion/react");
+var _debouncePromise = _interopRequireDefault(require("debounce-promise"));
+var _reactIntlNext = require("react-intl-next");
+var _form = require("@atlaskit/form");
+var _select = require("@atlaskit/select");
+var _useObjectSchemas2 = require("../../../../hooks/useObjectSchemas");
+var _types = require("../../../../types/assets/types");
+var _styled = require("../styled");
+var _messages = require("./messages");
+var _utils = require("./utils");
+var _excluded = ["onChange", "onFocus"];
+/** @jsx jsx */
+var SEARCH_DEBOUNCE_MS = 350;
+exports.SEARCH_DEBOUNCE_MS = SEARCH_DEBOUNCE_MS;
+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 = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useObjectSchemas = (0, _useObjectSchemas2.useObjectSchemas)(workspaceId),
+    fetchObjectSchemas = _useObjectSchemas.fetchObjectSchemas,
+    objectSchemasLoading = _useObjectSchemas.objectSchemasLoading;
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    defaultOptions = _useState2[0],
+    setDefaultOptions = _useState2[1];
+  var selectedObjectSchema = value ? (0, _utils.objectSchemaToSelectOption)(value) : undefined;
+  var loadOptions = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(inputValue) {
+      var objectSchemas, options;
+      return _regenerator.default.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 (0, _utils.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 = (0, _debouncePromise.default)(loadOptions, SEARCH_DEBOUNCE_MS);
+  var validateSchema = function validateSchema(value) {
+    if (!value || !value.value) {
+      return formatMessage(_messages.objectSchemaSelectMessages.schemaRequired);
+    }
+    return undefined;
+  };
+  return (0, _react2.jsx)(_styled.FieldContainer, null, (0, _react2.jsx)(_form.Field, {
+    name: _types.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 = (0, _objectWithoutProperties2.default)(_ref3$fieldProps, _excluded);
+    return (0, _react2.jsx)(_select.AsyncSelect, (0, _extends2.default)({
+      classNamePrefix: classNamePrefix,
+      isLoading: objectSchemasLoading,
+      defaultOptions: defaultOptions || [],
+      isSearchable: true,
+      loadOptions: debouncedLoadOptions,
+      placeholder: formatMessage(_messages.objectSchemaSelectMessages.placeholder),
+      onChange: function onChange(newOption) {
+        return newOption && _onChange(newOption);
+      },
+      onFocus: function onFocus() {
+        if (!defaultOptions) {
+          loadOptions('').then(setDefaultOptions);
+        }
+      }
+    }, restFieldProps));
+  }));
+};
+exports.AssetsObjectSchemaSelect = AssetsObjectSchemaSelect;

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

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

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.objectSchemaSelectMessages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var objectSchemaSelectMessages = (0, _reactIntlNext.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'
+  }
+});
+exports.objectSchemaSelectMessages = objectSchemaSelectMessages;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.objectSchemaToSelectOption = void 0;
+var objectSchemaToSelectOption = function objectSchemaToSelectOption(objectSchema) {
+  return {
+    label: objectSchema.name,
+    value: objectSchema.id
+  };
+};
+exports.objectSchemaToSelectOption = objectSchemaToSelectOption;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SchemaSelectContainer = exports.FormRowContainer = exports.FormContainer = exports.FieldContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var FormRowContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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)";
+});
+exports.FormRowContainer = FormRowContainer;
+var FormContainer = _styled.default.form(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  row-gap: ", ";\n  width: 100%;\n"])), "var(--ds-space-200, 16px)");
+
+// Override the top margin of fields
+exports.FormContainer = FormContainer;
+var FieldContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  margin-top: calc(-1 * ", ");\n"])), "var(--ds-space-100, 8px)");
+exports.FieldContainer = FieldContainer;
+var SchemaSelectContainer = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 200px;\n"])));
+exports.SchemaSelectContainer = SchemaSelectContainer;

package/dist/cjs/version.json

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

package/dist/es2019/hooks/useAssetsClient.js

@@ -1,32 +1,41 @@
 import { useEffect, useState } from 'react';
-import { fetchObjectSchemas, getWorkspaceId } from '../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
-export const useAssetsClient = hostname => {
-  const [objectSchemas, setObjectSchemas] = useState();
+import { fetchObjectSchema, getWorkspaceId } from '../services/cmdbService';
+export const useAssetsClient = initialParameters => {
+  const [loading, setLoading] = useState(false);
   const [workspaceId, setWorkspaceId] = useState();
+  const [objectSchema, setObjectSchema] = useState();
   const [error, setError] = useState();
   useEffect(() => {
     (async () => {
+      setLoading(true);
+      setError(undefined);
       try {
-        const workspaceId = await getWorkspaceId(hostname);
-        const objectSchemasResponse = await fetchObjectSchemas(workspaceId, hostname);
+        const workspaceId = await getWorkspaceId();
         setWorkspaceId(workspaceId);
-        setObjectSchemas(objectSchemasResponse.values);
+        // Check schema from initial parameters still exists and fetch name for schema select
+        if (initialParameters !== null && initialParameters !== void 0 && initialParameters.schemaId) {
+          try {
+            const fetchedObjectSchema = await fetchObjectSchema(workspaceId, initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.schemaId);
+            setObjectSchema(fetchedObjectSchema);
+          } catch {
+            // Could update this to check if status is 404 and set objectSchemaError
+          }
+        }
       } catch (err) {
         if (err instanceof Error) {
           setError(err);
         } else {
           setError(new Error('Unexpected error occured'));
-          // eslint-disable-next-line no-console
-          console.error(err);
         }
+      } finally {
+        setLoading(false);
       }
     })();
-  }, [hostname]);
+  }, [initialParameters]);
   return {
     workspaceId,
-    objectSchemas,
-    error
+    workspaceError: error,
+    objectSchema,
+    assetsClientLoading: loading
   };
 };

package/dist/es2019/hooks/useObjectSchemas.js

@@ -0,0 +1,32 @@
+import { useCallback, useState } from 'react';
+import { fetchObjectSchemas } from '../services/cmdbService';
+export const useObjectSchemas = workspaceId => {
+  const [loading, setLoading] = useState(false);
+  const [objectSchemas, setObjectSchemas] = useState();
+  const [error, setError] = useState();
+  const request = useCallback(async query => {
+    setLoading(true);
+    setError(undefined);
+    let fetchedObjectSchemas;
+    try {
+      const fetchedObjectSchemasResponse = await fetchObjectSchemas(workspaceId, query);
+      setObjectSchemas(fetchedObjectSchemasResponse.values);
+      fetchedObjectSchemas = fetchedObjectSchemasResponse.values;
+    } catch (err) {
+      if (err instanceof Error) {
+        setError(err);
+      } else {
+        setError(new Error('Unexpected error occured'));
+      }
+    } finally {
+      setLoading(false);
+    }
+    return fetchedObjectSchemas;
+  }, [workspaceId]);
+  return {
+    objectSchemasLoading: loading,
+    objectSchemasError: error,
+    objectSchemas,
+    fetchObjectSchemas: request
+  };
+};

package/dist/es2019/hooks/useValidateAqlText.js

@@ -1,17 +1,34 @@
 import { useCallback, useState } from 'react';
 import { validateAql } from '../services/cmdbService';
 export const useValidateAqlText = (workspaceId, hostname) => {
-  const [isLoading, setIsLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [isValidAqlText, setIsValidAqlText] = useState(false);
+  const [error, setError] = useState();
   const validateAqlText = useCallback(async aql => {
-    setIsLoading(true);
-    const validateAqlResponse = await validateAql(workspaceId, {
-      qlQuery: aql
-    }, hostname);
-    setIsLoading(false);
-    return validateAqlResponse.isValid;
-  }, [hostname, workspaceId]);
+    setLoading(true);
+    setError(undefined);
+    let isValid = false;
+    try {
+      const validateAqlResponse = await validateAql(workspaceId, {
+        qlQuery: aql
+      });
+      setIsValidAqlText(validateAqlResponse.isValid);
+      isValid = validateAqlResponse.isValid;
+    } catch (err) {
+      if (err instanceof Error) {
+        setError(err);
+      } else {
+        setError(new Error('Unexpected error occured'));
+      }
+    } finally {
+      setLoading(false);
+    }
+    return isValid;
+  }, [workspaceId]);
   return {
+    isValidAqlText,
     validateAqlText,
-    isLoading
+    validateAqlTextLoading: loading,
+    validateAqlTextError: error
   };
 };

package/dist/es2019/services/cmdbService.js

@@ -1,21 +1,29 @@
 import { request } from '@atlaskit/linking-common';
-export const getWorkspaceId = async hostname => {
+export const getWorkspaceId = async () => {
   var _workspaceDetailsResp;
-  const url = `${hostname || ''}/rest/servicedesk/cmdb/latest/workspace`;
+  const url = '/rest/servicedesk/cmdb/latest/workspace';
   const workspaceDetailsResponse = await request('get', url, undefined, undefined, [200, 201, 202, 203, 204]);
   if (!((_workspaceDetailsResp = workspaceDetailsResponse.results) !== null && _workspaceDetailsResp !== void 0 && _workspaceDetailsResp.length)) {
     throw new Error('No workspace results found');
   }
   return workspaceDetailsResponse.results[0].id;
 };
-export const validateAql = (workspaceId, data, hostname) => {
-  const url = `${hostname || ''}/gateway/api/jsm/assets/workspace/${workspaceId}/v1/aql/validate`;
+export const validateAql = (workspaceId, data) => {
+  const url = `/gateway/api/jsm/assets/workspace/${workspaceId}/v1/aql/validate`;
   return request('post', url, {
     qlQuery: data.qlQuery,
     context: 'SMART_LINKS'
   }, undefined, [200, 201, 202, 203, 204]);
 };
-export const fetchObjectSchemas = (workspaceId, hostname) => {
-  const url = `${hostname || ''}/gateway/api/jsm/assets/workspace/${workspaceId}/v1/objectschema/list?maxResults=100`;
+export const fetchObjectSchema = (workspaceId, schemaId) => {
+  const url = `/gateway/api/jsm/assets/workspace/${workspaceId}/v1/objectschema/${schemaId}`;
+  return request('get', url, undefined, undefined, [200, 201, 202, 203, 204]);
+};
+export const fetchObjectSchemas = (workspaceId, query) => {
+  const queryParams = new URLSearchParams();
+  queryParams.set('maxResults', '20');
+  queryParams.set('includeCounts', 'false');
+  query && queryParams.set('query', query);
+  const url = `/gateway/api/jsm/assets/workspace/${workspaceId}/v1/objectschema/list?${queryParams}`;
   return request('get', url, undefined, undefined, [200, 201, 202, 203, 204]);
 };

package/dist/es2019/types/assets/types.js

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

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

@@ -6,9 +6,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';
+const AssetsModalTitle = jsx(ModalTitle, null, jsx(FormattedMessage, modalMessages.insertObjectsTitle));
 export const AssetsConfigModal = props => {
   const {
     datasourceId,
@@ -17,16 +21,22 @@ export const AssetsConfigModal = props => {
     onInsert,
     visibleColumnKeys: initialVisibleColumnKeys
   } = props;
-  const [aql] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql);
-  const [schemaId] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.schemaId);
+  const [aql, setAql] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql);
+  const [schemaId, setSchemaId] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.schemaId);
   const [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys);
+
+  // If a workspaceError occurs this is a critical error
   const {
-    workspaceId
-  } = useAssetsClient();
+    workspaceId,
+    workspaceError,
+    objectSchema,
+    assetsClientLoading
+  } = useAssetsClient(initialParameters);
   const parameters = useMemo(() => ({
     aql: aql || '',
     schemaId: schemaId || '',
-    workspaceId: '' /* TODO FLY-1240: Add workspace Id */
+    workspaceId: '',
+    cloudId: ''
   }), [aql, schemaId]);
   const {
     status,
@@ -40,7 +50,7 @@ export const AssetsConfigModal = props => {
     const newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
-  const isDisabled = status === 'rejected' || status === 'loading' || status === 'empty' || !aql || !workspaceId || !schemaId;
+  const isDisabled = status === 'rejected' || status === 'loading' || status === 'empty' || !!workspaceError || assetsClientLoading || !aql || !schemaId;
   const retrieveUrlForSmartCardRender = useCallback(() => {
     var _data$key, _data$key$data;
     const [data] = responseItems;
@@ -48,7 +58,7 @@ export const 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]);
   const onInsertPressed = useCallback(() => {
-    if (!aql) {
+    if (!aql || !schemaId) {
       return;
     }
     const firstAssetUrl = retrieveUrlForSmartCardRender();
@@ -84,12 +94,36 @@ export const AssetsConfigModal = props => {
       });
     }
   }, [aql, datasourceId, onInsert, responseItems.length, retrieveUrlForSmartCardRender, schemaId, visibleColumnKeys]);
+  const handleOnSearch = useCallback((aql, schemaId) => {
+    setAql(aql);
+    setSchemaId(schemaId);
+  }, []);
+  const renderModalTitleContent = useCallback(() => {
+    if (workspaceError) {
+      return undefined;
+    } else {
+      if (!workspaceId || assetsClientLoading) {
+        return jsx(AssetsSearchContainerLoading, {
+          modalTitle: AssetsModalTitle
+        });
+      }
+      return jsx(AssetsSearchContainer, {
+        workspaceId: workspaceId,
+        initialSearchData: {
+          aql,
+          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/es2019/ui/assets-modal/modal/messages.js

@@ -9,5 +9,10 @@ export const 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/es2019/ui/assets-modal/modal/styled.js

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 export const ModalContentContainer = styled.div`
-  display: 'grid';
-  height: '420px';
-  overflow: 'auto';
+  display: grid;
+  height: 420px;
+  overflow: auto;
 `;