Make the frontend a module for customview

Author: syucream

.gitignore

@@ -171,6 +171,7 @@ static_root
 node_modules
 static/js/ui.js*
 coverage
+frontend/dist
 
 # local django configuration
 airone/settings.py

frontend/src/App.tsx

@@ -1,31 +1,11 @@
-import { ThemeProvider } from "@mui/material/styles";
-import React, { FC } from "react";
+import React from "react";
 import { createRoot } from "react-dom/client";
 
-import { AironeSnackbarProvider } from "AironeSnackbarProvider";
-import { AppRouter } from "AppRouter";
-import { CheckTermsService } from "CheckTermsService";
-import { ErrorHandler } from "ErrorHandler";
-import { theme } from "Theme";
-import "i18n/config";
-
-const App: FC = () => {
-  return (
-    <ThemeProvider theme={theme}>
-      <AironeSnackbarProvider>
-        <ErrorHandler>
-          <CheckTermsService>
-            <AppRouter />
-          </CheckTermsService>
-        </ErrorHandler>
-      </AironeSnackbarProvider>
-    </ThemeProvider>
-  );
-};
+import { AppBase } from "AppBase";
 
 const container = document.getElementById("app");
 if (container == null) {
   throw new Error("failed to initializer React app.");
 }
 const root = createRoot(container);
-root.render(<App />);
+root.render(<AppBase />);

frontend/src/AppBase.tsx

@@ -0,0 +1,30 @@
+import { ThemeProvider } from "@mui/material/styles";
+import React, { FC } from "react";
+
+import { AironeSnackbarProvider } from "AironeSnackbarProvider";
+import { CheckTermsService } from "CheckTermsService";
+import { ErrorHandler } from "ErrorHandler";
+import { theme } from "Theme";
+import { AppRouter } from "routes/AppRouter";
+import "i18n/config";
+
+interface Props {
+  customRoutes?: {
+    path: string;
+    element: React.ReactNode;
+  }[];
+}
+
+export const AppBase: FC<Props> = ({ customRoutes }) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <AironeSnackbarProvider>
+        <ErrorHandler>
+          <CheckTermsService>
+            <AppRouter customRoutes={customRoutes} />
+          </CheckTermsService>
+        </ErrorHandler>
+      </AironeSnackbarProvider>
+    </ThemeProvider>
+  );
+};

frontend/src/ErrorHandler.tsx

@@ -22,7 +22,7 @@ import {
   NonTermsServiceAgreement,
 } from "./services/Exceptions";
 
