Clean up FilterElement types (#3850)

* Filter element types

* Lint

* Lint

.changeset/curly-lies-check.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Clean up FilterElement type

src/components/ConditionalFilter/FilterElement/ConditionSelected.ts

@@ -4,21 +4,22 @@ import { ConditionItem } from "./ConditionOptions";
 export interface ItemOption {
   label: string;
   value: string;
-  slug?: string;
+  slug: string;
 }
 
-export type ConditionOption =
+export type ConditionValue =
   | ItemOption
   | ItemOption[]
   | string
   | string[]
   | [string, string];
 
+
 export class ConditionSelected {
   private constructor(
-    public value: ConditionOption,
+    public value: ConditionValue,
     public conditionValue: ConditionItem | null,
-    public options: ConditionOption[],
+    public options: ConditionValue[],
     public loading: boolean,
   ) {}
 
@@ -37,7 +38,7 @@ export class ConditionSelected {
 
   public static fromConditionItemAndValue(
     conditionItem: ConditionItem,
-    value: ConditionOption,
+    value: ConditionValue,
   ) {
     return new ConditionSelected(value, conditionItem, [], false);
   }
@@ -54,11 +55,11 @@ export class ConditionSelected {
     return this.loading;
   }
 
-  public setValue(value: ConditionOption) {
+  public setValue(value: ConditionValue) {
     this.value = value;
   }
 
-  public setOptions(options: ConditionOption[]) {
+  public setOptions(options: ConditionValue[]) {
     this.options = options;
 
     if (this.conditionValue) {

src/components/ConditionalFilter/FilterElement/FilterElement.ts

@@ -4,7 +4,7 @@ import { LeftOperand } from "./../useLeftOperands";
 import { CONDITIONS, UrlEntry, UrlToken } from "./../ValueProvider/UrlToken";
 import { Condition } from "./Condition";
 import { ConditionItem, ConditionOptions } from "./ConditionOptions";
-import { ConditionOption, ConditionSelected } from "./ConditionSelected";
+import { ConditionSelected, ConditionValue, ItemOption } from "./ConditionSelected";
 
 interface ExpressionValue {
   value: string;
@@ -12,7 +12,7 @@ interface ExpressionValue {
   type: string;
 }
 
-const createStaticEntry = (rawEntry: ConditionOption) => {
+const createStaticEntry = (rawEntry: ConditionValue) => {
   if (typeof rawEntry === "string") {
     return rawEntry;
   }
@@ -24,7 +24,7 @@ const createStaticEntry = (rawEntry: ConditionOption) => {
   return rawEntry.slug;
 };
 
-const createAttributeEntry = (rawEntry: ConditionOption) => {
+const createAttributeEntry = (rawEntry: ConditionValue) => {
   if (typeof rawEntry === "string") {
     return rawEntry;
   }
@@ -73,11 +73,11 @@ export class FilterElement {
       ConditionSelected.fromConditionItem(conditionValue);
   }
 
-  public updateRightOperator(value: ConditionOption) {
+  public updateRightOperator(value: ConditionValue) {
     this.condition.selected.setValue(value);
   }
 
-  public updateRightOptions(options: ConditionOption[]) {
+  public updateRightOptions(options: ItemOption[]) {
     this.condition.selected.setOptions(options);
   }
 

src/components/ConditionalFilter/ValueProvider/UrlToken.ts

@@ -13,6 +13,7 @@ export class UrlEntry {
   constructor(key: string, value: string | string[]) {
     this[key] = value;
   }
+
 }
 
 export class UrlToken {

src/components/ConditionalFilter/controlsType.ts

@@ -1,14 +1,14 @@
 // @ts-strict-ignore
-import { ConditionOption } from "./FilterElement/ConditionSelected";
+import { ConditionValue } from "./FilterElement/ConditionSelected";
 
 export const CONTROL_DEFAULTS = {
   text: "",
   number: "",
   "number.range": [] as unknown as [string, string],
-  multiselect: [] as ConditionOption[],
+  multiselect: [] as ConditionValue[],
   select: "",
   combobox: "",
 };
 
-export const getDefaultByControlName = (name: string): ConditionOption =>
+export const getDefaultByControlName = (name: string): ConditionValue =>
   CONTROL_DEFAULTS[name];

src/components/ConditionalFilter/useFilterContainer.ts

@@ -2,6 +2,7 @@
 import { useState } from "react";
 
 import { FilterElement } from "./FilterElement";
+import { ConditionValue, ItemOption } from "./FilterElement/ConditionSelected";
 
 export type FilterContainer = Array<string | FilterElement | FilterContainer>;
 
@@ -58,12 +59,12 @@ export const useFilterContainer = (initialValue: FilterContainer) => {
     );
   };
 
-  const updateRightOperator = (position: string, leftOperator: any) => {
+  const updateRightOperator = (position: string, rightOperator: ConditionValue) => {
     const index = parseInt(position, 10);
     setValue(v =>
       v.map((el, elIndex) => {
         if (elIndex === index && typeof el !== "string" && !Array.isArray(el)) {
-          el.updateRightOperator(leftOperator);
+          el.updateRightOperator(rightOperator);
         }
 
         return el;
@@ -71,7 +72,7 @@ export const useFilterContainer = (initialValue: FilterContainer) => {
     );
   };
 
-  const updateRightOptions = (position: string, options: any) => {
+  const updateRightOptions = (position: string, options: ItemOption[]) => {
     const index = parseInt(position, 10);
     setValue(v =>
       v.map((el, elIndex) => {