meh fixes to no-explicit-any

tjk · tjk · commit 80ec405750d0 · 2024-11-22T14:02:46.000-08:00
diff --git a/packages/connect-react/src/components/ComponentForm.tsx b/packages/connect-react/src/components/ComponentForm.tsx
@@ -8,7 +8,7 @@ import type {
 } from "@pipedream/sdk";
 import { InternalComponentForm } from "./InternalComponentForm";
 
-export type ComponentFormProps<T extends ConfigurableProps = any> = {
+export type ComponentFormProps<T extends ConfigurableProps> = {
   userId: string;
   component: V1Component<T>;
   configuredProps?: ConfiguredProps<T>; // XXX value?
@@ -19,7 +19,7 @@ export type ComponentFormProps<T extends ConfigurableProps = any> = {
   hideOptionalProps?: boolean;
 };
 
-export function ComponentForm(props: ComponentFormProps) {
+export function ComponentForm<T extends ConfigurableProps>(props: ComponentFormProps<T>) {
   return (
     <FormContextProvider props={props}>
       <InternalComponentForm />
diff --git a/packages/connect-react/src/components/ControlAny.tsx b/packages/connect-react/src/components/ControlAny.tsx
@@ -3,10 +3,10 @@ import { useCustomize } from "../hooks/customization-context";
 import type { CSSProperties } from "react";
 
 export function ControlAny() {
-  const props = useFormFieldContext();
+  const formFieldContext = useFormFieldContext();
   const {
     id, onChange, value,
-  } = props;
+  } = formFieldContext;
   const {
     getProps, theme,
   } = useCustomize();
@@ -29,7 +29,7 @@ export function ControlAny() {
       id={id}
       value={jsonValue}
       onChange={(e) => onChange(e.target.value)}
-      {...getProps("controlAny", baseStyles, props)}
+      {...getProps("controlAny", baseStyles, formFieldContext)}
     />
   );
 }
diff --git a/packages/connect-react/src/components/ControlApp.tsx b/packages/connect-react/src/components/ControlApp.tsx
@@ -6,13 +6,12 @@ import { useCustomize } from "../hooks/customization-context";
 import type { BaseReactSelectProps } from "../hooks/customization-context";
 import { useMemo } from "react";
 import type { CSSProperties } from "react";
-
 import type { OptionProps } from "react-select";
-import {
+import type {
   AppResponse, ConfigurablePropApp,
 } from "@pipedream/sdk";
 
-const BaseOption = (props: OptionProps<any>) => {
+const BaseOption = (props: OptionProps<AppResponse>) => {
   // const imgSrc =
   //   props.data.img_src ?? `https://pipedream.com/s.v0/${props.data.id}/logo/48`
   return (
@@ -56,7 +55,7 @@ export function ControlApp({ app }: ControlAppProps) {
       Option: BaseOption,
     },
     styles: {
-      control: (base: {}) => ({
+      control: (base) => ({
         ...base,
         gridArea: "control",
         boxShadow: theme.boxShadow.input,
@@ -122,51 +121,51 @@ export function ControlApp({ app }: ControlAppProps) {
       app,
       ...formFieldCtx,
     })}>
-      {isLoadingAccounts ? (
+      {isLoadingAccounts ?
         `Loading ${app.name} accounts...`
-      ) : accounts.length ? (
-        <Select
-          instanceId={id}
-          value={selectValue}
-          options={[
-            ...accounts,
-            {
-              id: "_new",
-              name: `Connect new ${app.name} account...`,
-            },
-          ]}
-          {...selectProps}
-          required={true}
-          placeholder={`Select ${app.name} account...`}
-          isLoading={isLoadingAccounts}
-          isClearable={true}
-          isSearchable={true}
-          getOptionLabel={(a) => a.name}
-          getOptionValue={(a) => a.id}
-          onChange={(a) => {
-            if (a) {
-              if (a.id === "_new") {
+        : accounts.length ?
+          <Select
+            instanceId={id}
+            value={selectValue}
+            options={[
+              ...accounts,
+              {
+                id: "_new",
+                name: `Connect new ${app.name} account...`,
+              },
+            ]}
+            {...selectProps}
+            required={true}
+            placeholder={`Select ${app.name} account...`}
+            isLoading={isLoadingAccounts}
+            isClearable={true}
+            isSearchable={true}
+            getOptionLabel={(a) => a.name}
+            getOptionValue={(a) => a.id}
+            onChange={(a) => {
+              if (a) {
+                if (a.id === "_new") {
                 // start connect account and then select it, etc.
                 // TODO unset / put in loading state
-                startConnectAccount();
+                  startConnectAccount();
+                } else {
+                  onChange({
+                    authProvisionId: a.id,
+                  });
+                }
               } else {
-                onChange({
-                  authProvisionId: a.id,
-                });
+                onChange(undefined);
               }
-            } else {
-              onChange(undefined);
-            }
-          }}
-        />
-      ) : (
-        <button type="button" {...getProps("connectButton", baseStylesConnectButton, {
-          app,
-          ...formFieldCtx,
-        })} onClick={() => startConnectAccount()}>
+            }}
+          />
+          :
+          <button type="button" {...getProps("connectButton", baseStylesConnectButton, {
+            app,
+            ...formFieldCtx,
+          })} onClick={() => startConnectAccount()}>
           Connect {app.name}
-        </button>
-      )}
+          </button>
+      }
     </div>
   );
 }
diff --git a/packages/connect-react/src/components/Errors.tsx b/packages/connect-react/src/components/Errors.tsx
@@ -1,17 +1,18 @@
 import { FormContext } from "../hooks/form-context";
 import type { FormFieldContext } from "../hooks/form-field-context";
-import { ConfigurableProp } from "@pipedream/sdk";
-
+import {
+  ConfigurableProp, ConfigurableProps,
+} from "@pipedream/sdk";
 import { useCustomize } from "../hooks/customization-context";
 import type { CSSProperties } from "react";
 
-export type ErrorsProps<T extends ConfigurableProp> = {
+export type ErrorsProps<T extends ConfigurableProps, U extends ConfigurableProp> = {
   errors: string[];
-  field: FormFieldContext<T>;
-  form: FormContext;
+  field: FormFieldContext<U>;
+  form: FormContext<T>;
 };
 
-export function Errors<T extends ConfigurableProp>(props: ErrorsProps<T>) {
+export function Errors<T extends ConfigurableProps, U extends ConfigurableProp>(props: ErrorsProps<T, U>) {
   const { errors } = props;
 
   const {
@@ -31,7 +32,7 @@ export function Errors<T extends ConfigurableProp>(props: ErrorsProps<T>) {
   // maybe that should just be handled by FormFieldContext instead of container?
   return (
     <ul {...getProps("errors", baseStyles, props)}>
-      {errors.map((msg) => <li {...getProps("error", baseStyles, props)}>{msg}</li>)}
+      {errors.map((msg) => <li key={msg} {...getProps("error", baseStyles, props)}>{msg}</li>)}
     </ul>
   );
 }
diff --git a/packages/connect-react/src/components/InternalComponentForm.tsx b/packages/connect-react/src/components/InternalComponentForm.tsx
@@ -18,13 +18,13 @@ export function InternalComponentForm() {
     isValid,
     optionalPropIsEnabled,
     optionalPropSetEnabled,
-    props,
+    props: formContextProps,
     setSubmitting,
   } = formContext;
 
   const {
     hideOptionalProps, onSubmit,
-  } = props;
+  } = formContextProps;
 
   const {
     getComponents, getProps, theme,
diff --git a/packages/connect-react/src/components/RemoteOptionsContainer.tsx b/packages/connect-react/src/components/RemoteOptionsContainer.tsx
@@ -29,7 +29,7 @@ export function RemoteOptionsContainer({ queryEnabled }: RemoteOptionsContainerP
     setQuery,
   ] = useState("");
 
-  const configuredPropsUpTo: Record<string, any> = {};
+  const configuredPropsUpTo: Record<string, unknown> = {};
   for (let i = 0; i < idx; i++) {
     const prop = configurableProps[i];
     configuredPropsUpTo[prop.name] = configuredProps[prop.name];
@@ -45,9 +45,10 @@ export function RemoteOptionsContainer({ queryEnabled }: RemoteOptionsContainerP
     componentConfigureInput.query = query || ""; // TODO ref.value ? Is this still supported?
   }
   // exclude dynamicPropsId from the key since only affect it should have is to add / remove props but prop by name should not change!
-  const {
-    dynamicPropsId, ...queryKeyInput
-  } = componentConfigureInput;
+  const queryKeyInput = {
+    ...componentConfigureInput,
+  }
+  delete queryKeyInput.dynamicPropsId
 
   const [
     error,
diff --git a/packages/connect-react/src/hooks/customization-context.tsx b/packages/connect-react/src/hooks/customization-context.tsx
@@ -8,7 +8,12 @@ import {
   components as ReactSelectComponents, mergeStyles as mergeReactSelectStyles,
 } from "react-select";
 import type {
-  ClassNamesConfig as ReactSelectClassNamesConfig, SelectComponentsConfig as ReactSelectComponentsConfig, Props as ReactSelectCustomizationProps, StylesConfig as ReactSelectStylesConfig, Theme as ReactSelectTheme,
+  ClassNamesConfig as ReactSelectClassNamesConfig,
+  GroupBase,
+  Props as ReactSelectCustomizationProps,
+  SelectComponentsConfig as ReactSelectComponentsConfig,
+  StylesConfig as ReactSelectStylesConfig,
+  Theme as ReactSelectTheme,
 } from "react-select";
 import type { ConfigurableProp } from "@pipedream/sdk";
 import {
@@ -41,15 +46,16 @@ export type ReactSelectComponents = {
   controlSelect: typeof ControlSelect;
 };
 
-export type CustomComponents = {
+export type CustomComponents<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
   [K in keyof typeof defaultComponents]: typeof defaultComponents[K]
 } & {
-  [K in keyof ReactSelectComponents]: ReactSelectComponentsConfig<any, any, any>
+  [K in keyof ReactSelectComponents]: ReactSelectComponentsConfig<Option, IsMulti, Group>
 };
 
 export type ComponentLibrary = typeof defaultComponents;
-export type CustomComponentsConfig = Partial<CustomComponents>;
+export type CustomComponentsConfig<T, U extends boolean, V extends GroupBase<T>> = Partial<CustomComponents<T, U, V>>;
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type CustomizationOpts<P extends ComponentProps<JSXElementConstructor<any>>> = P & {
   theme: Theme;
 };
@@ -86,16 +92,16 @@ export type CustomStylesConfig = {
   [K in keyof ReactSelectComponents]?: ReactSelectStylesConfig
 };
 
-export type CustomizationConfig = {
+export type CustomizationConfig<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
   classNames?: CustomClassNamesConfig;
   classNamePrefix?: string;
-  components?: CustomComponentsConfig;
+  components?: CustomComponentsConfig<Option, IsMulti, Group>;
   styles?: CustomStylesConfig;
   theme?: CustomThemeConfig;
   unstyled?: boolean;
 };
 
-export const CustomizationContext = createContext<CustomizationConfig>({
+export const CustomizationContext = createContext<CustomizationConfig<any, any, any>>({ // eslint-disable-line @typescript-eslint/no-explicit-any
   classNames: {},
   classNamePrefix: "",
   components: {},
@@ -108,11 +114,12 @@ export type CustomizationProps = {
   className: string;
   style: CSSProperties;
 };
-export type BaseReactSelectProps = {
-  components?: ReactSelectComponentsConfig<any, any, any>;
+export type BaseReactSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
+  components?: ReactSelectComponentsConfig<Option, IsMulti, Group>;
   styles?: ReactSelectStylesConfig;
 };
 
+// XXX refactor generics in this file to fix relationship between Key and other generics, etc.
 export type Customization = {
   getClassNames: <Key extends keyof CustomizableProps>(name: Key, props: CustomizableProps[Key]) => string;
   getComponents: () => ComponentLibrary;
@@ -122,9 +129,11 @@ export type Customization = {
   select: {
     getClassNamePrefix: <Key extends keyof ReactSelectComponents>(name: Key) => string;
     getClassNames: <Key extends keyof ReactSelectComponents>(name: Key) => ReactSelectClassNamesConfig;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     getComponents: <Key extends keyof ReactSelectComponents>(name: Key, baseComponents?: ReactSelectComponentsConfig<any, any, any>) => ReactSelectComponentsConfig<any, any, any>;
     getStyles: <Key extends keyof ReactSelectComponents>(name: Key, baseStyles?: ReactSelectStylesConfig) => ReactSelectStylesConfig;
-    getProps: <Key extends keyof ReactSelectComponents>(name: Key, baseProps?: BaseReactSelectProps) => ReactSelectCustomizationProps;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    getProps: <Key extends keyof ReactSelectComponents>(name: Key, baseProps?: BaseReactSelectProps<any, any, any>) => ReactSelectCustomizationProps;
     theme: ReactSelectTheme;
   };
 };
@@ -152,6 +161,7 @@ function createSelectCustomization(): Customization["select"] {
     return classNames;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function getComponents<Key extends keyof ReactSelectComponents>(name: Key, baseComponents?: ReactSelectComponentsConfig<any, any, any>): ReactSelectComponentsConfig<any, any, any> {
     return {
       ...ReactSelectComponents,
@@ -164,7 +174,8 @@ function createSelectCustomization(): Customization["select"] {
     return mergeReactSelectStyles(context.styles?.[name] ?? {}, baseStyles ?? {});
   }
 
-  function getProps<Key extends keyof ReactSelectComponents>(name: Key, baseProps?: BaseReactSelectProps): ReactSelectCustomizationProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function getProps<Key extends keyof ReactSelectComponents>(name: Key, baseProps?: BaseReactSelectProps<any, any, any>): ReactSelectCustomizationProps {
     return {
       classNamePrefix: getClassNamePrefix(),
       classNames: getClassNames(name),
diff --git a/packages/connect-react/src/hooks/form-context.tsx b/packages/connect-react/src/hooks/form-context.tsx
