@atlaskit/link-datasource 1.7.6 → 1.9.0

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

@@ -46,8 +46,11 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var dropdownContainerStyles = (0, _react2.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
 });
+
 var contentContainerStyles = (0, _react2.css)({
   display: 'grid',
   maxHeight: '420px',
@@ -92,12 +95,13 @@ var getColumnAction = exports.getColumnAction = function getColumnAction(oldVisi
 };
 var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
   var datasourceId = props.datasourceId,
-    initialParameters = props.parameters,
-    initialVisibleColumnKeys = props.visibleColumnKeys,
     onCancel = props.onCancel,
     onInsert = props.onInsert,
     _props$viewMode = props.viewMode,
-    viewMode = _props$viewMode === void 0 ? 'issue' : _props$viewMode;
+    viewMode = _props$viewMode === void 0 ? 'issue' : _props$viewMode,
+    initialParameters = props.parameters,
+    urlBeingEdited = props.url,
+    initialVisibleColumnKeys = props.visibleColumnKeys;
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     availableSites = _useState2[0],
@@ -161,11 +165,9 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     modalRenderInstanceId = _useRef.current;
   var selectedJiraSite = (0, _react.useMemo)(function () {
     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(function (jiraSite) {
         return jiraSite.cloudId === cloudId;
-      }) || availableSites[0];
+      });
     } else {
       var currentlyLoggedInSiteUrl = window.location.origin;
       return availableSites.find(function (jiraSite) {
@@ -417,12 +419,12 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     }));
   }, [columns, defaultVisibleColumnKeys, handleOnNextPage, handleVisibleColumnKeysChange, hasNextPage, loadDatasourceDetails, modalRenderInstanceId, responseItems, status, visibleColumnKeys, extensionKey]);
   var renderCountModeContent = (0, _react.useCallback)(function () {
-    var url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
+    var selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'unauthorized') {
       return (0, _react2.jsx)(_accessRequired.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 (0, _react2.jsx)("div", {
         css: smartLinkContainerStyles
       }, (0, _react2.jsx)("span", {
@@ -430,22 +432,23 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
         css: placeholderSmartLinkStyles
       }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.issuesCountSmartCardPlaceholderText)));
     } else {
-      var urlWithEncodedJql = "".concat(url, "/issues/?jql=").concat(encodeURI(jql));
+      var urlWithEncodedJql = "".concat(selectedJiraSiteUrl, "/issues/?jql=").concat(encodeURI(jql));
       return (0, _react2.jsx)("div", {
         css: smartLinkContainerStyles
       }, (0, _react2.jsx)(_link.default, {
         url: urlWithEncodedJql
       }));
     }
-  }, [jql, selectedJiraSite, status]);
+  }, [jql, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
   var renderIssuesModeContent = (0, _react.useCallback)(function () {
+    var selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'rejected' && jqlUrl) {
       return (0, _react2.jsx)(_modalLoadingError.ModalLoadingError, {
         url: jqlUrl
       });
     } else if (status === 'unauthorized') {
       return (0, _react2.jsx)(_accessRequired.AccessRequired, {
-        siteName: selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName
+        url: selectedJiraSiteUrl || urlBeingEdited
       });
     } else if (resolvedWithNoResults) {
       return (0, _react2.jsx)(_noResults.NoResults, null);
@@ -454,8 +457,7 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
       return (0, _react2.jsx)("div", {
         css: contentContainerStyles
       }, !!jql ? (0, _react2.jsx)(_issueLikeTable.EmptyState, {
-        testId: "jira-jql-datasource-modal--empty-state",
-        isLoading: true
+        testId: "jira-jql-datasource-modal--empty-state"
       }) : (0, _react2.jsx)(_initialStateView.InitialStateView, {
         searchMethod: currentSearchMethod
       }));
@@ -469,24 +471,20 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
       }));
     }
     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 (0, _react2.jsx)(_modalDialog.ModalTransition, null, (0, _react2.jsx)(_modalDialog.default, {
-    testId: 'jira-jql-datasource-modal',
+    testId: "jira-jql-datasource-modal",
     onClose: onCancel,
     width: "calc(100% - 80px)",
     shouldScrollInViewport: true
-  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)(_modalDialog.ModalTitle, null, availableSites.length < 2 ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesTitle) : (0, _react2.jsx)("div", {
+  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)(_modalDialog.ModalTitle, null, (0, _react2.jsx)("div", {
     css: dropdownContainerStyles
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.modalMessages.insertIssuesTitleManySites, {
-    values: {
-      siteName: selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName
-    }
-  })), (0, _react2.jsx)(_siteSelector.JiraSiteSelector, {
-    testId: "jira-jql-datasource-modal--site-selector",
+  }, availableSites.length < 2 ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesTitle) : (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesTitleManySites), (0, _react2.jsx)(_siteSelector.JiraSiteSelector, {
     availableSites: availableSites,
     onSiteSelection: onSiteSelection,
-    selectedJiraSite: selectedJiraSite
-  }))), (0, _react2.jsx)(_modeSwitcher.ModeSwitcher, {
+    selectedJiraSite: selectedJiraSite,
+    testId: "jira-jql-datasource-modal--site-selector"
+  })))), (0, _react2.jsx)(_modeSwitcher.ModeSwitcher, {
     isCompact: true,
     options: [{
       label: formatMessage(_messages.modalMessages.issueViewModeLabel),
@@ -526,7 +524,7 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     appearance: "primary",
     onClick: onInsertPressed,
     isDisabled: isInsertDisabled,
-    testId: 'jira-jql-datasource-modal--insert-button'
+    testId: "jira-jql-datasource-modal--insert-button"
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.insertIssuesButtonText)))));
 };
 var analyticsContextAttributes = {

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

@@ -23,8 +23,8 @@ var modalMessages = exports.modalMessages = (0, _reactIntlNext.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/cjs/ui/jira-issues-modal/site-selector/index.js

@@ -1,55 +1,77 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.JiraSiteSelector = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _select = _interopRequireDefault(require("@atlaskit/select"));
+var _zindex = require("../../../common/zindex");
 var _messages = require("./messages");
-var _excluded = ["triggerRef"];
+var _excluded = ["width"];
 /** @jsx jsx */
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var selectStyles = (0, _react2.css)({
+  fontSize: "var(--ds-font-size-100, 14px)",
+  fontWeight: "var(--ds-font-weight-medium, 500)",
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)",
+  zIndex: _zindex.siteSelectorIndex
+});
 var JiraSiteSelector = exports.JiraSiteSelector = function JiraSiteSelector(props) {
   var availableSites = props.availableSites,
     onSiteSelection = props.onSiteSelection,
     selectedJiraSite = props.selectedJiraSite,
     testId = props.testId;
-  var intl = (0, _reactIntlNext.useIntl)();
-  return (0, _react.jsx)(_dropdownMenu.default, {
-    spacing: "compact",
-    testId: testId,
-    trigger: function trigger(_ref) {
-      var triggerRef = _ref.triggerRef,
-        props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-      return (0, _react.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
-        testId: "".concat(testId, "--trigger"),
-        spacing: "none",
-        iconBefore: (0, _react.jsx)(_chevronDown.default, {
-          label: intl.formatMessage(_messages.siteSelectorMessages.dropdownChevronLabel)
-        }),
-        ref: triggerRef
-      }));
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var onChange = function onChange(newValue) {
+    var selectedSite = availableSites.find(function (site) {
+      return site.cloudId === (newValue === null || newValue === void 0 ? void 0 : newValue.value);
+    });
+    if (selectedSite) {
+      onSiteSelection(selectedSite);
     }
-  }, (0, _react.jsx)(_dropdownMenu.DropdownItemGroup, null, availableSites.map(function (availableSite) {
-    var displayName = availableSite.displayName,
-      cloudId = availableSite.cloudId;
-    var isSelected = displayName === (selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName);
-    return (0, _react.jsx)(_dropdownMenu.DropdownItem, {
-      isSelected: isSelected,
-      key: cloudId,
-      onClick: function onClick() {
-        return onSiteSelection(availableSite);
-      },
-      testId: testId && "".concat(testId, "--dropdown-item").concat(isSelected ? '__selected' : '')
-    }, displayName);
-  })));
+  };
+  var availableSitesOptions = (0, _react.useMemo)(function () {
+    return availableSites.map(function (site) {
+      return {
+        label: site.displayName,
+        value: site.cloudId
+      };
+    });
+  }, [availableSites]);
+  var selectedSiteOption = selectedJiraSite && {
+    label: selectedJiraSite.displayName,
+    value: selectedJiraSite.cloudId
+  };
+  return (0, _react2.jsx)("span", {
+    "data-testid": "".concat(testId, "--trigger")
+  }, (0, _react2.jsx)(_select.default, {
+    css: selectStyles,
+    classNamePrefix: testId,
+    isLoading: availableSites.length === 0,
+    onChange: onChange,
+    options: availableSitesOptions,
+    placeholder: formatMessage(_messages.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: function menu(_ref) {
+        var width = _ref.width,
+          css = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+        return _objectSpread(_objectSpread({}, css), {}, {
+          minWidth: '100%',
+          width: 'max-content'
+        });
+      }
+    },
+    testId: testId,
+    value: selectedSiteOption
+  }));
 };

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

