@atlaskit/link-datasource 1.19.21 → 1.19.23

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

@@ -36,7 +36,7 @@ var noFilterOptions = function noFilterOptions() {
 var SEARCH_DEBOUNCE_MS = exports.SEARCH_DEBOUNCE_MS = 350;
 var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
   var filterType = _ref.filterType,
-    cloudId = _ref.cloudId,
+    site = _ref.site,
     selection = _ref.selection,
     isJQLHydrating = _ref.isJQLHydrating,
     _ref$onSelectionChang = _ref.onSelectionChange,
@@ -59,12 +59,14 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     sortedOptions = _useState6[0],
     setSortedOptions = _useState6[1];
-  var currentSiteCloudId = (0, _react.useRef)(cloudId);
+  var _ref2 = site || {},
+    cloudId = _ref2.cloudId;
+  var currentSiteCloudId = (0, _react.useRef)(cloudId || '');
   var sortPaginatedResults = (0, _react.useRef)(false); // this is to track pagination for sorting purpose
 
   var _useFilterOptions = (0, _useFilterOptions2.useFilterOptions)({
       filterType: filterType,
-      cloudId: cloudId
+      site: site
     }),
     filterOptions = _useFilterOptions.filterOptions,
     fetchFilterOptions = _useFilterOptions.fetchFilterOptions,
@@ -81,7 +83,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     _useDebouncedCallback2 = (0, _slicedToArray2.default)(_useDebouncedCallback, 1),
     handleDebouncedFetchFilterOptions = _useDebouncedCallback2[0];
   var handleInputChange = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(newSearchTerm, actionMeta) {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(newSearchTerm, actionMeta) {
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -96,7 +98,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       }, _callee);
     }));
     return function (_x, _x2) {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }(), [handleDebouncedFetchFilterOptions, searchTerm]);
   var handleOptionSelection = (0, _react.useCallback)(function (newValue) {
@@ -195,7 +197,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
   }, [status]); // we only want the sortOptionsOnResolve to run when there is a status change
 
   (0, _react.useEffect)(function () {
-    if (currentSiteCloudId.current !== cloudId) {
+    if (cloudId && currentSiteCloudId.current !== cloudId) {
       currentSiteCloudId.current = cloudId;
       setSortedOptions([]);
       setSearchTerm('');
@@ -262,9 +264,9 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     onInputChange: handleInputChange,
     onOpen: handleMenuOpen,
     onClose: handleMenuClose,
-    target: function target(_ref3) {
-      var isOpen = _ref3.isOpen,
-        triggerProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+    target: function target(_ref4) {
+      var isOpen = _ref4.isOpen,
+        triggerProps = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
       return /*#__PURE__*/_react.default.createElement(_trigger.default, (0, _extends2.default)({}, triggerProps, {
         filterType: filterType,
         selectedOptions: selectedOptions,

package/dist/cjs/ui/jira-issues-modal/basic-filters/ui/index.js

@@ -18,13 +18,15 @@ var basicFilterContainerStyles = (0, _primitives.xcss)({
 });
 var BasicFilterContainer = function BasicFilterContainer(_ref) {
   var jql = _ref.jql,
-    cloudId = _ref.cloudId,
+    site = _ref.site,
     onChange = _ref.onChange,
     selections = _ref.selections,
     isJQLHydrating = _ref.isJQLHydrating;
   var extractedFilterValues = (0, _react.useMemo)(function () {
     return isJQLHydrating ? (0, _extractValuesFromNonComplexJQL.extractValuesFromNonComplexJQL)(jql) : {};
   }, [isJQLHydrating, jql]);
+  var _ref2 = site || {},
+    cloudId = _ref2.cloudId;
   return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
     xcss: basicFilterContainerStyles,
     gap: "space.100",
@@ -33,7 +35,7 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
     var _extractedFilterValue;
     var shouldShowHydrationLoader = isJQLHydrating && ((_extractedFilterValue = extractedFilterValues[filter]) === null || _extractedFilterValue === void 0 ? void 0 : _extractedFilterValue.length) > 0;
     return /*#__PURE__*/_react.default.createElement(_asyncPopupSelect.default, {
-      cloudId: cloudId,
+      site: site,
       filterType: filter,
       key: filter,
       selection: selections[filter] || [],

package/dist/cjs/ui/jira-issues-modal/basic-filters/utils/transformers.js

@@ -24,6 +24,15 @@ var getLozengeAppearance = function getLozengeAppearance(colorName) {
     return _types.appearanceMap[colorName];
   }
 };
+var checkAndConvertToAbsoluteUrl = function checkAndConvertToAbsoluteUrl(url, siteUrl) {
+  if (!url) {
+    return '';
+  }
+  if (/^data:(.*)/.test(url) || /^http(.*)/.test(url) || !siteUrl) {
+    return url;
+  }
+  return "".concat(siteUrl).concat(url);
+};
 function mapNodeToOption(_ref) {
   var displayName = _ref.displayName,
     jqlTerm = _ref.jqlTerm,
@@ -31,7 +40,8 @@ function mapNodeToOption(_ref) {
     issueTypes = _ref.issueTypes,
     project = _ref.project,
     statusCategory = _ref.statusCategory,
-    user = _ref.user;
+    user = _ref.user,
+    siteUrl = _ref.siteUrl;
   try {
     var baseProps = {
       label: displayName,
@@ -56,14 +66,14 @@ function mapNodeToOption(_ref) {
       var _project$avatar;
       return _objectSpread(_objectSpread({}, baseProps), {}, {
         optionType: 'iconLabel',
-        icon: (_project$avatar = project.avatar) === null || _project$avatar === void 0 ? void 0 : _project$avatar.small
+        icon: checkAndConvertToAbsoluteUrl((_project$avatar = project.avatar) === null || _project$avatar === void 0 ? void 0 : _project$avatar.small, siteUrl)
       });
     }
     if (issueTypes) {
       var _issueTypes$;
       return _objectSpread(_objectSpread({}, baseProps), {}, {
         optionType: 'iconLabel',
-        icon: (_issueTypes$ = issueTypes[0]) === null || _issueTypes$ === void 0 ? void 0 : _issueTypes$.avatar.small
+        icon: checkAndConvertToAbsoluteUrl((_issueTypes$ = issueTypes[0]) === null || _issueTypes$ === void 0 ? void 0 : _issueTypes$.avatar.small, siteUrl)
       });
     }
     if (statusCategory) {
@@ -102,9 +112,12 @@ function mapHydrateResponseData(_ref2) {
 }
 function mapFieldValuesToFilterOptions(_ref5) {
   var _data$jira2;
-  var data = _ref5.data;
+  var data = _ref5.data,
+    siteUrl = _ref5.siteUrl;
   return (data === null || data === void 0 || (_data$jira2 = data.jira) === null || _data$jira2 === void 0 || (_data$jira2 = _data$jira2.jqlBuilder) === null || _data$jira2 === void 0 || (_data$jira2 = _data$jira2.fieldValues) === null || _data$jira2 === void 0 || (_data$jira2 = _data$jira2.edges) === null || _data$jira2 === void 0 ? void 0 : _data$jira2.map(function (edge) {
-    return edge.node ? mapNodeToOption(edge.node) : null;
+    return edge.node ? mapNodeToOption(_objectSpread(_objectSpread({}, edge.node), {}, {
+      siteUrl: siteUrl
+    })) : null;
   }).filter(isNonNullSelectOption)) || [];
 }
 function mapFieldValuesToTotalCount(_ref6) {

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

@@ -48,7 +48,8 @@ var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchConta
     initialSearchMethod = props.initialSearchMethod,
     setSearchBarJql = props.setSearchBarJql,
     _props$searchBarJql = props.searchBarJql,
-    searchBarJql = _props$searchBarJql === void 0 ? DEFAULT_JQL_QUERY : _props$searchBarJql;
+    searchBarJql = _props$searchBarJql === void 0 ? DEFAULT_JQL_QUERY : _props$searchBarJql,
+    site = props.site;
   var _ref = parameters || {},
     currentCloudId = _ref.cloudId;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
@@ -228,7 +229,7 @@ var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchConta
     searchTerm: basicSearchTerm
   }), showBasicFilters && (0, _react2.jsx)(_basicFilters.BasicFilters, {
     jql: searchBarJql,
-    cloudId: cloudId || '',
+    site: site,
     onChange: handleBasicFilterSelectionChange,
     selections: filterSelections,
     isJQLHydrating: basicFilterHydrationStatus === 'loading'

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

@@ -570,7 +570,8 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     parameters: parameters,
     onSearch: onSearch,
     initialSearchMethod: initialSearchMethod,
-    onSearchMethodChange: setCurrentSearchMethod
+    onSearchMethodChange: setCurrentSearchMethod,
+    site: selectedJiraSite
   }), currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent()) : (0, _react2.jsx)(_noInstances.NoInstancesView, null)), (0, _react2.jsx)(_modalDialog.ModalFooter, null, shouldShowIssueCount && (0, _react2.jsx)("div", {
     "data-testid": "jira-jql-datasource-modal-total-issues-count",
     css: issueCountStyles

package/dist/es2019/analytics/constants.js

@@ -1,5 +1,5 @@
 export const EVENT_CHANNEL = 'media';
 export const packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.19.21"
+  packageVersion: "1.19.23"
 };

package/dist/es2019/hooks/useValidateAqlText.js

@@ -1,44 +1,83 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useDatasourceAnalyticsEvents } from '../analytics';
 import { validateAql } from '../services/cmdbService';
-export const useValidateAqlText = workspaceId => {
-  const [loading, setLoading] = useState(false);
-  const [isValidAqlText, setIsValidAqlText] = useState(false);
-  const [error, setError] = useState();
+export const SEARCH_DEBOUNCE = 350;
+export const useValidateAqlText = (workspaceId, initialValue) => {
+  const timeout = useRef();
+  const lastValue = useRef('');
+  const lastResult = useRef(Promise.resolve(undefined));
+  const [lastValidationResult, setLastValidationResult] = useState(initialValue.trim() === '' ? {
+    type: 'idle'
+  } : {
+    type: 'loading'
+  });
   const {
     fireEvent
   } = useDatasourceAnalyticsEvents();
+
+  // We return undefined when valid and 'error' when invalid
   const validateAqlText = useCallback(async aql => {
-    setLoading(true);
-    setError(undefined);
-    let isValid = false;
-    let message = null;
-    try {
-      var _validateAqlResponse$;
-      const validateAqlResponse = await validateAql(workspaceId, {
-        qlQuery: aql
-      }, fireEvent);
-      setIsValidAqlText(validateAqlResponse.isValid);
-      isValid = validateAqlResponse.isValid;
-      message = ((_validateAqlResponse$ = validateAqlResponse.errors) === null || _validateAqlResponse$ === void 0 ? void 0 : _validateAqlResponse$.iql) || null;
-    } catch (err) {
-      if (err instanceof Error) {
-        setError(err);
-      } else {
-        setError(new Error('Unexpected error occured'));
+    if (aql !== null && aql !== void 0 && aql.trim()) {
+      try {
+        const validateAqlResponse = await validateAql(workspaceId, {
+          qlQuery: aql
+        }, fireEvent);
+        if (validateAqlResponse.isValid) {
+          setLastValidationResult({
+            type: 'valid',
+            validatedAql: aql
+          });
+          return undefined;
+        } else {
+          var _validateAqlResponse$, _validateAqlResponse$2;
+          setLastValidationResult({
+            type: 'invalid',
+            error: (_validateAqlResponse$ = (_validateAqlResponse$2 = validateAqlResponse.errors) === null || _validateAqlResponse$2 === void 0 ? void 0 : _validateAqlResponse$2.iql) !== null && _validateAqlResponse$ !== void 0 ? _validateAqlResponse$ : ''
+          });
+          return 'error';
+        }
+      } catch (err) {
+        setLastValidationResult({
+          type: 'invalid',
+          error: ''
+        });
+        return 'error';
       }
-    } finally {
-      setLoading(false);
     }
-    return {
-      isValid,
-      message
-    };
+    setLastValidationResult({
+      type: 'idle'
+    });
+    return undefined;
   }, [workspaceId, fireEvent]);
+
+  /* Debounce async validation for input, validation is also called on every field change
+  in a form so we need to also memoize. The async validate function is expected to either:
+  Immediately return a promise (which is then collected into an array, every single time validation is run),
+  or immediately return either undefined or an error message */
+  const debouncedValidation = value => new Promise(resolve => {
+    if (timeout.current) {
+      timeout.current();
+    }
+    if (value !== lastValue.current) {
+      const timerId = setTimeout(() => {
+        setLastValidationResult({
+          type: 'loading'
+        });
+        lastValue.current = value;
+        lastResult.current = validateAqlText(value);
+        resolve(lastResult.current);
+      }, SEARCH_DEBOUNCE);
+      timeout.current = () => {
+        clearTimeout(timerId);
+        resolve('debouncing');
+      };
+    } else {
+      resolve(lastResult.current);
+    }
+  });
   return {
-    isValidAqlText,
+    debouncedValidation,
     validateAqlText,
-    validateAqlTextLoading: loading,
-    validateAqlTextError: error
+    lastValidationResult
   };
 };

package/dist/es2019/ui/assets-modal/modal/index.js

@@ -259,7 +259,7 @@ const PlainAssetsConfigModal = props => {
     }).fire(EVENT_CHANNEL);
     onCancel();
   }, [analyticsPayload, onCancel]);
-  const handleOnSearch = useCallback(async (searchAql, searchSchemaId) => {
+  const handleOnSearch = useCallback((searchAql, searchSchemaId) => {
     if (schemaId !== searchSchemaId || aql !== searchAql || status === 'rejected') {
       searchCount.current++;
       if (schemaId !== searchSchemaId) {
@@ -269,7 +269,8 @@ const PlainAssetsConfigModal = props => {
         userInteractionActions.current.add(DatasourceAction.QUERY_UPDATED);
       }
       reset({
-        shouldResetColumns: true
+        shouldResetColumns: true,
+        shouldForceRequest: true
       });
       setAql(searchAql);
       setSchemaId(searchSchemaId);
@@ -300,7 +301,7 @@ const PlainAssetsConfigModal = props => {
       return jsx(AssetsSearchContainer, {
         workspaceId: workspaceId,
         initialSearchData: {
-          aql,
+          aql: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql,
           objectSchema: existingObjectSchema,
           objectSchemas
         },
@@ -309,7 +310,7 @@ const PlainAssetsConfigModal = props => {
         isSearching: status === 'loading'
       });
     }
-  }, [errorState, workspaceId, assetsClientLoading, aql, existingObjectSchema, objectSchemas, handleOnSearch, status]);
+  }, [errorState, workspaceId, assetsClientLoading, initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql, existingObjectSchema, objectSchemas, handleOnSearch, status]);
   return jsx(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale

package/dist/es2019/ui/assets-modal/modal/render-assets-content/index.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N40 } from '@atlaskit/theme/colors';
 import { AccessRequired } from '../../../common/error-state/access-required';
@@ -74,19 +74,22 @@ export const RenderAssetsContent = props => {
     onVisibleColumnKeysChange: onVisibleColumnKeysChange,
     parentContainerRenderInstanceId: modalRenderInstanceId
   })), [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, status, visibleColumnKeys, modalRenderInstanceId]);
-  if (isFetchingInitialData) {
-    // Placing this check first as it's a priority before all others
-    return jsx(LoadingView, null);
-  } else if (status === 'rejected') {
-    return jsx(RejectedView, null);
-  } else if (status === 'unauthorized') {
-    return jsx(UnauthorizedView, null);
-  } else if (status === 'empty') {
-    return jsx(EmptyView, null);
-  } else if (resolvedWithNoResults) {
-    return jsx(NoResultsView, null);
-  } else if (status === 'loading' && !columns.length) {
-    return jsx(LoadingView, null);
-  }
-  return issueLikeDataTableView;
+  const renderAssetsContentView = useCallback(() => {
+    if (isFetchingInitialData) {
+      // Placing this check first as it's a priority before all others
+      return jsx(LoadingView, null);
+    } else if (status === 'rejected') {
+      return jsx(RejectedView, null);
+    } else if (status === 'unauthorized') {
+      return jsx(UnauthorizedView, null);
+    } else if (status === 'empty') {
+      return jsx(EmptyView, null);
+    } else if (resolvedWithNoResults) {
+      return jsx(NoResultsView, null);
+    } else if (status === 'loading' && !columns.length) {
+      return jsx(LoadingView, null);
+    }
+    return issueLikeDataTableView;
+  }, [columns.length, isFetchingInitialData, issueLikeDataTableView, resolvedWithNoResults, status]);
+  return renderAssetsContentView();
 };

package/dist/es2019/ui/assets-modal/search-container/aql-search-input/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { Fragment, useCallback, useRef, useState } from 'react';
+import { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
@@ -17,10 +17,6 @@ import { useValidateAqlText } from '../../../../hooks/useValidateAqlText';
 import { aqlKey } from '../../../../types/assets/types';
 import { FieldContainer } from '../styled';
 import { searchInputMessages } from './messages';
-
-/* Meta isn't exported in @atlaskit/form
-Taken from packages/design-system/form/src/field.tsx */
-
 const buttonBaseStyles = css({
   display: 'flex',
   height: '100%',
@@ -34,15 +30,14 @@ const AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-manag
 const searchButtonStyles = css({
   marginRight: "var(--ds-space-075, 6px)"
 });
-export const SEARCH_DEBOUNCE_MS = 350;
-const renderValidatorIcon = (value, error, meta) => {
-  if (value && meta !== null && meta !== void 0 && meta.validating) {
+const renderValidatorIcon = lastValidationResult => {
+  if (lastValidationResult.type === 'loading') {
     return jsx(Spinner, {
       size: "medium",
       testId: "assets-datasource-modal--aql-validating"
     });
   }
-  if (value && error) {
+  if (lastValidationResult.type === 'invalid') {
     return jsx(CrossCircleIcon, {
       label: "label",
       primaryColor: "red",
@@ -50,7 +45,7 @@ const renderValidatorIcon = (value, error, meta) => {
       testId: "assets-datasource-modal--aql-invalid"
     });
   }
-  if (value && meta.valid) {
+  if (lastValidationResult.type === 'valid') {
     return jsx(CheckCircleIcon, {
       label: "label",
       primaryColor: "green",
@@ -73,61 +68,23 @@ export const AqlSearchInput = ({
   const {
     formatMessage
   } = useIntl();
-  const timeout = useRef();
-  const lastValue = useRef(value);
-  const lastResult = useRef(Promise.resolve(undefined));
-  const [message, setMessage] = useState(null);
   const {
-    validateAqlText
-  } = useValidateAqlText(workspaceId);
-
-  // Validation expects undefined when valid and a string as an error message when invalid
-  const handleValidation = useCallback(async newUnvalidatedQlQuery => {
-    if (!newUnvalidatedQlQuery) {
-      return undefined;
-    }
-    const validation = await validateAqlText(newUnvalidatedQlQuery);
-    setMessage(validation.message);
-    return validation.isValid ? undefined : 'invalid';
-  }, [validateAqlText]);
-
-  /* Debounce async validation for input, validation is also called on every field change
-  in a form so we need to also memoize. The async validate function is expected to either:
-  Immediately return a promise (which is then collected into an array, every single time validation is run),
-  or immediately return either undefined or an error message */
-  const debouncedMemoizedValidation = value => new Promise(resolve => {
-    if (timeout.current) {
-      timeout.current();
-    }
-    if (value !== lastValue.current) {
-      const timerId = setTimeout(() => {
-        lastValue.current = value;
-        lastResult.current = handleValidation(value);
-        resolve(lastResult.current);
-      }, SEARCH_DEBOUNCE_MS);
-      timeout.current = () => {
-        clearTimeout(timerId);
-        resolve('debouncing');
-      };
-    } else {
-      resolve(lastResult.current);
-    }
-  });
+    debouncedValidation,
+    lastValidationResult
+  } = useValidateAqlText(workspaceId, value);
   return jsx(FieldContainer, null, jsx(Field, {
     name: aqlKey,
     defaultValue: value,
-    validate: debouncedMemoizedValidation
+    validate: debouncedValidation
   }, ({
-    fieldProps,
-    meta,
-    error
+    fieldProps
   }) => jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, {
     elemBeforeInput: jsx("span", {
       style: {
         paddingLeft: 6,
         width: 24
       }
-    }, renderValidatorIcon(fieldProps.value, error, meta)),
+    }, renderValidatorIcon(lastValidationResult)),
     elemAfterInput: jsx(Fragment, null, jsx(Tooltip, {
       content: formatMessage(searchInputMessages.helpTooltipText),
       position: "bottom"
@@ -151,9 +108,9 @@ export const AqlSearchInput = ({
       spacing: "none",
       testId: "assets-datasource-modal--aql-search-button",
       type: "submit",
-      isDisabled: fieldProps.value.trim() === '' || meta.validating || !meta.valid
+      isDisabled: lastValidationResult.type !== 'valid'
     })),
     placeholder: formatMessage(searchInputMessages.placeholder),
     testId: testId
-  })), fieldProps.value && error && message && jsx(ErrorMessage, null, message))));
+  })), lastValidationResult.type === 'invalid' && lastValidationResult.error && jsx(ErrorMessage, null, lastValidationResult.error))));
 };

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

@@ -24,7 +24,7 @@ export const AssetsSearchContainer = props => {
       aql,
       objectSchema
     } = searchFormValues;
-    if (objectSchema) {
+    if (aql && objectSchema) {
       fireEvent('ui.aqlEditor.searched', {});
       // Pass the validated aql and object schema back to modal
       onSearch(aql, objectSchema.value);

package/dist/es2019/ui/jira-issues-modal/basic-filters/hooks/useFilterOptions.js

@@ -10,7 +10,7 @@ export const getAssigneeUnassignedFilterOption = formatMessage => ({
 });
 export const useFilterOptions = ({
   filterType,
-  cloudId
+  site
 }) => {
   const {
     formatMessage
@@ -21,6 +21,10 @@ export const useFilterOptions = ({
   const [errors, setErrors] = useState([]);
   const [nextPageCursor, setNextPageCursor] = useState(undefined);
   const initialData = useRef();
+  const {
+    cloudId,
+    url: siteUrl
+  } = site || {};
   const {
     getFieldValues
   } = useBasicFilterAGG();
@@ -28,6 +32,9 @@ export const useFilterOptions = ({
     pageCursor,
     searchString
   } = {}) => {
+    if (!cloudId) {
+      return;
+    }
     const isNewSearch = !pageCursor;
     isNewSearch ? setStatus('loading') : setStatus('loadingMore');
     const isRequestLikeInitialSearch = !pageCursor && !searchString;
@@ -47,7 +54,10 @@ export const useFilterOptions = ({
         setErrors(response.errors);
         return;
       }
-      const mappedResponse = mapFieldValuesToFilterOptions(response);
+      const mappedResponse = mapFieldValuesToFilterOptions({
+        ...response,
+        siteUrl
+      });
       let mappedTotalCount = mapFieldValuesToTotalCount(response);
       if (isNewSearch) {
         if (isRequestLikeInitialSearch) {
@@ -77,7 +87,7 @@ export const useFilterOptions = ({
       setStatus('rejected');
       setErrors([error]);
     }
-  }, [cloudId, filterOptions, filterType, formatMessage, getFieldValues]);
+  }, [cloudId, filterOptions, filterType, formatMessage, getFieldValues, siteUrl]);
   useEffect(() => {
     if (status !== 'rejected' && errors.length !== 0) {
       setErrors([]);

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

@@ -18,7 +18,7 @@ const noFilterOptions = () => true;
 export const SEARCH_DEBOUNCE_MS = 350;
 const AsyncPopupSelect = ({
   filterType,
-  cloudId,
+  site,
   selection,
   isJQLHydrating,
   onSelectionChange = () => {},
@@ -33,7 +33,10 @@ const AsyncPopupSelect = ({
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedOptions, setSelectedOptions] = useState(selection);
   const [sortedOptions, setSortedOptions] = useState([]);
-  const currentSiteCloudId = useRef(cloudId);
+  const {
+    cloudId
+  } = site || {};
+  const currentSiteCloudId = useRef(cloudId || '');
   const sortPaginatedResults = useRef(false); // this is to track pagination for sorting purpose
 
   const {
@@ -46,7 +49,7 @@ const AsyncPopupSelect = ({
     errors
   } = useFilterOptions({
     filterType,
-    cloudId
+    site
   });
   const [handleDebouncedFetchFilterOptions] = useDebouncedCallback(searchString => {
     fetchFilterOptions({
@@ -147,7 +150,7 @@ const AsyncPopupSelect = ({
   }, [status]); // we only want the sortOptionsOnResolve to run when there is a status change
 
   useEffect(() => {
-    if (currentSiteCloudId.current !== cloudId) {
+    if (cloudId && currentSiteCloudId.current !== cloudId) {
       currentSiteCloudId.current = cloudId;
       setSortedOptions([]);
       setSearchTerm('');

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

@@ -8,12 +8,15 @@ const basicFilterContainerStyles = xcss({
 });
 const BasicFilterContainer = ({
   jql,
-  cloudId,
+  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",
@@ -22,7 +25,7 @@ const BasicFilterContainer = ({
     var _extractedFilterValue;
     const shouldShowHydrationLoader = isJQLHydrating && ((_extractedFilterValue = extractedFilterValues[filter]) === null || _extractedFilterValue === void 0 ? void 0 : _extractedFilterValue.length) > 0;
     return /*#__PURE__*/React.createElement(AsyncPopupSelect, {
-      cloudId: cloudId,
+      site: site,
       filterType: filter,
       key: filter,
       selection: selections[filter] || [],