chore(ws): enforce named imports for react hooks

workspaces/frontend/.eslintrc → workspaces/frontend/.eslintrc.js

@@ -1,4 +1,6 @@
-{
+const noReactHookNamespace = require('./eslint-local-rules/no-react-hook-namespace');
+
+module.exports = {
   "parser": "@typescript-eslint/parser",
   "env": {
     "browser": true,
@@ -216,7 +218,8 @@
     "no-useless-return": "error",
     "symbol-description": "error",
     "yoda": "error",
-    "func-names": "warn"
+    "func-names": "warn",
+    "no-react-hook-namespace": "error"
   },
   "overrides": [
     {
@@ -262,6 +265,12 @@
           }
         ]
       }
+    },
+    {
+      files: ['**/*.{js,jsx,ts,tsx}'],
+      rules: {
+        'no-react-hook-namespace': 'error',
+      },
     }
   ]
-}
+};

workspaces/frontend/eslint-local-rules/no-react-hook-namespace.js

@@ -0,0 +1,34 @@
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow using React hooks through React namespace',
+    },
+    messages: {
+      avoidNamespaceHook: 'Import React hook "{{hook}}" directly instead of using React.{{hook}}.',
+    },
+    schema: [],
+  },
+  create(context) {
+    const hooks = new Set([
+      'useState', 'useEffect', 'useContext', 'useReducer',
+      'useCallback', 'useMemo', 'useRef', 'useLayoutEffect',
+      'useImperativeHandle', 'useDebugValue', 'useDeferredValue',
+      'useTransition', 'useId', 'useSyncExternalStore',
+    ]);
+    return {
+      MemberExpression(node) {
+        if (
+          node.object?.name === 'React' &&
+          hooks.has(node.property?.name)
+        ) {
+          context.report({
+            node,
+            messageId: 'avoidNamespaceHook',
+            data: { hook: node.property.name },
+          });
+        }
+      },
+    };
+  },
+};

workspaces/frontend/package.json

@@ -24,8 +24,8 @@
     "test:unit": "npm run test:jest -- --silent",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "test:fix": "eslint --ext .js,.ts,.jsx,.tsx ./src --fix",
-    "test:lint": "eslint --max-warnings 0 --ext .js,.ts,.jsx,.tsx ./src",
+    "test:fix": "eslint --rulesdir eslint-local-rules --ext .js,.ts,.jsx,.tsx ./src --fix",
+    "test:lint": "eslint --rulesdir eslint-local-rules --max-warnings 0 --ext .js,.ts,.jsx,.tsx ./src",
     "cypress:open": "cypress open --project src/__tests__/cypress",
     "cypress:open:mock": "CY_MOCK=1 CY_WS_PORT=9002 npm run cypress:open -- ",
     "cypress:run": "cypress run -b chrome --project src/__tests__/cypress",

workspaces/frontend/src/__tests__/unit/testUtils/hooks.spec.ts

