@atlaskit/link-datasource 3.19.2 → 3.20.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/link-datasource
 
+## 3.20.0
+
+### Minor Changes
+
+- [#114497](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114497)
+  [`b958f57b19df9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b958f57b19df9) -
+  Migrating styles from emotion to compiled for link-datasource
+
 ## 3.19.2
 
 ### Patch Changes

package/dist/cjs/ui/assets-modal/modal/index.compiled.css

@@ -0,0 +1,3 @@
+._1e0c11p5{display:grid}
+._4cvr1h6o{align-items:center}
+._4t3i1pna{height:420px}

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

@@ -1,20 +1,25 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AssetsConfigModal = void 0;
+exports.AssetsConfigModalNew = exports.AssetsConfigModal = void 0;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
 var _modalDialog = require("@atlaskit/modal-dialog");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics = require("../../../analytics");
 var _constants = require("../../../analytics/constants");
 var _types = require("../../../analytics/types");
@@ -37,20 +42,15 @@ var _datasourceModal = require("../../common/modal/datasource-modal");
 var _searchContainer = require("../search-container");
 var _loadingState = require("../search-container/loading-state");
 var _messages = require("./messages");
+var _modalOld = require("./modal-old");
 var _renderAssetsContent = require("./render-assets-content");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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) { (0, _defineProperty2.default)(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
+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) { (0, _defineProperty2.default)(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; }
 var VERSION_TWO = '2';
-var modalBodyErrorWrapperStyles = (0, _react2.css)({
-  alignItems: 'center',
-  display: 'grid',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-  height: _renderAssetsContent.MODAL_HEIGHT
-});
-var AssetsModalTitle = (0, _react2.jsx)(_modalDialog.ModalTitle, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertObjectsTitle));
+var modalBodyErrorWrapperStyles = null;
+var AssetsModalTitle = /*#__PURE__*/React.createElement(_modalDialog.ModalTitle, null, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertObjectsTitle));
 var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
   var datasourceId = props.datasourceId,
     initialParameters = props.parameters,
@@ -301,11 +301,11 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     if (errorState) {
       switch (errorState) {
         case 'permission':
-          return (0, _react2.jsx)(_accessRequired.AccessRequired, null);
+          return /*#__PURE__*/React.createElement(_accessRequired.AccessRequired, null);
         case 'network':
-          return (0, _react2.jsx)(_modalLoadingError.ModalLoadingError, null);
+          return /*#__PURE__*/React.createElement(_modalLoadingError.ModalLoadingError, null);
         default:
-          return (0, _react2.jsx)(_modalLoadingError.ModalLoadingError, null);
+          return /*#__PURE__*/React.createElement(_modalLoadingError.ModalLoadingError, null);
       }
     }
   }, [errorState]);
@@ -314,11 +314,11 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
       return undefined;
     } else {
       if (!workspaceId || assetsClientLoading) {
-        return (0, _react2.jsx)(_loadingState.AssetsSearchContainerLoading, {
+        return /*#__PURE__*/React.createElement(_loadingState.AssetsSearchContainerLoading, {
           modalTitle: AssetsModalTitle
         });
       }
-      return (0, _react2.jsx)(_searchContainer.AssetsSearchContainer, {
+      return /*#__PURE__*/React.createElement(_searchContainer.AssetsSearchContainer, {
         workspaceId: workspaceId,
         initialSearchData: {
           aql: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql,
@@ -337,15 +337,15 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
       actions: userInteractions.get()
     });
   }, [analyticsPayload, userInteractions]);
-  return (0, _react2.jsx)(_intlMessagesProvider.IntlMessagesProvider, {
+  return /*#__PURE__*/React.createElement(_intlMessagesProvider.IntlMessagesProvider, {
     defaultMessages: _en.default,
     loaderFn: _fetchMessagesForLocale.fetchMessagesForLocale
-  }, (0, _react2.jsx)(_modalDialog.ModalTransition, null, (0, _react2.jsx)(_datasourceModal.DatasourceModal, {
+  }, /*#__PURE__*/React.createElement(_modalDialog.ModalTransition, null, /*#__PURE__*/React.createElement(_datasourceModal.DatasourceModal, {
     testId: "asset-datasource-modal",
     onClose: onCancel
-  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, renderModalTitleContent()), (0, _react2.jsx)(_modalDialog.ModalBody, null, errorState ? (0, _react2.jsx)("div", {
-    css: modalBodyErrorWrapperStyles
-  }, renderErrorState()) : (0, _react2.jsx)(_renderAssetsContent.RenderAssetsContent, {
+  }, /*#__PURE__*/React.createElement(_modalDialog.ModalHeader, null, renderModalTitleContent()), /*#__PURE__*/React.createElement(_modalDialog.ModalBody, null, errorState ? /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_4cvr1h6o _1e0c11p5 _4t3i1pna"])
+  }, renderErrorState()) : /*#__PURE__*/React.createElement(_renderAssetsContent.RenderAssetsContent, {
     isFetchingInitialData: assetsClientLoading,
     status: status,
     responseItems: responseItems,
@@ -360,16 +360,16 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     loadDatasourceDetails: loadDatasourceDetails,
     columns: columns,
     defaultVisibleColumnKeys: defaultVisibleColumnKeys
-  })), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_cancelButton.CancelButton, {
+  })), /*#__PURE__*/React.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/React.createElement(_cancelButton.CancelButton, {
     onCancel: onCancel,
     getAnalyticsPayload: getCancelButtonAnalyticsPayload,
     testId: 'asset-datasource-modal--cancel-button'
-  }), (0, _react2.jsx)(_standardButton.default, {
+  }), /*#__PURE__*/React.createElement(_standardButton.default, {
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isDisabled,
     testId: 'assets-datasource-modal--insert-button'
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, isEditingExistingTable ? _messages.modalMessages.updateObjectsButtonText : _messages.modalMessages.insertIssuesButtonText, {
+  }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, isEditingExistingTable ? _messages.modalMessages.updateObjectsButtonText : _messages.modalMessages.insertIssuesButtonText, {
     values: {
       objectsCount: responseItems.length
     }
@@ -384,6 +384,13 @@ var analyticsContextData = _objectSpread(_objectSpread({}, _constants.componentM
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
   attributes: _objectSpread({}, analyticsContextAttributes)
 });
-var AssetsConfigModal = exports.AssetsConfigModal = (0, _analyticsNext.withAnalyticsContext)(contextData)(function (props) {
-  return (0, _react2.jsx)(_state.StoreContainer, null, (0, _react2.jsx)(_datasourceExperienceId.DatasourceExperienceIdProvider, null, (0, _react2.jsx)(_userInteractions.UserInteractionsProvider, null, (0, _react2.jsx)(PlainAssetsConfigModal, props))));
-});
+var AssetsConfigModalNew = exports.AssetsConfigModalNew = (0, _analyticsNext.withAnalyticsContext)(contextData)(function (props) {
+  return /*#__PURE__*/React.createElement(_state.StoreContainer, null, /*#__PURE__*/React.createElement(_datasourceExperienceId.DatasourceExperienceIdProvider, null, /*#__PURE__*/React.createElement(_userInteractions.UserInteractionsProvider, null, /*#__PURE__*/React.createElement(PlainAssetsConfigModal, props))));
+});
+var AssetsConfigModal = exports.AssetsConfigModal = function AssetsConfigModal(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(AssetsConfigModalNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_modalOld.AssetsConfigModalOld, props);
+  }
+};

package/dist/cjs/ui/assets-modal/modal/modal-old.js

@@ -0,0 +1,389 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AssetsConfigModalOld = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
+var _modalDialog = require("@atlaskit/modal-dialog");
+var _analytics = require("../../../analytics");
+var _constants = require("../../../analytics/constants");
+var _types = require("../../../analytics/types");
+var _ufoExperiences = require("../../../analytics/ufoExperiences");
+var _useColumnPickerRenderedFailedUfoExperience = require("../../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience");
+var _useDataRenderedUfoExperience = require("../../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience");
+var _adf = require("../../../common/utils/adf");
+var _fetchMessagesForLocale = require("../../../common/utils/locale/fetch-messages-for-locale");
+var _datasourceExperienceId = require("../../../contexts/datasource-experience-id");
+var _userInteractions = require("../../../contexts/user-interactions");
+var _useAssetsClient2 = require("../../../hooks/useAssetsClient");
+var _useDatasourceTableState = require("../../../hooks/useDatasourceTableState");
+var _en = _interopRequireDefault(require("../../../i18n/en"));
+var _cmdbService = require("../../../services/cmdbService.utils");
+var _state = require("../../../state");
+var _accessRequired = require("../../../ui/common/error-state/access-required");
+var _modalLoadingError = require("../../common/error-state/modal-loading-error");
+var _cancelButton = require("../../common/modal/cancel-button");
+var _datasourceModal = require("../../common/modal/datasource-modal");
+var _searchContainer = require("../search-container");
+var _loadingState = require("../search-container/loading-state");
+var _messages = require("./messages");
+var _renderAssetsContent = require("./render-assets-content");
+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) { (0, _defineProperty2.default)(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
+var VERSION_TWO = '2';
+var modalBodyErrorWrapperStyles = (0, _react2.css)({
+  alignItems: 'center',
+  display: 'grid',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  height: _renderAssetsContent.MODAL_HEIGHT
+});
+var AssetsModalTitle = (0, _react2.jsx)(_modalDialog.ModalTitle, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertObjectsTitle));
+var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
+  var datasourceId = props.datasourceId,
+    initialParameters = props.parameters,
+    onCancel = props.onCancel,
+    onInsert = props.onInsert,
+    initialVisibleColumnKeys = props.visibleColumnKeys;
+  var _useState = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    aql = _useState2[0],
+    setAql = _useState2[1];
+  var _useState3 = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.schemaId),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    schemaId = _useState4[0],
+    setSchemaId = _useState4[1];
+  var apiVersion = initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.version;
+  var _useState5 = (0, _react.useState)(apiVersion !== VERSION_TWO ? [] : initialVisibleColumnKeys),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    visibleColumnKeys = _useState6[0],
+    setVisibleColumnKeys = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    isNewSearch = _useState8[0],
+    setIsNewSearch = _useState8[1];
+  var _useState9 = (0, _react.useState)(),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    errorState = _useState10[0],
+    setErrorState = _useState10[1];
+  var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  var experienceId = (0, _datasourceExperienceId.useDatasourceExperienceId)();
+  var _useAssetsClient = (0, _useAssetsClient2.useAssetsClient)(initialParameters),
+    workspaceId = _useAssetsClient.workspaceId,
+    workspaceError = _useAssetsClient.workspaceError,
+    existingObjectSchema = _useAssetsClient.existingObjectSchema,
+    existingObjectSchemaError = _useAssetsClient.existingObjectSchemaError,
+    objectSchemas = _useAssetsClient.objectSchemas,
+    objectSchemasError = _useAssetsClient.objectSchemasError,
+    totalObjectSchemas = _useAssetsClient.totalObjectSchemas,
+    assetsClientLoading = _useAssetsClient.assetsClientLoading;
+
+  /* ------------------------------ PERMISSIONS ------------------------------ */
+  (0, _react.useEffect)(function () {
+    if (workspaceError) {
+      // If a workspaceError occurs this is a critical error
+      if (workspaceError instanceof _cmdbService.PermissionError) {
+        setErrorState('permission');
+      } else {
+        setErrorState('network');
+      }
+    }
+  }, [workspaceError]);
+  (0, _react.useEffect)(function () {
+    if (objectSchemasError) {
+      // We only care about permission errors for objectSchemas fetching as the user can retry this action
+      if (objectSchemasError instanceof _cmdbService.PermissionError) {
+        setErrorState('permission');
+      }
+    }
+  }, [objectSchemasError]);
+  (0, _react.useEffect)(function () {
+    if (existingObjectSchemaError) {
+      // We only care about permission errors for existingObjectSchema fetching as the user can retry this action
+      if (existingObjectSchemaError instanceof _cmdbService.PermissionError) {
+        setErrorState('permission');
+      }
+    }
+  }, [existingObjectSchemaError]);
+  /* ------------------------------ END PERMISSIONS ------------------------------ */
+
+  var parameters = (0, _react.useMemo)(function () {
+    return {
+      aql: aql || '',
+      schemaId: schemaId || '',
+      workspaceId: workspaceId || '',
+      version: VERSION_TWO
+    };
+  }, [aql, schemaId, workspaceId]);
+  var isParametersSet = !!(aql && workspaceId && schemaId);
+  var _useDatasourceTableSt = (0, _useDatasourceTableState.useDatasourceTableState)({
+      datasourceId: datasourceId,
+      parameters: isParametersSet ? parameters : undefined,
+      fieldKeys: isNewSearch ? [] : visibleColumnKeys
+    }),
+    status = _useDatasourceTableSt.status,
+    onNextPage = _useDatasourceTableSt.onNextPage,
+    responseItems = _useDatasourceTableSt.responseItems,
+    responseItemIds = _useDatasourceTableSt.responseItemIds,
+    reset = _useDatasourceTableSt.reset,
+    loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails,
+    hasNextPage = _useDatasourceTableSt.hasNextPage,
+    columns = _useDatasourceTableSt.columns,
+    defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
+    _useDatasourceTableSt2 = _useDatasourceTableSt.extensionKey,
+    extensionKey = _useDatasourceTableSt2 === void 0 ? null : _useDatasourceTableSt2,
+    destinationObjectTypes = _useDatasourceTableSt.destinationObjectTypes,
+    totalCount = _useDatasourceTableSt.totalCount;
+
+  /* ------------------------------ OBSERVABILITY ------------------------------ */
+  var searchCount = (0, _react.useRef)(0);
+  var userInteractions = (0, _userInteractions.useUserInteractions)();
+  var visibleColumnCount = (0, _react.useRef)((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
+  var isDataReady = (visibleColumnKeys || []).length > 0;
+  var analyticsPayload = (0, _react.useMemo)(function () {
+    return {
+      extensionKey: extensionKey,
+      destinationObjectTypes: destinationObjectTypes
+    };
+  }, [destinationObjectTypes, extensionKey]);
+  (0, _react.useEffect)(function () {
+    // We only want to send modal ready event once after we've fetched the schema count
+    if (totalObjectSchemas !== undefined) {
+      fireEvent('ui.modal.ready.datasource', {
+        schemasCount: totalObjectSchemas,
+        instancesCount: null
+      });
+    }
+  }, [fireEvent, totalObjectSchemas]);
+  var fireTableViewedEvent = (0, _react.useCallback)(function () {
+    if (isDataReady) {
+      fireEvent('ui.table.viewed.datasourceConfigModal', _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+        totalItemCount: totalCount || 0,
+        searchMethod: _types.DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+        displayedColumnCount: visibleColumnCount.current
+      }));
+    }
+  }, [analyticsPayload, fireEvent, totalCount, isDataReady]);
+  (0, _react.useEffect)(function () {
+    var isResolved = status === 'resolved';
+    if (!isResolved || !totalCount) {
+      return;
+    }
+    if (totalCount > 1) {
+      fireTableViewedEvent();
+    }
+  }, [fireTableViewedEvent, status, totalCount]);
+  (0, _react.useEffect)(function () {
+    var shouldStartUfoExperience = status === 'loading';
+    if (shouldStartUfoExperience) {
+      (0, _ufoExperiences.startUfoExperience)({
+        name: 'datasource-rendered'
+      }, experienceId);
+    }
+  }, [experienceId, status]);
+  (0, _useDataRenderedUfoExperience.useDataRenderedUfoExperience)({
+    status: status,
+    experienceId: experienceId,
+    itemCount: responseItems.length,
+    canBeLink: false,
+    extensionKey: extensionKey
+  });
+  (0, _useColumnPickerRenderedFailedUfoExperience.useColumnPickerRenderedFailedUfoExperience)(status, experienceId);
+  /* ------------------------------ END OBSERVABILITY ------------------------------ */
+
+  var onVisibleColumnKeysChange = (0, _react.useCallback)(function (visibleColumnKeys) {
+    setVisibleColumnKeys(visibleColumnKeys);
+    setIsNewSearch(false);
+  }, []);
+  (0, _react.useEffect)(function () {
+    var newVisibleColumnKeys = initialVisibleColumnKeys && initialVisibleColumnKeys.length > 0 && apiVersion === VERSION_TWO ? initialVisibleColumnKeys : defaultVisibleColumnKeys;
+    setVisibleColumnKeys(newVisibleColumnKeys);
+  }, [initialVisibleColumnKeys, defaultVisibleColumnKeys, apiVersion]);
+  (0, _react.useEffect)(function () {
+    if (isNewSearch) {
+      setVisibleColumnKeys(defaultVisibleColumnKeys);
+    }
+  }, [defaultVisibleColumnKeys, isNewSearch]);
+  (0, _react.useEffect)(function () {
+    visibleColumnCount.current = (visibleColumnKeys !== null && visibleColumnKeys !== void 0 ? visibleColumnKeys : []).length;
+  }, [visibleColumnKeys]);
+  var isDisabled = !!errorState || status !== 'resolved' || assetsClientLoading || !aql || !schemaId;
+  var isEditingExistingTable = !!(initialParameters !== null && initialParameters !== void 0 && initialParameters.aql && initialParameters !== null && initialParameters !== void 0 && initialParameters.schemaId && initialParameters !== null && initialParameters !== void 0 && initialParameters.workspaceId);
+  var retrieveUrlForSmartCardRender = (0, _react.useCallback)(function () {
+    var _data$key;
+    var _responseItems = (0, _slicedToArray2.default)(responseItems, 1),
+      data = _responseItems[0];
+    // agreement with BE that we will use `key` for rendering smartlink
+    return data === null || data === void 0 || (_data$key = data.key) === null || _data$key === void 0 || (_data$key = _data$key.data) === null || _data$key === void 0 ? void 0 : _data$key.url;
+  }, [responseItems]);
+  var onInsertPressed = (0, _react.useCallback)(function (e, analyticsEvent) {
+    var _insertButtonClickedE;
+    if (!aql || !schemaId || !workspaceId) {
+      return;
+    }
+    var insertButtonClickedEvent = analyticsEvent.update({
+      actionSubjectId: 'insert',
+      attributes: _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+        totalItemCount: totalCount || 0,
+        displayedColumnCount: visibleColumnCount.current,
+        display: _types.DatasourceDisplay.DATASOURCE_TABLE,
+        searchCount: searchCount.current,
+        searchMethod: _types.DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+        actions: userInteractions.get()
+      }),
+      eventType: 'ui'
+    });
+    var consumerEvent = (_insertButtonClickedE = insertButtonClickedEvent.clone()) !== null && _insertButtonClickedE !== void 0 ? _insertButtonClickedE : undefined;
+    insertButtonClickedEvent.fire(_analytics.EVENT_CHANNEL);
+    var firstAssetUrl = retrieveUrlForSmartCardRender();
+    if (responseItems.length === 1 && firstAssetUrl) {
+      onInsert({
+        type: 'inlineCard',
+        attrs: {
+          url: firstAssetUrl
+        }
+      }, consumerEvent);
+    } else {
+      onInsert((0, _adf.buildDatasourceAdf)({
+        id: datasourceId,
+        parameters: {
+          workspaceId: workspaceId,
+          aql: aql,
+          schemaId: schemaId,
+          version: VERSION_TWO
+        },
+        views: [{
+          type: 'table',
+          properties: {
+            columns: (visibleColumnKeys !== null && visibleColumnKeys !== void 0 ? visibleColumnKeys : []).map(function (key) {
+              return {
+                key: key
+              };
+            })
+          }
+        }]
+      }), consumerEvent);
+    }
+  }, [aql, schemaId, workspaceId, analyticsPayload, totalCount, userInteractions, retrieveUrlForSmartCardRender, responseItems.length, onInsert, datasourceId, visibleColumnKeys]);
+  var handleOnSearch = (0, _react.useCallback)(function (searchAql, searchSchemaId) {
+    if (schemaId !== searchSchemaId || aql !== searchAql || status === 'rejected') {
+      searchCount.current++;
+      if (schemaId !== searchSchemaId) {
+        userInteractions.add(_types.DatasourceAction.SCHEMA_UPDATED);
+      }
+      if (aql !== searchAql) {
+        userInteractions.add(_types.DatasourceAction.QUERY_UPDATED);
+      }
+      setAql(searchAql);
+      setSchemaId(searchSchemaId);
+      setVisibleColumnKeys([]);
+      setIsNewSearch(true);
+      reset({
+        shouldForceRequest: true,
+        shouldResetColumns: true
+      });
+    }
+  }, [aql, reset, schemaId, status, userInteractions]);
+  var renderErrorState = (0, _react.useCallback)(function () {
+    if (errorState) {
+      switch (errorState) {
+        case 'permission':
+          return (0, _react2.jsx)(_accessRequired.AccessRequired, null);
+        case 'network':
+          return (0, _react2.jsx)(_modalLoadingError.ModalLoadingError, null);
+        default:
+          return (0, _react2.jsx)(_modalLoadingError.ModalLoadingError, null);
+      }
+    }
+  }, [errorState]);
+  var renderModalTitleContent = (0, _react.useCallback)(function () {
+    if (errorState) {
+      return undefined;
+    } else {
+      if (!workspaceId || assetsClientLoading) {
+        return (0, _react2.jsx)(_loadingState.AssetsSearchContainerLoading, {
+          modalTitle: AssetsModalTitle
+        });
+      }
+      return (0, _react2.jsx)(_searchContainer.AssetsSearchContainer, {
+        workspaceId: workspaceId,
+        initialSearchData: {
+          aql: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql,
+          objectSchema: existingObjectSchema,
+          objectSchemas: objectSchemas
+        },
+        onSearch: handleOnSearch,
+        modalTitle: AssetsModalTitle,
+        isSearching: status === 'loading'
+      });
+    }
+  }, [errorState, workspaceId, assetsClientLoading, initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql, existingObjectSchema, objectSchemas, handleOnSearch, status]);
+  var getCancelButtonAnalyticsPayload = (0, _react.useCallback)(function () {
+    return _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+      searchCount: searchCount.current,
+      actions: userInteractions.get()
+    });
+  }, [analyticsPayload, userInteractions]);
+  return (0, _react2.jsx)(_intlMessagesProvider.IntlMessagesProvider, {
+    defaultMessages: _en.default,
+    loaderFn: _fetchMessagesForLocale.fetchMessagesForLocale
+  }, (0, _react2.jsx)(_modalDialog.ModalTransition, null, (0, _react2.jsx)(_datasourceModal.DatasourceModal, {
+    testId: "asset-datasource-modal",
+    onClose: onCancel
+  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, renderModalTitleContent()), (0, _react2.jsx)(_modalDialog.ModalBody, null, errorState ? (0, _react2.jsx)("div", {
+    css: modalBodyErrorWrapperStyles
+  }, renderErrorState()) : (0, _react2.jsx)(_renderAssetsContent.RenderAssetsContent, {
+    isFetchingInitialData: assetsClientLoading,
+    status: status,
+    responseItems: responseItems,
+    responseItemIds: responseItemIds,
+    visibleColumnKeys: visibleColumnKeys,
+    onVisibleColumnKeysChange: onVisibleColumnKeysChange,
+    datasourceId: datasourceId,
+    aql: aql,
+    schemaId: schemaId,
+    onNextPage: onNextPage,
+    hasNextPage: hasNextPage,
+    loadDatasourceDetails: loadDatasourceDetails,
+    columns: columns,
+    defaultVisibleColumnKeys: defaultVisibleColumnKeys
+  })), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_cancelButton.CancelButton, {
+    onCancel: onCancel,
+    getAnalyticsPayload: getCancelButtonAnalyticsPayload,
+    testId: 'asset-datasource-modal--cancel-button'
+  }), (0, _react2.jsx)(_standardButton.default, {
+    appearance: "primary",
+    onClick: onInsertPressed,
+    isDisabled: isDisabled,
+    testId: 'assets-datasource-modal--insert-button'
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, isEditingExistingTable ? _messages.modalMessages.updateObjectsButtonText : _messages.modalMessages.insertIssuesButtonText, {
+    values: {
+      objectsCount: responseItems.length
+    }
+  })))))));
+};
+var analyticsContextAttributes = {
+  dataProvider: 'jsm-assets'
+};
+var analyticsContextData = _objectSpread(_objectSpread({}, _constants.componentMetadata.configModal), {}, {
+  source: 'datasourceConfigModal'
+});
+var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
+  attributes: _objectSpread({}, analyticsContextAttributes)
+});
+var AssetsConfigModalOld = exports.AssetsConfigModalOld = (0, _analyticsNext.withAnalyticsContext)(contextData)(function (props) {
+  return (0, _react2.jsx)(_state.StoreContainer, null, (0, _react2.jsx)(_datasourceExperienceId.DatasourceExperienceIdProvider, null, (0, _react2.jsx)(_userInteractions.UserInteractionsProvider, null, (0, _react2.jsx)(PlainAssetsConfigModal, props))));
+});

package/dist/cjs/ui/assets-modal/modal/render-assets-content/index.compiled.css

@@ -0,0 +1,14 @@
+
+._19itn8v0{border:var(--_vzvmm2)}
+._n7zl1oe8{border-bottom:var(--_cfwo9c)}._12vemgnk{background-repeat:no-repeat}
+._13lipd34{border-top-left-radius:var(--ds-border-radius-200,8px)}
+._18m915vq{overflow-y:hidden}
+._18m91wug{overflow-y:auto}
+._1e0c11p5{display:grid}
+._1itk1bg1{background-image:var(--_17x9dh1)}
+._1lrw1sd4{background-size:40px 100%,14px 100%,40px 100%,14px 100%,100% 75pt,100% 14px,100% 40px,100% 10px}
+._1reo15vq{overflow-x:hidden}
+._1reo1wug{overflow-x:auto}
+._4t3i1pna{height:420px}
+._qmxj1c00{background-attachment:local,scroll,local,scroll,local,scroll,local,scroll}
+._qrwqpd34{border-top-right-radius:var(--ds-border-radius-200,8px)}