From b9a3be7b3abc0c767fa43878f3f169623b9f775e Mon Sep 17 00:00:00 2001 From: olav Date: Tue, 1 Mar 2022 13:22:47 +0100 Subject: [PATCH] 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 --- .../PermissionSwitch/PermissionSwitch.tsx | 9 ++- .../ResponsiveButton/ResponsiveButton.tsx | 3 +- .../FeatureToggleListNew.tsx | 2 +- .../FeatureToggleListNewItem/CreatedAt.tsx | 2 +- .../FeatureToggleListNewItem.tsx | 16 ++--- .../FeatureTypeSelect/FeatureTypeSelect.tsx | 6 +- .../AddFeatureVariant/AddFeatureVariant.tsx | 63 +++++++++---------- frontend/src/component/menu/Header/Header.tsx | 6 +- frontend/src/interfaces/featureToggle.ts | 9 +-- 9 files changed, 53 insertions(+), 63 deletions(-) diff --git a/frontend/src/component/common/PermissionSwitch/PermissionSwitch.tsx b/frontend/src/component/common/PermissionSwitch/PermissionSwitch.tsx index a9aa89e609..a131aea118 100644 --- a/frontend/src/component/common/PermissionSwitch/PermissionSwitch.tsx +++ b/frontend/src/component/common/PermissionSwitch/PermissionSwitch.tsx @@ -1,12 +1,11 @@ -import { Switch, Tooltip } from '@material-ui/core'; -import { OverridableComponent } from '@material-ui/core/OverridableComponent'; +import { Switch, Tooltip, SwitchProps } from '@material-ui/core'; import AccessContext from '../../../contexts/AccessContext'; import React, { useContext } from 'react'; -interface IPermissionSwitchProps extends OverridableComponent { +interface IPermissionSwitchProps extends SwitchProps { permission: string; - tooltip: string; - onChange?: (e: any) => void; + tooltip?: string; + onChange?: (e: React.ChangeEvent) => void; disabled?: boolean; projectId?: string; environmentId?: string; diff --git a/frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx b/frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx index 8e3f545293..abbc1dd614 100644 --- a/frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx +++ b/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 = ({ diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx index eaebceccea..e25cd84df7 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx +++ b/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()} /> ); }); diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx index f7ba855579..ca243ca46a 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx +++ b/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) => { diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx index 39ffefbd8c..e5c27fa97b 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx +++ b/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 { - IEnvironments, - IFeatureEnvironment, -} from '../../../../interfaces/featureToggle'; +import { IEnvironments } 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(null); const [showInfoBox, setShowInfoBox] = useState(false); const [environmentName, setEnvironmentName] = useState(''); @@ -57,8 +53,8 @@ const FeatureToggleListNewItem = ({ setShowInfoBox(false); }; - const onClick = (e: SyntheticEvent) => { - if (!ref.current?.contains(e.target)) { + const onClick = (e: React.MouseEvent) => { + if (!ref.current?.contains(e.target as Node)) { history.push(getTogglePath(projectId, name)); } }; 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 739096cb0c..2e926f795f 100644 --- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureTypeSelect/FeatureTypeSelect.tsx +++ b/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, 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 cde71a704d..7d6ff0ef1b 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 } 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 { - IFeatureVariant, - IOverride, -} from '../../../../../../interfaces/featureToggle'; +import { IFeatureViewParams } from 'interfaces/params'; +import { 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>({}); const [payload, setPayload] = useState(EMPTY_PAYLOAD); const [overrides, setOverrides] = useState([]); const [error, setError] = useState>({}); @@ -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 + ) => { const { name, value } = e.target; setData({ ...data, @@ -116,7 +113,7 @@ const AddVariant = ({ }); }; - const setVariantWeightType = e => { + const setVariantWeightType = (e: React.ChangeEvent) => { 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,18 +183,19 @@ const AddVariant = ({ closeDialog(); }; - const updateOverrideType = (index: number) => (e: React.SyntheticEvent) => { - e.preventDefault(); - setOverrides( - overrides.map((o, i) => { - if (i === index) { - o[e.target.name] = e.target.value; - } + const updateOverrideType = + (index: number) => (e: ChangeEvent) => { + e.preventDefault(); + setOverrides( + overrides.map((o, i) => { + if (i === index) { + o[e.target.name] = e.target.value; + } - return o; - }) - ); - }; + return o; + }) + ); + }; const updateOverrideValues = (index: number, values: string[]) => { setOverrides( @@ -230,7 +228,6 @@ const AddVariant = ({ return ( diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx index f83ac83a07..7e53dfca08 100644 --- a/frontend/src/component/menu/Header/Header.tsx +++ b/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 [anchorElAdvanced, setAnchorElAdvanced] = useState(); + const [anchorEl, setAnchorEl] = useState(null); + const [anchorElAdvanced, setAnchorElAdvanced] = + useState(null); + const [admin, setAdmin] = useState(false); const { permissions } = useAuthPermissions(); const commonStyles = useCommonStyles(); diff --git a/frontend/src/interfaces/featureToggle.ts b/frontend/src/interfaces/featureToggle.ts index 3c60d74a9a..64e18ae7de 100644 --- a/frontend/src/interfaces/featureToggle.ts +++ b/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;