@atlaskit/link-datasource 3.13.16 → 3.13.18

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

@@ -9,17 +9,13 @@ 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 { AnalyticsContext } from '@atlaskit/analytics-next';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
-import { componentMetadata } from '../../../analytics/constants';
 import { DatasourceAction, DatasourceSearchMethod } from '../../../analytics/types';
 import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
-import { DatasourceExperienceIdProvider } from '../../../contexts/datasource-experience-id';
-import { UserInteractionsProvider, useUserInteractions } from '../../../contexts/user-interactions';
+import { useUserInteractions } from '../../../contexts/user-interactions';
 import i18nEN from '../../../i18n/en';
 import { useAvailableSites } from '../../../services/useAvailableSites';
 import { StoreContainer } from '../../../state';
@@ -44,7 +40,6 @@ import { EmptyState } from '../../issue-like-table';
 import ConfluenceSearchContainer from '../confluence-search-container';
 import { ConfluenceSearchInitialStateSVG } from './confluence-search-initial-state-svg';
 import { confluenceSearchModalMessages } from './messages';
-import { PlainConfluenceSearchConfigModal as PlainConfluenceSearchConfigModalOld } from './ModalOld';
 const inputContainerStyles = xcss({
   alignItems: 'baseline',
   display: 'flex',
@@ -337,39 +332,21 @@ export const PlainConfluenceSearchConfigModal = props => {
     getAnalyticsPayload: getButtonAnalyticsPayload
   }, jsx(FormattedMessage, confluenceSearchModalMessages.insertResultsButtonText)))));
 };
-const analyticsContextAttributes = {
-  dataProvider: 'confluence-search'
-};
-const analyticsContextData = {
-  ...componentMetadata.configModal,
-  source: 'datasourceConfigModal'
-};
-const contextData = {
-  ...analyticsContextData,
-  attributes: {
-    ...analyticsContextAttributes
-  }
-};
 const ConnectedConfluenceSearchConfigModal = createDatasourceModal({
   isValidParameters,
   dataProvider: 'confluence-search',
   component: PlainConfluenceSearchConfigModal
 });
 export const ConfluenceSearchConfigModal = props => {
-  if (fg('platform-datasources-use-refactored-config-modal')) {
-    return jsx(StoreContainer, null, jsx(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
-       * any initial parameters and require the user to perform a search.
-       */
-      parameters: props.overrideParameters && isValidParameters(props.parameters) ? {
-        ...props.parameters,
-        ...props.overrideParameters
-      } : props.parameters
-    })));
-  }
-  return jsx(StoreContainer, null, jsx(AnalyticsContext, {
-    data: contextData
-  }, jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, jsx(PlainConfluenceSearchConfigModalOld, props)))));
+  return jsx(StoreContainer, null, jsx(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
+     * any initial parameters and require the user to perform a search.
+     */
+    parameters: props.overrideParameters && isValidParameters(props.parameters) ? {
+      ...props.parameters,
+      ...props.overrideParameters
+    } : props.parameters
+  })));
 };

package/dist/es2019/ui/issue-like-table/edit-type/icon/index.js

@@ -8,6 +8,7 @@ import { useDatasourceExperienceId } from '../../../../contexts/datasource-exper
 import { useLoadOptions } from '../../../../hooks/useLoadOptions';
 import { SharedIconComponent } from '../../shared-components/icon';
 import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
+import { getCleanedSelectProps } from '../../utils';
 /**
  * Should be gated by FF rollout of platform-datasources-enable-two-way-sync-priority
  */
