@atlaskit/link-datasource 3.19.1 → 3.20.0

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

@@ -1,60 +1,40 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useMemo } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import { fg } from "@atlaskit/platform-feature-flags";
 import { N40 } from '@atlaskit/theme/colors';
 import { AccessRequired } from '../../../common/error-state/access-required';
 import { ModalLoadingError } from '../../../common/error-state/modal-loading-error';
 import { NoResults } from '../../../common/error-state/no-results';
-import { EmptyState, IssueLikeDataTableView, scrollableContainerShadowsCssComponents } from '../../../issue-like-table';
+import { EmptyState, IssueLikeDataTableView } from '../../../issue-like-table';
 import { InitialStateView } from './initial-state-view';
+import { RenderAssetsContentOld } from './render-assets-content-old';
 export const MODAL_HEIGHT = 420;
 
 // This is to prevent y scrollbar when showing table loading state
-const disableOverflowStyles = css({
-  overflow: 'hidden'
-});
-const contentContainerStyles = css({
-  height: MODAL_HEIGHT,
-  display: 'grid',
-  overflow: 'auto'
-});
-const tableBordersStyles = css({
-  border: `1px solid ${`var(--ds-border, ${N40})`}`,
-  borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
-  borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
-  borderBottom: `2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
-});
-const RejectedView = () => jsx("div", {
-  css: [contentContainerStyles]
-}, jsx(ModalLoadingError, null));
-const UnauthorizedView = () => jsx("div", {
-  css: [contentContainerStyles]
-}, jsx(AccessRequired, null));
-const EmptyView = () => jsx("div", {
-  css: [contentContainerStyles]
-}, jsx(InitialStateView, null));
-const NoResultsView = () => jsx("div", {
-  css: [contentContainerStyles]
-}, jsx(NoResults, null));
-const LoadingView = () => jsx("div", {
-  css: [contentContainerStyles, contentContainerStyles, tableBordersStyles, disableOverflowStyles]
-}, jsx(EmptyState, {
+const disableOverflowStyles = null;
+const contentContainerStyles = null;
+const tableBordersStyles = null;
+const RejectedView = () => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1reo1wug _18m91wug _4t3i1pna _1e0c11p5"])
+}, /*#__PURE__*/React.createElement(ModalLoadingError, null));
+const UnauthorizedView = () => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1reo1wug _18m91wug _4t3i1pna _1e0c11p5"])
+}, /*#__PURE__*/React.createElement(AccessRequired, null));
+const EmptyView = () => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1reo1wug _18m91wug _4t3i1pna _1e0c11p5"])
+}, /*#__PURE__*/React.createElement(InitialStateView, null));
+const NoResultsView = () => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1reo1wug _18m91wug _4t3i1pna _1e0c11p5"])
+}, /*#__PURE__*/React.createElement(NoResults, null));
+const LoadingView = () => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1reo1wug _18m91wug _4t3i1pna _1e0c11p5", "_1reo1wug _18m91wug _4t3i1pna _1e0c11p5", "_19ith6cr _n7zl17u4 _13lipd34 _qrwqpd34 _1itkwoh3 _12vemgnk _1lrw1sd4 _qmxj1c00", "_1reo15vq _18m915vq"])
+}, /*#__PURE__*/React.createElement(EmptyState, {
   testId: "assets-aql-datasource-modal--loading-state"
 }));
-export const RenderAssetsContent = props => {
+export const RenderAssetsContentNew = props => {
   const {
     status,
     responseItems,
@@ -69,9 +49,9 @@ export const RenderAssetsContent = props => {
     isFetchingInitialData
   } = props;
   const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
-  const issueLikeDataTableView = useMemo(() => jsx("div", {
-    css: [contentContainerStyles, tableBordersStyles]
-  }, jsx(IssueLikeDataTableView, {
+  const issueLikeDataTableView = useMemo(() => /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1reo1wug _18m91wug _4t3i1pna _1e0c11p5", "_19ith6cr _n7zl17u4 _13lipd34 _qrwqpd34 _1itkwoh3 _12vemgnk _1lrw1sd4 _qmxj1c00"])
+  }, /*#__PURE__*/React.createElement(IssueLikeDataTableView, {
     testId: "asset-datasource-table",
     status: status,
     columns: columns,
@@ -86,19 +66,26 @@ export const RenderAssetsContent = props => {
   const renderAssetsContentView = useCallback(() => {
     if (isFetchingInitialData) {
       // Placing this check first as it's a priority before all others
-      return jsx(LoadingView, null);
+      return /*#__PURE__*/React.createElement(LoadingView, null);
     } else if (status === 'rejected') {
-      return jsx(RejectedView, null);
+      return /*#__PURE__*/React.createElement(RejectedView, null);
     } else if (status === 'unauthorized') {
-      return jsx(UnauthorizedView, null);
+      return /*#__PURE__*/React.createElement(UnauthorizedView, null);
     } else if (status === 'empty') {
-      return jsx(EmptyView, null);
+      return /*#__PURE__*/React.createElement(EmptyView, null);
     } else if (resolvedWithNoResults) {
-      return jsx(NoResultsView, null);
+      return /*#__PURE__*/React.createElement(NoResultsView, null);
     } else if (status === 'loading' && !columns.length) {
-      return jsx(LoadingView, null);
+      return /*#__PURE__*/React.createElement(LoadingView, null);
     }
     return issueLikeDataTableView;
   }, [columns.length, isFetchingInitialData, issueLikeDataTableView, resolvedWithNoResults, status]);
   return renderAssetsContentView();
+};
+export const RenderAssetsContent = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(RenderAssetsContentNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(RenderAssetsContentOld, props);
+  }
 };

package/dist/es2019/ui/assets-modal/modal/render-assets-content/initial-state-view/assets/{crystal-ball-svg.js → crystal-ball-svg-old.js}

@@ -1,5 +1,7 @@
 import React from 'react';
-export const CrystalBallSVG = () => /*#__PURE__*/React.createElement("svg", {
+
+// TODO Delete when cleaning fg('bandicoots-update-sllv-icons')
+export const CrystalBallSVGOld = () => /*#__PURE__*/React.createElement("svg", {
   width: "140",
   height: "140",
   viewBox: "0 0 140 140",

package/dist/es2019/ui/assets-modal/modal/render-assets-content/initial-state-view/index.compiled.css

@@ -0,0 +1,8 @@
+._11c81bk4{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1wpz1h6o{align-self:center}
+._4t3i1osq{height:100%}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._y3gn1h6o{text-align:center}

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

@@ -1,43 +1,41 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { fontFallback } from '@atlaskit/theme/typography';
-import { CrystalBallSVG } from './assets/crystal-ball-svg';
+import { RichIconSearch } from '../../../../../common/ui/rich-icon/search';
+import { CrystalBallSVGOld } from './assets/crystal-ball-svg-old';
+import { InitialStateViewOld } from './initial-state-view-old';
 import { initialStateViewMessages } from './messages';
-const initialStateViewContainerStyles = css({
-  display: 'flex',
-  justifyContent: 'center',
-  height: '100%'
-});
-const svgAndTextsWrapperStyles = css({
-  textAlign: 'center',
-  alignSelf: 'center'
-});
-const searchTitleStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`,
-  paddingTop: "var(--ds-space-200, 16px)",
-  paddingBottom: "var(--ds-space-100, 8px)"
-});
+const initialStateViewContainerStyles = null;
+const svgAndTextsWrapperStyles = null;
+const searchTitleStyles = null;
 const AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-assets-query-language-aql/';
