WD-11676 - refactor: split exports to enable fast refresh (#1761)

.eslintrc

@@ -68,10 +68,7 @@
     "react/display-name": 0,
     "@typescript-eslint/no-duplicate-enum-values": 0,
     "promise/catch-or-return": ["error", { "allowFinally": true }],
-    "react-refresh/only-export-components": [
-      "warn",
-      { "allowConstantExport": true },
-    ],
+    "react-refresh/only-export-components": ["error"],
     "@typescript-eslint/no-unused-vars": [
       "error",
       {

src/components/App/App.test.tsx

@@ -5,14 +5,14 @@ import * as reactRouterDOM from "react-router-dom";
 import configureStore from "redux-mock-store";
 import { vi } from "vitest";
 
-import * as Routes from "components/Routes/Routes";
+import * as Routes from "components/Routes";
 import { configFactory, generalStateFactory } from "testing/factories/general";
 import { rootStateFactory } from "testing/factories/root";
 
 import App from "./App";
 
-vi.mock("components/Routes/Routes", () => ({
-  Routes: vi.fn(),
+vi.mock("components/Routes", () => ({
+  default: vi.fn(),
 }));
 
 vi.mock("react-ga", () => ({
@@ -53,7 +53,7 @@ describe("App", () => {
   });
 
   it("catches and displays errors", () => {
-    vi.spyOn(Routes, "Routes").mockImplementation(() => {
+    vi.spyOn(Routes, "default").mockImplementation(() => {
       throw new Error("This is a thrown error");
     });
     const store = mockStore(rootStateFactory.withGeneralConfig().build());

src/components/App/App.tsx

@@ -2,8 +2,8 @@ import { initialize, pageview } from "react-ga";
 import { BrowserRouter as Router } from "react-router-dom";
 
 import ConnectionError from "components/ConnectionError";
-import ErrorBoundary from "components/ErrorBoundary/ErrorBoundary";
-import { Routes } from "components/Routes/Routes";
+import ErrorBoundary from "components/ErrorBoundary";
+import Routes from "components/Routes";
 import { getAnalyticsEnabled, getConfig } from "store/general/selectors";
 import { useAppSelector } from "store/store";
 

src/components/App/index.ts

@@ -0,0 +1 @@
+export { default } from "./App";

src/components/Aside/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Aside";
+export type { Props as AsideProps } from "./Aside";

src/components/AuditLogsTable/AuditLogsTable.test.tsx

@@ -2,7 +2,7 @@ import { screen, within } from "@testing-library/react";
 import { add } from "date-fns";
 import { vi } from "vitest";
 
-import { TestId } from "components/LoadingSpinner/LoadingSpinner";
+import { LoadingSpinnerTestId } from "components/LoadingSpinner";
 import { actions as jujuActions } from "store/juju";
 import type { RootState } from "store/store";
 import { rootStateFactory, jujuStateFactory } from "testing/factories";
@@ -113,7 +113,9 @@ describe("AuditLogsTable", () => {
     ];
     renderComponent(<AuditLogsTable />, { state });
     expect(await screen.findByRole("table")).toBeInTheDocument();
-    expect(screen.queryByTestId(TestId.LOADING)).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(LoadingSpinnerTestId.LOADING),
+    ).not.toBeInTheDocument();
     const row = screen.getAllByRole("row")[1];
     const cells = within(row).getAllByRole("cell");
     expect(cells[0]).toHaveTextContent("eggman");

src/components/AuditLogsTable/AuditLogsTable.tsx

@@ -5,7 +5,7 @@ import { useParams } from "react-router-dom";
 
 import LoadingSpinner from "components/LoadingSpinner/LoadingSpinner";
 import RelativeDate from "components/RelativeDate";
-import type { EntityDetailsRoute } from "components/Routes/Routes";
+import type { EntityDetailsRoute } from "components/Routes";
 import { useQueryParams } from "hooks/useQueryParams";
 import { actions as jujuActions } from "store/juju";
 import {
@@ -19,7 +19,7 @@ import getUserName from "utils/getUserName";
 
 import type { AuditLogFilters } from "./AuditLogsTableFilters/AuditLogsTableFilters";
 import AuditLogsTableFilters from "./AuditLogsTableFilters/AuditLogsTableFilters";
-import { DEFAULT_AUDIT_LOG_FILTERS } from "./AuditLogsTableFilters/AuditLogsTableFilters";
+import { DEFAULT_AUDIT_LOG_FILTERS } from "./AuditLogsTableFilters/consts";
 import AuditLogsTablePagination from "./AuditLogsTablePagination";
 import { DEFAULT_PAGE } from "./consts";
 import { useFetchAuditEvents } from "./hooks";

src/components/AuditLogsTable/AuditLogsTableActions/AuditLogsTableActions.test.tsx

@@ -9,7 +9,8 @@ import { auditEventFactory } from "testing/factories/juju/jimm";
 import { auditEventsStateFactory } from "testing/factories/juju/juju";
 import { renderComponent } from "testing/utils";
 
-import AuditLogsTableActions, { Label } from "./AuditLogsTableActions";
+import AuditLogsTableActions from "./AuditLogsTableActions";
+import { Label } from "./types";
 
 describe("AuditLogsTableActions", () => {
   let state: RootState;

src/components/AuditLogsTable/AuditLogsTableActions/AuditLogsTableActions.tsx

@@ -6,10 +6,7 @@ import AuditLogsTablePagination from "../AuditLogsTablePagination";
 import { DEFAULT_PAGE } from "../consts";
 import { useFetchAuditEvents } from "../hooks";
 
-export enum Label {
-  FILTER = "Filter",
-  REFRESH = "Refresh",
-}
+import { Label } from "./types";
 
 const AuditLogsTableActions = () => {
   const [, setQueryParams] = useQueryParams<{

src/components/AuditLogsTable/AuditLogsTableActions/index.ts

@@ -1 +1,2 @@
 export { default } from "./AuditLogsTableActions";
+export { Label as AuditLogsTableActionsLabel } from "./types";

src/components/AuditLogsTable/AuditLogsTableActions/types.ts

@@ -0,0 +1,4 @@
+export enum Label {
+  FILTER = "Filter",
+  REFRESH = "Refresh",
+}

src/components/AuditLogsTable/AuditLogsTableFilters/AuditLogsTableFilters.tsx

@@ -5,6 +5,8 @@ import ActionBar from "components/ActionBar/ActionBar";
 import { useQueryParams } from "hooks/useQueryParams";
 import type { SetParams } from "hooks/useQueryParams";
 
+import { DEFAULT_AUDIT_LOG_FILTERS } from "./consts";
+
 export type AuditLogFilters = {
   after: string | null;
   before: string | null;
@@ -13,15 +15,7 @@ export type AuditLogFilters = {
   method: string | null;
 };
 
-export const DEFAULT_AUDIT_LOG_FILTERS = {
-  after: null,
-  before: null,
-  user: null,
-  model: null,
-  method: null,
-};
-
-export const generateFilters = (
+const generateFilters = (
   filters: AuditLogFilters,
   setFilters: SetParams<AuditLogFilters>,
 ) =>

src/components/AuditLogsTable/AuditLogsTableFilters/consts.ts

@@ -0,0 +1,7 @@
+export const DEFAULT_AUDIT_LOG_FILTERS = {
+  after: null,
+  before: null,
+  user: null,
+  model: null,
+  method: null,
+};

src/components/AuditLogsTable/AuditLogsTablePagination/AuditLogsTablePagination.test.tsx

@@ -10,7 +10,8 @@ import { auditEventFactory } from "testing/factories/juju/jimm";
 import { auditEventsStateFactory } from "testing/factories/juju/juju";
 import { renderComponent } from "testing/utils";
 
-import AuditLogsTablePagination, { Label } from "./AuditLogsTablePagination";
+import AuditLogsTablePagination from "./AuditLogsTablePagination";
+import { Label } from "./types";
 
 describe("AuditLogsTablePagination", () => {
   let state: RootState;

src/components/AuditLogsTable/AuditLogsTablePagination/AuditLogsTablePagination.tsx

@@ -16,10 +16,7 @@ import { useAppDispatch, useAppSelector } from "store/store";
 import { DEFAULT_LIMIT_VALUE, DEFAULT_PAGE } from "../consts";
 
 import "./_audit-logs-table-pagination.scss";
-
-export enum Label {
-  FIRST_PAGE = "Back to first page",
-}
+import { Label } from "./types";
 
 type Props = PropsWithSpread<
   {

src/components/AuditLogsTable/AuditLogsTablePagination/index.ts

@@ -1 +1,2 @@
 export { default } from "./AuditLogsTablePagination";
+export { Label as AuditLogsTablePaginationLabel } from "./types";

src/components/AuditLogsTable/AuditLogsTablePagination/types.ts

@@ -0,0 +1,3 @@
+export enum Label {
+  FIRST_PAGE = "Back to first page",
+}

src/components/AuditLogsTable/hooks.ts

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import { useParams } from "react-router-dom";
 
-import type { EntityDetailsRoute } from "components/Routes/Routes";
+import type { EntityDetailsRoute } from "components/Routes";
 import { useQueryParams } from "hooks/useQueryParams";
 import {
   getControllerConnection,
@@ -16,7 +16,7 @@ import {
 import { useAppDispatch, useAppSelector } from "store/store";
 
 import type { AuditLogFilters } from "./AuditLogsTableFilters/AuditLogsTableFilters";
-import { DEFAULT_AUDIT_LOG_FILTERS } from "./AuditLogsTableFilters/AuditLogsTableFilters";
+import { DEFAULT_AUDIT_LOG_FILTERS } from "./AuditLogsTableFilters/consts";
 import { DEFAULT_PAGE } from "./consts";
 
 export const useFetchAuditEvents = () => {

src/components/Banner/Banner.test.tsx

@@ -1,7 +1,8 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import Banner, { Label } from "./Banner";
+import Banner from "./Banner";
+import { Label } from "./types";
 
 describe("Banner", () => {
   it("should display banner text", () => {

src/components/Banner/Banner.tsx

@@ -3,10 +3,7 @@ import type { ReactNode } from "react";
 import { useState, useEffect } from "react";
 
 import "./_banner.scss";
-
-export enum Label {
-  CLOSE = "Close banner",
-}
+import { Label } from "./types";
 
 type Props = {
   isActive: boolean;

src/components/Banner/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Banner";
+export { Label as BannerLabel } from "./types";

src/components/Banner/types.ts

@@ -0,0 +1,3 @@
+export enum Label {
+  CLOSE = "Close banner",
+}

src/components/Breadcrumb/index.ts

@@ -0,0 +1 @@
+export { default } from "./Breadcrumb";

src/components/ChipGroup/ChipGroup.tsx

@@ -1,9 +1,7 @@
 import classNames from "classnames";
-import "./_chip-group.scss";
 
-export type Chip = {
-  [key: string]: number;
-};
+import "./_chip-group.scss";
+import type { Chip } from "./types";
 
 type Props = {
   chips?: Chip | null;

src/components/ChipGroup/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ChipGroup";
+export * from "./types";

src/components/ChipGroup/types.ts

@@ -0,0 +1,3 @@
+export type Chip = {
+  [key: string]: number;
+};

src/components/ConnectionError/ConnectionError.tsx

@@ -2,7 +2,7 @@ import { Button, Notification, Strip } from "@canonical/react-components";
 import { useEffect, type PropsWithChildren } from "react";
 import reactHotToast from "react-hot-toast";
 
-import ToastCard from "components/ToastCard/ToastCard";
+import ToastCard from "components/ToastCard";
 import { getConnectionError } from "store/general/selectors";
 import { getAuditEventsErrors } from "store/juju/selectors";
 import { useAppSelector } from "store/store";

src/components/ContentReveal/index.ts

@@ -0,0 +1 @@
+export { default } from "./ContentReveal";

src/components/DonutChart/index.ts

@@ -0,0 +1 @@
+export { default } from "./DonutChart";

src/components/EntityInfo/EntityInfo.test.tsx

@@ -5,7 +5,7 @@ import { renderComponent } from "testing/utils";
 
 import EntityInfo from "./EntityInfo";
 
-vi.mock("components/Topology/Topology", () => {
+vi.mock("components/Topology", () => {
   const Topology = () => <div className="topology"></div>;
   return { default: Topology };
 });

src/components/EntityInfo/index.ts

@@ -0,0 +1 @@
+export { default } from "./EntityInfo";

src/components/ErrorBoundary/index.ts

@@ -0,0 +1 @@
+export { default } from "./ErrorBoundary";

src/components/FormikFormData/FormikFormData.tsx

@@ -1,12 +1,8 @@
-import type { ValueOf } from "@canonical/react-components";
-import { Form, type FormikErrors, useFormikContext } from "formik";
+import { Form, useFormikContext } from "formik";
 import type { ReactNode } from "react";
 import { useEffect } from "react";
 
-export type SetFieldValue<V> = (
-  fieldName: string,
-  value: ValueOf<V>,
-) => Promise<void | FormikErrors<V>>;
+import type { SetFieldValue } from "./types";
 
 type Props<V> = {
   children: ReactNode;

src/components/FormikFormData/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./FormikFormData";
+export * from "./types";

src/components/FormikFormData/types.ts

@@ -0,0 +1,7 @@
+import type { ValueOf } from "@canonical/react-components";
+import type { FormikErrors } from "formik";
+
+export type SetFieldValue<V> = (
+  fieldName: string,
+  value: ValueOf<V>,
+) => Promise<void | FormikErrors<V>>;

src/components/InfoPanel/InfoPanel.test.tsx

@@ -12,9 +12,10 @@ import {
 } from "testing/factories/juju/model-watcher";
 import { renderComponent } from "testing/utils";
 
-import InfoPanel, { Label } from "./InfoPanel";
+import InfoPanel from "./InfoPanel";
+import { Label } from "./types";
 
-vi.mock("components/Topology/Topology", () => {
+vi.mock("components/Topology", () => {
   const Topology = () => <div data-testid="topology"></div>;
   return { default: Topology };
 });

src/components/InfoPanel/InfoPanel.tsx

@@ -3,8 +3,8 @@ import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import usePortal from "react-useportal";
 
-import type { EntityDetailsRoute } from "components/Routes/Routes";
-import Topology from "components/Topology/Topology";
+import type { EntityDetailsRoute } from "components/Routes";
+import Topology from "components/Topology";
 import { getViewportWidth } from "components/utils";
 import useAnalytics from "hooks/useAnalytics";
 import {
@@ -15,14 +15,7 @@ import {
 } from "store/juju/selectors";
 
 import "./_info-panel.scss";
-
-export enum TestId {
-  INFO_PANEL = "info-panel",
-}
-
-export enum Label {
-  EXPAND_BUTTON = "Expand topology",
-}
+import { Label, TestId } from "./types";
 
 const expandedTopologyDimensions = () => {
   const de = document.documentElement;

src/components/InfoPanel/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./InfoPanel";
+export { Label as InfoPanelLabel, TestId as InfoPanelTestId } from "./types";

src/components/InfoPanel/types.ts

@@ -0,0 +1,7 @@
+export enum TestId {
+  INFO_PANEL = "info-panel",
+}
+
+export enum Label {
+  EXPAND_BUTTON = "Expand topology",
+}

src/components/LoadingHandler/LoadingHandler.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/react";
 
-import LoadingHandler, { TestId } from "./LoadingHandler";
+import LoadingHandler from "./LoadingHandler";
+import { TestId } from "./types";
 
 describe("LoadingHandler", () => {
   it("returns a spinner if no data and set to loading", () => {

src/components/LoadingHandler/LoadingHandler.tsx

@@ -2,10 +2,7 @@ import { Spinner } from "@canonical/react-components";
 import type { ReactNode } from "react";
 
 import "./_loading-handler.scss";
-
-export enum TestId {
-  LOADING = "loading",
-}
+import { TestId } from "./types";
 
 type LoadingHandlerProps = {
   children?: ReactNode;

src/components/LoadingHandler/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./LoadingHandler";
+export { TestId as LoadingHandlerTestId } from "./types";

src/components/LoadingHandler/types.ts

@@ -0,0 +1,3 @@
+export enum TestId {
+  LOADING = "loading",
+}

src/components/LoadingSpinner/LoadingSpinner.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/react";
 
-import LoadingSpinner, { TestId } from "./LoadingSpinner";
+import LoadingSpinner from "./LoadingSpinner";
+import { TestId } from "./types";
 
 describe("LoadingSpinner", () => {
   it("should display the spinner", async () => {