@atlaskit/link-datasource 3.19.2 → 3.20.0

package/dist/esm/ui/jira-issues-modal/modal/modal-old.js

@@ -0,0 +1,415 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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; }
+/* eslint-disable @atlaskit/platform/no-preconditioning */
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
+import { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { EVENT_CHANNEL } from '../../../analytics/constants';
+import { DatasourceAction, DatasourceDisplay } from '../../../analytics/types';
+import { startUfoExperience } from '../../../analytics/ufoExperiences';
+import { useColumnPickerRenderedFailedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience';
+import { useDataRenderedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
+import { mapSearchMethod } from '../../../analytics/utils';
+import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
+import { useDatasourceExperienceId } from '../../../contexts/datasource-experience-id';
+import { useUserInteractions } from '../../../contexts/user-interactions';
+import i18nEN from '../../../i18n/en';
+import { useAvailableSites } from '../../../services/useAvailableSites';
+import { StoreContainer } from '../../../state';
+import { AccessRequired } from '../../common/error-state/access-required';
+import { loadingErrorMessages } from '../../common/error-state/messages';
+import { ModalLoadingError } from '../../common/error-state/modal-loading-error';
+import { NoInstancesView } from '../../common/error-state/no-instances';
+import { NoResults } from '../../common/error-state/no-results';
+import { InitialStateView } from '../../common/initial-state-view';
+import { initialStateViewMessages } from '../../common/initial-state-view/messages';
+import { CancelButton } from '../../common/modal/cancel-button';
+import { ContentContainer } from '../../common/modal/content-container';
+import { SmartCardPlaceholder, SmartLink } from '../../common/modal/count-view-smart-link';
+import { useDatasourceContext } from '../../common/modal/datasource-context';
+import { DatasourceModal } from '../../common/modal/datasource-modal';
+import { createDatasourceModal } from '../../common/modal/datasource-modal/createDatasourceModal';
+import DatasourcesTableInModalPreview from '../../common/modal/datasources-table-in-modal-preview';
+import { InsertButton } from '../../common/modal/insert-button';
+import { DatasourceViewModeDropDown } from '../../common/modal/mode-switcher';
+import { useViewModeContext } from '../../common/modal/mode-switcher/useViewModeContext';
+import TableSearchCount from '../../common/modal/search-count';
+import { SiteSelector } from '../../common/modal/site-selector';
+import { EmptyState } from '../../issue-like-table';
+import { availableBasicFilterTypes } from '../basic-filters/ui';
+import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
+import { JiraSearchContainer } from '../jira-search-container';
+import { JiraInitialStateSVG } from './jira-issues-initial-state-svg';
+import { modalMessages } from './messages';
+var getDisplayValue = function getDisplayValue(currentViewMode, itemCount) {
+  if (currentViewMode === 'table') {
+    return DatasourceDisplay.DATASOURCE_TABLE;
+  }
+  return itemCount === 1 ? DatasourceDisplay.INLINE : DatasourceDisplay.DATASOURCE_INLINE;
+};
+var jqlSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-advanced-search-with-jira-query-language-jql/';
+var isValidParameters = function isValidParameters(parameters) {
+  return typeof (parameters === null || parameters === void 0 ? void 0 : parameters.jql) === 'string' && parameters.jql.length > 0 && typeof (parameters === null || parameters === void 0 ? void 0 : parameters.cloudId) === 'string' && parameters.cloudId.length > 0;
+};
+var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
+  var onCancel = props.onCancel,
+    urlBeingEdited = props.url;
+  var _useDatasourceContext = useDatasourceContext(),
+    visibleColumnCount = _useDatasourceContext.visibleColumnCount,
+    visibleColumnKeys = _useDatasourceContext.visibleColumnKeys,
+    parameters = _useDatasourceContext.parameters,
+    setParameters = _useDatasourceContext.setParameters,
+    tableState = _useDatasourceContext.tableState;
+  var reset = tableState.reset,
+    status = tableState.status,
+    responseItems = tableState.responseItems,
+    columns = tableState.columns,
+    totalCount = tableState.totalCount,
+    _tableState$extension = tableState.extensionKey,
+    extensionKey = _tableState$extension === void 0 ? null : _tableState$extension,
+    destinationObjectTypes = tableState.destinationObjectTypes;
+  var _ref = parameters !== null && parameters !== void 0 ? parameters : {},
+    cloudId = _ref.cloudId,
+    jql = _ref.jql;
+  var _useState = useState(jql),
+    _useState2 = _slicedToArray(_useState, 1),
+    initialJql = _useState2[0];
+  var _useViewModeContext = useViewModeContext(),
+    currentViewMode = _useViewModeContext.currentViewMode;
+  var _useAvailableSites = useAvailableSites('jira', cloudId),
+    availableSites = _useAvailableSites.availableSites,
+    selectedJiraSite = _useAvailableSites.selectedSite;
+  var _useState3 = useState(jql),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchBarJql = _useState4[0],
+    setSearchBarJql = _useState4[1];
+
+  // analytics related parameters
+  var searchCount = useRef(0);
+  var userInteractions = useUserInteractions();
+  var initialSearchMethod = !isQueryTooComplex(initialJql || '') ? 'basic' : 'jql';
+  var _useState5 = useState(initialSearchMethod),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentSearchMethod = _useState6[0],
+    setCurrentSearchMethod = _useState6[1];
+  var searchMethodSearchedWith = useRef(null);
+  var basicFilterSelectionsSearchedWith = useRef({});
+  var isSearchedWithComplexQuery = useRef(false);
+  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  var experienceId = useDatasourceExperienceId();
+  var analyticsPayload = useMemo(function () {
+    return {
+      extensionKey: extensionKey,
+      destinationObjectTypes: destinationObjectTypes
+    };
+  }, [destinationObjectTypes, extensionKey]);
+  var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  var jqlUrl = selectedJiraSite && jql && "".concat(selectedJiraSite.url, "/issues/?jql=").concat(encodeURI(jql));
+  var shouldShowIssueCount = !!totalCount && totalCount !== 1 && currentViewMode === 'table';
+  var isDataReady = (visibleColumnKeys || []).length > 0;
+  var hasNoJiraSites = availableSites && availableSites.length === 0;
+  useEffect(function () {
+    if (availableSites) {
+      fireEvent('ui.modal.ready.datasource', {
+        instancesCount: availableSites.length,
+        schemasCount: null
+      });
+    }
+  }, [fireEvent, availableSites]);
+  useEffect(function () {
+    var shouldStartUfoExperience = status === 'loading';
+    if (shouldStartUfoExperience) {
+      startUfoExperience({
+        name: 'datasource-rendered'
+      }, experienceId);
+    }
+  }, [experienceId, status]);
+  useDataRenderedUfoExperience({
+    status: status,
+    experienceId: experienceId,
+    itemCount: responseItems.length,
+    canBeLink: currentViewMode === 'inline',
+    extensionKey: extensionKey
+  });
+
+  /**
+   * If the selected Jira site changes, update the cloudId in the parameters
+   * This is mainly useful for setting the initial cloudId after the site selection loads
+   */
+  useEffect(function () {
+    if (selectedJiraSite && (!cloudId || cloudId !== selectedJiraSite.cloudId)) {
+      setParameters(function () {
+        return {
+          jql: '',
+          cloudId: selectedJiraSite.cloudId
+        };
+      });
+    }
+  }, [cloudId, selectedJiraSite, setParameters]);
+  var fireSingleItemViewedEvent = useCallback(function () {
+    fireEvent('ui.link.viewed.singleItem', _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+      searchMethod: mapSearchMethod(searchMethodSearchedWith.current)
+    }));
+  }, [analyticsPayload, fireEvent]);
+  var fireCountViewedEvent = useCallback(function () {
+    fireEvent('ui.link.viewed.count', _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+      searchMethod: mapSearchMethod(searchMethodSearchedWith.current),
+      totalItemCount: totalCount || 0
+    }));
+  }, [analyticsPayload, fireEvent, totalCount]);
+  var fireTableViewedEvent = useCallback(function () {
+    if (isDataReady) {
+      fireEvent('ui.table.viewed.datasourceConfigModal', _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+        totalItemCount: totalCount || 0,
+        searchMethod: mapSearchMethod(searchMethodSearchedWith.current),
+        displayedColumnCount: visibleColumnCount.current
+      }));
+    }
+  }, [isDataReady, fireEvent, analyticsPayload, totalCount, visibleColumnCount]);
+  var fireIssueViewAnalytics = useCallback(function () {
+    if (!totalCount) {
+      return;
+    }
+    if (totalCount > 1) {
+      fireTableViewedEvent();
+    } else if (totalCount === 1) {
+      fireSingleItemViewedEvent();
+    }
+  }, [fireSingleItemViewedEvent, fireTableViewedEvent, totalCount]);
+  useEffect(function () {
+    var isResolved = status === 'resolved';
+    var isIssueViewMode = currentViewMode === 'table';
+    var isCountViewMode = currentViewMode === 'inline';
+    if (!isResolved) {
+      return;
+    }
+    if (isIssueViewMode) {
+      fireIssueViewAnalytics();
+    } else if (isCountViewMode) {
+      fireCountViewedEvent();
+    }
+  }, [currentViewMode, status, fireIssueViewAnalytics, fireCountViewedEvent]);
+  useColumnPickerRenderedFailedUfoExperience(status, experienceId);
+  var onSearch = useCallback(function (newParameters, _ref2) {
+    var searchMethod = _ref2.searchMethod,
+      basicFilterSelections = _ref2.basicFilterSelections,
+      isQueryComplex = _ref2.isQueryComplex;
+    searchCount.current++;
+    searchMethodSearchedWith.current = searchMethod;
+    basicFilterSelectionsSearchedWith.current = basicFilterSelections;
+    isSearchedWithComplexQuery.current = isQueryComplex;
+    if (jql !== newParameters.jql) {
+      userInteractions.add(DatasourceAction.QUERY_UPDATED);
+    }
+    setParameters(function (state) {
+      return state && newParameters.jql ? {
+        cloudId: state.cloudId,
+        jql: newParameters.jql
+      } : undefined;
+    });
+    reset({
+      shouldForceRequest: true
+    });
+  }, [jql, reset, userInteractions, setParameters]);
+  var onSiteSelection = useCallback(function (site) {
+    userInteractions.add(DatasourceAction.INSTANCE_UPDATED);
+    setParameters({
+      jql: '',
+      cloudId: site.cloudId
+    });
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset, userInteractions, setParameters]);
+  var retrieveUrlForSmartCardRender = useCallback(function () {
+    var _data$key;
+    var _responseItems = _slicedToArray(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 renderCountModeContent = useCallback(function () {
+    var selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
+    if (status === 'unauthorized') {
+      return jsx(AccessRequired, {
+        url: selectedJiraSiteUrl || urlBeingEdited
+      });
+    } else if (status === 'empty' || !jql || !selectedJiraSiteUrl) {
+      return jsx(SmartCardPlaceholder, {
+        placeholderText: fg('confluence-issue-terminology-refresh') ? modalMessages.issuesCountSmartCardPlaceholderTextIssueTermRefresh : modalMessages.issuesCountSmartCardPlaceholderText
+      });
+    } else {
+      var url;
+      if (responseItems.length === 1 && retrieveUrlForSmartCardRender()) {
+        url = retrieveUrlForSmartCardRender();
+      } else {
+        url = "".concat(selectedJiraSiteUrl, "/issues/?jql=").concat(encodeURIComponent(jql));
+      }
+      return jsx(SmartLink, {
+        url: url
+      });
+    }
+  }, [jql, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited, responseItems, retrieveUrlForSmartCardRender]);
+  var renderIssuesModeContent = useCallback(function () {
+    var selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
+    var getDescriptionMessage = function getDescriptionMessage() {
+      if (fg('confluence-issue-terminology-refresh')) {
+        return currentSearchMethod === 'jql' ? initialStateViewMessages.searchDescriptionForJQLSearchIssueTermRefresh : initialStateViewMessages.searchDescriptionForBasicSearchIssueTermRefresh;
+      }
+      return currentSearchMethod === 'jql' ? initialStateViewMessages.searchDescriptionForJQLSearch : initialStateViewMessages.searchDescriptionForBasicSearch;
+    };
+    if (status === 'rejected' && jqlUrl) {
+      return jsx(ModalLoadingError, {
+        errorMessage: jqlUrl ? jsx(FormattedMessage, _extends({}, modalMessages.checkConnectionWithSource, {
+          values: {
+            a: function a(urlText) {
+              return jsx("a", {
+                href: jqlUrl
+              }, urlText);
+            }
+          }
+        })) : undefined
+      });
+    } else if (status === 'unauthorized') {
+      return jsx(AccessRequired, {
+        url: selectedJiraSiteUrl || urlBeingEdited
+      });
+    } else if (resolvedWithNoResults || status === 'forbidden') {
+      return jsx(NoResults, null);
+    } else if (status === 'empty' || !columns.length) {
+      // persist the empty state when making the initial /data request which contains the columns
+      return jsx(ContentContainer, {
+        withTableBorder: !!jql
+      }, !!jql ? jsx(EmptyState, {
+        testId: "jira-datasource-modal--empty-state"
+      }) : jsx(InitialStateView, {
+        icon: jsx(JiraInitialStateSVG, null),
+        title: fg('confluence-issue-terminology-refresh') ? modalMessages.searchJiraTitleIssueTermRefresh : modalMessages.searchJiraTitle,
+        description: getDescriptionMessage(),
+        learnMoreLink: currentSearchMethod === 'jql' ? {
+          href: jqlSupportDocumentLink,
+          text: initialStateViewMessages.learnMoreLink
+        } : undefined
+      }));
+    }
+    return jsx(ContentContainer, {
+      withTableBorder: true
+    }, jsx(DatasourcesTableInModalPreview, {
+      testId: "jira-datasource-table"
+    }));
+  }, [columns.length, currentSearchMethod, jql, jqlUrl, resolvedWithNoResults, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
+  var siteSelectorLabel = useMemo(function () {
+    if (fg('confluence-issue-terminology-refresh')) {
+      return availableSites && availableSites.length > 1 ? modalMessages.insertIssuesTitleManySitesIssueTermRefresh : modalMessages.insertIssuesTitleIssueTermRefresh;
+    }
+    return availableSites && availableSites.length > 1 ? modalMessages.insertIssuesTitleManySites : modalMessages.insertIssuesTitle;
+  }, [availableSites]);
+  var getCancelButtonAnalyticsPayload = useCallback(function () {
+    return _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+      searchCount: searchCount.current,
+      actions: userInteractions.get()
+    });
+  }, [analyticsPayload, userInteractions]);
+  var filterSelectionCount = availableBasicFilterTypes.reduce(function (current, filter) {
+    var _basicFilterSelection;
+    return _objectSpread(_objectSpread({}, current), {}, _defineProperty({}, "".concat(filter, "BasicFilterSelectionCount"), ((_basicFilterSelection = basicFilterSelectionsSearchedWith.current[filter]) === null || _basicFilterSelection === void 0 ? void 0 : _basicFilterSelection.length) || 0));
+  }, {});
+  var getInsertButtonAnalyticsPayload = useCallback(function () {
+    return _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+      display: getDisplayValue(currentViewMode, totalCount || 0),
+      isQueryComplex: isSearchedWithComplexQuery.current,
+      searchMethod: mapSearchMethod(searchMethodSearchedWith.current),
+      searchCount: searchCount.current,
+      actions: userInteractions.get()
+    }, searchMethodSearchedWith.current === 'basic' ? _objectSpread({}, filterSelectionCount) : {});
+  }, [analyticsPayload, currentViewMode, filterSelectionCount, totalCount, userInteractions]);
+  var urlToInsert = useMemo(function () {
+    var jql = parameters === null || parameters === void 0 ? void 0 : parameters.jql;
+    if (!jql || !(selectedJiraSite !== null && selectedJiraSite !== void 0 && selectedJiraSite.url)) {
+      return;
+    }
+    var upToDateJqlUrl = "".concat(selectedJiraSite.url, "/issues/?jql=").concat(encodeURIComponent(jql));
+    return currentViewMode === 'inline' && responseItems.length === 1 ? retrieveUrlForSmartCardRender() : upToDateJqlUrl;
+  }, [currentViewMode, parameters === null || parameters === void 0 ? void 0 : parameters.jql, responseItems, retrieveUrlForSmartCardRender, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url]);
+  return jsx(IntlMessagesProvider, {
+    defaultMessages: i18nEN,
+    loaderFn: fetchMessagesForLocale
+  }, jsx(ModalTransition, null, jsx(DatasourceModal, {
+    testId: "jira-datasource-modal",
+    onClose: onCancel
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx(SiteSelector, {
+    availableSites: availableSites,
+    onSiteSelection: onSiteSelection,
+    selectedSite: selectedJiraSite,
+    testId: "jira-datasource-modal--site-selector",
+    label: siteSelectorLabel
+  })), !hasNoJiraSites && jsx(DatasourceViewModeDropDown, null)), jsx(ModalBody, null, !hasNoJiraSites ? jsx(Fragment, null, jsx(JiraSearchContainer, {
+    setSearchBarJql: setSearchBarJql,
+    searchBarJql: searchBarJql,
+    isSearching: status === 'loading',
+    parameters: parameters,
+    onSearch: onSearch,
+    initialSearchMethod: initialSearchMethod,
+    onSearchMethodChange: setCurrentSearchMethod,
+    site: selectedJiraSite
+  }), currentViewMode === 'inline' ? renderCountModeContent() : renderIssuesModeContent()) : jsx(NoInstancesView, {
+    title: loadingErrorMessages.noAccessToJiraSitesTitle,
+    description: loadingErrorMessages.noAccessToJiraSitesDescription,
+    testId: "no-jira-instances-content"
+  })), jsx(ModalFooter, null, shouldShowIssueCount && jsx(TableSearchCount, {
+    searchCount: totalCount,
+    url: jqlUrl,
+    prefixTextType: "issue",
+    testId: "jira-datasource-modal-total-issues-count"
+  }), jsx(CancelButton, {
+    onCancel: onCancel,
+    getAnalyticsPayload: getCancelButtonAnalyticsPayload,
+    testId: "jira-datasource-modal--cancel-button"
+  }), !hasNoJiraSites && jsx(InsertButton, {
+    testId: "jira-datasource-modal--insert-button",
+    url: urlToInsert,
+    getAnalyticsPayload: getInsertButtonAnalyticsPayload
+  }, fg('confluence-issue-terminology-refresh') ? jsx(FormattedMessage, modalMessages.insertIssuesButtonTextIssueTermRefresh) : jsx(FormattedMessage, modalMessages.insertIssuesButtonText))))));
+};
+var ConnectedJiraIssueConfigModal = createDatasourceModal({
+  isValidParameters: isValidParameters,
+  dataProvider: 'jira-issues',
+  component: PlainJiraIssuesConfigModal
+});
+var JiraIssuesConfigModalWithExtraAnalyticsOnInsert = function JiraIssuesConfigModalWithExtraAnalyticsOnInsert(props) {
+  var onInsert = props.onInsert;
+  var onInsertWithMacroAnalytics = useCallback(function (adf, analyticsEvent) {
+    if (analyticsEvent && adf.type === 'inlineCard') {
+      var macroInsertedEvent = analyticsEvent.clone();
+      macroInsertedEvent === null || macroInsertedEvent === void 0 || macroInsertedEvent.update({
+        eventType: 'track',
+        action: 'inserted',
+        actionSubject: 'macro',
+        actionSubjectId: 'jlol'
+      });
+      macroInsertedEvent === null || macroInsertedEvent === void 0 || macroInsertedEvent.fire(EVENT_CHANNEL);
+    }
+    onInsert(adf, analyticsEvent);
+  }, [onInsert]);
+  return jsx(StoreContainer, null, jsx(ConnectedJiraIssueConfigModal, _extends({}, props, {
+    onInsert: onInsertWithMacroAnalytics
+  })));
+};
+export var JiraIssuesConfigModalOld = function JiraIssuesConfigModalOld(props) {
+  return jsx(JiraIssuesConfigModalWithExtraAnalyticsOnInsert, props);
+};

