@atlaskit/link-datasource 0.31.2 → 0.32.0

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

@@ -3,30 +3,42 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import styled from '@emotion/styled';
 import invariant from 'tiny-invariant';
+import Heading from '@atlaskit/heading';
 import { Skeleton } from '@atlaskit/linking-common';
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
+import { N40 } from '@atlaskit/theme/colors';
 import { ColumnPicker } from './column-picker';
+import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
 import { fallbackRenderType } from './render-type';
 import { Table, TableHeading } from './styled';
 import { useIsOnScreen } from './useIsOnScreen';
+const tableSidePadding = "var(--ds-space-200, 16px)";
 const tableHeadStyles = css({
   background: "var(--ds-surface, #FFF)",
-  borderTop: '2px solid transparent'
+  position: 'sticky',
+  top: 0,
+  zIndex: 10
 });
-const ColumnPickerHeader = styled.td`
+const ColumnPickerHeader = styled.th`
   width: 40px;
-  padding-block: ${"var(--ds-space-100, 8px)"};
   position: sticky;
-  right: 0px;
+  right: calc(-1 * ${tableSidePadding});
   background-color: ${"var(--ds-surface, #FFF)"};
-  &:last-child {
-    padding-right: ${"var(--ds-space-100, 8px)"};
+  border-bottom: 2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}; /* It is required to have solid (not half-transparent) color because of this gradient business bellow */
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    ${"var(--ds-surface, #FFF)"} 10%
+  );
+  vertical-align: middle; /* Keeps dropdown button in the middle */
+  &:last-of-type {
+    padding-right: ${tableSidePadding};
   }
 `;
 const truncatedCellStyles = css({
@@ -34,11 +46,22 @@ const truncatedCellStyles = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-const tableDragPreviewStyles = css({
-  backgroundColor: "var(--ds-surface, #FFF)"
+const scrollableContainerStyles = css({
+  overflow: 'auto',
+  padding: `0 ${tableSidePadding} 0 ${tableSidePadding}`,
+  boxSizing: 'border-box'
 });
-const containerDragPreviewStyles = css({
-  overflow: 'hidden'
+const tableStyles = css({
+  // These styles are needed to prevent thead bottom border from scrolling away.
+  // This happens because it is sticky. https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
+  borderCollapse: 'separate',
+  borderSpacing: 0
+});
+
+// By default tbody and thead have border-bottom: 2px ...
+// This removes it, because for header we handle it via `th` styling and footer supply bottom border
+const noDefaultBorderStyles = css({
+  borderBottom: 0
 });
 function extractIndex(data) {
   const {
@@ -69,7 +92,6 @@ const BASE_WIDTH = 8;
 function getColumnWidth(key, type) {
   const keyBasedWidth = {
     assignee: BASE_WIDTH * 22,
-    key: BASE_WIDTH * 10,
     labels: BASE_WIDTH * 22,
     priority: BASE_WIDTH * 8,
     status: BASE_WIDTH * 18,
@@ -98,11 +120,11 @@ export const IssueLikeDataTableView = ({
   visibleColumnKeys,
   onVisibleColumnKeysChange,
   status,
-  hasNextPage
+  hasNextPage,
+  scrollableContainerHeight
 }) => {
   const tableId = useMemo(() => Symbol('unique-id'), []);
   const [lastRowElement, setLastRowElement] = useState(null);
-  const [isDragPreview, setIsDragPreview] = useState(false);
   const [hasFullSchema, setHasFullSchema] = useState(false);
   const isBottomOfTableVisibleRaw = useIsOnScreen(lastRowElement);
   const containerRef = useRef(null);
@@ -135,7 +157,7 @@ export const IssueLikeDataTableView = ({
       };
     })
   }), [visibleSortedColumns]);
-  const headColumns = visibleSortedColumns.map(({
+  const headColumns = useMemo(() => visibleSortedColumns.map(({
     key,
     title,
     type
@@ -144,7 +166,7 @@ export const IssueLikeDataTableView = ({
     content: title,
     shouldTruncate: true,
     maxWidth: getColumnWidth(key, type)
-  }));
+  })), [visibleSortedColumns]);
   useEffect(() => {
     if (isBottomOfTableVisibleRaw && hasNextPage && status === 'resolved') {
       void onNextPage({
@@ -152,37 +174,41 @@ export const IssueLikeDataTableView = ({
       });
     }
   }, [isBottomOfTableVisibleRaw, status, hasNextPage, onNextPage]);
-  let dndPreviewHeight = 0;
-  if (items.length > 0 && containerRef.current) {
-    const containerEl = containerRef.current;
-    invariant(containerEl);
-    dndPreviewHeight = containerEl.offsetHeight;
-  }
+  const hasData = items.length > 0;
 
   // This variable contains initial Y mouse coordinate, so we can restrict
   // autoScroller in X axis only
   const initialAutoScrollerClientY = useRef();
   useEffect(() => {
-    if (!onVisibleColumnKeysChange) {
+    if (!onVisibleColumnKeysChange || !hasData) {
       return;
     }
     return combine(monitorForElements({
       onDragStart: ({
         location
       }) => {
+        var _containerRef$current;
         initialAutoScrollerClientY.current = location.current.input.clientY;
         autoScroller.start({
-          input: location.current.input,
+          input: {
+            ...location.current.input,
+            clientY:
+            // The goal is to have clientY the same and in the middle of the scrollable area
+            // Since clientY is taken from to of the viewport we need to plus that in order to get
+            // middle of the scrollable area in reference to the viewport
+            (initialAutoScrollerClientY.current || 0) + (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetHeight) || 0) / 2
+          },
           behavior: 'container-only'
         });
       },
       onDrag: ({
         location
       }) => {
+        var _containerRef$current2;
         autoScroller.updateInput({
           input: {
             ...location.current.input,
-            clientY: initialAutoScrollerClientY.current || 0
+            clientY: (initialAutoScrollerClientY.current || 0) + (((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetHeight) || 0) / 2
           }
         });
       },
@@ -190,7 +216,6 @@ export const IssueLikeDataTableView = ({
         source,
         location
       }) {
-        initialAutoScrollerClientY.current = null;
         autoScroller.stop();
         if (location.current.dropTargets.length === 0) {
           return;
@@ -220,7 +245,7 @@ export const IssueLikeDataTableView = ({
         }
       }
     }));
-  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId]);
+  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId, hasData]);
   const tableRows = useMemo(() => items.map((newRowData, rowIndex) => ({
     key: `${identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex}`,
     cells: visibleSortedColumns.map(({
@@ -242,9 +267,7 @@ export const IssueLikeDataTableView = ({
     }),
     ref: rowIndex === items.length - 1 ? el => setLastRowElement(el) : undefined
   })), [identityColumnKey, renderItem, items, visibleSortedColumns]);
-  const rows = [...tableRows, ...(status === 'loading' ? [loadingRow] : [])];
-  const setIsDragPreviewOn = useCallback(() => setIsDragPreview(true), [setIsDragPreview]);
-  const setIsDragPreviewOff = useCallback(() => setIsDragPreview(false), [setIsDragPreview]);
+  const rows = useMemo(() => [...tableRows, ...(status === 'loading' ? [loadingRow] : [])], [loadingRow, status, tableRows]);
   const onSelectedColumnKeysChange = useCallback(newSelectedColumnKeys => {
     onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 ? void 0 : onVisibleColumnKeysChange(newSelectedColumnKeys);
   }, [onVisibleColumnKeysChange]);
@@ -261,32 +284,50 @@ export const IssueLikeDataTableView = ({
   }, [hasFullSchema, onLoadDatasourceDetails]);
   return jsx("div", {
     ref: containerRef,
-    css: isDragPreview ? containerDragPreviewStyles : null
+    css: scrollableContainerHeight ? scrollableContainerStyles : null,
+    style: scrollableContainerHeight ? {
+      maxHeight: `${scrollableContainerHeight}px`
+    } : undefined
   }, jsx(Table, {
-    css: isDragPreview ? tableDragPreviewStyles : null,
+    css: tableStyles,
     "data-testid": testId
   }, jsx("thead", {
     "data-testid": testId && `${testId}--head`,
-    css: tableHeadStyles
+    css: [noDefaultBorderStyles, tableHeadStyles]
   }, jsx("tr", null, headColumns.map(({
     key,
     content,
     maxWidth
   }, cellIndex) => {
-    const TruncatedContent = () => jsx("div", {
-      css: truncatedCellStyles
-    }, content);
-    if (onVisibleColumnKeysChange && status !== 'loading') {
+    if (onVisibleColumnKeysChange && hasData) {
+      var _containerRef$current3;
+      const previewRows = tableRows.map(({
+        cells
+      }) => {
+        const cell = cells.find(({
+          key: cellKey
+        }) => cellKey === key);
+        if (cell) {
+          return cell.content;
+        }
+      }).slice(0, 5);
+      const dragPreview = jsx(DragColumnPreview, {
+        title: jsx(Heading, {
+          level: "h400"
+        }, content),
+        rows: previewRows
+      });
       return jsx(DraggableTableHeading, {
         tableId: tableId,
         key: key,
         id: key,
         index: cellIndex,
         maxWidth: maxWidth,
-        dndPreviewHeight: dndPreviewHeight,
-        onDragPreviewStart: setIsDragPreviewOn,
-        onDragPreviewEnd: setIsDragPreviewOff
-      }, jsx(TruncatedContent, null));
+        dndPreviewHeight: ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight) || 0,
+        dragPreview: dragPreview
+      }, jsx(Heading, {
+        level: "h400"
+      }, content));
     } else {
       return jsx(TableHeading, {
         key: key,
@@ -294,15 +335,17 @@ export const IssueLikeDataTableView = ({
         style: {
           maxWidth
         }
-      }, jsx(TruncatedContent, null));
+      }, jsx(Heading, {
+        level: "h400"
+      }, content));
     }
-  }), onVisibleColumnKeysChange && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
+  }), onVisibleColumnKeysChange && hasData && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
     columns: hasFullSchema ? orderedColumns : [],
     selectedColumnKeys: hasFullSchema ? visibleColumnKeys : [],
-    isDatasourceLoading: status === 'loading',
     onSelectedColumnKeysChange: onSelectedColumnKeysChange,
     onOpen: handlePickerOpen
   })))), jsx("tbody", {
+    css: noDefaultBorderStyles,
     "data-testid": testId && `${testId}--body`
   }, rows.map(({
     key,

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

@@ -1,11 +1,29 @@
 import styled from '@emotion/styled';
+import { N40 } from '@atlaskit/theme/colors';
 export const Table = styled.table`
   width: 100%;
 `;
 export const TableHeading = styled.th`
