From 4f336850de4927d2c1bba698ac739e654b9e8177 Mon Sep 17 00:00:00 2001
From: Kevin Jackson <30411845+KevinJJackson@users.noreply.github.com>
Date: Mon, 6 Jan 2025 14:40:00 -0500
Subject: [PATCH] bugfix/legacy-upload-error (#254)

---
 package.json                                  |  2 +-
 src/app-bundles/collection-group-bundle.js    |  2 +
 src/app-bundles/create-jwt-api-bundle.js      |  2 +-
 src/app-bundles/upload-bundle.js              | 26 ++++------
 .../collection-group/collection-group.jsx     | 48 ++++++++-----------
 .../collectiongroup-timeseries-list.jsx       | 36 ++++++++------
 6 files changed, 53 insertions(+), 63 deletions(-)

diff --git a/package.json b/package.json
index 93e36241..a855ffa2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hhd-ui",
-  "version": "0.18.8",
+  "version": "0.18.9",
   "private": true,
   "dependencies": {
     "@ag-grid-community/client-side-row-model": "^30.0.3",
diff --git a/src/app-bundles/collection-group-bundle.js b/src/app-bundles/collection-group-bundle.js
index 2b473ef8..c1b97936 100644
--- a/src/app-bundles/collection-group-bundle.js
+++ b/src/app-bundles/collection-group-bundle.js
@@ -16,6 +16,8 @@ export default createRestBundle({
   forceFetchActions: [
     'COLLECTIONGROUP_SAVE_FINISHED',
     'COLLECTIONGROUP_DELETE_FINISHED',
+    'COLLECTIONGROUP_REMOVE_TIMESERIES_FINISH',
+    'COLLECTIONGROUP_ADD_TIMESERIES_FINISH',
   ],
   urlParamSelectors: ['selectProjectsIdByRoute'],
   prefetch: (store) => {
diff --git a/src/app-bundles/create-jwt-api-bundle.js b/src/app-bundles/create-jwt-api-bundle.js
index fe708ca2..9d82bf25 100644
--- a/src/app-bundles/create-jwt-api-bundle.js
+++ b/src/app-bundles/create-jwt-api-bundle.js
@@ -47,7 +47,7 @@ const processResponse = response => (
           'json': json,
         }))
           // eslint-disable-next-line no-console
-        .catch(e => console.error(e));
+        .catch(e => console.error('Error parsing Response JSON', e));
     }
   })
 );
diff --git a/src/app-bundles/upload-bundle.js b/src/app-bundles/upload-bundle.js
index 42be31b5..85768f59 100644
--- a/src/app-bundles/upload-bundle.js
+++ b/src/app-bundles/upload-bundle.js
@@ -257,24 +257,14 @@ const uploadBundle = {
           });
         } else {
           // Safety meaasure until ?dry_run=true is complete on API for all uploaders
-          if (Array.isArray(data) && data.length > 0) {
-            dispatch({
-              type: 'UPLOAD_POST_FINISHED',
-            });
-            store.doNotificationFire({
-              message: 'Data Uploaded Successfully',
-              type: 'success',
-              autoClose: 10000,
-            });
-          } else {
-            data.errors.forEach((error) => {
-              store.doNotificationFire({
-                message: error,
-                type: 'error',
-                autoClose: 20000,
-              });
-            });
-          }
+          dispatch({
+            type: 'UPLOAD_POST_FINISHED',
+          });
+          store.doNotificationFire({
+            message: 'Data Uploaded Successfully',
+            type: 'success',
+            autoClose: 10000,
+          });
         }
       }
     });
diff --git a/src/app-pages/collection-group/collection-group.jsx b/src/app-pages/collection-group/collection-group.jsx
index 2e7f9ed0..692f56da 100644
--- a/src/app-pages/collection-group/collection-group.jsx
+++ b/src/app-pages/collection-group/collection-group.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { connect } from 'redux-bundler-react';
 import { roundToNearestMinutes } from 'date-fns';
-import { Add, KeyboardArrowDown, KeyboardArrowUp } from '@mui/icons-material';
+import { Add } from '@mui/icons-material';
 
 import Button from '../../app-components/button';
 import Card from '../../app-components/card';
@@ -29,7 +29,6 @@ export default connect(
     collectionGroupDetailByRoute: detail,
     projectsByRoute: project,
   }) => {
-    const [isShown, setIsShown] = useState(true);
     const [timestampMode, setTimestampMode] = useState('now'); // One of ['now', 'choose']
     const [date, setDate] = useState(new Date());
 
@@ -107,15 +106,9 @@ export default connect(
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'space-between',
-                      cursor: 'pointer',
                     }}
-                    onClick={(_e) => setIsShown(!isShown)}
                   >
                     <div className='d-flex flex-row align-items-center'>
-                      {isShown
-                        ? <KeyboardArrowUp sx={{ fontSize: '24px', marginRight: '5px' }} />
-                        : <KeyboardArrowDown sx={{ fontSize: '24px', marginRight: '5px' }} />
-                      }
                       <h5 className='p-0 m-0'>Timeseries</h5>
                       <RoleFilter allowRoles={[`${project.slug.toUpperCase()}.*`]}>
                         <Button