@@ -1,15 +1,15 @@
-import * as React from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { createComparativeValue, renderHook, standardUseFetchState, testHook } from './hooks';
 
 const useSayHello = (who: string, showCount = false) => {
-  const countRef = React.useRef(0);
+  const countRef = useRef(0);
   countRef.current++;
   return `Hello ${who}!${showCount && countRef.current > 1 ? ` x${countRef.current}` : ''}`;
 };
 
 const useSayHelloDelayed = (who: string, delay = 0) => {
-  const [speech, setSpeech] = React.useState('');
-  React.useEffect(() => {
+  const [speech, setSpeech] = useState('');
+  useEffect(() => {
     const handle = setTimeout(() => setSpeech(`Hello ${who}!`), delay);
     return () => clearTimeout(handle);
   }, [who, delay]);

workspaces/frontend/src/app/App.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useEffect } from 'react';
 import '@patternfly/react-core/dist/styles/base.css';
 import './app.css';
 import {
@@ -26,7 +26,7 @@ import { isMUITheme, Theme } from './const';
 import { BrowserStorageContextProvider } from './context/BrowserStorageContext';
 
 const App: React.FC = () => {
-  React.useEffect(() => {
+  useEffect(() => {
     // Apply the theme based on the value of STYLE_THEME
     if (isMUITheme()) {
       document.documentElement.classList.add(Theme.MUI);

workspaces/frontend/src/app/AppRoutes.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Route, Routes, Navigate } from 'react-router-dom';
 import { AppRoutePaths } from '~/app/routes';
 import { WorkspaceForm } from '~/app/pages/Workspaces/Form/WorkspaceForm';

workspaces/frontend/src/app/EnsureAPIAvailability.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Bullseye, Spinner } from '@patternfly/react-core';
 import { useNotebookAPI } from './hooks/useNotebookAPI';
 

workspaces/frontend/src/app/NavSidebar.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useState } from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 import {
   Brand,
@@ -29,7 +29,7 @@ const NavHref: React.FC<{ item: NavDataHref }> = ({ item }) => {
 
 const NavGroup: React.FC<{ item: NavDataGroup }> = ({ item }) => {
   const { children } = item;
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = useState(false);
 
   return (
     <NavExpandable

workspaces/frontend/src/app/components/ThemeAwareSearchInput.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { SearchInput, SearchInputProps, TextInput } from '@patternfly/react-core';
 import FormFieldset from 'app/components/FormFieldset';
 import { isMUITheme } from 'app/const';

workspaces/frontend/src/app/context/BrowserStorageContext.tsx

@@ -1,4 +1,12 @@
-import React, { createContext, useCallback, useContext, useEffect } from 'react';
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 export interface BrowserStorageContextType {
   getValue: (key: string) => unknown;
@@ -17,8 +25,8 @@ const BrowserStorageContext = createContext<BrowserStorageContextType>({
 export const BrowserStorageContextProvider: React.FC<BrowserStorageContextProviderProps> = ({
   children,
 }) => {
-  const [values, setValues] = React.useState<{ [key: string]: unknown }>({});
-  const valuesRef = React.useRef(values);
+  const [values, setValues] = useState<{ [key: string]: unknown }>({});
+  const valuesRef = useRef(values);
   useEffect(() => {
     valuesRef.current = values;
   }, [values]);
@@ -49,7 +57,7 @@ export const BrowserStorageContextProvider: React.FC<BrowserStorageContextProvid
   );
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const contextValue = React.useMemo(() => ({ getValue, setValue }), [getValue, setValue, values]);
+  const contextValue = useMemo(() => ({ getValue, setValue }), [getValue, setValue, values]);
 
   return (
     <BrowserStorageContext.Provider value={contextValue}>{children}</BrowserStorageContext.Provider>

workspaces/frontend/src/app/context/NamespaceContextProvider.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, ReactNode, useMemo, useCallback } from 'react';
+import React, { ReactNode, useCallback, useContext, useMemo, useState } from 'react';
 import useMount from '~/app/hooks/useMount';
 import useNamespaces from '~/app/hooks/useNamespaces';
 import { useStorage } from './BrowserStorageContext';

workspaces/frontend/src/app/context/NotebookContext.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import { ReactNode } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 import { BFF_API_VERSION } from '~/app/const';
 import EnsureAPIAvailability from '~/app/EnsureAPIAvailability';
 import useNotebookAPIState, { NotebookAPIState } from './useNotebookAPIState';
@@ -26,7 +25,7 @@ export const NotebookContextProvider: React.FC<NotebookContextProviderProps> = (
 
   return (
     <NotebookContext.Provider
-      value={React.useMemo(
+      value={useMemo(
         () => ({
           apiState,
           refreshAPIState,

workspaces/frontend/src/app/context/useNotebookAPIState.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useCallback } from 'react';
 import { NotebookAPIs } from '~/shared/api/notebookApi';
 import {
   createWorkspace,
@@ -48,7 +48,7 @@ const MOCK_API_ENABLED = process.env.WEBPACK_REPLACE__mockApiEnabled === 'true';
 const useNotebookAPIState = (
   hostPath: string | null,
 ): [apiState: NotebookAPIState, refreshAPIState: () => void] => {
-  const createApi = React.useCallback(
+  const createApi = useCallback(
     (path: string): NotebookAPIs => ({
       // Health
       getHealthCheck: getHealthCheck(path),
@@ -75,7 +75,7 @@ const useNotebookAPIState = (
     [],
   );
 
-  const createMockApi = React.useCallback(
+  const createMockApi = useCallback(
     (path: string): NotebookAPIs => ({
       // Health
       getHealthCheck: mockGetHealthCheck(path),

workspaces/frontend/src/app/error/ErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 import { Button, Split, SplitItem, Title } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons';

workspaces/frontend/src/app/error/ErrorDetails.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import {
   ClipboardCopy,
   ClipboardCopyVariant,

workspaces/frontend/src/app/error/UpdateState.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import {
   Button,
   EmptyState,

workspaces/frontend/src/app/hooks/useGenericObjectState.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useCallback, useRef, useState } from 'react';
 
 export type UpdateObjectAtPropAndValue<T> = <K extends keyof T>(
   propKey: K,
@@ -13,9 +13,9 @@ export type GenericObjectState<T> = [
 ];
 
 const useGenericObjectState = <T>(defaultData: T | (() => T)): GenericObjectState<T> => {
-  const [value, setValue] = React.useState<T>(defaultData);
+  const [value, setValue] = useState<T>(defaultData);
 
-  const setPropValue = React.useCallback<UpdateObjectAtPropAndValue<T>>((propKey, propValue) => {
+  const setPropValue = useCallback<UpdateObjectAtPropAndValue<T>>((propKey, propValue) => {
     setValue((oldValue) => {
       if (oldValue[propKey] !== propValue) {
         return { ...oldValue, [propKey]: propValue };
@@ -24,12 +24,12 @@ const useGenericObjectState = <T>(defaultData: T | (() => T)): GenericObjectStat
     });
   }, []);
 
-  const defaultDataRef = React.useRef(value);
-  const resetToDefault = React.useCallback(() => {
+  const defaultDataRef = useRef(value);
+  const resetToDefault = useCallback(() => {
     setValue(defaultDataRef.current);
   }, []);
 
-  const replace = React.useCallback((newValue: T) => {
+  const replace = useCallback((newValue: T) => {
     setValue(newValue);
   }, []);
 

workspaces/frontend/src/app/hooks/useNamespaces.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useCallback } from 'react';
 import useFetchState, {
   FetchState,
   FetchStateCallbackPromise,
@@ -9,7 +9,7 @@ import { Namespace } from '~/shared/api/backendApiTypes';
 const useNamespaces = (): FetchState<Namespace[] | null> => {
   const { api, apiAvailable } = useNotebookAPI();
 
-  const call = React.useCallback<FetchStateCallbackPromise<Namespace[] | null>>(
+  const call = useCallback<FetchStateCallbackPromise<Namespace[] | null>>(
     (opts) => {
       if (!apiAvailable) {
         return Promise.reject(new Error('API not yet available'));

workspaces/frontend/src/app/hooks/useNotebookAPI.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext } from 'react';
 import { NotebookAPIState } from '~/app/context/useNotebookAPIState';
 import { NotebookContext } from '~/app/context/NotebookContext';
 
@@ -7,7 +7,7 @@ type UseNotebookAPI = NotebookAPIState & {
 };
 
 export const useNotebookAPI = (): UseNotebookAPI => {
-  const { apiState, refreshAPIState: refreshAllAPI } = React.useContext(NotebookContext);
+  const { apiState, refreshAPIState: refreshAllAPI } = useContext(NotebookContext);
 
   return {
     refreshAllAPI,

workspaces/frontend/src/app/hooks/useWorkspaceCountPerKind.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useEffect, useState } from 'react';
 import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
 import { Workspace, WorkspaceKind } from '~/shared/api/backendApiTypes';
 import { WorkspaceCountPerOption } from '~/app/types';
@@ -8,11 +8,9 @@ export type WorkspaceCountPerKind = Record<WorkspaceKind['name'], WorkspaceCount
 export const useWorkspaceCountPerKind = (): WorkspaceCountPerKind => {
   const { api } = useNotebookAPI();
 
-  const [workspaceCountPerKind, setWorkspaceCountPerKind] = React.useState<WorkspaceCountPerKind>(
-    {},
-  );
+  const [workspaceCountPerKind, setWorkspaceCountPerKind] = useState<WorkspaceCountPerKind>({});
 
-  React.useEffect(() => {
+  useEffect(() => {
     api.listAllWorkspaces({}).then((workspaces) => {
       const countPerKind = workspaces.reduce((acc: WorkspaceCountPerKind, workspace: Workspace) => {
         acc[workspace.workspaceKind.name] = acc[workspace.workspaceKind.name] ?? {

workspaces/frontend/src/app/hooks/useWorkspaceFormData.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useCallback } from 'react';
 import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
 import { WorkspaceFormData } from '~/app/types';
 import useFetchState, {
@@ -25,7 +25,7 @@ const useWorkspaceFormData = (args: {
 }): FetchState<WorkspaceFormData> => {
   const { api, apiAvailable } = useNotebookAPI();
 
-  const call = React.useCallback<FetchStateCallbackPromise<WorkspaceFormData>>(
+  const call = useCallback<FetchStateCallbackPromise<WorkspaceFormData>>(
     async (opts) => {
       if (!apiAvailable) {
         throw new Error('API not yet available');

workspaces/frontend/src/app/hooks/useWorkspaceKindByName.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useCallback } from 'react';
 import useFetchState, {
   FetchState,
   FetchStateCallbackPromise,
@@ -9,7 +9,7 @@ import { WorkspaceKind } from '~/shared/api/backendApiTypes';
 const useWorkspaceKindByName = (kind: string): FetchState<WorkspaceKind | null> => {
   const { api, apiAvailable } = useNotebookAPI();
 
-  const call = React.useCallback<FetchStateCallbackPromise<WorkspaceKind | null>>(
+  const call = useCallback<FetchStateCallbackPromise<WorkspaceKind | null>>(
     (opts) => {
       if (!apiAvailable) {
         return Promise.reject(new Error('API not yet available'));

workspaces/frontend/src/app/hooks/useWorkspaceKinds.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useCallback } from 'react';
 import useFetchState, {
   FetchState,
   FetchStateCallbackPromise,
@@ -8,7 +8,7 @@ import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
 
 const useWorkspaceKinds = (): FetchState<WorkspaceKind[]> => {
   const { api, apiAvailable } = useNotebookAPI();
-  const call = React.useCallback<FetchStateCallbackPromise<WorkspaceKind[]>>(
+  const call = useCallback<FetchStateCallbackPromise<WorkspaceKind[]>>(
     (opts) => {
       if (!apiAvailable) {
         return Promise.reject(new Error('API not yet available'));

workspaces/frontend/src/app/hooks/useWorkspaces.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useCallback } from 'react';
 import useFetchState, {
   FetchState,
   FetchStateCallbackPromise,
@@ -9,7 +9,7 @@ import { Workspace } from '~/shared/api/backendApiTypes';
 const useWorkspaces = (namespace: string): FetchState<Workspace[] | null> => {
   const { api, apiAvailable } = useNotebookAPI();
 
-  const call = React.useCallback<FetchStateCallbackPromise<Workspace[] | null>>(
+  const call = useCallback<FetchStateCallbackPromise<Workspace[] | null>>(
     (opts) => {
       if (!apiAvailable) {
         return Promise.reject(new Error('API not yet available'));

workspaces/frontend/src/app/pages/Debug/Debug.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { CubesIcon } from '@patternfly/react-icons';
 import {
   Button,