@atlaskit/link-datasource 2.5.9 → 2.5.11

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import mergeWith from 'lodash/mergeWith';
 import { AbstractJastVisitor, COMPOUND_OPERATOR_AND, COMPOUND_OPERATOR_OR, JastBuilder, OPERATOR_EQUALS, OPERATOR_IN, OPERATOR_LIKE } from '@atlaskit/jql-ast';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ALLOWED_ORDER_BY_KEYS } from '../../jira-search-container';
 import { isClauseTooComplex } from './isClauseTooComplex';
 import { isValidJql } from './index';
@@ -83,7 +83,7 @@ class JqlClauseCollectingVisitor extends AbstractJastVisitor {
   }
 }
 export const isQueryTooComplex = jql => {
-  if (!getBooleanFF('platform.linking-platform.datasource.show-jlol-basic-filters') || !jql) {
+  if (!fg('platform.linking-platform.datasource.show-jlol-basic-filters') || !jql) {
     return false;
   }
   if (!isValidJql(jql)) {

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

@@ -5,17 +5,17 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { useDebouncedCallback } from 'use-debounce';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 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 { ModeSwitcher } from '../mode-switcher';
 import { buildJQL } from './buildJQL';
 import { modeSwitcherMessages } from './messages';
 const inputContainerStyles = css({
@@ -56,7 +56,7 @@ export const JiraSearchContainer = props => {
   const [orderDirection, setOrderDirection] = useState();
   const [filterSelections, setFilterSelections] = useState({});
   const showBasicFilters = useMemo(() => {
-    if (getBooleanFF('platform.linking-platform.datasource.show-jlol-basic-filters')) {
+    if (fg('platform.linking-platform.datasource.show-jlol-basic-filters')) {
       return true;
     }
     return false;

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

@@ -0,0 +1,476 @@
+import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/platform/no-preconditioning */
+/** @jsx jsx */
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } 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 Button from '@atlaskit/button/standard-button';
+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 { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
+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 { buildDatasourceAdf } from '../../../common/utils/adf';
+import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
+import { useDatasourceExperienceId } from '../../../contexts/datasource-experience-id';
+import { useUserInteractions } from '../../../contexts/user-interactions';
+import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
+import i18nEN from '../../../i18n/en';
+import { useAvailableSites } from '../../../services/useAvailableSites';
+import { AccessRequired } from '../../common/error-state/access-required';
+import { loadingErrorMessages } from '../../common/error-state/messages';
+import { ModalLoadingError } from '../../common/error-state/modal-loading-error';
+import { NoInstancesView } from '../../common/error-state/no-instances';
+import { NoResults } from '../../common/error-state/no-results';
+import { InitialStateView } from '../../common/initial-state-view';
+import { initialStateViewMessages } from '../../common/initial-state-view/messages';
+import { CancelButton } from '../../common/modal/cancel-button';
+import { ContentContainer } from '../../common/modal/content-container';
+import { SmartCardPlaceholder, SmartLink } from '../../common/modal/count-view-smart-link';
+import { DatasourceModal } from '../../common/modal/datasource-modal';
+import { useColumnResize } from '../../common/modal/datasources-table-in-modal-preview/use-column-resize';
+import { useColumnWrapping } from '../../common/modal/datasources-table-in-modal-preview/use-column-wrapping';
+import { DisplayViewDropDown } from '../../common/modal/display-view-dropdown/display-view-drop-down';
+import TableSearchCount from '../../common/modal/search-count';
+import { SiteSelector } from '../../common/modal/site-selector';
+import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
+import { getColumnAction } from '../../issue-like-table/utils';
+import { availableBasicFilterTypes } from '../basic-filters/ui';
+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';
+const getDisplayValue = (currentViewMode, itemCount) => {
+  if (currentViewMode === 'table') {
+    return DatasourceDisplay.DATASOURCE_TABLE;
+  }
+  return itemCount === 1 ? DatasourceDisplay.INLINE : DatasourceDisplay.DATASOURCE_INLINE;
+};
+const jqlSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-advanced-search-with-jira-query-language-jql/';
+export const PlainJiraIssuesConfigModalOld = props => {
+  const {
+    datasourceId,
+    columnCustomSizes: initialColumnCustomSizes,
+    wrappedColumnKeys: initialWrappedColumnKeys,
+    onCancel,
+    onInsert,
+    viewMode = 'table',
+    parameters: initialParameters,
+    url: urlBeingEdited,
+    visibleColumnKeys: initialVisibleColumnKeys
+  } = props;
+  const [currentViewMode, setCurrentViewMode] = useState(viewMode);
+  const [cloudId, setCloudId] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId);
+  const {
+    availableSites,
+    selectedSite: selectedJiraSite
+  } = useAvailableSites('jira', cloudId);
+  const [jql, setJql] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.jql);
+  const [searchBarJql, setSearchBarJql] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.jql);
+  const [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys);
+
+  // analytics related parameters
+  const searchCount = useRef(0);
+  const userInteractions = useUserInteractions();
+  const initialSearchMethod = fg('platform.linking-platform.datasource.show-jlol-basic-filters') && !isQueryTooComplex((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.jql) || '') ? 'basic' : 'jql';
+  const [currentSearchMethod, setCurrentSearchMethod] = useState(initialSearchMethod);
+  const searchMethodSearchedWith = useRef(null);
+  const visibleColumnCount = useRef((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
+  const basicFilterSelectionsSearchedWith = useRef({});
+  const isSearchedWithComplexQuery = useRef(false);
+  const parameters = useMemo(() => !!cloudId ? {
+    cloudId,
+    jql: jql || ''
+  } : undefined, [cloudId, jql]);
+  const isParametersSet = !!(jql && cloudId);
+  const {
+    columnCustomSizes,
+    onColumnResize
+  } = useColumnResize(initialColumnCustomSizes);
+  const {
+    wrappedColumnKeys,
+    onWrappedColumnChange
+  } = useColumnWrapping(initialWrappedColumnKeys);
+  const {
+    reset,
+    status,
+    onNextPage,
+    responseItems,
+    hasNextPage,
+    columns,
+    defaultVisibleColumnKeys,
+    loadDatasourceDetails,
+    totalCount,
+    extensionKey = null,
+    destinationObjectTypes
+  } = useDatasourceTableState({
+    datasourceId,
+    parameters: isParametersSet ? parameters : undefined,
+    fieldKeys: visibleColumnKeys
+  });
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+  const experienceId = useDatasourceExperienceId();
+  const analyticsPayload = useMemo(() => ({
+    extensionKey,
+    destinationObjectTypes
+  }), [destinationObjectTypes, extensionKey]);
+  const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  const jqlUrl = selectedJiraSite && jql && `${selectedJiraSite.url}/issues/?jql=${encodeURI(jql)}`;
+  const isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading';
+  const shouldShowIssueCount = !!totalCount && totalCount !== 1 && currentViewMode === 'table';
+  const isDataReady = (visibleColumnKeys || []).length > 0;
+  const hasNoJiraSites = availableSites && availableSites.length === 0;
+  useEffect(() => {
+    if (availableSites) {
+      fireEvent('ui.modal.ready.datasource', {
+        instancesCount: availableSites.length,
+        schemasCount: null
+      });
+    }
+  }, [fireEvent, availableSites]);
+  useEffect(() => {
+    const shouldStartUfoExperience = status === 'loading';
+    if (shouldStartUfoExperience) {
+      startUfoExperience({
+        name: 'datasource-rendered'
+      }, experienceId);
+    }
+  }, [experienceId, status]);
+  useDataRenderedUfoExperience({
+    status,
+    experienceId: experienceId,
+    itemCount: responseItems.length,
+    canBeLink: currentViewMode === 'inline',
+    extensionKey
+  });
+  useEffect(() => {
+    const newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
+    visibleColumnCount.current = newVisibleColumnKeys.length;
+    setVisibleColumnKeys(newVisibleColumnKeys);
+  }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
+  useEffect(() => {
+    if (selectedJiraSite && (!cloudId || cloudId !== selectedJiraSite.cloudId)) {
+      setCloudId(selectedJiraSite.cloudId);
+    }
+  }, [cloudId, selectedJiraSite]);
+  const fireSingleItemViewedEvent = useCallback(() => {
+    fireEvent('ui.link.viewed.singleItem', {
+      ...analyticsPayload,
+      searchMethod: mapSearchMethod(searchMethodSearchedWith.current)
+    });
+  }, [analyticsPayload, fireEvent]);
+  const fireCountViewedEvent = useCallback(() => {
+    fireEvent('ui.link.viewed.count', {
+      ...analyticsPayload,
+      searchMethod: mapSearchMethod(searchMethodSearchedWith.current),
+      totalItemCount: totalCount || 0
+    });
+  }, [analyticsPayload, fireEvent, totalCount]);
+  const fireTableViewedEvent = useCallback(() => {
+    if (isDataReady) {
+      fireEvent('ui.table.viewed.datasourceConfigModal', {
+        ...analyticsPayload,
+        totalItemCount: totalCount || 0,
+        searchMethod: mapSearchMethod(searchMethodSearchedWith.current),
+        displayedColumnCount: visibleColumnCount.current
+      });
+    }
+  }, [analyticsPayload, fireEvent, totalCount, isDataReady]);
+  const fireIssueViewAnalytics = useCallback(() => {
+    if (!totalCount) {
+      return;
+    }
+    if (totalCount > 1) {
+      fireTableViewedEvent();
+    } else if (totalCount === 1) {
+      fireSingleItemViewedEvent();
+    }
+  }, [fireSingleItemViewedEvent, fireTableViewedEvent, totalCount]);
+  useEffect(() => {
+    const isResolved = status === 'resolved';
+    const isIssueViewMode = currentViewMode === 'table';
+    const isCountViewMode = currentViewMode === 'inline';
+    if (!isResolved) {
+      return;
+    }
+    if (isIssueViewMode) {
+      fireIssueViewAnalytics();
+    } else if (isCountViewMode) {
+      fireCountViewedEvent();
+    }
+  }, [currentViewMode, status, fireIssueViewAnalytics, fireCountViewedEvent]);
+  useColumnPickerRenderedFailedUfoExperience(status, experienceId);
+  const onSearch = useCallback((newParameters, {
+    searchMethod,
+    basicFilterSelections,
+    isQueryComplex
+  }) => {
+    searchCount.current++;
+    searchMethodSearchedWith.current = searchMethod;
+    basicFilterSelectionsSearchedWith.current = basicFilterSelections;
+    isSearchedWithComplexQuery.current = isQueryComplex;
+    if (jql !== newParameters.jql) {
+      userInteractions.add(DatasourceAction.QUERY_UPDATED);
+    }
+    setJql(newParameters.jql);
+    reset({
+      shouldForceRequest: true
+    });
+  }, [jql, reset, userInteractions]);
+  const onSiteSelection = useCallback(site => {
+    userInteractions.add(DatasourceAction.INSTANCE_UPDATED);
+    setJql('');
+    setCloudId(site.cloudId);
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset, userInteractions]);
+  const retrieveUrlForSmartCardRender = useCallback(() => {
+    var _data$key, _data$key$data;
+    const [data] = responseItems;
+    // agreement with BE that we will use `key` for rendering smartlink
+    return data === null || data === void 0 ? void 0 : (_data$key = data.key) === null || _data$key === void 0 ? void 0 : (_data$key$data = _data$key.data) === null || _data$key$data === void 0 ? void 0 : _data$key$data.url;
+  }, [responseItems]);
+  const onInsertPressed = useCallback((e, analyticsEvent) => {
+    var _insertButtonClickedE;
+    if (!isParametersSet || !jql || !selectedJiraSite) {
+      return;
+    }
+
+    // During insertion, we want the JQL of the datasource to be whatever is in the search bar,
+    // even if the user didn't previously click search
+    const upToDateJql = searchBarJql !== null && searchBarJql !== void 0 ? searchBarJql : jql;
+    const upToDateJqlUrl = selectedJiraSite && jql && `${selectedJiraSite.url}/issues/?jql=${encodeURIComponent(upToDateJql)}`;
+    const filterSelectionCount = availableBasicFilterTypes.reduce((current, filter) => {
+      var _basicFilterSelection;
+      return {
+        ...current,
+        [`${filter}BasicFilterSelectionCount`]: ((_basicFilterSelection = basicFilterSelectionsSearchedWith.current[filter]) === null || _basicFilterSelection === void 0 ? void 0 : _basicFilterSelection.length) || 0
+      };
+    }, {});
+    const insertButtonClickedEvent = analyticsEvent.update({
+      actionSubjectId: 'insert',
+      attributes: {
+        ...analyticsPayload,
+        totalItemCount: totalCount || 0,
+        displayedColumnCount: visibleColumnCount.current,
+        display: getDisplayValue(currentViewMode, totalCount || 0),
+        searchCount: searchCount.current,
+        searchMethod: mapSearchMethod(searchMethodSearchedWith.current),
+        actions: userInteractions.get(),
+        isQueryComplex: isSearchedWithComplexQuery.current,
+        ...(searchMethodSearchedWith.current === 'basic' ? {
+          ...filterSelectionCount
+        } : {})
+      },
+      eventType: 'ui'
+    });
+
+    // additional event for tracking in confluence against JIM
+    const macroInsertedEvent = analyticsEvent.clone();
+    macroInsertedEvent === null || macroInsertedEvent === void 0 ? void 0 : macroInsertedEvent.update({
+      eventType: 'track',
+      action: 'inserted',
+      actionSubject: 'macro',
+      actionSubjectId: 'jlol',
+      attributes: {
+        ...analyticsPayload,
+        totalItemCount: totalCount || 0,
+        displayedColumnCount: visibleColumnCount.current,
+        display: getDisplayValue(currentViewMode, totalCount || 0),
+        searchCount: searchCount.current,
+        searchMethod: mapSearchMethod(searchMethodSearchedWith.current),
+        actions: userInteractions.get()
+      }
+    });
+    const consumerEvent = (_insertButtonClickedE = insertButtonClickedEvent.clone()) !== null && _insertButtonClickedE !== void 0 ? _insertButtonClickedE : undefined;
+    insertButtonClickedEvent.fire(EVENT_CHANNEL);
+    const firstIssueUrl = retrieveUrlForSmartCardRender();
+    if (currentViewMode === 'inline') {
+      macroInsertedEvent === null || macroInsertedEvent === void 0 ? void 0 : macroInsertedEvent.fire(EVENT_CHANNEL);
+      const url = responseItems.length === 1 ? firstIssueUrl : upToDateJqlUrl;
+      onInsert({
+        type: 'inlineCard',
+        attrs: {
+          url
+        }
+      }, consumerEvent);
+    } else {
+      onInsert(buildDatasourceAdf({
+        id: datasourceId,
+        parameters: {
+          cloudId,
+          jql: upToDateJql // TODO support non JQL type
+        },
+        views: [{
+          type: 'table',
+          properties: {
+            columns: (visibleColumnKeys || []).map(key => {
+              const width = columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key];
+              const isWrapped = wrappedColumnKeys === null || wrappedColumnKeys === void 0 ? void 0 : wrappedColumnKeys.includes(key);
+              return {
+                key,
+                ...(width ? {
+                  width
+                } : {}),
+                ...(isWrapped ? {
+                  isWrapped
+                } : {})
+              };
+            })
+          }
+        }]
+      }, upToDateJqlUrl), consumerEvent);
+    }
+  }, [isParametersSet, jql, selectedJiraSite, searchBarJql, analyticsPayload, totalCount, currentViewMode, retrieveUrlForSmartCardRender, responseItems.length, onInsert, datasourceId, cloudId, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys, userInteractions]);
+  const handleViewModeChange = selectedMode => {
+    userInteractions.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
+    setCurrentViewMode(selectedMode);
+  };
+  const handleOnNextPage = useCallback((onNextPageProps = {}) => {
+    userInteractions.add(DatasourceAction.NEXT_PAGE_SCROLLED);
+    onNextPage(onNextPageProps);
+  }, [onNextPage, userInteractions]);
+  const handleVisibleColumnKeysChange = useCallback((newVisibleColumnKeys = []) => {
+    const columnAction = getColumnAction(visibleColumnKeys || [], newVisibleColumnKeys);
+    userInteractions.add(columnAction);
+    visibleColumnCount.current = newVisibleColumnKeys.length;
+    setVisibleColumnKeys(newVisibleColumnKeys);
+  }, [visibleColumnKeys, userInteractions]);
+  const issueLikeDataTableView = useMemo(() => jsx(ContentContainer, {
+    withTableBorder: true
+  }, jsx(IssueLikeDataTableView, {
+    testId: "jira-datasource-table",
+    status: status,
+    columns: columns,
+    items: responseItems,
+    hasNextPage: hasNextPage,
+    visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
+    onNextPage: handleOnNextPage,
+    onLoadDatasourceDetails: loadDatasourceDetails,
+    onVisibleColumnKeysChange: handleVisibleColumnKeysChange,
+    extensionKey: extensionKey,
+    columnCustomSizes: columnCustomSizes,
+    onColumnResize: onColumnResize,
+    wrappedColumnKeys: wrappedColumnKeys,
+    onWrappedColumnChange: fg('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
+  })), [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, handleOnNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
+  const renderCountModeContent = useCallback(() => {
+    const selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
+    if (status === 'unauthorized') {
+      return jsx(AccessRequired, {
+        url: selectedJiraSiteUrl || urlBeingEdited
+      });
+    } else if (status === 'empty' || !jql || !selectedJiraSiteUrl) {
+      return jsx(SmartCardPlaceholder, {
+        placeholderText: modalMessages.issuesCountSmartCardPlaceholderText
+      });
+    } else {
+      let url;
+      if (responseItems.length === 1 && retrieveUrlForSmartCardRender()) {
+        url = retrieveUrlForSmartCardRender();
+      } else {
+        url = `${selectedJiraSiteUrl}/issues/?jql=${encodeURIComponent(jql)}`;
+      }
+      return jsx(SmartLink, {
+        url: url
+      });
+    }
+  }, [jql, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited, responseItems, retrieveUrlForSmartCardRender]);
+  const renderIssuesModeContent = useCallback(() => {
+    const selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
+    if (status === 'rejected' && jqlUrl) {
+      return jsx(ModalLoadingError, {
+        errorMessage: jqlUrl ? jsx(FormattedMessage, _extends({}, modalMessages.checkConnectionWithSource, {
+          values: {
+            a: urlText => jsx("a", {
+              href: jqlUrl
+            }, urlText)
+          }
+        })) : undefined
+      });
+    } else if (status === 'unauthorized') {
+      return jsx(AccessRequired, {
+        url: selectedJiraSiteUrl || urlBeingEdited
+      });
+    } else if (resolvedWithNoResults || status === 'forbidden') {
+      return jsx(NoResults, null);
+    } else if (status === 'empty' || !columns.length) {
+      // persist the empty state when making the initial /data request which contains the columns
+      return jsx(ContentContainer, {
+        withTableBorder: !!jql
+      }, !!jql ? jsx(EmptyState, {
+        testId: `jira-datasource-modal--empty-state`
+      }) : jsx(InitialStateView, {
+        showBeta: !fg('platform.linking-platform.datasource.show-jlol-basic-filters'),
+        icon: jsx(JiraInitialStateSVG, null),
+        title: modalMessages.searchJiraTitle,
+        description: currentSearchMethod === 'jql' ? initialStateViewMessages.searchDescriptionForJQLSearch : initialStateViewMessages.searchDescriptionForBasicSearch,
+        learnMoreLink: currentSearchMethod === 'jql' ? {
+          href: jqlSupportDocumentLink,
+          text: initialStateViewMessages.learnMoreLink
+        } : undefined
+      }));
+    }
+    return issueLikeDataTableView;
+  }, [columns.length, currentSearchMethod, issueLikeDataTableView, jql, jqlUrl, resolvedWithNoResults, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
+  const siteSelectorLabel = availableSites && availableSites.length > 1 ? modalMessages.insertIssuesTitleManySites : modalMessages.insertIssuesTitle;
+  const getCancelButtonAnalyticsPayload = useCallback(() => {
+    return {
+      ...analyticsPayload,
+      searchCount: searchCount.current,
+      actions: userInteractions.get()
+    };
+  }, [analyticsPayload, userInteractions]);
+  return jsx(IntlMessagesProvider, {
+    defaultMessages: i18nEN,
+    loaderFn: fetchMessagesForLocale
+  }, jsx(ModalTransition, null, jsx(DatasourceModal, {
+    testId: "jira-datasource-modal",
+    onClose: onCancel
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx(SiteSelector, {
+    availableSites: availableSites,
+    onSiteSelection: onSiteSelection,
+    selectedSite: selectedJiraSite,
+    testId: "jira-datasource-modal--site-selector",
+    label: siteSelectorLabel
+  })), !hasNoJiraSites && jsx(DisplayViewDropDown, {
+    onViewModeChange: handleViewModeChange,
+    viewMode: currentViewMode
+  })), jsx(ModalBody, null, !hasNoJiraSites ? jsx(Fragment, null, jsx(JiraSearchContainer, {
+    setSearchBarJql: setSearchBarJql,
+    searchBarJql: searchBarJql,
+    isSearching: status === 'loading',
+    parameters: parameters,
+    onSearch: onSearch,
+    initialSearchMethod: initialSearchMethod,
+    onSearchMethodChange: setCurrentSearchMethod,
+    site: selectedJiraSite
+  }), currentViewMode === 'inline' ? renderCountModeContent() : renderIssuesModeContent()) : jsx(NoInstancesView, {
+    title: loadingErrorMessages.noAccessToJiraSitesTitle,
+    description: loadingErrorMessages.noAccessToJiraSitesDescription,
+    testId: `no-jira-instances-content`
+  })), jsx(ModalFooter, null, shouldShowIssueCount && jsx(TableSearchCount, {
+    searchCount: totalCount,
+    url: jqlUrl,
+    prefixTextType: "issue",
+    testId: "jira-datasource-modal-total-issues-count"
+  }), jsx(CancelButton, {
+    onCancel: onCancel,
+    getAnalyticsPayload: getCancelButtonAnalyticsPayload,
+    testId: "jira-datasource-modal--cancel-button"
+  }), !hasNoJiraSites && jsx(Button, {
+    appearance: "primary",
+    onClick: onInsertPressed,
+    isDisabled: isInsertDisabled,
+    testId: "jira-datasource-modal--insert-button"
+  }, jsx(FormattedMessage, modalMessages.insertIssuesButtonText))))));
+};

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

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/platform/no-preconditioning */
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
 /** @jsx jsx */
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
@@ -9,7 +11,7 @@ import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
 import { componentMetadata } from '../../../analytics/constants';
 import { DatasourceAction, DatasourceDisplay } from '../../../analytics/types';
@@ -35,18 +37,21 @@ import { CancelButton } from '../../common/modal/cancel-button';
 import { ContentContainer } from '../../common/modal/content-container';
 import { SmartCardPlaceholder, SmartLink } from '../../common/modal/count-view-smart-link';
 import { DatasourceModal } from '../../common/modal/datasource-modal';
-import { DisplayViewDropDown } from '../../common/modal/display-view-dropdown/display-view-drop-down';
+import { useColumnResize } from '../../common/modal/datasources-table-in-modal-preview/use-column-resize';
+import { useColumnWrapping } from '../../common/modal/datasources-table-in-modal-preview/use-column-wrapping';
+import { DatasourceViewModeDropDown } from '../../common/modal/mode-switcher';
+import { DatasourceViewModeProvider, useViewModeContext } from '../../common/modal/mode-switcher/useViewModeContext';
 import TableSearchCount from '../../common/modal/search-count';
 import { SiteSelector } from '../../common/modal/site-selector';
 import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
-import { useColumnResize } from '../../issue-like-table/use-column-resize';
-import { useColumnWrapping } from '../../issue-like-table/use-column-wrapping';
 import { getColumnAction } from '../../issue-like-table/utils';
 import { availableBasicFilterTypes } from '../basic-filters/ui';
 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 DEFAULT_VIEW_MODE = 'table';
 const getDisplayValue = (currentViewMode, itemCount) => {
   if (currentViewMode === 'table') {
     return DatasourceDisplay.DATASOURCE_TABLE;
@@ -61,12 +66,13 @@ const PlainJiraIssuesConfigModal = props => {
     wrappedColumnKeys: initialWrappedColumnKeys,
     onCancel,
     onInsert,
-    viewMode = 'table',
     parameters: initialParameters,
     url: urlBeingEdited,
     visibleColumnKeys: initialVisibleColumnKeys
   } = props;
-  const [currentViewMode, setCurrentViewMode] = useState(viewMode);
+  const {
+    currentViewMode
+  } = useViewModeContext();
   const [cloudId, setCloudId] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId);
   const {
     availableSites,
@@ -79,7 +85,9 @@ const PlainJiraIssuesConfigModal = props => {
   // analytics related parameters
   const searchCount = useRef(0);
   const userInteractions = useUserInteractions();
-  const initialSearchMethod = getBooleanFF('platform.linking-platform.datasource.show-jlol-basic-filters') && !isQueryTooComplex((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.jql) || '') ? 'basic' : 'jql';
+  const initialSearchMethod =
+  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+  fg('platform.linking-platform.datasource.show-jlol-basic-filters') && !isQueryTooComplex((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.jql) || '') ? 'basic' : 'jql';
   const [currentSearchMethod, setCurrentSearchMethod] = useState(initialSearchMethod);
   const searchMethodSearchedWith = useRef(null);
   const visibleColumnCount = useRef((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
@@ -332,10 +340,6 @@ const PlainJiraIssuesConfigModal = props => {
       }, upToDateJqlUrl), consumerEvent);
     }
   }, [isParametersSet, jql, selectedJiraSite, searchBarJql, analyticsPayload, totalCount, currentViewMode, retrieveUrlForSmartCardRender, responseItems.length, onInsert, datasourceId, cloudId, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys, userInteractions]);
-  const handleViewModeChange = selectedMode => {
-    userInteractions.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
-    setCurrentViewMode(selectedMode);
-  };
   const handleOnNextPage = useCallback((onNextPageProps = {}) => {
     userInteractions.add(DatasourceAction.NEXT_PAGE_SCROLLED);
     onNextPage(onNextPageProps);
@@ -362,7 +366,7 @@ const PlainJiraIssuesConfigModal = props => {
     columnCustomSizes: columnCustomSizes,
     onColumnResize: onColumnResize,
     wrappedColumnKeys: wrappedColumnKeys,
-    onWrappedColumnChange: getBooleanFF('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
+    onWrappedColumnChange: fg('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
   })), [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, handleOnNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
   const renderCountModeContent = useCallback(() => {
     const selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
@@ -411,7 +415,7 @@ const PlainJiraIssuesConfigModal = props => {
       }, !!jql ? jsx(EmptyState, {
         testId: `jira-datasource-modal--empty-state`
       }) : jsx(InitialStateView, {
-        showBeta: !getBooleanFF('platform.linking-platform.datasource.show-jlol-basic-filters'),
+        showBeta: !fg('platform.linking-platform.datasource.show-jlol-basic-filters'),
         icon: jsx(JiraInitialStateSVG, null),
         title: modalMessages.searchJiraTitle,
         description: currentSearchMethod === 'jql' ? initialStateViewMessages.searchDescriptionForJQLSearch : initialStateViewMessages.searchDescriptionForBasicSearch,
@@ -443,10 +447,7 @@ const PlainJiraIssuesConfigModal = props => {
     selectedSite: selectedJiraSite,
     testId: "jira-datasource-modal--site-selector",
     label: siteSelectorLabel
-  })), !hasNoJiraSites && jsx(DisplayViewDropDown, {
-    onViewModeChange: handleViewModeChange,
-    viewMode: currentViewMode
-  })), jsx(ModalBody, null, !hasNoJiraSites ? jsx(Fragment, null, jsx(JiraSearchContainer, {
+  })), !hasNoJiraSites && jsx(DatasourceViewModeDropDown, null)), jsx(ModalBody, null, !hasNoJiraSites ? jsx(Fragment, null, jsx(JiraSearchContainer, {
     setSearchBarJql: setSearchBarJql,
     searchBarJql: searchBarJql,
     isSearching: status === 'loading',
@@ -488,4 +489,9 @@ const contextData = {
     ...analyticsContextAttributes
   }
 };
-export const JiraIssuesConfigModal = withAnalyticsContext(contextData)(props => jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, jsx(PlainJiraIssuesConfigModal, props))));
+export const JiraIssuesConfigModal = withAnalyticsContext(contextData)(props => {
+  var _props$viewMode;
+  return jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, fg('platform-datasources-use-refactored-config-modal') ? jsx(DatasourceViewModeProvider, {
+    viewMode: (_props$viewMode = props.viewMode) !== null && _props$viewMode !== void 0 ? _props$viewMode : DEFAULT_VIEW_MODE
+  }, jsx(PlainJiraIssuesConfigModal, props)) : jsx(PlainJiraIssuesConfigModalOld, props)));
+});

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

@@ -20,11 +20,6 @@ export const modalMessages = defineMessages({
     description: 'Placeholder text that will be placed next to a count of jira issues',
     defaultMessage: '### Issues'
   },
-  issueText: {
-    id: 'linkDataSource.jira-issues.configmodal.issue',
-    description: 'Text that appears after issue count number.',
-    defaultMessage: '{totalCount, plural, one {issue} other {issues}}'
-  },
   searchJiraTitleDuplicate: {
     id: 'linkDataSource.jira-issues.searchJiraTitle',
     description: 'The initial modal search state title that gives the user some idea about how to get information',