refactor: expose feature check as hook

Author: shadowusr

lib/static/new-ui/components/RunTest/index.tsx

@@ -8,7 +8,7 @@ import {useDispatch, useSelector} from 'react-redux';
 import {RunTestsFeature} from '@/constants';
 import {useAnalytics} from '../../hooks/useAnalytics';
 import type {BrowserEntity} from '@/static/new-ui/types/store';
-import {isFeatureAvailable} from '../../utils/features';
+import {useIsFeatureAvailable} from '../../utils/features';
 
 interface RunTestProps {
     browser: BrowserEntity | null;
@@ -22,7 +22,7 @@ export const RunTestButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, R
 
         const analytics = useAnalytics();
         const dispatch = useDispatch();
-        const isRunTestsAvailable = isFeatureAvailable(RunTestsFeature);
+        const isRunTestsAvailable = useIsFeatureAvailable(RunTestsFeature);
 
         const onRetryTestHandler = (): void => {
             if (browser) {

lib/static/new-ui/features/suites/components/TestControlPanel/index.tsx

@@ -10,7 +10,7 @@ import {getCurrentBrowser, getCurrentResultId, isTimeTravelPlayerAvailable} from
 import {RunTestButton} from '@/static/new-ui/components/RunTest';
 import {useAnalytics} from '../../../../hooks/useAnalytics';
 import {IconButton} from '../../../../components/IconButton';
-import {isFeatureAvailable} from '../../../../utils/features';
+import {useIsFeatureAvailable} from '../../../../utils/features';
 import {RunTestsFeature} from '@/constants';
 import {toggleTimeTravelPlayerVisibility} from '@/static/modules/actions/snapshots';
 
@@ -42,7 +42,7 @@ export function TestControlPanel(props: TestControlPanelProps): ReactNode {
         onAttemptChange?.(browserId, resultId, attemptIndex);
     };
 
-    const isRunTestsAvailable = isFeatureAvailable(RunTestsFeature);
+    const isRunTestsAvailable = useIsFeatureAvailable(RunTestsFeature);
     const isPlayerAvailable = useSelector(isTimeTravelPlayerAvailable);
     const isPlayerVisible = useSelector(state => state.ui.suitesPage.isSnapshotsPlayerVisible);
 

lib/static/new-ui/utils/features.ts

@@ -1,7 +1,8 @@
 import {Feature} from '@/constants';
 import {useSelector} from 'react-redux';
 
-export const isFeatureAvailable = (feature: Feature): boolean => {
-    return Boolean(useSelector(state => state.app.availableFeatures)
-        .find(f => f.name === feature.name));
+export const useIsFeatureAvailable = (feature: Feature): boolean => {
+    const availableFeatures = useSelector(state => state.app.availableFeatures);
+
+    return Boolean(availableFeatures?.find(f => f.name === feature.name));
 };