Merge pull request #146 from AdamNowotny/react-bootstrap

Upgrade to latest React bootstrap
AdamNowotny · Aug 29, 2024 · ae16019 · ae16019
2 parents 9d9b031 + ae7269f
commit ae16019
Show file tree

Hide file tree

Showing 56 changed files with 1,419 additions and 1,162 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,27 +32,30 @@
         "test:watch": "vitest"
     },
     "dependencies": {
-        "bootstrap": "3.4.1",
+        "bootstrap": "^5.3.3",
+        "events": "^3.3.0",
         "font-awesome": "4.7.0",
         "globals": "15.9.0",
-        "react-bootstrap": "^0.33.1",
+        "react-bootstrap": "^2.10.4",
         "react-router-dom": "^6.26.1",
         "rx": "4.1.0",
         "xml2js": "0.6.2"
     },
     "devDependencies": {
-        "@eslint/js": "9.9.0",
+        "@eslint/js": "^9.9.1",
         "@types/chrome": "0.0.270",
         "@types/eslint__js": "^8.42.3",
-        "@types/react": "^18.3.3",
+        "@types/react": "^18.3.4",
         "@types/react-dom": "^18.3.0",
         "@types/rx": "^4.1.4",
+        "@types/xml2js": "^0.4.14",
         "@vitejs/plugin-react": "^4.3.1",
-        "eslint": "^9.9.0",
+        "eslint": "^9.9.1",
         "eslint-plugin-react": "^7.35.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "rollup-plugin-copy": "^3.5.0",
+        "stream-browserify": "^3.0.0",
         "typescript": "^5.5.4",
         "typescript-eslint": "^8.2.0",
         "vite": "^5.4.2",

diff --git a/src/common/__mocks__/core.mock.activeProjects.js b/src/common/__mocks__/core.mock.activeProjects.js
@@ -23,7 +23,13 @@ export default [
                 isBroken: true,
                 url: 'http://ci.openmrs.org/browse/FUNC-PERF-4',
                 isRunning: false,
-                tags: [{ name: 'Unstable', type: 'warning' }],
+                tags: [
+                    {
+                        name: 'Unstable',
+                        type: 'warning',
+                        description: 'The build was marked as unstable',
+                    },
+                ],
                 changes: [
                     {
                         name: 'Adam',
@@ -68,9 +74,10 @@ export default [
             },
             {
                 id: '6',
-                name: 'Unstable',
+                name: 'Unstable waiting',
                 group: 'Building',
                 isBroken: true,
+                isWaiting: true,
                 url: 'http://ci.openmrs.org/browse/FUNC-PERF-4',
                 isRunning: true,
                 tags: [{ name: 'Unstable', type: 'warning' }],

diff --git a/src/common/_angular-ui.scss b/src/common/_angular-ui.scss
diff --git a/src/common/core.ts b/src/common/core.ts
@@ -1,4 +1,3 @@
-/// <reference types="chrome"/>
 import 'rx/dist/rx.binding';
 import Rx from 'rx';
 import logger from './logger';

diff --git a/src/components/dashboardTheme.tsx b/src/components/dashboardTheme.tsx
diff --git a/src/components/dynamicForm/dynamicForm.css b/src/components/dynamicForm/dynamicForm.css
@@ -3,7 +3,7 @@
     button {
         margin: 5px;
         i {
-            padding-right: 5px;
+            padding-right: 10px;
         }
     }
 }
diff --git a/src/components/dynamicForm/dynamicForm.tsx b/src/components/dynamicForm/dynamicForm.tsx
@@ -17,15 +17,15 @@ export default ({
     onSave,
 }: {
     service: CIServiceSettings;
-    onShow?: (pipelines: CIPipelineList) => void;
-    onSave: (service: CIServiceSettings) => void;
+    onShow?: (pipelines: CIPipelineList, settings: CIServiceSettings) => void;
+    onSave?: (service: CIServiceSettings) => void;
 }) => {
     const [error, setError] = useState<WorkerError>();
     let updatedService = { ...service };
     const serviceTypes = useContext(ServiceTypesContext);
-    const serviceDefinition = serviceTypes.find(
-        definition => definition.baseUrl === service.baseUrl,
-    );
+    const serviceFields =
+        serviceTypes.find(definition => definition.baseUrl === service.baseUrl)?.fields ??
+        [];
     const [isLoading, setIsLoading] = useState<boolean>(false);
 
     const handleShow = () => {
@@ -36,29 +36,30 @@ export default ({
                 setError(error);
             } else {
                 setError(undefined);
-                if (onShow) onShow(pipelines);
+                if (onShow) onShow(pipelines, updatedService);
             }
         });
     };
     const handleSave = () => {
-        onSave(updatedService);
+        if (onSave) onSave(updatedService);
     };
     return (
-        <Form horizontal className="settings-form" key={updatedService.name}>
-            {serviceDefinition?.fields.map(field => (
-                <ServiceDefinitionField
-                    key={field.name}
-                    service={updatedService}
-                    field={field}
-                    onChange={service => {
-                        updatedService = service;
-                    }}
-                />
-            ))}
+        <Form className="settings-form" key={updatedService.name}>
+            {serviceFields.map(field => {
+                return (
+                    <ServiceDefinitionField
+                        key={field.type}
+                        service={updatedService}
+                        field={field}
+                        onChange={service => {
+                            updatedService = service;
+                        }}
+                    />
+                );
+            })}
             <div className="settings-buttons">
                 <button type="button" className="btn btn-primary" onClick={handleShow}>
-                    <i className={`fa fa-refresh ${isLoading ? 'fa-spin' : ''}`}></i>
-                    Show
+                    <i className={`fa fa-refresh ${isLoading ? 'fa-spin' : ''}`}></i>Show
                 </button>
                 <button type="button" className="btn btn-success" onClick={handleSave}>
                     <i className="fa fa-save"></i>Save
@@ -125,7 +126,7 @@ const ServiceDefinitionField = ({
             )}
             {field.type === 'token' && (
                 <FormInputField
-                    text={field.name ?? ''}
+                    text={service.token ?? ''}
                     onChange={value => {
                         changeField(field.config ?? 'token', value);
                     }}
@@ -136,7 +137,7 @@ const ServiceDefinitionField = ({
             )}
             {field.type === 'username' && (
                 <FormInputField
-                    text={field.name ?? ''}
+                    text={service.username ?? ''}
                     onChange={value => {
                         changeField(field.config ?? 'username', value);
                     }}
@@ -147,7 +148,7 @@ const ServiceDefinitionField = ({
             )}
             {field.type === 'password' && (
                 <FormInputField
-                    text={field.name ?? ''}
+                    text={service.password ?? ''}
                     onChange={value => {
                         changeField(field.config ?? 'password', value);
                     }}
@@ -158,7 +159,7 @@ const ServiceDefinitionField = ({
             )}
             {field.type === 'branch' && (
                 <FormInputField
-                    text={field.name ?? ''}
+                    text={service.branch ?? ''}
                     onChange={value => {
                         changeField(field.config ?? 'branch', value);
                     }}

diff --git a/src/components/filterQuery/filterQuery.css b/src/components/filterQuery/filterQuery.css
@@ -1,21 +1,8 @@
 .filter-query {
-    box-sizing: border-box;
-    height: 30px;
-    margin: 0 20px 5px 0;
-    position: relative;
-    width: 100%;
-    input {
-        box-sizing: border-box;
-        height: 30px;
-        left: 0;
-        position: absolute;
-        width: 100%;
-    }
-
-    i {
+    i.reset-icon {
         cursor: pointer;
         position: absolute;
-        right: 3px;
-        top: 2px;
+        right: 15px;
+        top: 4px;
     }
 }
diff --git a/src/components/filterQuery/filterQuery.tsx b/src/components/filterQuery/filterQuery.tsx
@@ -1,35 +1,41 @@
 import React, { useState } from 'react';
 import './filterQuery.css';
+import { Form } from 'react-bootstrap';
 
 export default ({ onUpdate }: { onUpdate: (string) => void }) => {
     const [query, setQuery] = useState('');
+
+    const updateQuery = value => {
+        setQuery(value);
+        onUpdate(value);
+    };
+
     const handleKeyDown = e => {
         if (e.key === 'Escape') {
             e.preventDefault();
-            setQuery('');
+            updateQuery('');
         }
     };
     const handleChange = e => {
         const value = e.target.value;
-        setQuery(value);
-        onUpdate(value);
+        updateQuery(value);
     };
 
     return (
-        <div className="filter-query">
-            <input
+        <div className="filter-query mb-2">
+            <Form.Control
+                className="search-query"
                 value={query}
-                className="search-query form-control"
                 type="text"
                 placeholder="Search..."
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
             />
             {query && (
                 <i
-                    className="fa fa-times-circle-o fa-2x"
+                    className="reset-icon fa fa-times-circle-o fa-2x"
                     onClick={() => {
-                        setQuery('');
+                        updateQuery('');
                     }}
                 ></i>
             )}