@atlaskit/link-picker 3.10.6 → 3.11.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/link-picker
 
+## 3.11.0
+
+### Minor Changes
+
+- [`489caede2951a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/489caede2951a) -
+  [ux] link-picker-atlassian-plugin changes:
+
+  - Introduce GoogleDriveConnectBanner to support Google Drive tab experiment
+
+  link-picker changes:
+
+  - Extend the LinkPickerPlugin interface to include an optional banner render function
+  - Modify the usePlugins hook to collect the banner from the active plugin
+  - Add banner rendering in LinkPicker between the moveSubmitButton clause and SearchResults
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.10.6
 
 ### Patch Changes

package/dist/cjs/services/use-plugins/index.js

@@ -16,8 +16,11 @@ var _constants = require("../../common/constants");
 var _analytics2 = _interopRequireDefault(require("../../common/utils/analytics/analytics.codegen"));
 var _reducer = require("./reducer");
 var _utils = require("./utils");
+/* TODO(ASIMO-2105): cherrera2@ to remove persistent plugin banners once the experiment is over regardless of outcome */
+
 function usePlugins(state, activeTab, plugins) {
   var _activePlugin$tabKey;
+  var googleDriveTabExperimentEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useState = (0, _react.useState)(0),
@@ -132,6 +135,14 @@ function usePlugins(state, activeTab, plugins) {
   var items = pluginState.items,
     isLoading = pluginState.isLoading,
     error = pluginState.error;
+
+  // This is needed for the Google Drive tab experiment to show a persistent banner across tabs. Will be removed once the experiment is over regardless of outcome.
+  var pluginBanner = (0, _react.useMemo)(function () {
+    var _plugins$find;
+    return googleDriveTabExperimentEnabled ? plugins === null || plugins === void 0 || (_plugins$find = plugins.find(function (plugin) {
+      return plugin.banner;
+    })) === null || _plugins$find === void 0 ? void 0 : _plugins$find.banner : undefined;
+  }, [plugins, googleDriveTabExperimentEnabled]);
   return {
     tabs: tabs,
     items: items,
@@ -141,7 +152,8 @@ function usePlugins(state, activeTab, plugins) {
     error: error,
     retry: handleRetry,
     errorFallback: activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.errorFallback,
-    pluginAction: activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.action
+    pluginAction: activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.action,
+    pluginBanner: pluginBanner
   };
 }
 function limit(items) {

package/dist/cjs/ui/link-picker/index.js

@@ -19,6 +19,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _reactIntlNext = require("react-intl-next");
 var _uuid = _interopRequireDefault(require("uuid"));
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
 var _form = require("@atlaskit/form");
 var _linkProvider = require("@atlaskit/link-provider");
 var _url2 = require("@atlaskit/linking-common/url");
@@ -135,7 +136,11 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     hasPreview = state.hasPreview;
   var intl = (0, _reactIntlNext.useIntl)();
   var queryState = (0, _useSearchQuery.useSearchQuery)(state);
-  var _usePlugins = (0, _usePlugins2.usePlugins)(queryState, activeTab, plugins),
+
+  // Experiment with new 3P tabs in link picker where "Google Drive" is shown as the second tab. For more info, please see: go/link-picker-3p-drive-one-pager.
+  var linkPicker3pDriveExperimentCohort = _featureGateJsClient.default.initializeCalled() ? _featureGateJsClient.default.getExperimentValue('link_picker_3p_drive_experiment', 'cohort', 'control') : 'control';
+  var googleDriveTabExperimentEnabled = linkPicker3pDriveExperimentCohort === 'show_google_drive_tab';
+  var _usePlugins = (0, _usePlugins2.usePlugins)(queryState, activeTab, plugins, googleDriveTabExperimentEnabled),
     items = _usePlugins.items,
     isLoadingResults = _usePlugins.isLoading,
     isActivePlugin = _usePlugins.isActivePlugin,
@@ -143,7 +148,8 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     tabs = _usePlugins.tabs,
     error = _usePlugins.error,
     retry = _usePlugins.retry,
-    pluginAction = _usePlugins.pluginAction;
+    pluginAction = _usePlugins.pluginAction,
+    pluginBanner = _usePlugins.pluginBanner;
   var isEditing = !!initUrl;
   var selectedItem = items === null || items === void 0 ? void 0 : items[selectedIndex];
   var isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
@@ -472,7 +478,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     submitMessageId: submitMessageId,
     testId: testIds.insertButton,
     url: url
-  })), !!queryState && (isLoadingPlugins || isActivePlugin) && /*#__PURE__*/React.createElement(_searchResults.SearchResults, {
+  })), googleDriveTabExperimentEnabled && pluginBanner && pluginBanner(), !!queryState && (isLoadingPlugins || isActivePlugin) && /*#__PURE__*/React.createElement(_searchResults.SearchResults, {
     activeTab: activeTab,
     tabs: tabs,
     activePlugin: activePlugin,

package/dist/cjs/ui/main.js

@@ -25,7 +25,7 @@ var testIds = exports.testIds = {
 };
 var PACKAGE_DATA = exports.PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "0.0.0-development" || '',
+  packageVersion: "3.10.6" || '',
   componentName: _constants.COMPONENT_NAME,
   source: _constants.COMPONENT_NAME
 };

package/dist/es2019/services/use-plugins/index.js

@@ -1,3 +1,4 @@
+/* TODO(ASIMO-2105): cherrera2@ to remove persistent plugin banners once the experiment is over regardless of outcome */
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { convertToError } from '@atlaskit/frontend-utilities/convert-to-error';
@@ -6,7 +7,7 @@ import { ANALYTICS_CHANNEL, RECENT_SEARCH_LIST_SIZE } from '../../common/constan
 import createEventPayload from '../../common/utils/analytics/analytics.codegen';
 import { usePluginReducer } from './reducer';
 import { CancellationError, resolvePluginUpdates } from './utils';
-export function usePlugins(state, activeTab, plugins) {
+export function usePlugins(state, activeTab, plugins, googleDriveTabExperimentEnabled = false) {
   var _activePlugin$tabKey;
   const {
     createAnalyticsEvent
@@ -90,6 +91,12 @@ export function usePlugins(state, activeTab, plugins) {
     isLoading,
     error
   } = pluginState;
+
+  // This is needed for the Google Drive tab experiment to show a persistent banner across tabs. Will be removed once the experiment is over regardless of outcome.
+  const pluginBanner = useMemo(() => {
+    var _plugins$find;
+    return googleDriveTabExperimentEnabled ? plugins === null || plugins === void 0 ? void 0 : (_plugins$find = plugins.find(plugin => plugin.banner)) === null || _plugins$find === void 0 ? void 0 : _plugins$find.banner : undefined;
+  }, [plugins, googleDriveTabExperimentEnabled]);
   return {
     tabs,
     items,
@@ -99,7 +106,8 @@ export function usePlugins(state, activeTab, plugins) {
     error,
     retry: handleRetry,
     errorFallback: activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.errorFallback,
-    pluginAction: activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.action
+    pluginAction: activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.action,
+    pluginBanner
   };
 }
 function limit(items) {

package/dist/es2019/ui/link-picker/index.js

@@ -7,6 +7,7 @@ import { Fragment, memo, useCallback, useLayoutEffect, useMemo, useReducer } fro
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import uuid from 'uuid';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { HelperMessage } from '@atlaskit/form';
 import { CardClient } from '@atlaskit/link-provider';
 import { isSafeUrl, normalizeUrl } from '@atlaskit/linking-common/url';
@@ -125,6 +126,10 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   } = state;
   const intl = useIntl();
   const queryState = useSearchQuery(state);
+
+  // Experiment with new 3P tabs in link picker where "Google Drive" is shown as the second tab. For more info, please see: go/link-picker-3p-drive-one-pager.
+  const linkPicker3pDriveExperimentCohort = FeatureGates.initializeCalled() ? FeatureGates.getExperimentValue('link_picker_3p_drive_experiment', 'cohort', 'control') : 'control';
+  const googleDriveTabExperimentEnabled = linkPicker3pDriveExperimentCohort === 'show_google_drive_tab';
   const {
     items,
     isLoading: isLoadingResults,
@@ -133,8 +138,9 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     tabs,
     error,
     retry,
-    pluginAction
-  } = usePlugins(queryState, activeTab, plugins);
+    pluginAction,
+    pluginBanner
+  } = usePlugins(queryState, activeTab, plugins, googleDriveTabExperimentEnabled);
   const isEditing = !!initUrl;
   const selectedItem = items === null || items === void 0 ? void 0 : items[selectedIndex];
   const isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
@@ -427,7 +433,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     submitMessageId: submitMessageId,
     testId: testIds.insertButton,
     url: url
-  })), !!queryState && (isLoadingPlugins || isActivePlugin) && /*#__PURE__*/React.createElement(SearchResults, {
+  })), googleDriveTabExperimentEnabled && pluginBanner && pluginBanner(), !!queryState && (isLoadingPlugins || isActivePlugin) && /*#__PURE__*/React.createElement(SearchResults, {
     activeTab: activeTab,
     tabs: tabs,
     activePlugin: activePlugin,

package/dist/es2019/ui/main.js

@@ -15,7 +15,7 @@ export const testIds = {
 };
 export const PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "0.0.0-development" || '',
+  packageVersion: "3.10.6" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

package/dist/esm/services/use-plugins/index.js

@@ -1,6 +1,7 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+/* TODO(ASIMO-2105): cherrera2@ to remove persistent plugin banners once the experiment is over regardless of outcome */
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { convertToError } from '@atlaskit/frontend-utilities/convert-to-error';
@@ -11,6 +12,7 @@ import { usePluginReducer } from './reducer';
 import { CancellationError, resolvePluginUpdates } from './utils';
 export function usePlugins(state, activeTab, plugins) {
   var _activePlugin$tabKey;
+  var googleDriveTabExperimentEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useState = useState(0),
@@ -125,6 +127,14 @@ export function usePlugins(state, activeTab, plugins) {
   var items = pluginState.items,
     isLoading = pluginState.isLoading,
     error = pluginState.error;
+
+  // This is needed for the Google Drive tab experiment to show a persistent banner across tabs. Will be removed once the experiment is over regardless of outcome.
+  var pluginBanner = useMemo(function () {
+    var _plugins$find;
+    return googleDriveTabExperimentEnabled ? plugins === null || plugins === void 0 || (_plugins$find = plugins.find(function (plugin) {
+      return plugin.banner;
+    })) === null || _plugins$find === void 0 ? void 0 : _plugins$find.banner : undefined;
+  }, [plugins, googleDriveTabExperimentEnabled]);
   return {
     tabs: tabs,
     items: items,
@@ -134,7 +144,8 @@ export function usePlugins(state, activeTab, plugins) {
     error: error,
     retry: handleRetry,
     errorFallback: activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.errorFallback,
-    pluginAction: activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.action
+    pluginAction: activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.action,
+    pluginBanner: pluginBanner
   };
 }
 function limit(items) {

package/dist/esm/ui/link-picker/index.js

@@ -13,6 +13,7 @@ import { Fragment, memo, useCallback, useLayoutEffect, useMemo, useReducer } fro
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import uuid from 'uuid';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { HelperMessage } from '@atlaskit/form';
 import { CardClient } from '@atlaskit/link-provider';
 import { isSafeUrl, normalizeUrl } from '@atlaskit/linking-common/url';
@@ -126,7 +127,11 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     hasPreview = state.hasPreview;
   var intl = useIntl();
   var queryState = useSearchQuery(state);
-  var _usePlugins = usePlugins(queryState, activeTab, plugins),
+
+  // Experiment with new 3P tabs in link picker where "Google Drive" is shown as the second tab. For more info, please see: go/link-picker-3p-drive-one-pager.
+  var linkPicker3pDriveExperimentCohort = FeatureGates.initializeCalled() ? FeatureGates.getExperimentValue('link_picker_3p_drive_experiment', 'cohort', 'control') : 'control';
+  var googleDriveTabExperimentEnabled = linkPicker3pDriveExperimentCohort === 'show_google_drive_tab';
+  var _usePlugins = usePlugins(queryState, activeTab, plugins, googleDriveTabExperimentEnabled),
     items = _usePlugins.items,
     isLoadingResults = _usePlugins.isLoading,
     isActivePlugin = _usePlugins.isActivePlugin,
@@ -134,7 +139,8 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     tabs = _usePlugins.tabs,
     error = _usePlugins.error,
     retry = _usePlugins.retry,
-    pluginAction = _usePlugins.pluginAction;
+    pluginAction = _usePlugins.pluginAction,
+    pluginBanner = _usePlugins.pluginBanner;
   var isEditing = !!initUrl;
   var selectedItem = items === null || items === void 0 ? void 0 : items[selectedIndex];
   var isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
@@ -463,7 +469,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     submitMessageId: submitMessageId,
     testId: testIds.insertButton,
     url: url
-  })), !!queryState && (isLoadingPlugins || isActivePlugin) && /*#__PURE__*/React.createElement(SearchResults, {
+  })), googleDriveTabExperimentEnabled && pluginBanner && pluginBanner(), !!queryState && (isLoadingPlugins || isActivePlugin) && /*#__PURE__*/React.createElement(SearchResults, {
     activeTab: activeTab,
     tabs: tabs,
     activePlugin: activePlugin,

package/dist/esm/ui/main.js

@@ -16,7 +16,7 @@ export var testIds = {
 };
 export var PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "0.0.0-development" || '',
+  packageVersion: "3.10.6" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

package/dist/types/common/types.d.ts

@@ -55,6 +55,8 @@ export interface LinkPickerPlugin {
     errorFallback?: LinkPickerPluginErrorFallback;
     /** Render function to customise the UI that is displayed when there are no results, but an empty form (no search term) */
     emptyStateNoResults?: LinkPickerPluginEmptyStateNoResults;
+    /** Render function to display a banner above the search results. This is exclusively used for the Google Drive tab experiment. */
+    banner?: LinkPickerPluginBanner;
     /** Metadata about the plugin */
     meta?: {
         /** The data source that provides all results provided by the plugin */
@@ -73,6 +75,7 @@ export interface LinkPickerPluginAction {
 }
 export type LinkPickerPluginErrorFallback = (error: unknown, retry: () => void) => ReactNode;
 export type LinkPickerPluginEmptyStateNoResults = () => ReactNode;
+export type LinkPickerPluginBanner = () => ReactNode;
 export interface PickerState {
     selectedIndex: number;
     activeIndex: number;

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 export { default } from './ui';
 export { DeprecatedLazyLinkPickerExport as LinkPicker } from './ui';
 export type { LinkPickerProps } from './common/types';
-export type { LinkInputType, LinkPickerPluginAction, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, LinkPickerPluginErrorFallback, LinkPickerPluginEmptyStateNoResults, LinkPickerUiOptions, } from './common/types';
+export type { LinkInputType, LinkPickerPluginAction, LinkPickerPluginBanner, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, LinkPickerPluginErrorFallback, LinkPickerPluginEmptyStateNoResults, LinkPickerUiOptions, } from './common/types';
 export { UnauthenticatedError } from './common/utils/errors';
 export { LoaderFallback } from './ui/loader-fallback';

package/dist/types/services/use-plugins/index.d.ts

@@ -1,4 +1,4 @@
-import { type LinkPickerPlugin, type LinkPickerPluginAction, type LinkPickerPluginErrorFallback, type LinkPickerState, type LinkSearchListItemData } from '../../common/types';
+import { type LinkPickerPlugin, type LinkPickerPluginAction, type LinkPickerPluginBanner, type LinkPickerPluginErrorFallback, type LinkPickerState, type LinkSearchListItemData } from '../../common/types';
 export interface LinkPickerPluginsService {
     items: LinkSearchListItemData[] | null;
     isLoading: boolean;
@@ -11,5 +11,6 @@ export interface LinkPickerPluginsService {
     retry: () => void;
     errorFallback?: LinkPickerPluginErrorFallback;
     pluginAction?: LinkPickerPluginAction;
+    pluginBanner?: LinkPickerPluginBanner;
 }
-export declare function usePlugins(state: LinkPickerState | null, activeTab: number, plugins?: LinkPickerPlugin[]): LinkPickerPluginsService;
+export declare function usePlugins(state: LinkPickerState | null, activeTab: number, plugins?: LinkPickerPlugin[], googleDriveTabExperimentEnabled?: boolean): LinkPickerPluginsService;

package/dist/types-ts4.5/common/types.d.ts

@@ -58,6 +58,8 @@ export interface LinkPickerPlugin {
     errorFallback?: LinkPickerPluginErrorFallback;
     /** Render function to customise the UI that is displayed when there are no results, but an empty form (no search term) */
     emptyStateNoResults?: LinkPickerPluginEmptyStateNoResults;
+    /** Render function to display a banner above the search results. This is exclusively used for the Google Drive tab experiment. */
+    banner?: LinkPickerPluginBanner;
     /** Metadata about the plugin */
     meta?: {
         /** The data source that provides all results provided by the plugin */
@@ -76,6 +78,7 @@ export interface LinkPickerPluginAction {
 }
 export type LinkPickerPluginErrorFallback = (error: unknown, retry: () => void) => ReactNode;
 export type LinkPickerPluginEmptyStateNoResults = () => ReactNode;
+export type LinkPickerPluginBanner = () => ReactNode;
 export interface PickerState {
     selectedIndex: number;
     activeIndex: number;

package/dist/types-ts4.5/index.d.ts

@@ -1,6 +1,6 @@
 export { default } from './ui';
 export { DeprecatedLazyLinkPickerExport as LinkPicker } from './ui';
 export type { LinkPickerProps } from './common/types';
-export type { LinkInputType, LinkPickerPluginAction, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, LinkPickerPluginErrorFallback, LinkPickerPluginEmptyStateNoResults, LinkPickerUiOptions, } from './common/types';
+export type { LinkInputType, LinkPickerPluginAction, LinkPickerPluginBanner, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, LinkPickerPluginErrorFallback, LinkPickerPluginEmptyStateNoResults, LinkPickerUiOptions, } from './common/types';
 export { UnauthenticatedError } from './common/utils/errors';
 export { LoaderFallback } from './ui/loader-fallback';

package/dist/types-ts4.5/services/use-plugins/index.d.ts

@@ -1,4 +1,4 @@
-import { type LinkPickerPlugin, type LinkPickerPluginAction, type LinkPickerPluginErrorFallback, type LinkPickerState, type LinkSearchListItemData } from '../../common/types';
+import { type LinkPickerPlugin, type LinkPickerPluginAction, type LinkPickerPluginBanner, type LinkPickerPluginErrorFallback, type LinkPickerState, type LinkSearchListItemData } from '../../common/types';
 export interface LinkPickerPluginsService {
     items: LinkSearchListItemData[] | null;
     isLoading: boolean;
@@ -11,5 +11,6 @@ export interface LinkPickerPluginsService {
     retry: () => void;
     errorFallback?: LinkPickerPluginErrorFallback;
     pluginAction?: LinkPickerPluginAction;
+    pluginBanner?: LinkPickerPluginBanner;
 }
-export declare function usePlugins(state: LinkPickerState | null, activeTab: number, plugins?: LinkPickerPlugin[]): LinkPickerPluginsService;
+export declare function usePlugins(state: LinkPickerState | null, activeTab: number, plugins?: LinkPickerPlugin[], googleDriveTabExperimentEnabled?: boolean): LinkPickerPluginsService;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "3.10.6",
+	"version": "3.11.0",
 	"description": "Standalone link picker",
 	"author": "Atlassian Pty Ltd",
 	"publishConfig": {
@@ -51,7 +51,7 @@
 	"dependencies": {
 		"@atlaskit/afm-i18n-platform-linking-platform-link-picker": "2.7.0",
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/atlassian-context": "^0.5.0",
+		"@atlaskit/atlassian-context": "^0.6.0",
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/feature-gate-js-client": "^5.5.0",