fix: linter rule for hooks (#9660)

biome.json

@@ -11,7 +11,8 @@
         "noUnsafeOptionalChaining": "off",
         "useExhaustiveDependencies": "off",
         "noUnusedImports": "warn",
-        "useJsxKeyInIterable": "off"
+        "useJsxKeyInIterable": "off",
+        "useHookAtTopLevel": "error"
       },
       "complexity": {
         "noBannedTypes": "off",
@@ -100,5 +101,17 @@
     "formatter": {
       "indentWidth": 2
     }
+  },
+  "overrides": [
+    {
+      "include": ["src/**"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "useHookAtTopLevel": "off"
           }
         }
+      }
+    }
+  ]
+}

frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingDetailsPAYG.tsx

@@ -45,8 +45,7 @@ export const BillingDetailsPAYG = ({
     const billableUsers = Math.max(eligibleUsers.length, minSeats);
     const usersCost = seatPrice * billableUsers;
 
-    const includedTraffic = BILLING_INCLUDED_REQUESTS;
+    const overageCost = useOverageCost(BILLING_INCLUDED_REQUESTS);
-    const overageCost = useOverageCost(includedTraffic);
 
     const totalCost = usersCost + overageCost;
 

frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingDetailsPro.tsx

@@ -52,8 +52,7 @@ export const BillingDetailsPro = ({
     const freeAssigned = Math.min(eligibleUsers.length, seats);
     const paidAssigned = eligibleUsers.length - freeAssigned;
     const paidAssignedPrice = seatPrice * paidAssigned;
-    const includedTraffic = BILLING_INCLUDED_REQUESTS;
+    const overageCost = useOverageCost(BILLING_INCLUDED_REQUESTS);
-    const overageCost = useOverageCost(includedTraffic);
 
     const totalCost = planPrice + paidAssignedPrice + overageCost;
 

frontend/src/component/admin/billing/BillingDashboard/BillingPlan/useOverageCost.ts

@@ -9,10 +9,6 @@ import { BILLING_TRAFFIC_PRICE } from './BillingPlan';
 import { useInstanceStatus } from 'hooks/api/getters/useInstanceStatus/useInstanceStatus';
 
 export const useOverageCost = (includedTraffic: number) => {
-    if (!includedTraffic) {
-        return 0;
-    }
-
     const now = new Date();
     const formatDate = (date: Date) => format(date, 'yyyy-MM-dd');
     const from = formatDate(startOfMonth(now));

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.tsx

@@ -12,7 +12,10 @@ import type {
 } from '../../changeRequest.types';
 import { HtmlTooltip } from '../../../common/HtmlTooltip/HtmlTooltip';
 import ErrorIcon from '@mui/icons-material/Error';
-import { useLocationSettings } from 'hooks/useLocationSettings';
+import {
+    type ILocationSettings,
+    useLocationSettings,
+} from 'hooks/useLocationSettings';
 import { formatDateYMDHMS } from 'utils/formatDate';
 
 export type ISuggestChangeTimelineProps =
@@ -99,6 +102,7 @@ export const ChangeRequestTimeline: FC<ISuggestChangeTimelineProps> = ({
             data = steps;
     }
     const activeIndex = data.findIndex((item) => item === state);
+    const { locationSettings } = useLocationSettings();
 
     return (
         <StyledPaper elevation={0}>
@@ -106,7 +110,10 @@ export const ChangeRequestTimeline: FC<ISuggestChangeTimelineProps> = ({
                 <StyledTimeline>
                     {data.map((title, index) => {
                         if (schedule && title === 'Scheduled') {
-                            return createTimelineScheduleItem(schedule);
+                            return createTimelineScheduleItem(
+                                schedule,
+                                locationSettings,
+                            );
                         }
 
                         const color = determineColor(
@@ -195,9 +202,10 @@ export const getScheduleProps = (
     }
 };
 
-const createTimelineScheduleItem = (schedule: ChangeRequestSchedule) => {
+const createTimelineScheduleItem = (
-    const { locationSettings } = useLocationSettings();
+    schedule: ChangeRequestSchedule,
-
+    locationSettings: ILocationSettings,
+) => {
     const time = formatDateYMDHMS(
         new Date(schedule.scheduledAt),
         locationSettings?.locale,

frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx

@@ -169,9 +169,8 @@ export const RecentlyVisitedFeatureButton = ({
     featureId: string;
     onClick: () => void;
 }) => {
-    const onItemClick = () => {
     const { trackEvent } = usePlausibleTracker();
-
+    const onItemClick = () => {
         trackEvent('command-bar', {
             props: {
                 eventType: `click`,

frontend/src/component/common/Table/SearchHighlightContext/SearchHighlightContext.tsx

@@ -5,5 +5,6 @@ const SearchHighlightContext = createContext('');
 export const SearchHighlightProvider = SearchHighlightContext.Provider;
 
 export const useSearchHighlightContext = (): { searchQuery: string } => {
-    return { searchQuery: useContext(SearchHighlightContext) };
+    const searchQuery = useContext(SearchHighlightContext);
+    return { searchQuery };
 };

frontend/src/component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell.test.tsx

@@ -1,11 +1,11 @@
 import { screen } from '@testing-library/react';
 import { render } from 'utils/testRenderer';
-import { FeatureOverviewCell as makeFeatureOverviewCell } from './FeatureOverviewCell';
+import { createFeatureOverviewCell } from './FeatureOverviewCell';
 
 const noOp = () => {};
 
 test('Display full overview information', () => {
-    const FeatureOverviewCell = makeFeatureOverviewCell(noOp, noOp);
+    const FeatureOverviewCell = createFeatureOverviewCell(noOp, noOp);
 
     render(
         <FeatureOverviewCell
@@ -43,7 +43,7 @@ test('Display full overview information', () => {
 });
 
 test('Display minimal overview information', () => {
-    const FeatureOverviewCell = makeFeatureOverviewCell(noOp, noOp);
+    const FeatureOverviewCell = createFeatureOverviewCell(noOp, noOp);
 
     render(
         <FeatureOverviewCell
@@ -69,7 +69,7 @@ test('Display minimal overview information', () => {
 });
 
 test('show archived information', () => {
-    const FeatureOverviewCell = makeFeatureOverviewCell(noOp, noOp);
+    const FeatureOverviewCell = createFeatureOverviewCell(noOp, noOp);
 
     render(
         <FeatureOverviewCell

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

@@ -436,7 +436,7 @@ const SecondaryFeatureInfo: FC<{
     );
 };
 
-export const FeatureOverviewCell =
+export const createFeatureOverviewCell =
     (
         onTagClick: (tag: string) => void,
         onFlagTypeClick: (type: string) => void,

frontend/src/component/events/EventLog/EventLogFilters.test.tsx

@@ -6,12 +6,7 @@ const allFilterKeys = ['from', 'to', 'createdBy', 'type', 'project', 'feature'];
 allFilterKeys.sort();
 
 test('When you have no projects or flags, you should not get a project or flag filters', () => {
-    const { result } = renderHook(() =>
+    const { result } = renderHook(() => useEventLogFilters([], []));
-        useEventLogFilters(
-            () => ({ projects: [] }),
-            () => ({ features: [] }),
-        ),
-    );
     const filterKeys = result.current.map((filter) => filter.filterKey);
     filterKeys.sort();
 
@@ -22,9 +17,9 @@ test('When you have no projects or flags, you should not get a project or flag f
 test('When you have no projects, you should not get a project filter', () => {
     const { result } = renderHook(() =>
         useEventLogFilters(
-            () => ({ projects: [] }),
+            [],
             // @ts-expect-error: omitting other properties we don't need
-            () => ({ features: [{ name: 'flag' }] }),
+            [{ name: 'flag' }],
         ),
     );
     const filterKeys = result.current.map((filter) => filter.filterKey);
@@ -35,10 +30,7 @@ test('When you have no projects, you should not get a project filter', () => {
 
 test('When you have only one project, you should not get a project filter', () => {
     const { result } = renderHook(() =>
-        useEventLogFilters(
+        useEventLogFilters([{ id: 'a', name: 'A' }], []),
-            () => ({ projects: [{ id: 'a', name: 'A' }] }),
-            () => ({ features: [] }),
-        ),
     );
     const filterKeys = result.current.map((filter) => filter.filterKey);
     filterKeys.sort();
@@ -49,13 +41,11 @@ test('When you have only one project, you should not get a project filter', () =
 test('When you have two one project, you should not get a project filter', () => {
     const { result } = renderHook(() =>
         useEventLogFilters(
-            () => ({
+            [
-                projects: [
                 { id: 'a', name: 'A' },
                 { id: 'b', name: 'B' },
             ],
-            }),
+            [],
-            () => ({ features: [] }),
         ),
     );
     const filterKeys = result.current.map((filter) => filter.filterKey);

frontend/src/component/events/EventLog/EventLogFilters.tsx

@@ -6,24 +6,15 @@ import {
 } from 'component/filter/Filters/Filters';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import { useFeatureSearch } from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
-import {
+import { EventSchemaType, type FeatureSearchResponseSchema } from 'openapi';
-    EventSchemaType,
-    type FeatureSearchResponseSchema,
-    type SearchFeaturesParams,
-} from 'openapi';
 import type { ProjectSchema } from 'openapi';
 import { useEventCreators } from 'hooks/api/getters/useEventCreators/useEventCreators';
 
 export const useEventLogFilters = (
-    projectsHook: () => { projects: ProjectSchema[] },
+    projects: ProjectSchema[],
-    featuresHook: (params: SearchFeaturesParams) => {
+    features: FeatureSearchResponseSchema[],
-        features: FeatureSearchResponseSchema[];
-    },
 ) => {
-    const { projects } = projectsHook();
-    const { features } = featuresHook({});
     const { eventCreators } = useEventCreators();
-
     const [availableFilters, setAvailableFilters] = useState<IFilterItem[]>([]);
     useEffect(() => {
         const projectOptions =
@@ -124,22 +115,6 @@ export const useEventLogFilters = (
 };
 
 type LogType = 'flag' | 'project' | 'global';
-const useEventLogFiltersFromLogType = (logType: LogType) => {
-    switch (logType) {
-        case 'flag':
-            return useEventLogFilters(
-                () => ({ projects: [] }),
-                () => ({ features: [] }),
-            );
-        case 'project':
-            return useEventLogFilters(
-                () => ({ projects: [] }),
-                useFeatureSearch,
-            );
-        case 'global':
-            return useEventLogFilters(useProjects, useFeatureSearch);
-    }
-};
 
 type EventLogFiltersProps = {
     logType: LogType;
@@ -154,7 +129,14 @@ export const EventLogFilters: FC<EventLogFiltersProps> = ({
     state,
     onChange,
 }) => {
-    const availableFilters = useEventLogFiltersFromLogType(logType);
+    const { features } = useFeatureSearch({});
+    const { projects } = useProjects();
+    const featuresToFilter = logType !== 'flag' ? features : [];
+    const projectsToFilter = logType === 'global' ? projects : [];
+    const availableFilters = useEventLogFilters(
+        projectsToFilter,
+        featuresToFilter,
+    );
 
     return (
         <Filters

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

@@ -89,14 +89,14 @@ export const EnvironmentAccordionBody = ({
         }
     }, []);
 
-    if (!featureEnvironment) {
-        return null;
-    }
-
     const pageSize = 20;
     const { page, pages, setPageIndex, pageIndex } =
         usePagination<IFeatureStrategy>(strategies, pageSize);
 
+    if (!featureEnvironment) {
+        return null;
+    }
+
     const onReorder = async (payload: { id: string; sortOrder: number }[]) => {
         try {
             await setStrategiesSortOrder(

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/LegacyEnvironmentAccordionBody.tsx

@@ -101,14 +101,14 @@ const EnvironmentAccordionBody = ({
         }
     }, []);
 
-    if (!featureEnvironment) {
-        return null;
-    }
-
     const pageSize = 20;
     const { page, pages, setPageIndex, pageIndex } =
         usePagination<IFeatureStrategy>(strategies, pageSize);
 
+    if (!featureEnvironment) {
+        return null;
+    }
+
     const onReorder = async (payload: { id: string; sortOrder: number }[]) => {
         try {
             await setStrategiesSortOrder(

frontend/src/component/feature/FeatureView/FeatureOverview/ManageTagsDialog/ManageBulkTagsDialog.tsx

@@ -11,7 +11,7 @@ import { TagTypeSelect } from './TagTypeSelect';
 import { type TagOption, TagsInput } from './TagsInput';
 import useTags from 'hooks/api/getters/useTags/useTags';
 import useTagTypes from 'hooks/api/getters/useTagTypes/useTagTypes';
-import type { ITag, ITagType } from 'interfaces/tags';
+import type { ITagType } from 'interfaces/tags';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import useTagApi from 'hooks/api/actions/useTagApi/useTagApi';
 import type { TagSchema } from 'openapi';

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -35,7 +35,7 @@ import { useDefaultColumnVisibility } from './hooks/useDefaultColumnVisibility';
 import { TableEmptyState } from './TableEmptyState/TableEmptyState';
 import { useRowActions } from './hooks/useRowActions';
 import { useSelectedData } from './hooks/useSelectedData';
-import { FeatureOverviewCell } from 'component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell';
+import { createFeatureOverviewCell } from 'component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell';
 import {
     useProjectFeatureSearch,
     useProjectFeatureSearchActions,
@@ -213,7 +213,7 @@ export const ProjectFeatureToggles = ({
             columnHelper.accessor('name', {
                 id: 'name',
                 header: 'Name',
-                cell: FeatureOverviewCell(onTagClick, onFlagTypeClick),
+                cell: createFeatureOverviewCell(onTagClick, onFlagTypeClick),
                 enableHiding: false,
             }),
             columnHelper.accessor('createdAt', {

frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeaturesBatchActions/ManageTags.tsx

@@ -2,7 +2,6 @@ import { useMemo, useState, type VFC } from 'react';
 import { Button } from '@mui/material';
 import { ManageBulkTagsDialog } from 'component/feature/FeatureView/FeatureOverview/ManageTagsDialog/ManageBulkTagsDialog';
 import type { FeatureSchema, TagSchema } from 'openapi';
-import type { ITag } from 'interfaces/tags';
 import useTagApi from 'hooks/api/actions/useTagApi/useTagApi';
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';

frontend/src/component/project/Project/ProjectInsights/ProjectInsightsStats/ProjectInsightsStats.tsx

@@ -38,10 +38,10 @@ interface IProjectStatsProps {
 }
 
 export const ProjectInsightsStats = ({ stats }: IProjectStatsProps) => {
+    const projectId = useRequiredPathParam('projectId');
     if (Object.keys(stats).length === 0) {
         return null;
     }
-    const projectId = useRequiredPathParam('projectId');
 
     const {
         avgTimeToProdCurrentWindow,

frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestTable.tsx

@@ -1,4 +1,4 @@
-import { useContext, useMemo, useState, type VFC } from 'react';
+import { useContext, useMemo, useState, type VFC as FC } from 'react';
 import { type HeaderGroup, useGlobalFilter, useTable } from 'react-table';
 import { Alert, Box, styled, Typography } from '@mui/material';
 import {
@@ -41,8 +41,9 @@ const StyledBox = styled(Box)(({ theme }) => ({
     },
 }));
 
-export const ChangeRequestTable: VFC = () => {
+export const ChangeRequestTable: FC = () => {
     const { trackEvent } = usePlausibleTracker();
+    const { hasAccess } = useContext(AccessContext);
     const [dialogState, setDialogState] = useState<{
         isOpen: boolean;
         enableEnvironment: string;
@@ -139,13 +140,8 @@ export const ChangeRequestTable: VFC = () => {
             },
             {
                 Header: 'Required approvals',
-                Cell: ({ row: { original } }: any) => {
+                Cell: ({ row: { original } }: any) =>
-                    const { hasAccess } = useContext(AccessContext);
+                    original.changeRequestEnabled ? (
-
-                    return (
-                        <ConditionallyRender
-                            condition={original.changeRequestEnabled}
-                            show={
                         <StyledBox data-loading>
                             <GeneralSelect
                                 sx={{ width: '140px', marginLeft: 1 }}
@@ -166,16 +162,11 @@ export const ChangeRequestTable: VFC = () => {
                                         projectId,
                                     )
                                 }
-                                        IconComponent={
+                                IconComponent={KeyboardArrowDownOutlined}
-                                            KeyboardArrowDownOutlined
-                                        }
                                 fullWidth
                             />
                         </StyledBox>
-                            }
+                    ) : null,
-                        />
-                    );
-                },
                 width: 100,
                 disableGlobalFilter: true,
                 disableSortBy: true,