@@ -15,6 +16,7 @@ const IconEditType = props => {
   var _currentValue$values;
   const {
     currentValue,
+    labelId,
     executeFetch
   } = props;
   const {
@@ -41,7 +43,7 @@ const IconEditType = props => {
   }, [experienceId, isLoading, hasFailed]);
   return /*#__PURE__*/React.createElement(Layering, {
     isDisabled: false
-  }, /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
     autoFocus: true,
     blurInputOnSelect: true,
     defaultMenuIsOpen: true,
@@ -51,6 +53,7 @@ const IconEditType = props => {
     filterOption: filterOption,
     testId: "inline-edit-priority",
     value: currentValue === null || currentValue === void 0 ? void 0 : (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
+    labelId: labelId,
     getOptionValue: option => option.text || '',
     formatOptionLabel: ({
       source,

package/dist/es2019/ui/issue-like-table/edit-type/index.js

@@ -11,6 +11,7 @@ const ACTIVE_INLINE_EDIT_ID = 'sllv-active-inline-edit';
 export const editType = ({
   defaultValue,
   currentValue,
+  labelId,
   setEditValues,
   executeFetch
 }) => {
@@ -24,7 +25,8 @@ export const editType = ({
         }) => /*#__PURE__*/React.createElement(TextEditType, _extends({}, fieldProps, {
           currentValue: currentValue,
           setEditValues: setEditValues,
-          id: ACTIVE_INLINE_EDIT_ID
+          id: ACTIVE_INLINE_EDIT_ID,
+          labelId: labelId
         }))
       };
     case 'icon':
@@ -37,7 +39,8 @@ export const editType = ({
           currentValue: currentValue,
           setEditValues: setEditValues,
           id: ACTIVE_INLINE_EDIT_ID,
-          executeFetch: executeFetch
+          executeFetch: executeFetch,
+          labelId: labelId
         }))
       };
     case 'status':
@@ -49,7 +52,8 @@ export const editType = ({
           currentValue: currentValue,
           setEditValues: setEditValues,
           id: ACTIVE_INLINE_EDIT_ID,
-          executeFetch: executeFetch
+          executeFetch: executeFetch,
+          labelId: labelId
         }))
       };
     case 'user':
@@ -62,7 +66,8 @@ export const editType = ({
           currentValue: currentValue,
           setEditValues: setEditValues,
           id: ACTIVE_INLINE_EDIT_ID,
-          executeFetch: executeFetch
+          executeFetch: executeFetch,
+          labelId: labelId
         }))
       };
   }

package/dist/es2019/ui/issue-like-table/edit-type/status/index.js

@@ -8,10 +8,12 @@ import { failUfoExperience, succeedUfoExperience } from '../../../../analytics/u
 import { useDatasourceExperienceId } from '../../../../contexts/datasource-experience-id';
 import { useLoadOptions } from '../../../../hooks/useLoadOptions';
 import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
