@atlaskit/link-datasource 3.19.2 → 3.20.0

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}

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

@@ -1,12 +1,10 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./index.compiled.css";
+import { forwardRef } from 'react';
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 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';
@@ -14,36 +12,43 @@ 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 { fg } from "@atlaskit/platform-feature-flags";
 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';
+import { AqlSearchInputOld } from './aql-search-input-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)"
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+const FieldContainer = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _19pkx0bf", __cmplp.className])
+  }));
 });
+if (process.env.NODE_ENV !== 'production') {
+  FieldContainer.displayName = 'FieldContainer';
+}
+const buttonBaseStyles = null;
 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 searchButtonStyles = null;
 const renderValidatorIcon = lastValidationResult => {
   if (lastValidationResult.type === 'loading') {
-    return jsx(Spinner, {
+    return /*#__PURE__*/React.createElement(Spinner, {
       size: "medium",
       testId: "assets-datasource-modal--aql-validating"
     });
   }
   if (lastValidationResult.type === 'invalid') {
-    return jsx(CrossCircleIcon, {
+    return /*#__PURE__*/React.createElement(CrossCircleIcon, {
       label: "label",
       color: `var(--ds-icon-danger, ${R400})`,
       LEGACY_size: "medium",
@@ -52,7 +57,7 @@ const renderValidatorIcon = lastValidationResult => {
     });
   }
   if (lastValidationResult.type === 'valid') {
-    return jsx(CheckCircleIcon, {
+    return /*#__PURE__*/React.createElement(CheckCircleIcon, {
       label: "label",
       color: `var(--ds-icon-success, ${G300})`,
       LEGACY_size: "medium",
@@ -60,7 +65,7 @@ const renderValidatorIcon = lastValidationResult => {
       spacing: "spacious"
     });
   }
-  return jsx(SearchIcon, {
+  return /*#__PURE__*/React.createElement(SearchIcon, {
     label: "label",
     LEGACY_size: "medium",
     testId: "assets-datasource-modal--aql-idle",
@@ -68,7 +73,7 @@ const renderValidatorIcon = lastValidationResult => {
     spacing: "spacious"
   });
 };
-export const AqlSearchInput = ({
+export const AqlSearchInputNew = ({
   value,
   workspaceId,
   testId = 'assets-datasource-modal--aql-search-input',
@@ -81,14 +86,14 @@ export const AqlSearchInput = ({
     debouncedValidation,
     lastValidationResult
   } = useValidateAqlText(workspaceId, value);
-  return jsx(FieldContainer, null, jsx(Field, {
+  return /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Field, {
     name: aqlKey,
     defaultValue: value,
     validate: debouncedValidation
   }, ({
     fieldProps
-  }) => jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, {
-    elemBeforeInput: jsx("span", {
+  }) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Textfield, _extends({}, fieldProps, {
+    elemBeforeInput: /*#__PURE__*/React.createElement("span", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       style: {
         paddingLeft: "var(--ds-space-075, 6px)",
@@ -96,23 +101,22 @@ export const AqlSearchInput = ({
         display: 'flex'
       }
     }, renderValidatorIcon(lastValidationResult)),
-    elemAfterInput: jsx(Fragment, null, jsx(Tooltip, {
+    elemAfterInput: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
       content: formatMessage(searchInputMessages.helpTooltipText),
       position: "bottom"
-    }, jsx("a", {
+    }, /*#__PURE__*/React.createElement("a", {
       href: AQLSupportDocumentLink,
       target: "_blank",
-      css: buttonBaseStyles
-    }, jsx(QuestionCircleIcon, {
+      className: ax(["_1e0c1txw _4t3i1osq _kqswh2mm _4cvr1h6o _1bah1h6o _2lx21bp4 _2hwx1f3t"])
+    }, /*#__PURE__*/React.createElement(QuestionCircleIcon, {
       label: "label",
       color: `var(--ds-icon, ${N500})`,
       LEGACY_size: "medium",
       testId: "assets-datasource-modal-help",
       spacing: "spacious"
-    }))), jsx(LoadingButton, {
+    }))), /*#__PURE__*/React.createElement(LoadingButton, {
       appearance: "primary",
-      css: searchButtonStyles,
-      iconBefore: jsx(SearchIcon, {
+      iconBefore: /*#__PURE__*/React.createElement(SearchIcon, {
         label: formatMessage(searchInputMessages.placeholder),
         LEGACY_size: "medium",
         color: "currentColor",
@@ -122,9 +126,17 @@ export const AqlSearchInput = ({
       spacing: "none",
       testId: "assets-datasource-modal--aql-search-button",
       type: "submit",
-      isDisabled: lastValidationResult.type !== 'valid'
+      isDisabled: lastValidationResult.type !== 'valid',
+      className: ax(["_2hwx12x7"])
     })),
     placeholder: formatMessage(searchInputMessages.placeholder),
     testId: testId
-  })), lastValidationResult.type === 'invalid' && lastValidationResult.error && jsx(ErrorMessage, null, lastValidationResult.error))));
+  })), lastValidationResult.type === 'invalid' && lastValidationResult.error && /*#__PURE__*/React.createElement(ErrorMessage, null, lastValidationResult.error))));
+};
+export const AqlSearchInput = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(AqlSearchInputNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(AqlSearchInputOld, props);
+  }
 };

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

@@ -1,11 +1,6 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React from 'react';
 import { Skeleton } from '@atlaskit/linking-common';
-export const AssetsAqlSearchInputSkeleton = () => jsx(Skeleton, {
+export const AssetsAqlSearchInputSkeleton = () => /*#__PURE__*/React.createElement(Skeleton, {
   width: "100%",
   height: "40px",
   testId: "assets-datasource-modal--aql-search-input-skeleton"

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

@@ -0,0 +1,4 @@
+._1bsb1osq{width:100%}
+._1e0c11p5{display:grid}
+._1p57pxbi{row-gap:var(--ds-space-200,1pc)}
+._p12ffkat{max-width:386px}

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

@@ -1,18 +1,51 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import "./index.compiled.css";
+import { forwardRef } from 'react';
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import Form from '@atlaskit/form';
+import { fg } from "@atlaskit/platform-feature-flags";
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { AqlSearchInput } from './aql-search-input';
 import { AssetsObjectSchemaSelect } from './object-schema-select';
-import { FormContainer, FormRowContainer, SchemaSelectContainer } from './styled';
+import { AssetsSearchContainerOld } from './search-container-old';
+import { FormRowContainer } from './styled';
 const DEFAULT_AQL_QUERY = '';
 const SEARCH_FORM_ID = 'linkDataSource.assets.configModal.searchContainer-form';
-export const AssetsSearchContainer = props => {
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+const SchemaSelectContainer = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1bsb1osq _p12ffkat", __cmplp.className])
+  }));
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  SchemaSelectContainer.displayName = 'SchemaSelectContainer';
+}
+const FormContainer = forwardRef(({
+  as: C = "form",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1e0c11p5 _1p57pxbi _1bsb1osq", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  FormContainer.displayName = 'FormContainer';
+}
+export const AssetsSearchContainerNew = props => {
   const {
     onSearch,
     workspaceId,
@@ -34,25 +67,32 @@ export const AssetsSearchContainer = props => {
       onSearch(aql, objectSchema.value);
     }
   };
-  return jsx(Form, {
+  return /*#__PURE__*/React.createElement(Form, {
     onSubmit: onFormSubmit
   }, ({
     formProps
   }) => {
     var _initialSearchData$ob, _initialSearchData$ob2, _initialSearchData$aq;
-    return jsx(FormContainer, _extends({}, formProps, {
+    return /*#__PURE__*/React.createElement(FormContainer, _extends({}, formProps, {
       id: SEARCH_FORM_ID
-    }), jsx(FormRowContainer, {
+    }), /*#__PURE__*/React.createElement(FormRowContainer, {
       isNarrowGap: true
-    }, modalTitle, jsx(SchemaSelectContainer, null, jsx(AssetsObjectSchemaSelect, {
+    }, modalTitle, /*#__PURE__*/React.createElement(SchemaSelectContainer, null, /*#__PURE__*/React.createElement(AssetsObjectSchemaSelect, {
       value: (_initialSearchData$ob = initialSearchData.objectSchema) !== null && _initialSearchData$ob !== void 0 ? _initialSearchData$ob : undefined,
       workspaceId: workspaceId,
       initialObjectSchemas: (_initialSearchData$ob2 = initialSearchData.objectSchemas) !== null && _initialSearchData$ob2 !== void 0 ? _initialSearchData$ob2 : undefined,
       classNamePrefix: "assets-datasource-modal--object-schema-select"
-    }))), jsx(FormRowContainer, null, jsx(AqlSearchInput, {
+    }))), /*#__PURE__*/React.createElement(FormRowContainer, null, /*#__PURE__*/React.createElement(AqlSearchInput, {
       value: (_initialSearchData$aq = initialSearchData.aql) !== null && _initialSearchData$aq !== void 0 ? _initialSearchData$aq : DEFAULT_AQL_QUERY,
       workspaceId: workspaceId,
       isSearching: isSearching
     })));
   });
+};
+export const AssetsSearchContainer = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(AssetsSearchContainerNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(AssetsSearchContainerOld, props);
+  }
 };

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

@@ -0,0 +1,18 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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-old';
+export const AssetsSearchContainerLoadingOld = ({
+  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/es2019/ui/assets-modal/search-container/loading-state.compiled.css

@@ -0,0 +1,4 @@
+._1bsb1osq{width:100%}
+._1e0c11p5{display:grid}
+._1p57pxbi{row-gap:var(--ds-space-200,1pc)}
+._p12ffkat{max-width:386px}

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

@@ -1,18 +1,57 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+/* loading-state.tsx generated by @compiled/babel-plugin v0.36.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./loading-state.compiled.css";
+import { forwardRef } from 'react';
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from "@atlaskit/platform-feature-flags";
 import { AssetsAqlSearchInputSkeleton } from './aql-search-input/loading-state';
+import { AssetsSearchContainerLoadingOld } from './loading-state-old';
 import { AssetsObjectSchemaSelectSkeleton } from './object-schema-select/loading-state';
-import { FormContainer, FormRowContainer, SchemaSelectContainer } from './styled';
-export const AssetsSearchContainerLoading = ({
+import { FormRowContainer } from './styled';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+const SchemaSelectContainer = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1bsb1osq _p12ffkat", __cmplp.className])
+  }));
+});
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  SchemaSelectContainer.displayName = 'SchemaSelectContainer';
+}
+const FormContainer = forwardRef(({
+  as: C = "form",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1e0c11p5 _1p57pxbi _1bsb1osq", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  FormContainer.displayName = 'FormContainer';
+}
+const AssetsSearchContainerLoadingNew = ({
   modalTitle
 }) => {
-  return jsx(FormContainer, {
+  return /*#__PURE__*/React.createElement(FormContainer, {
     "data-testid": "assets-datasource-modal--search-container-skeleton"
-  }, jsx(FormRowContainer, {
+  }, /*#__PURE__*/React.createElement(FormRowContainer, {
     isNarrowGap: true
-  }, modalTitle, jsx(SchemaSelectContainer, null, jsx(AssetsObjectSchemaSelectSkeleton, null))), jsx(FormRowContainer, null, jsx(AssetsAqlSearchInputSkeleton, null)));
+  }, modalTitle, /*#__PURE__*/React.createElement(SchemaSelectContainer, null, /*#__PURE__*/React.createElement(AssetsObjectSchemaSelectSkeleton, null))), /*#__PURE__*/React.createElement(FormRowContainer, null, /*#__PURE__*/React.createElement(AssetsAqlSearchInputSkeleton, null)));
+};
+export const AssetsSearchContainerLoading = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(AssetsSearchContainerLoadingNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(AssetsSearchContainerLoadingOld, props);
+  }
 };

package/dist/es2019/ui/assets-modal/search-container/object-schema-select/index.compiled.css

@@ -0,0 +1,4 @@
+._16jlkb7n{flex-grow:1}
+._19pkx0bf{margin-top:var(--ds-space-negative-100,-8px)}
+._1o9zkb7n{flex-shrink:1}
+._i0dlf1ug{flex-basis:0%}