+  cursor: grab;
   position: relative;
   padding-block: ${"var(--ds-space-100, 8px)"};
   line-height: ${"var(--ds-font-lineHeight-300, 24px)"};
+  border-bottom: 2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`};
+  .ProseMirror & h5,
+  & h5 {
+    margin-top: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 24px; /* Is needed to keep overall height consistent with or without drag handle icon present */
+  }
+
+  &:hover .issue-like-table-drag-handle {
+    width: 24px;
+  }
+  &:hover .issue-like-table-drag-handle-spacer {
+    width: 0px;
+  }
 `;
 export const EmptyStateTableHeading = styled(TableHeading)`
   &:first-child {

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

@@ -2,6 +2,7 @@
 import React, { useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { BasicSearchInput } from '../basic-search-input';
 import { JiraJQLEditor } from '../jql-editor';
 import { ModeSwitcher } from '../mode-switcher';
@@ -34,6 +35,9 @@ export const JiraSearchContainer = props => {
   const [jql, setJql] = useState(initialJql || DEFAULT_JQL_QUERY);
   const [orderKey, setOrderKey] = useState();
   const [orderDirection, setOrderDirection] = useState();
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
   const onSearchModeChange = searchMode => {
     setCurrentSearchMode(searchMode);
   };
@@ -65,6 +69,11 @@ export const JiraSearchContainer = props => {
     onSearch({
       jql
     });
+    if (currentSearchMode === basicModeValue) {
+      fireEvent('ui.form.submitted.basicSearch', {});
+    } else if (currentSearchMode === jqlModeValue) {
+      fireEvent('ui.jqlEditor.searched', {});
+    }
   };
   return jsx("div", {
     css: inputContainerStyles

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

@@ -3,11 +3,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl-next';
+import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
-import { B400, N0, N800 } from '@atlaskit/theme/colors';
+import { B400, N0, N40, N800 } from '@atlaskit/theme/colors';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import { getAvailableJiraSites } from '../../../services/getAvailableJiraSites';
+import { name as packageName, version as packageVersion } from '../../../version.json';
 import { AccessRequired } from '../../common/error-state/access-required';
 import { ModalLoadingError } from '../../common/error-state/modal-loading-error';
 import { NoResults } from '../../common/error-state/no-results';
@@ -23,8 +26,9 @@ const dropdownContainerStyles = css({
 });
 const contentContainerStyles = css({
   display: 'grid',
-  height: '420px',
-  overflow: 'auto'
+  maxHeight: '420px',
+  overflow: 'auto',
+  borderBottom: `2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}`
 });
 const placeholderSmartLinkStyles = css({
   backgroundColor: `var(--ds-surface-raised, ${N0})`,
@@ -41,7 +45,7 @@ const issueCountStyles = css({
 const smartLinkContainerStyles = css({
   paddingLeft: '1px'
 });
-export const JiraIssuesConfigModal = props => {
+export const PlainJiraIssuesConfigModal = props => {
   const {
     datasourceId,
     parameters: initialParameters,
@@ -77,11 +81,17 @@ export const JiraIssuesConfigModal = props => {
   const {
     formatMessage
   } = useIntl();
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
   const selectedJiraSite = useMemo(() => availableSites.find(jiraSite => jiraSite.cloudId === cloudId) || availableSites[0], [availableSites, cloudId]);
   const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   const jqlUrl = selectedJiraSite && jql && `${selectedJiraSite.url}/issues/?jql=${encodeURI(jql)}`;
   const isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading' || resolvedWithNoResults;
   const shouldShowIssueCount = !!totalCount && totalCount !== 1 && currentViewMode === 'issue';
+  useEffect(() => {
+    fireEvent('screen.datasourceModalDialog.viewed', {});
+  }, [fireEvent]);
   useEffect(() => {
     const newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
     setVisibleColumnKeys(newVisibleColumnKeys);
@@ -90,9 +100,12 @@ export const JiraIssuesConfigModal = props => {
     const fetchSiteDisplayNames = async () => {
       const jiraSites = await getAvailableJiraSites();
       setAvailableSites(jiraSites);
+      fireEvent('ui.modal.ready.datasource', {
+        instancesCount: jiraSites.length
+      });
     };
     void fetchSiteDisplayNames();
-  }, []);
+  }, [fireEvent]);
   useEffect(() => {
     if (!cloudId && selectedJiraSite) {
       setCloudId(selectedJiraSite.cloudId);
@@ -159,7 +172,9 @@ export const JiraIssuesConfigModal = props => {
   const handleViewModeChange = selectedMode => {
     setCurrentViewMode(selectedMode);
   };
-  const issueLikeDataTableView = useMemo(() => jsx(IssueLikeDataTableView, {
+  const issueLikeDataTableView = useMemo(() => jsx("div", {
+    css: contentContainerStyles
+  }, jsx(IssueLikeDataTableView, {
     testId: "jira-jql-datasource-table",
     status: status,
     columns: columns,
@@ -169,7 +184,7 @@ export const JiraIssuesConfigModal = props => {
     onNextPage: onNextPage,
     onLoadDatasourceDetails: loadDatasourceDetails,
     onVisibleColumnKeysChange: setVisibleColumnKeys
-  }), [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, responseItems, status, visibleColumnKeys]);
+  })), [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, responseItems, status, visibleColumnKeys]);
   const renderCountModeContent = useCallback(() => {
     const url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'unauthorized') {
@@ -205,9 +220,11 @@ export const JiraIssuesConfigModal = props => {
       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(EmptyState, {
+      return jsx("div", {
+        css: contentContainerStyles
+      }, jsx(EmptyState, {
         testId: `jira-jql-datasource-modal--empty-state`
-      });
+      }));
     }
     const firstIssueUrl = retrieveUrlForSmartCardRender();
     if (responseItems.length === 1 && firstIssueUrl) {
@@ -250,9 +267,7 @@ export const JiraIssuesConfigModal = props => {
     isSearching: status === 'loading',
     parameters: parameters,
     onSearch: onSearch
-  }), jsx("div", {
-    css: contentContainerStyles
-  }, currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent())), jsx(ModalFooter, null, shouldShowIssueCount && jsx("div", {
+  }), currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent()), jsx(ModalFooter, null, shouldShowIssueCount && jsx("div", {
     "data-testid": "jira-jql-datasource-modal-total-issues-count",
     css: issueCountStyles
   }, jsx(FormattedNumber, {
@@ -270,4 +285,19 @@ export const JiraIssuesConfigModal = props => {
     isDisabled: isInsertDisabled,
     testId: 'jira-jql-datasource-modal--insert-button'
   }, jsx(FormattedMessage, modalMessages.insertIssuesButtonText)))));
-};
+};
+const analyticsContextAttributes = {
+  dataProvider: 'jira-issues'
+};
+const analyticsContextData = {
+  packageName,
+  packageVersion,
+  source: 'datasourceConfigModal'
+};
+const contextData = {
+  ...analyticsContextData,
+  attributes: {
+    ...analyticsContextAttributes
+  }
+};
+export const JiraIssuesConfigModal = withAnalyticsContext(contextData)(PlainJiraIssuesConfigModal);

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

@@ -11,20 +11,18 @@ import { N0, N40, N800, N90 } from '@atlaskit/theme/colors';
 import { footerMessages } from './messages';
 import { SyncInfo } from './sync-info';
 const FooterWrapper = styled.div`
