@atlaskit/link-datasource 0.14.4

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

@@ -0,0 +1,90 @@
+/** @jsx jsx */
+import React, { useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { BasicSearchInput } from '../basic-search-input';
+import { JiraJQLEditor } from '../jql-editor';
+import { ModeSwitcher } from '../mode-switcher';
+import { buildJQL } from './buildJQL';
+import { modeSwitcherMessages } from './messages';
+const inputContainerStyles = css({
+  alignItems: 'baseline',
+  display: 'flex',
+  gap: "var(--ds-space-250, 20px)",
+  minHeight: '60px'
+});
+export const JiraSearchContainer = props => {
+  const {
+    parameters,
+    onSearch
+  } = props;
+  const {
+    cloudId,
+    value: initialJql
+  } = parameters || {};
+  const {
+    formatMessage
+  } = useIntl();
+  const basicModeValue = 'basic';
+  const jqlModeValue = 'jql';
+  const [basicSearchTerm, setBasicSearchTerm] = useState('');
+  const [currentSearchMode, setCurrentSearchMode] = useState(initialJql ? jqlModeValue : basicModeValue);
+  const [jql, setJql] = useState(initialJql || '');
+  const [orderKey, setOrderKey] = useState();
+  const [orderDirection, setOrderDirection] = useState();
+  const onSearchModeChange = searchMode => {
+    setCurrentSearchMode(searchMode);
+  };
+  const handleBasicSearchChange = e => {
+    const rawSearch = e.currentTarget.value;
+    setBasicSearchTerm(rawSearch);
+    setJql(buildJQL({
+      rawSearch,
+      orderDirection,
+      orderKey
+    }));
+  };
+  const onQueryChange = query => {
+    var _query$split$map$filt, _fragments$at, _fragments$at2, _fragments$at3;
+    // determine if order keys have been set so they can be saved and persisted when changes occur in basic search
+    const fragments = (_query$split$map$filt = query === null || query === void 0 ? void 0 : query.split(/(^| )(order by)( |$)/i).map(item => item.trim()).filter(Boolean)) !== null && _query$split$map$filt !== void 0 ? _query$split$map$filt : [];
+    const hasOrder = ((_fragments$at = fragments.at(-2)) === null || _fragments$at === void 0 ? void 0 : _fragments$at.toLowerCase()) === 'order by';
+    const key = hasOrder ? (_fragments$at2 = fragments.at(-1)) === null || _fragments$at2 === void 0 ? void 0 : _fragments$at2.split(' ').at(-2) : undefined;
+    const order = hasOrder ? (_fragments$at3 = fragments.at(-1)) === null || _fragments$at3 === void 0 ? void 0 : _fragments$at3.split(' ').at(-1) : undefined;
+
+    // TODO: confirm if these are the only order keys we want to preserve - existing whiteboard logic
+    if (key && ['key', 'summary', 'assignee', 'status'].includes(key)) {
+      setOrderKey(key);
+      setOrderDirection(order);
+    }
+    setJql(query);
+  };
+  const handleSearch = () => {
+    onSearch({
+      value: jql,
+      type: 'jql'
+    });
+  };
+  return jsx("div", {
+    css: inputContainerStyles
+  }, currentSearchMode === basicModeValue && jsx(BasicSearchInput, {
+    onChange: handleBasicSearchChange,
+    onSearch: handleSearch,
+    searchTerm: basicSearchTerm
+  }), currentSearchMode === jqlModeValue && jsx(JiraJQLEditor, {
+    cloudId: cloudId || '',
+    onChange: onQueryChange,
+    onSearch: handleSearch,
+    query: jql
+  }), jsx(ModeSwitcher, {
+    onOptionValueChange: onSearchModeChange,
+    selectedOptionValue: currentSearchMode,
+    options: [{
+      label: formatMessage(modeSwitcherMessages.basicTextSearchLabel),
+      value: basicModeValue
+    }, {
+      label: 'JQL',
+      value: jqlModeValue
+    }]
+  }));
+};

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

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const modeSwitcherMessages = defineMessages({
+  basicTextSearchLabel: {
+    id: 'linkDataSource.jira-issues.configmodal.basicModeText',
+    description: 'Display text for basic text search toggle button',
+    defaultMessage: 'Basic'
+  }
+});

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

@@ -0,0 +1,33 @@
+import React, { useEffect, useRef } from 'react';
+import { JQLEditor } from '@atlassianlabs/jql-editor';
+import { useAutocompleteProvider } from '@atlassianlabs/jql-editor-autocomplete-rest';
+import { makeGetJqlAutocompleteData } from '../../../../services/makeGetJqlAutocompleteData';
+import { makeGetJqlSuggestionsData } from '../../../../services/makeGetJqlSuggestionsData';
+export const JiraJQLEditor = props => {
+  const {
+    cloudId,
+    onChange,
+    onSearch,
+    query
+  } = props;
+  const autocompleteProvider = useAutocompleteProvider('link-datasource', makeGetJqlAutocompleteData(cloudId), makeGetJqlSuggestionsData(cloudId));
+
+  // This is an expected (pretty strange imo) way of making sure text field is in focus when rendered
+  const inputRef = useRef({
+    focus: () => {}
+  });
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement(JQLEditor, {
+    analyticsSource: "link-datasource",
+    autocompleteProvider: autocompleteProvider,
+    onSearch: onSearch,
+    onUpdate: onChange,
+    inputRef: inputRef,
+    query: query
+  });
+};

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

@@ -0,0 +1,38 @@
+import { defineMessages } from 'react-intl-next';
+export const modalMessages = defineMessages({
+  cancelButtonText: {
+    id: 'linkDataSource.jira-issues.configmodal.cancelButtonText',
+    description: 'Button text to close the modal with no changes being made',
+    defaultMessage: 'Cancel'
+  },
+  insertIssuesButtonText: {
+    id: 'linkDataSource.jira-issues.configmodal.insertIssuesButtonText',
+    description: 'Button text to insert the displayed content',
+    defaultMessage: 'Insert issues'
+  },
+  insertIssuesTitle: {
+    id: 'linkDataSource.jira-issues.configmodal.insertIssuesTitle',
+    description: 'Title for the Jira Issues Datasource config modal',
+    defaultMessage: 'Insert Jira issues'
+  },
+  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}'
+  },
+  issueViewModeLabel: {
+    id: 'linkDataSource.jira-issues.configmodal.issueViewModeLabel',
+    description: 'Label for toggle to enable a view mode showing issues in a table list view',
+    defaultMessage: 'Issue view'
+  },
+  countViewModeLabel: {
+    id: 'linkDataSource.jira-issues.configmodal.countViewModeLabel',
+    description: 'Label for toggle to enable a view mode showing issues in as a total count',
+    defaultMessage: 'Count view'
+  },
+  issuesCountSmartCardPlaceholderText: {
+    id: 'linkDataSource.jira-issues.configmodal.issues',
+    description: 'Placeholder text that will be placed next to a count of jira issues',
+    defaultMessage: '### Issues'
+  }
+});

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

@@ -0,0 +1,90 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+import { N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
+const modeSwitcherStyles = css({
+  alignItems: 'center',
+  background: `var(--ds-background-neutral, ${N20})`,
+  borderRadius: "var(--ds-space-050, 4px)",
+  boxSizing: 'border-box',
+  display: 'inline-flex',
+  gap: "var(--ds-space-050, 4px)",
+  lineHeight: "var(--ds-space-200, 16px)",
+  padding: "var(--ds-space-075, 6px)",
+  '&:disabled': {
+    opacity: '0.5'
+  }
+});
+const compactModeSwitcherStyles = css({
+  padding: "var(--ds-space-050, 4px)",
+  gap: "var(--ds-space-025, 2px)"
+});
+const modeInputStyles = css({
+  display: 'none'
+});
+const modeSwitcherLabelStyles = css({
+  color: `var(--ds-text-subtlest, ${N700})`,
+  fontSize: "var(--ds-space-150, 12px)",
+  fontWeight: '600',
+  textTransform: 'uppercase',
+  padding: `${"var(--ds-space-050, 4px)"}`,
+  borderRadius: "var(--ds-space-050, 4px)",
+  ':hover': {
+    cursor: 'pointer',
+    backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N30A})`
+  }
+});
+const modeSwitcherLabelSelectedStyles = css({
+  backgroundColor: `var(--ds-background-input-pressed, ${N0})`,
+  borderRadius: "var(--ds-space-050, 4px)",
+  boxShadow: "var(--ds-shadow-overflow, 0px 0px 1px rgba(9, 30, 66, 0.12), 0px 0px 8px rgba(9, 30, 66, 0.16))",
+  ':hover': {
+    cursor: 'pointer',
+    backgroundColor: `var(--ds-background-input-pressed, ${N0})`
+  }
+});
+const modeSwitcherLabelDisabledStyles = css({
+  ':hover': {
+    cursor: 'not-allowed'
+  }
+});
+const compactModeSwitcherLabelStyles = css({
+  padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`
+});
+export const ModeSwitcher = props => {
+  var _options$;
+  const {
+    isCompact,
+    isDisabled,
+    onOptionValueChange,
+    options,
+    selectedOptionValue = (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value
+  } = props;
+  const handleModeChange = event => {
+    onOptionValueChange(event.currentTarget.value);
+  };
+  return options.length > 0 ? jsx("fieldset", {
+    css: [modeSwitcherStyles, isCompact && compactModeSwitcherStyles],
+    "data-testid": "mode-toggle-container",
+    disabled: isDisabled
+  }, options.map(({
+    value,
+    label
+  }) => {
+    const isSelected = value === selectedOptionValue;
+    return jsx("label", {
+      key: value,
+      css: [modeSwitcherLabelStyles, isCompact && compactModeSwitcherLabelStyles, isSelected && modeSwitcherLabelSelectedStyles, isDisabled && modeSwitcherLabelDisabledStyles],
+      "data-testid": `mode-toggle-${value}`
+    }, label, jsx("input", {
+      "aria-checked": isSelected,
+      "aria-disabled": isDisabled,
+      checked: isSelected,
+      css: modeInputStyles,
+      disabled: isDisabled,
+      onChange: handleModeChange,
+      type: "radio",
+      value: value
+    }));
+  })) : null;
+};

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

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { 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 { siteSelectorMessages } from './messages';
+export const JiraSiteSelector = props => {
+  const {
+    availableSites,
+    onSiteSelection,
+    selectedJiraSite,
+    testId
+  } = props;
+  const intl = useIntl();
+  return jsx(DropdownMenu, {
+    spacing: "compact",
+    testId: testId,
+    trigger: ({
+      triggerRef,
+      ...props
+    }) => jsx(Button, _extends({}, props, {
+      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);
+  })));
+};

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

@@ -0,0 +1,13 @@
+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'
+  }
+});

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

