Fix for Auto-Recover being invasive

- Add `Buildable` interface
- Add the `Hidable` abstract class for hiding elements
- Add the `ButtonBuilder` for building custom buttons
- Add the `AlertBuilder` abstract class for creating alerts, as well as a number of specific Alert types that can be built using this class
- Prevent alert showing when not on record pages
- Prevent modal showing when other alerts have values
- Reword values in alert and modal
- Update modal to show fields being changed

Author: droberts-ctrlo

src/frontend/components/alert/lib/alertBase.ts

@@ -0,0 +1,43 @@
+import { Hidable, Renderable } from 'util/renderable';
+import { AlertType } from './types';
+
+export abstract class AlertBase extends Hidable implements Renderable<HTMLDivElement> {
+    /**
+     * Create an instance of AlertBase.
+     * This class serves as a base for alert components.
+     * It implements the Renderable interface, which requires a render method.
+     * The render method should be implemented by subclasses to provide specific rendering logic.
+     * @implements {Renderable<HTMLDivElement>}
+     * @param {string} message - The message to be displayed in the alert.
+     * @param {AlertType} type - The type of alert, which determines its styling and behavior.
+     * @see Renderable
+     * @see Hidable
+     * @see AlertType
+     * @example
+     * const alert = new AlertBase('This is an alert message', AlertType.INFO);
+     * document.body.appendChild(alert.render());
+     */
+    constructor(private readonly message: string, private readonly type: AlertType, private readonly transparent: boolean = false) {
+        super();
+    }
+
+    /**
+     * Render the alert as an HTMLDivElement.
+     * @returns {HTMLDivElement} The rendered HTML element representing the alert.
+     */
+    render(): HTMLDivElement {
+        if(this.element) throw new Error('AlertBase.render() should not be called multiple times without resetting the element.');
+        const alertDiv = document.createElement('div');
+        alertDiv.classList.add('alert', `alert-${this.type}`);
+        if(this.transparent) {
+            alertDiv.classList.add('alert-no-bg');
+        }
+        for(const item of this.message.split('\n')) {
+            const pDiv = document.createElement('p');
+            pDiv.textContent = item;
+            alertDiv.appendChild(pDiv);
+        }
+        this.element = alertDiv;
+        return alertDiv;
+    }
+}

src/frontend/components/alert/lib/dangerAlert.test.ts

@@ -0,0 +1,18 @@
+import { describe, it, expect } from '@jest/globals';
+import { DangerAlert } from './dangerAlert';
+
+describe('Error Alert Tests', () => {
+    it('should display an error alert with the correct message', () => {
+        const errorMessage = 'This is a test error message';
+        const errorAlert = new DangerAlert(errorMessage);
+
+        const alert = errorAlert.render();
+        
+        document.body.appendChild(alert);
+
+        expect(alert.classList.contains('alert-danger')).toBeTruthy();
+        expect(alert.textContent).toContain(errorMessage);
+
+        document.body.removeChild(alert);
+    });
+});

src/frontend/components/alert/lib/dangerAlert.ts

@@ -0,0 +1,17 @@
+import { AlertBase } from "./alertBase";
+
+export class DangerAlert extends AlertBase {
+    /**
+     * Create an instance of InfoAlert.
+     * This class extends AlertBase to provide a specific implementation for info alerts.
+     * It uses the 'info' alert type for styling and behavior.
+     * @class
+     * @public
+     * @memberof alert.lib
+     * @constructor
+     * @param {string} message - The message to be displayed in the alert.
+     */
+    constructor(message: string) {
+        super(message, 'danger');
+    }
+}

src/frontend/components/alert/lib/infoAlert.test.ts

@@ -0,0 +1,18 @@
+import { describe, it, expect } from '@jest/globals';
+import { InfoAlert } from './infoAlert';
+
+describe('Info Alert Tests', () => {
+    it('should display an info alert with the correct message', () => {
+        const infoMessage = 'This is a test info message';
+        const infoAlert = new InfoAlert(infoMessage);
+        
+        const alert = infoAlert.render();
+
+        document.body.appendChild(alert);
+
+        expect(alert.classList.contains('alert-info')).toBeTruthy();
+        expect(alert.textContent).toContain(infoMessage);
+
+        document.body.removeChild(alert);
+    });
+});

src/frontend/components/alert/lib/infoAlert.ts

@@ -0,0 +1,17 @@
+import { AlertBase } from './alertBase';
+
+export class InfoAlert extends AlertBase {
+    /**
+     * Create an instance of InfoAlert.
+     * This class extends AlertBase to provide a specific implementation for info alerts.
+     * It uses the AlertType.INFO to set the alert type.
+     * @class
+     * @public
+     * @memberof alert.lib
+     * @constructor
+     * @param {string} message - The message to be displayed in the info alert.
+     */
+    constructor(message: string) {
+        super(message, "info");
+    }
+}

src/frontend/components/alert/lib/successAlert.test.ts

@@ -0,0 +1,18 @@
+import { describe, it, expect } from '@jest/globals';
+import { SuccessAlert } from './successAlert';
+
+describe('Success Alert Tests', () => {
+    it('should create a success alert', () => {
+        const message = 'Operation completed successfully';
+        const alert = new SuccessAlert(message);
+
+        const result = alert.render();
+
+        document.body.appendChild(result);
+
+        expect(result.classList.contains('alert-success')).toBeTruthy();
+        expect(result.textContent).toBe(message);
+
+        document.body.removeChild(result);
+    });
+});

src/frontend/components/alert/lib/successAlert.ts

@@ -0,0 +1,17 @@
+import { AlertBase } from "./alertBase";
+
+export class SuccessAlert extends AlertBase {
+    /**
+     * Create an instance of InfoAlert.
+     * This class extends AlertBase to provide a specific implementation for info alerts.
+     * It uses the 'info' alert type for styling and behavior.
+     * @class
+     * @public
+     * @memberof alert.lib
+     * @constructor
+     * @param {string} message - The message to be displayed in the alert.
+     */
+    constructor(message: string) {
+        super(message, 'success', true);
+    }
+}

src/frontend/components/alert/lib/types/index.ts

@@ -0,0 +1 @@
+export type AlertType = 'info' | 'success' | 'warning' | 'danger';

src/frontend/components/alert/lib/warningAlert.test.ts

@@ -0,0 +1,18 @@
+import { describe, it, expect } from '@jest/globals';
+import { WarningAlert } from './warningAlert';
+
+describe('Warning Alert Tests', () => {
+    it('should create a warning alert', () => {
+        const message = 'This is a warning message';
+        const alert = new WarningAlert(message);
+
+        const result = alert.render();
+
+        document.body.appendChild(result);
+
+        expect(result.classList.contains('alert-warning')).toBe(true);
+        expect(result.textContent).toBe(message);
+
+        document.body.removeChild(result);
+    });
+});

src/frontend/components/alert/lib/warningAlert.ts

@@ -0,0 +1,17 @@
+import { AlertBase } from "./alertBase";
+
+export class WarningAlert extends AlertBase {
+    /**
+     * Create an instance of InfoAlert.
+     * This class extends AlertBase to provide a specific implementation for info alerts.
+     * It uses the AlertType.INFO to set the alert type.
+     * @class
+     * @public
+     * @memberof alert.lib
+     * @constructor
+     * @param {string} message - The message to be displayed in the info alert.
+     */
+    constructor(message: string) {
+        super(message, "warning");
+    }
+}