+  padding: 0 ${"var(--ds-space-200, 16px)"};
+  box-sizing: border-box;
+  background: ${`var(--ds-background-input, ${N0})`};
+`;
+const TopBorderWrapper = styled.div`
   display: flex;
+  box-sizing: border-box;
   justify-content: space-between;
-  width: 100%;
   padding: ${"var(--ds-space-250, 20px)"} 0;
-  position: sticky;
-  bottom: 0;
-  background: ${`var(--ds-background-input, ${N0})`};
-  border-top-style: solid;
-  border-top-color: ${`var(--ds-background-neutral, ${N40})`};
-  margin-top: -2px;
-  align-self: center;
+  border-top: 2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`};
 `;
 const IssueCounterWrapper = styled.div`
-  margin-left: 10px;
   display: flex;
   align-self: center;
   color: ${`var(--ds-text-accent-gray, ${N800})`};
@@ -55,7 +53,9 @@ export const TableFooter = ({
   // ensure correct positioning since 'justify-content: space-between' is used).
   return onRefresh || showIssueCount ? jsx(FooterWrapper, {
     "data-testid": "table-footer"
-  }, jsx(IssueCounterWrapper, null, showIssueCount && jsx(Heading, {
+  }, jsx(TopBorderWrapper, null, jsx(IssueCounterWrapper, {
+    "data-testid": 'issue-count-wrapper'
+  }, showIssueCount && jsx(Heading, {
     testId: "issue-count",
     level: "h400"
   }, jsx(FormattedNumber, {
@@ -76,5 +76,5 @@ export const TableFooter = ({
     }),
     isDisabled: isLoading,
     testId: "refresh-button"
-  })))) : null;
+  }))))) : null;
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.31.2",
+	"version": "0.32.0",
 	"sideEffects": false
 }

package/dist/esm/analytics/constants.js

@@ -0,0 +1 @@
+export var EVENT_CHANNEL = 'media';

package/dist/esm/analytics/generated/analytics.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/analytics/generated/create-event-payload.js

@@ -0,0 +1,38 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Generates Typescript types for analytics events from analytics.spec.yaml
+ *
+ * @codegen <<SignedSource::819168596ba17484cadda969f8ecf82d>>
+ * @codegenCommand yarn workspace @atlassian/analytics-tooling run analytics:codegen link-datasource
+ */
+
+var createEventPayload = function createEventPayload(eventKey) {
+  for (var _len = arguments.length, _ref = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    _ref[_key - 1] = arguments[_key];
+  }
+  var attributes = _ref[0];
+  var _eventKey$split = eventKey.split('.'),
+    _eventKey$split2 = _slicedToArray(_eventKey$split, 4),
+    eventType = _eventKey$split2[0],
+    actionSubject = _eventKey$split2[1],
+    action = _eventKey$split2[2],
+    actionSubjectId = _eventKey$split2[3];
+  if (eventType === 'screen') {
+    return {
+      eventType: eventType,
+      name: actionSubject,
+      action: 'viewed',
+      attributes: attributes
+    };
+  }
+  return {
+    eventType: eventType,
+    actionSubject: actionSubject,
+    action: action,
+    actionSubjectId: actionSubjectId,
+    attributes: attributes
+  };
+};
+export default createEventPayload;

package/dist/esm/analytics/generated/use-analytics-events.js

@@ -0,0 +1,23 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Generates Typescript types for analytics events from analytics.spec.yaml
+ *
+ * @codegen <<SignedSource::415836762b378b7d79f3aff4ba051c14>>
+ * @codegenCommand yarn workspace @atlassian/analytics-tooling run analytics:codegen link-datasource
+ */
+import { useCallback } from 'react';
+import { useAnalyticsEvents as useAnalyticsNextEvents } from '@atlaskit/analytics-next';
+import { EVENT_CHANNEL } from '../constants';
+import createEventPayload from './create-event-payload';
+export var useAnalyticsEvents = function useAnalyticsEvents() {
+  var _useAnalyticsNextEven = useAnalyticsNextEvents(),
+    createAnalyticsEvent = _useAnalyticsNextEven.createAnalyticsEvent;
+  var fireEvent = useCallback(function () {
+    var event = createAnalyticsEvent(createEventPayload.apply(void 0, arguments));
+    event.fire(EVENT_CHANNEL);
+  }, [createAnalyticsEvent]);
+  return {
+    fireEvent: fireEvent
+  };
+};

package/dist/esm/analytics/index.js

@@ -0,0 +1,5 @@
+export { EVENT_CHANNEL } from './constants';
+import { useAnalyticsEvents } from './generated/use-analytics-events';
+export var useDatasourceAnalyticsEvents = function useDatasourceAnalyticsEvents() {
+  return useAnalyticsEvents();
+};

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

@@ -1,13 +1,22 @@
 /** @jsx jsx */
+import { useEffect } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import EmptyState from '@atlaskit/empty-state';
+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 _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  useEffect(function () {
+    fireEvent('ui.error.shown', {
+      reason: 'access'
+    });
+  }, [fireEvent]);
   return jsx(EmptyState, {
     header: siteName ? formatMessage(loadingErrorMessages.accessRequiredWithSite, {
       siteName: siteName

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

@@ -1,7 +1,9 @@
 /** @jsx jsx */
+import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { LoadingErrorSVG } from './loading-error-svg';
 import { loadingErrorMessages } from './messages';
 var errorContainerStyles = css({
@@ -24,6 +26,13 @@ var errorDescriptionStyles = css({
 });
 export var LoadingError = function LoadingError(_ref) {
   var onRefresh = _ref.onRefresh;
+  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  useEffect(function () {
+    fireEvent('ui.error.shown', {
+      reason: 'network'
+    });
+  }, [fireEvent]);
   return jsx("div", {
     css: errorContainerStyles,
     "data-testid": "jira-jql-datasource--loading-error"

package/dist/esm/ui/common/error-state/modal-loading-error.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { LoadingErrorSVG } from './loading-error-svg';
 import { loadingErrorMessages } from './messages';
 var errorContainerStyles = css({
@@ -24,6 +26,13 @@ var errorDescriptionStyles = css({
 });
 export var ModalLoadingError = function ModalLoadingError(_ref) {
   var url = _ref.url;
+  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  useEffect(function () {
+    fireEvent('ui.error.shown', {
+      reason: 'network'
+    });
+  }, [fireEvent]);
   return jsx("div", {
     css: errorContainerStyles,
     "data-testid": "jira-jql-datasource-modal--loading-error"