diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx b/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx index 4bba3fc799..cbbd279f50 100644 --- a/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx +++ b/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx @@ -87,7 +87,7 @@ const ApiTokenForm: React.FC = ({ setTokenType(e.target.value as string)} + onChange={setTokenType} label="Token Type" id="api_key_type" name="type" @@ -113,7 +113,7 @@ const ApiTokenForm: React.FC = ({ disabled={type === TYPE_ADMIN} options={selectableEnvs} value={environment} - onChange={e => setEnvironment(e.target.value as string)} + onChange={setEnvironment} label="Environment" id="api_key_environment" name="environment" diff --git a/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx b/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx index 4721872432..a62cfd61c9 100644 --- a/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx +++ b/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx @@ -22,12 +22,12 @@ export const ApplicationUpdate = ({ application }: IApplicationUpdateProps) => { const { setToastData, setToastApiError } = useToast(); const commonStyles = useCommonStyles(); - const handleChange = async ( - evt: ChangeEvent<{ name?: string | undefined; value: unknown }>, + const onChange = async ( field: string, - value: string + value: string, + event?: ChangeEvent ) => { - evt.preventDefault(); + event?.preventDefault(); try { await storeApplicationMetaData(appName, field, value); refetchApplication(); @@ -51,9 +51,7 @@ export const ApplicationUpdate = ({ application }: IApplicationUpdateProps) => { label="Icon" options={icons.map(v => ({ key: v, label: v }))} value={icon || 'apps'} - onChange={e => - handleChange(e, 'icon', e.target.value as string) - } + onChange={key => onChange('icon', key)} /> @@ -65,7 +63,7 @@ export const ApplicationUpdate = ({ application }: IApplicationUpdateProps) => { type="url" variant="outlined" size="small" - onBlur={e => handleChange(e, 'url', localUrl)} + onBlur={e => onChange('url', localUrl, e)} /> @@ -77,7 +75,7 @@ export const ApplicationUpdate = ({ application }: IApplicationUpdateProps) => { rows={2} onChange={e => setLocalDescription(e.target.value)} onBlur={e => - handleChange(e, 'description', localDescription) + onChange('description', localDescription, e) } /> diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx index d35476efda..bdced50d41 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx @@ -94,7 +94,7 @@ export const ConstraintAccordionEditHeader = ({ autoFocus options={constraintNameOptions} value={contextName || ''} - onChange={e => setContextName(String(e.target.value))} + onChange={setContextName} className={styles.headerSelect} /> diff --git a/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx b/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx index d686d273d2..41d691af36 100644 --- a/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx +++ b/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx @@ -8,6 +8,7 @@ import { } from '@material-ui/core'; import { SELECT_ITEM_ID } from 'utils/testIds'; import { KeyboardArrowDownOutlined } from '@material-ui/icons'; +import { SelectInputProps } from '@material-ui/core/Select/SelectInput'; export interface ISelectOption { key: string; @@ -16,24 +17,19 @@ export interface ISelectOption { disabled?: boolean; } -export interface ISelectMenuProps extends SelectProps { +export interface IGeneralSelectProps extends Omit { name?: string; value?: string; label?: string; options: ISelectOption[]; - onChange?: OnGeneralSelectChange; + onChange: (key: string) => void; disabled?: boolean; fullWidth?: boolean; classes?: any; defaultValue?: string; } -export type OnGeneralSelectChange = ( - event: React.ChangeEvent<{ name?: string; value: unknown }>, - child: React.ReactNode -) => void; - -const GeneralSelect: React.FC = ({ +const GeneralSelect: React.FC = ({ name, value = '', label = '', @@ -59,6 +55,11 @@ const GeneralSelect: React.FC = ({ )); + const onSelectChange: SelectInputProps['onChange'] = event => { + event.preventDefault(); + onChange(String(event.target.value)); + }; + return ( = ({ { setType(e.target.value)} + onChange={setType} label="Feature type" editable={editable} /> diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureTypeSelect/FeatureTypeSelect.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureTypeSelect/FeatureTypeSelect.tsx index 06f353d031..b23a7a4e32 100644 --- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureTypeSelect/FeatureTypeSelect.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureTypeSelect/FeatureTypeSelect.tsx @@ -1,21 +1,23 @@ import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes'; import GeneralSelect, { ISelectOption, + IGeneralSelectProps, } from 'component/common/GeneralSelect/GeneralSelect'; +interface IFeatureTypeSelectProps + extends Omit { + value: string; + editable: boolean; +} + const FeatureTypeSelect = ({ - // @ts-expect-error editable, - // @ts-expect-error value, - // @ts-expect-error id, - // @ts-expect-error label, - // @ts-expect-error onChange, ...rest -}) => { +}: IFeatureTypeSelectProps) => { const { featureTypes } = useFeatureTypes(); const options: ISelectOption[] = featureTypes.map(t => ({ diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureProjectSelect/FeatureProjectSelect.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureProjectSelect/FeatureProjectSelect.tsx index 923eeebc93..4176fa257b 100644 --- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureProjectSelect/FeatureProjectSelect.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureProjectSelect/FeatureProjectSelect.tsx @@ -1,11 +1,15 @@ import useProjects from 'hooks/api/getters/useProjects/useProjects'; -import { IProject } from 'interfaces/project'; -import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect'; +import { IProjectCard } from 'interfaces/project'; +import GeneralSelect, { + ISelectOption, + IGeneralSelectProps, +} from 'component/common/GeneralSelect/GeneralSelect'; +import React from 'react'; -interface IFeatureProjectSelect { +interface IFeatureProjectSelectProps + extends Omit { enabled: boolean; value: string; - onChange: (e: any) => void; filter: (project: string) => void; } @@ -15,14 +19,14 @@ const FeatureProjectSelect = ({ onChange, filter, ...rest -}: IFeatureProjectSelect) => { +}: IFeatureProjectSelectProps) => { const { projects } = useProjects(); if (!enabled) { return null; } - const formatOption = (project: IProject) => { + const formatOption = (project: IProjectCard) => { return { key: project.id, label: project.name, @@ -30,28 +34,23 @@ const FeatureProjectSelect = ({ }; }; - let options; + let options: ISelectOption[]; + if (filter) { options = projects - .filter(project => { - return filter(project.id); - }) - // @ts-expect-error + .filter(project => filter(project.id)) .map(formatOption); } else { - // @ts-expect-error options = projects.map(formatOption); } if (value && !options.find(o => o.key === value)) { - // @ts-expect-error options.push({ key: value, label: value }); } return ( { <> setProject(e.target.value)} - // @ts-expect-error + onChange={setProject} label="Project" enabled={editable} filter={filterProjects()} diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx index 365b1095e1..fc494c9677 100644 --- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState, ChangeEvent } from 'react'; +import React, { useEffect, useState } from 'react'; import { Button, FormControl, @@ -189,14 +189,9 @@ export const AddVariant = ({ } }; - const onPayload = (e: ChangeEvent<{ name?: string; value: unknown }>) => { - e.preventDefault(); + const onPayload = (name: string) => (value: string) => { setError({ payload: '' }); - setPayload({ - ...payload, - // @ts-expect-error - [e.target.name]: e.target.value, - }); + setPayload({ ...payload, [name]: value }); }; const onCancel = (e: React.SyntheticEvent) => { @@ -206,13 +201,12 @@ export const AddVariant = ({ }; const updateOverrideType = - (index: number) => (e: ChangeEvent) => { - e.preventDefault(); + (index: number, contextName: string) => (value: string) => { setOverrides( overrides.map((o, i) => { if (i === index) { // @ts-expect-error - o[e.target.name] = e.target.value; + o[contextName] = value; } return o; @@ -367,7 +361,7 @@ export const AddVariant = ({ className={styles.select} value={payload.type} options={payloadOptions} - onChange={onPayload} + onChange={onPayload('type')} /> @@ -377,7 +371,7 @@ export const AddVariant = ({ name="value" className={commonStyles.fullWidth} value={payload.value} - onChange={onPayload} + onChange={e => onPayload('value')(e.target.value)} data-testid={'VARIANT_PAYLOAD_VALUE'} placeholder={ payload.type === 'json' diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.jsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.jsx index 212af14710..f6f7da8a77 100644 --- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.jsx +++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.jsx @@ -54,7 +54,7 @@ export const OverrideConfig = ({ classes={{ root: classnames(commonStyles.fullWidth), }} - onChange={updateOverrideType(i)} + onChange={updateOverrideType(i, o.contextName)} /> diff --git a/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.jsx b/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.jsx index f06204b589..68f9e31f81 100644 --- a/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.jsx +++ b/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.jsx @@ -90,9 +90,7 @@ const StrategyConstraintInputField = ({ label="Context Field" options={constraintContextNames} value={constraint.contextName || ''} - onChange={evt => - updateConstraint(evt.target.value, 'contextName') - } + onChange={value => updateConstraint(value, 'contextName')} className={styles.contextField} /> @@ -102,9 +100,7 @@ const StrategyConstraintInputField = ({ label="Operator" options={constraintOperators} value={constraint.operator} - onChange={evt => - updateConstraint(evt.target.value, 'operator') - } + onChange={value => updateConstraint(value, 'operator')} className={styles.operator} /> diff --git a/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx b/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx index a69f918198..0711ea8260 100644 --- a/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx +++ b/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx @@ -57,10 +57,9 @@ export const StrategyParameter = ({ errors, }: IStrategyParameterProps) => { const styles = useStyles(); - const handleTypeChange = ( - event: React.ChangeEvent<{ name?: string; value: unknown }> - ) => { - set({ type: event.target.value }); + + const onTypeChange = (type: string) => { + set({ type }); }; const renderParamTypeDescription = () => { @@ -102,7 +101,7 @@ export const StrategyParameter = ({ name="type" options={paramTypesOptions} value={input.type} - onChange={handleTypeChange} + onChange={onTypeChange} id={`prop-type-${index}-select`} className={styles.input} /> diff --git a/frontend/src/component/tags/TagTypeList/TagTypeList.tsx b/frontend/src/component/tags/TagTypeList/TagTypeList.tsx index 21bf14c25f..b0c3ecc511 100644 --- a/frontend/src/component/tags/TagTypeList/TagTypeList.tsx +++ b/frontend/src/component/tags/TagTypeList/TagTypeList.tsx @@ -1,5 +1,4 @@ import { useContext, useState } from 'react'; -import PropTypes from 'prop-types'; import { Link, useHistory } from 'react-router-dom'; import { Button, @@ -161,9 +160,3 @@ export const TagTypeList = () => { ); }; - -TagTypeList.propTypes = { - tagTypes: PropTypes.array.isRequired, - fetchTagTypes: PropTypes.func.isRequired, - removeTagType: PropTypes.func.isRequired, -};