@atlaskit/link-datasource 3.19.1 → 3.20.0

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

@@ -0,0 +1,90 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+import { B400, B50, N0, N20, N30, R400 } from '@atlaskit/theme/colors';
+import { layers } from '@atlaskit/theme/constants';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const PopupComponentContainerOld = styled.div({
+  boxSizing: 'border-box',
+  display: 'block',
+  flex: '1 1 auto',
+  overflow: 'visible',
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  background: `var(--ds-background-input, ${N0})`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  ':focus': {
+    outline: 'none'
+  },
+  boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const CustomDropdownOld = styled.div({
+  width: '340px',
+  background: `var(--ds-background-input, ${N0})`,
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))",
+  zIndex: layers.modal()
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+export const CustomDropdownItemOld = styled.div(props => ({
+  height: '36px',
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  paddingLeft: props.isSelected ? '15px' : '16px',
+  boxSizing: 'border-box',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  color: props.isSelected ? `var(--ds-text-selected, ${B400})` : 'inherit',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  background: props.isSelected ? `var(--ds-background-accent-blue-subtlest, ${B50})` : 'transparent',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  borderLeft: props.isSelected ? `2px solid ${`var(--ds-text-selected, ${B400})`}` : 'none',
+  '&:hover': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    background: props.isSelected ? `var(--ds-background-accent-blue-subtlest, ${B50})` : `var(--ds-background-input-hovered, ${N20})`,
+    cursor: 'default'
+  }
+}));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const CustomDateWrapperOld = styled.div({
+  padding: "var(--ds-space-150, 12px)",
+  boxSizing: 'border-box'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const DatePickersWrapperOld = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const SelectDateRangeButtonOld = styled.button({
+  background: `var(--ds-background-accent-gray-subtler, ${N20})`,
+  border: 'none',
+  font: 'inherit',
+  width: '70px',
+  height: '40px',
+  marginTop: "var(--ds-space-150, 12px)",
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  '&:hover': {
+    background: `var(--ds-background-accent-gray-subtler, ${N30})`,
+    cursor: 'pointer'
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const DateRangeErrorMessageOld = styled.div({
+  display: 'flex',
+  marginTop: "var(--ds-space-050, 2px)",
+  gap: "var(--ds-space-025, 2px)",
+  paddingInlineStart: "var(--ds-space-025, 2px)",
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  color: `var(--ds-text-danger, ${R400})`,
+  alignItems: 'center'
+});

package/dist/es2019/ui/confluence-search-modal/basic-filters/filters/date-range-picker/styled.compiled.css

@@ -0,0 +1,17 @@
+
+._1kl71ys0{border-left:2px solid var(--ds-text-selected,#0052cc)}
+._1kl7glyw{border-left:none}._19bvo7ao{padding-left:15px}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._1bah1y6m{justify-content:flex-start}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4t3i14no{height:36px}
+._bfhk18uv{background-color:initial}
+._bfhk1hdx{background-color:var(--ds-background-accent-blue-subtlest,#deebff)}
+._syaz1kw7{color:inherit}
+._syaz1ldt{color:var(--ds-text-selected,#0052cc)}
+._vchhusvi{box-sizing:border-box}
+._d0al73ad:hover{cursor:default}
+._irr31hdx:hover{background-color:var(--ds-background-accent-blue-subtlest,#deebff)}
+._irr31qz1:hover{background-color:var(--ds-background-input-hovered,#f4f5f7)}

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

@@ -1,90 +1,12 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-import { B400, B50, N0, N20, N30, R400 } from '@atlaskit/theme/colors';
-import { layers } from '@atlaskit/theme/constants';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const PopupComponentContainer = styled.div({
-  boxSizing: 'border-box',
-  display: 'block',
-  flex: '1 1 auto',
-  overflow: 'visible',
-  borderRadius: "var(--ds-border-radius-100, 4px)",
-  background: `var(--ds-background-input, ${N0})`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':focus': {
-    outline: 'none'
-  },
-  boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const CustomDropdown = styled.div({
-  width: '340px',
-  background: `var(--ds-background-input, ${N0})`,
-  borderRadius: "var(--ds-border-radius-100, 4px)",
-  boxShadow: "var(--ds-shadow-overlay, 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20))",
-  zIndex: layers.modal()
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
-export const CustomDropdownItem = styled.div(props => ({
-  height: '36px',
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'flex-start',
-  alignItems: 'center',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  paddingLeft: props.isSelected ? '15px' : '16px',
-  boxSizing: 'border-box',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  color: props.isSelected ? `var(--ds-text-selected, ${B400})` : 'inherit',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  background: props.isSelected ? `var(--ds-background-accent-blue-subtlest, ${B50})` : 'transparent',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderLeft: props.isSelected ? `2px solid ${`var(--ds-text-selected, ${B400})`}` : 'none',
-  '&:hover': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    background: props.isSelected ? `var(--ds-background-accent-blue-subtlest, ${B50})` : `var(--ds-background-input-hovered, ${N20})`,
-    cursor: 'default'
-  }
-}));
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const CustomDateWrapper = styled.div({
-  padding: "var(--ds-space-150, 12px)",
-  boxSizing: 'border-box'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const DatePickersWrapper = styled.div({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  width: '100%'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const SelectDateRangeButton = styled.button({
-  background: `var(--ds-background-accent-gray-subtler, ${N20})`,
-  border: 'none',
-  font: 'inherit',
-  width: '70px',
-  height: '40px',
-  marginTop: "var(--ds-space-150, 12px)",
-  borderRadius: "var(--ds-border-radius-100, 4px)",
-  '&:hover': {
-    background: `var(--ds-background-accent-gray-subtler, ${N30})`,
-    cursor: 'pointer'
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const DateRangeErrorMessage = styled.div({
-  display: 'flex',
-  marginTop: "var(--ds-space-050, 2px)",
-  gap: "var(--ds-space-025, 2px)",
-  paddingInlineStart: "var(--ds-space-025, 2px)",
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  color: `var(--ds-text-danger, ${R400})`,
-  alignItems: 'center'
-});
+/* styled.tsx generated by @compiled/babel-plugin v0.36.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./styled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { B400, B50, N20 } from "@atlaskit/theme/colors";
+const customDropdownItemBaseStyles = null;
+const customDropdownItemSelectedStyles = null;
+const customDropdownItemNotSelectedStyles = null;
+export const CustomDropdownItem = props => /*#__PURE__*/React.createElement("div", _extends({}, props, {
+  className: ax(["_4t3i14no _1bsb1osq _1e0c1txw _1bah1y6m _4cvr1h6o _vchhusvi _d0al73ad", props.isSelected ? "_1kl71ys0 _19bvo7ao _syaz1ldt _bfhk1hdx _irr31hdx" : "_1kl7glyw _19bvpxbi _syaz1kw7 _bfhk18uv _irr31qz1"])
+}), props.children);

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

@@ -0,0 +1 @@
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}

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

@@ -1,11 +1,16 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { Flex, xcss } from '@atlaskit/primitives';
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Flex } from '@atlaskit/primitives/compiled';
+import BasicFilterContainerOld from './basic-filters-old';
 import { DateRangePicker } from './filters/date-range-picker';
 import EditedOrCreatedByFilter from './filters/edited-or-created-by';
 import { CLOLBasicFilters } from './types';
-const basicFilterContainerStyles = xcss({
-  paddingLeft: 'space.100'
-});
+const styles = {
+  basicFilterContainerStyles: "_19bvu2gc"
+};
 const BasicFilterContainer = ({
   cloudId,
   onChange,
@@ -26,7 +31,7 @@ const BasicFilterContainer = ({
     });
   };
   return /*#__PURE__*/React.createElement(Flex, {
-    xcss: basicFilterContainerStyles,
+    xcss: styles.basicFilterContainerStyles,
     gap: "space.100",
     testId: "clol-basic-filter-container"
   }, /*#__PURE__*/React.createElement(EditedOrCreatedByFilter, {
@@ -40,4 +45,11 @@ const BasicFilterContainer = ({
     filterName: `clol-basic-filter-${CLOLBasicFilters.lastModified}`
   }));
 };
-export default BasicFilterContainer;
+const BasicFilterContainerExported = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(BasicFilterContainer, props);
+  } else {
+    return /*#__PURE__*/React.createElement(BasicFilterContainerOld, props);
+  }
+};
+export default BasicFilterContainerExported;

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

@@ -0,0 +1,106 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import { Flex, xcss } from '@atlaskit/primitives';
+import { BasicSearchInput } from '../../common/modal/basic-search-input';
+import { FILTER_SELECTION_DEBOUNCE_MS } from '../../common/modal/popup-select/constants';
+import BasicFilters from '../basic-filters';
+import { useBasicFilterHydration } from '../basic-filters/hooks/useBasicFilterHydration';
+import { CLOLBasicFilters } from '../basic-filters/types';
+import { searchMessages } from './messages';
+const basicSearchInputContainerStyles = xcss({
+  flexGrow: 1
+});
+const ConfluenceSearchContainer = ({
+  parameters: {
+    cloudId,
+    searchString: initialSearchValue,
+    lastModified,
+    lastModifiedFrom,
+    lastModifiedTo,
+    contributorAccountIds
+  },
+  isSearching,
+  onSearch
+}) => {
+  const {
+    hydrateUsersFromAccountIds,
+    users,
+    status,
+    reset: resetHydrationHook
+  } = useBasicFilterHydration();
+  const currentCloudId = useRef(cloudId);
+  const [initialContributorAccountIds, setInitialContributorAccountIds] = useState(contributorAccountIds !== null && contributorAccountIds !== void 0 ? contributorAccountIds : []);
+  const [searchBarSearchString, setSearchBarSearchString] = useState(initialSearchValue !== null && initialSearchValue !== void 0 ? initialSearchValue : '');
+  const [filterSelections, setFilterSelections] = useState(() => lastModified ? {
+    lastModified: [{
+      optionType: 'dateRange',
+      label: lastModified,
+      value: lastModified,
+      from: lastModifiedFrom,
+      to: lastModifiedTo
+    }]
+  } : {});
+  const handleSearchChange = useCallback(e => {
+    const rawSearch = e.currentTarget.value;
+    setSearchBarSearchString(rawSearch);
+  }, []);
+  const [debouncedBasicFilterSelectionChange] = useDebouncedCallback(filterValues => {
+    onSearch(searchBarSearchString, filterValues);
+  }, FILTER_SELECTION_DEBOUNCE_MS);
+  const handleBasicFilterSelectionChange = useCallback((filterType, options) => {
+    const updatedSelection = {
+      ...filterSelections,
+      [filterType]: Array.isArray(options) ? options : [options]
+    };
+    setFilterSelections(updatedSelection);
+    if (filterType === CLOLBasicFilters.lastModified) {
+      onSearch(searchBarSearchString, updatedSelection);
+    } else {
+      debouncedBasicFilterSelectionChange(updatedSelection);
+    }
+  }, [debouncedBasicFilterSelectionChange, filterSelections, onSearch, searchBarSearchString]);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6827913
+  useEffect(() => {
+    if (currentCloudId.current !== cloudId) {
+      setInitialContributorAccountIds([]);
+      resetHydrationHook();
+      setSearchBarSearchString('');
+      setFilterSelections({});
+      currentCloudId.current = cloudId;
+    }
+  }, [cloudId, resetHydrationHook]);
+  useEffect(() => {
+    const hasAccountIds = (initialContributorAccountIds === null || initialContributorAccountIds === void 0 ? void 0 : initialContributorAccountIds.length) > 0;
+    if (hasAccountIds && status === 'empty') {
+      hydrateUsersFromAccountIds(initialContributorAccountIds);
+    }
+  }, [hydrateUsersFromAccountIds, initialContributorAccountIds, status]);
+  useEffect(() => {
+    if (status === 'resolved') {
+      setFilterSelections({
+        lastModified: filterSelections.lastModified,
+        editedOrCreatedBy: users
+      });
+    }
+  }, [users, status, filterSelections.lastModified]);
+  return /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center",
+    xcss: basicSearchInputContainerStyles
+  }, /*#__PURE__*/React.createElement(BasicSearchInput, {
+    testId: "confluence-search-datasource-modal",
+    isSearching: isSearching,
+    onChange: handleSearchChange,
+    onSearch: onSearch,
+    searchTerm: searchBarSearchString,
+    placeholder: searchMessages.searchLabel,
+    fullWidth: false
+  }), /*#__PURE__*/React.createElement(BasicFilters, {
+    cloudId: cloudId,
+    selections: filterSelections,
+    onChange: handleBasicFilterSelectionChange,
+    isHydrating: status === 'loading'
+  }));
+};
+export default ConfluenceSearchContainer;

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

@@ -0,0 +1 @@
+._16jlkb7n{flex-grow:1}

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

@@ -1,15 +1,20 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
-import { Flex, xcss } from '@atlaskit/primitives';
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Flex } 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';
 import { useBasicFilterHydration } from '../basic-filters/hooks/useBasicFilterHydration';
 import { CLOLBasicFilters } from '../basic-filters/types';
+import ConfluenceSearchContainerOld from './confluence-search-container-old';
 import { searchMessages } from './messages';
-const basicSearchInputContainerStyles = xcss({
-  flexGrow: 1
-});
+const styles = {
+  basicSearchInputContainerStyles: "_16jlkb7n"
+};
 const ConfluenceSearchContainer = ({
   parameters: {
     cloudId,
@@ -87,7 +92,7 @@ const ConfluenceSearchContainer = ({
   }, [users, status, filterSelections.lastModified]);
   return /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center",
-    xcss: basicSearchInputContainerStyles
+    xcss: styles.basicSearchInputContainerStyles
   }, /*#__PURE__*/React.createElement(BasicSearchInput, {
     testId: "confluence-search-datasource-modal",
     isSearching: isSearching,
@@ -103,4 +108,11 @@ const ConfluenceSearchContainer = ({
     isHydrating: status === 'loading'
   }));
 };
-export default ConfluenceSearchContainer;
+const ConfluenceSearchContainerExported = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(ConfluenceSearchContainer, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ConfluenceSearchContainerOld, props);
+  }
+};
+export default ConfluenceSearchContainerExported;

package/dist/es2019/ui/confluence-search-modal/modal/{confluence-search-initial-state-svg.js → confluence-search-initial-state-svg-old.js}

@@ -1,5 +1,7 @@
 import React from 'react';
-export const ConfluenceSearchInitialStateSVG = () => /*#__PURE__*/React.createElement("svg", {
+
+// TODO Delete when cleaning fg('bandicoots-update-sllv-icons')
+export const ConfluenceSearchInitialStateSVGOld = () => /*#__PURE__*/React.createElement("svg", {
   width: "188",
   height: "112",
   viewBox: "0 0 188 112",

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

@@ -0,0 +1,3 @@
+._1e0c1txw{display:flex}
+._1tket9kd{min-height:72px}
+._4cvr1q9y{align-items:baseline}

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

@@ -1,19 +1,17 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { Fragment, useCallback, useEffect, useMemo, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { FormattedMessage } from 'react-intl-next';
+import React, { Fragment, useCallback, useEffect, useMemo, useRef } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl-next';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
-import { Box, xcss } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { DatasourceAction, DatasourceSearchMethod } from '../../../analytics/types';
+import { RichIconSearch } from '../../../common/ui/rich-icon/search';
 import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
 import { useUserInteractions } from '../../../contexts/user-interactions';
 import i18nEN from '../../../i18n/en';
@@ -38,15 +36,15 @@ import TableSearchCount from '../../common/modal/search-count';
 import { SiteSelector } from '../../common/modal/site-selector';
 import { EmptyState } from '../../issue-like-table';
 import ConfluenceSearchContainer from '../confluence-search-container';
-import { ConfluenceSearchInitialStateSVG } from './confluence-search-initial-state-svg';
+import { ConfluenceSearchInitialStateSVGOld } from './confluence-search-initial-state-svg-old';
 import { confluenceSearchModalMessages } from './messages';
-const inputContainerStyles = xcss({
-  alignItems: 'baseline',
-  display: 'flex',
-  minHeight: '72px'
-});
+import { ConfluenceSearchConfigModalOld, PlainConfluenceSearchConfigModalOld } from './modal-old';
+const styles = {
+  inputContainerStyles: "_4cvr1q9y _1e0c1txw _1tket9kd"
+};
 const isValidParameters = parameters => !!(parameters && parameters.cloudId && Object.values(parameters).filter(v => v !== undefined).length > 1);
-export const PlainConfluenceSearchConfigModal = props => {
+const noop = () => '';
+export const PlainConfluenceSearchConfigModalNew = props => {
   const {
     onCancel,
     url: urlBeingEdited,
@@ -55,6 +53,13 @@ export const PlainConfluenceSearchConfigModal = props => {
   const {
     currentViewMode
   } = useViewModeContext();
+  const {
+    formatMessage
+  } = fg('bandicoots-update-sllv-icons') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIntl() : {
+    formatMessage: noop
+  };
   const {
     visibleColumnKeys,
     tableState: {
@@ -208,43 +213,46 @@ export const PlainConfluenceSearchConfigModal = props => {
   }, [currentViewMode, fireInlineViewedEvent, fireTableViewedEvent, status]);
   const renderTableModalContent = useCallback(() => {
     if (status === 'rejected') {
-      return jsx(ModalLoadingError, null);
+      return /*#__PURE__*/React.createElement(ModalLoadingError, null);
     } else if (status === 'unauthorized') {
-      return jsx(AccessRequired, {
+      return /*#__PURE__*/React.createElement(AccessRequired, {
         url: selectedConfluenceSiteUrl || urlBeingEdited
       });
     } else if (resolvedWithNoResults || status === 'forbidden') {
-      return jsx(NoResults, null);
+      return /*#__PURE__*/React.createElement(NoResults, null);
     } else if (status === 'empty' || !columns.length) {
       // persist the empty state when making the initial /data request which contains the columns
       if (hasConfluenceSearchParams !== undefined) {
-        return jsx(EmptyState, {
+        return /*#__PURE__*/React.createElement(EmptyState, {
           testId: `confluence-search-datasource-modal--empty-state`
         });
       }
-      return jsx(ContentContainer, null, jsx(InitialStateView, {
-        icon: jsx(ConfluenceSearchInitialStateSVG, null),
+      return /*#__PURE__*/React.createElement(ContentContainer, null, /*#__PURE__*/React.createElement(InitialStateView, {
+        icon: fg('bandicoots-update-sllv-icons') ? /*#__PURE__*/React.createElement(RichIconSearch, {
+          size: "xlarge",
+          alt: formatMessage(confluenceSearchModalMessages.initialViewSearchTitle)
+        }) : /*#__PURE__*/React.createElement(ConfluenceSearchInitialStateSVGOld, null),
         title: confluenceSearchModalMessages.initialViewSearchTitle,
         description: confluenceSearchModalMessages.initialViewSearchDescription
       }));
     }
-    return jsx(ContentContainer, {
+    return /*#__PURE__*/React.createElement(ContentContainer, {
       withTableBorder: true
-    }, jsx(DatasourcesTableInModalPreview, {
+    }, /*#__PURE__*/React.createElement(DatasourcesTableInModalPreview, {
       testId: "confluence-search-datasource-table"
     }));
-  }, [columns.length, selectedConfluenceSiteUrl, resolvedWithNoResults, status, urlBeingEdited, hasConfluenceSearchParams]);
+  }, [status, resolvedWithNoResults, columns.length, selectedConfluenceSiteUrl, urlBeingEdited, hasConfluenceSearchParams, formatMessage]);
   const renderInlineLinkModalContent = useCallback(() => {
     if (status === 'unauthorized') {
-      return jsx(AccessRequired, {
+      return /*#__PURE__*/React.createElement(AccessRequired, {
         url: selectedConfluenceSiteUrl || urlBeingEdited
       });
     } else if (status === 'empty' || !selectedConfluenceSiteUrl) {
-      return jsx(SmartCardPlaceholder, {
+      return /*#__PURE__*/React.createElement(SmartCardPlaceholder, {
         placeholderText: confluenceSearchModalMessages.resultsCountSmartCardPlaceholderText
       });
     } else {
-      return confluenceSearchUrl && jsx(SmartLink, {
+      return confluenceSearchUrl && /*#__PURE__*/React.createElement(SmartLink, {
         url: confluenceSearchUrl
       });
     }
@@ -293,52 +301,59 @@ export const PlainConfluenceSearchConfigModal = props => {
       actions: userInteractions.get()
     };
   }, [destinationObjectTypes, extensionKey, userInteractions]);
-  return jsx(IntlMessagesProvider, {
+  return /*#__PURE__*/React.createElement(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale
-  }, jsx(DatasourceModal, {
+  }, /*#__PURE__*/React.createElement(DatasourceModal, {
     testId: "confluence-search-datasource-modal",
     onClose: onCancel
-  }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx(SiteSelector, {
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, /*#__PURE__*/React.createElement(SiteSelector, {
     availableSites: availableSites,
     onSiteSelection: onSiteSelection,
     selectedSite: selectedConfluenceSite,
     testId: "confluence-search-datasource-modal--site-selector",
     label: siteSelectorLabel
-  })), !hasNoConfluenceSites && jsx(DatasourceViewModeDropDown, null)), jsx(ModalBody, null, !hasNoConfluenceSites ? jsx(Fragment, null, jsx(Box, {
-    xcss: inputContainerStyles
-  }, jsx(ConfluenceSearchContainer, {
+  })), !hasNoConfluenceSites && /*#__PURE__*/React.createElement(DatasourceViewModeDropDown, null)), /*#__PURE__*/React.createElement(ModalBody, null, !hasNoConfluenceSites ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.inputContainerStyles
+  }, /*#__PURE__*/React.createElement(ConfluenceSearchContainer, {
     isSearching: status === 'loading',
     onSearch: onSearch,
     parameters: parameters !== null && parameters !== void 0 ? parameters : {
       cloudId: ''
     }
-  })), currentViewMode === 'inline' ? renderInlineLinkModalContent() : renderTableModalContent()) : jsx(NoInstancesView, {
+  })), currentViewMode === 'inline' ? renderInlineLinkModalContent() : renderTableModalContent()) : /*#__PURE__*/React.createElement(NoInstancesView, {
     title: confluenceSearchModalMessages.noAccessToConfluenceSitesTitle,
     description: confluenceSearchModalMessages.noAccessToConfluenceSitesDescription,
     testId: 'no-confluence-instances-content'
-  })), jsx(ModalFooter, null, shouldShowResultsCount && confluenceSearchUrl && jsx(TableSearchCount, {
+  })), /*#__PURE__*/React.createElement(ModalFooter, null, shouldShowResultsCount && confluenceSearchUrl && /*#__PURE__*/React.createElement(TableSearchCount, {
     searchCount: totalCount,
     url: confluenceSearchUrl,
     prefixTextType: "result",
     testId: "confluence-search-datasource-modal-total-results-count"
-  }), jsx(CancelButton, {
+  }), /*#__PURE__*/React.createElement(CancelButton, {
     onCancel: onCancel,
     getAnalyticsPayload: getButtonAnalyticsPayload,
     testId: "confluence-search-modal--cancel-button"
-  }), !hasNoConfluenceSites && jsx(InsertButton, {
+  }), !hasNoConfluenceSites && /*#__PURE__*/React.createElement(InsertButton, {
     testId: "confluence-search-datasource-modal--insert-button",
     url: confluenceSearchUrl,
     getAnalyticsPayload: getButtonAnalyticsPayload
-  }, jsx(FormattedMessage, confluenceSearchModalMessages.insertResultsButtonText)))));
+  }, /*#__PURE__*/React.createElement(FormattedMessage, confluenceSearchModalMessages.insertResultsButtonText)))));
+};
+export const PlainConfluenceSearchConfigModal = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(PlainConfluenceSearchConfigModalNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(PlainConfluenceSearchConfigModalOld, props);
+  }
 };
 const ConnectedConfluenceSearchConfigModal = createDatasourceModal({
   isValidParameters,
   dataProvider: 'confluence-search',
-  component: PlainConfluenceSearchConfigModal
+  component: PlainConfluenceSearchConfigModalNew
 });
-export const ConfluenceSearchConfigModal = props => {
-  return jsx(StoreContainer, null, jsx(ConnectedConfluenceSearchConfigModal, _extends({}, props, {
+export const ConfluenceSearchConfigModalNew = props => {
+  return /*#__PURE__*/React.createElement(StoreContainer, null, /*#__PURE__*/React.createElement(ConnectedConfluenceSearchConfigModal, _extends({}, props, {
     /**
      * If the intial parameters are not valid, we will not initialise the modal state
      * with `overrideParameters`. This is to allow the modal to be opened without
@@ -349,4 +364,11 @@ export const ConfluenceSearchConfigModal = props => {
       ...props.overrideParameters
     } : props.parameters
   })));
+};
+export const ConfluenceSearchConfigModal = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(ConfluenceSearchConfigModalNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ConfluenceSearchConfigModalOld, props);
+  }
 };