-import { topPath } from "Routes";
+import { topPath } from "routes/Routes";
 
 const ErrorDescription = styled(Box)(({ theme }) => ({
   marginTop: theme.spacing(2),

frontend/src/components/acl/index.ts

@@ -0,0 +1,2 @@
+export * from "./ACLForm";
+export * from "./ACLHistoryList";

frontend/src/components/Header.tsx frontend/src/components/common/Header.tsx

@@ -23,8 +23,11 @@ import React, { FC, MouseEvent, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import { useInterval } from "react-use";
 
-import { useTranslation } from "../hooks/useTranslation";
+import { useTranslation } from "../../hooks/useTranslation";
 
+import { SearchBox } from "components/common/SearchBox";
+import { useSimpleSearch } from "hooks/useSimpleSearch";
+import { aironeApiClient } from "repository/AironeApiClient";
 import {
   advancedSearchPath,
   entitiesPath,
@@ -36,10 +39,7 @@ import {
   triggersPath,
   userPath,
   usersPath,
-} from "Routes";
-import { SearchBox } from "components/common/SearchBox";
-import { useSimpleSearch } from "hooks/useSimpleSearch";
-import { aironeApiClient } from "repository/AironeApiClient";
+} from "routes/Routes";
 import {
   JobOperations,
   JobRefreshIntervalMilliSec,

frontend/src/components/common/PageHeader.tsx

@@ -4,7 +4,7 @@ import { styled } from "@mui/material/styles";
 import React, { FC } from "react";
 import { Link } from "react-router-dom";
 
-import { jobsPath } from "Routes";
+import { jobsPath } from "routes/Routes";
 
 const Frame = styled(Box)({
   width: "100%",

frontend/src/components/common/index.ts

@@ -0,0 +1,15 @@
+export * from "./AironeBreadcrumbs";
+export * from "./AironeModal";
+export * from "./AironeTableHeadCell";
+export * from "./AironeTableHeadRow";
+export * from "./AutocompleteWithAllSelector";
+export * from "./ClipboardCopyButton";
+export * from "./Confirmable";
+export * from "./FlexBox";
+export * from "./ImportForm";
+export * from "./Loading";
+export * from "./PageHeader";
+export * from "./PaginationFooter";
+export * from "./RateLimitedClickable";
+export * from "./SearchBox";
+export * from "./SubmitButton";

frontend/src/components/entity/EntityBreadcrumbs.tsx

@@ -4,9 +4,9 @@ import { Typography } from "@mui/material";
 import React, { FC } from "react";
 import { Link } from "react-router-dom";
 
-import { topPath, entitiesPath, entityEntriesPath } from "Routes";
 import { AironeBreadcrumbs } from "components/common/AironeBreadcrumbs";
 import { FlexBox } from "components/common/FlexBox";
+import { topPath, entitiesPath, entityEntriesPath } from "routes/Routes";
 
 interface Props {
   entity?: EntityDetail;

frontend/src/components/entity/EntityControlMenu.tsx

@@ -12,6 +12,8 @@ import { Link, useNavigate } from "react-router-dom";
 
 import { RateLimitedClickable } from "../common/RateLimitedClickable";
 
+import { Confirmable } from "components/common/Confirmable";
+import { aironeApiClient } from "repository/AironeApiClient";
 import {
   aclPath,
   entityHistoryPath,
@@ -21,9 +23,7 @@ import {
   topPath,
   entityEntriesPath,
   aclHistoryPath,
-} from "Routes";
-import { Confirmable } from "components/common/Confirmable";
-import { aironeApiClient } from "repository/AironeApiClient";
+} from "routes/Routes";
 
 type ExportFormatType = "YAML" | "CSV";
 

frontend/src/components/entity/EntityList.tsx

@@ -6,9 +6,9 @@ import { Link } from "react-router-dom";
 
 import { EntityListCard } from "./EntityListCard";
 
-import { newEntityPath } from "Routes";
 import { PaginationFooter } from "components/common/PaginationFooter";
 import { SearchBox } from "components/common/SearchBox";
+import { newEntityPath } from "routes/Routes";
 import { EntityList as ConstEntityList } from "services/Constants";
 import { normalizeToMatch } from "services/StringUtil";
 

frontend/src/components/entity/EntityListCard.tsx

@@ -15,9 +15,9 @@ import { Link } from "react-router-dom";
 
 import { EntityControlMenu } from "./EntityControlMenu";
 
-import { entityEntriesPath } from "Routes";
 import { ClipboardCopyButton } from "components/common/ClipboardCopyButton";
 import { EntryImportModal } from "components/entry/EntryImportModal";
+import { entityEntriesPath } from "routes/Routes";
 
 const EntityNote = styled(Typography)(({ theme }) => ({
   color: theme.palette.text.secondary,

frontend/src/components/entity/entityForm/AttributeField.tsx

@@ -25,7 +25,7 @@ import { Link } from "react-router-dom";
 import { AttributeNoteModal } from "./AttributeNoteModal";
 import { Schema } from "./EntityFormSchema";
 
-import { aclPath } from "Routes";
+import { aclPath } from "routes/Routes";
 import { AttributeTypes } from "services/Constants";
 
 const StyledBox = styled(Box)(({ theme }) => ({

frontend/src/components/entity/index.ts

@@ -0,0 +1,4 @@
+// FIXME rethink export scope
+
+export * from "./EntityBreadcrumbs";
+export * from "./EntityControlMenu";

frontend/src/components/entry/AttributeValue.tsx

@@ -12,7 +12,7 @@ import * as React from "react";
 import { FC } from "react";
 import { Link } from "react-router-dom";
 
-import { groupsPath, rolePath, entryDetailsPath } from "Routes";
+import { groupsPath, rolePath, entryDetailsPath } from "routes/Routes";
 
 const StyledBox = styled(Box)(() => ({
   display: "flex",

frontend/src/components/entry/EntryBreadcrumbs.tsx

@@ -4,14 +4,14 @@ import { Typography } from "@mui/material";
 import React, { FC } from "react";
 import { Link } from "react-router-dom";
 
+import { AironeBreadcrumbs } from "components/common/AironeBreadcrumbs";
+import { FlexBox } from "components/common/FlexBox";
 import {
   topPath,
   entitiesPath,
   entityEntriesPath,
   entryDetailsPath,
-} from "Routes";
-import { AironeBreadcrumbs } from "components/common/AironeBreadcrumbs";
-import { FlexBox } from "components/common/FlexBox";
+} from "routes/Routes";
 
 interface Props {
   entry?: EntryRetrieve;

frontend/src/components/entry/EntryControlMenu.tsx

@@ -11,6 +11,8 @@ import { useSnackbar } from "notistack";
 import React, { FC } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
+import { Confirmable } from "components/common/Confirmable";
+import { aironeApiClient } from "repository/AironeApiClient";
 import {
   entryEditPath,
   aclPath,
@@ -20,9 +22,7 @@ import {
   topPath,
   entryDetailsPath,
   aclHistoryPath,
-} from "Routes";
-import { Confirmable } from "components/common/Confirmable";
-import { aironeApiClient } from "repository/AironeApiClient";
+} from "routes/Routes";
 
 interface EntryControlProps {
   entityId: number;

frontend/src/components/entry/EntryHistoryList.tsx

@@ -16,10 +16,10 @@ import { useNavigate } from "react-router-dom";
 
 import { AttributeValue } from "./AttributeValue";
 
-import { showEntryHistoryPath, topPath } from "Routes";
 import { Confirmable } from "components/common/Confirmable";
 import { PaginationFooter } from "components/common/PaginationFooter";
 import { aironeApiClient } from "repository/AironeApiClient";
+import { showEntryHistoryPath, topPath } from "routes/Routes";
 import { EntryHistoryList as ConstEntryHistoryList } from "services/Constants";
 import { formatDateTime } from "services/DateUtil";
 

frontend/src/components/entry/EntryList.tsx

@@ -5,13 +5,13 @@ import { Link, useNavigate, useLocation } from "react-router-dom";
 
 import { EntryListCard } from "./EntryListCard";
 
-import { newEntryPath } from "Routes";
 import { Loading } from "components/common/Loading";
 import { PaginationFooter } from "components/common/PaginationFooter";
 import { SearchBox } from "components/common/SearchBox";
 import { useAsyncWithThrow } from "hooks/useAsyncWithThrow";
 import { usePage } from "hooks/usePage";
 import { aironeApiClient } from "repository/AironeApiClient";
+import { newEntryPath } from "routes/Routes";
 import { EntryList as ConstEntryList } from "services/Constants";
 import { normalizeToMatch } from "services/StringUtil";
 

frontend/src/components/entry/EntryListCard.tsx

@@ -12,9 +12,9 @@ import { styled } from "@mui/material/styles";
 import React, { FC, useState } from "react";
 import { Link } from "react-router-dom";
 
-import { entryDetailsPath } from "Routes";
 import { ClipboardCopyButton } from "components/common/ClipboardCopyButton";
 import { EntryControlMenu } from "components/entry/EntryControlMenu";
+import { entryDetailsPath } from "routes/Routes";
 
 const StyledCard = styled(Card)(({}) => ({
   height: "100%",

frontend/src/components/entry/EntryReferral.tsx

@@ -18,8 +18,8 @@ import { aironeApiClient } from "../../repository/AironeApiClient";
 import { EntryReferralList } from "../../services/Constants";
 import { normalizeToMatch } from "../../services/StringUtil";
 
-import { entryDetailsPath } from "Routes";
 import { SearchBox } from "components/common/SearchBox";
+import { entryDetailsPath } from "routes/Routes";
 
 const ReferralCount = styled(Typography)(({}) => ({
   fontSize: "16px",

frontend/src/components/entry/RestorableEntryList.tsx

@@ -24,14 +24,14 @@ import { useNavigate, useLocation } from "react-router-dom";
 
 import { EntryAttributes } from "./EntryAttributes";
 
-import { restoreEntryPath, topPath } from "Routes";
 import { Confirmable } from "components/common/Confirmable";
 import { Loading } from "components/common/Loading";
 import { PaginationFooter } from "components/common/PaginationFooter";
 import { SearchBox } from "components/common/SearchBox";
 import { useAsyncWithThrow } from "hooks/useAsyncWithThrow";
 import { usePage } from "hooks/usePage";
 import { aironeApiClient } from "repository/AironeApiClient";
+import { restoreEntryPath, topPath } from "routes/Routes";
 import { EntryList as ConstEntryList } from "services/Constants";
 import { formatDateTime } from "services/DateUtil";
 import { normalizeToMatch } from "services/StringUtil";

frontend/src/components/entry/SearchResults.tsx

@@ -21,9 +21,9 @@ import { Link } from "react-router-dom";
 
 import { SearchResultsTableHead } from "./SearchResultsTableHead";
 
-import { entryDetailsPath } from "Routes";
 import { PaginationFooter } from "components/common/PaginationFooter";
 import { AttributeValue } from "components/entry/AttributeValue";
+import { entryDetailsPath } from "routes/Routes";
 import { AdvancedSerarchResultList } from "services/Constants";
 import { AttrsFilter } from "services/entry/AdvancedSearch";
 

frontend/src/components/entry/index.ts

@@ -0,0 +1,10 @@
+// FIXME rethink export scope
+
+export * from "./CopyForm";
+export * from "./EntryBreadcrumbs";
+export * from "./EntryControlMenu";
+export * from "./EntryImportModal";
+export * from "./EntryListCard";
+
+export * from "./entryForm/EntryFormSchema";
+export * from "./entryForm/AttributeValueField";

frontend/src/components/group/GroupControlMenu.tsx

@@ -11,9 +11,9 @@ import { useSnackbar } from "notistack";
 import React, { FC, useCallback } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
-import { groupPath, groupsPath, topPath } from "Routes";
 import { Confirmable } from "components/common/Confirmable";
 import { aironeApiClient } from "repository/AironeApiClient";
+import { groupPath, groupsPath, topPath } from "routes/Routes";
 
 interface Props {
   groupId: number;

frontend/src/components/group/GroupTreeItem.tsx

@@ -3,8 +3,8 @@ import { Checkbox, IconButton, ListItem, Typography } from "@mui/material";
 import React, { FC } from "react";
 import { Link } from "react-router-dom";
 
-import { groupPath } from "../../Routes";
 import { GroupTree } from "../../repository/AironeApiClient";
+import { groupPath } from "../../routes/Routes";
 import { ServerContext } from "../../services/ServerContext";
 
 const CHILDREN_INDENT_WIDTH = 16;

frontend/src/components/group/GroupTreeRoot.tsx

@@ -10,8 +10,8 @@ import { styled } from "@mui/material/styles";
 import React, { FC } from "react";
 import { Link } from "react-router-dom";
 
-import { groupPath } from "../../Routes";
 import { GroupTree } from "../../repository/AironeApiClient";
+import { groupPath } from "../../routes/Routes";
 import { ServerContext } from "../../services/ServerContext";
 
 import { GroupTreeItem } from "./GroupTreeItem";

frontend/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from "./acl";
+export * from "./common";
+export * from "./entity";
+export * from "./entry";

frontend/src/components/job/JobList.tsx

@@ -15,8 +15,8 @@ import { styled } from "@mui/material/styles";
 import React, { FC, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
-import { entityEntriesPath } from "../../Routes";
 import { aironeApiClient } from "../../repository/AironeApiClient";
+import { entityEntriesPath } from "../../routes/Routes";
 import { JobOperations, JobStatuses } from "../../services/Constants";
 import { formatDateTime } from "../../services/DateUtil";
 import { jobOperationLabel, jobStatusLabel } from "../../services/JobUtil";

frontend/src/components/role/RoleList.tsx

@@ -25,7 +25,7 @@ import { aironeApiClient } from "../../repository/AironeApiClient";
 import { Confirmable } from "../common/Confirmable";
 import { Loading } from "../common/Loading";
 
-import { rolePath, rolesPath, topPath } from "Routes";
+import { rolePath, rolesPath, topPath } from "routes/Routes";
 
 const StyledList = styled(List)(() => ({
   padding: "0",