@@ -137,27 +130,24 @@ export default connect(
                       setDate={setDate}
                     />
                   </Card.Header>
-
-                  {isShown ? (
-                    <Card.Body>
-                      <div style={{ maxHeight: '600px', overflow: 'auto' }}>
-                        <TimeseriesList
-                          date={date}
-                          project={project}
-                          collectionGroup={detail}
-                          items={detail.timeseries}
-                          handleItemSaveValue={handleTimeseriesSaveValue}
-                          handleItemDelete={(item) => {
-                            doCollectionGroupRemoveTimeseries({
-                              projectId: detail.project_id,
-                              collectionGroupId: detail.id,
-                              timeseriesId: item.id,
-                            });
-                          }}
-                        />
-                      </div>
-                    </Card.Body>
-                  ) : null}
+                  <Card.Body>
+                    <div style={{ maxHeight: '600px', overflow: 'auto' }}>
+                      <TimeseriesList
+                        date={date}
+                        project={project}
+                        collectionGroup={detail}
+                        items={detail.timeseries}
+                        handleItemSaveValue={handleTimeseriesSaveValue}
+                        handleItemDelete={(item) => {
+                          doCollectionGroupRemoveTimeseries({
+                            projectId: detail.project_id,
+                            collectionGroupId: detail.id,
+                            timeseriesId: item.id,
+                          });
+                        }}
+                      />
+                    </div>
+                  </Card.Body>
                 </Card>
               </div>
             </div>
diff --git a/src/app-pages/collection-group/collectiongroup-timeseries-list.jsx b/src/app-pages/collection-group/collectiongroup-timeseries-list.jsx
index 221021ad..e6d5399e 100644
--- a/src/app-pages/collection-group/collectiongroup-timeseries-list.jsx
+++ b/src/app-pages/collection-group/collectiongroup-timeseries-list.jsx
@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import { Add, DeleteOutline, Lock, LockClock, LockOpen } from '@mui/icons-material';
+import { DeleteOutline, Lock, LockClock, LockOpen } from '@mui/icons-material';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
-import { IconButton, List, ListItem } from '@mui/material';
+import { Button, IconButton, List, ListItem } from '@mui/material';
 import { formatDistanceToNow, parseISO } from 'date-fns';
 
-import Button from '../../app-components/button';
 import RoleFilter from '../../app-components/role-filter';
 import { connect } from 'redux-bundler-react';
+import { useDeepCompareEffect } from 'react-use';
 
 const TimeseriesListEntry = ({
   handleItemSaveValue,
@@ -31,13 +31,14 @@ const TimeseriesListEntry = ({
                 <a href={`/${project.slug}/instruments/${item.instrument_slug}`}>
                   {item.instrument}
                 </a>
-                <Button
+                <IconButton
                   variant='link'
                   className='text-secondary h-100'
-                  handleClick={() => handleItemDelete(item)}
-                  icon={<DeleteOutline color='error' fontSize='small' sx={{ marginBottom: '4px' }} />}
+                  onClick={() => handleItemDelete(item)}
                   title='Remove from group'
-                />
+                >
+                  <DeleteOutline color='error' fontSize='small' sx={{ marginBottom: '4px' }} />
+                </IconButton>
               </>
             </RoleFilter>
           </div>
@@ -65,7 +66,7 @@ const TimeseriesListEntry = ({
         {/* Column 3 */}
         <RoleFilter allowRoles={[`${project.slug.toUpperCase()}.*`]}>
           <div className='d-flex flex-row'>
-            <div className='input-group'>
+            <div className='input-group'> 
               <input
                 type='number'
                 value={value}
@@ -75,14 +76,17 @@ const TimeseriesListEntry = ({
               />
                 <div className='input-group-append'>
                   <Button
-                    variant='secondary'
-                    handleClick={() => {
+                    variant='outlined'
+                    color='success'
+                    sx={{ borderRadius: '0 2px 2px 0' }}
+                    onClick={() => {
                       handleItemSaveValue(item, value);
                       setValue('');
                     }}
-                    text='Add'
-                    icon={<Add fontSize='inherit' sx={{ marginBottom: '3px' }} />}
-                  />
+                    title='Add Measurement'
+                  >
+                    + Add
+                  </Button>
                 </div>
             </div>
           </div>
@@ -143,6 +147,10 @@ const CollectionGroupTimeseriesList = connect(
       });
     };
 
+    useDeepCompareEffect(() => {
+      setSortedItems(items);
+    }, [items]);
+
     return (
       <>
         <IconButton
@@ -165,7 +173,7 @@ const CollectionGroupTimeseriesList = connect(
           {isDraggingDisabled ? 'Dragging Disabled' : 'Dragging Enabled'}
           {isDirty ? '  |  Click lock to save changes.' :''}
         </i>
-        <div className='w-100 list-group'>
+        <div className='w-100 list-group mt-2'>
           <DragDropContext onDragEnd={handleDragEnd}>
             <Droppable droppableId='legend-order' direction='vertical'>
               {(provided) => (