@@ -6,14 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.siteSelectorMessages = void 0;
 var _reactIntlNext = require("react-intl-next");
 var siteSelectorMessages = exports.siteSelectorMessages = (0, _reactIntlNext.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/es2019/analytics/constants.js

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

package/dist/es2019/common/zindex.js

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

package/dist/es2019/hooks/useDatasourceTableState.js

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

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

@@ -194,7 +194,7 @@ const analyticsContextAttributes = {
 };
 const analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.7.6",
+  packageVersion: "1.9.0",
   source: 'datasourceConfigModal'
 };
 const contextData = {

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

@@ -1,13 +1,40 @@
 /** @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';
+const urlStyles = css({
+  color: `var(--ds-text-subtlest, ${N400})`,
+  fontSize: "var(--ds-font-size-100, 14px)",
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)"
+});
+const descriptionMessageStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: "var(--ds-space-200, 16px)"
+});
+const iconContainerStyles = css({
+  marginBottom: "var(--ds-space-200, 16px)"
+});
+const Description = ({
+  message,
+  url
+}) => {
+  return jsx("div", {
+    css: descriptionMessageStyles
+  }, jsx("span", {
+    css: urlStyles
+  }, url), jsx("span", null, message));
+};
+const IconContainer = () => jsx("div", {
+  css: iconContainerStyles
+}, jsx(AccessRequiredSVG, null));
 export const AccessRequired = ({
-  siteName
+  url
 }) => {
   const {
     formatMessage
@@ -20,11 +47,19 @@ export const AccessRequired = ({
       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
-    }) : formatMessage(loadingErrorMessages.accessRequired),
+    header: formatMessage(loadingErrorMessages.accessRequired),
     description: formatMessage(loadingErrorMessages.accessInstructions),
-    renderImage: () => jsx(AccessRequiredSVG, null)
+    renderImage: IconContainer
   });
 };

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

@@ -2,8 +2,8 @@ import { defineMessages } from 'react-intl-next';
 export const 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 const 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/es2019/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';
@@ -108,7 +109,9 @@ const DatasourceTableViewWithoutAnalytics = ({
     });
   }
   if (status === 'unauthorized') {
-    return jsx(AccessRequired, null);
+    return jsx(AccessRequired, {
+      url: url
+    });
   }
   if (status === 'rejected') {
     return jsx(LoadingError, {
@@ -129,13 +132,12 @@ const DatasourceTableViewWithoutAnalytics = ({
       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,

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

@@ -1,25 +1,38 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { Skeleton } from '@atlaskit/linking-common';
-import UserType from '../render-type/user';
-import { EmptyStateTableHeading } from '../styled';
-import Priority from './priority';
-import Type from './type';
+import { ScrollableContainerHeight, TableHeading } from '../styled';
+const SkeletonComponent = ({
+  width,
+  itemName
+}) => jsx(Skeleton, {
+  borderRadius: 8,
+  testId: `${itemName}-empty-state-skeleton`,
+  height: 14,
+  width: width
+});
+const tableSidePadding = "var(--ds-space-200, 16px)";
 const tableBodyStyles = css({
   borderBottom: 0
 });
+const cellStyles = css({
+  paddingBlock: "var(--ds-space-100, 12px)",
+  '&:last-child': {
+    paddingRight: "var(--ds-space-100, 8px)"
+  }
+});
 const baseColumns = [{
   key: 'type',
-  width: 50
+  width: 35
 }, {
   key: 'issue',
   width: 50
 }, {
   key: 'summary',
-  width: 70
+  width: 100
 }, {
   key: 'assignee',
-  width: 100
+  width: 70
 }, {
   key: 'priority',
   width: 60
@@ -36,91 +49,65 @@ const baseColumns = [{
   key: 'due',
   width: 50
 }];
-const priorities = ['low', 'medium', 'high', 'medium', 'low', 'blocker', 'medium', 'blocker', 'high', 'low'];
-const types = ['task', 'story', 'commit', 'epic', 'bug', 'task', 'story', 'commit', 'issue', 'epic'];
-const summaryColumnWidths = [141, 208, 186, 212, 212, 151, 212, 182, 180, 147];
-const statusColumnWidths = [75, 54, 66, 73, 52, 73, 55, 80, 66, 59];
-const rows = new Array(10).fill(null).map((_, index) => ({
-  id: index,
-  priority: priorities[index],
-  type: types[index],
-  summaryWidth: summaryColumnWidths[index],
-  statusWidth: statusColumnWidths[index]
-}));
-const cellStyles = css({
-  '&:first-child': {
-    paddingLeft: "var(--ds-space-100, 8px)"
-  },
-  '&:last-child': {
-    paddingRight: "var(--ds-space-100, 8px)"
-  }
-});
+const longColumnWidths = [141, 208, 186, 212, 212, 151, 212, 182, 180, 163, 172, 211, 145, 190];
+const shortColumnWidths = [75, 54, 66, 73, 52, 73, 55, 80, 67, 76, 58, 65, 56, 76];
 const renderItem = ({
   key,
   width
 }, {
-  priority,
-  type,
-  summaryWidth,
-  statusWidth
-}, isShimmering) => {
+  longWidth,
+  shortWidth
+}) => {
   switch (key) {
-    case 'assignee':
-      return jsx(UserType, null, jsx(Skeleton, {
-        borderRadius: 8,
-        testId: "empty-state-skeleton",
-        height: 13,
-        isShimmering: isShimmering,
-        width: width
-      }));
-    case 'priority':
-      return jsx(Priority, {
-        priority: priority
-      });
-    case 'type':
-      return jsx(Type, {
-        type: type
+    case 'status':
+      return jsx(SkeletonComponent, {
+        width: shortWidth,
+        itemName: key
       });
     case 'summary':
-      return jsx(Skeleton, {
-        appearance: "blue",
-        borderRadius: 10,
-        testId: "empty-state-skeleton",
-        height: 13,
-        isShimmering: isShimmering,
-        width: summaryWidth
-      });
-    case 'status':
-      return jsx(Skeleton, {
-        appearance: "blue",
-        borderRadius: 3,
-        testId: "empty-state-skeleton",
-        height: 16,
-        isShimmering: isShimmering,
-        width: statusWidth
+      return jsx(SkeletonComponent, {
+        width: longWidth,
+        itemName: key
       });
     default:
-      return jsx(Skeleton, {
-        borderRadius: 8,
-        testId: "empty-state-skeleton",
-        height: 13,
-        isShimmering: isShimmering,
-        width: width
+      return jsx(SkeletonComponent, {
+        width: width,
+        itemName: key
       });
   }
 };
 export default (({
   isCompact,
-  isLoading = false,
   testId
 }) => {
   const columnsToRender = isCompact ? baseColumns.slice(0, 6) : baseColumns;
-  return jsx("table", {
+  // if it is compact (non-modal), there is room for 14 rows
+  // if it is modal (not compact), there is only room for 10 rows
+  const rowsNumber = isCompact ? 14 : 10;
+  const rows = new Array(rowsNumber).fill(null).map((_, index) => ({
+    id: index,
+    longWidth: longColumnWidths[index],
+    shortWidth: shortColumnWidths[index]
+  }));
+  return jsx("div", {
+    style: {
+      // the IssueLikeDataTableView wraps the table in a container with the styling below while modal doesn't
+      // the isCompact prop is applied to non-modal empty states which require additional padding
+      // this maxHeight comes from scrollableContainerHeight
+      maxHeight: ScrollableContainerHeight,
+      padding: isCompact ? `0 ${tableSidePadding} 0 ${tableSidePadding}` : '0',
+      boxSizing: 'border-box'
+    }
+  }, jsx("table", {
     "data-testid": testId
-  }, jsx("thead", null, jsx("tr", null, columnsToRender.map(({
+  }, jsx("thead", {
+    style: {
+      borderBottom: 0
+    }
+  }, jsx("tr", null, columnsToRender.map(({
     key,
     width
-  }) => jsx(EmptyStateTableHeading, {
+  }) => jsx(TableHeading, {
     key: key,
     style: {
       width
@@ -129,8 +116,7 @@ export default (({
     appearance: "darkGray",
     borderRadius: 8,
     testId: "empty-state-skeleton",
-    isShimmering: isLoading,
-    height: 13,
+    height: 12,
     width: width
   }))))), jsx("tbody", {
     css: tableBodyStyles
@@ -139,5 +125,5 @@ export default (({
   }, columnsToRender.map(column => jsx("td", {
     css: cellStyles,
     key: column.key
-  }, renderItem(column, row, isLoading)))))));
+  }, renderItem(column, row))))))));
 });

package/dist/es2019/ui/issue-like-table/empty-state/type.js

@@ -9,7 +9,7 @@ import Task16Icon from '@atlaskit/icon-object/glyph/task/16';
 const IconWrapper = styled.div`
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: left;
 `;
 export default (({
   type