@atlaskit/link-datasource 1.19.22 → 1.19.24

package/dist/es2019/hooks/useValidateAqlText.js

@@ -1,44 +1,83 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useDatasourceAnalyticsEvents } from '../analytics';
 import { validateAql } from '../services/cmdbService';
-export const useValidateAqlText = workspaceId => {
-  const [loading, setLoading] = useState(false);
-  const [isValidAqlText, setIsValidAqlText] = useState(false);
-  const [error, setError] = useState();
+export const SEARCH_DEBOUNCE = 350;
+export const useValidateAqlText = (workspaceId, initialValue) => {
+  const timeout = useRef();
+  const lastValue = useRef('');
+  const lastResult = useRef(Promise.resolve(undefined));
+  const [lastValidationResult, setLastValidationResult] = useState(initialValue.trim() === '' ? {
+    type: 'idle'
+  } : {
+    type: 'loading'
+  });
   const {
     fireEvent
   } = useDatasourceAnalyticsEvents();
+
+  // We return undefined when valid and 'error' when invalid
   const validateAqlText = useCallback(async aql => {
-    setLoading(true);
-    setError(undefined);
-    let isValid = false;
-    let message = null;
-    try {
-      var _validateAqlResponse$;
-      const validateAqlResponse = await validateAql(workspaceId, {
-        qlQuery: aql
-      }, fireEvent);
-      setIsValidAqlText(validateAqlResponse.isValid);
-      isValid = validateAqlResponse.isValid;
-      message = ((_validateAqlResponse$ = validateAqlResponse.errors) === null || _validateAqlResponse$ === void 0 ? void 0 : _validateAqlResponse$.iql) || null;
-    } catch (err) {
-      if (err instanceof Error) {
-        setError(err);
-      } else {
-        setError(new Error('Unexpected error occured'));
+    if (aql !== null && aql !== void 0 && aql.trim()) {
+      try {
+        const validateAqlResponse = await validateAql(workspaceId, {
+          qlQuery: aql
+        }, fireEvent);
+        if (validateAqlResponse.isValid) {
+          setLastValidationResult({
+            type: 'valid',
+            validatedAql: aql
+          });
+          return undefined;
+        } else {
+          var _validateAqlResponse$, _validateAqlResponse$2;
+          setLastValidationResult({
+            type: 'invalid',
+            error: (_validateAqlResponse$ = (_validateAqlResponse$2 = validateAqlResponse.errors) === null || _validateAqlResponse$2 === void 0 ? void 0 : _validateAqlResponse$2.iql) !== null && _validateAqlResponse$ !== void 0 ? _validateAqlResponse$ : ''
+          });
+          return 'error';
+        }
+      } catch (err) {
+        setLastValidationResult({
+          type: 'invalid',
+          error: ''
+        });
+        return 'error';
       }
-    } finally {
-      setLoading(false);
     }
-    return {
-      isValid,
-      message
-    };
+    setLastValidationResult({
+      type: 'idle'
+    });
+    return undefined;
   }, [workspaceId, fireEvent]);
+
+  /* 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 */
+  const debouncedValidation = value => new Promise(resolve => {
+    if (timeout.current) {
+      timeout.current();
+    }
+    if (value !== lastValue.current) {
+      const timerId = setTimeout(() => {
+        setLastValidationResult({
+          type: 'loading'
+        });
+        lastValue.current = value;
+        lastResult.current = validateAqlText(value);
+        resolve(lastResult.current);
+      }, SEARCH_DEBOUNCE);
+      timeout.current = () => {
+        clearTimeout(timerId);
+        resolve('debouncing');
+      };
+    } else {
+      resolve(lastResult.current);
+    }
+  });
   return {
-    isValidAqlText,
+    debouncedValidation,
     validateAqlText,
-    validateAqlTextLoading: loading,
-    validateAqlTextError: error
+    lastValidationResult
   };
 };

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

@@ -259,7 +259,7 @@ const PlainAssetsConfigModal = props => {
     }).fire(EVENT_CHANNEL);
     onCancel();
   }, [analyticsPayload, onCancel]);
