From b3dabe18cf093f38b5b9f83d5789592b8c7f5619 Mon Sep 17 00:00:00 2001
From: Adam Nowotny <adam.nowotny@protonmail.com>
Date: Thu, 29 Aug 2024 01:15:14 +0200
Subject: [PATCH] fix pipelineList and dynamicForm React state

---
 src/components/dynamicForm/dynamicForm.css   |  2 +-
 src/components/dynamicForm/dynamicForm.tsx   | 11 +++--
 src/components/pipelineList/pipelineList.tsx | 15 +++----
 src/options/pages/servicePage.tsx            | 43 +++++++++++---------
 4 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/src/components/dynamicForm/dynamicForm.css b/src/components/dynamicForm/dynamicForm.css
index 7e66a6ac..9b0c738d 100644
--- 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
index e8cb4891..e5e1e27b 100644
--- a/src/components/dynamicForm/dynamicForm.tsx
+++ b/src/components/dynamicForm/dynamicForm.tsx
@@ -23,9 +23,9 @@ export default ({
     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 = () => {
@@ -45,7 +45,7 @@ export default ({
     };
     return (
         <Form className="settings-form" key={updatedService.name}>
-            {serviceDefinition?.fields.map(field => {
+            {serviceFields.map(field => {
                 return (
                     <ServiceDefinitionField
                         key={field.type}
@@ -59,8 +59,7 @@ export default ({
             })}
             <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
diff --git a/src/components/pipelineList/pipelineList.tsx b/src/components/pipelineList/pipelineList.tsx
index 9e9db8a5..c00dfcb9 100644
--- a/src/components/pipelineList/pipelineList.tsx
+++ b/src/components/pipelineList/pipelineList.tsx
@@ -16,12 +16,12 @@ export default ({
     pipelines,
     filter,
     selectedItems = [],
-    onSelected,
+    onChanged,
 }: {
     pipelines?: CIPipelineList;
     filter?: string;
     selectedItems?: string[];
-    onSelected?: (selected: string[]) => void;
+    onChanged?: (selected: string[]) => void;
 }) => {
     if (!pipelines) return null;
     let updatedSelected = [...selectedItems];
@@ -35,11 +35,11 @@ export default ({
 
     const handleChanged = (id: string, checked: boolean) => {
         selectPipeline(id, checked);
-        if (onSelected) onSelected(updatedSelected);
+        if (onChanged) onChanged(updatedSelected);
     };
     const handleAllChanged = (ids: string[], checked: boolean) => {
         ids.forEach(id => selectPipeline(id, checked));
-        if (onSelected) onSelected(updatedSelected);
+        if (onChanged) onChanged(updatedSelected);
     };
     const groups = Map.groupBy(pipelines.items, ({ group }) => group ?? '');
     const groupNames: string[] = Array.from(groups.keys());
@@ -77,6 +77,7 @@ const GroupPanel = ({
     };
     const filteredItems = items.filter(filterFunc);
     if (filteredItems.length === 0) return null;
+
     const allVisibleChecked = filteredItems.every(item =>
         selectedItems.includes(item.id),
     );
@@ -99,7 +100,7 @@ const GroupPanel = ({
                     <Col xs="auto">
                         <Form.Check
                             type={'checkbox'}
-                            defaultChecked={allVisibleChecked}
+                            checked={allVisibleChecked}
                             onChange={checkAll}
                         />
                     </Col>
@@ -131,7 +132,7 @@ const GroupPanel = ({
                                         <Col sm="auto">
                                             <Form.Check
                                                 type={'checkbox'}
-                                                defaultChecked={isSelected}
+                                                checked={isSelected}
                                                 onChange={e => {
                                                     if (onChanged)
                                                         onChanged(
@@ -158,7 +159,7 @@ const GroupPanel = ({
                                                     Disabled
                                                 </Badge>
                                             )}
-                                        </Col>{' '}
+                                        </Col>
                                     </Row>
                                 </Form.Group>
                             );
diff --git a/src/options/pages/servicePage.tsx b/src/options/pages/servicePage.tsx
index 61cdcfae..3478a860 100644
--- a/src/options/pages/servicePage.tsx
+++ b/src/options/pages/servicePage.tsx
@@ -10,31 +10,36 @@ import React, { useContext, useState } from 'react';
 import { Col, Container, Row } from 'react-bootstrap';
 import { useNavigate } from 'react-router-dom';
 
-// TODO: clear pipelines when serviceId changed
-
 export default () => {
     const navigate = useNavigate();
     const service = useContext(ServiceContext);
     if (!service) return null;
-    let updatedService = { ...service };
-    const [pipelines, setPipelines] = useState<CIPipelineList>();
+    const [newService, setNewService] = useState<CIServiceSettings>({ ...service });
+    const [allPipelines, setAllPipelines] = useState<CIPipelineList>();
     const [filter, setFilter] = useState();
     const [toastAlertReset, setToastAlertReset] = useState(0);
 
+    if (newService.name !== service.name) {
+        // reset state
+        setNewService(service);
+        setAllPipelines(undefined);
+    }
+
+    const handleSave = (settings: CIServiceSettings) => {
+        setNewService(settings);
+        core.saveService(settings);
+        setToastAlertReset(toastAlertReset + 1);
+        navigate(`/service/${settings.name}`);
+    };
+
     const updateFilter = value => {
         setFilter(value);
     };
     const updateSelected = (selected: string[]) => {
-        updatedService.pipelines = selected;
-    };
-    const showPipelines = piplines => {
-        setPipelines(piplines);
+        setNewService({ ...newService, ...{ pipelines: selected } });
     };
-    const handleSave = (settings: CIServiceSettings) => {
-        updatedService = { ...settings, pipelines: updatedService.pipelines };
-        core.saveService(updatedService);
-        setToastAlertReset(toastAlertReset + 1);
-        navigate(`/service/${settings.name}`);
+    const showPipelines = pipelines => {
+        setAllPipelines(pipelines);
     };
     return (
         <>
@@ -42,20 +47,20 @@ export default () => {
                 <Row>
                     <Col xs={6}>
                         <DynamicForm
-                            service={updatedService}
+                            service={newService}
                             onShow={showPipelines}
                             onSave={handleSave}
                         />
-                        <SelectedPipelines pipelines={updatedService.pipelines} />
+                        <SelectedPipelines pipelines={service.pipelines} />
                     </Col>
                     <Col xs={6} className="project-selection-container">
-                        {pipelines && <PipelineFilter onUpdate={updateFilter} />}
+                        {allPipelines && <PipelineFilter onUpdate={updateFilter} />}
                         <PipelineList
                             key={service.name}
-                            pipelines={pipelines}
+                            pipelines={allPipelines}
                             filter={filter}
-                            selectedItems={service.pipelines}
-                            onSelected={updateSelected}
+                            selectedItems={newService.pipelines}
+                            onChanged={updateSelected}
                         />
                     </Col>
                 </Row>