@atlaskit/link-datasource 3.19.2 → 3.20.0

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

@@ -0,0 +1,370 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } 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 { withAnalyticsContext } from '@atlaskit/analytics-next';
+import Button from '@atlaskit/button/standard-button';
+import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
+import { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
+import { componentMetadata } from '../../../analytics/constants';
+import { DatasourceAction, DatasourceDisplay, DatasourceSearchMethod } from '../../../analytics/types';
+import { startUfoExperience } from '../../../analytics/ufoExperiences';
+import { useColumnPickerRenderedFailedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience';
+import { useDataRenderedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
+import { buildDatasourceAdf } from '../../../common/utils/adf';
+import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
+import { DatasourceExperienceIdProvider, useDatasourceExperienceId } from '../../../contexts/datasource-experience-id';
+import { UserInteractionsProvider, useUserInteractions } from '../../../contexts/user-interactions';
+import { useAssetsClient } from '../../../hooks/useAssetsClient';
+import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
+import i18nEN from '../../../i18n/en';
+import { PermissionError } from '../../../services/cmdbService.utils';
+import { StoreContainer } from '../../../state';
+import { AccessRequired } from '../../../ui/common/error-state/access-required';
+import { ModalLoadingError } from '../../common/error-state/modal-loading-error';
+import { CancelButton } from '../../common/modal/cancel-button';
+import { DatasourceModal } from '../../common/modal/datasource-modal';
+import { AssetsSearchContainer } from '../search-container';
+import { AssetsSearchContainerLoading } from '../search-container/loading-state';
+import { modalMessages } from './messages';
+import { MODAL_HEIGHT, RenderAssetsContent } from './render-assets-content';
+const VERSION_TWO = '2';
+const modalBodyErrorWrapperStyles = 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: MODAL_HEIGHT
+});
+const AssetsModalTitle = jsx(ModalTitle, null, jsx(FormattedMessage, modalMessages.insertObjectsTitle));
+const PlainAssetsConfigModal = props => {
+  const {
+    datasourceId,
+    parameters: initialParameters,
+    onCancel,
+    onInsert,
+    visibleColumnKeys: initialVisibleColumnKeys
+  } = props;
+  const [aql, setAql] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql);
+  const [schemaId, setSchemaId] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.schemaId);
+  const apiVersion = initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.version;
+  const [visibleColumnKeys, setVisibleColumnKeys] = useState(apiVersion !== VERSION_TWO ? [] : initialVisibleColumnKeys);
+  const [isNewSearch, setIsNewSearch] = useState(false);
+  const [errorState, setErrorState] = useState();
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+  const experienceId = useDatasourceExperienceId();
+  const {
+    workspaceId,
+    workspaceError,
+    existingObjectSchema,
+    existingObjectSchemaError,
+    objectSchemas,
+    objectSchemasError,
+    totalObjectSchemas,
+    assetsClientLoading
+  } = useAssetsClient(initialParameters);
+
+  /* ------------------------------ PERMISSIONS ------------------------------ */
+  useEffect(() => {
+    if (workspaceError) {
+      // If a workspaceError occurs this is a critical error
+      if (workspaceError instanceof PermissionError) {
+        setErrorState('permission');
+      } else {
+        setErrorState('network');
+      }
+    }
+  }, [workspaceError]);
+  useEffect(() => {
+    if (objectSchemasError) {
+      // We only care about permission errors for objectSchemas fetching as the user can retry this action
+      if (objectSchemasError instanceof PermissionError) {
+        setErrorState('permission');
+      }
+    }
+  }, [objectSchemasError]);
+  useEffect(() => {
+    if (existingObjectSchemaError) {
+      // We only care about permission errors for existingObjectSchema fetching as the user can retry this action
+      if (existingObjectSchemaError instanceof PermissionError) {
+        setErrorState('permission');
+      }
+    }
+  }, [existingObjectSchemaError]);
+  /* ------------------------------ END PERMISSIONS ------------------------------ */
+
+  const parameters = useMemo(() => ({
+    aql: aql || '',
+    schemaId: schemaId || '',
+    workspaceId: workspaceId || '',
+    version: VERSION_TWO
+  }), [aql, schemaId, workspaceId]);
+  const isParametersSet = !!(aql && workspaceId && schemaId);
+  const {
+    status,
+    onNextPage,
+    responseItems,
+    responseItemIds,
+    reset,
+    loadDatasourceDetails,
+    hasNextPage,
+    columns,
+    defaultVisibleColumnKeys,
+    extensionKey = null,
+    destinationObjectTypes,
+    totalCount
+  } = useDatasourceTableState({
+    datasourceId,
+    parameters: isParametersSet ? parameters : undefined,
+    fieldKeys: isNewSearch ? [] : visibleColumnKeys
+  });
+
+  /* ------------------------------ OBSERVABILITY ------------------------------ */
+  const searchCount = useRef(0);
+  const userInteractions = useUserInteractions();
+  const visibleColumnCount = useRef((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
+  const isDataReady = (visibleColumnKeys || []).length > 0;
+  const analyticsPayload = useMemo(() => {
+    return {
+      extensionKey: extensionKey,
+      destinationObjectTypes: destinationObjectTypes
+    };
+  }, [destinationObjectTypes, extensionKey]);
+  useEffect(() => {
+    // 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]);
+  const fireTableViewedEvent = useCallback(() => {
+    if (isDataReady) {
+      fireEvent('ui.table.viewed.datasourceConfigModal', {
+        ...analyticsPayload,
+        totalItemCount: totalCount || 0,
+        searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+        displayedColumnCount: visibleColumnCount.current
+      });
+    }
+  }, [analyticsPayload, fireEvent, totalCount, isDataReady]);
+  useEffect(() => {
+    const isResolved = status === 'resolved';
+    if (!isResolved || !totalCount) {
+      return;
+    }
+    if (totalCount > 1) {
+      fireTableViewedEvent();
+    }
+  }, [fireTableViewedEvent, status, totalCount]);
+  useEffect(() => {
+    const shouldStartUfoExperience = status === 'loading';
+    if (shouldStartUfoExperience) {
+      startUfoExperience({
+        name: 'datasource-rendered'
+      }, experienceId);
+    }
+  }, [experienceId, status]);
+  useDataRenderedUfoExperience({
+    status,
+    experienceId: experienceId,
+    itemCount: responseItems.length,
+    canBeLink: false,
+    extensionKey
+  });
+  useColumnPickerRenderedFailedUfoExperience(status, experienceId);
+  /* ------------------------------ END OBSERVABILITY ------------------------------ */
+
+  const onVisibleColumnKeysChange = useCallback(visibleColumnKeys => {
+    setVisibleColumnKeys(visibleColumnKeys);
+    setIsNewSearch(false);
+  }, []);
+  useEffect(() => {
+    const newVisibleColumnKeys = initialVisibleColumnKeys && initialVisibleColumnKeys.length > 0 && apiVersion === VERSION_TWO ? initialVisibleColumnKeys : defaultVisibleColumnKeys;
+    setVisibleColumnKeys(newVisibleColumnKeys);
+  }, [initialVisibleColumnKeys, defaultVisibleColumnKeys, apiVersion]);
+  useEffect(() => {
+    if (isNewSearch) {
+      setVisibleColumnKeys(defaultVisibleColumnKeys);
+    }
+  }, [defaultVisibleColumnKeys, isNewSearch]);
+  useEffect(() => {
+    visibleColumnCount.current = (visibleColumnKeys !== null && visibleColumnKeys !== void 0 ? visibleColumnKeys : []).length;
+  }, [visibleColumnKeys]);
+  const isDisabled = !!errorState || status !== 'resolved' || assetsClientLoading || !aql || !schemaId;
+  const isEditingExistingTable = !!(initialParameters !== null && initialParameters !== void 0 && initialParameters.aql && initialParameters !== null && initialParameters !== void 0 && initialParameters.schemaId && initialParameters !== null && initialParameters !== void 0 && initialParameters.workspaceId);
+  const retrieveUrlForSmartCardRender = useCallback(() => {
+    var _data$key, _data$key$data;
+    const [data] = responseItems;
+    // agreement with BE that we will use `key` for rendering smartlink
+    return data === null || data === void 0 ? void 0 : (_data$key = data.key) === null || _data$key === void 0 ? void 0 : (_data$key$data = _data$key.data) === null || _data$key$data === void 0 ? void 0 : _data$key$data.url;
+  }, [responseItems]);
+  const onInsertPressed = useCallback((e, analyticsEvent) => {
+    var _insertButtonClickedE;
+    if (!aql || !schemaId || !workspaceId) {
+      return;
+    }
+    const insertButtonClickedEvent = analyticsEvent.update({
+      actionSubjectId: 'insert',
+      attributes: {
+        ...analyticsPayload,
+        totalItemCount: totalCount || 0,
+        displayedColumnCount: visibleColumnCount.current,
+        display: DatasourceDisplay.DATASOURCE_TABLE,
+        searchCount: searchCount.current,
+        searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+        actions: userInteractions.get()
+      },
+      eventType: 'ui'
+    });
+    const consumerEvent = (_insertButtonClickedE = insertButtonClickedEvent.clone()) !== null && _insertButtonClickedE !== void 0 ? _insertButtonClickedE : undefined;
+    insertButtonClickedEvent.fire(EVENT_CHANNEL);
+    const firstAssetUrl = retrieveUrlForSmartCardRender();
+    if (responseItems.length === 1 && firstAssetUrl) {
+      onInsert({
+        type: 'inlineCard',
+        attrs: {
+          url: firstAssetUrl
+        }
+      }, consumerEvent);
+    } else {
+      onInsert(buildDatasourceAdf({
+        id: datasourceId,
+        parameters: {
+          workspaceId,
+          aql,
+          schemaId,
+          version: VERSION_TWO
+        },
+        views: [{
+          type: 'table',
+          properties: {
+            columns: (visibleColumnKeys !== null && visibleColumnKeys !== void 0 ? visibleColumnKeys : []).map(key => ({
+              key
+            }))
+          }
+        }]
+      }), consumerEvent);
+    }
+  }, [aql, schemaId, workspaceId, analyticsPayload, totalCount, userInteractions, retrieveUrlForSmartCardRender, responseItems.length, onInsert, datasourceId, visibleColumnKeys]);
+  const handleOnSearch = useCallback((searchAql, searchSchemaId) => {
+    if (schemaId !== searchSchemaId || aql !== searchAql || status === 'rejected') {
+      searchCount.current++;
+      if (schemaId !== searchSchemaId) {
+        userInteractions.add(DatasourceAction.SCHEMA_UPDATED);
+      }
+      if (aql !== searchAql) {
+        userInteractions.add(DatasourceAction.QUERY_UPDATED);
+      }
+      setAql(searchAql);
+      setSchemaId(searchSchemaId);
+      setVisibleColumnKeys([]);
+      setIsNewSearch(true);
+      reset({
+        shouldForceRequest: true,
+        shouldResetColumns: true
+      });
+    }
+  }, [aql, reset, schemaId, status, userInteractions]);
+  const renderErrorState = useCallback(() => {
+    if (errorState) {
+      switch (errorState) {
+        case 'permission':
+          return jsx(AccessRequired, null);
+        case 'network':
+          return jsx(ModalLoadingError, null);
+        default:
+          return jsx(ModalLoadingError, null);
+      }
+    }
+  }, [errorState]);
+  const renderModalTitleContent = useCallback(() => {
+    if (errorState) {
+      return undefined;
+    } else {
+      if (!workspaceId || assetsClientLoading) {
+        return jsx(AssetsSearchContainerLoading, {
+          modalTitle: AssetsModalTitle
+        });
+      }
+      return jsx(AssetsSearchContainer, {
+        workspaceId: workspaceId,
+        initialSearchData: {
+          aql: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql,
+          objectSchema: existingObjectSchema,
+          objectSchemas
+        },
+        onSearch: handleOnSearch,
+        modalTitle: AssetsModalTitle,
+        isSearching: status === 'loading'
+      });
+    }
+  }, [errorState, workspaceId, assetsClientLoading, initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql, existingObjectSchema, objectSchemas, handleOnSearch, status]);
+  const getCancelButtonAnalyticsPayload = useCallback(() => {
+    return {
+      ...analyticsPayload,
+      searchCount: searchCount.current,
+      actions: userInteractions.get()
+    };
+  }, [analyticsPayload, userInteractions]);
+  return jsx(IntlMessagesProvider, {
+    defaultMessages: i18nEN,
+    loaderFn: fetchMessagesForLocale
+  }, jsx(ModalTransition, null, jsx(DatasourceModal, {
+    testId: "asset-datasource-modal",
+    onClose: onCancel
+  }, jsx(ModalHeader, null, renderModalTitleContent()), jsx(ModalBody, null, errorState ? jsx("div", {
+    css: modalBodyErrorWrapperStyles
+  }, renderErrorState()) : jsx(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
+  })), jsx(ModalFooter, null, jsx(CancelButton, {
+    onCancel: onCancel,
+    getAnalyticsPayload: getCancelButtonAnalyticsPayload,
+    testId: 'asset-datasource-modal--cancel-button'
+  }), jsx(Button, {
+    appearance: "primary",
+    onClick: onInsertPressed,
+    isDisabled: isDisabled,
+    testId: 'assets-datasource-modal--insert-button'
+  }, jsx(FormattedMessage, _extends({}, isEditingExistingTable ? modalMessages.updateObjectsButtonText : modalMessages.insertIssuesButtonText, {
+    values: {
+      objectsCount: responseItems.length
+    }
+  })))))));
+};
+const analyticsContextAttributes = {
+  dataProvider: 'jsm-assets'
+};
+const analyticsContextData = {
+  ...componentMetadata.configModal,
+  source: 'datasourceConfigModal'
+};
+const contextData = {
+  ...analyticsContextData,
+  attributes: {
+    ...analyticsContextAttributes
+  }
+};
+export const AssetsConfigModalOld = withAnalyticsContext(contextData)(props => jsx(StoreContainer, null, jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, jsx(PlainAssetsConfigModal, props)))));

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

