@atlaskit/link-datasource 3.19.2 → 3.20.0

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

@@ -1,17 +1,59 @@
-/**
- * @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 _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["as", "style"],
+  _excluded2 = ["as", "style"];
+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 var AssetsSearchContainerLoading = function AssetsSearchContainerLoading(_ref) {
-  var modalTitle = _ref.modalTitle;
-  return jsx(FormContainer, {
+import { FormRowContainer } from './styled';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+var SchemaSelectContainer = forwardRef(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "div" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = _objectWithoutProperties(_ref, _excluded);
+  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';
+}
+var FormContainer = forwardRef(function (_ref2, __cmplr) {
+  var _ref2$as = _ref2.as,
+    C = _ref2$as === void 0 ? "form" : _ref2$as,
+    __cmpls = _ref2.style,
+    __cmplp = _objectWithoutProperties(_ref2, _excluded2);
+  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';
+}
+var AssetsSearchContainerLoadingNew = function AssetsSearchContainerLoadingNew(_ref3) {
+  var modalTitle = _ref3.modalTitle;
+  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 var AssetsSearchContainerLoading = function AssetsSearchContainerLoading(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(AssetsSearchContainerLoadingNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(AssetsSearchContainerLoadingOld, props);
+  }
 };

package/dist/esm/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%}

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

@@ -1,18 +1,17 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["onChange", "onFocus"];
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["as", "style"],
+  _excluded2 = ["onChange", "onFocus"];
+import "./index.compiled.css";
+import { forwardRef } from 'react';
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * @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 debounce from 'debounce-promise';
 import { useIntl } from 'react-intl-next';
 import { Field } from '@atlaskit/form';
@@ -20,9 +19,24 @@ import { AsyncSelect } from '@atlaskit/select';
 import { layers } from '@atlaskit/theme/constants';
 import { useObjectSchemas } from '../../../../hooks/useObjectSchemas';
 import { objectSchemaKey } from '../../../../types/assets/types';
-import { FieldContainer } from '../styled';
 import { objectSchemaSelectMessages } from './messages';
 import { objectSchemaToSelectOption } from './utils';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+var FieldContainer = forwardRef(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "div" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = _objectWithoutProperties(_ref, _excluded);
+  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';
+}
 export var SEARCH_DEBOUNCE_MS = 350;
 var mapObjectSchemasToOptions = function mapObjectSchemasToOptions(objectSchemas) {
   return objectSchemas ? objectSchemas.map(function (objectSchema) {
@@ -44,12 +58,12 @@ export var selectInAModalStyleFixProps = {
   },
   menuPortalTarget: document.body
 };
-export var AssetsObjectSchemaSelect = function AssetsObjectSchemaSelect(_ref) {
-  var value = _ref.value,
-    workspaceId = _ref.workspaceId,
-    initialObjectSchemas = _ref.initialObjectSchemas,
-    _ref$classNamePrefix = _ref.classNamePrefix,
-    classNamePrefix = _ref$classNamePrefix === void 0 ? 'assets-datasource-modal--object-schema-select' : _ref$classNamePrefix;
+export var AssetsObjectSchemaSelect = function AssetsObjectSchemaSelect(_ref2) {
+  var value = _ref2.value,
+    workspaceId = _ref2.workspaceId,
+    initialObjectSchemas = _ref2.initialObjectSchemas,
+    _ref2$classNamePrefix = _ref2.classNamePrefix,
+    classNamePrefix = _ref2$classNamePrefix === void 0 ? 'assets-datasource-modal--object-schema-select' : _ref2$classNamePrefix;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useObjectSchemas = useObjectSchemas(workspaceId),
@@ -57,7 +71,7 @@ export var AssetsObjectSchemaSelect = function AssetsObjectSchemaSelect(_ref) {
     objectSchemasLoading = _useObjectSchemas.objectSchemasLoading;
   var selectedObjectSchema = value ? objectSchemaToSelectOption(value) : undefined;
   var loadOptions = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(inputValue) {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(inputValue) {
       var _yield$fetchObjectSch, objectSchemas;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -75,7 +89,7 @@ export var AssetsObjectSchemaSelect = function AssetsObjectSchemaSelect(_ref) {
       }, _callee);
     }));
     return function loadOptions(_x) {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
   var debouncedLoadOptions = debounce(loadOptions, SEARCH_DEBOUNCE_MS);
@@ -85,18 +99,18 @@ export var AssetsObjectSchemaSelect = function AssetsObjectSchemaSelect(_ref) {
     }
     return undefined;
   };
-  return jsx(FieldContainer, null, jsx(Field, {
+  return /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Field, {
     name: objectSchemaKey,
     defaultValue: selectedObjectSchema,
     validate: function validate(value) {
       return validateSchema(value);
     }
-  }, function (_ref3) {
-    var _ref3$fieldProps = _ref3.fieldProps,
-      _onChange = _ref3$fieldProps.onChange,
-      onFocus = _ref3$fieldProps.onFocus,
-      restFieldProps = _objectWithoutProperties(_ref3$fieldProps, _excluded);
-    return jsx(AsyncSelect, _extends({
+  }, function (_ref4) {
+    var _ref4$fieldProps = _ref4.fieldProps,
+      _onChange = _ref4$fieldProps.onChange,
+      onFocus = _ref4$fieldProps.onFocus,
+      restFieldProps = _objectWithoutProperties(_ref4$fieldProps, _excluded2);
+    return /*#__PURE__*/React.createElement(AsyncSelect, _extends({
       autoFocus: true,
       classNamePrefix: classNamePrefix,
       isLoading: objectSchemasLoading,

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

@@ -1,12 +1,7 @@
-/**
- * @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 var AssetsObjectSchemaSelectSkeleton = function AssetsObjectSchemaSelectSkeleton() {
-  return jsx(Skeleton, {
+  return /*#__PURE__*/React.createElement(Skeleton, {
     width: "100%",
     height: "40px",
     testId: "assets-datasource-modal--object-schema-select-skeleton"

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

@@ -0,0 +1,52 @@
+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 Form from '@atlaskit/form';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { AqlSearchInput } from './aql-search-input';
+import { AssetsObjectSchemaSelect } from './object-schema-select';
+import { FormContainer, FormRowContainer, SchemaSelectContainer } from './styled-old';
+var DEFAULT_AQL_QUERY = '';
+var SEARCH_FORM_ID = 'linkDataSource.assets.configModal.searchContainer-form';
+export var AssetsSearchContainerOld = function AssetsSearchContainerOld(props) {
+  var onSearch = props.onSearch,
+    workspaceId = props.workspaceId,
+    initialSearchData = props.initialSearchData,
+    modalTitle = props.modalTitle,
+    isSearching = props.isSearching;
+  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  var onFormSubmit = function onFormSubmit(searchFormValues) {
+    var aql = searchFormValues.aql,
+      objectSchema = searchFormValues.objectSchema;
+    if (aql && objectSchema) {
+      fireEvent('ui.aqlEditor.searched', {});
+      // Pass the validated aql and object schema back to modal
+      onSearch(aql, objectSchema.value);
+    }
+  };
+  return jsx(Form, {
+    onSubmit: onFormSubmit
+  }, function (_ref) {
+    var _initialSearchData$ob, _initialSearchData$ob2, _initialSearchData$aq;
+    var formProps = _ref.formProps;
+    return jsx(FormContainer, _extends({}, formProps, {
+      id: SEARCH_FORM_ID
+    }), jsx(FormRowContainer, {
+      isNarrowGap: true
+    }, modalTitle, jsx(SchemaSelectContainer, null, jsx(AssetsObjectSchemaSelect, {
+      value: (_initialSearchData$ob = initialSearchData.objectSchema) !== null && _initialSearchData$ob !== void 0 ? _initialSearchData$ob : undefined,
+      workspaceId: workspaceId,
+      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, {
+      value: (_initialSearchData$aq = initialSearchData.aql) !== null && _initialSearchData$aq !== void 0 ? _initialSearchData$aq : DEFAULT_AQL_QUERY,
+      workspaceId: workspaceId,
+      isSearching: isSearching
+    })));
+  });
+};

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

@@ -0,0 +1,34 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+export var FormRowContainer = styled.div(function (props) {
+  return {
+    alignItems: 'center',
+    display: 'flex',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    gap: props.isNarrowGap ? "var(--ds-space-100, 8px)" : "var(--ds-space-200, 16px)",
+    flexGrow: 1,
+    width: '100%'
+  };
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var FormContainer = styled.form({
+  display: 'grid',
+  rowGap: "var(--ds-space-200, 16px)",
+  width: '100%'
+});
+
+// Override the top margin of fields
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var FieldContainer = styled.div({
+  flex: 1,
+  marginTop: "var(--ds-space-negative-100, -8px)"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var SchemaSelectContainer = styled.div({
+  width: '100%',
+  maxWidth: '386px'
+});
+"\nmv click-summary-column-dropdown-to-see-its-items--default--bandicoots-compiled-migration-smartcard-false.png click-summary-column-dropdown-to-see-its-items--default--bandicoots-compiled-migration-link-datasource-false.png\nmv click-summary-column-dropdown-to-see-its-items--default--bandicoots-compiled-migration-smartcard-true.png click-summary-column-dropdown-to-see-its-items--default--bandicoots-compiled-migration-link-datasource-true.png\nmv double-lined-date-of-creation-header-text-is-truncated-with-ellipses--default--bandicoots-compiled-migration-smartcard-false.png double-lined-date-of-creation-header-text-is-truncated-with-ellipses--default--bandicoots-compiled-migration-link-datasource-false.png\nmv double-lined-date-of-creation-header-text-is-truncated-with-ellipses--default--bandicoots-compiled-migration-smartcard-true.png double-lined-date-of-creation-header-text-is-truncated-with-ellipses--default--bandicoots-compiled-migration-link-datasource-true.png\nmv hovering-over-bug-icon--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-bug-icon--default--bandicoots-compiled-migration-link-datasource-false.png\nmv hovering-over-bug-icon--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-bug-icon--default--bandicoots-compiled-migration-link-datasource-true.png\nmv hovering-over-date--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-date--default--bandicoots-compiled-migration-link-datasource-false.png\nmv hovering-over-date--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-date--default--bandicoots-compiled-migration-link-datasource-true.png\nmv hovering-over-label-another-third-labels--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-label-another-third-labels--default--bandicoots-compiled-migration-link-datasource-false.png\nmv hovering-over-label-another-third-labels--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-label-another-third-labels--default--bandicoots-compiled-migration-link-datasource-true.png\nmv hovering-over-labels-header--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-labels-header--default--bandicoots-compiled-migration-link-datasource-false.png\nmv hovering-over-labels-header--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-labels-header--default--bandicoots-compiled-migration-link-datasource-true.png\nmv hovering-over-people--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-people--default--bandicoots-compiled-migration-link-datasource-false.png\nmv hovering-over-people--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-people--default--bandicoots-compiled-migration-link-datasource-true.png\nmv hovering-over-people-header--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-people-header--default--bandicoots-compiled-migration-link-datasource-false.png\nmv hovering-over-people-header--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-people-header--default--bandicoots-compiled-migration-link-datasource-true.png\nmv hovering-over-status-header--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-status-header--default--bandicoots-compiled-migration-link-datasource-false.png\nmv hovering-over-status-header--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-status-header--default--bandicoots-compiled-migration-link-datasource-true.png\nmv hovering-over-summary--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-summary--default--bandicoots-compiled-migration-link-datasource-false.png\nmv hovering-over-summary--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-summary--default--bandicoots-compiled-migration-link-datasource-true.png\nmv hovering-over-to-do-status--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-to-do-status--default--bandicoots-compiled-migration-link-datasource-false.png\nmv hovering-over-to-do-status--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-to-do-status--default--bandicoots-compiled-migration-link-datasource-true.png\nmv hovering-over-unassigned-assignee--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-unassigned-assignee--default--bandicoots-compiled-migration-link-datasource-false.png\nmv hovering-over-unassigned-assignee--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-unassigned-assignee--default--bandicoots-compiled-migration-link-datasource-true.png\nmv toggle-wrapping-on-several-columns--default--bandicoots-compiled-migration-smartcard-false.png toggle-wrapping-on-several-columns--default--bandicoots-compiled-migration-link-datasource-false.png\nmv toggle-wrapping-on-several-columns--default--bandicoots-compiled-migration-smartcard-true.png toggle-wrapping-on-several-columns--default--bandicoots-compiled-migration-link-datasource-true.png\n";

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

@@ -0,0 +1,6 @@
+
+._zulppxbi{gap:var(--ds-space-200,1pc)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._16jlkb7n{flex-grow:1}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}

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

@@ -1,33 +1,12 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
-export var FormRowContainer = styled.div(function (props) {
-  return {
-    alignItems: 'center',
-    display: 'flex',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    gap: props.isNarrowGap ? "var(--ds-space-100, 8px)" : "var(--ds-space-200, 16px)",
-    flexGrow: 1,
-    width: '100%'
-  };
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var FormContainer = styled.form({
-  display: 'grid',
-  rowGap: "var(--ds-space-200, 16px)",
-  width: '100%'
-});
-
-// Override the top margin of fields
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var FieldContainer = styled.div({
-  flex: 1,
-  marginTop: "var(--ds-space-negative-100, -8px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var SchemaSelectContainer = styled.div({
-  width: '100%',
-  maxWidth: '386px'
-});
+/* styled.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./styled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var formRowContainerBaseStyles = null;
+var formRowContainerNarrowGapStyles = null;
+var formRowContainerWideGapStyles = null;
+export var FormRowContainer = function FormRowContainer(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_4cvr1h6o _1e0c1txw _16jlkb7n _1bsb1osq", props.isNarrowGap ? "_zulpu2gc" : "_zulppxbi"])
+  }, props.children);
+};

package/dist/esm/ui/common/error-state/access-required-old.js

@@ -0,0 +1,72 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useEffect } 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 EmptyState from '@atlaskit/empty-state';
+import { Box, xcss } from '@atlaskit/primitives';
+import { N400 } from '@atlaskit/theme/colors';
+import { fontFallback } from '@atlaskit/theme/typography';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { AccessRequiredSVGOld } from './access-required-svg';
+import { loadingErrorMessages } from './messages';
+var urlStyles = css({
+  color: "var(--ds-text-subtlest, ".concat(N400, ")"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  font: "var(--ds-font-body, ".concat(fontFallback.body.medium, ")")
+});
+var descriptionMessageStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: "var(--ds-space-200, 16px)"
+});
+var iconContainerStyles = xcss({
+  marginBottom: 'space.200'
+});
+var Description = function Description(_ref) {
+  var message = _ref.message,
+    url = _ref.url;
+  return jsx("div", {
+    css: descriptionMessageStyles
+  }, jsx("span", {
+    css: urlStyles
+  }, url), jsx("span", null, message));
+};
+var IconContainer = function IconContainer() {
+  return jsx(Box, {
+    xcss: iconContainerStyles
+  }, jsx(AccessRequiredSVGOld, null));
+};
+export var AccessRequiredOld = function AccessRequiredOld(_ref2) {
+  var url = _ref2.url;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  useEffect(function () {
+    fireEvent('ui.error.shown', {
+      reason: 'access'
+    });
+  }, [fireEvent]);
+  if (url) {
+    return jsx(EmptyState, {
+      testId: "datasource--access-required-with-url",
+      header: formatMessage(loadingErrorMessages.accessRequiredWithSite),
+      description: jsx(Description, {
+        message: formatMessage(loadingErrorMessages.accessInstructions),
+        url: url
+      }),
+      renderImage: IconContainer
+    });
+  }
+  return jsx(EmptyState, {
+    testId: "datasource--access-required",
+    header: formatMessage(loadingErrorMessages.accessRequired),
+    description: formatMessage(loadingErrorMessages.accessInstructions),
+    renderImage: IconContainer
+  });
+};

package/dist/esm/ui/common/error-state/access-required.compiled.css

@@ -0,0 +1,6 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._zulppxbi{gap:var(--ds-space-200,1pc)}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
+._syaznoz8{color:var(--ds-text-subtlest,#505f79)}

package/dist/esm/ui/common/error-state/access-required.js

@@ -1,62 +1,39 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* access-required.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./access-required.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useEffect } 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 EmptyState from '@atlaskit/empty-state';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Box } from '@atlaskit/primitives/compiled';
 import { N400 } from '@atlaskit/theme/colors';
 import { fontFallback } from '@atlaskit/theme/typography';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
-import { SpotPadlockKey } from '../../../common/ui/spot/basics/padlock-key';
+import { AccessRequiredOld } from './access-required-old';
 import { AccessRequiredSVGOld } from './access-required-svg';
 import { loadingErrorMessages } from './messages';
-var urlStyles = css({
-  color: "var(--ds-text-subtlest, ".concat(N400, ")"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: "var(--ds-font-body, ".concat(fontFallback.body.medium, ")")
-});
-var descriptionMessageStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: "var(--ds-space-200, 16px)"
-});
-var iconContainerStyles = xcss({
-  marginBottom: 'space.200'
-});
+var styles = {
+  iconContainerStyles: "_otyrpxbi",
+  descriptionMessageStyles: "_zulppxbi _1e0c1txw _2lx21bp4",
+  urlStyles: "_11c81oud _syaznoz8"
+};
 var Description = function Description(_ref) {
   var message = _ref.message,
     url = _ref.url;
-  return jsx("div", {
-    css: descriptionMessageStyles
-  }, jsx("span", {
-    css: urlStyles
-  }, url), jsx("span", null, message));
-};
-var noop = function noop() {
-  return '';
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.descriptionMessageStyles])
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ax([styles.urlStyles])
+  }, url), /*#__PURE__*/React.createElement("span", null, message));
 };
 var IconContainer = function IconContainer() {
-  var _ref2 = fg('bandicoots-update-sllv-icons') ?
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useIntl() : {
-      formatMessage: noop
-    },
-    formatMessage = _ref2.formatMessage;
-  return jsx(Box, {
-    xcss: iconContainerStyles
-  }, fg('bandicoots-update-sllv-icons') ? jsx(SpotPadlockKey, {
-    size: 'xlarge',
-    alt: formatMessage(loadingErrorMessages.accessRequired)
-  }) : jsx(AccessRequiredSVGOld, null));
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.iconContainerStyles
+  }, /*#__PURE__*/React.createElement(AccessRequiredSVGOld, null));
 };
-export var AccessRequired = function AccessRequired(_ref3) {
-  var url = _ref3.url;
+export var AccessRequiredNew = function AccessRequiredNew(_ref2) {
+  var url = _ref2.url;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
@@ -67,20 +44,27 @@ export var AccessRequired = function AccessRequired(_ref3) {
     });
   }, [fireEvent]);
   if (url) {
-    return jsx(EmptyState, {
+    return /*#__PURE__*/React.createElement(EmptyState, {
       testId: "datasource--access-required-with-url",
       header: formatMessage(loadingErrorMessages.accessRequiredWithSite),
-      description: jsx(Description, {
+      description: /*#__PURE__*/React.createElement(Description, {
         message: formatMessage(loadingErrorMessages.accessInstructions),
         url: url
       }),
       renderImage: IconContainer
     });
   }
-  return jsx(EmptyState, {
+  return /*#__PURE__*/React.createElement(EmptyState, {
     testId: "datasource--access-required",
     header: formatMessage(loadingErrorMessages.accessRequired),
     description: formatMessage(loadingErrorMessages.accessInstructions),
     renderImage: IconContainer
   });
+};
+export var AccessRequired = function AccessRequired(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(AccessRequiredNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(AccessRequiredOld, props);
+  }
 };

package/dist/esm/ui/common/error-state/loading-error-old.js

@@ -0,0 +1,54 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useEffect } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import Button from '@atlaskit/button/standard-button';
+import { Box, Inline, Text } from '@atlaskit/primitives';
+import { fontFallback } from '@atlaskit/theme/typography';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { LoadingErrorSVGOld } from './loading-error-svg-old';
+import { loadingErrorMessages } from './messages';
+var errorContainerStyles = css({
+  display: 'grid',
+  gap: "var(--ds-space-200, 16px)",
+  placeItems: 'center',
+  placeSelf: 'center'
+});
+var errorMessageContainerStyles = css({
+  display: 'grid',
+  gap: "var(--ds-space-100, 8px)",
+  placeItems: 'center'
+});
+var errorMessageStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  font: "var(--ds-font-heading-small, ".concat(fontFallback.heading.small, ")")
+});
+export var LoadingErrorOld = function LoadingErrorOld(_ref) {
+  var onRefresh = _ref.onRefresh;
+  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  useEffect(function () {
+    fireEvent('ui.error.shown', {
+      reason: 'network'
+    });
+  }, [fireEvent]);
+  return jsx(Box, {
+    xcss: errorContainerStyles,
+    testId: "datasource--loading-error"
+  }, jsx(LoadingErrorSVGOld, null), jsx(Box, {
+    xcss: errorMessageContainerStyles
+  }, jsx(Inline, {
+    as: "span",
+    xcss: errorMessageStyles
+  }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadItems)), jsx(Text, {
+    as: "p"
+  }, jsx(FormattedMessage, loadingErrorMessages.checkConnection)), onRefresh && jsx(Button, {
+    appearance: "primary",
+    onClick: onRefresh
+  }, jsx(FormattedMessage, loadingErrorMessages.refresh))));
+};

package/dist/esm/ui/common/error-state/loading-error.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)}
+._zulppxbi{gap:var(--ds-space-200,1pc)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._10fp1h6o{justify-self:center}
+._1e0c11p5{display:grid}
+._1wpz1h6o{align-self:center}
+._4cvr1h6o{align-items:center}
+._6a6z1h6o{justify-items:center}