code cleanup 2

linode · Aug 7, 2024 · 5be3553 · 5be3553
1 parent ad22092
commit 5be3553
Show file tree

Hide file tree

Showing 11 changed files with 141 additions and 110 deletions.
diff --git a/packages/manager/src/dev-tools/ServiceWorkerTool.tsx b/packages/manager/src/dev-tools/ServiceWorkerTool.tsx
@@ -24,7 +24,7 @@ import {
   saveMSWSeedsCountMap,
 } from './utils';
 
-import type { MockSeederIds, MockState } from 'src/mocks/types';
+import type { MockPresetId, MockSeederId, MockState } from 'src/mocks/types';
 
 interface ServiceWorkerSaveState {
   hasSaved: boolean;
@@ -37,25 +37,30 @@ interface ServiceWorkerSaveState {
  */
 export const ServiceWorkerTool = () => {
   const loadedBasePreset = getMSWPreset();
-  const loadedPresets = getMSWExtraPresets();
+  const loadedExtraPresets = getMSWExtraPresets();
   const loadedSeeders = getMSWContextSeeders(dbSeeders);
   const loadedSeedsCountMap = getMSWSeedsCountMap();
   const loadedPresetsMap = getMSWPresetsMap();
-  const [MSWBasePreset, setMSWBasePreset] = React.useState<string>(
+  const isCrudPreset = loadedBasePreset === 'baseline-crud';
+  const [MSWBasePreset, setMSWBasePreset] = React.useState<MockPresetId>(
     loadedBasePreset
   );
-  const [MSWHandlers, setMSWHandlers] = React.useState<string[]>(loadedPresets);
-  const [MSWSeeders, setMSWSeeders] = React.useState<string[]>(loadedSeeders);
-  const [seedsCountMap, setSeedsCountMap] = React.useState<{
-    [key: string]: number;
-  }>(loadedSeedsCountMap);
-  const [presetsMap, setPresetsMap] = React.useState<{
+  const [MSWExtraPresets, setMSWExtraPresets] = React.useState<string[]>([
+    ...loadedExtraPresets,
+    // enable setAPIResponseTime by default
+    'api-response-time',
+  ]);
+  const [presetsCountMap, setPresetsCountMap] = React.useState<{
     [key: string]: number;
   }>({
     ...loadedPresetsMap,
-    // set defaults
+    // set api-response-time to 400ms by default
     'api-response-time': loadedPresetsMap['api-response-time'] ?? 400,
   });
+  const [MSWSeeders, setMSWSeeders] = React.useState<string[]>(loadedSeeders);
+  const [seedsCountMap, setSeedsCountMap] = React.useState<{
+    [key: string]: number;
+  }>(loadedSeedsCountMap);
 
   const [saveState, setSaveState] = React.useState<ServiceWorkerSaveState>({
     hasSaved: false,
@@ -67,10 +72,10 @@ export const ServiceWorkerTool = () => {
     applyChanges: () => {
       // Save base preset, extra presets, and content populators to local storage.
       saveMSWPreset(MSWBasePreset);
-      saveMSWExtraPresets(MSWHandlers);
+      saveMSWExtraPresets(MSWExtraPresets);
       saveMSWContextPopulators(MSWSeeders);
       saveMSWSeedsCountMap(seedsCountMap);
-      saveMSWPresetsMap(presetsMap);
+      saveMSWPresetsMap(presetsCountMap);
 
       const promises = MSWSeeders.map((seederId) => {
         const populator = dbSeeders.find(
@@ -97,10 +102,10 @@ export const ServiceWorkerTool = () => {
 
     discardChanges: () => {
       setMSWBasePreset(getMSWPreset());
-      setMSWHandlers(getMSWExtraPresets());
+      setMSWExtraPresets(getMSWExtraPresets());
       setMSWSeeders(getMSWContextSeeders(dbSeeders));
       setSeedsCountMap(getMSWSeedsCountMap());
-      setPresetsMap(getMSWPresetsMap());
+      setPresetsCountMap(getMSWPresetsMap());
       setSaveState({
         hasSaved: false,
         hasUnsavedChanges: false,
@@ -112,8 +117,8 @@ export const ServiceWorkerTool = () => {
       mswDB.clear('seedState');
       seederHandlers.removeAll();
       setMSWBasePreset(getMSWPreset());
-      setMSWHandlers(getMSWExtraPresets());
-      setPresetsMap({
+      setMSWExtraPresets(getMSWExtraPresets());
+      setPresetsCountMap({
         ...loadedPresetsMap,
         'api-response-time': 400,
       });
@@ -133,7 +138,7 @@ export const ServiceWorkerTool = () => {
   const seederHandlers = {
     handleCountChange: (
       e: React.ChangeEvent<HTMLInputElement>,
-      seederId: MockSeederIds
+      seederId: MockSeederId
     ) => {
       const updatedCountMap = {
         ...seedsCountMap,
@@ -157,7 +162,7 @@ export const ServiceWorkerTool = () => {
 
     handleToggle: async (
       e: React.ChangeEvent<HTMLInputElement>,
-      seederId: MockSeederIds
+      seederId: MockSeederId
     ) => {
       const willEnable = e.target.checked;
       if (willEnable && !MSWSeeders.includes(seederId)) {
@@ -195,16 +200,20 @@ export const ServiceWorkerTool = () => {
 
   const presetHandlers = {
     changeBase: (e: React.ChangeEvent<HTMLSelectElement>) => {
-      setMSWBasePreset(e.target.value);
+      setMSWBasePreset(e.target.value as MockPresetId);
+      saveMSWPreset(e.target.value as MockPresetId);
       setSaveState({
         hasSaved: false,
         hasUnsavedChanges: true,
       });
     },
 
-    changeCount: (e: React.ChangeEvent<HTMLInputElement>, presetId: string) => {
-      setPresetsMap({
-        ...presetsMap,
+    changeCount: (
+      e: React.ChangeEvent<HTMLInputElement>,
+      presetId: MockPresetId
+    ) => {
+      setPresetsCountMap({
+        ...presetsCountMap,
         [presetId]: parseInt(e.target.value, 10),
       });
       setSaveState({
@@ -215,18 +224,18 @@ export const ServiceWorkerTool = () => {
 
     toggle: (
       e: React.ChangeEvent<HTMLInputElement>,
-      handlerPresetId: string
+      handlerPresetId: MockPresetId
     ) => {
       const willEnable = e.target.checked;
-      if (willEnable && !MSWHandlers.includes(handlerPresetId)) {
-        setMSWHandlers([...MSWHandlers, handlerPresetId]);
+      if (willEnable && !MSWExtraPresets.includes(handlerPresetId)) {
+        setMSWExtraPresets([...MSWExtraPresets, handlerPresetId]);
         setSaveState({
           hasSaved: false,
           hasUnsavedChanges: true,
         });
-      } else if (!willEnable && MSWHandlers.includes(handlerPresetId)) {
-        setMSWHandlers(
-          MSWHandlers.filter((handler) => {
+      } else if (!willEnable && MSWExtraPresets.includes(handlerPresetId)) {
+        setMSWExtraPresets(
+          MSWExtraPresets.filter((handler) => {
             return handler !== handlerPresetId;
           })
         );
@@ -300,7 +309,7 @@ export const ServiceWorkerTool = () => {
               <div className="dev-tools__msw__column__body">
                 <div className="dev-tools__list-box">
                   <SeedOptions
-                    disabled={!isMSWEnabled}
+                    disabled={!isMSWEnabled || !isCrudPreset}
                     onCountChange={seederHandlers.handleCountChange}
                     onToggleSeeder={seederHandlers.handleToggle}
                     seeders={MSWSeeders}
@@ -315,10 +324,10 @@ export const ServiceWorkerTool = () => {
                 <div className="dev-tools__list-box">
                   <ExtraPresetOptions
                     disabled={!isMSWEnabled}
-                    handlers={MSWHandlers}
+                    handlers={MSWExtraPresets}
                     onPresetCountChange={presetHandlers.changeCount}
                     onTogglePreset={presetHandlers.toggle}
-                    presetsMap={presetsMap}
+                    presetsCountMap={presetsCountMap}
                   />
                 </div>
               </div>

diff --git a/packages/manager/src/dev-tools/components/ExtraPresetOptions.tsx b/packages/manager/src/dev-tools/components/ExtraPresetOptions.tsx
@@ -3,12 +3,14 @@ import * as React from 'react';
 import { getMockPresetGroups } from 'src/mocks/mockPreset';
 import { extraMockPresets } from 'src/mocks/presets';
 
+import { getMSWPreset } from '../utils';
+
 interface ExtraPresetOptionsProps {
   disabled: boolean;
   handlers: string[];
-  onTogglePreset: (e: React.ChangeEvent, presetId: string) => void;
   onPresetCountChange: (e: React.ChangeEvent, presetId: string) => void;
-  presetsMap: { [key: string]: number };
+  onTogglePreset: (e: React.ChangeEvent, presetId: string) => void;
+  presetsCountMap: { [key: string]: number };
 }
 
 /**
@@ -17,10 +19,12 @@ interface ExtraPresetOptionsProps {
 export const ExtraPresetOptions = ({
   disabled,
   handlers,
-  onTogglePreset,
   onPresetCountChange,
-  presetsMap,
+  onTogglePreset,
+  presetsCountMap,
 }: ExtraPresetOptionsProps) => {
+  const isCrudPreset = getMSWPreset() === 'baseline-crud';
+
   return (
     <ul>
       {getMockPresetGroups(extraMockPresets).map((group) => (
@@ -43,28 +47,33 @@ export const ExtraPresetOptions = ({
             .map((extraMockPreset) => (
               <li key={extraMockPreset.id}>
                 <input
-                  checked={
-                    handlers.includes(extraMockPreset.id) ||
-                    extraMockPreset.alwaysEnabled
+                  disabled={
+                    disabled ||
+                    (!isCrudPreset &&
+                      extraMockPreset.id === 'api-response-time')
                   }
                   style={{
-                    display: extraMockPreset.alwaysEnabled ? 'none' : 'initial',
                     marginRight: 12,
                   }}
-                  disabled={disabled}
+                  checked={handlers.includes(extraMockPreset.id)}
                   onChange={(e) => onTogglePreset(e, extraMockPreset.id)}
                   type="checkbox"
                 />
                 <span title={extraMockPreset.desc || extraMockPreset.label}>
                   {extraMockPreset.label}
                 </span>
-                {extraMockPreset.alwaysEnabled && (
+                {extraMockPreset.canUpdateCount && (
                   <input
+                    disabled={
+                      disabled ||
+                      (!isCrudPreset &&
+                        extraMockPreset.id === 'api-response-time')
+                    }
                     aria-label={`Value for ${extraMockPreset.label}`}
                     min={0}
                     onChange={(e) => onPresetCountChange(e, extraMockPreset.id)}
                     type="number"
-                    value={presetsMap[extraMockPreset.id] || 0}
+                    value={presetsCountMap[extraMockPreset.id] || 0}
                   />
                 )}
               </li>

diff --git a/packages/manager/src/dev-tools/components/SeedOptions.tsx b/packages/manager/src/dev-tools/components/SeedOptions.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { Tooltip } from 'src/components/Tooltip';
 import { getStateSeederGroups } from 'src/mocks/mockState';
 import { dbSeeders } from 'src/mocks/seeds';
 
@@ -22,37 +23,42 @@ export const SeedOptions = ({
   seedsCountMap,
 }: SeedOptionsProps) => {
   return (
-    <ul>
-      {getStateSeederGroups(dbSeeders).map((group) => (
-        <div key={group}>
-          {dbSeeders
-            .filter((dbSeeder) => dbSeeder.group === group)
-            .map((dbSeeder) => (
-              <li key={dbSeeder.id}>
-                <input
-                  checked={seeders.includes(dbSeeder.id)}
-                  disabled={disabled}
-                  onChange={(e) => onToggleSeeder(e, dbSeeder.id)}
-                  style={{ marginRight: 12 }}
-                  type="checkbox"
-                />
-                <span title={dbSeeder.desc || dbSeeder.label}>
-                  {dbSeeder.label}
-                </span>
-                {dbSeeder.canUpdateCount && (
+    <Tooltip
+      title={disabled ? 'MSW must be in CRUD mode to change seeders' : ''}
+    >
+      <ul>
+        {getStateSeederGroups(dbSeeders).map((group) => (
+          <div key={group}>
+            {dbSeeders
+              .filter((dbSeeder) => dbSeeder.group === group)
+              .map((dbSeeder) => (
+                <li key={dbSeeder.id}>
                   <input
-                    aria-label={`Value for ${dbSeeder.label}`}
-                    min={0}
-                    onChange={(e) => onCountChange(e, dbSeeder.id)}
-                    style={{ marginLeft: 8, width: 60 }}
-                    type="number"
-                    value={seedsCountMap[dbSeeder.id] || 0}
+                    checked={seeders.includes(dbSeeder.id)}
+                    disabled={disabled}
+                    onChange={(e) => onToggleSeeder(e, dbSeeder.id)}
+                    style={{ marginRight: 12 }}
+                    type="checkbox"
                   />
-                )}
-              </li>
-            ))}
-        </div>
-      ))}
-    </ul>
+                  <span title={dbSeeder.desc || dbSeeder.label}>
+                    {dbSeeder.label}
+                  </span>
+                  {dbSeeder.canUpdateCount && (
+                    <input
+                      aria-label={`Value for ${dbSeeder.label}`}
+                      disabled={disabled}
+                      min={0}
+                      onChange={(e) => onCountChange(e, dbSeeder.id)}
+                      style={{ marginLeft: 8, width: 60 }}
+                      type="number"
+                      value={seedsCountMap[dbSeeder.id] || 0}
+                    />
+                  )}
+                </li>
+              ))}
+          </div>
+        ))}
+      </ul>
+    </Tooltip>
   );
 };
diff --git a/packages/manager/src/dev-tools/utils.ts b/packages/manager/src/dev-tools/utils.ts
@@ -9,7 +9,7 @@ import {
   LOCAL_STORAGE_SEEDS_COUNT_MAP_KEY,
 } from './constants';
 
-import type { MockSeeder } from 'src/mocks/types';
+import type { MockPresetId, MockSeeder } from 'src/mocks/types';
 
 /**
  * Whether MSW is enabled via local storage setting.
@@ -24,7 +24,7 @@ export const isMSWEnabled =
  *
  * @param enabled - Whether or not to enable MSW.
  */
-export const saveMSWEnabled = (enabled: boolean) => {
+export const saveMSWEnabled = (enabled: boolean): void => {
   localStorage.setItem(LOCAL_STORAGE_KEY, enabled ? 'enabled' : 'disabled');
 };
 
@@ -33,17 +33,17 @@ export const saveMSWEnabled = (enabled: boolean) => {
  *
  * @returns ID of selected MSW preset, or `null` if no preset is saved.
  */
-export const getMSWPreset = () => {
+export const getMSWPreset = (): MockPresetId => {
   return (
-    localStorage.getItem(LOCAL_STORAGE_PRESET_KEY) ??
+    (localStorage.getItem(LOCAL_STORAGE_PRESET_KEY) as MockPresetId) ??
     defaultBaselineMockPreset.id
   );
 };
 
 /**
  * Saves ID of selected MSW preset in local storage.
  */
-export const saveMSWPreset = (presetId: string) => {
+export const saveMSWPreset = (presetId: MockPresetId): void => {
   localStorage.setItem(LOCAL_STORAGE_PRESET_KEY, presetId);
 };
 

diff --git a/packages/manager/src/mocks/presets/baseline/baseline-connection-slow-unstable.ts b/packages/manager/src/mocks/presets/baseline/baseline-connection-slow-unstable.ts
diff --git a/packages/manager/src/mocks/presets/baseline/baseline-connection-slow.ts b/packages/manager/src/mocks/presets/baseline/baseline-connection-slow.ts
diff --git a/packages/manager/src/mocks/presets/baseline/baseline-connection-unstable.ts b/packages/manager/src/mocks/presets/baseline/baseline-connection-unstable.ts