@atlaskit/link-datasource 3.19.2 → 3.20.0

package/dist/es2019/ui/issue-like-table/table-cell-content/table-cell-content-old.js

@@ -0,0 +1,183 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { Box, xcss } from '@atlaskit/primitives';
+import Tooltip from '@atlaskit/tooltip';
+import { useDatasourceItem } from '../../../state';
+import { useExecuteAtomicAction } from '../../../state/actions';
+import { isEditTypeSelectable, isEditTypeSupported } from '../edit-type';
+import { stringifyType } from '../render-type';
+import { TruncateTextTag } from '../truncate-text-tag';
+import { InlineEdit } from './inline-edit';
+const readViewStyles = xcss({
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  width: '100%',
+  // Compensates for 2px from both top and bottom taken by InlneEdit (from transparent border in read-view mode and border+padding in edit view)
+  minHeight: 'calc(40px - 2px * 2)',
+  alignContent: 'center'
+});
+const TooltipWrapper = ({
+  columnKey,
+  datasourceTypeWithValues: {
+    type,
+    values
+  },
+  wrappedColumnKeys,
+  children
+}) => {
+  const intl = useIntl();
+  const stringifiedContent = values.map(value => stringifyType({
+    type,
+    value
+  }, intl.formatMessage, intl.formatDate)).filter(value => value !== '').join(', ');
+  if (stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(columnKey))) {
+    return /*#__PURE__*/React.createElement(Tooltip
+    // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+    , {
+      tag: TruncateTextTag,
+      content: stringifiedContent,
+      testId: "issues-table-cell-tooltip"
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+export const ReadOnlyCell = ({
+  id,
+  columnType,
+  wrappedColumnKeys = [],
+  renderItem,
+  columnKey
+}) => {
+  var _useDatasourceItem, _rowData$columnKey;
+  const rowData = (_useDatasourceItem = useDatasourceItem({
+    id
+  })) === null || _useDatasourceItem === void 0 ? void 0 : _useDatasourceItem.data;
+  if (!rowData || !columnKey || !rowData[columnKey]) {
+    return null;
+  }
+
+  // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
+  const value = (_rowData$columnKey = rowData[columnKey]) === null || _rowData$columnKey === void 0 ? void 0 : _rowData$columnKey.data;
+  const values = Array.isArray(value) ? value : [value];
+  const datasourceTypeWithValues = {
+    type: columnType,
+    values
+  };
+  return /*#__PURE__*/React.createElement(TooltipWrapper, {
+    columnKey: columnKey,
+    datasourceTypeWithValues: datasourceTypeWithValues,
+    wrappedColumnKeys: wrappedColumnKeys
+  }, renderItem(datasourceTypeWithValues));
+};
+const InlineEditableCell = ({
+  ari,
+  values,
+  columnKey,
+  columnTitle,
+  renderItem,
+  integrationKey,
+  wrappedColumnKeys
+}) => {
+  // Callbacks are returned only when the ari is editable and the action schemas exist in the store
+  const {
+    execute,
+    executeFetch
+  } = useExecuteAtomicAction({
+    ari,
+    fieldKey: columnKey,
+    integrationKey
+  });
+
+  // A field is editable when `execute` is returned from the store
+  const isEditable = !!execute;
+  const readView = /*#__PURE__*/React.createElement(TooltipWrapper, {
+    columnKey: columnKey,
+    datasourceTypeWithValues: values,
+    wrappedColumnKeys: wrappedColumnKeys
+  }, /*#__PURE__*/React.createElement(Box, {
+    testId: "inline-edit-read-view",
+    paddingInline: isEditable ? 'space.075' : 'space.100',
+    paddingBlock: "space.050",
+    xcss: readViewStyles
+  }, renderItem(values)));
+  if (!isEditable) {
+    return readView;
+  }
+
+  // if the field requires to fetch options to execute, then is editable only if `executeFetch` is defined
+  // `executeFetch` is returned only when ff:`enable_datasource_supporting_actions` is enabled
+  if (isEditTypeSelectable(values.type) && !executeFetch) {
+    return readView;
+  }
+  return /*#__PURE__*/React.createElement(InlineEdit, {
+    ari: ari,
+    execute: execute,
+    executeFetch: executeFetch,
+    readView: readView,
+    columnKey: columnKey,
+    columnTitle: columnTitle,
+    datasourceTypeWithValues: values
+  });
+};
+const toDatasourceTypeWithValues = ({
+  rowData,
+  columnKey,
+  columnType
+}) => {
+  var _rowData$columnKey2;
+  // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
+  const value = (_rowData$columnKey2 = rowData[columnKey]) === null || _rowData$columnKey2 === void 0 ? void 0 : _rowData$columnKey2.data;
+  const values = !value ? [] : Array.isArray(value) ? value : [value];
+  return {
+    type: columnType,
+    values
+  };
+};
+export const TableCellContentOld = ({
+  id,
+  columnKey,
+  columnTitle,
+  columnType,
+  renderItem,
+  wrappedColumnKeys
+}) => {
+  const item = useDatasourceItem({
+    id
+  });
+  if (item) {
+    const {
+      integrationKey,
+      ari,
+      data: rowData
+    } = item;
+    const isEditType = !!ari && !!integrationKey && isEditTypeSupported(columnType);
+    if (isEditType) {
+      return /*#__PURE__*/React.createElement(InlineEditableCell, {
+        ari: ari,
+        columnKey: columnKey,
+        columnTitle: columnTitle,
+        renderItem: renderItem,
+        integrationKey: integrationKey,
+        values: toDatasourceTypeWithValues({
+          rowData,
+          columnKey,
+          columnType
+        }),
+        wrappedColumnKeys: wrappedColumnKeys
+      });
+    }
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    testId: "inline-edit-read-view",
+    paddingInline: "space.100",
+    paddingBlock: "space.050",
+    xcss: readViewStyles
+  }, /*#__PURE__*/React.createElement(ReadOnlyCell, {
+    id: id,
+    columnKey: columnKey,
+    columnTitle: columnTitle,
+    columnType: columnType,
+    wrappedColumnKeys: wrappedColumnKeys,
+    renderItem: renderItem
+  }));
+};

package/dist/es2019/ui/issue-like-table/truncate-text-tag/index.compiled.css

@@ -0,0 +1,4 @@
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1reo15vq{overflow-x:hidden}
+._o5721q9c{white-space:nowrap}

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

@@ -1,21 +1,25 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
-import { css, jsx } from '@emotion/react';
-const truncateTextStyles = css({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+import { fg } from "@atlaskit/platform-feature-flags";
+import { TruncateTextTagOld } from "./truncate-text-tag-old";
+const truncateTextStyles = null;
+export const TruncateTextTagNew = /*#__PURE__*/forwardRef((props, ref) => {
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    ref: ref,
+    className: ax(["_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
+  }), props.children);
 });
 export const TruncateTextTag = /*#__PURE__*/forwardRef((props, ref) => {
-  return jsx("span", _extends({
-    css: truncateTextStyles
-  }, props, {
-    ref: ref
-  }), props.children);
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(TruncateTextTagNew, _extends({}, props, {
+      ref: ref
+    }));
+  } else {
+    return /*#__PURE__*/React.createElement(TruncateTextTagOld, _extends({}, props, {
+      ref: ref
+    }));
+  }
 });

package/dist/es2019/ui/issue-like-table/truncate-text-tag/truncate-text-tag-old.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { forwardRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, jsx } from '@emotion/react';
+const truncateTextStyles = css({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+export const TruncateTextTagOld = /*#__PURE__*/forwardRef((props, ref) => {
+  return jsx("span", _extends({
+    css: truncateTextStyles
+  }, props, {
+    ref: ref
+  }), props.children);
+});

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/index.compiled.css

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

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/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, { useMemo } from 'react';
-import { Flex, xcss } from '@atlaskit/primitives';
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Flex } from '@atlaskit/primitives/compiled';
 import { extractValuesFromNonComplexJQL } from '../utils/extractValuesFromNonComplexJQL';
 import AsyncPopupSelect from './async-popup-select';
+import BasicFilterContainerOld from './ui-old';
 export const availableBasicFilterTypes = ['project', 'type', 'status', 'assignee'];
-const basicFilterContainerStyles = xcss({
-  paddingLeft: 'space.100'
-});
+const styles = {
+  basicFilterContainerStyles: "_19bvu2gc"
+};
 const BasicFilterContainer = ({
   jql,
   site,
@@ -18,7 +23,7 @@ const BasicFilterContainer = ({
     cloudId
   } = site || {};
   return /*#__PURE__*/React.createElement(Flex, {
-    xcss: basicFilterContainerStyles,
+    xcss: styles.basicFilterContainerStyles,
     gap: "space.100",
     testId: "jlol-basic-filter-container"
   }, availableBasicFilterTypes.map(filter => {
@@ -35,4 +40,11 @@ const BasicFilterContainer = ({
     });
   }));
 };
-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/jira-issues-modal/basic-filters/ui/ui-old.js

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import { Flex, xcss } from '@atlaskit/primitives';
+import { extractValuesFromNonComplexJQL } from '../utils/extractValuesFromNonComplexJQL';
+import AsyncPopupSelect from './async-popup-select';
+export const availableBasicFilterTypes = ['project', 'type', 'status', 'assignee'];
+const basicFilterContainerStyles = xcss({
+  paddingLeft: 'space.100'
+});
+const BasicFilterContainer = ({
+  jql,
+  site,
+  onChange,
+  selections,
+  isJQLHydrating
+}) => {
+  const extractedFilterValues = useMemo(() => isJQLHydrating ? extractValuesFromNonComplexJQL(jql) : {}, [isJQLHydrating, jql]);
+  const {
+    cloudId
+  } = site || {};
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: basicFilterContainerStyles,
+    gap: "space.100",
+    testId: "jlol-basic-filter-container"
+  }, availableBasicFilterTypes.map(filter => {
+    var _extractedFilterValue;
+    const shouldShowHydrationLoader = isJQLHydrating && ((_extractedFilterValue = extractedFilterValues[filter]) === null || _extractedFilterValue === void 0 ? void 0 : _extractedFilterValue.length) > 0;
+    return /*#__PURE__*/React.createElement(AsyncPopupSelect, {
+      site: site,
+      filterType: filter,
+      key: filter,
+      selection: selections[filter] || [],
+      isJQLHydrating: shouldShowHydrationLoader,
+      isDisabled: !cloudId,
+      onSelectionChange: onChange
+    });
+  }));
+};
+export default BasicFilterContainer;

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

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

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

@@ -1,14 +1,11 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* 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, useMemo, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 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 { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { BasicSearchInput } from '../../common/modal/basic-search-input';
 import { basicSearchInputMessages } from '../../common/modal/basic-search-input/messages';
@@ -19,18 +16,15 @@ import { useHydrateJqlQuery } from '../basic-filters/hooks/useHydrateJqlQuery';
 import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
 import { JiraJQLEditor } from '../jql-editor';
 import { buildJQL } from './buildJQL';
+import { JiraSearchContainerOld } from "./jira-search-container-old";
 import { modeSwitcherMessages } from './messages';
-const inputContainerStyles = css({
-  alignItems: 'baseline',
-  display: 'flex',
-  minHeight: '72px'
-});
-const basicSearchInputContainerStyles = xcss({
-  flexGrow: 1
-});
+const styles = {
+  basicSearchInputContainerStyles: "_16jlkb7n",
+  inputContainerStyles: "_4cvr1q9y _1e0c1txw _1tket9kd"
+};
 export const DEFAULT_JQL_QUERY = 'ORDER BY created DESC';
 export const ALLOWED_ORDER_BY_KEYS = ['key', 'summary', 'assignee', 'status', 'created'];
-export const JiraSearchContainer = props => {
+export const JiraSearchContainerNew = props => {
   const {
     isSearching,
     parameters,
@@ -179,13 +173,13 @@ export const JiraSearchContainer = props => {
       setCloudId(currentCloudId);
     }
   }, [currentCloudId, cloudId, setSearchBarJql]);
-  return jsx("div", {
-    css: inputContainerStyles,
-    "data-testid": "jira-search-container"
-  }, currentSearchMethod === 'basic' && jsx(Flex, {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "jira-search-container",
+    className: ax([styles.inputContainerStyles])
+  }, currentSearchMethod === 'basic' && /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center",
-    xcss: basicSearchInputContainerStyles
-  }, jsx(BasicSearchInput, {
+    xcss: styles.basicSearchInputContainerStyles
+  }, /*#__PURE__*/React.createElement(BasicSearchInput, {
     isSearching: isSearching,
     onChange: handleBasicSearchChange,
     onSearch: handleSearch,
@@ -193,21 +187,28 @@ export const JiraSearchContainer = props => {
     placeholder: basicSearchInputMessages.basicTextSearchLabel,
     testId: "jira-datasource-modal",
     fullWidth: false
-  }), jsx(BasicFilters, {
+  }), /*#__PURE__*/React.createElement(BasicFilters, {
     jql: searchBarJql,
     site: site,
     onChange: handleBasicFilterSelectionChange,
     selections: filterSelections,
     isJQLHydrating: basicFilterHydrationStatus === 'loading'
-  })), currentSearchMethod === 'jql' && jsx(JiraJQLEditor, {
+  })), currentSearchMethod === 'jql' && /*#__PURE__*/React.createElement(JiraJQLEditor, {
     cloudId: cloudId || '',
     isSearching: isSearching,
     onChange: onQueryChange,
     onSearch: handleSearch,
     query: searchBarJql
-  }), jsx(ModeSwitcher, {
+  }), /*#__PURE__*/React.createElement(ModeSwitcher, {
     onOptionValueChange: onSearchMethodChange,
     selectedOptionValue: currentSearchMethod,
     options: modeSwitcherOptions
   }));
+};
+export const JiraSearchContainer = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(JiraSearchContainerNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(JiraSearchContainerOld, props);
+  }
 };

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

@@ -0,0 +1,213 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { useDebouncedCallback } from 'use-debounce';
+import { Flex, xcss } from '@atlaskit/primitives';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { BasicSearchInput } from '../../common/modal/basic-search-input';
+import { basicSearchInputMessages } from '../../common/modal/basic-search-input/messages';
+import { ModeSwitcher } from '../../common/modal/mode-switcher';
+import { FILTER_SELECTION_DEBOUNCE_MS } from '../../common/modal/popup-select/constants';
+import { BasicFilters } from '../basic-filters';
+import { useHydrateJqlQuery } from '../basic-filters/hooks/useHydrateJqlQuery';
+import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
+import { JiraJQLEditor } from '../jql-editor';
+import { buildJQL } from './buildJQL';
+import { modeSwitcherMessages } from './messages';
+const inputContainerStyles = css({
+  alignItems: 'baseline',
+  display: 'flex',
+  minHeight: '72px'
+});
+const basicSearchInputContainerStyles = xcss({
+  flexGrow: 1
+});
+export const DEFAULT_JQL_QUERY = 'ORDER BY created DESC';
+export const ALLOWED_ORDER_BY_KEYS = ['key', 'summary', 'assignee', 'status', 'created'];
+export const JiraSearchContainerOld = props => {
+  const {
+    isSearching,
+    parameters,
+    onSearch,
+    onSearchMethodChange: onSearchMethodChangeCallback,
+    initialSearchMethod,
+    setSearchBarJql,
+    searchBarJql = DEFAULT_JQL_QUERY,
+    site
+  } = props;
+  const {
+    cloudId: currentCloudId
+  } = parameters || {};
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+  const [basicSearchTerm, setBasicSearchTerm] = useState('');
+  const [currentSearchMethod, setCurrentSearchMethod] = useState(initialSearchMethod);
+  const [cloudId, setCloudId] = useState(currentCloudId);
+  const [isComplexQuery, setIsComplexQuery] = useState(false);
+  const [orderKey, setOrderKey] = useState();
+  const [orderDirection, setOrderDirection] = useState();
+  const [filterSelections, setFilterSelections] = useState({});
+  const modeSwitcherOptionsMap = useMemo(() => ({
+    jql: {
+      label: 'JQL',
+      value: 'jql'
+    },
+    basic: {
+      label: formatMessage(modeSwitcherMessages.basicTextSearchLabel),
+      value: 'basic',
+      disabled: isComplexQuery,
+      tooltipText: isComplexQuery ? formatMessage(modeSwitcherMessages.basicModeSwitchDisabledTooltipText) : ''
+    }
+  }), [formatMessage, isComplexQuery]);
+  const modeSwitcherOptions = useMemo(() => [modeSwitcherOptionsMap.basic, modeSwitcherOptionsMap.jql], [modeSwitcherOptionsMap]);
+  const {
+    hydratedOptions,
+    fetchHydratedJqlOptions,
+    status: basicFilterHydrationStatus
+  } = useHydrateJqlQuery(cloudId || '', searchBarJql);
+  const onSearchMethodChange = useCallback(searchMethod => {
+    onSearchMethodChangeCallback(searchMethod);
+    setCurrentSearchMethod(searchMethod);
+  }, [onSearchMethodChangeCallback]);
+  const handleBasicSearchChange = useCallback(e => {
+    const rawSearch = e.currentTarget.value;
+    setBasicSearchTerm(rawSearch);
+    setSearchBarJql(buildJQL({
+      rawSearch,
+      filterValues: filterSelections,
+      orderDirection,
+      orderKey
+    }));
+  }, [setSearchBarJql, filterSelections, orderDirection, orderKey]);
+  const onQueryChange = useCallback(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 && ALLOWED_ORDER_BY_KEYS.includes(key)) {
+      setOrderKey(key);
+      setOrderDirection(order);
+    }
+    setSearchBarJql(query);
+  }, [setSearchBarJql]);
+  const handleSearch = useCallback(() => {
+    const isCurrentQueryComplex = isQueryTooComplex(searchBarJql);
+    onSearch({
+      jql: searchBarJql
+    }, {
+      searchMethod: currentSearchMethod,
+      basicFilterSelections: filterSelections,
+      isQueryComplex: isCurrentQueryComplex
+    });
+    if (currentSearchMethod === 'jql') {
+      fireEvent('ui.jqlEditor.searched', {
+        isQueryComplex: isCurrentQueryComplex
+      });
+      setIsComplexQuery(isCurrentQueryComplex);
+      if (!isCurrentQueryComplex) {
+        fetchHydratedJqlOptions();
+      }
+    }
+  }, [currentSearchMethod, fetchHydratedJqlOptions, filterSelections, fireEvent, searchBarJql, onSearch]);
+  const [debouncedBasicFilterSelectionChange] = useDebouncedCallback(filterValues => {
+    const jqlWithFilterValues = buildJQL({
+      rawSearch: basicSearchTerm,
+      filterValues,
+      orderDirection,
+      orderKey
+    });
+    setSearchBarJql(jqlWithFilterValues);
+    const isCurrentQueryComplex = isQueryTooComplex(jqlWithFilterValues);
+    onSearch({
+      jql: jqlWithFilterValues
+    }, {
+      searchMethod: currentSearchMethod,
+      basicFilterSelections: filterSelections,
+      isQueryComplex: isCurrentQueryComplex
+    });
+  }, FILTER_SELECTION_DEBOUNCE_MS);
+  const handleBasicFilterSelectionChange = useCallback((filterType, options) => {
+    const updatedSelection = {
+      ...filterSelections,
+      [filterType]: options
+    };
+    setFilterSelections(updatedSelection);
+    debouncedBasicFilterSelectionChange(updatedSelection);
+  }, [debouncedBasicFilterSelectionChange, filterSelections]);
+  useEffect(() => {
+    const isCurrentQueryComplex = isQueryTooComplex(searchBarJql);
+    setIsComplexQuery(isCurrentQueryComplex);
+    if (!isCurrentQueryComplex && searchBarJql !== DEFAULT_JQL_QUERY) {
+      fetchHydratedJqlOptions();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    if (basicFilterHydrationStatus === 'resolved') {
+      const {
+        basicInputTextValue,
+        ...hydratedFilterOptions
+      } = hydratedOptions;
+      setFilterSelections(hydratedFilterOptions);
+      if (basicInputTextValue) {
+        setBasicSearchTerm(basicInputTextValue);
+      }
+    }
+  }, [hydratedOptions, basicFilterHydrationStatus]);
+  useEffect(() => {
+    if (currentCloudId !== cloudId) {
+      setBasicSearchTerm('');
+      setSearchBarJql(DEFAULT_JQL_QUERY);
+      setIsComplexQuery(false);
+      setOrderKey(undefined);
+      setOrderDirection(undefined);
+      setFilterSelections({});
+      setCloudId(currentCloudId);
+    }
+  }, [currentCloudId, cloudId, setSearchBarJql]);
+  return jsx("div", {
+    css: inputContainerStyles,
+    "data-testid": "jira-search-container"
+  }, currentSearchMethod === 'basic' && jsx(Flex, {
+    alignItems: "center",
+    xcss: basicSearchInputContainerStyles
+  }, jsx(BasicSearchInput, {
+    isSearching: isSearching,
+    onChange: handleBasicSearchChange,
+    onSearch: handleSearch,
+    searchTerm: basicSearchTerm,
+    placeholder: basicSearchInputMessages.basicTextSearchLabel,
+    testId: "jira-datasource-modal",
+    fullWidth: false
+  }), jsx(BasicFilters, {
+    jql: searchBarJql,
+    site: site,
+    onChange: handleBasicFilterSelectionChange,
+    selections: filterSelections,
+    isJQLHydrating: basicFilterHydrationStatus === 'loading'
+  })), currentSearchMethod === 'jql' && jsx(JiraJQLEditor, {
+    cloudId: cloudId || '',
+    isSearching: isSearching,
+    onChange: onQueryChange,
+    onSearch: handleSearch,
+    query: searchBarJql
+  }), jsx(ModeSwitcher, {
+    onOptionValueChange: onSearchMethodChange,
+    selectedOptionValue: currentSearchMethod,
+    options: modeSwitcherOptions
+  }));
+};