@atlaskit/link-datasource 4.5.0 → 4.6.1

package/dist/es2019/ui/common/modal/popup-select/index.js

@@ -2,8 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import isEqual from 'lodash/isEqual';
 import { useIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { CheckboxOption, PopupSelect } from '@atlaskit/select';
 import { useDatasourceAnalyticsEvents } from '../../../../analytics';
+import { CheckboxOptionVisualRefreshSllv } from './checkbox-option-visual-refresh-sllv';
 import CustomControl from './control';
 import CustomDropdownIndicator from './dropdownIndicator';
 import PopupFooter from './footer';
@@ -18,6 +20,7 @@ export const FilterPopupSelect = ({
   totalCount = 0,
   status,
   buttonLabel,
+  searchPlaceholder,
   showLoading = false,
   isDisabled = false,
   showHydrating = false,
@@ -137,17 +140,31 @@ export const FilterPopupSelect = ({
     shouldCloseMenuOnTab: false,
     hideSelectedOptions: false,
     isLoading: showLoading,
-    placeholder: formatMessage(asyncPopupSelectMessages.selectPlaceholder)
+    placeholder: searchPlaceholder && fg('platform-linking-visual-refresh-sllv') ? searchPlaceholder : formatMessage(asyncPopupSelectMessages.selectPlaceholder)
     // @ts-ignore - https://product-fabric.atlassian.net/browse/DSP-21000
     ,
     menuListProps: menuListProps,
     components: {
-      Option: CheckboxOption,
+      Option: fg('platform-linking-visual-refresh-sllv') ? CheckboxOptionVisualRefreshSllv : CheckboxOption,
       Control: CustomControl,
       MenuList: CustomMenuList,
       DropdownIndicator: CustomDropdownIndicator,
       LoadingIndicator: undefined // disables the three ... indicator in the searchbox when picker is loading
-    },
+    }
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
+    ,
+    styles: fg('platform-linking-visual-refresh-sllv') ? {
+      container: base => ({
+        ...base,
+        paddingTop: "var(--ds-space-075, 6px)",
+        paddingBottom: 0
+      }),
+      menuList: base => ({
+        ...base,
+        paddingTop: "var(--ds-space-050, 4px)",
+        paddingBottom: 0
+      })
+    } : undefined,
     options: sortedOptions,
     value: selectedOptions,
     filterOption: noFilterOptions,

package/dist/es2019/ui/common/modal/popup-select/menu-list/errorMessage.js

@@ -6,6 +6,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { N500 } from '@atlaskit/theme/colors';
 import { useDatasourceAnalyticsEvents } from '../../../../../analytics';
 import { SpotError } from '../../../../../common/ui/spot/error-state/error';
+import { SpotErrorOld } from '../../../../../common/ui/spot/error-state/error-old';
 import { SEARCH_DEBOUNCE_MS } from '../constants';
 import { asyncPopupSelectMessages } from './messages';
 import CustomSelectMessage from './selectMessage';
@@ -47,15 +48,19 @@ const CustomErrorMessage = ({
     formatMessage: noop
   };
   return /*#__PURE__*/React.createElement(CustomSelectMessage, {
-    icon: fg('bandicoots-update-sllv-icons') ? /*#__PURE__*/React.createElement(SpotError, {
-      size: 'medium',
+    icon: fg('platform-linking-visual-refresh-sllv') ? /*#__PURE__*/React.createElement(SpotError, {
+      size: "large",
       alt: formatMessage(asyncPopupSelectMessages.errorMessage)
+    }) : fg('bandicoots-update-sllv-icons') ? /*#__PURE__*/React.createElement(SpotErrorOld, {
+      size: 'medium',
+      alt: formatMessage(asyncPopupSelectMessages.errorMessageOld)
     }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ErrorIcon, {
       primaryColor: `var(--ds-icon, ${N500})`,
       label: "",
       size: "xlarge"
     })),
-    message: asyncPopupSelectMessages.errorMessage,
+    message: fg('platform-linking-visual-refresh-sllv') ? asyncPopupSelectMessages.errorMessage : asyncPopupSelectMessages.errorMessageOld,
+    description: fg('platform-linking-visual-refresh-sllv') ? asyncPopupSelectMessages.errorDescription : undefined,
     testId: `${filterName}--error-message`
   });
 };

package/dist/es2019/ui/common/modal/popup-select/menu-list/index.compiled.css

@@ -1,3 +1,6 @@
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
-._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}

package/dist/es2019/ui/common/modal/popup-select/menu-list/index.js

@@ -2,6 +2,8 @@
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { cx } from '@compiled/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Flex } from '@atlaskit/primitives/compiled';
 import { components } from '@atlaskit/select';
 import Spinner from '@atlaskit/spinner';
@@ -11,7 +13,8 @@ import CustomNoOptionsMessage from './noOptionsMessage';
 import ShowMoreButton from './showMoreButton';
 const styles = {
   inlineSpinnerStyles: "_ca0q12x7",
-  showMoreButtonBoxStyles: "_19bv12x7 _ca0qu2gc"
+  showMoreButtonBoxStylesOld: "_19bv12x7 _ca0qu2gc",
+  showMoreButtonBoxStyles: "_ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvpxbi"
 };
 const CustomMenuList = ({
   children,
@@ -55,7 +58,7 @@ const CustomMenuList = ({
       });
     }
     return /*#__PURE__*/React.createElement(React.Fragment, null, children, shouldDisplayShowMore && handleShowMore && /*#__PURE__*/React.createElement(Box, {
-      xcss: styles.showMoreButtonBoxStyles
+      xcss: cx(fg('platform-linking-visual-refresh-sllv') ? styles.showMoreButtonBoxStyles : styles.showMoreButtonBoxStylesOld)
     }, /*#__PURE__*/React.createElement(ShowMoreButton, {
       onShowMore: handleShowMore,
       filterName: filterName

package/dist/es2019/ui/common/modal/popup-select/menu-list/messages.js

@@ -7,14 +7,34 @@ export const asyncPopupSelectMessages = defineMessages({
   },
   noOptionsMessage: {
     id: 'linkDataSource.basic-filter.no-options-message',
+    defaultMessage: "We couldn't find anything matching your search",
+    description: 'The text for when no matches are found in dropdown'
+  },
+  noOptionsMessageOld: {
+    id: 'linkDataSource.basic-filter.no-options-message-old',
     defaultMessage: 'No matches found',
     description: 'The text for when no matches are found in dropdown'
   },
+  noOptionsDescription: {
+    id: 'linkDataSource.basic-filter.no-options-description',
+    defaultMessage: 'Try again with a different term.',
+    description: 'The helper text for when no matches are found in dropdown'
+  },
   errorMessage: {
-    id: 'linkDataSource.basic-filter.error-message',
+    id: 'linkDataSource.basic-filter.errorMessage',
+    defaultMessage: 'We ran into an issue trying to load results',
+    description: 'The text for when an error occurs when loading options'
+  },
+  errorMessageOld: {
+    id: 'linkDataSource.basic-filter.errorMessageOld',
     defaultMessage: 'Something went wrong',
     description: 'The text for when an error occurs when loading options'
   },
+  errorDescription: {
+    id: 'linkDataSource.basic-filter.error-description',
+    defaultMessage: 'Check your connection and refresh',
+    description: 'The helper text for when no matches are found in dropdown'
+  },
   showMoreMessage: {
     id: 'linkDataSource.basic-filter.showMoreButton',
     defaultMessage: 'Show more',

package/dist/es2019/ui/common/modal/popup-select/menu-list/noOptionsMessage.js

@@ -38,14 +38,15 @@ const CustomNoOptionsMessage = ({
   };
   return /*#__PURE__*/React.createElement(CustomSelectMessage, {
     icon: fg('bandicoots-update-sllv-icons') ? /*#__PURE__*/React.createElement(SpotSearchNoResult, {
-      size: 'medium',
-      alt: formatMessage(asyncPopupSelectMessages.noOptionsMessage)
+      size: fg('platform-linking-visual-refresh-sllv') ? 'large' : 'medium',
+      alt: formatMessage(fg('platform-linking-visual-refresh-sllv') ? asyncPopupSelectMessages.noOptionsMessage : asyncPopupSelectMessages.noOptionsMessageOld)
     }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(QuestionCircleIcon, {
       primaryColor: `var(--ds-icon, ${N500})`,
       size: "xlarge",
       label: ""
     })),
-    message: asyncPopupSelectMessages.noOptionsMessage,
+    message: fg('platform-linking-visual-refresh-sllv') ? asyncPopupSelectMessages.noOptionsMessage : asyncPopupSelectMessages.noOptionsMessageOld,
+    description: fg('platform-linking-visual-refresh-sllv') ? asyncPopupSelectMessages.noOptionsDescription : undefined,
     testId: `${filterName}--no-options-message`
   });
 };

package/dist/es2019/ui/common/modal/popup-select/menu-list/selectMessage.compiled.css

@@ -1,6 +1,13 @@
+
+._zulppxbi{gap:var(--ds-space-200,1pc)}._19bvoahv{padding-left:var(--ds-space-600,3pc)}
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._4t3i16xz{height:6pc}
 ._4t3ivbgk{height:4pc}
+._ca0q1jfw{padding-top:var(--ds-space-500,40px)}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._n3td1jfw{padding-bottom:var(--ds-space-500,40px)}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
-._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
+._u5f3oahv{padding-right:var(--ds-space-600,3pc)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
+._y3gn1h6o{text-align:center}

package/dist/es2019/ui/common/modal/popup-select/menu-list/selectMessage.js

@@ -4,22 +4,41 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import Heading from '@atlaskit/heading';
-import { Flex, Stack } from '@atlaskit/primitives/compiled';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Flex, Stack, Text } from '@atlaskit/primitives/compiled';
 const styles = {
-  boxStyles: "_4t3ivbgk _otyrpxbi",
-  stackStyles: "_ca0qu2gc _n3tdu2gc _19bvutpp _u5f3utpp"
+  boxStylesOld: "_4t3ivbgk _otyrpxbi",
+  boxStyles: "_4t3i16xz",
+  stackStylesOld: "_ca0qu2gc _n3tdu2gc _19bvutpp _u5f3utpp",
+  stackStyles: "_zulppxbi _ca0q1jfw _n3td1jfw _19bvoahv _u5f3oahv _y3gn1h6o"
 };
 const CustomSelectMessage = ({
   icon,
   message,
+  description,
   testId
 }) => {
+  if (fg('platform-linking-visual-refresh-sllv')) {
+    return /*#__PURE__*/React.createElement(Stack, {
+      xcss: styles.stackStyles,
+      testId: testId,
+      alignInline: "center"
+    }, /*#__PURE__*/React.createElement(Flex, {
+      xcss: styles.boxStyles,
+      alignItems: "center",
+      justifyContent: "center"
+    }, icon), /*#__PURE__*/React.createElement(Heading, {
+      size: "small"
+    }, /*#__PURE__*/React.createElement(FormattedMessage, message)), description && /*#__PURE__*/React.createElement(Text, {
+      size: "medium"
+    }, /*#__PURE__*/React.createElement(FormattedMessage, description)));
+  }
   return /*#__PURE__*/React.createElement(Stack, {
-    xcss: styles.stackStyles,
+    xcss: styles.stackStylesOld,
     testId: testId,
     alignInline: "center"
   }, /*#__PURE__*/React.createElement(Flex, {
-    xcss: styles.boxStyles,
+    xcss: styles.boxStylesOld,
     alignItems: "center",
     justifyContent: "center"
   }, icon), /*#__PURE__*/React.createElement(Heading, {

package/dist/es2019/ui/common/modal/popup-select/menu-list/showMoreButton.js

@@ -1,6 +1,8 @@
 import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl-next';
-import Button from '@atlaskit/button';
+import ButtonOld from '@atlaskit/button';
+import Button from '@atlaskit/button/new';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useDatasourceAnalyticsEvents } from '../../../../../analytics';
 import { asyncPopupSelectMessages } from './messages';
 const ShowMoreButton = ({
@@ -20,7 +22,15 @@ const ShowMoreButton = ({
     });
     onShowMore();
   }, [filterName, fireEvent, onShowMore]);
-  return /*#__PURE__*/React.createElement(Button, {
+  if (fg('platform-linking-visual-refresh-sllv')) {
+    return /*#__PURE__*/React.createElement(Button, {
+      onClick: handleShowMore,
+      appearance: "subtle",
+      testId: `${filterName}--show-more-button`,
+      spacing: "compact"
+    }, formatMessage(asyncPopupSelectMessages.showMoreMessage));
+  }
+  return /*#__PURE__*/React.createElement(ButtonOld, {
     onClick: handleShowMore,
     appearance: "link",
     testId: `${filterName}--show-more-button`

package/dist/es2019/ui/common/modal/popup-select/trigger.compiled.css

@@ -1,6 +1,7 @@
 
 ._y44vkmg5{animation:flickerAnimation 2s infinite}._18m915vq{overflow-y:hidden}
 ._18u01b66{margin-left:var(--ds-space-050,4px)}
+._18u0utpp{margin-left:var(--ds-space-150,9pt)}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1reo15vq{overflow-x:hidden}
 ._kqswh2mm{position:relative}

package/dist/es2019/ui/common/modal/popup-select/trigger.js

@@ -4,13 +4,17 @@ import "./trigger.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback } from 'react';
 import Badge from '@atlaskit/badge';
+import NewButton from '@atlaskit/button/new';
 import Button from '@atlaskit/button/standard-button';
-import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
+import ChevronDownIconOld from '@atlaskit/icon/utility/migration/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Flex } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 const styles = {
   triggerButtonLabelStyles: "_1reo15vq _18m915vq _1bto1l2s",
-  badgeStyles: "_18u01b66"
+  badgeStylesOld: "_18u01b66",
+  badgeStyles: "_18u0utpp"
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
@@ -46,11 +50,10 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
     }),
     testId: `${triggerButtonTestId}--loading-button`
   }, label)), [label, triggerButtonTestId]);
-  const DefaultButton = useCallback(() => /*#__PURE__*/React.createElement(Button, {
-    appearance: "default",
+  const DefaultButton = useCallback(() => fg('platform-linking-visual-refresh-sllv') ? /*#__PURE__*/React.createElement(NewButton, {
     isSelected: isSelected || hasOptions,
     isDisabled: isDisabled,
-    iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    iconAfter: () => /*#__PURE__*/React.createElement(ChevronDownIcon, {
       label: "",
       color: "currentColor"
     }),
@@ -62,6 +65,22 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(Badge, {
     appearance: "primary"
+  }, "+", selectedOptions.length - 1)))) : /*#__PURE__*/React.createElement(Button, {
+    appearance: "default",
+    isSelected: isSelected || hasOptions,
+    isDisabled: isDisabled,
+    iconAfter: /*#__PURE__*/React.createElement(ChevronDownIconOld, {
+      label: "",
+      color: "currentColor"
+    }),
+    testId: `${triggerButtonTestId}--button`
+  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.triggerButtonLabelStyles
+  }, label, firstOption && /*#__PURE__*/React.createElement(React.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/React.createElement(Flex, {
+    xcss: styles.badgeStylesOld,
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Badge, {
+    appearance: "primary"
   }, "+", selectedOptions.length - 1)))), [firstOption, hasOptions, isDisabled, isSelected, label, selectedOptions, triggerButtonTestId]);
 
   /**

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

@@ -7,7 +7,7 @@ import { useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
-import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import Select, { PopupSelect } from '@atlaskit/select';
@@ -63,7 +63,10 @@ export const SiteSelector = props => {
       ...triggerProps
     }) => /*#__PURE__*/React.createElement(Button, _extends({}, triggerProps, {
       isSelected: isOpen,
-      iconAfter: ChevronDownIcon,
+      iconAfter: () => /*#__PURE__*/React.createElement(ChevronDownIcon, {
+        label: "",
+        color: "currentColor"
+      }),
       testId: `${testId}__control`
     }), (selectedSiteOption === null || selectedSiteOption === void 0 ? void 0 : selectedSiteOption.label) || formatMessage(siteSelectorMessages.chooseSite))
   }) : /*#__PURE__*/React.createElement(Select, {

package/dist/es2019/ui/confluence-search-modal/basic-filters/filters/date-range-picker/trigger.js

@@ -1,7 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import NewButton from '@atlaskit/button/new';
 import Button from '@atlaskit/button/standard-button';
-import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
+import ChevronDownIconOld from '@atlaskit/icon/utility/migration/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 export const PopupTrigger = ({
   triggerProps,
   isSelected,
@@ -9,6 +12,17 @@ export const PopupTrigger = ({
   selectedLabel,
   onClick
 }) => {
+  if (fg('platform-linking-visual-refresh-sllv')) {
+    return /*#__PURE__*/React.createElement(NewButton, _extends({}, triggerProps, {
+      testId: 'confluence-search-modal--date-range-button',
+      onClick: onClick,
+      isSelected: isSelected,
+      iconAfter: () => /*#__PURE__*/React.createElement(ChevronDownIcon, {
+        label: "",
+        color: "currentColor"
+      })
+    }), labelPrefix, selectedLabel ? `: ${selectedLabel}` : '');
+  }
   return /*#__PURE__*/React.createElement(Button, _extends({}, triggerProps, {
     testId: 'confluence-search-modal--date-range-button',
     onClick: onClick,
@@ -21,7 +35,7 @@ export const PopupTrigger = ({
         display: 'flex',
         alignItems: 'center'
       }
-    }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    }, /*#__PURE__*/React.createElement(ChevronDownIconOld, {
       LEGACY_size: "medium",
       label: "",
       color: "currentColor"

package/dist/es2019/ui/confluence-search-modal/confluence-search-container/index.compiled.css

@@ -1 +1,2 @@
-._16jlkb7n{flex-grow:1}
+._16jlkb7n{flex-grow:1}
+._1bsb1osq{width:100%}

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

@@ -2,8 +2,10 @@
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useIntl } from 'react-intl-next';
 import { useDebouncedCallback } from 'use-debounce';
-import { Flex } from '@atlaskit/primitives/compiled';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Flex, Text } from '@atlaskit/primitives/compiled';
 import { BasicSearchInput } from '../../common/modal/basic-search-input';
 import { FILTER_SELECTION_DEBOUNCE_MS } from '../../common/modal/popup-select/constants';
 import BasicFilters from '../basic-filters';
@@ -11,6 +13,7 @@ import { useBasicFilterHydration } from '../basic-filters/hooks/useBasicFilterHy
 import { CLOLBasicFilters } from '../basic-filters/types';
 import { searchMessages } from './messages';
 const styles = {
+  basicSearchInputBoxStyles: "_1bsb1osq",
   basicSearchInputContainerStyles: "_16jlkb7n"
 };
 const ConfluenceSearchContainer = ({
@@ -43,6 +46,9 @@ const ConfluenceSearchContainer = ({
       to: lastModifiedTo
     }]
   } : {});
+  const {
+    formatMessage
+  } = useIntl();
   const handleSearchChange = useCallback(e => {
     const rawSearch = e.currentTarget.value;
     setSearchBarSearchString(rawSearch);
@@ -88,7 +94,9 @@ const ConfluenceSearchContainer = ({
       });
     }
   }, [users, status, filterSelections.lastModified]);
-  return /*#__PURE__*/React.createElement(Flex, {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.basicSearchInputBoxStyles
+  }, /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center",
     xcss: styles.basicSearchInputContainerStyles
   }, /*#__PURE__*/React.createElement(BasicSearchInput, {
@@ -98,12 +106,17 @@ const ConfluenceSearchContainer = ({
     onSearch: onSearch,
     searchTerm: searchBarSearchString,
     placeholder: searchMessages.searchLabel,
+    ariaLabel: searchMessages.searchLabel,
     fullWidth: false
   }), /*#__PURE__*/React.createElement(BasicFilters, {
     cloudId: cloudId,
     selections: filterSelections,
     onChange: handleBasicFilterSelectionChange,
     isHydrating: status === 'loading'
-  }));
+  })), fg('platform-linking-visual-refresh-sllv') && /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    color: "color.text.subtlest",
+    testId: "confluence-search-placeholder"
+  }, formatMessage(searchMessages.searchLabel)));
 };
 export default ConfluenceSearchContainer;

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import isEqual from 'lodash/isEqual';
 import { useIntl } from 'react-intl-next';
 import { useDebouncedCallback } from 'use-debounce';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { FilterPopupSelect } from '../../../../common/modal/popup-select';
 import { SEARCH_DEBOUNCE_MS } from '../../../../common/modal/popup-select/constants';
 import { useFilterOptions } from '../../hooks/useFilterOptions';
@@ -85,7 +86,7 @@ const AsyncPopupSelect = ({
   const filterName = `jlol-basic-filter-${filterType}`;
   const shouldShowFooter = (status === 'resolved' || isLoadingMore) && filterOptionsLength > 0; // footer should not disappear when there is an inline spinner for loading more data
   const shouldDisplayShowMoreButton = status === 'resolved' && !!pageCursor && !areAllResultsLoaded;
-  const triggerButtonLabel = formatMessage(asyncPopupSelectMessages[`${filterType}Label`]);
+  const triggerButtonLabel = formatMessage(!fg('platform-linking-visual-refresh-sllv') && filterType === 'type' ? asyncPopupSelectMessages.typeLabelOld : asyncPopupSelectMessages[`${filterType}Label`]);
   return /*#__PURE__*/React.createElement(FilterPopupSelect, {
     filterName: filterName,
     status: status,
@@ -97,6 +98,7 @@ const AsyncPopupSelect = ({
     selectedOptions: selectedOptions,
     options: popupSelectOptions,
     buttonLabel: triggerButtonLabel,
+    searchPlaceholder: fg('platform-linking-visual-refresh-sllv') ? formatMessage(asyncPopupSelectMessages[`${filterType}SearchPlaceholder`]) : undefined,
     onInputChange: handleInputChange,
     onSelectionChange: handleOptionSelection,
     onMenuOpen: handleMenuOpen,

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.js

@@ -13,11 +13,36 @@ export const asyncPopupSelectMessages = defineMessages({
   typeLabel: {
     id: 'linkDataSource.basic-filter.type.label',
     description: 'Label to be displayed for type filter dropdown button.',
+    defaultMessage: 'Work type'
+  },
+  typeLabelOld: {
+    id: 'linkDataSource.basic-filter.type.labelOld',
+    description: 'Label to be displayed for type filter dropdown button.',
     defaultMessage: 'Type'
   },
   assigneeLabel: {
     id: 'linkDataSource.basic-filter.assignee.label',
     description: 'Label to be displayed for assignee filter dropdown button.',
     defaultMessage: 'Assignee'
+  },
+  projectSearchPlaceholder: {
+    id: 'linkDataSource.basic-filter.project.searchPlaceholder',
+    description: 'Placeholder to be displayed for project filter dropdown search input.',
+    defaultMessage: 'Search for projects'
+  },
+  statusSearchPlaceholder: {
+    id: 'linkDataSource.basic-filter.status.searchPlaceholder',
+    description: 'Placeholder to be displayed for status filter dropdown search input.',
+    defaultMessage: 'Search for status'
+  },
+  typeSearchPlaceholder: {
+    id: 'linkDataSource.basic-filter.type.searchPlaceholder',
+    description: 'Placeholder to be displayed for work type filter dropdown search input.',
+    defaultMessage: 'Search for work type'
+  },
+  assigneeSearchPlaceholder: {
+    id: 'linkDataSource.basic-filter.assignee.searchPlaceholder',
+    description: 'Placeholder to be displayed for assignee filter dropdown search input.',
+    defaultMessage: 'Search for assignee'
   }
 });

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

@@ -1,4 +1,7 @@
 ._16jlkb7n{flex-grow:1}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
 ._1tket9kd{min-height:72px}
-._4cvr1q9y{align-items:baseline}
+._4cvr1q9y{align-items:baseline}
+._4cvr1y6m{align-items:flex-start}

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

@@ -4,7 +4,8 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useDebouncedCallback } from 'use-debounce';
-import { Flex } from '@atlaskit/primitives/compiled';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Flex, Text } from '@atlaskit/primitives/compiled';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { BasicSearchInput } from '../../common/modal/basic-search-input';
 import { basicSearchInputMessages } from '../../common/modal/basic-search-input/messages';
@@ -17,8 +18,11 @@ import { JiraJQLEditor } from '../jql-editor';
 import { buildJQL } from './buildJQL';
 import { modeSwitcherMessages } from './messages';
 const styles = {
+  basicSearchInputBoxStyles: "_1bsb1osq",
   basicSearchInputContainerStyles: "_16jlkb7n",
-  inputContainerStyles: "_4cvr1q9y _1e0c1txw _1tket9kd"
+  inputContainerStylesOld: "_4cvr1q9y _1e0c1txw _1tket9kd",
+  inputContainerStyles: "_4cvr1y6m _1e0c1txw _1tket9kd",
+  modeSwitcherContainerStyles: "_19pk1b66"
 };
 export const DEFAULT_JQL_QUERY = 'ORDER BY created DESC';
 export const ALLOWED_ORDER_BY_KEYS = ['key', 'summary', 'assignee', 'status', 'created'];
@@ -171,9 +175,51 @@ export const JiraSearchContainer = props => {
       setCloudId(currentCloudId);
     }
   }, [currentCloudId, cloudId, setSearchBarJql]);
+  if (fg('platform-linking-visual-refresh-sllv')) {
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "jira-search-container",
+      className: ax([styles.inputContainerStyles])
+    }, currentSearchMethod === 'basic' && /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.basicSearchInputBoxStyles
+    }, /*#__PURE__*/React.createElement(Flex, {
+      alignItems: "center",
+      xcss: styles.basicSearchInputContainerStyles
+    }, /*#__PURE__*/React.createElement(BasicSearchInput, {
+      isSearching: isSearching,
+      onChange: handleBasicSearchChange,
+      onSearch: handleSearch,
+      searchTerm: basicSearchTerm,
+      placeholder: basicSearchInputMessages.basicTextSearchLabel,
+      ariaLabel: basicSearchInputMessages.basicTextSearchLabel,
+      testId: "jira-datasource-modal",
+      fullWidth: false
+    }), /*#__PURE__*/React.createElement(BasicFilters, {
+      jql: searchBarJql,
+      site: site,
+      onChange: handleBasicFilterSelectionChange,
+      selections: filterSelections,
+      isJQLHydrating: basicFilterHydrationStatus === 'loading'
+    })), currentSearchMethod === 'basic' && /*#__PURE__*/React.createElement(Text, {
+      size: "small",
+      color: "color.text.subtlest",
+      testId: "jira-search-placeholder"
+    }, formatMessage(basicSearchInputMessages.basicTextSearchLabel))), currentSearchMethod === 'jql' && /*#__PURE__*/React.createElement(JiraJQLEditor, {
+      cloudId: cloudId || '',
+      isSearching: isSearching,
+      onChange: onQueryChange,
+      onSearch: handleSearch,
+      query: searchBarJql
+    }), /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.modeSwitcherContainerStyles
+    }, /*#__PURE__*/React.createElement(ModeSwitcher, {
+      onOptionValueChange: onSearchMethodChange,
+      selectedOptionValue: currentSearchMethod,
+      options: modeSwitcherOptions
+    })));
+  }
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "jira-search-container",
-    className: ax([styles.inputContainerStyles])
+    className: ax([styles.inputContainerStylesOld])
   }, currentSearchMethod === 'basic' && /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center",
     xcss: styles.basicSearchInputContainerStyles
@@ -183,6 +229,7 @@ export const JiraSearchContainer = props => {
     onSearch: handleSearch,
     searchTerm: basicSearchTerm,
     placeholder: basicSearchInputMessages.basicTextSearchLabel,
+    ariaLabel: basicSearchInputMessages.basicTextSearchLabel,
     testId: "jira-datasource-modal",
     fullWidth: false
   }), /*#__PURE__*/React.createElement(BasicFilters, {

package/dist/esm/common/ui/spot/error-state/error/assets/dark.svg

@@ -1,5 +1,8 @@
-<svg width="275" height="275" viewBox="0 0 275 275" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M55.99 215.63L56.08 215.81H218.91L219.01 215.63L137.5 64.9902L55.99 215.63Z" fill="#4B4D51"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M134.115 173.95V118.94H141.445V173.95H134.115Z" fill="#101214"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M136.432 183.039C136.965 182.943 137.474 182.915 137.91 182.915C138.371 182.915 138.828 182.947 139.287 183.018L139.304 183.02L139.321 183.023C142.228 183.498 144.648 185.521 145.234 188.753C145.337 189.301 145.365 189.827 145.365 190.26C145.365 190.596 145.348 190.974 145.295 191.375V191.436L145.237 191.758C144.659 194.981 142.245 197.029 139.321 197.507L139.304 197.51L139.287 197.512C138.828 197.583 138.371 197.615 137.91 197.615C137.471 197.615 136.958 197.586 136.42 197.489C133.551 196.992 131.143 194.987 130.557 191.769C130.455 191.23 130.425 190.726 130.425 190.27C130.425 189.819 130.454 189.299 130.559 188.749C131.152 185.581 133.51 183.531 136.432 183.039ZM137.755 190.251C137.755 190.257 137.755 190.263 137.755 190.27C137.755 190.273 137.755 190.276 137.755 190.279C137.758 190.28 137.762 190.28 137.766 190.28C137.8 190.283 137.848 190.285 137.91 190.285C137.957 190.285 137.998 190.284 138.035 190.282C138.035 190.275 138.035 190.268 138.035 190.26C138.035 190.256 138.035 190.252 138.035 190.248C137.998 190.246 137.957 190.245 137.91 190.245C137.848 190.245 137.8 190.247 137.766 190.25C137.762 190.25 137.758 190.251 137.755 190.251Z" fill="#101214"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 275 275">
+	<path fill="#4B4D51" d="M191.87 88.67c-2.28-4.36-5.07-8.68-8.3-12.86-3.27-4.23-6.8-8.07-10.5-11.4-21.6-19.51-49.11-22.5-75.49-8.19a93.066 93.066 0 0 0-12.54 8.22 94.563 94.563 0 0 0-11.53 10.51c-20.39 22.01-24.43 49.35-11.09 75.03 2.3 4.42 5.12 8.81 8.39 13.04 3.23 4.18 6.72 7.96 10.37 11.26 12.5 11.29 27.05 17.01 42.25 17.01 10.9 0 22.13-2.94 33.18-8.88 4.46-2.4 8.86-5.26 13.07-8.52 4.06-3.14 7.79-6.53 11.11-10.07 20.52-21.96 24.56-49.35 11.08-75.14v-.01Zm-30.56 74.37c-3.61 2.79-7.37 5.25-11.17 7.29-21.38 11.48-42.6 9.27-59.76-6.23-3.05-2.76-5.98-5.94-8.72-9.48-2.77-3.59-5.16-7.28-7.08-10.97-10.67-20.53-7.48-41.63 8.98-59.4 2.93-3.17 6.25-6.19 9.86-8.98 3.47-2.69 7.07-5.04 10.7-7.01 8.96-4.86 17.91-7.28 26.57-7.28 11.89 0 23.21 4.56 33.2 13.59 3.09 2.79 6.07 6.03 8.84 9.62 2.73 3.54 5.09 7.18 6.99 10.82 10.77 20.62 7.6 41.73-8.95 59.44-2.81 3.01-6 5.9-9.48 8.59h.02Z"/>
+	<path fill="#4B4D51" d="M179.96 171c-3.54-4.93-7.34-4.9-11.05-2.03-3.48 2.69-4.41 6.33-.7 11.12l4.24 5.48 11.75-9.09-4.24-5.48Z"/>
+	<path fill="#4B4D51" d="m187.155 174.199-17.642 13.64 33.152 42.878 17.642-13.64-33.152-42.878Z"/>
+	<path fill="#7E8188" d="m184.32 176.391-11.97 9.255 11.243 14.54 11.969-9.254-11.242-14.541Z"/>
+	<path fill="#4B4D51" fill-rule="evenodd" d="m157.715 95.826-53.98 53.979-7.07-7.071 53.979-53.98 7.071 7.072Z" clip-rule="evenodd"/>
+	<path fill="#4B4D51" fill-rule="evenodd" d="m150.644 149.805-53.98-53.98 7.071-7.07 53.98 53.979-7.071 7.071Z" clip-rule="evenodd"/>
 </svg>