-  const handleOnSearch = useCallback(async (searchAql, searchSchemaId) => {
+  const handleOnSearch = useCallback((searchAql, searchSchemaId) => {
     if (schemaId !== searchSchemaId || aql !== searchAql || status === 'rejected') {
       searchCount.current++;
       if (schemaId !== searchSchemaId) {
@@ -269,7 +269,8 @@ const PlainAssetsConfigModal = props => {
         userInteractionActions.current.add(DatasourceAction.QUERY_UPDATED);
       }
       reset({
-        shouldResetColumns: true
+        shouldResetColumns: true,
+        shouldForceRequest: true
       });
       setAql(searchAql);
       setSchemaId(searchSchemaId);
@@ -300,7 +301,7 @@ const PlainAssetsConfigModal = props => {
       return jsx(AssetsSearchContainer, {
         workspaceId: workspaceId,
         initialSearchData: {
-          aql,
+          aql: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql,
           objectSchema: existingObjectSchema,
           objectSchemas
         },
@@ -309,7 +310,7 @@ const PlainAssetsConfigModal = props => {
         isSearching: status === 'loading'
       });
     }
-  }, [errorState, workspaceId, assetsClientLoading, aql, existingObjectSchema, objectSchemas, handleOnSearch, status]);
+  }, [errorState, workspaceId, assetsClientLoading, initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql, existingObjectSchema, objectSchemas, handleOnSearch, status]);
   return jsx(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N40 } from '@atlaskit/theme/colors';
 import { AccessRequired } from '../../../common/error-state/access-required';
@@ -74,19 +74,22 @@ export const RenderAssetsContent = props => {
     onVisibleColumnKeysChange: onVisibleColumnKeysChange,
     parentContainerRenderInstanceId: modalRenderInstanceId
   })), [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, status, visibleColumnKeys, modalRenderInstanceId]);
-  if (isFetchingInitialData) {
-    // Placing this check first as it's a priority before all others
-    return jsx(LoadingView, null);
-  } else if (status === 'rejected') {
-    return jsx(RejectedView, null);
-  } else if (status === 'unauthorized') {
-    return jsx(UnauthorizedView, null);
-  } else if (status === 'empty') {
-    return jsx(EmptyView, null);
-  } else if (resolvedWithNoResults) {
-    return jsx(NoResultsView, null);
-  } else if (status === 'loading' && !columns.length) {
-    return jsx(LoadingView, null);
-  }
-  return issueLikeDataTableView;
+  const renderAssetsContentView = useCallback(() => {
+    if (isFetchingInitialData) {
+      // Placing this check first as it's a priority before all others
+      return jsx(LoadingView, null);
+    } else if (status === 'rejected') {
+      return jsx(RejectedView, null);
+    } else if (status === 'unauthorized') {
+      return jsx(UnauthorizedView, null);
+    } else if (status === 'empty') {
+      return jsx(EmptyView, null);
+    } else if (resolvedWithNoResults) {
+      return jsx(NoResultsView, null);
+    } else if (status === 'loading' && !columns.length) {
+      return jsx(LoadingView, null);
+    }
+    return issueLikeDataTableView;
+  }, [columns.length, isFetchingInitialData, issueLikeDataTableView, resolvedWithNoResults, status]);
+  return renderAssetsContentView();
 };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { Fragment, useCallback, useRef, useState } from 'react';
