fix: remove all warnings (#3055)

frontend/package.json

@@ -150,7 +150,8 @@
     "rules": {
       "no-restricted-globals": "off",
       "no-useless-computed-key": "off",
-      "import/no-anonymous-default-export": "off"
+      "import/no-anonymous-default-export": "off",
+      "react-hooks/exhaustive-deps": "off"
     },
     "ignorePatterns": [
       "cypress"

frontend/src/component/admin/projectRoles/hooks/useProjectRoleForm.ts

@@ -4,7 +4,6 @@ import cloneDeep from 'lodash.clonedeep';
 import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
 import useProjectRolesApi from 'hooks/api/actions/useProjectRolesApi/useProjectRolesApi';
 import { formatUnknownError } from 'utils/formatUnknownError';
-import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 export interface ICheckedPermission {
     [key: string]: IPermission;
@@ -24,7 +23,6 @@ const useProjectRoleForm = (
     initialRoleDesc = '',
     initialCheckedPermissions: IPermission[] = []
 ) => {
-    const { uiConfig } = useUiConfig();
     const { permissions } = useProjectRolePermissions({
         revalidateIfStale: false,
         revalidateOnReconnect: false,

frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountTokens/ServiceAccountTokens.tsx

@@ -219,13 +219,7 @@ export const ServiceAccountTokens = ({
         tokens
     );
 
-    const {
+    const { headerGroups, rows, prepareRow, setHiddenColumns } = useTable(
-        headerGroups,
-        rows,
-        prepareRow,
-        state: { sortBy },
-        setHiddenColumns,
-    } = useTable(
         {
             columns,
             data,

frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx

@@ -1,5 +1,5 @@
 import { FC, VFC } from 'react';
-import { Box, Button, styled, Typography, useTheme } from '@mui/material';
+import { Box, Button, styled, Typography } from '@mui/material';
 import { DynamicSidebarModal } from 'component/common/SidebarModal/SidebarModal';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo.tsx

@@ -1,4 +1,4 @@
-import { Divider, styled, Tooltip } from '@mui/material';
+import { styled, Tooltip } from '@mui/material';
 import { ConstraintViewHeaderOperator } from './ConstraintViewHeaderOperator';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ConstraintAccordionViewHeaderSingleValue } from './ConstraintAccordionViewHeaderSingleValue';

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderMultipleValues.tsx

@@ -1,7 +1,6 @@
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { styled } from '@mui/material';
 import React, { useEffect, useMemo, useState } from 'react';
-import classnames from 'classnames';
 import { IConstraint } from 'interfaces/strategy';
 
 const StyledValuesSpan = styled('span')(({ theme }) => ({

frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect.tsx

@@ -5,7 +5,6 @@ import {
     InputLabel,
     SelectChangeEvent,
     styled,
-    Box,
 } from '@mui/material';
 import {
     Operator,
@@ -17,7 +16,6 @@ import {
 } from 'constants/operators';
 import React, { useState } from 'react';
 import { formatOperatorDescription } from 'component/common/ConstraintAccordion/ConstraintOperator/formatOperatorDescription';
-import classNames from 'classnames';
 
 interface IConstraintOperatorSelectProps {
     options: Operator[];

frontend/src/component/common/DividerText/DividerText.tsx

@@ -1,4 +1,4 @@
-import { FormControl, styled, Typography } from '@mui/material';
+import { styled, Typography } from '@mui/material';
 interface IDividerTextProps {
     text: string;
 }

frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx

@@ -3,7 +3,7 @@ import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/perm
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import PermissionButton from '../PermissionButton/PermissionButton';
 import { formatCreateStrategyPath } from 'component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate';
-import { FormControl, styled } from '@mui/material';
+import { styled } from '@mui/material';
 
 interface IEnvironmentStrategyDialogProps {
     open: boolean;

frontend/src/component/common/MessageBanner/MessageBanner.tsx

@@ -53,6 +53,7 @@ interface IMessageFlag {
 }
 
 // TODO: Grab a real feature flag instead
+/* eslint-disable @typescript-eslint/no-unused-vars */
 const mockFlag: IMessageFlag = {
     enabled: true,
     message:

frontend/src/component/common/PremiumFeature/PremiumFeature.tsx

@@ -63,12 +63,12 @@ const PremiumFeatures = {
     },
 };
 
-type PremiumFeature = keyof typeof PremiumFeatures;
+type PremiumFeatureType = keyof typeof PremiumFeatures;
 
 const UPGRADE_URL = 'https://www.getunleash.io/plans';
 
 export interface PremiumFeatureProps {
-    feature: PremiumFeature;
+    feature: PremiumFeatureType;
     tooltip?: boolean;
 }
 

frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx

@@ -1,5 +1,4 @@
-import { ComponentType, FC } from 'react';
+import { FC } from 'react';
-import { Link, styled, Typography } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Highlighter } from 'component/common/Highlighter/Highlighter';

frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentActionCellPopover/EnvironmentActionCellPopover.tsx

@@ -25,7 +25,6 @@ import {
     VisibilityOffOutlined,
     VisibilityOutlined,
 } from '@mui/icons-material';
-import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 const StyledMenuList = styled(MenuList)(({ theme }) => ({
@@ -59,8 +58,6 @@ export const EnvironmentActionCellPopover = ({
     onClone,
     onDelete,
 }: IEnvironmentActionCellPopoverProps) => {
-    const { uiConfig } = useUiConfig();
-
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
     const open = Boolean(anchorEl);

frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { Box, Button, styled } from '@mui/material';
+import { Box, styled } from '@mui/material';
 import { SectionSeparator } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/SectionSeparator/SectionSeparator';
 import useFeatureStrategyApi from 'hooks/api/actions/useFeatureStrategyApi/useFeatureStrategyApi';
 import useToast from 'hooks/useToast';

frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx

@@ -33,8 +33,6 @@ import { FavoriteIconHeader } from 'component/common/Table/FavoriteIconHeader/Fa
 import { useGlobalLocalStorage } from 'hooks/useGlobalLocalStorage';
 import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 import FileDownload from '@mui/icons-material/FileDownload';
-import { Dialogue } from 'component/common/Dialogue/Dialogue';
-import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
 import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
 import { ExportDialog } from './ExportDialog';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/CopyStrategyIconMenu/CopyStrategyIconMenu.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent, useContext, useState, VFC } from 'react';
+import { MouseEvent, useState, VFC } from 'react';
 import {
     IconButton,
     ListItemIcon,

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitches.tsx

@@ -88,7 +88,7 @@ export const FeatureOverviewSidePanelEnvironmentSwitches = ({
 
                 const hasWarning =
                     environment.enabled &&
-                    variants.length == 0 &&
+                    variants.length === 0 &&
                     someEnabledEnvironmentHasVariants;
                 return (
                     <FeatureOverviewSidePanelEnvironmentSwitch

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/VariantForm/VariantForm.tsx

@@ -200,7 +200,7 @@ export const VariantForm = ({
         const hasOnlyOneVariableVariant =
             variants.filter(variant => {
                 return variant.weightType === WeightType.VARIABLE;
-            }).length == 1;
+            }).length === 1;
 
         return (
             atLeastOneFixedVariant && hasOnlyOneVariableVariant && isVariable

frontend/src/component/feature/FeatureView/FeatureVariants/VariantsTooltipWarning.tsx

@@ -18,6 +18,7 @@ const VariantsWarningTooltip = () => {
                     <a
                         href="https://docs.getunleash.io/reference/feature-toggle-variants#the-disabled-variant"
                         target="_blank"
+                        rel="noreferrer"
                     >
                         disabled variant
                     </a>

frontend/src/component/project/Project/Import/configure/StyledFileDropZone.tsx

@@ -1,6 +1,5 @@
 import { styled } from '@mui/material';
 import { FileDropZone } from './FileDropZone';
-import React from 'react';
 
 export const StyledFileDropZone = styled(FileDropZone)(({ theme }) => ({
     padding: theme.spacing(4, 2, 2, 2),

frontend/src/component/project/Project/ProjectStats/ProjectStats.tsx

@@ -1,6 +1,5 @@
 import { Box, styled, Typography } from '@mui/material';
 import { ProjectStatsSchema } from 'openapi/models';
-import { object } from 'prop-types';
 import { StatusBox } from './StatusBox';
 
 const StyledBox = styled(Box)(({ theme }) => ({

frontend/src/component/project/ProjectCard/ProjectCard.tsx

@@ -16,8 +16,6 @@ import { useFavoriteProjectsApi } from 'hooks/api/actions/useFavoriteProjectsApi
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { FavoriteIconButton } from 'component/common/FavoriteIconButton/FavoriteIconButton';
 import { DeleteProjectDialogue } from '../Project/DeleteProject/DeleteProjectDialogue';
-import { styled } from '@mui/material';
-import { flexRow } from 'themes/themeStyles';
 import {
     StyledProjectCard,
     StyledDivHeader,

frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx

@@ -57,7 +57,6 @@ const ProjectEnvironmentList = () => {
 
     // api state
     const { setToastData, setToastApiError } = useToast();
-    const { uiConfig } = useUiConfig();
     const { environments, loading, error, refetchEnvironments } =
         useProjectEnvironments(projectId);
     const { project, refetch: refetchProject } = useProject(projectId);

frontend/src/component/segments/SegmentForm.tsx

@@ -9,16 +9,6 @@ import { styled } from '@mui/material';
 export type SegmentFormStep = 1 | 2;
 export type SegmentFormMode = 'create' | 'edit';
 
-const Styled = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    margin: theme.spacing(6),
-    marginLeft: 'auto',
-    marginRight: 'auto',
-}));
-
 interface ISegmentProps {
     name: string;
     description: string;

frontend/src/component/user/NewUser/NewUser.tsx

@@ -76,7 +76,7 @@ export const NewUser = () => {
         }
     };
 
-    if (isValidToken === false && isValidInvite == false) {
+    if (!isValidToken && !isValidInvite) {
         return (
             <NewUserWrapper loading={resetLoading || inviteLoading}>
                 <InvalidToken />

frontend/src/component/user/PasswordAuth.tsx

@@ -1,5 +1,4 @@
 import { FormEventHandler, useState, VFC } from 'react';
-import classnames from 'classnames';
 import { Button, styled, TextField } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useNavigate } from 'react-router';

frontend/src/component/user/common/SecondaryLoginActions.tsx

@@ -1,4 +1,4 @@
-import { Alert, styled, Typography } from '@mui/material';
+import { styled, Typography } from '@mui/material';
 import { Link } from 'react-router-dom';
 
 const StyledContainer = styled('div')(({ theme }) => ({

frontend/src/hooks/api/getters/useEnterpriseSWR/useEnterpriseSWR.ts

@@ -10,7 +10,7 @@ export const useEnterpriseSWR = <Data = any, Error = any>(
 ) => {
     const { isEnterprise } = useUiConfig();
 
-    const result = useConditionalSWR(
+    const result = useConditionalSWR<Data, Error>(
         isEnterprise(),
         fallback,
         key,

frontend/src/hooks/api/getters/useSegments/useSegments.ts

@@ -1,4 +1,3 @@
-import useSWR from 'swr';
 import { useCallback } from 'react';
 import { formatApiPath } from 'utils/formatPath';
 import handleErrorResponses from '../httpErrorResponseHandler';