@atlaskit/link-datasource 3.19.2 → 3.20.1

package/dist/es2019/ui/confluence-search-modal/modal/modal-old.js

@@ -0,0 +1,352 @@
+import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { Fragment, useCallback, useEffect, useMemo, useRef } 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 } from '@atlaskit/modal-dialog';
+import { Box, xcss } from '@atlaskit/primitives';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { DatasourceAction, DatasourceSearchMethod } from '../../../analytics/types';
+import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
+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 { 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 { 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 ConfluenceSearchContainer from '../confluence-search-container';
+import { ConfluenceSearchInitialStateSVGOld } from './confluence-search-initial-state-svg-old';
+import { confluenceSearchModalMessages } from './messages';
+const inputContainerStyles = xcss({
+  alignItems: 'baseline',
+  display: 'flex',
+  minHeight: '72px'
+});
+const isValidParameters = parameters => !!(parameters && parameters.cloudId && Object.values(parameters).filter(v => v !== undefined).length > 1);
+export const PlainConfluenceSearchConfigModalOld = props => {
+  const {
+    onCancel,
+    url: urlBeingEdited,
+    overrideParameters
+  } = props;
+  const {
+    currentViewMode
+  } = useViewModeContext();
+  const {
+    visibleColumnKeys,
+    tableState: {
+      reset,
+      status,
+      responseItems,
+      extensionKey = null,
+      destinationObjectTypes,
+      totalCount,
+      columns
+    },
+    visibleColumnCount,
+    parameters,
+    setParameters
+  } = useDatasourceContext();
+  const {
+    availableSites,
+    selectedSite: selectedConfluenceSite
+  } = useAvailableSites('confluence', parameters === null || parameters === void 0 ? void 0 : parameters.cloudId);
+
+  // analytics related parameters
+  const searchCount = useRef(0);
+  const userInteractions = useUserInteractions();
+  const setParametersWithOverrides = useCallback(setStateAction => {
+    if (typeof setStateAction !== 'function') {
+      setParameters({
+        ...setStateAction,
+        cloudId: (setStateAction === null || setStateAction === void 0 ? void 0 : setStateAction.cloudId) || '',
+        ...overrideParameters
+      });
+    } else {
+      setParameters(prev => ({
+        ...prev,
+        cloudId: (prev === null || prev === void 0 ? void 0 : prev.cloudId) || '',
+        ...setStateAction(prev),
+        ...overrideParameters
+      }));
+    }
+  }, [setParameters, overrideParameters]);
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+  const hasNoConfluenceSites = availableSites && availableSites.length === 0;
+  useEffect(() => {
+    if (availableSites) {
+      fireEvent('ui.modal.ready.datasource', {
+        instancesCount: availableSites.length,
+        schemasCount: null
+      });
+    }
+  }, [fireEvent, availableSites]);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6828283
+  useEffect(() => {
+    if (selectedConfluenceSite && (!(parameters !== null && parameters !== void 0 && parameters.cloudId) || (parameters === null || parameters === void 0 ? void 0 : parameters.cloudId) !== selectedConfluenceSite.cloudId)) {
+      /**
+       * This code is primarily to set the cloudId in the parameters when the site selector loads a default value
+       * but there is no "onChange" emitted from the site picker
+       */
+      setParameters(prev => ({
+        ...prev,
+        cloudId: selectedConfluenceSite.cloudId
+      }));
+    }
+  }, [parameters, setParameters, selectedConfluenceSite]);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6829171
+  const onSiteSelection = useCallback(site => {
+    userInteractions.add(DatasourceAction.INSTANCE_UPDATED);
+
+    /**
+     * Clear the state of the form filters when the site is changed
+     */
+    setParameters(prev => ({
+      ...prev,
+      searchString: undefined,
+      lastModified: undefined,
+      lastModifiedFrom: undefined,
+      lastModifiedTo: undefined,
+      contributorAccountIds: undefined,
+      cloudId: site.cloudId
+    }));
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset, setParameters, userInteractions]);
+  const siteSelectorLabel = availableSites && availableSites.length > 1 ? confluenceSearchModalMessages.insertIssuesTitleManySites : confluenceSearchModalMessages.insertIssuesTitle;
+  const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  const hasConfluenceSearchParams = selectedConfluenceSite && (parameters === null || parameters === void 0 ? void 0 : parameters.searchString);
+  const selectedConfluenceSiteUrl = selectedConfluenceSite === null || selectedConfluenceSite === void 0 ? void 0 : selectedConfluenceSite.url;
+  const confluenceSearchUrl = useMemo(() => {
+    var _parameters$contribut;
+    if (!selectedConfluenceSiteUrl || (parameters === null || parameters === void 0 ? void 0 : parameters.searchString) === undefined) {
+      return undefined;
+    }
+    const params = new URLSearchParams();
+    // we are appending "text" without checking searchString as we need the url to have "text" when a user does an empty search)
+    params.append('text', (parameters === null || parameters === void 0 ? void 0 : parameters.searchString) || '');
+    if (parameters !== null && parameters !== void 0 && (_parameters$contribut = parameters.contributorAccountIds) !== null && _parameters$contribut !== void 0 && _parameters$contribut.length) {
+      params.append('contributors', parameters.contributorAccountIds.join(','));
+    }
+    if (parameters !== null && parameters !== void 0 && parameters.lastModified) {
+      params.append('lastModified', parameters.lastModified);
+    }
+    if (parameters !== null && parameters !== void 0 && parameters.lastModifiedFrom) {
+      params.append('from', parameters.lastModifiedFrom);
+    }
+    if (parameters !== null && parameters !== void 0 && parameters.lastModifiedTo) {
+      params.append('to', parameters.lastModifiedTo);
+    }
+    return `${selectedConfluenceSiteUrl}/wiki/search?${params.toString()}`;
+  }, [parameters, selectedConfluenceSiteUrl]);
+  const analyticsPayload = useMemo(() => ({
+    extensionKey,
+    destinationObjectTypes,
+    searchCount: searchCount.current,
+    actions: userInteractions.get()
+  }), [destinationObjectTypes, extensionKey, userInteractions]);
+  const isDataReady = (visibleColumnKeys || []).length > 0;
+  const fireInlineViewedEvent = useCallback(() => {
+    fireEvent('ui.link.viewed.count', {
+      ...analyticsPayload,
+      searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+      totalItemCount: totalCount || 0
+    });
+  }, [analyticsPayload, fireEvent, totalCount]);
+  const fireTableViewedEvent = useCallback(() => {
+    if (isDataReady) {
+      fireEvent('ui.table.viewed.datasourceConfigModal', {
+        ...analyticsPayload,
+        totalItemCount: totalCount || 0,
+        searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+        displayedColumnCount: visibleColumnCount.current
+      });
+    }
+  }, [isDataReady, fireEvent, analyticsPayload, totalCount, visibleColumnCount]);
+  useEffect(() => {
+    const isResolved = status === 'resolved';
+    const isTableViewMode = currentViewMode === 'table';
+    const isInlineViewMode = currentViewMode === 'inline';
+    if (!isResolved) {
+      return;
+    }
+    if (isTableViewMode) {
+      fireTableViewedEvent();
+    } else if (isInlineViewMode) {
+      fireInlineViewedEvent();
+    }
+  }, [currentViewMode, fireInlineViewedEvent, fireTableViewedEvent, status]);
+  const renderTableModalContent = useCallback(() => {
+    if (status === 'rejected') {
+      return jsx(ModalLoadingError, null);
+    } else if (status === 'unauthorized') {
+      return jsx(AccessRequired, {
+        url: selectedConfluenceSiteUrl || 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
+      if (hasConfluenceSearchParams !== undefined) {
+        return jsx(EmptyState, {
+          testId: `confluence-search-datasource-modal--empty-state`
+        });
+      }
+      return jsx(ContentContainer, null, jsx(InitialStateView, {
+        icon: jsx(ConfluenceSearchInitialStateSVGOld, null),
+        title: confluenceSearchModalMessages.initialViewSearchTitle,
+        description: confluenceSearchModalMessages.initialViewSearchDescription
+      }));
+    }
+    return jsx(ContentContainer, {
+      withTableBorder: true
+    }, jsx(DatasourcesTableInModalPreview, {
+      testId: "confluence-search-datasource-table"
+    }));
+  }, [columns.length, selectedConfluenceSiteUrl, resolvedWithNoResults, status, urlBeingEdited, hasConfluenceSearchParams]);
+  const renderInlineLinkModalContent = useCallback(() => {
+    if (status === 'unauthorized') {
+      return jsx(AccessRequired, {
+        url: selectedConfluenceSiteUrl || urlBeingEdited
+      });
+    } else if (status === 'empty' || !selectedConfluenceSiteUrl) {
+      return jsx(SmartCardPlaceholder, {
+        placeholderText: confluenceSearchModalMessages.resultsCountSmartCardPlaceholderText
+      });
+    } else {
+      return confluenceSearchUrl && jsx(SmartLink, {
+        url: confluenceSearchUrl
+      });
+    }
+  }, [confluenceSearchUrl, selectedConfluenceSiteUrl, status, urlBeingEdited]);
+  const shouldShowResultsCount = !!totalCount && currentViewMode === 'table';
+  const onSearch = useCallback((newSearchString, filters) => {
+    searchCount.current++;
+    userInteractions.add(DatasourceAction.QUERY_UPDATED);
+    if (filters) {
+      const {
+        editedOrCreatedBy,
+        lastModified: lastModifiedList
+      } = filters;
+      if (lastModifiedList) {
+        const updatedDateRangeOption = lastModifiedList.find(range => range.value);
+        if ((updatedDateRangeOption === null || updatedDateRangeOption === void 0 ? void 0 : updatedDateRangeOption.optionType) === 'dateRange') {
+          setParametersWithOverrides(prev => ({
+            ...prev,
+            lastModified: updatedDateRangeOption.value,
+            lastModifiedFrom: updatedDateRangeOption.from,
+            lastModifiedTo: updatedDateRangeOption.to
+          }));
+        }
+      }
+      if (editedOrCreatedBy) {
+        const accountIds = editedOrCreatedBy.map(user => user.value);
+        setParametersWithOverrides(prev => ({
+          ...prev,
+          contributorAccountIds: accountIds
+        }));
+      }
+    }
+    setParametersWithOverrides(prev => ({
+      ...prev,
+      searchString: newSearchString
+    }));
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset, userInteractions, setParametersWithOverrides]);
+  const getButtonAnalyticsPayload = useCallback(() => {
+    return {
+      extensionKey,
+      destinationObjectTypes,
+      searchCount: searchCount.current,
+      actions: userInteractions.get()
+    };
+  }, [destinationObjectTypes, extensionKey, userInteractions]);
+  return jsx(IntlMessagesProvider, {
+    defaultMessages: i18nEN,
+    loaderFn: fetchMessagesForLocale
+  }, jsx(DatasourceModal, {
+    testId: "confluence-search-datasource-modal",
+    onClose: onCancel
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx(SiteSelector, {
+    availableSites: availableSites,
+    onSiteSelection: onSiteSelection,
+    selectedSite: selectedConfluenceSite,
+    testId: "confluence-search-datasource-modal--site-selector",
+    label: siteSelectorLabel
+  })), !hasNoConfluenceSites && jsx(DatasourceViewModeDropDown, null)), jsx(ModalBody, null, !hasNoConfluenceSites ? jsx(Fragment, null, jsx(Box, {
+    xcss: inputContainerStyles
+  }, jsx(ConfluenceSearchContainer, {
+    isSearching: status === 'loading',
+    onSearch: onSearch,
+    parameters: parameters !== null && parameters !== void 0 ? parameters : {
+      cloudId: ''
+    }
+  })), currentViewMode === 'inline' ? renderInlineLinkModalContent() : renderTableModalContent()) : jsx(NoInstancesView, {
+    title: confluenceSearchModalMessages.noAccessToConfluenceSitesTitle,
+    description: confluenceSearchModalMessages.noAccessToConfluenceSitesDescription,
+    testId: 'no-confluence-instances-content'
+  })), jsx(ModalFooter, null, shouldShowResultsCount && confluenceSearchUrl && jsx(TableSearchCount, {
+    searchCount: totalCount,
+    url: confluenceSearchUrl,
+    prefixTextType: "result",
+    testId: "confluence-search-datasource-modal-total-results-count"
+  }), jsx(CancelButton, {
+    onCancel: onCancel,
+    getAnalyticsPayload: getButtonAnalyticsPayload,
+    testId: "confluence-search-modal--cancel-button"
+  }), !hasNoConfluenceSites && jsx(InsertButton, {
+    testId: "confluence-search-datasource-modal--insert-button",
+    url: confluenceSearchUrl,
+    getAnalyticsPayload: getButtonAnalyticsPayload
+  }, jsx(FormattedMessage, confluenceSearchModalMessages.insertResultsButtonText)))));
+};
+const ConnectedConfluenceSearchConfigModal = createDatasourceModal({
+  isValidParameters,
+  dataProvider: 'confluence-search',
+  component: PlainConfluenceSearchConfigModalOld
+});
+export const ConfluenceSearchConfigModalOld = props => {
+  return jsx(StoreContainer, null, jsx(ConnectedConfluenceSearchConfigModal, _extends({}, props, {
+    /**
+     * If the intial parameters are not valid, we will not initialise the modal state
+     * with `overrideParameters`. This is to allow the modal to be opened without
+     * any initial parameters and require the user to perform a search.
+     */
+    parameters: props.overrideParameters && isValidParameters(props.parameters) ? {
+      ...props.parameters,
+      ...props.overrideParameters
+    } : props.parameters
+  })));
+};

package/dist/es2019/ui/datasource-table-view/datasourceTableView.compiled.css

@@ -0,0 +1 @@
+._2rko1kw7{border-radius:inherit}

package/dist/es2019/ui/datasource-table-view/datasourceTableView.js

@@ -1,13 +1,11 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* datasourceTableView.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./datasourceTableView.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useEffect, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useDatasourceAnalyticsEvents } from '../../analytics';
 import { componentMetadata } from '../../analytics/constants';
 import { startUfoExperience } from '../../analytics/ufoExperiences';
@@ -27,9 +25,8 @@ import { ProviderAuthRequired } from '../common/error-state/provider-auth-requir
 import { IssueLikeDataTableView } from '../issue-like-table';
 import EmptyState from '../issue-like-table/empty-state';
 import { TableFooter } from '../table-footer';
-const containerStyles = css({
-  borderRadius: 'inherit'
-});
+import { DatasourceTableViewOld } from './datasourceTableViewOld';
+const containerStyles = null;
 const DatasourceTableViewWithoutAnalytics = ({
   datasourceId,
   parameters,
@@ -132,34 +129,33 @@ const DatasourceTableViewWithoutAnalytics = ({
     });
   }, [reset]);
   if (status === 'resolved' && !responseItems.length || status === 'forbidden') {
-    return jsx(NoResults, {
+    return /*#__PURE__*/React.createElement(NoResults, {
       onRefresh: handleErrorRefresh
     });
   }
   if (status === 'unauthorized') {
-    return authDetails !== null && authDetails !== void 0 && authDetails.length && authDetails.length > 0 ? jsx(ProviderAuthRequired, {
+    return authDetails !== null && authDetails !== void 0 && authDetails.length && authDetails.length > 0 ? /*#__PURE__*/React.createElement(ProviderAuthRequired, {
       auth: authDetails,
       extensionKey: extensionKey,
       providerName: providerName,
       onAuthSuccess: forcedReset,
       onAuthError: forcedReset,
       datasourceId: datasourceId
-    }) : jsx(AccessRequired, {
+    }) : /*#__PURE__*/React.createElement(AccessRequired, {
       url: url
     });
   }
   if (status === 'rejected') {
-    return jsx(LoadingError, {
+    return /*#__PURE__*/React.createElement(LoadingError, {
       onRefresh: handleErrorRefresh
     });
   }
-  return jsx(IntlMessagesProvider, {
+  return /*#__PURE__*/React.createElement(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale
-  }, jsx("div", {
-    css: containerStyles,
-    className: "datasource-table"
-  }, hasColumns ? jsx(IssueLikeDataTableView, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_2rko1kw7", "datasource-table"])
+  }, hasColumns ? /*#__PURE__*/React.createElement(IssueLikeDataTableView, {
     testId: 'datasource-table-view',
     hasNextPage: hasNextPage,
     items: responseItems,
@@ -176,10 +172,10 @@ const DatasourceTableViewWithoutAnalytics = ({
     onWrappedColumnChange: onWrappedColumnChange,
     scrollableContainerHeight: ScrollableContainerHeight,
     extensionKey: extensionKey
-  }) : jsx(EmptyState, {
+  }) : /*#__PURE__*/React.createElement(EmptyState, {
     testId: "datasource-table-view-skeleton",
     isCompact: true
-  }), jsx(TableFooter, {
+  }), /*#__PURE__*/React.createElement(TableFooter, {
     datasourceId: datasourceId,
     itemCount: isDataReady ? totalCount : undefined,
     onRefresh: onRefresh,
@@ -187,4 +183,11 @@ const DatasourceTableViewWithoutAnalytics = ({
     url: url
   })));
 };
-export const DatasourceTableView = withAnalyticsContext(componentMetadata.tableView)(props => jsx(StoreContainer, null, jsx(DatasourceExperienceIdProvider, null, jsx(DatasourceTableViewWithoutAnalytics, props))));
+const DatasourceTableViewNew = withAnalyticsContext(componentMetadata.tableView)(props => /*#__PURE__*/React.createElement(StoreContainer, null, /*#__PURE__*/React.createElement(DatasourceExperienceIdProvider, null, /*#__PURE__*/React.createElement(DatasourceTableViewWithoutAnalytics, props))));
+export const DatasourceTableView = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(DatasourceTableViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(DatasourceTableViewOld, props);
+  }
+};

package/dist/es2019/ui/datasource-table-view/datasourceTableViewOld.js

@@ -0,0 +1,190 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback, useEffect, useRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { withAnalyticsContext } from '@atlaskit/analytics-next';
+import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
+import { useDatasourceAnalyticsEvents } from '../../analytics';
+import { componentMetadata } from '../../analytics/constants';
+import { startUfoExperience } from '../../analytics/ufoExperiences';
+import { useColumnPickerRenderedFailedUfoExperience } from '../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience';
+import { useDataRenderedUfoExperience } from '../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
+import { fetchMessagesForLocale } from '../../common/utils/locale/fetch-messages-for-locale';
+import { DatasourceExperienceIdProvider, useDatasourceExperienceId } from '../../contexts/datasource-experience-id';
+import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
+import i18nEN from '../../i18n/en';
+import { StoreContainer } from '../../state';
+import { ScrollableContainerHeight } from '../../ui/issue-like-table/styled';
+import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID } from '../assets-modal';
+import { AccessRequired } from '../common/error-state/access-required';
+import { LoadingError } from '../common/error-state/loading-error';
+import { NoResults } from '../common/error-state/no-results';
+import { ProviderAuthRequired } from '../common/error-state/provider-auth-required';
+import { IssueLikeDataTableView } from '../issue-like-table';
+import EmptyState from '../issue-like-table/empty-state';
+import { TableFooter } from '../table-footer';
+const containerStyles = css({
+  borderRadius: 'inherit'
+});
+const DatasourceTableViewWithoutAnalytics = ({
+  datasourceId,
+  parameters,
+  visibleColumnKeys,
+  onVisibleColumnKeysChange,
+  url,
+  columnCustomSizes,
+  onColumnResize,
+  wrappedColumnKeys,
+  onWrappedColumnChange
+}) => {
+  const {
+    reset,
+    status,
+    onNextPage,
+    responseItems,
+    responseItemIds,
+    hasNextPage,
+    columns,
+    defaultVisibleColumnKeys,
+    totalCount,
+    loadDatasourceDetails,
+    extensionKey = null,
+    providerName,
+    destinationObjectTypes,
+    authDetails
+  } = useDatasourceTableState({
+    datasourceId,
+    parameters,
+    fieldKeys: visibleColumnKeys
+  });
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+  const experienceId = useDatasourceExperienceId();
+  const visibleColumnCount = useRef((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
+
+  /*  Need this to make sure that the datasource in the editor gets updated new info if any edits are made in the modal
+       But we don't want to call it on initial load. This screws up useDatasourceTableState's internal
+       mechanism of initial loading. Use of ref here makes it basically work as a `componentDidUpdate` but not `componentDidMount`
+    */
+  const isInitialRender = useRef(true);
+  const hasColumns = !!columns.length;
+  const isDataReady = hasColumns && responseItems.length > 0 && totalCount && totalCount > 0;
+  visibleColumnCount.current = (visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0;
+  useEffect(() => {
+    if (!isInitialRender.current) {
+      reset();
+    }
+    isInitialRender.current = false;
+  }, [reset, parameters]);
+  useEffect(() => {
+    if (onVisibleColumnKeysChange && (visibleColumnKeys || []).length === 0 && defaultVisibleColumnKeys.length > 0) {
+      onVisibleColumnKeysChange(defaultVisibleColumnKeys);
+    }
+  }, [visibleColumnKeys, defaultVisibleColumnKeys, onVisibleColumnKeysChange]);
+  useEffect(() => {
+    const isTableViewRenderedWithData = status === 'resolved' && isDataReady;
+    if (isTableViewRenderedWithData) {
+      fireEvent('ui.datasource.renderSuccess', {
+        extensionKey,
+        destinationObjectTypes,
+        totalItemCount: totalCount,
+        displayedColumnCount: visibleColumnCount.current,
+        display: 'table'
+      });
+    }
+  }, [totalCount, fireEvent, status, extensionKey, destinationObjectTypes, isDataReady]);
+  useEffect(() => {
+    const shouldStartUfoExperience = datasourceId && parameters && visibleColumnKeys && status === 'loading';
+    if (shouldStartUfoExperience) {
+      startUfoExperience({
+        name: 'datasource-rendered'
+      }, experienceId);
+    }
+  }, [datasourceId, parameters, status, experienceId, visibleColumnKeys]);
+  useColumnPickerRenderedFailedUfoExperience(status, experienceId);
+  useDataRenderedUfoExperience({
+    status,
+    experienceId: experienceId,
+    itemCount: responseItems.length,
+    extensionKey
+  });
+  const forcedReset = useCallback(() => {
+    reset({
+      shouldForceRequest: true,
+      shouldResetColumns: datasourceId === ASSETS_LIST_OF_LINKS_DATASOURCE_ID
+    });
+  }, [reset, datasourceId]);
+  const onRefresh = useCallback(() => {
+    fireEvent('ui.button.clicked.sync', {
+      extensionKey,
+      destinationObjectTypes
+    });
+    forcedReset();
+  }, [destinationObjectTypes, extensionKey, fireEvent, forcedReset]);
+  const handleErrorRefresh = useCallback(() => {
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset]);
+  if (status === 'resolved' && !responseItems.length || status === 'forbidden') {
+    return jsx(NoResults, {
+      onRefresh: handleErrorRefresh
+    });
+  }
+  if (status === 'unauthorized') {
+    return authDetails !== null && authDetails !== void 0 && authDetails.length && authDetails.length > 0 ? jsx(ProviderAuthRequired, {
+      auth: authDetails,
+      extensionKey: extensionKey,
+      providerName: providerName,
+      onAuthSuccess: forcedReset,
+      onAuthError: forcedReset,
+      datasourceId: datasourceId
+    }) : jsx(AccessRequired, {
+      url: url
+    });
+  }
+  if (status === 'rejected') {
+    return jsx(LoadingError, {
+      onRefresh: handleErrorRefresh
+    });
+  }
+  return jsx(IntlMessagesProvider, {
+    defaultMessages: i18nEN,
+    loaderFn: fetchMessagesForLocale
+  }, jsx("div", {
+    css: containerStyles,
+    className: "datasource-table"
+  }, hasColumns ? jsx(IssueLikeDataTableView, {
+    testId: 'datasource-table-view',
+    hasNextPage: hasNextPage,
+    items: responseItems,
+    itemIds: responseItemIds,
+    onNextPage: onNextPage,
+    onLoadDatasourceDetails: loadDatasourceDetails,
+    status: status,
+    columns: columns,
+    visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
+    onVisibleColumnKeysChange: onVisibleColumnKeysChange,
+    columnCustomSizes: columnCustomSizes,
+    onColumnResize: onColumnResize,
+    wrappedColumnKeys: wrappedColumnKeys,
+    onWrappedColumnChange: onWrappedColumnChange,
+    scrollableContainerHeight: ScrollableContainerHeight,
+    extensionKey: extensionKey
+  }) : jsx(EmptyState, {
+    testId: "datasource-table-view-skeleton",
+    isCompact: true
+  }), jsx(TableFooter, {
+    datasourceId: datasourceId,
+    itemCount: isDataReady ? totalCount : undefined,
+    onRefresh: onRefresh,
+    isLoading: !isDataReady || status === 'loading',
+    url: url
+  })));
+};
+export const DatasourceTableViewOld = withAnalyticsContext(componentMetadata.tableView)(props => jsx(StoreContainer, null, jsx(DatasourceExperienceIdProvider, null, jsx(DatasourceTableViewWithoutAnalytics, props))));