@atlaskit/link-datasource 1.7.3 → 1.7.5

package/dist/esm/ui/issue-like-table/column-picker/index.js

@@ -11,6 +11,7 @@ import Button from '@atlaskit/button/standard-button';
 import BoardIcon from '@atlaskit/icon/glyph/board';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { CheckboxOption, createFilter, PopupSelect } from '@atlaskit/select';
+import Tooltip from '@atlaskit/tooltip';
 import { succeedUfoExperience } from '../../../analytics/ufoExperiences';
 import { ConcatenatedMenuList } from './concatenated-menu-list';
 import { columnPickerMessages } from './messages';
@@ -133,19 +134,23 @@ export var ColumnPicker = function ColumnPicker(_ref) {
     target: function target(_ref8) {
       var isOpen = _ref8.isOpen,
         triggerProps = _objectWithoutProperties(_ref8, _excluded);
-      return jsx(Button, _extends({}, triggerProps, {
-        isSelected: isOpen,
-        iconBefore: jsx("div", null, jsx(BoardIcon, {
-          label: "board",
-          size: "medium"
-        }), jsx(ChevronDownIcon, {
-          label: "down",
-          size: "medium"
-        })),
-        spacing: "compact",
-        appearance: "subtle",
-        testId: "column-picker-trigger-button"
-      }));
+      return jsx(Tooltip, {
+        content: intl.formatMessage(columnPickerMessages.tooltip)
+      }, function (tooltipProps) {
+        return jsx(Button, _extends({}, tooltipProps, triggerProps, {
+          isSelected: isOpen,
+          iconBefore: jsx("div", null, jsx(BoardIcon, {
+            label: "board",
+            size: "medium"
+          }), jsx(ChevronDownIcon, {
+            label: "down",
+            size: "medium"
+          })),
+          spacing: "compact",
+          appearance: "subtle",
+          testId: "column-picker-trigger-button"
+        }));
+      });
     }
   });
 };

package/dist/esm/ui/issue-like-table/column-picker/messages.js

@@ -14,5 +14,10 @@ export var columnPickerMessages = defineMessages({
     id: 'linkDataSource.column-picker.search',
     description: 'Search bar message to look for more fields',
     defaultMessage: 'Search for fields'
+  },
+  tooltip: {
+    id: 'linkDataSource.column-picker.tooltip',
+    description: 'Tooltip message for the column picker button',
+    defaultMessage: 'Configure columns'
   }
 });

package/dist/esm/ui/jira-issues-modal/basic-search-input/messages.js

@@ -3,6 +3,6 @@ export var basicSearchInputMessages = defineMessages({
   basicTextSearchLabel: {
     id: 'linkDataSource.jira-issues.configmodal.basicTextSearchPlaceholder',
     description: 'Placeholder text for the search input box',
-    defaultMessage: 'Search'
+    defaultMessage: 'Search for issues by keyword'
   }
 });

package/dist/esm/ui/jira-issues-modal/initial-state-view/index.js

