Track customElement and full screen and autoplay usage (#39735) (#40016)

* Track customElement and full screen and autoplay usage

* Rename action

x-pack/legacy/plugins/canvas/public/components/element_types/index.js

@@ -15,8 +15,11 @@ import { notify } from '../../lib/notify';
 import { selectToplevelNodes } from '../../state/actions/transient';
 import { insertNodes, addElement } from '../../state/actions/elements';
 import { getSelectedPage } from '../../state/selectors/workpad';
+import { trackCanvasUiMetric } from '../../lib/ui_metric';
 import { ElementTypes as Component } from './element_types';
 
+const customElementAdded = 'elements-custom-added';
+
 const mapStateToProps = state => ({ pageId: getSelectedPage(state) });
 
 const mapDispatchToProps = dispatch => ({
@@ -48,6 +51,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
         selectToplevelNodes(clonedNodes); // then select the cloned node(s)
       }
       onClose();
+      trackCanvasUiMetric(customElementAdded);
     },
     // custom element search
     findCustomElements: async text => {

x-pack/legacy/plugins/canvas/public/components/workpad_header/fullscreen_control/index.js

@@ -9,8 +9,12 @@ import { setFullscreen, selectToplevelNodes } from '../../../state/actions/trans
 import { enableAutoplay } from '../../../state/actions/workpad';
 import { getFullscreen } from '../../../state/selectors/app';
 import { getAutoplay } from '../../../state/selectors/workpad';
+import { trackCanvasUiMetric } from '../../../lib/ui_metric';
 import { FullscreenControl as Component } from './fullscreen_control';
 
+const LaunchedFullScreen = 'workpad-full-screen-launch';
+const LaunchedFullScreenAutoplay = 'workpad-full-screen-launch-with-autoplay';
+
 const mapStateToProps = state => ({
   isFullscreen: getFullscreen(state),
   autoplayEnabled: getAutoplay(state).enabled,
@@ -24,7 +28,27 @@ const mapDispatchToProps = dispatch => ({
   enableAutoplay: enabled => dispatch(enableAutoplay(enabled)),
 });
 
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  return {
+    ...ownProps,
+    ...stateProps,
+    ...dispatchProps,
+    setFullscreen: value => {
+      dispatchProps.setFullscreen(value);
+
+      if (value === true) {
+        trackCanvasUiMetric(
+          stateProps.autoplayEnabled
+            ? [LaunchedFullScreen, LaunchedFullScreenAutoplay]
+            : LaunchedFullScreen
+        );
+      }
+    },
+  };
+};
+
 export const FullscreenControl = connect(
   mapStateToProps,
-  mapDispatchToProps
+  mapDispatchToProps,
+  mergeProps
 )(Component);