-export const InitialStateView = () => {
+export const InitialStateViewNew = () => {
   const {
     formatMessage
   } = useIntl();
-  return jsx("div", {
-    css: initialStateViewContainerStyles,
-    "data-testid": "assets-aql-datasource-modal--initial-state-view"
-  }, jsx("div", {
-    css: svgAndTextsWrapperStyles
-  }, jsx(CrystalBallSVG, null), jsx("div", {
-    css: searchTitleStyles
-  }, formatMessage(initialStateViewMessages.searchTitle)), jsx("div", null, formatMessage(initialStateViewMessages.searchDescription)), jsx("a", {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "assets-aql-datasource-modal--initial-state-view",
+    className: ax(["_1e0c1txw _1bah1h6o _4t3i1osq"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_y3gn1h6o _1wpz1h6o"])
+  }, fg('bandicoots-update-sllv-icons') ? /*#__PURE__*/React.createElement(RichIconSearch, {
+    size: "xlarge",
+    alt: formatMessage(initialStateViewMessages.searchTitle)
+  }) : /*#__PURE__*/React.createElement(CrystalBallSVGOld, null), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_11c81bk4 _ca0qpxbi _n3tdu2gc"])
+  }, formatMessage(initialStateViewMessages.searchTitle)), /*#__PURE__*/React.createElement("div", null, formatMessage(initialStateViewMessages.searchDescription)), /*#__PURE__*/React.createElement("a", {
     href: AQLSupportDocumentLink,
     target: "_blank"
   }, formatMessage(initialStateViewMessages.learnMoreLink))));
+};
+export const InitialStateView = () => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(InitialStateViewNew, null);
+  } else {
+    return /*#__PURE__*/React.createElement(InitialStateViewOld, null);
+  }
 };

package/dist/es2019/ui/assets-modal/modal/render-assets-content/initial-state-view/initial-state-view-old.js

@@ -0,0 +1,43 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { fontFallback } from '@atlaskit/theme/typography';
+import { CrystalBallSVGOld } from './assets/crystal-ball-svg-old';
+import { initialStateViewMessages } from './messages';
+const initialStateViewContainerStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  height: '100%'
+});
+const svgAndTextsWrapperStyles = css({
+  textAlign: 'center',
+  alignSelf: 'center'
+});
+const searchTitleStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`,
+  paddingTop: "var(--ds-space-200, 16px)",
+  paddingBottom: "var(--ds-space-100, 8px)"
+});
+const AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-assets-query-language-aql/';
+export const InitialStateViewOld = () => {
+  const {
+    formatMessage
+  } = useIntl();
+  return jsx("div", {
+    css: initialStateViewContainerStyles,
+    "data-testid": "assets-aql-datasource-modal--initial-state-view"
+  }, jsx("div", {
+    css: svgAndTextsWrapperStyles
+  }, jsx(CrystalBallSVGOld, null), jsx("div", {
+    css: searchTitleStyles
+  }, formatMessage(initialStateViewMessages.searchTitle)), jsx("div", null, formatMessage(initialStateViewMessages.searchDescription)), jsx("a", {
+    href: AQLSupportDocumentLink,
+    target: "_blank"
+  }, formatMessage(initialStateViewMessages.learnMoreLink))));
+};

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

@@ -0,0 +1,104 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback, useMemo } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { N40 } from '@atlaskit/theme/colors';
+import { AccessRequired } from '../../../common/error-state/access-required';
+import { ModalLoadingError } from '../../../common/error-state/modal-loading-error';
+import { NoResults } from '../../../common/error-state/no-results';
+import { EmptyStateOld, IssueLikeDataTableViewOld, scrollableContainerShadowsCssComponents } from '../../../issue-like-table/issue-like-table-old';
+import { InitialStateView } from './initial-state-view';
+export const MODAL_HEIGHT = 420;
+
+// This is to prevent y scrollbar when showing table loading state
+const disableOverflowStyles = css({
+  overflow: 'hidden'
+});
+const contentContainerStyles = css({
+  height: MODAL_HEIGHT,
+  display: 'grid',
+  overflow: 'auto'
+});
+const tableBordersStyles = css({
+  border: `1px solid ${`var(--ds-border, ${N40})`}`,
+  borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
+  borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
+  borderBottom: `2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
+});
+const RejectedView = () => jsx("div", {
+  css: [contentContainerStyles]
+}, jsx(ModalLoadingError, null));
+const UnauthorizedView = () => jsx("div", {
+  css: [contentContainerStyles]
+}, jsx(AccessRequired, null));
+const EmptyView = () => jsx("div", {
+  css: [contentContainerStyles]
+}, jsx(InitialStateView, null));
+const NoResultsView = () => jsx("div", {
+  css: [contentContainerStyles]
+}, jsx(NoResults, null));
+const LoadingView = () => jsx("div", {
+  css: [contentContainerStyles, contentContainerStyles, tableBordersStyles, disableOverflowStyles]
+}, jsx(EmptyStateOld, {
+  testId: "assets-aql-datasource-modal--loading-state"
+}));
+export const RenderAssetsContentOld = props => {
+  const {
+    status,
+    responseItems,
+    responseItemIds,
+    visibleColumnKeys,
+    onNextPage,
+    hasNextPage,
+    loadDatasourceDetails,
+    columns,
+    defaultVisibleColumnKeys,
+    onVisibleColumnKeysChange,
+    isFetchingInitialData
+  } = props;
+  const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  const issueLikeDataTableView = useMemo(() => jsx("div", {
+    css: [contentContainerStyles, tableBordersStyles]
+  }, jsx(IssueLikeDataTableViewOld, {
+    testId: "asset-datasource-table",
+    status: status,
+    columns: columns,
+    items: responseItems,
+    itemIds: responseItemIds,
+    hasNextPage: hasNextPage,
+    visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
+    onNextPage: onNextPage,
+    onLoadDatasourceDetails: loadDatasourceDetails,
+    onVisibleColumnKeysChange: onVisibleColumnKeysChange
+  })), [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, responseItemIds, status, visibleColumnKeys]);
+  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/aql-search-input-old.js

@@ -0,0 +1,130 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { Fragment } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { LoadingButton } from '@atlaskit/button';
+import { ErrorMessage, Field } from '@atlaskit/form';
+import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
+import QuestionCircleIcon from '@atlaskit/icon/core/migration/question-circle';
+import SearchIcon from '@atlaskit/icon/core/migration/search--editor-search';
+import CheckCircleIcon from '@atlaskit/icon/core/migration/success--check-circle';
+import Spinner from '@atlaskit/spinner';
+import Textfield from '@atlaskit/textfield';
+import { G300, N500, R400 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
+import { useValidateAqlText } from '../../../../hooks/useValidateAqlText';
+import { aqlKey } from '../../../../types/assets/types';
+import { FieldContainer } from '../styled-old';
+import { searchInputMessages } from './messages';
+const buttonBaseStyles = css({
+  display: 'flex',
+  height: '100%',
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column',
+  marginRight: "var(--ds-space-100, 0.5em)"
+});
+const AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-assets-query-language-aql/';
+const searchButtonStyles = css({
+  marginRight: "var(--ds-space-075, 6px)"
+});
+const renderValidatorIcon = lastValidationResult => {
+  if (lastValidationResult.type === 'loading') {
+    return jsx(Spinner, {
+      size: "medium",
+      testId: "assets-datasource-modal--aql-validating"
+    });
+  }
+  if (lastValidationResult.type === 'invalid') {
+    return jsx(CrossCircleIcon, {
+      label: "label",
+      color: `var(--ds-icon-danger, ${R400})`,
+      LEGACY_size: "medium",
+      testId: "assets-datasource-modal--aql-invalid",
+      spacing: "spacious"
+    });
+  }
+  if (lastValidationResult.type === 'valid') {
+    return jsx(CheckCircleIcon, {
+      label: "label",
+      color: `var(--ds-icon-success, ${G300})`,
+      LEGACY_size: "medium",
+      testId: "assets-datasource-modal--aql-valid",
+      spacing: "spacious"
+    });
+  }
+  return jsx(SearchIcon, {
+    label: "label",
+    LEGACY_size: "medium",
+    testId: "assets-datasource-modal--aql-idle",
+    color: "currentColor",
+    spacing: "spacious"
+  });
+};
+export const AqlSearchInputOld = ({
+  value,
+  workspaceId,
+  testId = 'assets-datasource-modal--aql-search-input',
+  isSearching
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    debouncedValidation,
+    lastValidationResult
+  } = useValidateAqlText(workspaceId, value);
+  return jsx(FieldContainer, null, jsx(Field, {
+    name: aqlKey,
+    defaultValue: value,
+    validate: debouncedValidation
+  }, ({
+    fieldProps
+  }) => jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, {
+    elemBeforeInput: jsx("span", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      style: {
+        paddingLeft: "var(--ds-space-075, 6px)",
+        width: 24,
+        display: 'flex'
+      }
+    }, renderValidatorIcon(lastValidationResult)),
+    elemAfterInput: jsx(Fragment, null, jsx(Tooltip, {
+      content: formatMessage(searchInputMessages.helpTooltipText),
+      position: "bottom"
+    }, jsx("a", {
+      href: AQLSupportDocumentLink,
+      target: "_blank",
+      css: buttonBaseStyles
+    }, jsx(QuestionCircleIcon, {
+      label: "label",
+      color: `var(--ds-icon, ${N500})`,
+      LEGACY_size: "medium",
+      testId: "assets-datasource-modal-help",
+      spacing: "spacious"
+    }))), jsx(LoadingButton, {
+      appearance: "primary",
+      css: searchButtonStyles,
+      iconBefore: jsx(SearchIcon, {
+        label: formatMessage(searchInputMessages.placeholder),
+        LEGACY_size: "medium",
+        color: "currentColor",
+        spacing: "spacious"
+      }),
+      isLoading: isSearching,
+      spacing: "none",
+      testId: "assets-datasource-modal--aql-search-button",
+      type: "submit",
+      isDisabled: lastValidationResult.type !== 'valid'
+    })),
+    placeholder: formatMessage(searchInputMessages.placeholder),
+    testId: testId
+  })), lastValidationResult.type === 'invalid' && lastValidationResult.error && jsx(ErrorMessage, null, lastValidationResult.error))));
+};

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

@@ -0,0 +1,12 @@
+._16jlkb7n{flex-grow:1}
+._19pkx0bf{margin-top:var(--ds-space-negative-100,-8px)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1o9zkb7n{flex-shrink:1}
+._2hwx12x7{margin-right:var(--ds-space-075,6px)}
+._2hwx1f3t{margin-right:var(--ds-space-100,.5em)}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._i0dlf1ug{flex-basis:0%}
+._kqswh2mm{position:relative}