More cleanup

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

@@ -9,6 +9,7 @@ import { getStorage, setStorage } from 'src/utilities/storage';
 
 import type { FlagSet, Flags } from 'src/featureFlags';
 import type { Dispatch } from 'src/hooks/types';
+
 const MOCK_FEATURE_FLAGS_STORAGE_KEY = 'devTools/mock-feature-flags';
 
 /**
@@ -17,13 +18,13 @@ const MOCK_FEATURE_FLAGS_STORAGE_KEY = 'devTools/mock-feature-flags';
  * It is required to have the `enabled` key if using a JSON object for on/off featured flags.
  * This requirement is both documented here and in our Docs since we don't have a way to enforce types from Launch Darkly objects.
  */
-const options: { flag: keyof Flags; label: string; desc?: string }[] = [
-  { flag: 'aclb', label: 'ACLB', desc: 'Akamai Cloud Load Balancers' },
+const options: { desc?: string; flag: keyof Flags; label: string }[] = [
+  { desc: 'Akamai Cloud Load Balancers', flag: 'aclb', label: 'ACLB' },
   { flag: 'aclbFullCreateFlow', label: 'ACLB Full Create Flow' },
   {
+    desc: 'Enable CloudPulse monitoring feature',
     flag: 'aclp',
     label: 'CloudPulse',
-    desc: 'Enable CloudPulse monitoring feature',
   },
   { flag: 'disableLargestGbPlans', label: 'Disable Largest GB Plans' },
   { flag: 'eventMessagesV2', label: 'Event Messages V2' },
@@ -115,45 +116,9 @@ export const FeatureFlagTool = withFeatureFlagProvider(() => {
       </div>
       <div className="dev-tools__tool__footer">
         <div className="dev-tools__button-list">
-          <button onClick={resetFlags}>Reset to Default</button>
+          <button onClick={resetFlags}>Reset to LD Defaults (dev)</button>
         </div>
       </div>
     </div>
-    //    <Grid xs={12}>
-    // //     <h4 style={{ marginBottom: 8, marginTop: 0 }}>Feature Flags</h4>
-    // //   </Grid>
-    //   <Grid xs={12}>
-    //     <div style={{ display: 'flex', flexDirection: 'column' }}>
-    //       {options.map((thisOption) => {
-    //         const flagValue = flags[thisOption.flag];
-    //         const isChecked =
-    //           typeof flagValue === 'object' && 'enabled' in flagValue
-    //             ? Boolean(flagValue.enabled)
-    //             : Boolean(flagValue);
-    //         return (
-    //           <div
-    //             style={{
-    //               alignItems: 'center',
-    //               display: 'flex',
-    //               flexDirection: 'row',
-    //               justifyContent: 'space-between',
-    //             }}
-    //             key={thisOption.flag}
-    //           >
-    //             <span>{thisOption.label} </span>
-    //             <input
-    //               checked={isChecked}
-    //               onChange={(e) => handleCheck(e, thisOption.flag)}
-    //               type="checkbox"
-    //             />
-    //           </div>
-    //         );
-    //       })}
-    //       <button onClick={resetFlags} style={{ marginTop: 8 }}>
-    //         Reset to LD default flags
-    //       </button>
-    //     </div>
-    //   </Grid>
-    // </Grid>
   );
 });

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

@@ -1,37 +1,31 @@
 import Handyman from '@mui/icons-material/Handyman';
-// import Grid from '@mui/material/Unstable_Grid2';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 
-// import { ENABLE_DEV_TOOLS, isProductionBuild } from 'src/constants';
-import { ApplicationStore } from 'src/store';
-
 import './dev-tools.css';
 import { EnvironmentToggleTool } from './EnvironmentToggleTool';
 import { FeatureFlagTool } from './FeatureFlagTool';
-import { ServiceWorkerTool } from './ServiceWorkerTool';
-//import { MockDataTool } from './MockDataTool';
-// import { Preferences } from './Preferences';
 import { isMSWEnabled } from './ServiceWorkerTool';
-import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
-import { QueryClientProvider } from '@tanstack/react-query';
+import { ServiceWorkerTool } from './ServiceWorkerTool';
+
 import type { QueryClient } from '@tanstack/react-query';
-// import { ThemeSelector } from './ThemeSelector';
+import type { ApplicationStore } from 'src/store';
 
 export type DevToolsView = 'mocks' | 'react-query';
 
 const reactQueryDevtoolsStyle = {
   border: '1px solid rgba(255, 255, 255, 0.25)',
-  width: '100%',
   height: '100%',
+  width: '100%',
 };
 
 function install(store: ApplicationStore, queryClient: QueryClient) {
   function DevTools() {
     const [isOpen, setIsOpen] = React.useState<boolean>(false);
     const [view, setView] = React.useState<DevToolsView>('mocks');
-    //const [isReactQueryOpen, setReactQueryOpen] = React.useState<boolean>(false);
 
     const handleOpenReactQuery = () => {
       setView('react-query');
@@ -46,94 +40,70 @@ function install(store: ApplicationStore, queryClient: QueryClient) {
     };
 
     return (
-      <>
-        <div
-          className={`dev-tools ${isMSWEnabled && 'dev-tools--msw'} ${
-            isOpen && 'dev-tools--open'
-          }`}
-        >
-          <div className="dev-tools__toggle">
-            <button onClick={() => setIsOpen(!isOpen)}>
-              <Handyman />
-            </button>
-          </div>
-          <div className="dev-tools__body">
-            <div className="dev-tools__content">
-              <div className="dev-tools__status-bar">
-                <div>
-                  <EnvironmentToggleTool />
-                </div>
-                <div className="dev-tools__segmented-button">
-                  <button
-                    className={`toggle-button ${
-                      view === 'mocks' && 'toggle-button--on'
-                    }`}
-                    onClick={handleOpenMocks}
-                  >
-                    Mocks
-                  </button>
-                  <button
-                    className={`toggle-button ${
-                      view === 'react-query' && 'toggle-button--on'
-                    }`}
-                    onClick={handleOpenReactQuery}
-                  >
-                    React Query
-                  </button>
-                </div>
-                <div>
-                  <button onClick={handleGoToPreferences}>
-                    Go to Preferences
-                  </button>
-                </div>
+      <div
+        className={`dev-tools ${isMSWEnabled && 'dev-tools--msw'} ${
+          isOpen && 'dev-tools--open'
+        }`}
+      >
+        <div className="dev-tools__toggle">
+          <button onClick={() => setIsOpen(!isOpen)}>
+            <Handyman />
+          </button>
+        </div>
+        <div className="dev-tools__body">
+          <div className="dev-tools__content">
+            <div className="dev-tools__status-bar">
+              <div>
+                <EnvironmentToggleTool />
+              </div>
+              <div className="dev-tools__segmented-button">
+                <button
+                  className={`toggle-button ${
+                    view === 'mocks' && 'toggle-button--on'
+                  }`}
+                  onClick={handleOpenMocks}
+                >
+                  Mocks
+                </button>
+                <button
+                  className={`toggle-button ${
+                    view === 'react-query' && 'toggle-button--on'
+                  }`}
+                  onClick={handleOpenReactQuery}
+                >
+                  React Query
+                </button>
               </div>
-              <div className="dev-tools__main">
-                {view === 'mocks' && (
-                  <>
-                    <div className="dev-tools__main__column">
-                      <FeatureFlagTool />
-                    </div>
-                    <div className="dev-tools__main__column">
-                      <ServiceWorkerTool />
-                    </div>
-                  </>
-                )}
-                {view === 'react-query' && (
-                  <QueryClientProvider client={queryClient}>
-                    <ReactQueryDevtoolsPanel
-                      setIsOpen={() => {}}
-                      onDragStart={() => {}}
-                      style={reactQueryDevtoolsStyle}
-                    />
-                  </QueryClientProvider>
-                )}
+              <div>
+                <button onClick={handleGoToPreferences}>
+                  Go to Preferences
+                </button>
               </div>
             </div>
+            <div className="dev-tools__main">
+              {view === 'mocks' && (
+                <>
+                  <div className="dev-tools__main__column">
+                    <FeatureFlagTool />
+                  </div>
+                  <div className="dev-tools__main__column">
+                    <ServiceWorkerTool />
+                  </div>
+                </>
+              )}
+              {view === 'react-query' && (
+                <QueryClientProvider client={queryClient}>
+                  <ReactQueryDevtoolsPanel
+                    onDragStart={() => {}}
+                    setIsOpen={() => {}}
+                    style={reactQueryDevtoolsStyle}
+                  />
+                </QueryClientProvider>
+              )}
+            </div>
           </div>
         </div>
-      </>
-      // <div className={isMSWEnabled ? 'mswEnabled' : ''} id="dev-tools">
-      //   <div>
-      //     <Handyman />
-      //   </div>
-      //   <Grid className="tools" container spacing={2}>
-      //     <Grid sm={2} xs={4}>
-      //       <FeatureFlagTool />
-      //     </Grid>
-      //     {import.meta.env.DEV && (
-      //       <Grid md={3} sm={5} xs={4}>
-      //         <EnvironmentToggleTool />
-      //       </Grid>
-      //     )}
-      //     {!isProductionBuild || ENABLE_DEV_TOOLS ? (
-      //       <Grid md={3} sm={5} xs={4}>
-      //         <MockDataTool />
-      //         <ThemeSelector />
-      //         <Preferences />
-      //       </Grid>
-      //     ) : null}
-      //   </Grid>
-      // </div>
+      </div>
     );
   }
 

packages/manager/src/dev-tools/load.ts

@@ -12,8 +12,11 @@ import {
 } from './ServiceWorkerTool';
 
 import type { QueryClient } from '@tanstack/react-query';
-import type { MockContext, MockContextPopulator } from 'src/mocks/mockContext';
-import type { MockPreset } from 'src/mocks/mockPreset';
+import type {
+  MockContext,
+  MockContextPopulator,
+  MockPreset,
+} from 'src/mocks/types';
 import type { ApplicationStore } from 'src/store';
 
 /**

packages/manager/src/mocks/context/populators/environment/edge-regions.ts

@@ -1,14 +1,15 @@
 import { edgeRegions } from 'src/__data__/edgeRegionsData';
-import type { MockContext, MockContextPopulator } from 'src/mocks/mockContext';
+
+import type { MockContext, MockContextPopulator } from 'src/mocks/types';
 
 /**
  * Populates context with Regions that simulate our Production regions.
  */
 export const edgeRegionsPopulator: MockContextPopulator = {
-  label: 'Edge Regions',
-  id: 'edge-regions',
   desc: 'Populates context with mock Edge region data',
   group: 'Environment',
+  id: 'edge-regions',
+  label: 'Edge Regions',
 
   populator: (mockContext: MockContext) => {
     mockContext.regions.push(...edgeRegions);

packages/manager/src/mocks/context/populators/environment/legacy-test-regions.ts

@@ -1,14 +1,15 @@
 import { regions } from 'src/__data__/regionsData';
-import type { MockContext, MockContextPopulator } from 'src/mocks/mockContext';
+
+import type { MockContext, MockContextPopulator } from 'src/mocks/types';
 
 /**
  * Populates context with Regions that simulate our Production regions.
  */
 export const legacyRegionsPopulator: MockContextPopulator = {
-  label: 'Legacy Test Regions',
-  id: 'legacy-test-regions',
   desc: 'Populates context with legacy mock region data',
   group: 'Environment',
+  id: 'legacy-test-regions',
+  label: 'Legacy Test Regions',
 
   populator: (mockContext: MockContext) => {
     mockContext.regions.push(...regions);

packages/manager/src/mocks/context/populators/environment/production-regions.ts

@@ -1,14 +1,15 @@
 import { productionRegions } from 'src/__data__/productionRegionsData';
-import type { MockContext, MockContextPopulator } from 'src/mocks/mockContext';
+
+import type { MockContext, MockContextPopulator } from 'src/mocks/types';
 
 /**
  * Populates context with Regions that simulate our Production regions.
  */
 export const productionRegionsPopulator: MockContextPopulator = {
-  label: 'Production Regions',
-  id: 'prod-regions',
   desc: 'Populates context with Production-like region data',
   group: 'Environment',
+  id: 'prod-regions',
+  label: 'Production Regions',
 
   populator: (mockContext: MockContext) => {
     mockContext.regions.push(...productionRegions);

packages/manager/src/mocks/context/populators/linodes/many-linodes-populator.ts

@@ -1,17 +1,17 @@
-import type { MockContext, MockContextPopulator } from 'src/mocks/mockContext';
-import type { Config } from '@linode/api-v4';
+import { configFactory, linodeFactory } from 'src/factories';
 
-import { linodeFactory, configFactory } from 'src/factories';
+import type { Config } from '@linode/api-v4';
+import type { MockContext, MockContextPopulator } from 'src/mocks/types';
 
 /**
  * Populates context with 5,000 Linodes.
  * Useful for testing landing page pagination, list and search performance, etc.
  */
 export const manyLinodesPopulator: MockContextPopulator = {
-  label: 'Many Linodes',
-  id: 'many-linodes',
   desc: 'Populates context with 5,000 Linodes',
   group: 'Linodes',
+  id: 'many-linodes',
+  label: 'Many Linodes',
 
   populator: (mockContext: MockContext) => {
     const linodes = linodeFactory.buildList(5000);

packages/manager/src/mocks/handlers/event-handlers.ts

@@ -1,16 +1,17 @@
-import { StrictResponse, http } from 'msw';
+import { DateTime } from 'luxon';
+import { http } from 'msw';
+
 import { getPaginatedSlice } from '../utilities/pagination';
 import {
   makeNotFoundResponse,
   makePaginatedResponse,
   makeResponse,
 } from '../utilities/response';
-import { DateTime } from 'luxon';
 
 import type { APIErrorResponse } from '../utilities/response';
-import type { MockContext } from '../mockContext';
 import type { Event } from '@linode/api-v4';
-import type { MockEventProgressHandler } from '../mockContext';
+import type { StrictResponse } from 'msw';
+import type { MockContext, MockEventProgressHandler } from 'src/mocks/types';
 
 /**
  * Filters events by their `created` date.
@@ -68,7 +69,7 @@ export const getEvents = (mockContext: MockContext) => [
   }),
   http.get(
     '*/v4*/events/:id',
-    ({ params }): StrictResponse<Event | APIErrorResponse> => {
+    ({ params }): StrictResponse<APIErrorResponse | Event> => {
       const id = Number(params.id);
       const event = mockContext.eventQueue.find(
         (eventQueueItem) => eventQueueItem[0].id === id