Egress App Front-End

• Egress App Front-End
  • Deployment Instructions
  • Operational Instructions
  • Egress Frontend Solution
    • App.js
    • components/egress/EgressRequestList.js
    • components/egress/columnHeaders.js
    • components/topBar/Topbar.jsx
    • graphql
  • GraphQL Schema Change
  • Component Libraries
  • Learn More
    • Code Splitting
    • Analyzing the Bundle Size
    • Making a Progressive Web App
    • Advanced Configuration
    • Deployment
    • npm build fails to minify

The Egress web application is an add-on solution that enables management of data egress requests from the Trusted Research Environment (TRE).

The front-end is a single page web application built with React.

Deployment Instructions

Follow these instructions to deploy the Egress App Frontend.

Operational Instructions

Follow these instructions to operate the Egress App Frontend.

Egress Frontend Solution

---

The source code for the egress app frontend contains all the JavaScript, HTML, and GraphQL code required to build and deploy the application.

Scripts and folders of importance:

App.js

The root of the application which provides the entry point for all the components and where top level imports are defined.

components/egress/EgressRequestList.js

This file contains the code required to render the egress requests in the form of a table, while providing sort and search capabilities. On render, the script makes an API call to AWS AppSync to fetch the egress requests from the database. The script also interacts with another API to allow for download of egress request objects.

To render webpage components such as the table, buttons, and modals, the React library called Material Design for Boostrap is utilised.

components/egress/columnHeaders.js

Column headers of the egress request table are predefined here.

Note: To add/remove headers rendered on the page, you can modify this file

components/topBar/Topbar.jsx

This file contains the code to render the top header bar on the page which contains the application title.

graphql

This folder contains all of the graphql scripts and components to interact with the AppSync API. The schema.graphql contains the schema definition of the API

The mutations.js and queries.js scripts contain the GraphQL code, which the webapp uses to fetch or modify data from the API.

GraphQL Schema Change

Note: This requires installation of Amplify CLI - instructions

1. Any changes to the GraphQL schema should be made inside egress_backend/graphql/schema.graphql in the backend.
2. Remove any existing files inside src/graphql/schema.graphql in the frontend.
3. Copy the schema.graphql from the backend to src/graphql/schema.graphql in the frontend.
4. Run the command amplify add codegen in src/graphql to generate the updated models for the frontend client to use.
5. You should see updated queries.js and mutations.js files in the same location.

Component Libraries

---

This project was bootstrapped with Create React App.

Learn More

---

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

To learn about code splitting, view this guidance

Analyzing the Bundle Size

To learn about analysing the bundle size, view this guidance

Making a Progressive Web App

To learn about making a progressive web app, view this guidance

Advanced Configuration

To learn about advanced configurations, view this guidance

Deployment

To learn about deployments, view this guidance

npm build fails to minify

To troubleshoot issues when npm build fails to minify, view this guidance