From 91675906151db8a9735e440b48bf3c1d90209594 Mon Sep 17 00:00:00 2001
From: Rida Abou-Haidar <rida.abou-haidar@mcin.ca>
Date: Thu, 10 Oct 2024 13:33:56 -0400
Subject: [PATCH 1/2] added loadingbar and incorporated into the
 filterabledatatable

remove CBIGR override comments

added typescripting

trying to pass validation

passing checks

added progress to proptypes
---
 jsx/FilterableDataTable.js | 13 ++++-----
 jsx/LoadingBar.tsx         | 56 ++++++++++++++++++++++++++++++++++++++
 webpack.config.ts          |  1 +
 3 files changed, 63 insertions(+), 7 deletions(-)
 create mode 100644 jsx/LoadingBar.tsx

diff --git a/jsx/FilterableDataTable.js b/jsx/FilterableDataTable.js
index be3cb26adeb..8418c2e87bd 100644
--- a/jsx/FilterableDataTable.js
+++ b/jsx/FilterableDataTable.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import Panel from 'jsx/Panel';
 import DataTable from 'jsx/DataTable';
 import Filter from 'jsx/Filter';
+import LoadingBar from 'jsx/LoadingBar';
 
 /**
  * FilterableDataTable component.
@@ -35,7 +36,6 @@ class FilterableDataTable extends Component {
 
   /**
    * Updates filter state
-   *
    * @param {object} filters
    */
   updateFilters(filters) {
@@ -48,7 +48,6 @@ class FilterableDataTable extends Component {
 
   /**
    * Updates URL Query Params
-   *
    * @param {object} filters
    */
   updateQueryParams(filters) {
@@ -66,7 +65,6 @@ class FilterableDataTable extends Component {
 
   /**
    * Add new filter to the filter object
-   *
    * @param {string} name
    * @param {*}      value
    * @param {boolean}   exactMatch
@@ -79,7 +77,6 @@ class FilterableDataTable extends Component {
 
   /**
    * Remove filter from the filter object
-   *
    * @param {string} name
    */
   removeFilter(name) {
@@ -99,7 +96,6 @@ class FilterableDataTable extends Component {
    * Returns the filter state, with filters that are
    * set to an invalid option removed from the returned
    * filters
-   *
    * @return {object}
    */
   validFilters() {
@@ -129,7 +125,6 @@ class FilterableDataTable extends Component {
 
   /**
    * Renders the React component.
-   *
    * @return {JSX} - React markup for the component
    */
   render() {
@@ -149,7 +144,10 @@ class FilterableDataTable extends Component {
       />
     );
 
-    const dataTable = (
+    const {progress} = this.props;
+    const dataTable = !isNaN(progress) && progress < 100 ? (
+      <LoadingBar progress={progress}/>
+    ) : (
       <DataTable
         data={this.props.data}
         fields={this.props.fields}
@@ -191,6 +189,7 @@ FilterableDataTable.propTypes = {
   updateFilterCallback: PropTypes.func,
   noDynamicTable: PropTypes.bool,
   loading: PropTypes.element,
+  progress: PropTypes.number,
   getMappedCell: PropTypes.func,
   folder: PropTypes.element,
   nullTableShow: PropTypes.element,
diff --git a/jsx/LoadingBar.tsx b/jsx/LoadingBar.tsx
new file mode 100644
index 00000000000..5d05b90af97
--- /dev/null
+++ b/jsx/LoadingBar.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+interface LoadingBarProps {
+  progress: number; // Expect progress to be a number
+}
+
+/**
+ * LoadingBar is a React component that displays a progress bar to indicate
+ * loading status.
+ *
+ * @param {number} progress - A number representing the loading progress (0 to
+ * 100).
+ *
+ * @returns {JSX.Element|null} - Returns a Loading Bar React component if
+ * progress is valid, otherwise null.
+ */
+const LoadingBar: React.FC<LoadingBarProps> = ({progress}) => {
+  const wrapperStyle: React.CSSProperties = {
+    margin: '50px 0',
+  };
+
+  const containerStyles: React.CSSProperties = {
+    height: '5px',
+    backgroundColor: '#e0e0de',
+    borderRadius: '50px',
+    overflow: 'hidden',
+  };
+
+  const fillerStyles: React.CSSProperties = {
+    height: '100%',
+    width: `${progress}%`,
+    backgroundColor: '#E89A0C',
+    borderRadius: 'inherit',
+    textAlign: 'right',
+    transition: 'width 1s linear',
+  };
+
+  const progressBar = progress >= 0 ? (
+    <div
+      style={wrapperStyle}
+      role="progressbar"
+      aria-valuenow={progress}
+      aria-valuemin={0}
+      aria-valuemax={100}
+    >
+      <h5 className="animate-flicker" aria-live="polite">Loading...</h5>
+      <div style={containerStyles}>
+        <div style={fillerStyles} />
+      </div>
+    </div>
+  ) : null;
+
+  return progressBar;
+};
+
+export default LoadingBar;
diff --git a/webpack.config.ts b/webpack.config.ts
index 1e350381bd5..8a3dcaf966a 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -133,6 +133,7 @@ const resolve: webpack.ResolveOptions = {
     FilterableDataTable: path.resolve(__dirname, './jsx/FilterableDataTable'),
     FilterForm: path.resolve(__dirname, './jsx/FilterForm'),
     Loader: path.resolve(__dirname, './jsx/Loader'),
+    LoadingBar: path.resolve(__dirname, './jsx/LoadingBar'),
     Modal: path.resolve(__dirname, './jsx/Modal'),
     MultiSelectDropdown: path.resolve(__dirname, './jsx/MultiSelectDropdown'),
     PaginationLinks: path.resolve(__dirname, './jsx/PaginationLinks'),

From eb2267f60408721e3170516afe5c8b2d780f689e Mon Sep 17 00:00:00 2001
From: Henri Rabalais <henri.j.rabalais@gmail.com>
Date: Sat, 26 Oct 2024 01:14:22 +0200
Subject: [PATCH 2/2] Update jsx/LoadingBar.tsx

Co-authored-by: Maxime Mulder <maxime-mulder@outlook.com>
---
 jsx/LoadingBar.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/jsx/LoadingBar.tsx b/jsx/LoadingBar.tsx
index 5d05b90af97..a03364b3ef6 100644
--- a/jsx/LoadingBar.tsx
+++ b/jsx/LoadingBar.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 
 interface LoadingBarProps {
-  progress: number; // Expect progress to be a number
+  // A number representing the progress of the progress bar, which should be
+  // between 0 and 100
+  progress: number;
 }
 
 /**