package/dist/esm/ui/table-footer/index.compiled.css

@@ -0,0 +1,20 @@
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._2rko1kw7{border-radius:inherit}
+._x3do17u4{border-top:2px solid var(--ds-background-accent-gray-subtler,#dfe1e6)}
+._13liidpf{border-top-left-radius:0}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._1bah1yb4{justify-content:space-between}
+._1e0c1txw{display:flex}
+._2hwx12x7{margin-right:var(--ds-space-075,6px)}
+._4cvr1h6o{align-items:center}
+._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
+._ca0qv47k{padding-top:var(--ds-space-250,20px)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._qrwqidpf{border-top-right-radius:0}
+._syaz1dyx{color:var(--ds-text-accent-gray,#44546f)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._vchhusvi{box-sizing:border-box}

package/dist/esm/ui/table-footer/index.js

@@ -1,61 +1,97 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["as", "style"],
+  _excluded2 = ["as", "style"],
+  _excluded3 = ["as", "style"],
+  _excluded4 = ["as", "style"];
+import "./index.compiled.css";
+import { forwardRef } from 'react';
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Fragment, useEffect, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import RefreshIcon from '@atlaskit/icon/core/migration/refresh';
-import { Flex } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Flex } from '@atlaskit/primitives/compiled';
 import { N0, N40 } from '@atlaskit/theme/colors';
 import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID } from '../assets-modal';
 import TableSearchCount, { AssetsItemCount } from '../common/modal/search-count';
 import { footerMessages } from './messages';
 import { PoweredByJSMAssets } from './powered-by-jsm-assets';
 import { SyncInfo } from './sync-info';
+import { TableFooterOld } from "./table-footer-old";
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-var FooterWrapper = styled.div({
-  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-200, 16px)"),
-  boxSizing: 'border-box',
-  borderRadius: 'inherit',
-  borderTopLeftRadius: 0,
-  borderTopRightRadius: 0,
-  background: "var(--ds-background-input, ".concat(N0, ")"),
-  borderTop: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(N40, ")"))
+var FooterWrapper = 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(["_2rko1kw7 _x3do17u4 _ca0qze3t _u5f3pxbi _n3tdze3t _19bvpxbi _vchhusvi _13liidpf _qrwqidpf _bfhk1j9a", __cmplp.className])
+  }));
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-var TopBorderWrapper = styled.div({
-  display: 'flex',
-  boxSizing: 'border-box',
-  justifyContent: 'space-between',
-  padding: "var(--ds-space-250, 20px)".concat(" ", "var(--ds-space-0, 0px)")
+if (process.env.NODE_ENV !== 'production') {
+  FooterWrapper.displayName = 'FooterWrapper';
+}
+var TopBorderWrapper = forwardRef(function (_ref2, __cmplr) {
+  var _ref2$as = _ref2.as,
+    C = _ref2$as === void 0 ? "div" : _ref2$as,
+    __cmpls = _ref2.style,
+    __cmplp = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1e0c1txw _vchhusvi _1bah1yb4 _ca0qv47k _u5f3ze3t _n3tdv47k _19bvze3t", __cmplp.className])
+  }));
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-var SyncWrapper = styled.div({
-  display: 'flex',
-  alignItems: 'center',
-  color: "var(--ds-text-accent-gray, #44546F)"
+if (process.env.NODE_ENV !== 'production') {
+  TopBorderWrapper.displayName = 'TopBorderWrapper';
+}
+var SyncWrapper = forwardRef(function (_ref3, __cmplr) {
+  var _ref3$as = _ref3.as,
+    C = _ref3$as === void 0 ? "div" : _ref3$as,
+    __cmpls = _ref3.style,
+    __cmplp = _objectWithoutProperties(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1e0c1txw _4cvr1h6o _syaz1dyx", __cmplp.className])
+  }));
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-var SyncTextWrapper = styled.div({
-  marginRight: "var(--ds-space-075, 6px)",
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+if (process.env.NODE_ENV !== 'production') {
+  SyncWrapper.displayName = 'SyncWrapper';
+}
+var SyncTextWrapper = forwardRef(function (_ref4, __cmplr) {
+  var _ref4$as = _ref4.as,
+    C = _ref4$as === void 0 ? "div" : _ref4$as,
+    __cmpls = _ref4.style,
+    __cmplp = _objectWithoutProperties(_ref4, _excluded4);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_11c8qk37 _2hwx12x7", __cmplp.className])
+  }));
 });
-export var TableFooter = function TableFooter(_ref) {
-  var datasourceId = _ref.datasourceId,
-    itemCount = _ref.itemCount,
-    onRefresh = _ref.onRefresh,
-    isLoading = _ref.isLoading,
-    url = _ref.url;
+if (process.env.NODE_ENV !== 'production') {
+  SyncTextWrapper.displayName = 'SyncTextWrapper';
+}
+var TableFooterNew = function TableFooterNew(_ref5) {
+  var datasourceId = _ref5.datasourceId,
+    itemCount = _ref5.itemCount,
+    onRefresh = _ref5.onRefresh,
+    isLoading = _ref5.isLoading,
+    url = _ref5.url;
   var intl = useIntl();
   var _useState = useState(new Date()),
     _useState2 = _slicedToArray(_useState, 2),
@@ -70,27 +106,27 @@ export var TableFooter = function TableFooter(_ref) {
 
   // If only one of the two is passed in, still show the other one (Note: We keep the div encapsulating the one not shown to
   // ensure correct positioning since 'justify-content: space-between' is used).
-  return onRefresh || showItemCount ? jsx(FooterWrapper, {
+  return onRefresh || showItemCount ? /*#__PURE__*/React.createElement(FooterWrapper, {
     "data-testid": "table-footer"
-  }, jsx(TopBorderWrapper, null, showItemCount && jsx(Flex, null, datasourceId === ASSETS_LIST_OF_LINKS_DATASOURCE_ID ? jsx(AssetsItemCount, {
+  }, /*#__PURE__*/React.createElement(TopBorderWrapper, null, showItemCount && /*#__PURE__*/React.createElement(Flex, null, datasourceId === ASSETS_LIST_OF_LINKS_DATASOURCE_ID ? /*#__PURE__*/React.createElement(AssetsItemCount, {
     searchCount: itemCount,
     url: url,
     testId: "item-count"
-  }) : jsx(TableSearchCount, {
+  }) : /*#__PURE__*/React.createElement(TableSearchCount, {
     searchCount: itemCount,
     url: url,
     prefixTextType: "item",
     testId: "item-count"
-  })), datasourceId === ASSETS_LIST_OF_LINKS_DATASOURCE_ID ? jsx(PoweredByJSMAssets, {
+  })), datasourceId === ASSETS_LIST_OF_LINKS_DATASOURCE_ID ? /*#__PURE__*/React.createElement(PoweredByJSMAssets, {
     text: intl.formatMessage(footerMessages.powerByJSM)
-  }) : null, jsx(SyncWrapper, null, onRefresh && jsx(Fragment, null, jsx(SyncTextWrapper, {
+  }) : null, /*#__PURE__*/React.createElement(SyncWrapper, null, onRefresh && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(SyncTextWrapper, {
     "data-testid": "sync-text"
-  }, isLoading ? jsx(FormattedMessage, footerMessages.loadingText) : jsx(SyncInfo, {
+  }, isLoading ? /*#__PURE__*/React.createElement(FormattedMessage, footerMessages.loadingText) : /*#__PURE__*/React.createElement(SyncInfo, {
     lastSyncTime: lastSyncTime
-  })), jsx(Button, {
+  })), /*#__PURE__*/React.createElement(Button, {
     onClick: onRefresh,
     appearance: "subtle",
-    iconBefore: jsx(RefreshIcon, {
+    iconBefore: /*#__PURE__*/React.createElement(RefreshIcon, {
       label: intl.formatMessage(footerMessages.refreshLabel),
       color: "currentColor",
       spacing: "spacious"
@@ -98,4 +134,11 @@ export var TableFooter = function TableFooter(_ref) {
     isDisabled: isLoading,
     testId: "refresh-button"
   }))))) : null;
+};
+export var TableFooter = function TableFooter(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(TableFooterNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(TableFooterOld, props);
+  }
 };

package/dist/esm/ui/table-footer/powered-by-jsm-assets/index.compiled.css

@@ -0,0 +1,5 @@
+._18u012x7{margin-left:var(--ds-space-075,6px)}
+._1e0c1txw{display:flex}
+._2lx21sbv{flex-direction:row-reverse}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._30l316c2:hover{color:var(--ds-link-pressed,#05c)}