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={'Toggle type'}
id="feature-type-select"
editable
@@ -114,15 +113,12 @@ const FeatureForm: React.FC = ({
/>
{
- setProject(e.target.value);
- history.replace(
- `/projects/${e.target.value}/create-toggle`
- );
+ onChange={projectId => {
+ setProject(projectId);
+ history.replace(`/projects/${projectId}/create-toggle`);
}}
enabled={editable}
filter={projectFilterGenerator(permissions, CREATE_FEATURE)}
- // @ts-expect-error
IconComponent={KeyboardArrowDownOutlined}
className={styles.selectInput}
/>
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx
index 4938791833..36ae7dbd66 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx
@@ -1,5 +1,5 @@
import GeneralSelect, {
- OnGeneralSelectChange,
+ IGeneralSelectProps,
} from 'component/common/GeneralSelect/GeneralSelect';
interface IFeatureMetricsHoursProps {
@@ -13,8 +13,8 @@ export const FeatureMetricsHours = ({
hoursBack,
setHoursBack,
}: IFeatureMetricsHoursProps) => {
- const onChange: OnGeneralSelectChange = event => {
- setHoursBack(parseFeatureMetricsHour(event.target.value));
+ const onChange: IGeneralSelectProps['onChange'] = key => {
+ setHoursBack(parseFeatureMetricsHour(key));
};
return (
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/AddTagDialog/AddTagDialog.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/AddTagDialog/AddTagDialog.tsx
index 7289f71d52..7abf888e6c 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/AddTagDialog/AddTagDialog.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/AddTagDialog/AddTagDialog.tsx
@@ -94,7 +94,7 @@ const AddTagDialog = ({ open, setOpen }: IAddTagDialogProps) => {
autoFocus
name="type"
value={tag.type}
- onChange={e => setValue('type', e.target.value)}
+ onChange={type => setValue('type', type)}
/>
{
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,
-};