+import { getCleanedSelectProps } from '../../utils';
 const StatusEditType = props => {
   var _currentValue$values;
   const {
     currentValue,
+    labelId,
     executeFetch
   } = props;
   const {
@@ -38,7 +40,7 @@ const StatusEditType = props => {
   }, [experienceId, isLoading, hasFailed]);
   return /*#__PURE__*/React.createElement(Layering, {
     isDisabled: false
-  }, /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
     autoFocus: true,
     options: options,
     defaultMenuIsOpen: true,
@@ -49,11 +51,13 @@ const StatusEditType = props => {
     testId: "inline-edit-status",
     getOptionValue: option => option.text,
     value: currentValue === null || currentValue === void 0 ? void 0 : (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
+    labelId: labelId,
     formatOptionLabel: option => /*#__PURE__*/React.createElement(Tooltip, {
       content: option.text
     }, /*#__PURE__*/React.createElement(Lozenge, _extends({
       testId: `inline-edit-status-option-${option.text}`
     }, option.style), option.text)),
+    getOptionLabel: option => option.text,
     onChange: e => props.setEditValues({
       type: 'status',
       values: e ? [e] : []

package/dist/es2019/ui/issue-like-table/edit-type/text/index.js

@@ -8,7 +8,8 @@ const TextEditType = props => {
   var _currentValue$values$, _currentValue$values;
   const experienceId = useDatasourceExperienceId();
   const {
-    currentValue
+    currentValue,
+    labelId
   } = props;
   useEffect(() => {
     if (experienceId) {
@@ -28,6 +29,7 @@ const TextEditType = props => {
       padding: `${"var(--ds-space-100, 8px)"} calc(${"var(--ds-space-100, 8px)"} - 1px)`
     },
     value: (_currentValue$values$ = currentValue === null || currentValue === void 0 ? void 0 : (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0]) !== null && _currentValue$values$ !== void 0 ? _currentValue$values$ : '',
+    "aria-labelledby": labelId,
     onChange: e => props.setEditValues({
       type: 'string',
       values: [e.currentTarget.value]

package/dist/es2019/ui/issue-like-table/edit-type/user/index.js

@@ -13,10 +13,12 @@ import { SEARCH_DEBOUNCE_MS } from '../../../common/modal/popup-select/constants
 import { USER_TYPE_TEST_ID } from '../../render-type/user';
 import { userTypeMessages } from '../../render-type/user/messages';
 import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
+import { getCleanedSelectProps } from '../../utils';
 const UserEditType = props => {
   var _currentValue$values;
   const {
     currentValue,
+    labelId,
     executeFetch
   } = props;
   const [fetchInputs, setFetchInputs] = useState({
@@ -59,7 +61,7 @@ const UserEditType = props => {
   }, [experienceId, isLoading, hasFailed]);
   return /*#__PURE__*/React.createElement(Layering, {
     isDisabled: false
-  }, /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
     autoFocus: true,
     defaultMenuIsOpen: true,
     blurInputOnSelect: true,
@@ -70,7 +72,9 @@ const UserEditType = props => {
     menuPlacement: "auto",
     onInputChange: handleUserInputDebounced,
     value: currentValue === null || currentValue === void 0 ? void 0 : (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
+    labelId: labelId,
     getOptionValue: option => option.atlassianUserId,
+    getOptionLabel: option => option.displayName || '',
     formatOptionLabel: option => {
       var _option$displayName;
       return /*#__PURE__*/React.createElement(Tooltip, {

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

@@ -36,7 +36,7 @@ import { InlineEditableTableCell, Table, TableCell, TableHeading, withTablePlugi
 import { ReadOnlyCell, TableCellContent } from './table-cell-content';
 import { TruncateTextTag } from './truncate-text-tag';
 import { useIsOnScreen } from './useIsOnScreen';
-import { COLUMN_BASE_WIDTH, getWidthCss } from './utils';
+import { COLUMN_BASE_WIDTH, getFieldLabelById, getWidthCss } from './utils';
 const tableSidePadding = "var(--ds-space-200, 16px)";
 const tableHeadStyles = css({
   background: "var(--ds-elevation-surface-current, #FFF)",
@@ -474,7 +474,8 @@ export const IssueLikeDataTableView = ({
       key: id,
       cells: visibleSortedColumns.map(({
         key,
-        type
+        type,
+        title
       }, cellIndex) => {
         return {
           key,
@@ -484,11 +485,13 @@ export const IssueLikeDataTableView = ({
             id: id,
             columnKey: key,
             columnType: type,
+            columnTitle: title,
             wrappedColumnKeys: wrappedColumnKeys,
             renderItem: renderItem
           }) : jsx(ReadOnlyCell, {
             id: id,
             columnKey: key,
+            columnTitle: title,
             columnType: type,
             wrappedColumnKeys: wrappedColumnKeys,
             renderItem: renderItem
@@ -618,7 +621,8 @@ export const IssueLikeDataTableView = ({
       position: "bottom-start",
       testId: 'datasource-header-content'
     }, jsx("span", {
-      css: headerStyles
+      css: headerStyles,
+      id: getFieldLabelById(key)
     }, content));
     const isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
     if (isHeadingOutsideButton) {

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

@@ -73,6 +73,7 @@ const InlineEditableCell = ({
   ari,
   values,
   columnKey,
+  columnTitle,
   renderItem,
   integrationKey,
   wrappedColumnKeys
@@ -114,6 +115,7 @@ const InlineEditableCell = ({
     executeFetch: executeFetch,
     readView: readView,
     columnKey: columnKey,
+    columnTitle: columnTitle,
     datasourceTypeWithValues: values
   });
 };
@@ -134,6 +136,7 @@ const toDatasourceTypeWithValues = ({
 export const TableCellContent = ({
   id,
   columnKey,
+  columnTitle,
   columnType,
   renderItem,
   wrappedColumnKeys
@@ -152,6 +155,7 @@ export const TableCellContent = ({
       return /*#__PURE__*/React.createElement(InlineEditableCell, {
         ari: ari,
         columnKey: columnKey,
+        columnTitle: columnTitle,
         renderItem: renderItem,
         integrationKey: integrationKey,
         values: toDatasourceTypeWithValues({
@@ -171,6 +175,7 @@ export const TableCellContent = ({
   }, /*#__PURE__*/React.createElement(ReadOnlyCell, {
     id: id,
     columnKey: columnKey,
+    columnTitle: columnTitle,
     columnType: columnType,
     wrappedColumnKeys: wrappedColumnKeys,
     renderItem: renderItem

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useIntl } from 'react-intl-next';
 import AKInlineEdit from '@atlaskit/inline-edit';
 import { Box, xcss } from '@atlaskit/primitives';
 import { useSmartLinkReload } from '@atlaskit/smart-card/hooks';
@@ -10,6 +11,8 @@ import { useDatasourceTableFlag } from '../../../hooks/useDatasourceTableFlag';
 import { useDatasourceActions, useDatasourceItem } from '../../../state';
 import { editType } from '../edit-type';
 import { EmptyAvatar } from '../shared-components/avatar';
+import { getFieldLabelById } from '../utils';
+import { tableCellMessages } from './messages';
 export const InlineEditUFOExperience = 'inline-edit-rendered';
 const editContainerStyles = xcss({
   marginBlockStart: 'space.negative.100'
@@ -28,6 +31,21 @@ const getBackendUpdateValue = typedNewValue => {
   }
   throw new Error(`Datasource 2 way sync Backend update value not implemented for type ${typedNewValue.type}`);
 };
+const getCurrentFieldLabel = typedNewValue => {
+  var _typedNewValue$values4, _typedNewValue$values5, _typedNewValue$values6;
+  switch (typedNewValue.type) {
+    case 'string':
+      return typedNewValue.values[0] || '';
+    case 'status':
+      return ((_typedNewValue$values4 = typedNewValue.values[0]) === null || _typedNewValue$values4 === void 0 ? void 0 : _typedNewValue$values4.text) || '';
+    case 'user':
+      return ((_typedNewValue$values5 = typedNewValue.values[0]) === null || _typedNewValue$values5 === void 0 ? void 0 : _typedNewValue$values5.displayName) || '';
+    case 'icon':
+      return ((_typedNewValue$values6 = typedNewValue.values[0]) === null || _typedNewValue$values6 === void 0 ? void 0 : _typedNewValue$values6.text) || '';
+    default:
+      return '';
+  }
+};
 const mapUpdatedItem = (existingItem, columnKey, newValue) => {
   switch (newValue.type) {
     case 'string':
@@ -74,6 +92,7 @@ export const InlineEdit = ({
   executeFetch,
   readView,
   columnKey,
+  columnTitle,
   datasourceTypeWithValues
 }) => {
   const [isEditing, setIsEditing] = useState(false);
@@ -143,13 +162,23 @@ export const InlineEdit = ({
       });
     }
   }, [columnKey, entityType, fireEvent, integrationKey]);
+  const {
+    formatMessage
+  } = useIntl();
+  const editButtonLabel = useMemo(() => {
+    return formatMessage(tableCellMessages.editButtonLabel, {
+      fieldName: columnTitle,
+      fieldValue: getCurrentFieldLabel(editValues)
+    });
+  }, [columnTitle, formatMessage, editValues]);
   return /*#__PURE__*/React.createElement(Box, {
     xcss: editContainerStyles
   }, /*#__PURE__*/React.createElement(AKInlineEdit, _extends({}, editType({
     defaultValue: datasourceTypeWithValues,
     currentValue: editValues,
     setEditValues,
-    executeFetch
+    executeFetch,
+    labelId: getFieldLabelById(columnKey)
   }), {
     hideActionButtons: true,
     readView: editableRenderType({
@@ -160,7 +189,8 @@ export const InlineEdit = ({
     isEditing: isEditing,
     onEdit: onEdit,
     onCancel: onCancelEdit,
-    onConfirm: () => onCommitUpdate(editValues)
+    onConfirm: () => onCommitUpdate(editValues),
+    editButtonLabel: editButtonLabel
   })));
 };
 

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

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const tableCellMessages = defineMessages({
+  editButtonLabel: {
+    id: 'linkDataSource.issue-line-table.edit-button-label.non-final',
+    description: 'Label of inline editable field, used mostly for screen readers. This label is used to describe the field that is editable and can be changed. e.g John Doe, Assignee field',
+    defaultMessage: '{fieldValue}, {fieldName} field'
+  }
+});

package/dist/es2019/ui/issue-like-table/utils.js

@@ -53,4 +53,21 @@ export const getColumnAction = (oldVisibleColumnKeys, newVisibleColumnKeys) => {
   } else {
     return DatasourceAction.COLUMN_REORDERED;
   }
-};
+};
+
+/**
+ * Remove deprecated `aria-labelledby` prop from select component props.
+ */
+export const getCleanedSelectProps = props => {
+  // Component Field auto adds `aria-labelledby` prop, which is deprecated and should not be used - https://hello.jira.atlassian.cloud/browse/ENGHEALTH-14529
+  const {
+    'aria-labelledby': removedLabelByProps,
+    ...selectProps
+  } = props;
+  return selectProps;
+};
+
+/**
+ * Create id for table header to be used as aria-labelledby on form fields.
+ */
+export const getFieldLabelById = fieldId => `datasource-header-title-${fieldId}`;

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

@@ -10,20 +10,18 @@ import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'rea
 // 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 { AnalyticsContext } from '@atlaskit/analytics-next';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
-import { componentMetadata, EVENT_CHANNEL } from '../../../analytics/constants';
+import { EVENT_CHANNEL } from '../../../analytics/constants';
 import { DatasourceAction, DatasourceDisplay } from '../../../analytics/types';
 import { startUfoExperience } from '../../../analytics/ufoExperiences';
 import { useColumnPickerRenderedFailedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience';
 import { useDataRenderedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
 import { mapSearchMethod } from '../../../analytics/utils';
 import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
-import { DatasourceExperienceIdProvider, useDatasourceExperienceId } from '../../../contexts/datasource-experience-id';
-import { UserInteractionsProvider, useUserInteractions } from '../../../contexts/user-interactions';
+import { useDatasourceExperienceId } from '../../../contexts/datasource-experience-id';
+import { useUserInteractions } from '../../../contexts/user-interactions';
 import i18nEN from '../../../i18n/en';
 import { useAvailableSites } from '../../../services/useAvailableSites';
 import { StoreContainer } from '../../../state';
@@ -52,7 +50,6 @@ import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
 import { JiraSearchContainer } from '../jira-search-container';
 import { JiraInitialStateSVG } from './jira-issues-initial-state-svg';
 import { modalMessages } from './messages';
-import { PlainJiraIssuesConfigModalOld } from './ModalOld';
 const getDisplayValue = (currentViewMode, itemCount) => {
   if (currentViewMode === 'table') {
     return DatasourceDisplay.DATASOURCE_TABLE;
@@ -372,19 +369,6 @@ const PlainJiraIssuesConfigModal = props => {
     getAnalyticsPayload: getInsertButtonAnalyticsPayload
   }, jsx(FormattedMessage, modalMessages.insertIssuesButtonText))))));
 };
-const analyticsContextAttributes = {
-  dataProvider: 'jira-issues'
-};
-const analyticsContextData = {
-  ...componentMetadata.configModal,
-  source: 'datasourceConfigModal'
-};
-const contextData = {
-  ...analyticsContextData,
-  attributes: {
-    ...analyticsContextAttributes
-  }
-};
 const ConnectedJiraIssueConfigModal = createDatasourceModal({
   isValidParameters,
   dataProvider: 'jira-issues',
@@ -410,10 +394,5 @@ const JiraIssuesConfigModalWithExtraAnalyticsOnInsert = props => {
   })));
 };
 export const JiraIssuesConfigModal = props => {
-  if (fg('platform-datasources-use-refactored-config-modal')) {
-    return jsx(JiraIssuesConfigModalWithExtraAnalyticsOnInsert, props);
-  }
-  return jsx(StoreContainer, null, jsx(AnalyticsContext, {
-    data: contextData
-  }, jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, jsx(PlainJiraIssuesConfigModalOld, props)))));
+  return jsx(JiraIssuesConfigModalWithExtraAnalyticsOnInsert, props);
 };

package/dist/esm/hooks/useLoadOptions.js

@@ -1,8 +1,11 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { useEffect, useState } from 'react';
+import { useEffect, useReducer } from 'react';
 import { ActionOperationStatus } from '@atlaskit/linking-types';
 import { useDatasourceTableFlag } from './useDatasourceTableFlag';
 var loadOptions = /*#__PURE__*/function () {
@@ -46,30 +49,38 @@ var loadOptions = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
+var reducer = function reducer(state, payload) {
+  return _objectSpread(_objectSpread({}, state), payload);
+};
 export var useLoadOptions = function useLoadOptions(_ref2) {
   var fetchInputs = _ref2.fetchInputs,
     executeFetch = _ref2.executeFetch,
     emptyOption = _ref2.emptyOption;
-  var _useState = useState({
+  var _useReducer = useReducer(reducer, {
       isLoading: true,
       options: [],
       hasFailed: false
     }),
-    _useState2 = _slicedToArray(_useState, 2),
-    _useState2$ = _useState2[0],
-    options = _useState2$.options,
-    isLoading = _useState2$.isLoading,
-    hasFailed = _useState2$.hasFailed,
-    setOptions = _useState2[1];
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    _useReducer2$ = _useReducer2[0],
+    options = _useReducer2$.options,
+    isLoading = _useReducer2$.isLoading,
+    hasFailed = _useReducer2$.hasFailed,
+    dispatch = _useReducer2[1];
   var _useDatasourceTableFl = useDatasourceTableFlag({
       isFetchAction: true
     }),
     showErrorFlag = _useDatasourceTableFl.showErrorFlag;
   useEffect(function () {
     var isMounted = true;
+    // Set the loading state before sending the request
+    dispatch({
+      isLoading: true
+    });
+    // Query the options
     loadOptions(fetchInputs, executeFetch).then(function (options) {
       if (isMounted) {
-        setOptions({
+        dispatch({
           isLoading: false,
           options: emptyOption ? [emptyOption].concat(_toConsumableArray(options)) : options,
           hasFailed: false
@@ -77,7 +88,7 @@ export var useLoadOptions = function useLoadOptions(_ref2) {
       }
     }).catch(function (err) {
       showErrorFlag();
-      setOptions({
+      dispatch({
         isLoading: false,
         options: [],
         hasFailed: true

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

@@ -12,17 +12,13 @@ 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 { AnalyticsContext } from '@atlaskit/analytics-next';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
-import { componentMetadata } from '../../../analytics/constants';
 import { DatasourceAction, DatasourceSearchMethod } from '../../../analytics/types';
 import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
-import { DatasourceExperienceIdProvider } from '../../../contexts/datasource-experience-id';
-import { UserInteractionsProvider, useUserInteractions } from '../../../contexts/user-interactions';
+import { useUserInteractions } from '../../../contexts/user-interactions';
 import i18nEN from '../../../i18n/en';
 import { useAvailableSites } from '../../../services/useAvailableSites';
 import { StoreContainer } from '../../../state';
@@ -47,7 +43,6 @@ import { EmptyState } from '../../issue-like-table';
 import ConfluenceSearchContainer from '../confluence-search-container';
 import { ConfluenceSearchInitialStateSVG } from './confluence-search-initial-state-svg';
 import { confluenceSearchModalMessages } from './messages';
-import { PlainConfluenceSearchConfigModal as PlainConfluenceSearchConfigModalOld } from './ModalOld';
 var inputContainerStyles = xcss({
   alignItems: 'baseline',
   display: 'flex',
@@ -342,32 +337,18 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
     getAnalyticsPayload: getButtonAnalyticsPayload
   }, jsx(FormattedMessage, confluenceSearchModalMessages.insertResultsButtonText)))));
 };
-var analyticsContextAttributes = {
-  dataProvider: 'confluence-search'
-};
-var analyticsContextData = _objectSpread(_objectSpread({}, componentMetadata.configModal), {}, {
-  source: 'datasourceConfigModal'
-});
-var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
-  attributes: _objectSpread({}, analyticsContextAttributes)
-});
 var ConnectedConfluenceSearchConfigModal = createDatasourceModal({
   isValidParameters: isValidParameters,
   dataProvider: 'confluence-search',
   component: PlainConfluenceSearchConfigModal
 });
 export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(props) {
-  if (fg('platform-datasources-use-refactored-config-modal')) {
-    return jsx(StoreContainer, null, jsx(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
-       * any initial parameters and require the user to perform a search.
-       */
-      parameters: props.overrideParameters && isValidParameters(props.parameters) ? _objectSpread(_objectSpread({}, props.parameters), props.overrideParameters) : props.parameters
-    })));
-  }
-  return jsx(StoreContainer, null, jsx(AnalyticsContext, {
-    data: contextData
-  }, jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, jsx(PlainConfluenceSearchConfigModalOld, props)))));
+  return jsx(StoreContainer, null, jsx(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
+     * any initial parameters and require the user to perform a search.
+     */
+    parameters: props.overrideParameters && isValidParameters(props.parameters) ? _objectSpread(_objectSpread({}, props.parameters), props.overrideParameters) : props.parameters
+  })));
 };