Adding pages via Extensions.

TapisUI features an extension architecture which allows configuration of the serverless environment via internal or external JS modules.

The following is an example of registering a new "Training Catalog" tab and supplying a simple div containing an iframe as the main component. https://github.com/tapis-project/tapis-ui/commit/1aea601e1dda74a0f0570d10e734f0b484793f57

To explain, above creates a Training Catalog page folder with an index.ts and TrainingCatalog.tsx folder. This defines the page content. This page is then registered and given a sidebar tab in packages/icicle-tapisui-extension/src/index.ts. View that file to see more examples of registering pages. After that, you should be able to use the Training Catalog page folder to define components, hooks, whatever you might need to fulfill the grandest react desires.

Locally, users running npm run dev after npm run init-project (you only have to do this once) should have hot-reloading capability, allowing for a live-editing development environment. If you haven't messed much with React/Typescript and have mimiced the commit, you next course of action is to change what is in the div. Study components in the current TapisUI implementation and try not to add too many new libraries.

We use MUI, QueryWrapper, and Formik for most things. Ask a dev if you want guidance. This repo has a lot of good examples. Currently the Pods service and Workflows service are the most "up to date" in terms of code.

The following is the result of the commit above. Marked in red is the tab added in the commit along with the page view of the iframe there.