linode · bnussman-akamai · Aug 8, 2024 · Aug 5, 2024 · Aug 5, 2024 · Aug 5, 2024
@@ -182,6 +182,7 @@ export type GlobalGrantTypes =
   | 'add_images'
   | 'add_linodes'
   | 'add_longview'
+  | 'add_databases'
   | 'add_nodebalancers'
   | 'add_stackscripts'
   | 'add_volumes'

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Remove `suppressImplicitAnyIndexErrors` and `ignoreDeprecations` Typescript Options  ([#10755](https://github.com/linode/manager/pull/10755))
@@ -66,7 +66,7 @@ describe('Third party access tokens', () => {
       .findByTitle(token.label)
       .should('be.visible')
       .within(() => {
-        Object.keys(access).forEach((key) => {
+        Object.keys(access).forEach((key: keyof typeof access) => {
           cy.findByText(key)
             .closest('tr')
             .within(() => {

@@ -281,6 +281,7 @@ describe('User permission management', () => {
         cancel_account: true,
         child_account_access: true,
         add_domains: true,
+        add_databases: true,
         add_firewalls: true,
         add_images: true,
         add_linodes: true,

@@ -78,7 +78,7 @@ const addFirewallRules = (rule: FirewallRuleType, direction: string) => {
     .within(() => {
       const port = rule.ports ? rule.ports : '22';
       cy.findByPlaceholderText('Select a rule preset...').type(
-        portPresetMap[port] + '{enter}'
+        portPresetMap[port as keyof typeof portPresetMap] + '{enter}'
       );
       const label = rule.label ? rule.label : 'test-label';
       const description = rule.description

@@ -55,9 +55,9 @@ const fillOutStackscriptForm = (
       .type(description);
   }
 
-  cy.findByText('Target Images').click().type(`${targetImage}`);
+  cy.findByText('Target Images').click().type(targetImage);
 
-  cy.findByText(`${targetImage}`).should('be.visible').click();
+  cy.findByText(targetImage).should('be.visible').click();
 
   // Insert a script with invalid UDF data.
   cy.get('[data-qa-textfield-label="Script"]')

@@ -17,6 +17,7 @@ export const userPermissionsGrants: Grants = grantsFactory.build({
     add_longview: false,
     add_nodebalancers: false,
     add_stackscripts: false,
+    add_databases: false,
     add_volumes: false,
     add_vpcs: false,
     longview_subscription: false,

@@ -23,7 +23,7 @@ export const logTestTagInfo: CypressPlugin = (_on, config) => {
 
       console.table(
         getHumanReadableQueryRules(query).reduce(
-          (acc: {}, cur: string, index: number) => {
+          (acc: any, cur: string, index: number) => {
             acc[index] = cur;
             return acc;
           },

@@ -11,6 +11,7 @@ Cypress.Commands.add('trackPageVisit', { prevSubject: false }, () => {
   const pageLoadId = randomNumber(100000, 999999);
 
   cy.window({ log: false }).then((window) => {
+    // @ts-expect-error not in the cypress type
     window['cypress-visit-id'] = pageLoadId;
   });
 

@@ -72,20 +72,22 @@ export const isPartialFeatureFlagData = <T>(
  * @returns Feature flag response data that can be used for mocking purposes.
  */
 export const getResponseDataFromMockData = <T>(data: FeatureFlagMockData) => {
-  const output = { ...data };
-  return Object.keys(output).reduce((acc: FeatureFlagMockData, cur: string) => {
-    const mockData = output[cur];
-    if (isPartialFeatureFlagData<T>(mockData)) {
-      output[cur] = {
-        ...defaultFeatureFlagData,
-        ...mockData,
-      };
+  return Object.keys(data).reduce<Record<string, FeatureFlagData<T>>>(
+    (output, cur: keyof FeatureFlagMockData) => {
+      const mockData = output[cur];
+      if (isPartialFeatureFlagData<T>(mockData)) {
+        output[cur] = {
+          ...defaultFeatureFlagData,
+          ...mockData,
+        };
+        return output;
+      } else {
+        output[cur] = makeFeatureFlagData<T>(mockData);
+      }
       return output;
-    } else {
-      output[cur] = makeFeatureFlagData<T>(mockData);
-    }
-    return output;
-  }, output);
+    },
+    data as Record<string, FeatureFlagData<T>>
+  );
 };
 
 /**

@@ -30,6 +30,10 @@ export interface ButtonProps extends _ButtonProps {
    * @default false
    */
   compactY?: boolean;
+  /**
+   * Optional test ID
+   */
+  'data-testid'?: string;
   /**
    * Show a loading indicator
    * @default false

@@ -86,7 +86,7 @@ export const cleanCSVData = (data: any): any => {
 
   /** if it's an object, recursively sanitize each key value pair */
   if (typeof data === 'object') {
-    return Object.keys(data).reduce((acc, eachKey) => {
+    return Object.keys(data).reduce<{ [key: string]: any }>((acc, eachKey) => {
       acc[eachKey] = cleanCSVData(data[eachKey]);
       return acc;
     }, {});

@@ -18,11 +18,16 @@ interface Props {
 export const Flag = (props: Props) => {
   const country = props.country.toLowerCase();
 
-  return (
-    <StyledFlag
-      className={`fi fi-${COUNTRY_FLAG_OVERRIDES[country] ?? country} fi-xx`}
-    />
-  );
+  return <StyledFlag className={`fi fi-${getFlagClass(country)} fi-xx`} />;
+};
+
+const getFlagClass = (country: Country | string) => {
+  if (country in COUNTRY_FLAG_OVERRIDES) {
+    return COUNTRY_FLAG_OVERRIDES[
+      country as keyof typeof COUNTRY_FLAG_OVERRIDES
+    ];
+  }
+  return country;
 };
 
 const StyledFlag = styled('div', { label: 'StyledFlag' })(({ theme }) => ({

@@ -117,7 +117,7 @@ export const imagesToGroupedItems = (images: Image[]) => {
                 acc.push({
                   className: vendor
                     ? // Use Tux as a fallback.
-                      `fl-${OS_ICONS[vendor] ?? 'tux'}`
+                      `fl-${OS_ICONS[vendor as keyof typeof OS_ICONS] ?? 'tux'}`
                     : `fl-tux`,
                   created,
                   isCloudInitCompatible: capabilities?.includes('cloud-init'),

@@ -8,10 +8,14 @@ import { StyledActionButton } from 'src/components/Button/StyledActionButton';
 interface InlineMenuActionProps {
   /** Required action text */
   actionText: string;
+  /** Optional aria label */
+  'aria-label'?: string;
   /** Optional height when displayed as a button */
   buttonHeight?: number;
   /** Optional class names */
   className?: string;
+  /** Optional test id */
+  'data-testid'?: string;
   /** Optional disabled */
   disabled?: boolean;
   /** Optional href */
@@ -51,7 +55,6 @@ export const InlineMenuAction = (props: InlineMenuActionProps) => {
   return (
     <StyledActionButton
       // TODO: We need to define what buttonType this will be in the future for now 'secondary' works...
-      aria-label={rest['aria-label']}
       buttonType="primary"
       disabled={disabled}
       loading={loading}

@@ -21,7 +21,9 @@ interface Props extends BoxProps {
 export const OSIcon = (props: Props) => {
   const { os, ...rest } = props;
 
-  const className = os ? `fl-${OS_ICONS[os] ?? 'tux'}` : `fl-tux`;
+  const className = os
+    ? `fl-${OS_ICONS[os as keyof typeof OS_ICONS] ?? 'tux'}`
+    : `fl-tux`;
 
   return <Box className={className} data-testid="os-icon" {...rest} />;
 };

@@ -84,11 +84,14 @@ export const ThirdPartyPayment = (props: Props) => {
         <Icon />
       </Box>
       <Box className={classes.paymentTextContainer}>
-        {!matchesSmDown ? (
+        {!matchesSmDown && (
           <Typography className={classes.paymentMethodLabel}>
-            {thirdPartyPaymentMap[paymentMethod.type].label}
+            {
+              thirdPartyPaymentMap[paymentMethod.type as _ThirdPartyPayment]
+                .label
+            }
           </Typography>
-        ) : null}
+        )}
         {renderThirdPartyPaymentBody(paymentMethod)}
       </Box>
     </>

@@ -43,7 +43,9 @@ export const getRegionOptions = ({
           return (
             region.site_type === 'edge' ||
             (region.site_type === 'distributed' &&
-              CONTINENT_CODE_TO_CONTINENT[distributedContinentCode] === group)
+              CONTINENT_CODE_TO_CONTINENT[
+                distributedContinentCode as keyof typeof CONTINENT_CODE_TO_CONTINENT
+              ] === group)
           );
         }
         return regionFilter.includes(region.site_type);

@@ -98,9 +98,11 @@ const cloneLandingReducer = (
         });
 
         if (existingFile) {
-          Object.keys(action.data).forEach((key) => {
-            existingFile[key] = action.data[key];
-          });
+          Object.keys(action.data).forEach(
+            (key: keyof Partial<ExtendedFile>) => {
+              (existingFile as any)[key] = action.data[key];
+            }
+          );
 
           // If the status has been changed, we need to update the count.
           if (action.data.status) {

@@ -35,10 +35,10 @@ export const getOptions = (env: Partial<ImportMetaEnv>) => {
     return [
       ...acc,
       {
-        apiRoot: env[`${base}_API_ROOT`] ?? '',
-        clientID: env[`${base}_CLIENT_ID`] ?? '',
-        label: env[thisEnvVariable] ?? '',
-        loginRoot: env[`${base}_LOGIN_ROOT`] ?? '',
+        apiRoot: (env as any)[`${base}_API_ROOT`] ?? '',
+        clientID: (env as any)[`${base}_CLIENT_ID`] ?? '',
+        label: (env as any)[thisEnvVariable] ?? '',
+        loginRoot: (env as any)[`${base}_LOGIN_ROOT`] ?? '',
       },
     ];
   }, []);

@@ -31,6 +31,7 @@ export const grantsFactory = Factory.Sync.makeFactory<Grants>({
   ],
   global: {
     account_access: 'read_write',
+    add_databases: true,
     add_domains: true,
     add_firewalls: true,
     add_images: true,

@@ -40,10 +40,8 @@ export const ChildAccountList = React.memo(
     const filter: Filter = {
       ['+order']: 'asc',
       ['+order_by']: 'company',
+      ...(searchQuery && { company: { '+contains': searchQuery } }),
     };
-    if (searchQuery) {
-      filter['company'] = { '+contains': searchQuery };
-    }
 
     const [
       isSwitchingChildAccounts,

@@ -7,6 +7,7 @@ import { BetaDetailsList } from 'src/features/Betas/BetaDetailsList';
 import { useAccountBetasQuery } from 'src/queries/account/betas';
 import { useBetasQuery } from 'src/queries/betas';
 import { categorizeBetasByStatus } from 'src/utilities/betaUtils';
+import { AccountBeta, Beta } from '@linode/api-v4';
 
 const BetasLanding = () => {
   const {
@@ -24,14 +25,17 @@ const BetasLanding = () => {
   const betas = betasRequest?.data ?? [];
 
   const allBetas = [...accountBetas, ...betas];
-  const allBetasMerged = allBetas.reduce((acc, beta) => {
-    if (acc[beta.id]) {
-      acc[beta.id] = Object.assign(beta, acc[beta.id]);
-    } else {
-      acc[beta.id] = beta;
-    }
-    return acc;
-  }, {});
+  const allBetasMerged = allBetas.reduce<Record<string, AccountBeta | Beta>>(
+    (acc, beta) => {
+      if (acc[beta.id]) {
+        acc[beta.id] = Object.assign(beta, acc[beta.id]);
+      } else {
+        acc[beta.id] = beta;
+      }
+      return acc;
+    },
+    {}
+  );
 
   const { active, available, historical } = categorizeBetasByStatus(
     Object.values(allBetasMerged)

@@ -1,6 +1,5 @@
-import { PaymentMethod, PaymentType } from '@linode/api-v4';
-import Grid from '@mui/material/Unstable_Grid2';
 import { useTheme } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
 import { Chip } from 'src/components/Chip';
@@ -12,6 +11,8 @@ import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
 import { getIcon as getCreditCardIcon } from 'src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/CreditCard';
 import { formatExpiry, isCreditCardExpired } from 'src/utilities/creditCard';
 
+import type { PaymentMethod } from '@linode/api-v4';
+
 interface Props {
   disabled?: boolean;
   handlePaymentMethodChange: (id: number, cardExpired: boolean) => void;
@@ -38,12 +39,12 @@ const getIcon = (paymentMethod: PaymentMethod) => {
   }
 };
 
-const getHeading = (paymentMethod: PaymentMethod, type: PaymentType) => {
+const getHeading = (paymentMethod: PaymentMethod) => {
   switch (paymentMethod.type) {
     case 'paypal':
-      return thirdPartyPaymentMap[type].label;
+      return thirdPartyPaymentMap[paymentMethod.type].label;
     case 'google_pay':
-      return `${thirdPartyPaymentMap[type].label} ${paymentMethod.data.card_type} ****${paymentMethod.data.last_four}`;
+      return `${thirdPartyPaymentMap[paymentMethod.type].label} ${paymentMethod.data.card_type} ****${paymentMethod.data.last_four}`;
     default:
       return `${paymentMethod.data.card_type} ****${paymentMethod.data.last_four}`;
   }
@@ -69,9 +70,9 @@ export const PaymentMethodCard = (props: Props) => {
     paymentMethod,
     paymentMethodId,
   } = props;
-  const { id, is_default, type } = paymentMethod;
+  const { id, is_default } = paymentMethod;
 
-  const heading = getHeading(paymentMethod, type);
+  const heading = getHeading(paymentMethod);
   const cardIsExpired = getIsCardExpired(paymentMethod);
   const subHeading = getSubHeading(paymentMethod, cardIsExpired);
 

@@ -8,7 +8,6 @@ import {
   updateGlobalFilterPreference,
 } from '../Utils/UserPreference';
 
-import type { TimeDuration } from '@linode/api-v4';
 import type {
   BaseSelectProps,
   Item,
@@ -136,14 +135,3 @@ export const generateStartTime = (modifier: Labels, nowInSeconds: number) => {
       return nowInSeconds - 30 * 24 * 60 * 60;
   }
 };
-
-/**
- *
- * @param label label for time duration to get the corresponding time duration object
- * @returns time duration object for the label
- */
-export const getTimeDurationFromTimeRange = (label: string): TimeDuration => {
-  const options = generateSelectOptions();
-
-  return options[label] || { unit: 'min', vlaue: 30 };
-};
@@ -137,6 +137,7 @@ const engineIcons = {
   mongodb: <MongoDBIcon height="24" width="24" />,
   mysql: <MySQLIcon height="24" width="24" />,
   postgresql: <PostgreSQLIcon height="24" width="24" />,
+  redis: null,
 };
 
 const getEngineOptions = (engines: DatabaseEngine[]) => {
@@ -406,7 +407,7 @@ const DatabaseCreate = () => {
       return;
     }
 
-    const engineType = values.engine.split('/')[0];
+    const engineType = values.engine.split('/')[0] as Engine;
 
     setNodePricing({
       multi: type.engines[engineType].find(