Make the frontend a module for customview

.github/workflows/build-frontend.yml

@@ -51,6 +51,8 @@ jobs:
           NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
       - name: build
         run: npm run build:development
+      - name: build(library)
+        run: npm run build:lib
   test:
     runs-on: ubuntu-latest
     permissions:

.github/workflows/release-pagoda-core.yml

@@ -0,0 +1,37 @@
+name: Release pagoda-core npm package for custom views to GitHub npm Registry
+
+on:
+  push:
+    tags:
+      # NOTE it should be pagoda-core-<major>.<minor>.<patch>
+      - 'pagoda-core-*'
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://npm.pkg.github.com/
+          scope: "@dmm-com"
+      - name: Get tag name
+        id: get_tag
+        run: echo "tag=${GITHUB_REF#refs/tags/pagoda-core-}" >> $GITHUB_OUTPUT
+      - name: Set version
+        run: |
+          npm version "${GITHUB_REF#refs/tags/pagoda-core-}" --no-git-tag-version
+      - name: Install dependencies
+        run: npm ci
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
+      - name: Build library
+        run: npm run build:lib
+      - name: Publish package
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

.gitignore

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

docs/content/getting_started/development.md

@@ -264,7 +264,7 @@ user@hostname:~/pagoda$ source virtualenv/bin/activate
 (virtualenv) user@hostname:~/pagoda$ celery -A airone worker -l info
 ```
 
-## [Experimental] Build the new UI with React
+## Build the new UI with React
 
 `/ui/` serves React-based new UI. Before you try it, you need to build `ui.js`:
 
@@ -366,3 +366,14 @@ When you want to run individual test (e.g. frontend/src/components/user/UserList
 ```
 user@hostname:~/pagoda$ npx jest -u frontend/src/components/user/UserList.test.tsx
 ```
+
+## Release pagoda-core package for custom views
+
+We publish the `pagoda-core` package to GitHub npm Registry for custom views.
+When you want to release a new version of the package, create a tag with the format `pagoda-core-x.y.z` (e.g. `pagoda-core-0.0.1`). The GitHub Actions workflow will automatically build and publish the package.
+
+If you hope to try building the module:
+
+```sh
+$ npm run build:lib
+```

frontend/src/ErrorHandler.tsx

@@ -9,7 +9,6 @@ import {
 import { styled } from "@mui/material/styles";
 import React, { FC, useCallback, useEffect, useState } from "react";
 import { ErrorBoundary, FallbackProps } from "react-error-boundary";
-import { useNavigate } from "react-router-dom";
 import { useError } from "react-use";
 
 import { ForbiddenErrorPage } from "./pages/ForbiddenErrorPage";
@@ -46,16 +45,15 @@ interface GenericErrorProps {
 }
 
 const GenericError: FC<GenericErrorProps> = ({ children }) => {
-  const navigate = useNavigate();
   const [open, setOpen] = useState(true);
 
   const handleGoToTop = useCallback(() => {
-    navigate(topPath(), { replace: true });
-  }, [navigate]);
+    window.location.href = topPath();
+  }, []);
 
   const handleReload = useCallback(() => {
-    navigate(0);
-  }, [navigate]);
+    window.location.reload();
+  }, []);
 
   return (
     <Dialog open={open} onClose={() => setOpen(false)}>

frontend/src/components/acl/index.ts

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

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/index.ts

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

frontend/src/components/entry/index.ts

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

frontend/src/components/index.ts

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

frontend/src/hooks/index.ts

@@ -0,0 +1,7 @@
+export * from "./useAsyncWithThrow";
+export * from "./useFormNotification";
+export * from "./usePage";
+export * from "./usePrompt";
+export * from "./useSimpleSearch";
+export * from "./useTranslation";
+export * from "./useTypedParams";

frontend/src/i18n/index.ts

@@ -0,0 +1 @@
+export * from "./config";

frontend/src/index.ts

@@ -0,0 +1,10 @@
+export * from "./AppBase";
+
+export * from "./components";
+export * from "./hooks";
+export * from "./i18n";
+export * from "./pages";
+export * from "./repository";
+export * from "./routes";
+export * from "./services";
+export * from "./TestWrapper";

frontend/src/pages/index.ts

@@ -0,0 +1,9 @@
+// FIXME rethink export scope
+
+export * from "./EntryCopyPage";
+export * from "./EntryDetailsPage";
+export * from "./EntryEditPage";
+export * from "./EntryHistoryListPage";
+export * from "./EntryListPage";
+
+export * from "./UnavailableErrorPage";

frontend/src/repository/index.ts

@@ -0,0 +1,2 @@
+export * from "./AironeApiClient";
+export * from "./LocalStorageUtil";

frontend/src/routes/index.ts

@@ -0,0 +1,2 @@
+export * from "./AppRouter";
+export * from "./Routes";

frontend/src/services/index.ts

@@ -0,0 +1,7 @@
+export * from "./AironeAPIErrorUtil";
+export * from "./Constants";
+export * from "./DateUtil";
+export * from "./JobUtil";
+export * from "./ServerContext";
+export * from "./StringUtil";
+export * from "./ZodSchemaUtil";