tech-story: [M3-10364] - MSW CRUD: Add custom grants to profile preset to prevent type error when using restricted profile preset (linode#12756)

* where are we going with this

* something like this?? p1

* add back in service tool worker changes

* combine profile and grants preset

* Added changeset: MSW CRUD: Fix type error when using custom restricted profile preset and add grants preset support

* rename things

* more renaming

* missed some renaming

Author: coliu-akamai

packages/manager/.changeset/pr-12756-tech-stories-1756135837332.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+MSW CRUD: Fix type error when using custom restricted profile preset and add grants preset support ([#12756](https://github.com/linode/manager/pull/12756))

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

@@ -13,6 +13,7 @@ import {
   getBaselinePreset,
   getCustomAccountData,
   getCustomEventsData,
+  getCustomGrantsData,
   getCustomMaintenanceData,
   getCustomNotificationsData,
   getCustomProfileData,
@@ -26,6 +27,7 @@ import {
   saveBaselinePreset,
   saveCustomAccountData,
   saveCustomEventsData,
+  saveCustomGrantsData,
   saveCustomMaintenanceData,
   saveCustomNotificationsData,
   saveCustomProfileData,
@@ -42,6 +44,7 @@ import type {
   Account,
   AccountMaintenance,
   Event,
+  Grants,
   Notification,
   PermissionType,
   Profile,
@@ -92,6 +95,9 @@ export const ServiceWorkerTool = () => {
   const [customEventsData, setCustomEventsData] = React.useState<
     Event[] | null | undefined
   >(getCustomEventsData());
+  const [customGrantsData, setCustomGrantsData] = React.useState<
+    Grants | null | undefined
+  >(getCustomGrantsData());
   const [customMaintenanceData, setCustomMaintenanceData] = React.useState<
     AccountMaintenance[] | null | undefined
   >(getCustomMaintenanceData());
@@ -118,6 +124,7 @@ export const ServiceWorkerTool = () => {
 
   React.useEffect(() => {
     const currentAccountData = getCustomAccountData();
+    const currentGrantsData = getCustomGrantsData();
     const currentProfileData = getCustomProfileData();
     const currentUserAccountPermissionsData =
       getCustomUserAccountPermissionsData();
@@ -128,6 +135,8 @@ export const ServiceWorkerTool = () => {
     const currentNotificationsData = getCustomNotificationsData();
     const hasCustomAccountChanges =
       JSON.stringify(currentAccountData) !== JSON.stringify(customAccountData);
+    const hasCustomGrantsChanges =
+      JSON.stringify(currentGrantsData) !== JSON.stringify(customGrantsData);
     const hasCustomProfileChanges =
       JSON.stringify(currentProfileData) !== JSON.stringify(customProfileData);
     const hasCustomEventsChanges =
@@ -148,6 +157,7 @@ export const ServiceWorkerTool = () => {
 
     if (
       hasCustomAccountChanges ||
+      hasCustomGrantsChanges ||
       hasCustomProfileChanges ||
       hasCustomEventsChanges ||
       hasCustomMaintenanceChanges ||
@@ -164,6 +174,7 @@ export const ServiceWorkerTool = () => {
     customAccountData,
     customEventsData,
     customMaintenanceData,
+    customGrantsData,
     customNotificationsData,
     customProfileData,
     customUserAccountPermissionsData,
@@ -183,8 +194,13 @@ export const ServiceWorkerTool = () => {
         saveCustomAccountData(customAccountData);
       }
 
-      if (extraPresets.includes('profile:custom') && customProfileData) {
-        saveCustomProfileData(customProfileData);
+      if (extraPresets.includes('profile-grants:custom')) {
+        if (customProfileData) {
+          saveCustomProfileData(customProfileData);
+        }
+        if (customGrantsData) {
+          saveCustomGrantsData(customGrantsData);
+        }
       }
       if (extraPresets.includes('events:custom') && customEventsData) {
         saveCustomEventsData(customEventsData);
@@ -238,6 +254,7 @@ export const ServiceWorkerTool = () => {
       setSeedsCountMap(getSeedsCountMap());
       setPresetsCountMap(getExtraPresetsMap());
       setCustomAccountData(getCustomAccountData());
+      setCustomGrantsData(getCustomGrantsData());
       setCustomProfileData(getCustomProfileData());
       setCustomEventsData(getCustomEventsData());
       setCustomMaintenanceData(getCustomMaintenanceData());
@@ -261,6 +278,7 @@ export const ServiceWorkerTool = () => {
       setExtraPresets([]);
       setPresetsCountMap({});
       setCustomAccountData(null);
+      setCustomGrantsData(null);
       setCustomProfileData(null);
       setCustomEventsData(null);
       setCustomMaintenanceData(null);
@@ -275,6 +293,7 @@ export const ServiceWorkerTool = () => {
       saveExtraPresetsMap({});
       saveCustomAccountData(null);
       saveCustomProfileData(null);
+      saveCustomGrantsData(null);
       saveCustomEventsData(null);
       saveCustomMaintenanceData(null);
       saveCustomNotificationsData(null);
@@ -492,6 +511,7 @@ export const ServiceWorkerTool = () => {
                 <ExtraPresetOptions
                   customAccountData={customAccountData}
                   customEventsData={customEventsData}
+                  customGrantsData={customGrantsData}
                   customMaintenanceData={customMaintenanceData}
                   customNotificationsData={customNotificationsData}
                   customProfileData={customProfileData}
@@ -504,6 +524,7 @@ export const ServiceWorkerTool = () => {
                   handlers={extraPresets}
                   onCustomAccountChange={setCustomAccountData}
                   onCustomEventsChange={setCustomEventsData}
+                  onCustomGrantsChange={setCustomGrantsData}
                   onCustomMaintenanceChange={setCustomMaintenanceData}
                   onCustomNotificationsChange={setCustomNotificationsData}
                   onCustomProfileChange={setCustomProfileData}

packages/manager/src/dev-tools/components/ExtraPresetOptions.tsx

@@ -9,14 +9,15 @@ import { ExtraPresetMaintenance } from './ExtraPresetMaintenance';
 import { ExtraPresetNotifications } from './ExtraPresetNotifications';
 import { ExtraPresetOptionCheckbox } from './ExtraPresetOptionCheckbox';
 import { ExtraPresetOptionSelect } from './ExtraPresetOptionSelect';
-import { ExtraPresetProfile } from './ExtraPresetProfile';
+import { ExtraPresetProfileAndGrants } from './ExtraPresetProfileAndGrants';
 import { ExtraPresetUserAccountPermissions } from './ExtraPresetUserAccountPermissions';
 import { ExtraPresetUserEntityPermissions } from './ExtraPresetUserEntityPermissions';
 
 import type {
   Account,
   AccountMaintenance,
   Event,
+  Grants,
   Notification,
   PermissionType,
   Profile,
@@ -25,6 +26,7 @@ import type {
 export interface ExtraPresetOptionsProps {
   customAccountData?: Account | null;
   customEventsData?: Event[] | null;
+  customGrantsData?: Grants | null;
   customMaintenanceData?: AccountMaintenance[] | null;
   customNotificationsData?: Notification[] | null;
   customProfileData?: null | Profile;
@@ -33,6 +35,7 @@ export interface ExtraPresetOptionsProps {
   handlers: string[];
   onCustomAccountChange?: (data: Account | null | undefined) => void;
   onCustomEventsChange?: (data: Event[] | null | undefined) => void;
+  onCustomGrantsChange?: (data: Grants | null | undefined) => void;
   onCustomMaintenanceChange?: (
     data: AccountMaintenance[] | null | undefined
   ) => void;
@@ -59,6 +62,7 @@ export const ExtraPresetOptions = ({
   customAccountData,
   customProfileData,
   customEventsData,
+  customGrantsData,
   customMaintenanceData,
   customNotificationsData,
   customUserAccountPermissionsData,
@@ -67,6 +71,7 @@ export const ExtraPresetOptions = ({
   onCustomAccountChange,
   onCustomProfileChange,
   onCustomEventsChange,
+  onCustomGrantsChange,
   onCustomMaintenanceChange,
   onCustomNotificationsChange,
   onCustomUserAccountPermissionsChange,
@@ -120,11 +125,13 @@ export const ExtraPresetOptions = ({
                 onTogglePreset={onTogglePreset}
               />
             )}
-            {currentGroupType === 'profile' && (
-              <ExtraPresetProfile
+            {currentGroupType === 'profile & grants' && (
+              <ExtraPresetProfileAndGrants
+                customGrantsData={customGrantsData}
                 customProfileData={customProfileData}
                 handlers={handlers}
-                onFormChange={onCustomProfileChange}
+                onFormChangeGrants={onCustomGrantsChange}
+                onFormChangeProfile={onCustomProfileChange}
                 onTogglePreset={onTogglePreset}
               />
             )}