From 9ddfb841c5bcbf8db48787217ecdba60ef6e5f3b Mon Sep 17 00:00:00 2001
From: Thiago Dallacqua <thiago.menezes-dallacqua@hpe.com>
Date: Mon, 14 Oct 2024 19:37:47 -0300
Subject: [PATCH] refactor: Update FilterFormStore logic to handle column type
 changes better.

---
 .../FilterForm/components/FilterField.tsx     | 20 ++++++++++---------
 .../FilterForm/components/FilterFormStore.ts  |  4 ++--
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/webui/react/src/components/FilterForm/components/FilterField.tsx b/webui/react/src/components/FilterForm/components/FilterField.tsx
index e5461c1ba204..58fb9094aadf 100644
--- a/webui/react/src/components/FilterForm/components/FilterField.tsx
+++ b/webui/react/src/components/FilterForm/components/FilterField.tsx
@@ -70,7 +70,10 @@ const FilterField = ({
 }: Props): JSX.Element => {
   const users = Loadable.getOrElse([], useObservable(userStore.getUsers()));
   const resourcePools = Loadable.getOrElse([], useObservable(clusterStore.resourcePools));
-  const currentColumn = columns.find((c) => c.column === field.columnName);
+  const currentColumn = useMemo(
+    () => columns.find((c) => c.column === field.columnName),
+    [columns, field.columnName],
+  );
   const [metadataColumns, setMetadataColumns] = useState(() => new Map<string, number[]>()); // a map of metadata columns and found indexes
 
   useEffect(() => {
@@ -112,19 +115,18 @@ const FilterField = ({
   };
 
   const onChangeColumnName = (value: SelectValue) => {
-    const prevType = currentColumn?.type;
-    const newColName = value?.toString() ?? '';
-    const newCol = columns.find((c) => c.column === newColName);
+    const prevType = field.type;
+    const [newColName, type] = (value?.toString() ?? '').split(' ');
+    const newCol = columns.find((c) => c.column === newColName && type === c.type);
     if (newCol) {
       Observable.batch(() => {
         formStore.setFieldColumnName(field.id, newCol);
-
         if ((SpecialColumnNames as ReadonlyArray<string>).includes(newColName)) {
           formStore.setFieldOperator(field.id, Operator.Eq);
           updateFieldValue(field.id, null);
-        } else if (prevType !== newCol?.type) {
+        } else if (prevType !== newCol.type) {
           const defaultOperator: Operator =
-            AvailableOperators[newCol?.type ?? V1ColumnType.UNSPECIFIED][0];
+            AvailableOperators[newCol.type ?? V1ColumnType.UNSPECIFIED][0];
           formStore.setFieldOperator(field.id, defaultOperator);
           updateFieldValue(field.id, null);
         }
@@ -264,9 +266,9 @@ const FilterField = ({
           options={columns.map((col, idx) => ({
             key: `${col.column} ${idx}`,
             label: getColDisplayName(col),
-            value: col.column,
+            value: `${col.column} ${col.type}`,
           }))}
-          value={field.columnName}
+          value={`${field.columnName} ${field.type}`}
           width={'100%'}
           onChange={onChangeColumnName}
         />
diff --git a/webui/react/src/components/FilterForm/components/FilterFormStore.ts b/webui/react/src/components/FilterForm/components/FilterFormStore.ts
index 9bb61000a04e..d997059c8559 100644
--- a/webui/react/src/components/FilterForm/components/FilterFormStore.ts
+++ b/webui/react/src/components/FilterForm/components/FilterFormStore.ts
@@ -242,8 +242,8 @@ export class FilterFormStore {
     col: Pick<V1ProjectColumn, 'location' | 'type' | 'column'>,
   ): void {
     return this.#updateField(id, (form) => {
-      if (form.columnName === col.column && form.location === col.location) {
-        return form;
+      if (form.columnName === col.column) {
+        if (form.type === col.type && form.location === col.location) return form;
       }
       return {
         ...form,