FE fixes and error handling

kcagran · kcagran · commit ff086f8e89ea · 2025-11-05T05:37:35.000+01:00
diff --git a/src/frontend/app/Components/AddEditView.tsx b/src/frontend/app/Components/AddEditView.tsx
@@ -135,10 +135,10 @@ const AddEditView: React.FunctionComponent<AddEditViewProps> = (props: AddEditVi
     setIsMenuOpen(!isMenuOpen);
   };
 
-  const onFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  const onFormSubmit =  async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (modalVariant === 'create' || modalVariant === 'edit') {
-      saveFilter().then();
+      await saveFilter();
     }
   };
 
diff --git a/src/frontend/app/Components/Filters.tsx b/src/frontend/app/Components/Filters.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  Alert, AlertActionCloseButton,
   Button,
   Label,
   LabelGroup,
@@ -8,7 +9,7 @@ import {
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
-  ToolbarItem
+  ToolbarItem,
 } from '@patternfly/react-core';
 import { AddEditView, BaseDropdown, DateRangePicker, MultiChoiceDropdown } from '@app/Components';
 import { FilterComponentProps, FilterOption, FilterOptionWithId, FilterProps, RequestFilter } from '@app/Types';
@@ -32,6 +33,7 @@ import {
 } from '@app/Store/commonSelectors';
 import { useRef } from 'react';
 import { useAuthStore } from '@app/Store/authStore';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
 
 export const Filters: React.FunctionComponent<FilterComponentProps> = (props: FilterComponentProps) => {
   const filterOptionsList = useFilterStore((state) => state.filterOptions);
@@ -44,6 +46,7 @@ export const Filters: React.FunctionComponent<FilterComponentProps> = (props: Fi
   const filterChoicesDataByOption = useFilterChoicesDataById();
   const fetchOneFilterOption = fetchOneOption();
   const fetchNextPageData = useFetchNextPage();
+  const [errors, setErrors] = React.useState<string[]>([]);
   const [filterSelection, selectFilter] = React.useState<FilterProps>({
     organization: [],
     job_template: [],
@@ -68,11 +71,17 @@ export const Filters: React.FunctionComponent<FilterComponentProps> = (props: Fi
     await fetchTemplateOptions();
     await Promise.all(filterOptionsList.map(async (option) => {
       if (fetchFilterOptionsData[option.key]) {
-        await fetchFilterOptionsData[option.key]();
+        try {
+          await fetchFilterOptionsData[option.key]();
+        }catch(e){
+          setErrors((errors) => [...errors, (e as { message?: string })?.message ?? 'Something went wrong. Please try again later.']);
+        }
       }
     }));
   };
 
+  const dateChoices = useFilterStore((state) => state.dateRangeOptions);
+
   React.useEffect(() => {
     const execute = async () => {
       await fetchFilters();
@@ -133,13 +142,21 @@ export const Filters: React.FunctionComponent<FilterComponentProps> = (props: Fi
   };
 
   const clearFilters = () => {
-    selectFilter((prevState) => ({
-      ...prevState,
-      ['organization']: [],
-      ['job_template']: [],
-      ['project']: [],
-      ['label']: []
-    }));
+    let range: string |  null = null;
+    if (dateChoices?.length) {
+      const index = dateChoices.findIndex((v) => v.key === 'month_to_date');
+      range = (index > -1 ? dateChoices[index].key : dateChoices[0].key).toString();
+    }
+    const filters = {
+      organization: [],
+      job_template: [],
+      label: [],
+      project: [],
+      date_range: range,
+      start_date: undefined,
+      end_date: undefined
+    } as FilterProps;
+    selectFilter(()=>filters);
     setView(null);
   };
 
@@ -153,14 +170,18 @@ export const Filters: React.FunctionComponent<FilterComponentProps> = (props: Fi
     const viewOptions = {};
     await Promise.all(filterOptions.map(async (option) => {
       viewOptions[option] = [];
-      if (view.filters?.[option]?.length){
-        await Promise.all(view.filters[option].map(async (key: number)=>{
+      if (view.filters?.[option]?.length) {
+        await Promise.all(view.filters[option].map(async (key: number) => {
           let value = filterChoicesDataByOption[option][key];
-          if (value){
+          if (value) {
             viewOptions[option].push(value);
           } else {
-            value = await fetchOneFilterOption[option](key);
-            if (value){
+            try {
+              value = await fetchOneFilterOption[option](key);
+            } catch(e){
+              setErrors((errors) => [...errors, (e as { message?: string })?.message ?? 'Something went wrong. Please try again later.']);
+            }
+            if (value) {
               viewOptions[option].push(value);
             }
           }
@@ -240,6 +261,12 @@ export const Filters: React.FunctionComponent<FilterComponentProps> = (props: Fi
     }
   };
 
+  const closeAlert = (errorIndex:number):void=>{
+    const newList = [...errors];
+    newList.splice(errorIndex, 1);
+    setErrors(newList);
+  };
+
   const filterSelector = (
     <div className="pf-v6-u-mr-xs">
       <BaseDropdown
@@ -322,6 +349,23 @@ export const Filters: React.FunctionComponent<FilterComponentProps> = (props: Fi
     </ToolbarGroup>
   );
 
+    const errorElements =  (
+      <div
+        style={{
+          marginTop: '16px',
+        }}>
+        {errors.map((error: string, i:number) => (
+        <Alert
+          style={{
+             marginBottom: '16px',
+          }}
+          key={i}
+          title={error}
+          variant={'danger'}
+          actionClose={<AlertActionCloseButton onClose={() => closeAlert(i)} />}>
+        </Alert>))}
+      </div>
+  );
   const toolBar = (
     <Toolbar id="filter-toolbar" clearAllFilters={clearFilters} className="pf-v6-l-flex pf-m-row-gap-md pf-v6-u-pb-0">
       <ToolbarContent>
@@ -349,7 +393,8 @@ export const Filters: React.FunctionComponent<FilterComponentProps> = (props: Fi
 
   return (
     <div>
-      <React.Fragment>{!error && toolBar}</React.Fragment>
+      <React.Fragment>{!error && (toolBar)}</React.Fragment>
+      {errorElements}
     </div>
   );
 };
diff --git a/src/frontend/app/Components/MultiChoiceDropdown.tsx b/src/frontend/app/Components/MultiChoiceDropdown.tsx
@@ -100,9 +100,9 @@ export const MultiChoiceDropdown: React.FunctionComponent<MultiChoiceDropdownPro
       icon={props?.icon && props.icon}
       style={props?.style}
       isExpanded={isMenuOpen}
-      {...(props.selections.length > 0 && {
+      {...(props.selections.length > 0 ? {
         badge: <Badge isRead>{props.selections.length}</Badge>
-      })}
+      } : null)}
     >
       {props.label ? <span>{props.label}</span> : ''}
     </MenuToggle>
diff --git a/src/frontend/app/Store/filterOptionsStore.ts b/src/frontend/app/Store/filterOptionsStore.ts
@@ -12,6 +12,8 @@ type FilterOptionActions = {
 
 const createActions: StateCreator<FilterOptionsState & FilterOptionActions> = (set, get) => ({
   endPoint: '',
+  errorMessage: '',
+  errorRetrieveOneMessage: '',
   options: [],
   currentPage: 1,
   pageSize: 10,
@@ -46,16 +48,22 @@ const createActions: StateCreator<FilterOptionsState & FilterOptionActions> = (s
           ...response.results
         ]
       });
-    } catch {
+    } catch(error) {
       set({ loading: 'failed', error: true });
+      console.error(state.errorMessage, error);
+      throw new Error(state.errorMessage);
     }
   },
   fetchOne: async (id: number): Promise<FilterOptionWithId | null> => {
     const state = get();
+    set({ error: false });
     try {
       return await RestService.fetchFilterOption(state.endPoint, id);
-    } catch {
-      return null;
+    } catch(error) {
+      set({ error: true });
+      const errorMessage = state.errorRetrieveOneMessage.replace('${id}', String(id));
+      console.error(errorMessage);
+      throw new Error(errorMessage);
     }
   },
   fetchNextPage: async () => {
@@ -75,22 +83,30 @@ const createActions: StateCreator<FilterOptionsState & FilterOptionActions> = (s
 
 const useJobTemplateStore = create<FilterOptionsState & FilterOptionActions>()((a, b, state) => ({
   ...createActions(a, b, state),
-  endPoint: 'api/v1/templates/'
+  endPoint: 'api/v1/templates/',
+  errorMessage: 'Error retrieving job templates data.',
+  errorRetrieveOneMessage: 'Error retrieving job template data with id ${id}.',
 }));
 
 const useLabelStore = create<FilterOptionsState & FilterOptionActions>()((a, b, state) => ({
   ...createActions(a, b, state),
-  endPoint: 'api/v1/labels/'
+  endPoint: 'api/v1/labels/',
+  errorMessage: 'Error retrieving labels data.',
+  errorRetrieveOneMessage: 'Error retrieving label data with id ${id}.',
 }));
 
 const useOrganizationStore = create<FilterOptionsState & FilterOptionActions>()((a, b, state) => ({
   ...createActions(a, b, state),
-  endPoint: 'api/v1/organizations/'
+  endPoint: 'api/v1/organizations/',
+  errorMessage: 'Error retrieving organizations data.',
+  errorRetrieveOneMessage: 'Error retrieving organization data with id ${id}.',
 }));
 
 const useProjectStore = create<FilterOptionsState & FilterOptionActions>()((a, b, state) => ({
   ...createActions(a, b, state),
-  endPoint: 'api/v1/projects/'
+  endPoint: 'api/v1/projects/',
+  errorMessage: 'Error retrieving projects data.',
+  errorRetrieveOneMessage: 'Error retrieving project data with id ${id}.',
 }));
 
 export { useJobTemplateStore, useLabelStore, useOrganizationStore, useProjectStore };
diff --git a/src/frontend/app/Types/FilterTypes.ts b/src/frontend/app/Types/FilterTypes.ts
@@ -46,19 +46,16 @@ export interface FilterState {
   automatedProcessCost: number | string;
   clusters: ClusterOption[];
   dateRangeOptions: FilterOption[];
-  //templateOptions: FilterOptionWithId[];
-  //labelOptions: FilterOptionWithId[];
-  //instanceOptions: FilterOptionWithId[];
-  //projectOptions: FilterOptionWithId[];
   manualCostAutomation: number | string;
-  //organizationOptions: FilterOption[];
   loading: 'idle' | 'pending' | 'succeeded' | 'failed';
   error: boolean;
 }
 
 
 export interface FilterOptionsState {
   endPoint: string;
+  errorMessage: string;
+  errorRetrieveOneMessage: string;
   options: FilterOption[];
   currentPage: number,
   pageSize: number,
