Skip to content

React Components Deep Dive

Explore the intricacies of the React components that power the user interface of the Trustworthy and Ethical Assurance (TEA) Platform. This exploration delves into the custom-built and modular components that form the backbone of the platform's frontend, shedding light on their properties (props), internal states, and functional roles. Gain insights into the contribution of each component towards crafting a seamless and intuitive user experience, and understand the mechanics behind the platform's operational flow.

Each component is meticulously designed to fulfill specific functions within the TEA Platform, from case creation and selection to detailed visualization and editing. Together, they embody the platform's commitment to making assurance case management an accessible, transparent, and collaborative process.

Warning

This section is a work in progress and will be updated with detailed information about the React components in the TEA Platform frontend, pending docstring writing and code review.

Routes

The Routes component acts as the central dispatcher for the application's various screens or views. It listens to changes in the browser's URL and mounts the appropriate React component that corresponds to the current route. This mechanism is crucial for the TEA Platform, allowing users to navigate between different parts of the application—such as creating a new assurance case, viewing a list of cases, or editing a specific case—without the traditional overhead associated with full-page refreshes.

CaseContainer

Serves as the primary container for displaying and interacting with an assurance case. It integrates various components like MermaidChart, ItemEditor, and CaseTopBar to provide a comprehensive view and editing capabilities of an assurance case.

CaseCreator and CaseCreatorFlow

These components manage the creation of new assurance cases. Users can either start from scratch or use predefined templates to define the structure and content of their assurance cases.

CommentSection

Facilitates adding, viewing, and managing comments within an assurance case. It encourages collaborative review and feedback among users.

CreateGroup

Enables users to create new user groups for managing access and permissions across different assurance cases, fostering collaborative environments.

DeleteCaseModal and DeleteItemModal

These modals handle the deletion of assurance cases and individual items within a case, ensuring users are aware of the irreversible nature of this action through confirmatory prompts.

ExportCaseModal

Provides functionality for exporting assurance cases in various formats, supporting the sharing and external review of cases.

ManageCases

Acts as the dashboard for users to access, manage, and create new assurance cases. It includes quick access to import, create, and view existing cases.

The navigation bar at the top of the platform, offering easy access to the main sections of the application, GitHub repository, and user authentication actions.

Splash and Home

Splash serves as the landing page for new or unauthenticated users, guiding them through login or case creation. Home transitions authenticated users to the ManageCases view, signifying entry into the case management dashboard.