tech-story: [M3-9974] [M3-9975] [M3-9976] - MSW custom presets for Events, Maintenance, and Notifications (linode#12212)

* Add custom Notifications preset to MSW

* Abstract Notifications preset

* Add Maintenance and Events preset

* Added changeset: Add MSW presets for Events, Maintenance, and Notifications

* Copy fix

Author: hkhalil-akamai

packages/manager/.changeset/pr-12212-tech-stories-1747235320136.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Add MSW presets for Events, Maintenance, and Notifications ([#12212](https://github.com/linode/manager/pull/12212))

packages/manager/src/dev-tools/ServiceWorkerTool.tsx

@@ -12,6 +12,9 @@ import { SeedOptions } from './components/SeedOptions';
 import {
   getBaselinePreset,
   getCustomAccountData,
+  getCustomEventsData,
+  getCustomMaintenanceData,
+  getCustomNotificationsData,
   getCustomProfileData,
   getExtraPresets,
   getExtraPresetsMap,
@@ -20,6 +23,9 @@ import {
   isMSWEnabled,
   saveBaselinePreset,
   saveCustomAccountData,
+  saveCustomEventsData,
+  saveCustomMaintenanceData,
+  saveCustomNotificationsData,
   saveCustomProfileData,
   saveExtraPresets,
   saveExtraPresetsMap,
@@ -28,7 +34,13 @@ import {
   saveSeedsCountMap,
 } from './utils';
 
-import type { Account, Profile } from '@linode/api-v4';
+import type {
+  Account,
+  AccountMaintenance,
+  Event,
+  Notification,
+  Profile,
+} from '@linode/api-v4';
 import type {
   MockPresetBaselineId,
   MockPresetCrudId,
@@ -62,6 +74,15 @@ export const ServiceWorkerTool = () => {
   const [customProfileData, setCustomProfileData] = React.useState<
     null | Profile | undefined
   >(getCustomProfileData());
+  const [customEventsData, setCustomEventsData] = React.useState<
+    Event[] | null | undefined
+  >(getCustomEventsData());
+  const [customMaintenanceData, setCustomMaintenanceData] = React.useState<
+    AccountMaintenance[] | null | undefined
+  >(getCustomMaintenanceData());
+  const [customNotificationsData, setCustomNotificationsData] = React.useState<
+    Notification[] | null | undefined
+  >(getCustomNotificationsData());
   const [presetsCountMap, setPresetsCountMap] = React.useState<{
     [key: string]: number;
   }>(loadedPresetsMap);
@@ -83,18 +104,41 @@ export const ServiceWorkerTool = () => {
   React.useEffect(() => {
     const currentAccountData = getCustomAccountData();
     const currentProfileData = getCustomProfileData();
+    const currentEventsData = getCustomEventsData();
+    const currentMaintenanceData = getCustomMaintenanceData();
+    const currentNotificationsData = getCustomNotificationsData();
     const hasCustomAccountChanges =
       JSON.stringify(currentAccountData) !== JSON.stringify(customAccountData);
     const hasCustomProfileChanges =
       JSON.stringify(currentProfileData) !== JSON.stringify(customProfileData);
+    const hasCustomEventsChanges =
+      JSON.stringify(currentEventsData) !== JSON.stringify(customEventsData);
+    const hasCustomMaintenanceChanges =
+      JSON.stringify(currentMaintenanceData) !==
+      JSON.stringify(customMaintenanceData);
+    const hasCustomNotificationsChanges =
+      JSON.stringify(currentNotificationsData) !==
+      JSON.stringify(customNotificationsData);
 
-    if (hasCustomAccountChanges || hasCustomProfileChanges) {
+    if (
+      hasCustomAccountChanges ||
+      hasCustomProfileChanges ||
+      hasCustomEventsChanges ||
+      hasCustomMaintenanceChanges ||
+      hasCustomNotificationsChanges
+    ) {
       setSaveState((prev) => ({
         ...prev,
         hasUnsavedChanges: true,
       }));
     }
-  }, [customAccountData, customProfileData]);
+  }, [
+    customAccountData,
+    customEventsData,
+    customMaintenanceData,
+    customNotificationsData,
+    customProfileData,
+  ]);
 
   const globalHandlers = {
     applyChanges: () => {
@@ -112,6 +156,21 @@ export const ServiceWorkerTool = () => {
       if (extraPresets.includes('profile:custom') && customProfileData) {
         saveCustomProfileData(customProfileData);
       }
+      if (extraPresets.includes('events:custom') && customEventsData) {
+        saveCustomEventsData(customEventsData);
+      }
+      if (
+        extraPresets.includes('maintenance:custom') &&
+        customMaintenanceData
+      ) {
+        saveCustomMaintenanceData(customMaintenanceData);
+      }
+      if (
+        extraPresets.includes('notifications:custom') &&
+        customNotificationsData
+      ) {
+        saveCustomNotificationsData(customNotificationsData);
+      }
 
       const promises = seeders.map((seederId) => {
         const seeder = dbSeeders.find((dbSeeder) => dbSeeder.id === seederId);
@@ -138,6 +197,9 @@ export const ServiceWorkerTool = () => {
       setPresetsCountMap(getExtraPresetsMap());
       setCustomAccountData(getCustomAccountData());
       setCustomProfileData(getCustomProfileData());
+      setCustomEventsData(getCustomEventsData());
+      setCustomMaintenanceData(getCustomMaintenanceData());
+      setCustomNotificationsData(getCustomNotificationsData());
       setSaveState({
         hasSaved: false,
         hasUnsavedChanges: false,
@@ -148,18 +210,27 @@ export const ServiceWorkerTool = () => {
       mswDB.clear('mockState');
       mswDB.clear('seedState');
       seederHandlers.removeAll();
+
       setBaselinePreset('baseline:static-mocking');
       setExtraPresets([]);
       setPresetsCountMap({});
       setCustomAccountData(null);
       setCustomProfileData(null);
+      setCustomEventsData(null);
+      setCustomMaintenanceData(null);
+      setCustomNotificationsData(null);
+
       saveBaselinePreset('baseline:static-mocking');
       saveExtraPresets([]);
       saveSeeders([]);
       saveSeedsCountMap({});
       saveExtraPresetsMap({});
       saveCustomAccountData(null);
       saveCustomProfileData(null);
+      saveCustomEventsData(null);
+      saveCustomMaintenanceData(null);
+      saveCustomNotificationsData(null);
+
       setSaveState({
         hasSaved: false,
         hasUnsavedChanges: true,
@@ -370,9 +441,15 @@ export const ServiceWorkerTool = () => {
               <div className="dev-tools__list-box">
                 <ExtraPresetOptions
                   customAccountData={customAccountData}
+                  customEventsData={customEventsData}
+                  customMaintenanceData={customMaintenanceData}
+                  customNotificationsData={customNotificationsData}
                   customProfileData={customProfileData}
                   handlers={extraPresets}
                   onCustomAccountChange={setCustomAccountData}
+                  onCustomEventsChange={setCustomEventsData}
+                  onCustomMaintenanceChange={setCustomMaintenanceData}
+                  onCustomNotificationsChange={setCustomNotificationsData}
                   onCustomProfileChange={setCustomProfileData}
                   onPresetCountChange={presetHandlers.changeCount}
                   onSelectChange={presetHandlers.changeSelect}