+import { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
@@ -17,10 +17,6 @@ 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 */
-
 const buttonBaseStyles = css({
   display: 'flex',
   height: '100%',
@@ -34,15 +30,14 @@ const AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-manag
 const searchButtonStyles = css({
   marginRight: "var(--ds-space-075, 6px)"
 });
-export const SEARCH_DEBOUNCE_MS = 350;
-const renderValidatorIcon = (value, error, meta) => {
-  if (value && meta !== null && meta !== void 0 && meta.validating) {
+const renderValidatorIcon = lastValidationResult => {
+  if (lastValidationResult.type === 'loading') {
     return jsx(Spinner, {
       size: "medium",
       testId: "assets-datasource-modal--aql-validating"
     });
   }
-  if (value && error) {
+  if (lastValidationResult.type === 'invalid') {
     return jsx(CrossCircleIcon, {
       label: "label",
       primaryColor: "red",
@@ -50,7 +45,7 @@ const renderValidatorIcon = (value, error, meta) => {
       testId: "assets-datasource-modal--aql-invalid"
     });
   }
-  if (value && meta.valid) {
+  if (lastValidationResult.type === 'valid') {
     return jsx(CheckCircleIcon, {
       label: "label",
       primaryColor: "green",
@@ -73,61 +68,23 @@ export const AqlSearchInput = ({
   const {
     formatMessage
   } = useIntl();
-  const timeout = useRef();
-  const lastValue = useRef(value);
-  const lastResult = useRef(Promise.resolve(undefined));
-  const [message, setMessage] = useState(null);
   const {
-    validateAqlText
-  } = useValidateAqlText(workspaceId);
-
-  // Validation expects undefined when valid and a string as an error message when invalid
-  const handleValidation = useCallback(async newUnvalidatedQlQuery => {
-    if (!newUnvalidatedQlQuery) {
-      return undefined;
-    }
-    const validation = await validateAqlText(newUnvalidatedQlQuery);
-    setMessage(validation.message);
-    return validation.isValid ? undefined : 'invalid';
-  }, [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 */
-  const debouncedMemoizedValidation = value => new Promise(resolve => {
-    if (timeout.current) {
-      timeout.current();
-    }
-    if (value !== lastValue.current) {
-      const timerId = setTimeout(() => {
-        lastValue.current = value;
-        lastResult.current = handleValidation(value);
-        resolve(lastResult.current);
-      }, SEARCH_DEBOUNCE_MS);
-      timeout.current = () => {
-        clearTimeout(timerId);
-        resolve('debouncing');
-      };
-    } else {
-      resolve(lastResult.current);
-    }
-  });
+    debouncedValidation,
+    lastValidationResult
+  } = useValidateAqlText(workspaceId, value);
   return jsx(FieldContainer, null, jsx(Field, {
     name: aqlKey,
     defaultValue: value,
-    validate: debouncedMemoizedValidation
+    validate: debouncedValidation
   }, ({
-    fieldProps,
-    meta,
-    error
+    fieldProps
   }) => jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, {
     elemBeforeInput: jsx("span", {
       style: {
         paddingLeft: 6,
         width: 24
       }
-    }, renderValidatorIcon(fieldProps.value, error, meta)),
+    }, renderValidatorIcon(lastValidationResult)),
     elemAfterInput: jsx(Fragment, null, jsx(Tooltip, {
       content: formatMessage(searchInputMessages.helpTooltipText),
       position: "bottom"
@@ -151,9 +108,9 @@ export const AqlSearchInput = ({
       spacing: "none",
       testId: "assets-datasource-modal--aql-search-button",
       type: "submit",
-      isDisabled: fieldProps.value.trim() === '' || meta.validating || !meta.valid
+      isDisabled: lastValidationResult.type !== 'valid'
     })),
     placeholder: formatMessage(searchInputMessages.placeholder),
     testId: testId
-  })), fieldProps.value && error && message && jsx(ErrorMessage, null, message))));
+  })), lastValidationResult.type === 'invalid' && lastValidationResult.error && jsx(ErrorMessage, null, lastValidationResult.error))));
 };

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

@@ -24,7 +24,7 @@ export const AssetsSearchContainer = props => {
       aql,
       objectSchema
     } = searchFormValues;
-    if (objectSchema) {
+    if (aql && objectSchema) {
       fireEvent('ui.aqlEditor.searched', {});
       // Pass the validated aql and object schema back to modal
       onSearch(aql, objectSchema.value);

package/dist/es2019/ui/datasource-table-view/datasourceTableView.js

@@ -3,12 +3,15 @@ import { useCallback, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { v4 as uuidv4 } from 'uuid';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
+import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { useDatasourceAnalyticsEvents } from '../../analytics';
 import { packageMetaData } from '../../analytics/constants';
 import { startUfoExperience } from '../../analytics/ufoExperiences';
 import { useColumnPickerRenderedFailedUfoExperience } from '../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience';
 import { useDataRenderedUfoExperience } from '../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
+import { fetchMessagesForLocale } from '../../common/utils/locale/fetch-messages-for-locale';
 import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
+import i18nEN from '../../i18n/en';
 import { ScrollableContainerHeight } from '../../ui/issue-like-table/styled';
 import { AccessRequired } from '../common/error-state/access-required';
 import { LoadingError } from '../common/error-state/loading-error';
@@ -123,35 +126,35 @@ const DatasourceTableViewWithoutAnalytics = ({
       onRefresh: reset
     });
   }
-  return (
-    // datasource-table classname is to exclude all children from being commentable - exclude list is in CFE
-    jsx("div", {
-      css: containerStyles,
-      className: "datasource-table"
-    }, hasColumns ? jsx(IssueLikeDataTableView, {
-      testId: 'datasource-table-view',
-      hasNextPage: hasNextPage,
-      items: responseItems,
-      onNextPage: onNextPage,
-      onLoadDatasourceDetails: loadDatasourceDetails,
-      status: status,
-      columns: columns,
-      visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
-      onVisibleColumnKeysChange: onVisibleColumnKeysChange,
-      columnCustomSizes: columnCustomSizes,
-      onColumnResize: onColumnResize,
-      scrollableContainerHeight: ScrollableContainerHeight,
-      parentContainerRenderInstanceId: tableRenderInstanceId,
-      extensionKey: extensionKey
-    }) : jsx(EmptyState, {
-      testId: "datasource-table-view-skeleton",
-      isCompact: true
-    }), jsx(TableFooter, {
-      itemCount: isDataReady ? totalCount : undefined,
-      onRefresh: forcedReset,
-      isLoading: !isDataReady || status === 'loading',
-      url: url
-    }))
-  );
+  return jsx(IntlMessagesProvider, {
+    defaultMessages: i18nEN,
+    loaderFn: fetchMessagesForLocale
+  }, jsx("div", {
+    css: containerStyles,
+    className: "datasource-table"
+  }, hasColumns ? jsx(IssueLikeDataTableView, {
+    testId: 'datasource-table-view',
+    hasNextPage: hasNextPage,
+    items: responseItems,
+    onNextPage: onNextPage,
+    onLoadDatasourceDetails: loadDatasourceDetails,
+    status: status,
+    columns: columns,
+    visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
+    onVisibleColumnKeysChange: onVisibleColumnKeysChange,
+    columnCustomSizes: columnCustomSizes,
+    onColumnResize: onColumnResize,
+    scrollableContainerHeight: ScrollableContainerHeight,
+    parentContainerRenderInstanceId: tableRenderInstanceId,
+    extensionKey: extensionKey
+  }) : jsx(EmptyState, {
+    testId: "datasource-table-view-skeleton",
+    isCompact: true
+  }), jsx(TableFooter, {
+    itemCount: isDataReady ? totalCount : undefined,
+    onRefresh: forcedReset,
+    isLoading: !isDataReady || status === 'loading',
+    url: url
+  })));
 };
 export const DatasourceTableView = withAnalyticsContext(packageMetaData)(DatasourceTableViewWithoutAnalytics);

package/dist/es2019/ui/jira-issues-modal/initial-state-view/messages.js

@@ -11,12 +11,12 @@ export const initialStateViewMessages = defineMessages({
     defaultMessage: 'Beta'
   },
   searchDescriptionForBasicSearch: {
-    id: 'linkDataSource.modal-initial-state.searchDescription',
+    id: 'linkDataSource.modal-initial-state.searchDescription-basic',
     description: 'The initial modal search state helper message displayed under the search title when basic search mode is selected',
     defaultMessage: 'Search by keyword for issues to insert.'
   },
   searchDescriptionForJQLSearch: {
-    id: 'linkDataSource.modal-initial-state.searchDescription',
+    id: 'linkDataSource.modal-initial-state.searchDescription-jql',
     description: 'The initial modal search state helper message displayed under the search title when JQL search mode is selected',
     defaultMessage: 'Use JQL (Jira Query Language) to search for issues.'
   },

package/dist/es2019/ui/jira-issues-modal/modal/index.js

@@ -6,6 +6,7 @@ import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl-next';
 import { v4 as uuidv4 } from 'uuid';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
+import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import LinkUrl from '@atlaskit/smart-card/link-url';
@@ -17,7 +18,9 @@ import { startUfoExperience } from '../../../analytics/ufoExperiences';
 import { useColumnPickerRenderedFailedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience';
 import { useDataRenderedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
 import { mapSearchMethod } from '../../../analytics/utils';
+import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
+import i18nEN from '../../../i18n/en';
 import { getAvailableJiraSites } from '../../../services/getAvailableJiraSites';
 import { AccessRequired } from '../../common/error-state/access-required';
 import { ModalLoadingError } from '../../common/error-state/modal-loading-error';
@@ -488,7 +491,10 @@ export const PlainJiraIssuesConfigModal = props => {
     }
     return issueLikeDataTableView;
   }, [columns.length, currentSearchMethod, issueLikeDataTableView, jql, jqlUrl, resolvedWithNoResults, responseItems.length, retrieveUrlForSmartCardRender, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
-  return jsx(ModalTransition, null, jsx(Modal, {
+  return jsx(IntlMessagesProvider, {
+    defaultMessages: i18nEN,
+    loaderFn: fetchMessagesForLocale
+  }, jsx(ModalTransition, null, jsx(Modal, {
     testId: "jira-jql-datasource-modal",
     onClose: onCancel,
     width: "calc(100% - 80px)",
@@ -544,7 +550,7 @@ export const PlainJiraIssuesConfigModal = props => {
     onClick: onInsertPressed,
     isDisabled: isInsertDisabled,
     testId: "jira-jql-datasource-modal--insert-button"
-  }, jsx(FormattedMessage, modalMessages.insertIssuesButtonText)))));
+  }, jsx(FormattedMessage, modalMessages.insertIssuesButtonText))))));
 };
 const analyticsContextAttributes = {
   dataProvider: 'jira-issues'

package/dist/esm/analytics/constants.js

@@ -1,5 +1,5 @@
 export var EVENT_CHANNEL = 'media';
 export var packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.19.22"
+  packageVersion: "1.19.24"
 };

package/dist/esm/hooks/useValidateAqlText.js

@@ -1,77 +1,115 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useDatasourceAnalyticsEvents } from '../analytics';
 import { validateAql } from '../services/cmdbService';
-export var useValidateAqlText = function useValidateAqlText(workspaceId) {
-  var _useState = useState(false),
+export var SEARCH_DEBOUNCE = 350;
+export var useValidateAqlText = function useValidateAqlText(workspaceId, initialValue) {
+  var timeout = useRef();
+  var lastValue = useRef('');
+  var lastResult = useRef(Promise.resolve(undefined));
+  var _useState = useState(initialValue.trim() === '' ? {
+      type: 'idle'
+    } : {
+      type: 'loading'
+    }),
     _useState2 = _slicedToArray(_useState, 2),
-    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];
+    lastValidationResult = _useState2[0],
+    setLastValidationResult = _useState2[1];
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
+
+  // We return undefined when valid and 'error' when invalid
   var validateAqlText = useCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(aql) {
-      var isValid, message, _validateAqlResponse$, validateAqlResponse;
+      var validateAqlResponse, _validateAqlResponse$, _validateAqlResponse$2;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            setLoading(true);
-            setError(undefined);
-            isValid = false;
-            message = null;
-            _context.prev = 4;
-            _context.next = 7;
+            if (!(aql !== null && aql !== void 0 && aql.trim())) {
+              _context.next = 18;
+              break;
+            }
+            _context.prev = 1;
+            _context.next = 4;
             return validateAql(workspaceId, {
               qlQuery: aql
             }, fireEvent);
-          case 7:
+          case 4:
             validateAqlResponse = _context.sent;
-            setIsValidAqlText(validateAqlResponse.isValid);
-            isValid = validateAqlResponse.isValid;
-            message = ((_validateAqlResponse$ = validateAqlResponse.errors) === null || _validateAqlResponse$ === void 0 ? void 0 : _validateAqlResponse$.iql) || null;
-            _context.next = 16;
-            break;
-          case 13:
-            _context.prev = 13;
-            _context.t0 = _context["catch"](4);
-            if (_context.t0 instanceof Error) {
-              setError(_context.t0);
-            } else {
-              setError(new Error('Unexpected error occured'));
+            if (!validateAqlResponse.isValid) {
+              _context.next = 10;
+              break;
             }
-          case 16:
-            _context.prev = 16;
-            setLoading(false);
-            return _context.finish(16);
-          case 19:
-            return _context.abrupt("return", {
-              isValid: isValid,
-              message: message
+            setLastValidationResult({
+              type: 'valid',
+              validatedAql: aql
             });
+            return _context.abrupt("return", undefined);
+          case 10:
+            setLastValidationResult({
+              type: 'invalid',
+              error: (_validateAqlResponse$ = (_validateAqlResponse$2 = validateAqlResponse.errors) === null || _validateAqlResponse$2 === void 0 ? void 0 : _validateAqlResponse$2.iql) !== null && _validateAqlResponse$ !== void 0 ? _validateAqlResponse$ : ''
+            });
+            return _context.abrupt("return", 'error');
+          case 12:
+            _context.next = 18;
+            break;
+          case 14:
+            _context.prev = 14;
+            _context.t0 = _context["catch"](1);
+            setLastValidationResult({
+              type: 'invalid',
+              error: ''
+            });
+            return _context.abrupt("return", 'error');
+          case 18:
+            setLastValidationResult({
+              type: 'idle'
+            });
+            return _context.abrupt("return", undefined);
           case 20:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[4, 13, 16, 19]]);
+      }, _callee, null, [[1, 14]]);
     }));
     return function (_x) {
       return _ref.apply(this, arguments);
     };
   }(), [workspaceId, fireEvent]);
+
+  /* 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 debouncedValidation = function debouncedValidation(value) {
+    return new Promise(function (resolve) {
+      if (timeout.current) {
+        timeout.current();
+      }
+      if (value !== lastValue.current) {
+        var timerId = setTimeout(function () {
+          setLastValidationResult({
+            type: 'loading'
+          });
+          lastValue.current = value;
+          lastResult.current = validateAqlText(value);
+          resolve(lastResult.current);
+        }, SEARCH_DEBOUNCE);
+        timeout.current = function () {
+          clearTimeout(timerId);
+          resolve('debouncing');
+        };
+      } else {
+        resolve(lastResult.current);
+      }
+    });
+  };
   return {
-    isValidAqlText: isValidAqlText,
+    debouncedValidation: debouncedValidation,
     validateAqlText: validateAqlText,
-    validateAqlTextLoading: loading,
-    validateAqlTextError: error
+    lastValidationResult: lastValidationResult
   };
 };