refactor: fix misc TS errors (#754)

* refactor: fix PermissionSwitch event types

* refactor: fix variant payload field name

* refactor: fix IPermissionSwitchProps extension

* refactor: add missing types in AddFeatureVariant

* refactor: remove duplicate type

* refactor: fix FeatureToggleListNewItem ref type

* refactor: fix CreatedAt date prop type

* refactor: add missing anchorEl ref types

* refactor: fix createdAt prop value

* refactor: fix IFeatureToggleListNewItemProps environments prop type

* refactor: add missing ISelectOption type

* refactor: fix ResponsiveButton prop types

frontend/src/component/common/PermissionSwitch/PermissionSwitch.tsx

@@ -1,12 +1,11 @@
-import { Switch, Tooltip } from '@material-ui/core';
+import { Switch, Tooltip, SwitchProps } from '@material-ui/core';
-import { OverridableComponent } from '@material-ui/core/OverridableComponent';
 import AccessContext from '../../../contexts/AccessContext';
 import React, { useContext } from 'react';
 
-interface IPermissionSwitchProps extends OverridableComponent<any> {
+interface IPermissionSwitchProps extends SwitchProps {
     permission: string;
-    tooltip: string;
+    tooltip?: string;
-    onChange?: (e: any) => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     disabled?: boolean;
     projectId?: string;
     environmentId?: string;

frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx

@@ -9,10 +9,11 @@ interface IResponsiveButtonProps {
     onClick: () => void;
     tooltip?: string;
     disabled?: boolean;
-    permission?: string;
+    permission: string;
     projectId?: string;
     environmentId?: string;
     maxWidth: string;
+    className?: string;
 }
 
 const ResponsiveButton: React.FC<IResponsiveButtonProps> = ({

frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx

@@ -135,7 +135,7 @@ const FeatureToggleListNew = ({
                         type={feature.type}
                         environments={feature.environments}
                         projectId={projectId}
-                        createdAt={new Date()}
+                        createdAt={new Date().toISOString()}
                     />
                 );
             });

frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx

@@ -3,7 +3,7 @@ import { useLocationSettings } from '../../../../hooks/useLocationSettings';
 import { formatDateYMD, formatDateYMDHMS } from '../../../../utils/format-date';
 
 interface CreatedAtProps {
-    time: Date;
+    time: string;
 }
 
 const CreatedAt = ({ time }: CreatedAtProps) => {

frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx

@@ -1,15 +1,11 @@
-import { useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { TableCell, TableRow } from '@material-ui/core';
 import { useHistory } from 'react-router';
 import { useStyles } from '../FeatureToggleListNew.styles';
 import useToggleFeatureByEnv from '../../../../hooks/api/actions/useToggleFeatureByEnv/useToggleFeatureByEnv';
-import {
+import { IEnvironments } from '../../../../interfaces/featureToggle';
-    IEnvironments,
-    IFeatureEnvironment,
-} from '../../../../interfaces/featureToggle';
 import useToast from '../../../../hooks/useToast';
 import { getTogglePath } from '../../../../utils/route-path-helpers';
-import { SyntheticEvent } from 'react-router/node_modules/@types/react';
 import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
 import FeatureStatus from '../../FeatureView/FeatureStatus/FeatureStatus';
 import FeatureType from '../../FeatureView/FeatureType/FeatureType';
@@ -25,7 +21,7 @@ import EnvironmentStrategyDialog from '../../../common/EnvironmentStrategiesDial
 interface IFeatureToggleListNewItemProps {
     name: string;
     type: string;
-    environments: IFeatureEnvironment[];
+    environments: IEnvironments[];
     projectId: string;
     lastSeenAt?: string;
     createdAt: string;
@@ -49,7 +45,7 @@ const FeatureToggleListNewItem = ({
     const { refetch } = useProject(projectId);
     const styles = useStyles();
     const history = useHistory();
-    const ref = useRef(null);
+    const ref = useRef<HTMLButtonElement>(null);
     const [showInfoBox, setShowInfoBox] = useState(false);
     const [environmentName, setEnvironmentName] = useState('');
 
@@ -57,8 +53,8 @@ const FeatureToggleListNewItem = ({
         setShowInfoBox(false);
     };
 
-    const onClick = (e: SyntheticEvent) => {
+    const onClick = (e: React.MouseEvent) => {
-        if (!ref.current?.contains(e.target)) {
+        if (!ref.current?.contains(e.target as Node)) {
             history.push(getTogglePath(projectId, name));
         }
     };

frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureTypeSelect/FeatureTypeSelect.tsx

@@ -1,5 +1,7 @@
 import useFeatureTypes from '../../../../../../hooks/api/getters/useFeatureTypes/useFeatureTypes';
-import GeneralSelect from '../../../../../common/GeneralSelect/GeneralSelect';
+import GeneralSelect, {
+    ISelectOption,
+} from '../../../../../common/GeneralSelect/GeneralSelect';
 
 const FeatureTypeSelect = ({
     editable,
@@ -11,7 +13,7 @@ const FeatureTypeSelect = ({
 }) => {
     const { featureTypes } = useFeatureTypes();
 
-    const options = featureTypes.map(t => ({
+    const options: ISelectOption[] = featureTypes.map(t => ({
         key: t.id,
         label: t.name,
         title: t.description,

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, ChangeEvent } from 'react';
 import {
     Button,
     FormControl,
@@ -9,25 +9,20 @@ import {
     Tooltip,
 } from '@material-ui/core';
 import { Info } from '@material-ui/icons';
-
 import { weightTypes } from './enums';
-
 import { OverrideConfig } from './OverrideConfig/OverrideConfig';
 import ConditionallyRender from '../../../../../common/ConditionallyRender';
-import GeneralSelect from '../../../../../common/GeneralSelect/GeneralSelect';
+import { useCommonStyles } from 'common.styles';
-import { useCommonStyles } from '../../../../../../common.styles';
 import Dialogue from '../../../../../common/Dialogue';
-import { modalStyles, trim } from '../../../../../common/util';
+import { modalStyles, trim } from 'component/common/util';
 import PermissionSwitch from '../../../../../common/PermissionSwitch/PermissionSwitch';
-import { UPDATE_FEATURE_VARIANTS } from '../../../../../providers/AccessProvider/permissions';
+import { UPDATE_FEATURE_VARIANTS } from 'component/providers/AccessProvider/permissions';
 import useFeature from '../../../../../../hooks/api/getters/useFeature/useFeature';
 import { useParams } from 'react-router-dom';
-import { IFeatureViewParams } from '../../../../../../interfaces/params';
+import { IFeatureViewParams } from 'interfaces/params';
-import {
+import { IFeatureVariant, IOverride } from 'interfaces/featureToggle';
-    IFeatureVariant,
-    IOverride,
-} from '../../../../../../interfaces/featureToggle';
 import cloneDeep from 'lodash.clonedeep';
+import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
 
 const payloadOptions = [
     { key: 'string', label: 'string' },
@@ -58,7 +53,7 @@ const AddVariant = ({
     title,
     editing,
 }: IAddVariantProps) => {
-    const [data, setData] = useState({});
+    const [data, setData] = useState<Record<string, string>>({});
     const [payload, setPayload] = useState(EMPTY_PAYLOAD);
     const [overrides, setOverrides] = useState<IOverride[]>([]);
     const [error, setError] = useState<Record<string, string>>({});
@@ -71,7 +66,7 @@ const AddVariant = ({
         if (editVariant) {
             setData({
                 name: editVariant.name,
-                weight: editVariant.weight / 10,
+                weight: String(editVariant.weight / 10),
                 weightType: editVariant.weightType || weightTypes.VARIABLE,
                 stickiness: editVariant.stickiness,
             });
@@ -108,7 +103,9 @@ const AddVariant = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [editVariant]);
 
-    const setVariantValue = e => {
+    const setVariantValue = (
+        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    ) => {
         const { name, value } = e.target;
         setData({
             ...data,
@@ -116,7 +113,7 @@ const AddVariant = ({
         });
     };
 
-    const setVariantWeightType = e => {
+    const setVariantWeightType = (e: React.ChangeEvent<HTMLInputElement>) => {
         const { checked, name } = e.target;
         const weightType = checked ? weightTypes.FIX : weightTypes.VARIABLE;
         setData({
@@ -125,7 +122,7 @@ const AddVariant = ({
         });
     };
 
-    const submit = async e => {
+    const submit = async (e: React.FormEvent) => {
         setError({});
         e.preventDefault();
 
@@ -141,9 +138,9 @@ const AddVariant = ({
         }
 
         try {
-            const variant = {
+            const variant: IFeatureVariant = {
                 name: data.name,
-                weight: data.weight * 10,
+                weight: Number(data.weight) * 10,
                 weightType: data.weightType,
                 stickiness: data.stickiness,
                 payload: payload.value ? payload : undefined,
@@ -172,7 +169,7 @@ const AddVariant = ({
         }
     };
 
-    const onPayload = (e: React.SyntheticEvent) => {
+    const onPayload = (e: ChangeEvent<{ name?: string; value: unknown }>) => {
         e.preventDefault();
         setPayload({
             ...payload,
@@ -186,7 +183,8 @@ const AddVariant = ({
         closeDialog();
     };
 
-    const updateOverrideType = (index: number) => (e: React.SyntheticEvent) => {
+    const updateOverrideType =
+        (index: number) => (e: ChangeEvent<HTMLInputElement>) => {
             e.preventDefault();
             setOverrides(
                 overrides.map((o, i) => {
@@ -230,7 +228,6 @@ const AddVariant = ({
     return (
         <Dialogue
             open={showDialog}
-            contentLabel="Add variant modal"
             style={modalStyles}
             onClose={onCancel}
             onClick={submit}
@@ -355,6 +352,7 @@ const AddVariant = ({
                 <Grid container>
                     <Grid item md={2} sm={2} xs={4}>
                         <GeneralSelect
+                            id="variant-payload-type"
                             name="type"
                             label="Type"
                             className={commonStyles.fullWidth}
@@ -362,7 +360,6 @@ const AddVariant = ({
                             options={payloadOptions}
                             onChange={onPayload}
                             style={{ minWidth: '100px', width: '100%' }}
-                            data-test={'VARIANT_PAYLOAD_TYPE'}
                         />
                     </Grid>
                     <Grid item md={8} sm={8} xs={6}>

frontend/src/component/menu/Header/Header.tsx

@@ -24,8 +24,10 @@ import { useAuthPermissions } from '../../../hooks/api/getters/useAuth/useAuthPe
 
 const Header = () => {
     const theme = useTheme();
-    const [anchorEl, setAnchorEl] = useState();
+    const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-    const [anchorElAdvanced, setAnchorElAdvanced] = useState();
+    const [anchorElAdvanced, setAnchorElAdvanced] =
+        useState<HTMLButtonElement | null>(null);
+
     const [admin, setAdmin] = useState(false);
     const { permissions } = useAuthPermissions();
     const commonStyles = useCommonStyles();

frontend/src/interfaces/featureToggle.ts

@@ -57,7 +57,7 @@ export interface IOverride {
 }
 
 export interface IPayload {
-    name: string;
+    type: string;
     value: string;
 }
 
@@ -75,13 +75,6 @@ export interface IFeatureMetrics {
     seenApplications: string[];
 }
 
-export interface IFeatureMetrics {
-    version: number;
-    maturity: string;
-    lastHourUsage: IFeatureEnvironmentMetrics[];
-    seenApplications: string[];
-}
-
 export interface IFeatureMetricsRaw {
     featureName: string;
     appName: string;