Fix list filter default values and error state

ui/v2.5/src/components/List/AddFilter.tsx

@@ -75,14 +75,13 @@ export const AddFilter: React.FC<IAddFilterProps> = (
   }
 
   function onAddFilter() {
-    if (!Array.isArray(criterion.value) && defaultValue.current) {
+    if (!Array.isArray(criterion.value) && defaultValue.current !== undefined) {
       const value = defaultValue.current;
       if (
         criterion.options &&
-        !Array.isArray(criterion.options) &&
         (value === undefined || value === "" || typeof value === "number")
       ) {
-        criterion.value = criterion.options[0];
+        criterion.value = criterion.options[0].toString();
       } else if (typeof value === "number" && value === undefined) {
         criterion.value = 0;
       } else if (value === undefined) {
@@ -191,7 +190,7 @@ export const AddFilter: React.FC<IAddFilterProps> = (
           type={criterion.inputType}
           onChange={onChangedInput}
           onBlur={onBlurInput}
-          value={criterion.value.toString()}
+          defaultValue={criterion.value ? criterion.value.toString() : ''}
         />
       );
     }

ui/v2.5/src/hooks/ListHook.tsx

@@ -342,42 +342,37 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
       })
     : undefined;
 
-  let template;
-  if (result.loading || !forageInitialised) {
-    template = <LoadingIndicator />;
-  } else if (result.error) {
-    template = <h1>{result.error.message}</h1>;
-  } else {
-    template = (
-      <div>
-        <ListFilter
-          onChangePageSize={onChangePageSize}
-          onChangeQuery={onChangeQuery}
-          onChangeSortDirection={onChangeSortDirection}
-          onChangeSortBy={onChangeSortBy}
-          onChangeDisplayMode={onChangeDisplayMode}
-          onAddCriterion={onAddCriterion}
-          onRemoveCriterion={onRemoveCriterion}
-          onSelectAll={onSelectAll}
-          onSelectNone={onSelectNone}
-          zoomIndex={options.zoomable ? zoomIndex : undefined}
-          onChangeZoom={options.zoomable ? onChangeZoom : undefined}
-          otherOperations={otherOperations}
-          filter={filter}
-        />
-        {options.renderSelectedOptions && selectedIds.size > 0
-          ? options.renderSelectedOptions(result, selectedIds)
-          : undefined}
-        {options.renderContent(result, filter, selectedIds, zoomIndex)}
-        <Pagination
-          itemsPerPage={filter.itemsPerPage}
-          currentPage={filter.currentPage}
-          totalItems={totalCount}
-          onChangePage={onChangePage}
-        />
-      </div>
-    );
-  }
+  const template = (
+    <div>
+      <ListFilter
+        onChangePageSize={onChangePageSize}
+        onChangeQuery={onChangeQuery}
+        onChangeSortDirection={onChangeSortDirection}
+        onChangeSortBy={onChangeSortBy}
+        onChangeDisplayMode={onChangeDisplayMode}
+        onAddCriterion={onAddCriterion}
+        onRemoveCriterion={onRemoveCriterion}
+        onSelectAll={onSelectAll}
+        onSelectNone={onSelectNone}
+        zoomIndex={options.zoomable ? zoomIndex : undefined}
+        onChangeZoom={options.zoomable ? onChangeZoom : undefined}
+        otherOperations={otherOperations}
+        filter={filter}
+      />
+      {options.renderSelectedOptions && selectedIds.size > 0
+        ? options.renderSelectedOptions(result, selectedIds)
+        : undefined}
+      {options.renderContent(result, filter, selectedIds, zoomIndex)}
+      { (result.loading || !forageInitialised) && <LoadingIndicator /> }
+      { result.error && <h1>{result.error.message}</h1> }
+      <Pagination
+        itemsPerPage={filter.itemsPerPage}
+        currentPage={filter.currentPage}
+        totalItems={totalCount}
+        onChangePage={onChangePage}
+      />
+    </div>
+  );
 
   return { filter, template, onSelectChange };
 };

ui/v2.5/src/index.scss

@@ -35,7 +35,7 @@ code {
 
 .table-list td,
 .table-list th {
-  border-left: 1px solid rgba(255, 255, 255, .15);
+  border-left: 1px solid #414c53;
   font-size: 1rem;
   text-align: center;
   vertical-align: middle;

ui/v2.5/src/styles/_theme.scss

@@ -110,8 +110,7 @@ hr {
 
   thead {
     th {
-      border-bottom: 1px solid rgba(255, 255, 255, .15);
-      border-color: rgba(255, 255, 255, .15);
+      border-bottom: 1px solid #414c53;
       border-right: none;
       border-top: none;
     }
@@ -119,7 +118,7 @@ hr {
 
   td {
     border: none;
-    border-color: rgba(255, 255, 255, .15);
+    border-color: #414c53;
     padding: .25rem .75rem;
 
     &:first-child {