code cleanup 3

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

Hide file tree

Showing 10 changed files with 89 additions and 81 deletions.
diff --git a/packages/manager/src/dev-tools/ServiceWorkerTool.tsx b/packages/manager/src/dev-tools/ServiceWorkerTool.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Tooltip } from 'src/components/Tooltip';
 import { mswDB } from 'src/mocks/indexedDB';
 import { dbSeeders } from 'src/mocks/seeds';
-import { removeSeeds } from 'src/mocks/utilities/seedUtils';
+import { removeSeeds } from 'src/mocks/seeds/utils';
 
 import { BaselinePresetOptions } from './components/BaselinePresetOptions';
 import { DevToolSelect } from './components/DevToolSelect';
@@ -45,11 +45,9 @@ export const ServiceWorkerTool = () => {
   const [MSWBasePreset, setMSWBasePreset] = React.useState<MockPresetId>(
     loadedBasePreset
   );
-  const [MSWExtraPresets, setMSWExtraPresets] = React.useState<string[]>([
-    ...loadedExtraPresets,
-    // enable setAPIResponseTime by default
-    'api-response-time',
-  ]);
+  const [MSWExtraPresets, setMSWExtraPresets] = React.useState<string[]>(
+    loadedExtraPresets
+  );
   const [presetsCountMap, setPresetsCountMap] = React.useState<{
     [key: string]: number;
   }>({

diff --git a/packages/manager/src/dev-tools/components/ExtraPresetOptions.tsx b/packages/manager/src/dev-tools/components/ExtraPresetOptions.tsx
@@ -3,8 +3,6 @@ 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[];
@@ -23,8 +21,6 @@ export const ExtraPresetOptions = ({
   onTogglePreset,
   presetsCountMap,
 }: ExtraPresetOptionsProps) => {
-  const isCrudPreset = getMSWPreset() === 'baseline-crud';
-
   return (
     <ul>
       {getMockPresetGroups(extraMockPresets).map((group) => (
@@ -45,36 +41,55 @@ export const ExtraPresetOptions = ({
           {extraMockPresets
             .filter((extraMockPreset) => extraMockPreset.group === group)
             .map((extraMockPreset) => (
-              <li key={extraMockPreset.id}>
-                <input
-                  disabled={
-                    disabled ||
-                    (!isCrudPreset &&
-                      extraMockPreset.id === 'api-response-time')
-                  }
-                  style={{
-                    marginRight: 12,
-                  }}
-                  checked={handlers.includes(extraMockPreset.id)}
-                  onChange={(e) => onTogglePreset(e, extraMockPreset.id)}
-                  type="checkbox"
-                />
-                <span title={extraMockPreset.desc || extraMockPreset.label}>
-                  {extraMockPreset.label}
-                </span>
-                {extraMockPreset.canUpdateCount && (
+              <li
+                key={extraMockPreset.id}
+                style={{ display: 'flex', justifyContent: 'space-between' }}
+              >
+                <div>
                   <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={presetsCountMap[extraMockPreset.id] || 0}
+                    style={{
+                      marginRight: 12,
+                    }}
+                    checked={handlers.includes(extraMockPreset.id)}
+                    disabled={disabled}
+                    onChange={(e) => onTogglePreset(e, extraMockPreset.id)}
+                    type="checkbox"
                   />
+                  <span title={extraMockPreset.desc || extraMockPreset.label}>
+                    {extraMockPreset.label}
+                  </span>
+                </div>
+                {extraMockPreset.canUpdateCount && (
+                  <div
+                    style={{
+                      display: 'flex',
+                      position: 'relative',
+                      width: 85,
+                    }}
+                  >
+                    <span
+                      style={{
+                        color: '#000',
+                        left: '5px',
+                        position: 'absolute',
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                      }}
+                    >
+                      +
+                    </span>
+                    <input
+                      onChange={(e) =>
+                        onPresetCountChange(e, extraMockPreset.id)
+                      }
+                      aria-label={`Value for ${extraMockPreset.label}`}
+                      disabled={disabled}
+                      min={0}
+                      style={{ paddingLeft: '20px', width: '100%' }}
+                      type="number"
+                      value={presetsCountMap[extraMockPreset.id] || 0}
+                    />
+                  </div>
                 )}
               </li>
             ))}

diff --git a/packages/manager/src/dev-tools/components/SeedOptions.tsx b/packages/manager/src/dev-tools/components/SeedOptions.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import { Tooltip } from 'src/components/Tooltip';
 import { getStateSeederGroups } from 'src/mocks/mockState';
 import { dbSeeders } from 'src/mocks/seeds';
 
@@ -23,42 +22,38 @@ export const SeedOptions = ({
   seedsCountMap,
 }: SeedOptionsProps) => {
   return (
-    <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}>
+    <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 && (
                   <input
-                    checked={seeders.includes(dbSeeder.id)}
+                    aria-label={`Value for ${dbSeeder.label}`}
                     disabled={disabled}
-                    onChange={(e) => onToggleSeeder(e, dbSeeder.id)}
-                    style={{ marginRight: 12 }}
-                    type="checkbox"
+                    min={0}
+                    onChange={(e) => onCountChange(e, dbSeeder.id)}
+                    style={{ marginLeft: 8, width: 60 }}
+                    type="number"
+                    value={seedsCountMap[dbSeeder.id] || 0}
                   />
-                  <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>
+                )}
+              </li>
+            ))}
+        </div>
+      ))}
+    </ul>
   );
 };
diff --git a/packages/manager/src/dev-tools/constants.ts b/packages/manager/src/dev-tools/constants.ts
@@ -8,4 +8,4 @@ export const LOCAL_STORAGE_PRESET_EXTRAS_KEY = 'msw-preset-extras';
 
 export const LOCAL_STORAGE_SEEDS_COUNT_MAP_KEY = 'msw-seeds-count-map';
 
-export const LOCAL_STORAGE_PRESETS_MAP_KEY = 'msw-preset-map';
+export const LOCAL_STORAGE_PRESETS_MAP_KEY = 'msw-preset-count-map';
diff --git a/packages/manager/src/mocks/indexedDB.ts b/packages/manager/src/mocks/indexedDB.ts
@@ -1,4 +1,4 @@
-import { hasId } from './utilities/seedUtils';
+import { hasId } from './seeds/utils';
 
 import type { MockState } from './types';
 

diff --git a/packages/manager/src/mocks/presets/extra/api/api.ts b/packages/manager/src/mocks/presets/extra/api/api.ts
@@ -4,7 +4,7 @@ import { getMSWPresetsMap } from 'src/dev-tools/utils';
 
 import type { MockPreset } from 'src/mocks/types';
 
-const setAPIResponseTime = () => {
+const APIResponseTime = () => {
   const responseTime = getMSWPresetsMap()['api-response-time'] || 0;
 
   return [
@@ -25,7 +25,7 @@ export const apiResponseTimePreset: MockPreset = {
   canUpdateCount: true,
   desc: 'Allows to customize API response time',
   group: 'API State',
-  handlers: [setAPIResponseTime],
+  handlers: [APIResponseTime],
   id: 'api-response-time',
-  label: 'API Response Time',
+  label: 'API Response Time (ms)',
 };
diff --git a/packages/manager/src/mocks/presets/index.ts b/packages/manager/src/mocks/presets/index.ts
@@ -31,13 +31,13 @@ export const baselineMockPresets: MockPreset[] = [
 
 /** Extra mock presets can be used to conditionally apply extra functionality via mocks. */
 export const extraMockPresets: MockPreset[] = [
+  apiResponseTimePreset,
   managedEnabledPreset,
   managedDisabledPreset,
   parentAccountPreset,
   childAccountPreset,
   regionsPreset,
   legacyRegionsPreset,
-  apiResponseTimePreset,
 ];
 
 /** An array of all mock presets. */

diff --git a/packages/manager/src/mocks/seeds/linodes-seeder.ts b/packages/manager/src/mocks/seeds/linodes-seeder.ts
@@ -1,7 +1,7 @@
 import { getMSWSeedsCountMap } from 'src/dev-tools/utils';
 import { configFactory, linodeFactory } from 'src/factories';
 import { mswDB } from 'src/mocks/indexedDB';
-import { seedWithUniqueIds } from 'src/mocks/utilities/seedUtils';
+import { seedWithUniqueIds } from 'src/mocks/seeds/utils';
 
 import type { Config } from '@linode/api-v4';
 import type { MockSeeder, MockState } from 'src/mocks/types';

diff --git a/packages/manager/src/mocks/seeds/placementGroup-seeder.ts b/packages/manager/src/mocks/seeds/placementGroup-seeder.ts
@@ -1,7 +1,7 @@
 import { getMSWSeedsCountMap } from 'src/dev-tools/utils';
 import { placementGroupFactory } from 'src/factories';
 import { mswDB } from 'src/mocks/indexedDB';
-import { seedWithUniqueIds } from 'src/mocks/utilities/seedUtils';
+import { seedWithUniqueIds } from 'src/mocks/seeds/utils';
 
 import type { MockSeeder, MockState } from 'src/mocks/types';
 

diff --git a/.../manager/src/mocks/utilities/seedUtils.ts → packages/manager/src/mocks/seeds/utils.ts b/.../manager/src/mocks/utilities/seedUtils.ts → packages/manager/src/mocks/seeds/utils.ts