track when a custom type is saved

packages/slice-machine/lib/builders/CustomTypeBuilder/Layout/Header.tsx

@@ -2,18 +2,18 @@ import React from "react";
 import { Box, Button, Spinner, Text } from "theme-ui";
 
 import Header from "../../../../components/Header";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import useSliceMachineActions from "../../../../src/modules/useSliceMachineActions";
 import { MdSpaceDashboard } from "react-icons/md";
 import { useSelector } from "react-redux";
-import { SliceMachineStoreType } from "@src/redux/type";
+import { SliceMachineStoreType } from "../../../../src/redux/type";
 import {
   selectCurrentCustomType,
   selectCustomTypeStatus,
   selectIsCurrentCustomTypeHasPendingModifications,
-} from "@src/modules/selectedCustomType";
+} from "../../../../src/modules/selectedCustomType";
 import { isLoading } from "@src/modules/loading";
 import { LoadingKeysEnum } from "@src/modules/loading/types";
-import { CustomTypeStatus } from "@src/modules/selectedCustomType/types";
+import { CustomTypeStatus } from "../../../../src/modules/selectedCustomType/types";
 
 const CustomTypeHeader = () => {
   const {

packages/slice-machine/src/modules/selectedCustomType/sagas.ts

@@ -1,20 +1,15 @@
 import { call, fork, put, select, takeLatest } from "redux-saga/effects";
-import { openToasterCreator, ToasterType } from "@src/modules/toaster";
+import { openToasterCreator, ToasterType } from "../toaster";
 import { getType } from "typesafe-actions";
-import { withLoader } from "@src/modules/loading";
-import { LoadingKeysEnum } from "@src/modules/loading/types";
-import {
-  pushCustomTypeCreator,
-  saveCustomTypeCreator,
-} from "@src/modules/selectedCustomType/actions";
-import {
-  selectCurrentCustomType,
-  selectCurrentMockConfig,
-} from "@src/modules/selectedCustomType/index";
-import { pushCustomType, saveCustomType } from "@src/apiClient";
+import { withLoader } from "../loading";
+import { LoadingKeysEnum } from "../loading/types";
+import { pushCustomTypeCreator, saveCustomTypeCreator } from "./actions";
+import { selectCurrentCustomType, selectCurrentMockConfig } from "./index";
+import { pushCustomType, saveCustomType } from "../../../src/apiClient";
 import axios from "axios";
-import { modalOpenCreator } from "@src/modules/modal";
-import { ModalKeysEnum } from "@src/modules/modal/types";
+import { modalOpenCreator } from "../modal";
+import { ModalKeysEnum } from "../modal/types";
+import Tracker from "../../../src/tracker";
 
 export function* saveCustomTypeSaga() {
   try {
@@ -30,6 +25,11 @@ export function* saveCustomTypeSaga() {
     }
 
     yield call(saveCustomType, currentCustomType, currentMockConfig);
+    void Tracker.get().trackCustomTypeSaved({
+      id: currentCustomType.id,
+      name: currentCustomType.label || currentCustomType.id,
+      type: currentCustomType.repeatable ? "repeatable" : "single",
+    });
     yield put(saveCustomTypeCreator.success());
     yield put(
       openToasterCreator({

packages/slice-machine/src/modules/useSliceMachineActions.ts

@@ -1,31 +1,28 @@
 import { useDispatch } from "react-redux";
-import { LoadingKeysEnum } from "@src/modules/loading/types";
-import { ModalKeysEnum } from "@src/modules/modal/types";
-import { modalCloseCreator, modalOpenCreator } from "@src/modules/modal";
-import {
-  startLoadingActionCreator,
-  stopLoadingActionCreator,
-} from "@src/modules/loading";
+import { LoadingKeysEnum } from "./loading/types";
+import { ModalKeysEnum } from "./modal/types";
+import { modalCloseCreator, modalOpenCreator } from "./modal";
+import { startLoadingActionCreator, stopLoadingActionCreator } from "./loading";
 import {
   finishOnboardingCreator,
   sendAReviewCreator,
   skipReviewCreator,
   updatesViewedCreator,
   hasSeenTutorialsTooTipCreator,
-} from "@src/modules/userContext";
-import { refreshStateCreator } from "@src/modules/environment";
+} from "./userContext";
+import { refreshStateCreator } from "./environment";
 import {
   openSetupDrawerCreator,
   closeSetupDrawerCreator,
   toggleSetupDrawerStepCreator,
   checkSimulatorSetupCreator,
   connectToSimulatorIframeCreator,
-} from "@src/modules/simulator";
+} from "./simulator";
 import ServerState from "@models/server/ServerState";
-import { createCustomTypeCreator } from "@src/modules/availableCustomTypes";
-import { createSliceCreator } from "@src/modules/slices";
+import { createCustomTypeCreator } from "./availableCustomTypes";
+import { createSliceCreator } from "./slices";
 import { UserContextStoreType } from "./userContext/types";
-import { openToasterCreator, ToasterType } from "@src/modules/toaster";
+import { openToasterCreator, ToasterType } from "./toaster";
 import {
   initCustomTypeStoreCreator,
   createTabCreator,
@@ -48,7 +45,7 @@ import {
   deleteGroupFieldMockConfigCreator,
   deleteFieldMockConfigCreator,
   updateFieldMockConfigCreator,
-} from "@src/modules/selectedCustomType";
+} from "./selectedCustomType";
 import { CustomTypeMockConfig } from "@models/common/MockConfig";
 import {
   CustomTypeSM,

packages/slice-machine/src/tracker.ts

@@ -17,6 +17,7 @@ enum EventType {
   CreateCustomType = "SliceMachine Custom Type Created",
   CustomTypeFieldAdded = "SliceMachine Custom Type Field Added",
   CustomTypeSliceZoneUpdated = "SliceMachine Slicezone Updated",
+  CustomTypeSaved = "SliceMachine Custom Type Saved",
 }
 
 export enum ContinueOnboardingType {
@@ -240,6 +241,14 @@ export class SMTracker {
   }): Promise<void> {
     return this.#trackEvent(EventType.CustomTypeSliceZoneUpdated, data);
   }
+
+  async trackCustomTypeSaved(data: {
+    id: string;
+    name: string;
+    type: "single" | "repeatable";
+  }): Promise<void> {
+    return this.#trackEvent(EventType.CustomTypeSaved, data);
+  }
 }
 
 const Tracker = (() => {

packages/slice-machine/tests/pages/cts.spec.tsx

@@ -11,18 +11,31 @@ import {
   beforeEach,
   expect,
   beforeAll,
+  afterAll,
 } from "@jest/globals";
 import React from "react";
 import CreateCustomTypeBuilder from "../../pages/cts/[ct]";
 import singletonRouter from "next/router";
-import { render, fireEvent, act, screen } from "../test-utils";
+import { render, fireEvent, act, screen, waitFor } from "../test-utils";
 import mockRouter from "next-router-mock";
 import { AnalyticsBrowser } from "@segment/analytics-next";
 import Tracker from "../../src/tracker";
 import LibrariesProvider from "../../src/models/libraries/context";
+import { setupServer } from "msw/node";
+import { rest } from "msw";
 
 jest.mock("next/dist/client/router", () => require("next-router-mock"));
 
+const server = setupServer(
+  rest.post("/api/custom-types/save", (_, res, ctx) => {
+    return res(ctx.json({}));
+  })
+);
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
 describe("Custom Type Builder", () => {
   const fakeTracker = jest.fn().mockImplementation(() => Promise.resolve());
 
@@ -323,4 +336,193 @@ describe("Custom Type Builder", () => {
       { context: { groupId: { Repository: "repoName" } } }
     );
   });
+
+  test("it should send a tracking event when the user saves a custoom-type", async () => {
+    const customTypeId = "a-page";
+
+    singletonRouter.push({
+      pathname: "cts/[ct]",
+      query: { ct: customTypeId },
+    });
+
+    const App = render(<CreateCustomTypeBuilder />, {
+      preloadedState: {
+        environment: {
+          framework: "next",
+          mockConfig: { _cts: { [customTypeId]: {} } },
+        },
+        availableCustomTypes: {
+          [customTypeId]: {
+            local: {
+              id: customTypeId,
+              label: customTypeId,
+              repeatable: true,
+              status: true,
+              tabs: [
+                {
+                  key: "Main",
+                  value: [],
+                },
+              ],
+            },
+          },
+        },
+        selectedCustomType: {
+          model: {
+            id: "a-page",
+            label: "a-page",
+            repeatable: true,
+            status: true,
+            tabs: [
+              {
+                key: "Main",
+                value: [],
+              },
+            ],
+          },
+          initialModel: {
+            id: "a-page",
+            label: "a-page",
+            repeatable: true,
+            status: true,
+            tabs: [
+              {
+                key: "Main",
+                value: [],
+              },
+            ],
+          },
+          mockConfig: {},
+          initialMockConfig: {},
+        },
+      },
+    });
+
+    const addButton = screen.getByTestId("empty-zone-add-new-field");
+    fireEvent.click(addButton);
+
+    const uid = screen.getByText("UID");
+    fireEvent.click(uid);
+
+    const saveFieldButton = screen.getByText("Add");
+
+    await act(async () => {
+      fireEvent.click(saveFieldButton);
+    });
+
+    expect(fakeTracker).toHaveBeenCalledWith(
+      "SliceMachine Custom Type Field Added",
+      { id: "uid", name: customTypeId, type: "UID", zone: "static" },
+      { context: { groupId: { Repository: "repoName" } } }
+    );
+
+    const saveCustomType = screen.getByText("Save to File System");
+
+    await act(async () => {
+      fireEvent.click(saveCustomType);
+    });
+
+    await waitFor(() => {
+      expect(fakeTracker).toHaveBeenLastCalledWith(
+        "SliceMachine Custom Type Saved",
+        { type: "repeatable", id: customTypeId, name: customTypeId },
+        { context: { groupId: { Repository: "repoName" } } }
+      );
+    });
+  });
+
+  test("if saving fails a it should not send the save event", async () => {
+    server.use(
+      rest.post("/api/custom-types/save", (_, res, ctx) => {
+        return res(ctx.status(500), ctx.json({}));
+      })
+    );
+    const customTypeId = "a-page";
+
+    singletonRouter.push({
+      pathname: "cts/[ct]",
+      query: { ct: customTypeId },
+    });
+
+    const App = render(<CreateCustomTypeBuilder />, {
+      preloadedState: {
+        environment: {
+          framework: "next",
+          mockConfig: { _cts: { [customTypeId]: {} } },
+        },
+        availableCustomTypes: {
+          [customTypeId]: {
+            local: {
+              id: customTypeId,
+              label: customTypeId,
+              repeatable: true,
+              status: true,
+              tabs: [
+                {
+                  key: "Main",
+                  value: [],
+                },
+              ],
+            },
+          },
+        },
+        selectedCustomType: {
+          model: {
+            id: "a-page",
+            label: "a-page",
+            repeatable: true,
+            status: true,
+            tabs: [
+              {
+                key: "Main",
+                value: [],
+              },
+            ],
+          },
+          initialModel: {
+            id: "a-page",
+            label: "a-page",
+            repeatable: true,
+            status: true,
+            tabs: [
+              {
+                key: "Main",
+                value: [],
+              },
+            ],
+          },
+          mockConfig: {},
+          initialMockConfig: {},
+        },
+      },
+    });
+
+    const addButton = screen.getByTestId("empty-zone-add-new-field");
+    fireEvent.click(addButton);
+
+    const uid = screen.getByText("UID");
+    fireEvent.click(uid);
+
+    const saveFieldButton = screen.getByText("Add");
+
+    await act(async () => {
+      fireEvent.click(saveFieldButton);
+    });
+
+    expect(fakeTracker).toHaveBeenCalledWith(
+      "SliceMachine Custom Type Field Added",
+      { id: "uid", name: customTypeId, type: "UID", zone: "static" },
+      { context: { groupId: { Repository: "repoName" } } }
+    );
+
+    const saveCustomType = screen.getByText("Save to File System");
+
+    await act(async () => {
+      fireEvent.click(saveCustomType);
+    });
+
+    await new Promise((r) => setTimeout(r, 1000));
+
+    expect(fakeTracker).toHaveBeenCalledTimes(1);
+  });
 });