@@ -1,7 +1,9 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { useIntl } from 'react-intl-next';
+import { FormattedMessage } from 'react-intl-next';
+import Lozenge from '@atlaskit/lozenge';
+import { N300 } from '@atlaskit/theme/colors';
 import { InitialStateSVG } from './assets/initial-state-svg';
 import { initialStateViewMessages } from './messages';
 var initialStateViewContainerStyles = css({
@@ -13,19 +15,38 @@ var svgAndTextsWrapperStyles = css({
   textAlign: 'center',
   alignSelf: 'center',
   paddingTop: "var(--ds-space-600, 48px)",
-  paddingBottom: "var(--ds-space-600, 48px)"
+  paddingBottom: "var(--ds-space-600, 48px)",
+  width: '260px'
+});
+var betaTagStyles = css({
+  display: 'flex'
 });
 var searchTitleStyles = css({
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  fontSize: "var(--ds-font-size-200, 16px)",
+  color: "var(--ds-text-subtlest, ".concat(N300, ")"),
+  fontWeight: "var(--ds-font-weight-medium, 500)",
+  fontSize: "var(--ds-font-size-300, 20px)",
   lineHeight: "var(--ds-font-lineHeight-300, 24px)",
   paddingTop: "var(--ds-space-200, 16px)",
-  paddingBottom: "var(--ds-space-100, 8px)"
+  paddingBottom: "var(--ds-space-100, 8px)",
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: "var(--ds-space-100, 8px)"
+});
+var mainTextStyles = css({
+  color: "var(--ds-text-subtlest, ".concat(N300, ")")
 });
+var learnMoreLinkStyles = css({
+  paddingTop: "var(--ds-space-200, 16px)",
+  display: 'inline-block'
+});
+var methodToDescriptionMessage = {
+  basic: initialStateViewMessages.searchDescriptionForBasicSearch,
+  jql: initialStateViewMessages.searchDescriptionForJQLSearch
+};
 var jqlSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-advanced-search-with-jira-query-language-jql/';
-export var InitialStateView = function InitialStateView() {
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
+export var InitialStateView = function InitialStateView(_ref) {
+  var searchMethod = _ref.searchMethod;
   return jsx("div", {
     css: initialStateViewContainerStyles,
     "data-testid": "jlol-datasource-modal--initial-state-view"
@@ -33,8 +54,15 @@ export var InitialStateView = function InitialStateView() {
     css: svgAndTextsWrapperStyles
   }, jsx(InitialStateSVG, null), jsx("div", {
     css: searchTitleStyles
-  }, formatMessage(initialStateViewMessages.searchTitle)), jsx("div", null, formatMessage(initialStateViewMessages.searchDescription)), jsx("a", {
+  }, jsx("div", {
+    css: betaTagStyles
+  }, jsx(Lozenge, {
+    appearance: "new"
+  }, jsx(FormattedMessage, initialStateViewMessages.beta))), jsx(FormattedMessage, initialStateViewMessages.searchTitle)), jsx("div", {
+    css: mainTextStyles
+  }, jsx(FormattedMessage, methodToDescriptionMessage[searchMethod])), searchMethod === 'jql' ? jsx("a", {
     href: jqlSupportDocumentLink,
-    target: "_blank"
-  }, formatMessage(initialStateViewMessages.learnMoreLink))));
+    target: "_blank",
+    css: learnMoreLinkStyles
+  }, jsx(FormattedMessage, initialStateViewMessages.learnMoreLink)) : null));
 };

package/dist/esm/ui/jira-issues-modal/initial-state-view/messages.js

@@ -5,14 +5,24 @@ export var initialStateViewMessages = defineMessages({
     description: 'The initial modal search state title that gives the user some idea about how to get information',
     defaultMessage: 'Search for Jira issues'
   },
-  searchDescription: {
+  beta: {
+    id: 'linkDataSource.modal-initial-state.beta',
+    description: 'Beta lozenge',
+    defaultMessage: 'Beta'
+  },
+  searchDescriptionForBasicSearch: {
+    id: 'linkDataSource.modal-initial-state.searchDescription',
+    description: 'The initial modal search state helper message displayed under the search title when basic search mode is selected',
+    defaultMessage: 'Search by keyword for issues to insert.'
+  },
+  searchDescriptionForJQLSearch: {
     id: 'linkDataSource.modal-initial-state.searchDescription',
-    description: 'The initial modal search state helper message displayed under the search title',
-    defaultMessage: 'Start typing or use JQL to search.'
+    description: 'The initial modal search state helper message displayed under the search title when JQL search mode is selected',
+    defaultMessage: 'Use JQL (Jira Query Language) to search for issues.'
   },
   learnMoreLink: {
     id: 'linkDataSource.modal-initial-state.learnMoreLink',
     description: 'The link that displays under the search description to help people know more about JQL',
-    defaultMessage: 'Learn more about searching with JQL'
+    defaultMessage: 'Learn how to search with JQL'
   }
 });

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

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -19,13 +19,12 @@ var inputContainerStyles = css({
 });
 var DEFAULT_JQL_QUERY = 'created >= -30d order by created DESC';
 var JiraSearchMethodSwitcher = ModeSwitcher;
