linode · hana-akamai · Jul 10, 2024 · Jul 3, 2024 · Jul 3, 2024 · Jul 3, 2024
diff --git a/packages/manager/.changeset/pr-10645-tech-stories-1720037366869.md b/packages/manager/.changeset/pr-10645-tech-stories-1720037366869.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Improve getQueryParamsFromQueryString type safety ([#10645](https://github.com/linode/manager/pull/10645))
diff --git a/packages/manager/src/components/OrderBy.tsx b/packages/manager/src/components/OrderBy.tsx
@@ -9,7 +9,6 @@ import {
   useMutatePreferences,
   usePreferences,
 } from 'src/queries/profile/preferences';
-import { ManagerPreferences } from 'src/types/ManagerPreferences';
 import { getQueryParamsFromQueryString } from 'src/utilities/queryParams';
 import {
   sortByArrayLength,
@@ -19,6 +18,7 @@ import {
 } from 'src/utilities/sort-by';
 
 import type { Order } from 'src/hooks/useOrder';
+import type { ManagerPreferences } from 'src/types/ManagerPreferences';
 
 export interface OrderByProps<T> extends State {
   data: T[];
@@ -165,7 +165,7 @@ export const OrderBy = <T,>(props: CombinedProps<T>) => {
   const initialValues = getInitialValuesFromUserPreferences(
     props.preferenceKey ?? '',
     preferences ?? {},
-    params as Record<string, string>,
+    params,
     props.orderBy,
     props.order
   );

diff --git a/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx b/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx
@@ -1,4 +1,3 @@
-import { Firewall, FirewallDeviceEntityType } from '@linode/api-v4';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { useLocation } from 'react-router-dom';
@@ -15,7 +14,8 @@ import { getQueryParamsFromQueryString } from 'src/utilities/queryParams';
 import { Autocomplete } from '../Autocomplete/Autocomplete';
 import { LinkButton } from '../LinkButton';
 
-import type { LinodeCreateType } from 'src/features/Linodes/LinodesCreate/types';
+import type { Firewall, FirewallDeviceEntityType } from '@linode/api-v4';
+import type { LinodeCreateQueryParams } from 'src/features/Linodes/types';
 
 interface Props {
   disabled?: boolean;
@@ -37,15 +37,17 @@ export const SelectFirewallPanel = (props: Props) => {
   const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
   const location = useLocation();
   const isFromLinodeCreate = location.pathname.includes('/linodes/create');
-  const queryParams = getQueryParamsFromQueryString(location.search);
+  const queryParams = getQueryParamsFromQueryString<LinodeCreateQueryParams>(
+    location.search
+  );
 
   const handleCreateFirewallClick = () => {
     setIsDrawerOpen(true);
     if (isFromLinodeCreate) {
       sendLinodeCreateFormStepEvent({
         action: 'click',
         category: 'button',
-        createType: (queryParams.type as LinodeCreateType) ?? 'Distributions',
+        createType: queryParams.type ?? 'Distributions',
         formStepName: 'Firewall Panel',
         label: 'Create Firewall',
         version: 'v1',
@@ -91,8 +93,7 @@ export const SelectFirewallPanel = (props: Props) => {
             sendLinodeCreateFormStepEvent({
               action: 'click',
               category: 'select',
-              createType:
-                (queryParams.type as LinodeCreateType) ?? 'Distributions',
+              createType: queryParams.type ?? 'Distributions',
               formStepName: 'Firewall Panel',
               label: 'Assign Firewall',
               version: 'v1',

diff --git a/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx b/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx
@@ -5,8 +5,8 @@ import { useLocation } from 'react-router-dom';
 import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
 import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
-import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils';
 import { isDistributedRegionSupported } from 'src/components/RegionSelect/RegionSelect.utils';
+import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils';
 import { TwoStepRegionSelect } from 'src/components/RegionSelect/TwoStepRegionSelect';
 import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText';
 import { Typography } from 'src/components/Typography';
@@ -31,7 +31,7 @@ import { Link } from '../Link';
 
 import type { RegionSelectProps } from '../RegionSelect/RegionSelect.types';
 import type { Capabilities } from '@linode/api-v4/lib/regions';
-import type { LinodeCreateType } from 'src/features/Linodes/LinodesCreate/types';
+import type { LinodeCreateQueryParams } from 'src/features/Linodes/types';
 
 export interface SelectRegionPanelProps {
   RegionSelectProps?: Partial<RegionSelectProps<true>>;
@@ -66,7 +66,9 @@ export const SelectRegionPanel = (props: SelectRegionPanelProps) => {
   const flags = useFlags();
   const location = useLocation();
   const theme = useTheme();
-  const params = getQueryParamsFromQueryString(location.search);
+  const params = getQueryParamsFromQueryString<LinodeCreateQueryParams>(
+    location.search
+  );
 
   const { isGeckoGAEnabled } = useIsGeckoEnabled();
 
@@ -99,8 +101,7 @@ export const SelectRegionPanel = (props: SelectRegionPanelProps) => {
     });
 
   const hideDistributedRegions =
-    !flags.gecko2?.enabled ||
-    !isDistributedRegionSupported(params.type as LinodeCreateType);
+    !flags.gecko2?.enabled || !isDistributedRegionSupported(params.type);
 
   const showDistributedRegionIconHelperText = Boolean(
     !hideDistributedRegions &&
@@ -113,7 +114,7 @@ export const SelectRegionPanel = (props: SelectRegionPanelProps) => {
   );
 
   const disabledRegions = getDisabledRegions({
-    linodeCreateTab: params.type as LinodeCreateType,
+    linodeCreateTab: params.type,
     regions: regions ?? [],
     selectedImage: image,
   });
@@ -151,7 +152,7 @@ export const SelectRegionPanel = (props: SelectRegionPanelProps) => {
             sendLinodeCreateFormStepEvent({
               action: 'click',
               category: 'link',
-              createType: (params.type as LinodeCreateType) ?? 'Distributions',
+              createType: params.type ?? 'Distributions',
               label: DOCS_LINK_LABEL_DC_PRICING,
               version: 'v1',
             })
@@ -177,8 +178,7 @@ export const SelectRegionPanel = (props: SelectRegionPanelProps) => {
           </Typography>
         </Notice>
       ) : null}
-      {isGeckoGAEnabled &&
-      isDistributedRegionSupported(params.type as LinodeCreateType) ? (
+      {isGeckoGAEnabled && isDistributedRegionSupported(params.type) ? (
         <TwoStepRegionSelect
           showDistributedRegionIconHelperText={
             showDistributedRegionIconHelperText

diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx
@@ -42,7 +42,7 @@ import type {
   Linode,
   NodeBalancer,
 } from '@linode/api-v4';
-import type { LinodeCreateType } from 'src/features/Linodes/LinodesCreate/types';
+import type { LinodeCreateQueryParams } from 'src/features/Linodes/types';
 
 export const READ_ONLY_DEVICES_HIDDEN_MESSAGE =
   'Only services you have permission to modify are shown.';
@@ -80,7 +80,9 @@ export const CreateFirewallDrawer = React.memo(
 
     const location = useLocation();
     const isFromLinodeCreate = location.pathname.includes('/linodes/create');
-    const queryParams = getQueryParamsFromQueryString(location.search);
+    const queryParams = getQueryParamsFromQueryString<LinodeCreateQueryParams>(
+      location.search
+    );
 
     const {
       errors,
@@ -224,8 +226,7 @@ export const CreateFirewallDrawer = React.memo(
           sendLinodeCreateFormStepEvent({
             action: 'click',
             category: 'link',
-            createType:
-              (queryParams.type as LinodeCreateType) ?? 'Distributions',
+            createType: queryParams.type ?? 'Distributions',
             formStepName: 'Create Firewall Drawer',
             label: 'Learn more',
             version: 'v1',
@@ -379,8 +380,7 @@ export const CreateFirewallDrawer = React.memo(
                 sendLinodeCreateFormStepEvent({
                   action: 'click',
                   category: 'button',
-                  createType:
-                    (queryParams.type as LinodeCreateType) ?? 'Distributions',
+                  createType: queryParams.type ?? 'Distributions',
                   formStepName: 'Create Firewall Drawer',
                   label: 'Create Firewall',
                   version: 'v1',

diff --git a/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx b/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx
@@ -33,12 +33,16 @@ import { useRegionsQuery } from 'src/queries/regions/regions';
 import { getQueryParamsFromQueryString } from 'src/utilities/queryParams';
 
 import type { CreateImagePayload } from '@linode/api-v4';
+import type { LinodeConfigAndDiskQueryParams } from 'src/features/Linodes/types';
 
 export const CreateImageTab = () => {
   const location = useLocation();
 
   const queryParams = React.useMemo(
-    () => getQueryParamsFromQueryString(location.search),
+    () =>
+      getQueryParamsFromQueryString<LinodeConfigAndDiskQueryParams>(
+        location.search
+      ),
     [location.search]
   );
 

diff --git a/packages/manager/src/features/Linodes/CloneLanding/CloneLanding.tsx b/packages/manager/src/features/Linodes/CloneLanding/CloneLanding.tsx
@@ -1,12 +1,6 @@
-import {
-  Disk,
-  Linode,
-  cloneLinode,
-  cloneLinodeDisk,
-} from '@linode/api-v4/lib/linodes';
-import { APIError } from '@linode/api-v4/lib/types';
-import Grid from '@mui/material/Unstable_Grid2';
+import { cloneLinode, cloneLinodeDisk } from '@linode/api-v4/lib/linodes';
 import { useTheme } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import { castDraft } from 'immer';
 import { intersection, pathOr } from 'ramda';
 import * as React from 'react';
@@ -46,6 +40,10 @@ import {
   defaultState,
 } from './utilities';
 
+import type { Disk, Linode } from '@linode/api-v4/lib/linodes';
+import type { APIError } from '@linode/api-v4/lib/types';
+import type { LinodeConfigAndDiskQueryParams } from 'src/features/Linodes/types';
+
 const Configs = React.lazy(() => import('./Configs'));
 const Disks = React.lazy(() => import('./Disks'));
 const LinodesDetailHeader = React.lazy(
@@ -126,7 +124,10 @@ const CloneLanding = () => {
   // A config and/or disk can be selected via query param. Memoized
   // so it can be used as a dep in the useEffects that consume it.
   const queryParams = React.useMemo(
-    () => getQueryParamsFromQueryString(location.search),
+    () =>
+      getQueryParamsFromQueryString<LinodeConfigAndDiskQueryParams>(
+        location.search
+      ),
     [location.search]
   );