Telemetry/slicing pipeline

src/components/flowchart/flowchart.js

@@ -41,6 +41,8 @@ import {
   setViewExtents,
   getViewExtents,
 } from '../../utils/view';
+import { getHeap } from '../../tracking/index';
+import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
 import Tooltip from '../ui/tooltip';
 import { SlicedPipelineActionBar } from '../sliced-pipeline-action-bar/sliced-pipeline-action-bar';
 import { SlicedPipelineNotification } from '../sliced-pipeline-notification/sliced-pipeline-notification';
@@ -618,6 +620,11 @@ export class FlowChart extends Component {
 
     this.props.onApplySlice(false);
     this.setState({ showSlicingNotification: false }); // Hide notification after selecting the second node
+
+    getHeap().track(getDataTestAttribute('flowchart', 'multiple-nodes-click'), {
+      fromNodeId,
+      toNodeId,
+    });
   };
 
   /**

src/components/sliced-pipeline-action-bar/sliced-pipeline-action-bar.js

@@ -5,6 +5,7 @@ import CommandCopier from '../ui/command-copier/command-copier';
 import CutIcon from '../icons/cut';
 import IconButton from '../ui/icon-button';
 import { sidebarWidth, metaSidebarWidth } from '../../config';
+import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
 
 import './sliced-pipeline-action-bar.scss';
 
@@ -93,21 +94,40 @@ export const SlicedPipelineActionBar = React.forwardRef((props, ref) => {
             runCommand.length > 90,
         })}
       >
-        <CommandCopier command={runCommand} isCommand={true} />
+        <CommandCopier
+          command={runCommand}
+          isCommand={true}
+          dataTest={getDataTestAttribute(
+            'sliced-pipeline-action-bar',
+            'run-command',
+            'copied'
+          )}
+        />
       </div>
       {isSlicingPipelineApplied ? (
-        <div className="sliced-pipeline-action-bar--cta sliced-pipeline-action-bar--reset">
+        <div
+          className="sliced-pipeline-action-bar--cta sliced-pipeline-action-bar--reset"
+          datat-test={getDataTestAttribute(
+            'sliced-pipeline-action-bar',
+            'reset-btn',
+            'clicked'
+          )}
+        >
           <Button onClick={onResetSlicingPipeline}>Reset slice</Button>
         </div>
       ) : (
         <div
           className="sliced-pipeline-action-bar--cta sliced-pipeline-action-bar--slice"
           onClick={onApplySlicingPipeline}
+          datat-test={getDataTestAttribute(
+            'sliced-pipeline-action-bar',
+            'slice-btn',
+            'clicked'
+          )}
         >
           <IconButton
-            ariaLabel="Copy run command to clipboard."
-            className="copy-button"
-            dataTest={`clicked.run_command`}
+            ariaLabel="Cut icon in slice button to slice a pipeline."
+            className="cut-icon"
             icon={CutIcon}
           />
           <span className="sliced-pipeline-action-bar--slice-text">Slice</span>

src/components/sliced-pipeline-action-bar/sliced-pipeline-action-bar.scss

@@ -52,6 +52,7 @@ $transitionTiming: 0.3s;
 
   .pipeline-icon-toolbar__button {
     height: 24px;
+    width: 24px;
     margin: 0;
     opacity: 1;
 

src/tracking/index.js

@@ -0,0 +1,11 @@
+import { noop } from 'lodash';
+
+export const getHeap = () => {
+  if (!window.heap) {
+    window.heap = {
+      track: noop,
+    };
+  }
+
+  return window.heap;
+};

src/utils/get-data-test-attribute.js

@@ -0,0 +1,12 @@
+/**
+ * to get a string that can be used as a value for data-test attributes in HTML elements,
+ * to make it easier to target of elements for testing purposes.
+ * @param {String} component A string representing the name of the main component.
+ * @param {String} uiElement A string representing the type of UI element (e.g., button, input, dropdown, event name).
+ * @param {String} state (optional) A string representing the state of the UI element (e.g., disabled, active, error).
+ * @returns
+ */
+export const getDataTestAttribute = (component, uiElement, state = '') => {
+  const stateSuffix = state ? `-${state}` : '';
+  return `${component}--${uiElement}${stateSuffix}`;
+};