-export var getInitialSearchMethod = function getInitialSearchMethod(initialJql) {
-  return initialJql ? 'jql' : 'basic';
-};
 export var JiraSearchContainer = function JiraSearchContainer(props) {
   var isSearching = props.isSearching,
     parameters = props.parameters,
-    onSearch = props.onSearch;
+    onSearch = props.onSearch,
+    onSearchMethodChangeCallback = props.onSearchMethodChange,
+    initialSearchMethod = props.initialSearchMethod;
   var _ref = parameters || {},
     cloudId = _ref.cloudId,
     initialJql = _ref.jql;
@@ -35,7 +34,7 @@ export var JiraSearchContainer = function JiraSearchContainer(props) {
     _useState2 = _slicedToArray(_useState, 2),
     basicSearchTerm = _useState2[0],
     setBasicSearchTerm = _useState2[1];
-  var _useState3 = useState(getInitialSearchMethod(initialJql)),
+  var _useState3 = useState(initialSearchMethod),
     _useState4 = _slicedToArray(_useState3, 2),
     currentSearchMethod = _useState4[0],
     setCurrentSearchMethod = _useState4[1];
@@ -53,10 +52,11 @@ export var JiraSearchContainer = function JiraSearchContainer(props) {
     setOrderDirection = _useState10[1];
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
-  var onSearchModeChange = function onSearchModeChange(searchMode) {
-    setCurrentSearchMethod(searchMode);
-  };
-  var handleBasicSearchChange = function handleBasicSearchChange(e) {
+  var onSearchMethodChange = useCallback(function (searchMethod) {
+    onSearchMethodChangeCallback(searchMethod);
+    setCurrentSearchMethod(searchMethod);
+  }, [onSearchMethodChangeCallback]);
+  var handleBasicSearchChange = useCallback(function (e) {
     var rawSearch = e.currentTarget.value;
     setBasicSearchTerm(rawSearch);
     setJql(buildJQL({
@@ -64,8 +64,8 @@ export var JiraSearchContainer = function JiraSearchContainer(props) {
       orderDirection: orderDirection,
       orderKey: orderKey
     }));
-  };
-  var onQueryChange = function onQueryChange(query) {
+  }, [orderDirection, orderKey]);
+  var onQueryChange = useCallback(function (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
     var fragments = (_query$split$map$filt = query === null || query === void 0 ? void 0 : query.split(/(^| )(order by)( |$)/i).map(function (item) {
@@ -81,8 +81,8 @@ export var JiraSearchContainer = function JiraSearchContainer(props) {
       setOrderDirection(order);
     }
     setJql(query);
-  };
-  var handleSearch = function handleSearch() {
+  }, []);
+  var handleSearch = useCallback(function () {
     onSearch({
       jql: jql
     }, currentSearchMethod);
@@ -91,7 +91,7 @@ export var JiraSearchContainer = function JiraSearchContainer(props) {
     } else if (currentSearchMethod === 'jql') {
       fireEvent('ui.jqlEditor.searched', {});
     }
-  };
+  }, [currentSearchMethod, fireEvent, jql, onSearch]);
   var showBasicFilters = useMemo(function () {
     if (getBooleanFF('platform.linking-platform.datasource.show-jlol-basic-filters')) {
       return true;
@@ -112,14 +112,14 @@ export var JiraSearchContainer = function JiraSearchContainer(props) {
     onSearch: handleSearch,
     query: jql
   }), jsx(JiraSearchMethodSwitcher, {
-    onOptionValueChange: onSearchModeChange,
+    onOptionValueChange: onSearchMethodChange,
     selectedOptionValue: currentSearchMethod,
     options: [{
-      label: formatMessage(modeSwitcherMessages.basicTextSearchLabel),
-      value: 'basic'
-    }, {
       label: 'JQL',
       value: 'jql'
+    }, {
+      label: formatMessage(modeSwitcherMessages.basicTextSearchLabel),
+      value: 'basic'
     }]
   }));
 };

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

@@ -113,7 +113,12 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
   // analytics related parameters
   var searchCount = useRef(0);
   var userInteractionActions = useRef(new Set());
-  var lastSearchMethodRef = useRef(null);
+  var initialSearchMethod = 'jql'; // TODO EDM-7688 This where we can add feature that decides if it's basic or jql based on JQL content (Regexp)
+  var _useState11 = useState(initialSearchMethod),
+    _useState12 = _slicedToArray(_useState11, 2),
+    currentSearchMethod = _useState12[0],
+    setCurrentSearchMethod = _useState12[1];
+  var searchMethodSearchedWith = useRef(null);
   var visibleColumnCount = useRef((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
   var parameters = useMemo(function () {
     return !!cloudId ? {
@@ -230,12 +235,12 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
   }, [cloudId, selectedJiraSite]);
   var fireSingleItemViewedEvent = useCallback(function () {
     fireEvent('ui.link.viewed.singleItem', _objectSpread(_objectSpread({}, analyticsPayload), {}, {
-      searchMethod: mapSearchMethod(lastSearchMethodRef.current)
+      searchMethod: mapSearchMethod(searchMethodSearchedWith.current)
     }));
   }, [analyticsPayload, fireEvent]);
   var fireCountViewedEvent = useCallback(function () {
     fireEvent('ui.link.viewed.count', _objectSpread(_objectSpread({}, analyticsPayload), {}, {
-      searchMethod: mapSearchMethod(lastSearchMethodRef.current),
+      searchMethod: mapSearchMethod(searchMethodSearchedWith.current),
       totalItemCount: totalCount || 0
     }));
   }, [analyticsPayload, fireEvent, totalCount]);
@@ -243,7 +248,7 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     if (isDataReady) {
       fireEvent('ui.table.viewed.datasourceConfigModal', _objectSpread(_objectSpread({}, analyticsPayload), {}, {
         totalItemCount: totalCount || 0,
-        searchMethod: mapSearchMethod(lastSearchMethodRef.current),
+        searchMethod: mapSearchMethod(searchMethodSearchedWith.current),
         displayedColumnCount: visibleColumnCount.current
       }));
     }
@@ -274,7 +279,7 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
   useColumnPickerRenderedFailedUfoExperience(status, modalRenderInstanceId);
   var onSearch = useCallback(function (newParameters, searchMethod) {
     searchCount.current++;
-    lastSearchMethodRef.current = searchMethod;
+    searchMethodSearchedWith.current = searchMethod;
     if (jql !== newParameters.jql) {
       userInteractionActions.current.add(DatasourceAction.QUERY_UPDATED);
     }
@@ -320,7 +325,7 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
         displayedColumnCount: visibleColumnCount.current,
         display: getDisplayValue(currentViewMode, totalCount || 0),
         searchCount: searchCount.current,
-        searchMethod: mapSearchMethod(lastSearchMethodRef.current),
+        searchMethod: mapSearchMethod(searchMethodSearchedWith.current),
         actions: Array.from(userInteractionActions.current)
       }),
       eventType: 'ui'
@@ -441,7 +446,9 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
       }, !!jql ? jsx(EmptyState, {
         testId: "jira-jql-datasource-modal--empty-state",
         isLoading: true
-      }) : jsx(InitialStateView, null));
+      }) : jsx(InitialStateView, {
+        searchMethod: currentSearchMethod
+      }));
     }
     var firstIssueUrl = retrieveUrlForSmartCardRender();
     if (responseItems.length === 1 && firstIssueUrl) {
@@ -452,7 +459,7 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
       }));
     }
     return issueLikeDataTableView;
-  }, [status, jqlUrl, resolvedWithNoResults, columns.length, retrieveUrlForSmartCardRender, responseItems.length, issueLikeDataTableView, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName, jql]);
+  }, [status, jqlUrl, resolvedWithNoResults, columns.length, retrieveUrlForSmartCardRender, responseItems.length, issueLikeDataTableView, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName, jql, currentSearchMethod]);
   return jsx(ModalTransition, null, jsx(Modal, {
     testId: 'jira-jql-datasource-modal',
     onClose: onCancel,
@@ -483,7 +490,9 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
   })), jsx(ModalBody, null, jsx(JiraSearchContainer, {
     isSearching: status === 'loading',
     parameters: parameters,
-    onSearch: onSearch
+    onSearch: onSearch,
+    initialSearchMethod: initialSearchMethod,
+    onSearchMethodChange: setCurrentSearchMethod
   }), currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent()), jsx(ModalFooter, null, shouldShowIssueCount && jsx("div", {
     "data-testid": "jira-jql-datasource-modal-total-issues-count",
     css: issueCountStyles

package/dist/types/ui/issue-like-table/column-picker/messages.d.ts

@@ -14,4 +14,9 @@ export declare const columnPickerMessages: {
         description: string;
         defaultMessage: string;
     };
+    tooltip: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
 };

package/dist/types/ui/jira-issues-modal/initial-state-view/index.d.ts

@@ -1,3 +1,8 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-export declare const InitialStateView: () => jsx.JSX.Element;
+import { JiraSearchMethod } from '../../../common/types';
+interface InitialStateViewProps {
+    searchMethod: JiraSearchMethod;
+}
+export declare const InitialStateView: ({ searchMethod }: InitialStateViewProps) => jsx.JSX.Element;
+export {};

package/dist/types/ui/jira-issues-modal/initial-state-view/messages.d.ts

@@ -4,7 +4,17 @@ export declare const initialStateViewMessages: {
         description: string;
         defaultMessage: string;
     };
-    searchDescription: {
+    beta: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    searchDescriptionForBasicSearch: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    searchDescriptionForJQLSearch: {
         id: string;
         description: string;
         defaultMessage: string;

package/dist/types/ui/jira-issues-modal/jira-search-container/index.d.ts

@@ -4,7 +4,8 @@ import { JiraIssueDatasourceParameters, JiraIssueDatasourceParametersQuery } fro
 export interface SearchContainerProps {
     isSearching?: boolean;
     onSearch: (query: JiraIssueDatasourceParametersQuery, searchMethod: JiraSearchMethod) => void;
+    initialSearchMethod: JiraSearchMethod;
+    onSearchMethodChange: (searchMethod: JiraSearchMethod) => void;
     parameters?: JiraIssueDatasourceParameters;
 }
-export declare const getInitialSearchMethod: (initialJql?: string) => JiraSearchMethod;
 export declare const JiraSearchContainer: (props: SearchContainerProps) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/issue-like-table/column-picker/messages.d.ts

@@ -14,4 +14,9 @@ export declare const columnPickerMessages: {
         description: string;
         defaultMessage: string;
     };
+    tooltip: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
 };

package/dist/types-ts4.5/ui/jira-issues-modal/initial-state-view/index.d.ts

@@ -1,3 +1,8 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-export declare const InitialStateView: () => jsx.JSX.Element;
+import { JiraSearchMethod } from '../../../common/types';
+interface InitialStateViewProps {
+    searchMethod: JiraSearchMethod;
+}
+export declare const InitialStateView: ({ searchMethod }: InitialStateViewProps) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/jira-issues-modal/initial-state-view/messages.d.ts

@@ -4,7 +4,17 @@ export declare const initialStateViewMessages: {
         description: string;
         defaultMessage: string;
     };
-    searchDescription: {
+    beta: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    searchDescriptionForBasicSearch: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    searchDescriptionForJQLSearch: {
         id: string;
         description: string;
         defaultMessage: string;

package/dist/types-ts4.5/ui/jira-issues-modal/jira-search-container/index.d.ts

@@ -4,7 +4,8 @@ import { JiraIssueDatasourceParameters, JiraIssueDatasourceParametersQuery } fro
 export interface SearchContainerProps {
     isSearching?: boolean;
     onSearch: (query: JiraIssueDatasourceParametersQuery, searchMethod: JiraSearchMethod) => void;
+    initialSearchMethod: JiraSearchMethod;
+    onSearchMethodChange: (searchMethod: JiraSearchMethod) => void;
     parameters?: JiraIssueDatasourceParameters;
 }
-export declare const getInitialSearchMethod: (initialJql?: string) => JiraSearchMethod;
 export declare const JiraSearchContainer: (props: SearchContainerProps) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.7.3",
+  "version": "1.7.5",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -55,7 +55,7 @@
     "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^0.6.0",
     "@atlaskit/pragmatic-drag-and-drop-react-indicator": "^0.16.0",
     "@atlaskit/select": "^16.7.0",
-    "@atlaskit/smart-card": "^26.34.0",
+    "@atlaskit/smart-card": "^26.35.0",
     "@atlaskit/spinner": "^15.6.0",
     "@atlaskit/tag": "^11.6.0",
     "@atlaskit/textfield": "5.6.8",