@atlaskit/link-datasource 1.7.6 → 1.9.0

package/dist/es2019/ui/issue-like-table/index.js

@@ -13,6 +13,7 @@ import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
 import { N40 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
+import { stickyTableHeadersIndex } from '../../common/zindex';
 import { ColumnPicker } from './column-picker';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
@@ -25,7 +26,7 @@ const tableHeadStyles = css({
   background: "var(--ds-surface, #FFF)",
   position: 'sticky',
   top: 0,
-  zIndex: 10
+  zIndex: stickyTableHeadersIndex
 });
 const ColumnPickerHeader = styled.th`
   width: 40px;
@@ -90,8 +91,7 @@ function getColumnWidth(key, type) {
     priority: BASE_WIDTH * 8,
     status: BASE_WIDTH * 18,
     summary: BASE_WIDTH * 45,
-    description: BASE_WIDTH * 31.25,
-    type: BASE_WIDTH * 8
+    description: BASE_WIDTH * 31.25
   };
   if (keyBasedWidth[key]) {
     return keyBasedWidth[key];
@@ -153,9 +153,10 @@ export const IssueLikeDataTableView = ({
       key
     }) => {
       const content = jsx(Skeleton, {
-        borderRadius: "var(--ds-border-radius-100, 3px)",
-        width: '100%',
-        height: '20px'
+        borderRadius: 8,
+        width: "100%",
+        height: 14,
+        testId: "issues-table-row-loading"
       });
       return {
         key,
@@ -274,7 +275,25 @@ export const IssueLikeDataTableView = ({
     }),
     ref: rowIndex === items.length - 1 ? el => setLastRowElement(el) : undefined
   })), [identityColumnKey, renderItem, items, visibleSortedColumns]);
-  const rows = useMemo(() => [...tableRows, ...(status === 'loading' ? [loadingRow] : [])], [loadingRow, status, tableRows]);
+  const rows = useMemo(() => {
+    if (status !== 'loading') {
+      return tableRows;
+    }
+    // if there are table rows, only add 1 loading row
+    if (tableRows.length > 0) {
+      return [...tableRows, {
+        ...loadingRow,
+        key: `loading-${tableRows.length}`
+      }];
+    }
+    // if there are no table rows add 14 rows if it is compact (has scrollableContainerHeight or non-modal)
+    // add 10 rows if it is modal (no scrollableContainerHeight)
+    const loadingRowsCount = scrollableContainerHeight ? 14 : 10;
+    return [...Array(loadingRowsCount)].map((_, index) => ({
+      ...loadingRow,
+      key: `loading-${index}`
+    }));
+  }, [loadingRow, status, tableRows, scrollableContainerHeight]);
   const onSelectedColumnKeysChange = useCallback(newSelectedColumnKeys => {
     onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 ? void 0 : onVisibleColumnKeysChange(newSelectedColumnKeys);
   }, [onVisibleColumnKeysChange]);
@@ -352,6 +371,8 @@ export const IssueLikeDataTableView = ({
         key: key,
         "data-testid": `${key}-column-heading`,
         style: {
+          // this keeps the column headers from collapsing horizontally during loading states
+          minWidth: maxWidth,
           maxWidth
         }
       }, heading);
@@ -377,14 +398,24 @@ export const IssueLikeDataTableView = ({
     key: cellKey,
     content,
     maxWidth
-  }, cellIndex) => jsx("td", {
-    key: cellKey,
-    "data-testid": testId && `${testId}--cell-${cellIndex}`,
-    colSpan: cellIndex + 1 === cells.length ? 2 : undefined,
-    css: truncatedCellStyles,
-    style: {
+  }, cellIndex) => {
+    let loadingRowStyle = {
       maxWidth
+    };
+    // extra padding is required around skeleton loader to avoid vertical jumps when data loads
+    if (key !== null && key !== void 0 && key.includes('loading')) {
+      loadingRowStyle = {
+        ...loadingRowStyle,
+        paddingBlock: "var(--ds-space-100, 12px)"
+      };
     }
-  }, content)))))));
+    return jsx("td", {
+      key: cellKey,
+      "data-testid": testId && `${testId}--cell-${cellIndex}`,
+      colSpan: cellIndex + 1 === cells.length ? 2 : undefined,
+      css: truncatedCellStyles,
+      style: loadingRowStyle
+    }, content);
+  }))))));
 };
 export const EmptyState = TableEmptyState;

package/dist/es2019/ui/issue-like-table/styled.js

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { N40 } from '@atlaskit/theme/colors';
+export const ScrollableContainerHeight = 590;
 export const FieldTextFontSize = '14px';
 export const Table = styled.table`
   width: 100%;
@@ -15,9 +16,4 @@ export const TableHeading = styled.th`
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-`;
-export const EmptyStateTableHeading = styled(TableHeading)`
-  &:first-child {
-    padding-left: ${"var(--ds-space-100, 8px)"};
-  }
 `;

package/dist/es2019/ui/jira-issues-modal/modal/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl-next';
 import { v4 as uuidv4 } from 'uuid';
@@ -30,8 +30,11 @@ import { JiraSiteSelector } from '../site-selector';
 import { modalMessages } from './messages';
 const dropdownContainerStyles = css({
   display: 'flex',
-  gap: "var(--ds-space-100, 0.5rem)"
+  alignItems: 'center',
+  gap: "var(--ds-space-100, 0.5rem)",
+  minHeight: '40px' // to prevent vertical shifting when site selector pops in
 });
+
 const contentContainerStyles = css({
   display: 'grid',
   maxHeight: '420px',
@@ -77,11 +80,12 @@ export const getColumnAction = (oldVisibleColumnKeys, newVisibleColumnKeys) => {
 export const PlainJiraIssuesConfigModal = props => {
   const {
     datasourceId,
-    parameters: initialParameters,
-    visibleColumnKeys: initialVisibleColumnKeys,
     onCancel,
     onInsert,
-    viewMode = 'issue'
+    viewMode = 'issue',
+    parameters: initialParameters,
+    url: urlBeingEdited,
+    visibleColumnKeys: initialVisibleColumnKeys
   } = props;
   const [availableSites, setAvailableSites] = useState([]);
   const [currentViewMode, setCurrentViewMode] = useState(viewMode);
@@ -129,9 +133,7 @@ export const PlainJiraIssuesConfigModal = props => {
   } = useRef(uuidv4());
   const selectedJiraSite = useMemo(() => {
     if (cloudId) {
-      // if the cloud id we're editing isn't in available sites then user is likely unauthorized for that site
-      // TODO: unauthorized to edit flow https://product-fabric.atlassian.net/browse/EDM-7216
-      return availableSites.find(jiraSite => jiraSite.cloudId === cloudId) || availableSites[0];
+      return availableSites.find(jiraSite => jiraSite.cloudId === cloudId);
     } else {
       const currentlyLoggedInSiteUrl = window.location.origin;
       return availableSites.find(jiraSite => jiraSite.url === currentlyLoggedInSiteUrl) || availableSites[0];
@@ -360,12 +362,12 @@ export const PlainJiraIssuesConfigModal = props => {
     extensionKey: extensionKey
   })), [columns, defaultVisibleColumnKeys, handleOnNextPage, handleVisibleColumnKeysChange, hasNextPage, loadDatasourceDetails, modalRenderInstanceId, responseItems, status, visibleColumnKeys, extensionKey]);
   const renderCountModeContent = useCallback(() => {
-    const url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
+    const selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'unauthorized') {
       return jsx(AccessRequired, {
-        siteName: selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName
+        url: selectedJiraSiteUrl || urlBeingEdited
       });
-    } else if (status === 'empty' || !jql || !url) {
+    } else if (status === 'empty' || !jql || !selectedJiraSiteUrl) {
       return jsx("div", {
         css: smartLinkContainerStyles
       }, jsx("span", {
@@ -373,22 +375,23 @@ export const PlainJiraIssuesConfigModal = props => {
         css: placeholderSmartLinkStyles
       }, jsx(FormattedMessage, modalMessages.issuesCountSmartCardPlaceholderText)));
     } else {
-      const urlWithEncodedJql = `${url}/issues/?jql=${encodeURI(jql)}`;
+      const urlWithEncodedJql = `${selectedJiraSiteUrl}/issues/?jql=${encodeURI(jql)}`;
       return jsx("div", {
         css: smartLinkContainerStyles
       }, jsx(LinkRenderType, {
         url: urlWithEncodedJql
       }));
     }
-  }, [jql, selectedJiraSite, status]);
+  }, [jql, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
   const renderIssuesModeContent = useCallback(() => {
+    const selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'rejected' && jqlUrl) {
       return jsx(ModalLoadingError, {
         url: jqlUrl
       });
     } else if (status === 'unauthorized') {
       return jsx(AccessRequired, {
-        siteName: selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName
+        url: selectedJiraSiteUrl || urlBeingEdited
       });
     } else if (resolvedWithNoResults) {
       return jsx(NoResults, null);
@@ -397,8 +400,7 @@ export const PlainJiraIssuesConfigModal = props => {
       return jsx("div", {
         css: contentContainerStyles
       }, !!jql ? jsx(EmptyState, {
-        testId: `jira-jql-datasource-modal--empty-state`,
-        isLoading: true
+        testId: `jira-jql-datasource-modal--empty-state`
       }) : jsx(InitialStateView, {
         searchMethod: currentSearchMethod
       }));
@@ -412,24 +414,20 @@ export const PlainJiraIssuesConfigModal = props => {
       }));
     }
     return issueLikeDataTableView;
-  }, [status, jqlUrl, resolvedWithNoResults, columns.length, retrieveUrlForSmartCardRender, responseItems.length, issueLikeDataTableView, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName, jql, currentSearchMethod]);
+  }, [columns.length, currentSearchMethod, issueLikeDataTableView, jql, jqlUrl, resolvedWithNoResults, responseItems.length, retrieveUrlForSmartCardRender, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
   return jsx(ModalTransition, null, jsx(Modal, {
-    testId: 'jira-jql-datasource-modal',
+    testId: "jira-jql-datasource-modal",
     onClose: onCancel,
     width: "calc(100% - 80px)",
     shouldScrollInViewport: true
-  }, jsx(ModalHeader, null, jsx(ModalTitle, null, availableSites.length < 2 ? jsx(FormattedMessage, modalMessages.insertIssuesTitle) : jsx("div", {
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx("div", {
     css: dropdownContainerStyles
-  }, jsx(FormattedMessage, _extends({}, modalMessages.insertIssuesTitleManySites, {
-    values: {
-      siteName: selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName
-    }
-  })), jsx(JiraSiteSelector, {
-    testId: `jira-jql-datasource-modal--site-selector`,
+  }, availableSites.length < 2 ? jsx(FormattedMessage, modalMessages.insertIssuesTitle) : jsx(Fragment, null, jsx(FormattedMessage, modalMessages.insertIssuesTitleManySites), jsx(JiraSiteSelector, {
     availableSites: availableSites,
     onSiteSelection: onSiteSelection,
-    selectedJiraSite: selectedJiraSite
-  }))), jsx(ModeSwitcher, {
+    selectedJiraSite: selectedJiraSite,
+    testId: "jira-jql-datasource-modal--site-selector"
+  })))), jsx(ModeSwitcher, {
     isCompact: true,
     options: [{
       label: formatMessage(modalMessages.issueViewModeLabel),
@@ -469,7 +467,7 @@ export const PlainJiraIssuesConfigModal = props => {
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isInsertDisabled,
-    testId: 'jira-jql-datasource-modal--insert-button'
+    testId: "jira-jql-datasource-modal--insert-button"
   }, jsx(FormattedMessage, modalMessages.insertIssuesButtonText)))));
 };
 const analyticsContextAttributes = {

package/dist/es2019/ui/jira-issues-modal/modal/messages.js

@@ -17,8 +17,8 @@ export const modalMessages = defineMessages({
   },
   insertIssuesTitleManySites: {
     id: 'linkDataSource.jira-issues.configmodal.insertIssuesTitleManySites',
-    description: 'Title for the Jira Issues Datasource config modal when multiple sites are available',
-    defaultMessage: 'Insert Jira issues from {siteName}'
+    description: 'Title for the Jira Issues modal when a user has to select a site to inserting issues from',
+    defaultMessage: 'Insert Jira issues from'
   },
   issueViewModeLabel: {
     id: 'linkDataSource.jira-issues.configmodal.issueViewModeLabel',

package/dist/es2019/ui/jira-issues-modal/site-selector/index.js

@@ -1,11 +1,16 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { useMemo } from 'react';
+import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
-import Button from '@atlaskit/button/standard-button';
-import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import Select from '@atlaskit/select';
+import { siteSelectorIndex } from '../../../common/zindex';
 import { siteSelectorMessages } from './messages';
+const selectStyles = css({
+  fontSize: "var(--ds-font-size-100, 14px)",
+  fontWeight: "var(--ds-font-weight-medium, 500)",
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)",
+  zIndex: siteSelectorIndex
+});
 export const JiraSiteSelector = props => {
   const {
     availableSites,
@@ -13,32 +18,45 @@ export const JiraSiteSelector = props => {
     selectedJiraSite,
     testId
   } = props;
-  const intl = useIntl();
-  return jsx(DropdownMenu, {
-    spacing: "compact",
+  const {
+    formatMessage
+  } = useIntl();
+  const onChange = newValue => {
+    const selectedSite = availableSites.find(site => site.cloudId === (newValue === null || newValue === void 0 ? void 0 : newValue.value));
+    if (selectedSite) {
+      onSiteSelection(selectedSite);
+    }
+  };
+  const availableSitesOptions = useMemo(() => availableSites.map(site => ({
+    label: site.displayName,
+    value: site.cloudId
+  })), [availableSites]);
+  const selectedSiteOption = selectedJiraSite && {
+    label: selectedJiraSite.displayName,
+    value: selectedJiraSite.cloudId
+  };
+  return jsx("span", {
+    "data-testid": `${testId}--trigger`
+  }, jsx(Select, {
+    css: selectStyles,
+    classNamePrefix: testId,
+    isLoading: availableSites.length === 0,
+    onChange: onChange,
+    options: availableSitesOptions,
+    placeholder: formatMessage(siteSelectorMessages.chooseSite),
+    styles: {
+      // prevents the popup menu with available sites from being too narrow
+      // if the selected site is much shorter than the other options
+      menu: ({
+        width,
+        ...css
+      }) => ({
+        ...css,
+        minWidth: '100%',
+        width: 'max-content'
+      })
+    },
     testId: testId,
-    trigger: ({
-      triggerRef,
-      ...props
-    }) => jsx(Button, _extends({}, props, {
-      testId: `${testId}--trigger`,
-      spacing: "none",
-      iconBefore: jsx(ChevronDownIcon, {
-        label: intl.formatMessage(siteSelectorMessages.dropdownChevronLabel)
-      }),
-      ref: triggerRef
-    }))
-  }, jsx(DropdownItemGroup, null, availableSites.map(availableSite => {
-    const {
-      displayName,
-      cloudId
-    } = availableSite;
-    const isSelected = displayName === (selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName);
-    return jsx(DropdownItem, {
-      isSelected: isSelected,
-      key: cloudId,
-      onClick: () => onSiteSelection(availableSite),
-      testId: testId && `${testId}--dropdown-item${isSelected ? '__selected' : ''}`
-    }, displayName);
-  })));
+    value: selectedSiteOption
+  }));
 };

package/dist/es2019/ui/jira-issues-modal/site-selector/messages.js

@@ -1,13 +1,8 @@
 import { defineMessages } from 'react-intl-next';
 export const siteSelectorMessages = defineMessages({
-  dropdownChevronLabel: {
-    id: 'linkDataSource.jira-issues.configmodal.dropdownChevronLabel',
-    description: 'Label for button that reveals more available site options to choose from',
-    defaultMessage: 'Pick jira site'
-  },
-  selectedJiraSiteLabel: {
-    id: 'linkDataSource.jira-issues.configmodal.selectedJiraSiteLabel',
-    description: 'Label for a check icon declaring which option is selected',
-    defaultMessage: '{siteName} is selected'
+  chooseSite: {
+    id: 'linkDataSource.jira-issues.configmodal.chooseSite',
+    description: 'Label for input letting user know they have to choose a site',
+    defaultMessage: 'Choose site'
   }
 });

package/dist/esm/analytics/constants.js

@@ -1,5 +1,5 @@
 export var EVENT_CHANNEL = 'media';
 export var packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.7.6"
+  packageVersion: "1.9.0"
 };

package/dist/esm/common/zindex.js

@@ -0,0 +1,2 @@
+export var stickyTableHeadersIndex = 10;
+export var siteSelectorIndex = stickyTableHeadersIndex + 1;

package/dist/esm/hooks/useDatasourceTableState.js

@@ -273,7 +273,6 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
         reset();
         void onNextPage({
           isSchemaFromData: false,
-          // since this is not inital load, we will already have schema
           shouldRequestFirstPage: true
         });
       }

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

@@ -225,7 +225,7 @@ var analyticsContextAttributes = {
 };
 var analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.7.6",
+  packageVersion: "1.9.0",
   source: 'datasourceConfigModal'
 };
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {

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

@@ -1,13 +1,41 @@
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import EmptyState from '@atlaskit/empty-state';
+import { N400 } from '@atlaskit/theme/colors';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { AccessRequiredSVG } from './access-required-svg';
 import { loadingErrorMessages } from './messages';
-export var AccessRequired = function AccessRequired(_ref) {
-  var siteName = _ref.siteName;
+var urlStyles = css({
+  color: "var(--ds-text-subtlest, ".concat(N400, ")"),
+  fontSize: "var(--ds-font-size-100, 14px)",
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)"
+});
+var descriptionMessageStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: "var(--ds-space-200, 16px)"
+});
+var iconContainerStyles = css({
+  marginBottom: "var(--ds-space-200, 16px)"
+});
+var Description = function Description(_ref) {
+  var message = _ref.message,
+    url = _ref.url;
+  return jsx("div", {
+    css: descriptionMessageStyles
+  }, jsx("span", {
+    css: urlStyles
+  }, url), jsx("span", null, message));
+};
+var IconContainer = function IconContainer() {
+  return jsx("div", {
+    css: iconContainerStyles
+  }, jsx(AccessRequiredSVG, null));
+};
+export var AccessRequired = function AccessRequired(_ref2) {
+  var url = _ref2.url;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
@@ -17,13 +45,19 @@ export var AccessRequired = function AccessRequired(_ref) {
       reason: 'access'
     });
   }, [fireEvent]);
+  if (url) {
+    return jsx(EmptyState, {
+      header: formatMessage(loadingErrorMessages.accessRequiredWithSite),
+      description: jsx(Description, {
+        message: formatMessage(loadingErrorMessages.accessInstructions),
+        url: url
+      }),
+      renderImage: IconContainer
+    });
+  }
   return jsx(EmptyState, {
-    header: siteName ? formatMessage(loadingErrorMessages.accessRequiredWithSite, {
-      siteName: siteName
-    }) : formatMessage(loadingErrorMessages.accessRequired),
+    header: formatMessage(loadingErrorMessages.accessRequired),
     description: formatMessage(loadingErrorMessages.accessInstructions),
-    renderImage: function renderImage() {
-      return jsx(AccessRequiredSVG, null);
-    }
+    renderImage: IconContainer
   });
 };

package/dist/esm/ui/common/error-state/messages.js

@@ -2,8 +2,8 @@ import { defineMessages } from 'react-intl-next';
 export var loadingErrorMessages = defineMessages({
   accessInstructions: {
     id: 'linkDataSource.jira-issues.accessInstructions',
-    description: "Instructions to let the user know they must contact an administrator in order to access this site's content",
-    defaultMessage: 'To request access, contact your admin.'
+    description: "Instructions to let the user know they must contact their site administrator in order to access this site's content",
+    defaultMessage: 'To request access, contact your site administrator.'
   },
   accessRequired: {
     id: 'linkDataSource.jira-issues.accessRequired',
@@ -12,8 +12,8 @@ export var loadingErrorMessages = defineMessages({
   },
   accessRequiredWithSite: {
     id: 'linkDataSource.jira-issues.accessRequiredWithSite',
-    description: 'Message letting user know that they do not have access to the site by name',
-    defaultMessage: "You don't have access to {siteName}"
+    description: 'Message letting user know that they do not have access to the site that will be listed below this message',
+    defaultMessage: "You don't have access to the following site:"
   },
   checkConnection: {
     id: 'linkDataSource.jira-issues.checkConnection',

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

@@ -9,6 +9,7 @@ import { startUfoExperience } from '../../analytics/ufoExperiences';
 import { useColumnPickerRenderedFailedUfoExperience } from '../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience';
 import { useDataRenderedUfoExperience } from '../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
 import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
+import { ScrollableContainerHeight } from '../../ui/issue-like-table/styled';
 import { AccessRequired } from '../common/error-state/access-required';
 import { LoadingError } from '../common/error-state/loading-error';
 import { NoResults } from '../common/error-state/no-results';
@@ -105,7 +106,9 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     });
   }
   if (status === 'unauthorized') {
-    return jsx(AccessRequired, null);
+    return jsx(AccessRequired, {
+      url: url
+    });
   }
   if (status === 'rejected') {
     return jsx(LoadingError, {
@@ -126,13 +129,12 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       columns: columns,
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onVisibleColumnKeysChange: onVisibleColumnKeysChange,
-      scrollableContainerHeight: 590,
+      scrollableContainerHeight: ScrollableContainerHeight,
       parentContainerRenderInstanceId: tableRenderInstanceId,
       extensionKey: extensionKey
     }) : jsx(EmptyState, {
       testId: "datasource-table-view-skeleton",
-      isCompact: true,
-      isLoading: !isDataReady || status === 'loading'
+      isCompact: true
     }), jsx(TableFooter, {
       itemCount: isDataReady ? totalCount : undefined,
       onRefresh: forcedReset,