@atlaskit/editor-plugin-media-insert 25.0.5 → 25.0.6

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-media-insert
 
+## 25.0.6
+
+### Patch Changes
+
+- [`7e9f79a61fe1b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7e9f79a61fe1b) -
+  [ux] Applies some refactors and renames to the work for media insert tab analytics, keeping the
+  element names more relevant to their functions, adds commentary, and cleans up duplicate code.
+- Updated dependencies
+
 ## 25.0.5
 
 ### Patch Changes

package/dist/cjs/ui/MediaInsertPicker.js

@@ -49,7 +49,10 @@ var getNextTabIndexForKey = function getNextTabIndexForKey(currentTabIndex, tabC
   }
   return undefined;
 };
-var AnalyticsTab = function AnalyticsTab(_ref) {
+var getLinkTabIndex = function getLinkTabIndex(registeredTabCount, isOnlyExternalLinks) {
+  return registeredTabCount + (isOnlyExternalLinks ? 0 : 1);
+};
+var TabWithAnalytics = function TabWithAnalytics(_ref) {
   var children = _ref.children,
     onSelectTabForAnalytics = _ref.onSelectTabForAnalytics,
     selectedTabIndex = _ref.selectedTabIndex,
@@ -161,6 +164,7 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
     autofocusRef = _useUnholyAutofocus.autofocusRef,
     onPositionCalculated = _useUnholyAutofocus.onPositionCalculated;
   var tabCount = isMediaInsertTabWithAnalyticsEnabled ? registeredTabs.length + (isOnlyExternalLinks ? 1 : 2) : 0;
+  var linkTabIndex = isMediaInsertTabWithAnalyticsEnabled ? getLinkTabIndex(registeredTabs.length, isOnlyExternalLinks) : 0;
   var getTabAnalyticsMetadata = _react.default.useCallback(function (selectedTabIndex) {
     var registeredTab = registeredTabs[selectedTabIndex];
     if (registeredTab) {
@@ -176,7 +180,6 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
         selectedTabIndex: selectedTabIndex
       };
     }
-    var linkTabIndex = registeredTabs.length + (isOnlyExternalLinks ? 0 : 1);
     if (selectedTabIndex === linkTabIndex) {
       return {
         selectedTab: _analytics.MEDIA_INSERT_TAB.LINK,
@@ -187,7 +190,7 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
       selectedTab: 'unknown',
       selectedTabIndex: selectedTabIndex
     };
-  }, [isOnlyExternalLinks, registeredTabs]);
+  }, [isOnlyExternalLinks, linkTabIndex, registeredTabs]);
   var selectedTabAnalyticsMetadataRef = _react.default.useRef(getTabAnalyticsMetadata(0));
   var tabsAnalyticsContext = _react.default.useMemo(function () {
     return {
@@ -200,6 +203,9 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
     selectedTabAnalyticsMetadataRef.current = getTabAnalyticsMetadata(selectedTabIndex);
   }, [getTabAnalyticsMetadata]);
   var hasDispatchedInitialTabViewedEventRef = _react.default.useRef(false);
+  // Atlaskit Tabs only calls `onChange` after the user changes tabs, so the
+  // initially opened tab needs its viewed analytics event dispatched from an
+  // effect. The ref keeps this to once per picker open without setting state.
   _react.default.useEffect(function () {
     if (!isMediaInsertTabWithAnalyticsEnabled || !isOpen) {
       hasDispatchedInitialTabViewedEventRef.current = false;
@@ -210,8 +216,6 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
     }
     var selectedTabMetadata = getTabAnalyticsMetadata(0);
     selectedTabAnalyticsMetadataRef.current = selectedTabMetadata;
-    // Atlaskit Tabs only calls `onChange` after the user changes tabs. Fire the
-    // initial viewed event once per picker open so the first rendered tab is also tracked.
     var payload = {
       action: _analytics.ACTION.VIEWED,
       actionSubject: _analytics.ACTION_SUBJECT.PICKER,
@@ -278,7 +282,6 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
     };
   };
   var fileTabTitle = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc_page_experiences_editor_image_generation', 'isEnabled', true) ? intl.formatMessage(_messages.mediaInsertMessages.uploadTabTitle) : intl.formatMessage(_messages.mediaInsertMessages.fileTabTitle);
-  var linkTabIndex = isMediaInsertTabWithAnalyticsEnabled ? registeredTabs.length + (isOnlyExternalLinks ? 0 : 1) : 0;
   return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
     ariaLabel: intl.formatMessage(_messages.mediaInsertMessages.mediaPickerPopupAriaLabel)
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
@@ -306,17 +309,17 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
     }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       paddingBlockEnd: "space.150"
     }, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, isMediaInsertTabWithAnalyticsEnabled && registeredTabs.map(function (tab, index) {
-      return /*#__PURE__*/_react.default.createElement(AnalyticsTab, {
+      return /*#__PURE__*/_react.default.createElement(TabWithAnalytics, {
         key: tab.key,
         onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
         selectedTabIndex: index,
         tabCount: tabCount
       }, tab.label);
-    }), isMediaInsertTabWithAnalyticsEnabled && !isOnlyExternalLinks && /*#__PURE__*/_react.default.createElement(AnalyticsTab, {
+    }), isMediaInsertTabWithAnalyticsEnabled && !isOnlyExternalLinks && /*#__PURE__*/_react.default.createElement(TabWithAnalytics, {
       onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
       selectedTabIndex: registeredTabs.length,
       tabCount: tabCount
-    }, fileTabTitle), isMediaInsertTabWithAnalyticsEnabled && /*#__PURE__*/_react.default.createElement(AnalyticsTab, {
+    }, fileTabTitle), isMediaInsertTabWithAnalyticsEnabled && /*#__PURE__*/_react.default.createElement(TabWithAnalytics, {
       onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
       selectedTabIndex: linkTabIndex,
       tabCount: tabCount

package/dist/es2019/ui/MediaInsertPicker.js

@@ -35,7 +35,8 @@ const getNextTabIndexForKey = (currentTabIndex, tabCount, key) => {
   }
   return undefined;
 };
-const AnalyticsTab = ({
+const getLinkTabIndex = (registeredTabCount, isOnlyExternalLinks) => registeredTabCount + (isOnlyExternalLinks ? 0 : 1);
+const TabWithAnalytics = ({
   children,
   onSelectTabForAnalytics,
   selectedTabIndex,
@@ -151,6 +152,7 @@ export const MediaInsertPicker = ({
     onPositionCalculated
   } = useUnholyAutofocus();
   const tabCount = isMediaInsertTabWithAnalyticsEnabled ? registeredTabs.length + (isOnlyExternalLinks ? 1 : 2) : 0;
+  const linkTabIndex = isMediaInsertTabWithAnalyticsEnabled ? getLinkTabIndex(registeredTabs.length, isOnlyExternalLinks) : 0;
   const getTabAnalyticsMetadata = React.useCallback(selectedTabIndex => {
     const registeredTab = registeredTabs[selectedTabIndex];
     if (registeredTab) {
@@ -166,7 +168,6 @@ export const MediaInsertPicker = ({
         selectedTabIndex
       };
     }
-    const linkTabIndex = registeredTabs.length + (isOnlyExternalLinks ? 0 : 1);
     if (selectedTabIndex === linkTabIndex) {
       return {
         selectedTab: MEDIA_INSERT_TAB.LINK,
@@ -177,7 +178,7 @@ export const MediaInsertPicker = ({
       selectedTab: 'unknown',
       selectedTabIndex
     };
-  }, [isOnlyExternalLinks, registeredTabs]);
+  }, [isOnlyExternalLinks, linkTabIndex, registeredTabs]);
   const selectedTabAnalyticsMetadataRef = React.useRef(getTabAnalyticsMetadata(0));
   const tabsAnalyticsContext = React.useMemo(() => ({
     get source() {
@@ -188,6 +189,9 @@ export const MediaInsertPicker = ({
     selectedTabAnalyticsMetadataRef.current = getTabAnalyticsMetadata(selectedTabIndex);
   }, [getTabAnalyticsMetadata]);
   const hasDispatchedInitialTabViewedEventRef = React.useRef(false);
+  // Atlaskit Tabs only calls `onChange` after the user changes tabs, so the
+  // initially opened tab needs its viewed analytics event dispatched from an
+  // effect. The ref keeps this to once per picker open without setting state.
   React.useEffect(() => {
     if (!isMediaInsertTabWithAnalyticsEnabled || !isOpen) {
       hasDispatchedInitialTabViewedEventRef.current = false;
@@ -198,8 +202,6 @@ export const MediaInsertPicker = ({
     }
     const selectedTabMetadata = getTabAnalyticsMetadata(0);
     selectedTabAnalyticsMetadataRef.current = selectedTabMetadata;
-    // Atlaskit Tabs only calls `onChange` after the user changes tabs. Fire the
-    // initial viewed event once per picker open so the first rendered tab is also tracked.
     const payload = {
       action: ACTION.VIEWED,
       actionSubject: ACTION_SUBJECT.PICKER,
@@ -264,7 +266,6 @@ export const MediaInsertPicker = ({
     focusEditor();
   };
   const fileTabTitle = expValEqualsNoExposure('cc_page_experiences_editor_image_generation', 'isEnabled', true) ? intl.formatMessage(mediaInsertMessages.uploadTabTitle) : intl.formatMessage(mediaInsertMessages.fileTabTitle);
-  const linkTabIndex = isMediaInsertTabWithAnalyticsEnabled ? registeredTabs.length + (isOnlyExternalLinks ? 0 : 1) : 0;
   return /*#__PURE__*/React.createElement(PopupWithListeners, {
     ariaLabel: intl.formatMessage(mediaInsertMessages.mediaPickerPopupAriaLabel)
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
@@ -290,16 +291,16 @@ export const MediaInsertPicker = ({
     onChange: isMediaInsertTabWithAnalyticsEnabled ? handleTabChange : undefined
   }, /*#__PURE__*/React.createElement(Box, {
     paddingBlockEnd: "space.150"
-  }, /*#__PURE__*/React.createElement(TabList, null, isMediaInsertTabWithAnalyticsEnabled && registeredTabs.map((tab, index) => /*#__PURE__*/React.createElement(AnalyticsTab, {
+  }, /*#__PURE__*/React.createElement(TabList, null, isMediaInsertTabWithAnalyticsEnabled && registeredTabs.map((tab, index) => /*#__PURE__*/React.createElement(TabWithAnalytics, {
     key: tab.key,
     onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
     selectedTabIndex: index,
     tabCount: tabCount
-  }, tab.label)), isMediaInsertTabWithAnalyticsEnabled && !isOnlyExternalLinks && /*#__PURE__*/React.createElement(AnalyticsTab, {
+  }, tab.label)), isMediaInsertTabWithAnalyticsEnabled && !isOnlyExternalLinks && /*#__PURE__*/React.createElement(TabWithAnalytics, {
     onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
     selectedTabIndex: registeredTabs.length,
     tabCount: tabCount
-  }, fileTabTitle), isMediaInsertTabWithAnalyticsEnabled && /*#__PURE__*/React.createElement(AnalyticsTab, {
+  }, fileTabTitle), isMediaInsertTabWithAnalyticsEnabled && /*#__PURE__*/React.createElement(TabWithAnalytics, {
     onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
     selectedTabIndex: linkTabIndex,
     tabCount: tabCount

package/dist/esm/ui/MediaInsertPicker.js

@@ -40,7 +40,10 @@ var getNextTabIndexForKey = function getNextTabIndexForKey(currentTabIndex, tabC
   }
   return undefined;
 };
-var AnalyticsTab = function AnalyticsTab(_ref) {
+var getLinkTabIndex = function getLinkTabIndex(registeredTabCount, isOnlyExternalLinks) {
+  return registeredTabCount + (isOnlyExternalLinks ? 0 : 1);
+};
+var TabWithAnalytics = function TabWithAnalytics(_ref) {
   var children = _ref.children,
     onSelectTabForAnalytics = _ref.onSelectTabForAnalytics,
     selectedTabIndex = _ref.selectedTabIndex,
@@ -152,6 +155,7 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
     autofocusRef = _useUnholyAutofocus.autofocusRef,
     onPositionCalculated = _useUnholyAutofocus.onPositionCalculated;
   var tabCount = isMediaInsertTabWithAnalyticsEnabled ? registeredTabs.length + (isOnlyExternalLinks ? 1 : 2) : 0;
+  var linkTabIndex = isMediaInsertTabWithAnalyticsEnabled ? getLinkTabIndex(registeredTabs.length, isOnlyExternalLinks) : 0;
   var getTabAnalyticsMetadata = React.useCallback(function (selectedTabIndex) {
     var registeredTab = registeredTabs[selectedTabIndex];
     if (registeredTab) {
@@ -167,7 +171,6 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
         selectedTabIndex: selectedTabIndex
       };
     }
-    var linkTabIndex = registeredTabs.length + (isOnlyExternalLinks ? 0 : 1);
     if (selectedTabIndex === linkTabIndex) {
       return {
         selectedTab: MEDIA_INSERT_TAB.LINK,
@@ -178,7 +181,7 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
       selectedTab: 'unknown',
       selectedTabIndex: selectedTabIndex
     };
-  }, [isOnlyExternalLinks, registeredTabs]);
+  }, [isOnlyExternalLinks, linkTabIndex, registeredTabs]);
   var selectedTabAnalyticsMetadataRef = React.useRef(getTabAnalyticsMetadata(0));
   var tabsAnalyticsContext = React.useMemo(function () {
     return {
@@ -191,6 +194,9 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
     selectedTabAnalyticsMetadataRef.current = getTabAnalyticsMetadata(selectedTabIndex);
   }, [getTabAnalyticsMetadata]);
   var hasDispatchedInitialTabViewedEventRef = React.useRef(false);
+  // Atlaskit Tabs only calls `onChange` after the user changes tabs, so the
+  // initially opened tab needs its viewed analytics event dispatched from an
+  // effect. The ref keeps this to once per picker open without setting state.
   React.useEffect(function () {
     if (!isMediaInsertTabWithAnalyticsEnabled || !isOpen) {
       hasDispatchedInitialTabViewedEventRef.current = false;
@@ -201,8 +207,6 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
     }
     var selectedTabMetadata = getTabAnalyticsMetadata(0);
     selectedTabAnalyticsMetadataRef.current = selectedTabMetadata;
-    // Atlaskit Tabs only calls `onChange` after the user changes tabs. Fire the
-    // initial viewed event once per picker open so the first rendered tab is also tracked.
     var payload = {
       action: ACTION.VIEWED,
       actionSubject: ACTION_SUBJECT.PICKER,
@@ -269,7 +273,6 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
     };
   };
   var fileTabTitle = expValEqualsNoExposure('cc_page_experiences_editor_image_generation', 'isEnabled', true) ? intl.formatMessage(mediaInsertMessages.uploadTabTitle) : intl.formatMessage(mediaInsertMessages.fileTabTitle);
-  var linkTabIndex = isMediaInsertTabWithAnalyticsEnabled ? registeredTabs.length + (isOnlyExternalLinks ? 0 : 1) : 0;
   return /*#__PURE__*/React.createElement(PopupWithListeners, {
     ariaLabel: intl.formatMessage(mediaInsertMessages.mediaPickerPopupAriaLabel)
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
@@ -297,17 +300,17 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
     }, /*#__PURE__*/React.createElement(Box, {
       paddingBlockEnd: "space.150"
     }, /*#__PURE__*/React.createElement(TabList, null, isMediaInsertTabWithAnalyticsEnabled && registeredTabs.map(function (tab, index) {
-      return /*#__PURE__*/React.createElement(AnalyticsTab, {
+      return /*#__PURE__*/React.createElement(TabWithAnalytics, {
         key: tab.key,
         onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
         selectedTabIndex: index,
         tabCount: tabCount
       }, tab.label);
-    }), isMediaInsertTabWithAnalyticsEnabled && !isOnlyExternalLinks && /*#__PURE__*/React.createElement(AnalyticsTab, {
+    }), isMediaInsertTabWithAnalyticsEnabled && !isOnlyExternalLinks && /*#__PURE__*/React.createElement(TabWithAnalytics, {
       onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
       selectedTabIndex: registeredTabs.length,
       tabCount: tabCount
-    }, fileTabTitle), isMediaInsertTabWithAnalyticsEnabled && /*#__PURE__*/React.createElement(AnalyticsTab, {
+    }, fileTabTitle), isMediaInsertTabWithAnalyticsEnabled && /*#__PURE__*/React.createElement(TabWithAnalytics, {
       onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
       selectedTabIndex: linkTabIndex,
       tabCount: tabCount

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media-insert",
-	"version": "25.0.5",
+	"version": "25.0.6",
 	"description": "Media Insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,7 +38,7 @@
 		"@atlaskit/section-message": "^9.0.0",
 		"@atlaskit/tabs": "^20.0.0",
 		"@atlaskit/textfield": "^9.0.0",
-		"@atlaskit/tmp-editor-statsig": "^108.3.0",
+		"@atlaskit/tmp-editor-statsig": "^108.4.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {