Initial commit - using react with APCD admin registration list page

[chandra-tacc]

Overview

The goal is to use react components in APCD custom pages.

The react setup is as follows:

• A client that generates a lib of APCD components.
• Requests to backend are made through fetchUtil (similar to core portal client)
• The entry point provides setup function to render the component
• The client includes TUP components.
• Docker uses build_client script to build and copy artifact (closely following core portal build process)
• The template file includes the lib file and sets up the relevant component.

Steps for each APCD page

• Create a component in client

• Include the component in library.tsx and add a setup method to render the component in library.tsx

• Add react-root in template html

• Adjust the template html to import and render the component

• Looking for feedback or ideas on the following:

  • Whether this multi-page react app approach is accurate.
  • Client structure - lib with component setup method.
  • vite usage.

Related

WP-476

Changes

• Change the django view to serialize the content in json
• Create top level client folder.
• Add package.json, vite and tsconfig related file. Note: Vite hmr usage is not setup yet.
• Add tup-components, hooks, components, utils in client
• Copy TUP-components from TUP Repo
• Add components/Admin/Registrations/AdminRegistrations.tsx for Admin Table
• Add hooks/admin/useAdmin.ts for admin registration listing.
• Add util/fetchUtil.js to handle server requests.
• Add library.tsx to provide entry point for using in template.

Missing

• unit test setup is not done.
• Cache busting and vite local dev setup is not done.
• whether to generate umd file or not
• Admin registration table feature is not complete. This is just first page.
• Any optimizations on react imports in django.

Testing

Visit http://localhost:8000/administration/list-registration-requests/

network request:

UI

Initial commit, trying not to modify UI. If styles are not matching, still working to get it to match.

[chandra-tacc]

Should this use Vite, like hazmapper React and tup-ui? @jarosenb is the progenitor of it at TACC, I think.

It is using vite (see package.json). I did not set it up for hmr yet. Will work on it once we all agree on this approach.

[wesleyboar]

Vite. Whoops, I missed it. Cool.

Also, me typo: shared-components → common-components core-components

[chandra-tacc]

Vite. Whoops, I missed it. Cool.

Also, me typo: shared-components → ~common-components~ core-components

Done renamed