@@ -0,0 +1,78 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { Fragment, useEffect, useState } from 'react';
+import { jsx } from '@emotion/react';
+import styled from '@emotion/styled';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button';
+import Heading from '@atlaskit/heading';
+import RefreshIcon from '@atlaskit/icon/glyph/refresh';
+import { N0, N40, N800, N90 } from '@atlaskit/theme/colors';
+import { footerMessages } from './messages';
+import { SyncInfo } from './sync-info';
+const FooterWrapper = styled.div`
+  display: flex;
+  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;
+`;
+const IssueCounterWrapper = styled.div`
+  margin-left: 10px;
+  display: flex;
+  align-self: center;
+  color: ${`var(--ds-text-accent-gray, ${N800})`};
+`;
+const SyncWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${`var(--ds-text-accent-gray, ${N90})`};
+`;
+const SyncTextWrapper = styled.div`
+  margin-right: 5px;
+`;
+export const TableFooter = ({
+  issueCount,
+  onRefresh,
+  isLoading
+}) => {
+  const intl = useIntl();
+  const [lastSyncTime, setLastSyncTime] = useState(new Date());
+  const showIssueCount = issueCount && issueCount > 0 ? true : issueCount === 0 ? !isLoading : false;
+  useEffect(() => {
+    if (isLoading) {
+      setLastSyncTime(new Date());
+    }
+  }, [isLoading]);
+
+  // If only one of the two is passed in, still show the other one (Note: We keep the div encapsulating the one not shown to
+  // ensure correct positioning since 'justify-content: space-between' is used).
+  return onRefresh || showIssueCount ? jsx(FooterWrapper, {
+    "data-testid": "table-footer"
+  }, jsx(IssueCounterWrapper, null, showIssueCount && jsx(Heading, {
+    testId: "issue-count",
+    level: 'h400'
+  }, jsx(FormattedMessage, _extends({}, footerMessages.issueText, {
+    values: {
+      issueCount
+    }
+  })))), jsx(SyncWrapper, null, onRefresh && jsx(Fragment, null, jsx(SyncTextWrapper, {
+    "data-testid": "sync-text"
+  }, isLoading ? jsx(FormattedMessage, footerMessages.loadingText) : jsx(SyncInfo, {
+    lastSyncTime: lastSyncTime
+  })), jsx(Button, {
+    onClick: onRefresh,
+    appearance: "subtle",
+    iconBefore: jsx(RefreshIcon, {
+      label: intl.formatMessage(footerMessages.refreshLabel)
+    }),
+    isDisabled: isLoading,
+    testId: "refresh-button"
+  })))) : null;
+};

package/dist/es2019/ui/jira-issues/table-footer/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl-next';
+export const footerMessages = defineMessages({
+  issueText: {
+    id: 'linkDataSource.jira-issues.table-footer.issue',
+    description: 'Text that appears after issue count number if there is only 1 issue.',
+    defaultMessage: '{issueCount} {issueCount, plural, one {issue} other {issues}}'
+  },
+  loadingText: {
+    id: 'linkDataSource.jira-issues.table-footer.loading',
+    description: 'Text that appears when table is loading.',
+    defaultMessage: 'Loading...'
+  },
+  refreshLabel: {
+    id: 'linkDataSource.jira-issues.table-footer.refresh',
+    description: 'Label for refresh icon',
+    defaultMessage: 'Refresh'
+  }
+});

package/dist/es2019/ui/jira-issues/table-footer/sync-info/index.js

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useEffect, useState } from 'react';
+import { FormattedDate, FormattedMessage, FormattedRelativeTime } from 'react-intl-next';
+import { messages } from './messages';
+const SECONDS_IN_MIN = 60;
+const SECONDS_IN_HR = SECONDS_IN_MIN * 60;
+const SECONDS_IN_DAY = SECONDS_IN_HR * 24;
+const WithUpdatedLabel = formattedDate => {
+  const i18nMessage = formattedDate ? messages.overOneMinuteText : messages.underOneMinuteText;
+  return /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, i18nMessage, {
+    values: {
+      date: formattedDate
+    }
+  }));
+};
+export const SyncInfo = ({
+  lastSyncTime
+}) => {
+  const calculateTimeDiff = useCallback(() => Math.floor((Date.now() - lastSyncTime.getTime()) / 1000), [lastSyncTime]);
+  const [secondsSinceUpdate, setSecondsSinceUpdate] = useState(calculateTimeDiff());
+  const totalDays = Math.floor(secondsSinceUpdate / SECONDS_IN_DAY);
+  const totalHours = Math.floor(secondsSinceUpdate / SECONDS_IN_HR);
+  const totalMinutes = Math.floor(secondsSinceUpdate / SECONDS_IN_MIN);
+  useEffect(() => {
+    setSecondsSinceUpdate(calculateTimeDiff());
+    const interval = setInterval(() => setSecondsSinceUpdate(calculateTimeDiff()), 1000);
+    return () => clearInterval(interval);
+  }, [lastSyncTime, calculateTimeDiff]);
+  if (totalMinutes >= 1 && totalMinutes < 60) {
+    return /*#__PURE__*/React.createElement(FormattedRelativeTime, {
+      value: -totalMinutes,
+      style: "long",
+      unit: "minute"
+    }, WithUpdatedLabel);
+  }
+  if (totalHours >= 1 && totalHours < 24) {
+    return /*#__PURE__*/React.createElement(FormattedRelativeTime, {
+      value: -totalHours,
+      style: "long",
+      unit: "hour"
+    }, WithUpdatedLabel);
+  }
+  if (totalDays >= 1 && totalDays < 8) {
+    return /*#__PURE__*/React.createElement(FormattedRelativeTime, {
+      value: -totalDays,
+      style: "long",
+      unit: "day"
+    }, WithUpdatedLabel);
+  }
+  if (totalDays >= 8) {
+    return /*#__PURE__*/React.createElement(FormattedDate, {
+      year: "numeric",
+      month: "short",
+      day: "2-digit",
+      value: lastSyncTime
+    }, WithUpdatedLabel);
+  }
+  return WithUpdatedLabel();
+};

package/dist/es2019/ui/jira-issues/table-footer/sync-info/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  underOneMinuteText: {
+    id: 'linkDataSource.jira-issues.table-footer.date_formatter.under_one_minute',
+    defaultMessage: 'Synced just now',
+    description: 'A text to indicate the last data fetch time was under a minute.'
+  },
+  overOneMinuteText: {
+    id: 'linkDataSource.jira-issues.table-footer.date_formatter.under_over_minute',
+    defaultMessage: 'Synced {date}',
+    description: 'A text to indicate the last data fetch time was over a minute.'
+  }
+});

package/dist/es2019/ui/jira-issues/tableView.js

@@ -0,0 +1,57 @@
+/** @jsx jsx */
+import { useEffect } from 'react';
+import { css, jsx } from '@emotion/react';
+import Spinner from '@atlaskit/spinner';
+import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
+import { IssueLikeDataTableView } from '../issue-like-table';
+import { TableFooter } from './table-footer';
+const TableViewWrapperStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+  padding: "var(--ds-space-200, 16px)",
+  paddingBottom: 0,
+  boxSizing: 'border-box'
+});
+export const JiraIssuesTableView = ({
+  datasourceId,
+  parameters,
+  visibleColumnKeys,
+  onVisibleColumnKeysChange
+}) => {
+  const {
+    reset,
+    status,
+    onNextPage,
+    responseItems,
+    hasNextPage,
+    columns,
+    defaultVisibleColumnKeys,
+    totalIssueCount
+  } = useDatasourceTableState(datasourceId, parameters);
+  useEffect(() => {
+    if (onVisibleColumnKeysChange && (visibleColumnKeys || []).length === 0 && defaultVisibleColumnKeys.length > 0) {
+      onVisibleColumnKeysChange(defaultVisibleColumnKeys);
+    }
+  }, [visibleColumnKeys, defaultVisibleColumnKeys, onVisibleColumnKeysChange]);
+  return columns.length > 0 ? jsx("div", {
+    css: TableViewWrapperStyles
+  }, jsx(IssueLikeDataTableView, {
+    testId: 'jira-issues-table-view',
+    hasNextPage: hasNextPage,
+    items: responseItems,
+    onNextPage: onNextPage,
+    status: status,
+    columns: columns,
+    visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
+    onVisibleColumnKeysChange: onVisibleColumnKeysChange
+  }), jsx(TableFooter, {
+    issueCount: totalIssueCount,
+    onRefresh: reset,
+    isLoading: status === 'loading'
+  })) : jsx(Spinner, {
+    testId: 'jira-issues-table-view-spinner'
+  });
+};

package/dist/es2019/ui/jira-issues/types.js

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

package/dist/es2019/version.json

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