@@ -0,0 +1,14 @@
+
+._19ith6cr{border:1px solid var(--ds-border,#dfe1e6)}
+._n7zl17u4{border-bottom:2px solid var(--ds-background-accent-gray-subtler,#dfe1e6)}._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}
+._1itkwoh3{background-image:linear-gradient(90deg,var(--ds-elevation-surface-current,#fff) 30%,hsla(0,0%,100%,0)),linear-gradient(90deg,var(--ds-shadow-overflow-perimeter,rgba(0,0,0,.1)),transparent),linear-gradient(90deg,hsla(0,0%,100%,0),var(--ds-elevation-surface-current,#fff) 70%),linear-gradient(90deg,transparent,var(--ds-shadow-overflow-perimeter,rgba(0,0,0,.1))]) linear-gradient(0deg,hsla(0,0%,100%,0),var(--ds-elevation-surface-current,#fff) 30%),linear-gradient(0deg,transparent,var(--ds-shadow-overflow-perimeter,rgba(0,0,0,.05))),linear-gradient(0deg,var(--ds-elevation-surface-current,#fff) 30%,hsla(0,0%,100%,0)),linear-gradient(0deg,var(--ds-shadow-overflow-perimeter,rgba(0,0,0,.05)),transparent)}
+._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)}

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

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

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

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

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

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

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

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