chore(imports) avoid react import

Signed-off-by: David Edler <[email protected]>

.eslintrc.cjs

@@ -35,5 +35,6 @@ module.exports = {
     semi: ["error", "always"],
     "object-curly-spacing": ["error", "always"],
     "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+    "react/react-in-jsx-scope": "off",
   },
 };

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { FC, lazy, Suspense } from "react";
+import { FC, lazy, Suspense } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 import Loader from "components/Loader";
 import ProjectRedirect from "pages/projects/ProjectRedirect";

src/Root.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import Navigation from "components/Navigation";
 import { QueuedNotification } from "@canonical/react-components";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

src/components/Animate.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   FC,
   PropsWithChildren,
   useLayoutEffect,

src/components/Aside.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import classnames from "classnames";
 import { Spinner } from "@canonical/react-components";
 

src/components/AutoExpandingTextArea.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useLayoutEffect } from "react";
+import { FC, useLayoutEffect } from "react";
 import { Textarea, TextareaProps } from "@canonical/react-components";
 
 type Props = {

src/components/BaseLayout.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import classnames from "classnames";
 
 interface Props {

src/components/ConfigurationRow.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from "react";
+import { cloneElement, ReactElement, ReactNode } from "react";
 import { Button, Icon, Label, Tooltip } from "@canonical/react-components";
 import { CpuLimit, MemoryLimit } from "types/limits";
 import { MainTableRow } from "@canonical/react-components/dist/components/MainTable/MainTable";
@@ -74,7 +74,7 @@ export const getConfigurationRow = ({
       <div className="override-form">
         {wrapDisabledTooltip(
           <div>
-            {React.cloneElement(children, {
+            {cloneElement(children, {
               id: name,
               name,
               onBlur: formik.handleBlur,

src/components/ConfigurationTable.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import { MainTable, MainTableProps } from "@canonical/react-components";
 import { MainTableRow } from "@canonical/react-components/dist/components/MainTable/MainTable";
 

src/components/ConfirmationForce.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, FC, SetStateAction } from "react";
+import { Dispatch, FC, SetStateAction } from "react";
 import { CheckboxInput } from "@canonical/react-components";
 
 interface Props {

src/components/CustomLayout.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import classnames from "classnames";
 
 interface Props {

src/components/DetailPanel.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import { Button, Icon } from "@canonical/react-components";
 import classnames from "classnames";
 import Aside from "./Aside";

src/components/ErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import type { PropsWithChildren } from "react";
 import { Component } from "react";
 

src/components/ErrorPage.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from "react";
+import { FC, useEffect } from "react";
 import {
   CodeSnippet,
   CodeSnippetBlockAppearance,

src/components/ExpandableList.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useState } from "react";
+import { FC, ReactNode, useState } from "react";
 import { Button } from "@canonical/react-components";
 
 const DISPLAY_COUNT = 5;

src/components/HelpLink.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import { Icon } from "@canonical/react-components";
 
 interface Props {

src/components/ItemName.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 interface Props {
   item: {

src/components/Loader.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Spinner } from "@canonical/react-components";
 
 interface Props {

src/components/Logo.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { useProject } from "context/project";
 import { NavLink } from "react-router-dom";
 

src/components/Meter.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 interface Props {
   percentage: number;

src/components/Navigation.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent, useEffect, useState } from "react";
+import { FC, MouseEvent, useEffect, useState } from "react";
 import { NavLink } from "react-router-dom";
 import { Button, Icon } from "@canonical/react-components";
 import { useAuth } from "context/auth";

src/components/NoMatch.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Row, Col } from "@canonical/react-components";
 import CustomLayout from "./CustomLayout";
 

src/components/NotificationRow.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { NotificationConsumer, Row } from "@canonical/react-components";
 
 const NotificationRow: FC = () => {

src/components/OperationStatus.tsx

@@ -1,6 +1,6 @@
 import { Icon } from "@canonical/react-components";
 import { useOperations } from "context/operationsProvider";
-import React, { useState } from "react";
+import { useState } from "react";
 import { isWidthBelow } from "util/helpers";
 import useEventListener from "@use-it/event-listener";
 import { Link } from "react-router-dom";

src/components/PageHeader.tsx

@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren } from "react";
+import { FC, PropsWithChildren } from "react";
 
 const Left: FC<PropsWithChildren> = ({ children }) => {
   return <div className="page-header__left">{children}</div>;

src/components/PanelHeader.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent, ReactNode } from "react";
+import { FC, MouseEvent, ReactNode } from "react";
 import usePanelParams from "util/usePanelParams";
 import { Button, Icon } from "@canonical/react-components";
 

src/components/Panels.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import useEventListener from "@use-it/event-listener";
 import usePanelParams, { panels } from "util/usePanelParams";
 import InstanceDetailPanel from "pages/instances/InstanceDetailPanel";

src/components/ProgressBar.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 interface Props {
   percentage: number;

src/components/ProtectedRoute.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Navigate } from "react-router-dom";
 import { useAuth } from "context/auth";
 import Loader from "./Loader";

src/components/RenameHeader.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import { Button, Input, Tooltip } from "@canonical/react-components";
 import SubmitButton from "components/SubmitButton";
 import { FormikProps } from "formik/dist/types";

src/components/ScrollableContainer.tsx

@@ -1,4 +1,4 @@
-import React, { DependencyList, FC, ReactNode, useEffect, useRef } from "react";
+import { DependencyList, FC, ReactNode, useEffect, useRef } from "react";
 import useEventListener from "@use-it/event-listener";
 import { getAbsoluteHeightBelow, getParentsBottomSpacing } from "util/helpers";
 

src/components/ScrollableForm.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import ScrollableContainer from "./ScrollableContainer";
 import { useNotify } from "@canonical/react-components";
 

src/components/ScrollableTable.tsx

@@ -1,4 +1,4 @@
-import React, { DependencyList, FC, ReactNode, useEffect } from "react";
+import { DependencyList, FC, ReactNode, useEffect } from "react";
 import useEventListener from "@use-it/event-listener";
 import { getAbsoluteHeightBelow, getParentsBottomSpacing } from "util/helpers";
 

src/components/SelectableMainTable.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import {
   MainTableRow,
   Props as MainTableProps,

src/components/SelectedTableNotification.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Button } from "@canonical/react-components";
 
 interface Props {

src/components/SnapshotDiabledWarningLink.tsx

@@ -1,6 +1,6 @@
 import { Icon } from "@canonical/react-components";
 import { useAuth } from "context/auth";
-import React, { FC } from "react";
+import { FC } from "react";
 import { Link } from "react-router-dom";
 import { LxdProject } from "types/project";
 

src/components/SnapshotScheduleInput.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react";
+import { FC, useState } from "react";
 import { Input, RadioInput, Select } from "@canonical/react-components";
 
 const snapshotOptions = [

src/components/StatusBar.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import classnames from "classnames";
 import Version from "./Version";
 import OperationStatus from "./OperationStatus";

src/components/SubmitButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEventHandler } from "react";
+import { FC, MouseEventHandler } from "react";
 import { Button, Icon } from "@canonical/react-components";
 import classnames from "classnames";
 

src/components/TabLinks.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Tabs } from "@canonical/react-components";
 import { useNotify } from "@canonical/react-components";
 import { useNavigate } from "react-router-dom";

src/components/TableColumnsSelect.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import { ReactElement } from "react";
 import {
   CheckboxInput,
   ContextualMenu,

src/components/ToastNotification.tsx

@@ -1,7 +1,7 @@
 import { Notification } from "@canonical/react-components";
 import { DefaultTitles } from "@canonical/react-components/dist/components/Notification/Notification";
 import { ToastNotificationType } from "context/toastNotificationProvider";
-import React, { FC } from "react";
+import { FC } from "react";
 import { createPortal } from "react-dom";
 import Animate from "./Animate";
 

src/components/ToastNotificationList.tsx

@@ -7,7 +7,7 @@ import {
   GroupedNotificationCount,
   ToastNotificationType,
 } from "context/toastNotificationProvider";
-import React, { FC, useLayoutEffect, useRef, useState } from "react";
+import { FC, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { iconLookup, severityOrder } from "util/notifications";
 import Animate from "./Animate";

src/components/Version.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Icon, Tooltip } from "@canonical/react-components";
 import { useSettings } from "context/useSettings";
 import { RECENT_MAJOR_SERVER_VERSION, UI_VERSION } from "util/version";

src/components/Xterm.tsx

@@ -22,7 +22,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
  */
 
-import React, {
+import {
   forwardRef,
   useEffect,
   useImperativeHandle,

src/components/forms/CloudInitConfig.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import YamlForm from "components/forms/YamlForm";
 
 interface Props {

src/components/forms/CloudInitForm.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Icon, Tooltip } from "@canonical/react-components";
 import CloudInitConfig from "components/forms/CloudInitConfig";
 import {

src/components/forms/CpuLimitSelector.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Input, RadioInput, useNotify } from "@canonical/react-components";
 import { fetchResources } from "api/server";
 import { useQuery } from "@tanstack/react-query";

src/components/forms/DiskDeviceForm.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Input, useNotify } from "@canonical/react-components";
 import { useQuery } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";

src/components/forms/DiskDeviceFormCustom.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Icon, Input, Label } from "@canonical/react-components";
 import { InstanceAndProfileFormikProps } from "./instanceAndProfileFormValues";
 import { EditInstanceFormValues } from "pages/instances/EditInstance";

src/components/forms/DiskDeviceFormInherited.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Button, Icon } from "@canonical/react-components";
 import { InstanceAndProfileFormikProps } from "./instanceAndProfileFormValues";
 import ConfigurationTable from "components/ConfigurationTable";

src/components/forms/DiskDeviceFormRoot.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Button, Icon } from "@canonical/react-components";
 import { LxdDiskDevice } from "types/device";
 import { InstanceAndProfileFormikProps } from "./instanceAndProfileFormValues";

src/components/forms/DiskDeviceRow.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { Button, Icon, Label } from "@canonical/react-components";
 import { getConfigurationRowBase } from "components/ConfigurationRow";
 import classnames from "classnames";

src/components/forms/DiskSizeSelector.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Input, Select } from "@canonical/react-components";
 import { BYTES_UNITS } from "types/limits";
 import { parseMemoryLimit } from "util/limits";

src/components/forms/FormFooterLayout.tsx

@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren } from "react";
+import { FC, PropsWithChildren } from "react";
 
 interface Props {}
 

src/components/forms/FormMenuItem.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { slugify } from "util/slugify";
 import { Button } from "@canonical/react-components";
 import classnames from "classnames";

src/components/forms/InstanceSnapshotsForm.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import { Input, Notification, Select } from "@canonical/react-components";
 import { optionYesNo } from "util/instanceOptions";
 import {

src/components/forms/MemoryLimitSelector.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import {
   Input,
   RadioInput,

src/components/forms/NetworkDevicesForm.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import {
   Button,
   Icon,

src/components/forms/RenameDiskDeviceInput.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC, useState } from "react";
 import { Button, Icon, Input, Label } from "@canonical/react-components";
 
 interface Props {
@@ -14,7 +14,7 @@ const RenameDiskDeviceInput: FC<Props> = ({
   setName,
   readOnly,
 }) => {
-  const [isEditing, setEditing] = React.useState(false);
+  const [isEditing, setEditing] = useState(false);
 
   if (readOnly) {
     return (

src/components/forms/ResourceLimitsForm.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Input, Select } from "@canonical/react-components";
 import { CreateInstanceFormValues } from "pages/instances/CreateInstance";
 import MemoryLimitSelector from "./MemoryLimitSelector";