fix: FEAT: Array column should be filterable

src/components/fields/Array/Filter.tsx

@@ -0,0 +1,20 @@
+import { IFilterOperator } from "@src/components/fields/types";
+
+export const operators: IFilterOperator[] = [
+  {
+    label: "equals",
+    value: "==",
+  },
+  {
+    label: "not equals",
+    value: "!=",
+  },
+  {
+    label: "contains the following",
+    value: "array-contains",
+  },
+  {
+    label: "contains atleast one of the following",
+    value: "array-contains-any",
+  },
+];

src/components/fields/Array/SideDrawerField/index.tsx

@@ -120,7 +120,7 @@ export default function ArraySideDrawerField({
 }: ISideDrawerFieldProps) {
   const handleAddNew = (fieldType: ArraySupportedFiledTypes) => {
     onChange([...(value || []), SupportedTypes[fieldType].initialValue]);
-    onDirty(true);
+    if (onDirty) onDirty(true);
   };
   const handleChange = (newValue_: any, indexUpdated: number) => {
     onChange(
@@ -137,13 +137,13 @@ export default function ArraySideDrawerField({
   const handleRemove = (index: number) => {
     value.splice(index, 1);
     onChange([...value]);
-    onDirty(true);
+    if (onDirty) onDirty(true);
     onSubmit();
   };
 
   const handleClearField = () => {
     onChange([]);
-    onSubmit();
+    if (onSubmit) onSubmit();
   };
 
   function handleOnDragEnd(result: DropResult) {
@@ -157,7 +157,7 @@ export default function ArraySideDrawerField({
     const [removed] = list.splice(result.source.index, 1);
     list.splice(result.destination.index, 0, removed);
     onChange(list);
-    onSubmit();
+    if (onSubmit) onSubmit();
   }
 
   if (value === undefined || Array.isArray(value)) {
@@ -166,7 +166,11 @@ export default function ArraySideDrawerField({
         <DragDropContext onDragEnd={handleOnDragEnd}>
           <Droppable droppableId="columns_manager" direction="vertical">
             {(provided) => (
-              <List {...provided.droppableProps} ref={provided.innerRef}>
+              <List
+                sx={{ padding: 0 }}
+                {...provided.droppableProps}
+                ref={provided.innerRef}
+              >
                 {(value || []).map((v: any, index: number) => (
                   <ArrayFieldInput
                     key={`index-${index}-value`}
@@ -185,7 +189,15 @@ export default function ArraySideDrawerField({
             )}
           </Droppable>
         </DragDropContext>
-        <AddButton handleAddNew={handleAddNew} />
+        {props.operator === "array-contains" ? (
+          value?.length < 1 ? (
+            <AddButton handleAddNew={handleAddNew} />
+          ) : (
+            <></>
+          )
+        ) : (
+          <AddButton handleAddNew={handleAddNew} />
+        )}
       </>
     );
   }

src/components/fields/Array/index.tsx

@@ -5,6 +5,7 @@ import { IFieldConfig, FieldType } from "@src/components/fields/types";
 import withRenderTableCell from "@src/components/Table/TableCell/withRenderTableCell";
 
 import DisplayCell from "./DisplayCell";
+import { operators } from "./Filter";
 
 import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
 
@@ -27,6 +28,7 @@ export const config: IFieldConfig = {
     popoverProps: { PaperProps: { sx: { p: 1, minWidth: "200px" } } },
   }),
   SideDrawerField,
+  filter: { operators, defaultValue: [] },
   requireConfiguration: false,
   contextMenuActions: BasicContextMenuActions,
 };

src/components/fields/types.ts

@@ -94,6 +94,8 @@ export interface ISideDrawerFieldProps<T = any> {
   disabled: boolean;
 
   row: TableRow;
+
+  operator?: TableFilter["operator"];
 }
 
 export interface ISettingsProps {

src/hooks/useFirestoreCollectionWithAtom.ts

@@ -405,6 +405,13 @@ export const tableFiltersToFirestoreFilters = (filters: TableFilter[]) => {
         where(filter.key.concat(".hex"), "!=", filter.value.hex.toString())
       );
       continue;
+    } else if (filter.operator === "array-contains") {
+      if (!filter.value || !filter.value.length) continue;
+      // make the value as a singular string
+      firestoreFilters.push(
+        where(filter.key, filter.operator as WhereFilterOp, filter.value[0])
+      );
+      continue;
     }
     firestoreFilters.push(
       where(filter.key, filter.operator as WhereFilterOp, filter.value)