From 5065bddc2d72c1c95a69d0c40a84d83d08e2b7b9 Mon Sep 17 00:00:00 2001
From: Zoe Hayes <zoehayes286@gmail.com>
Date: Sat, 20 Apr 2024 00:27:59 -0400
Subject: [PATCH] fix: minor compatibility changes to QueryItem Qualifier and
 Cascader

---
 .../data-entry/QueryItem/Cascader.stories.tsx | 11 ++++++++-
 .../data-entry/QueryItem/Cascader.tsx         | 24 +++++++++----------
 .../QueryItem/Qualifier.stories.tsx           |  8 +++++++
 .../data-entry/QueryItem/Qualifier.tsx        |  6 ++---
 4 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/components/data-entry/QueryItem/Cascader.stories.tsx b/src/components/data-entry/QueryItem/Cascader.stories.tsx
index e3b7dc764..533dc5c15 100644
--- a/src/components/data-entry/QueryItem/Cascader.stories.tsx
+++ b/src/components/data-entry/QueryItem/Cascader.stories.tsx
@@ -107,6 +107,15 @@ export const OnSelect: Story = {
   args: {
     placeholder: "QueryItem.ValueSelector.Cascader Error",
     options: exampleOptions,
-    onChange: (value) => console.log(value),
+    onChange: async (value) => console.log(value),
+  },
+}
+
+export const PreSelectedValue: Story = {
+  args: {
+    placeholder: "QueryItem.ValueSelector.Cascader PreSelected",
+    options: exampleOptions,
+    value: ["Canada1", "Ontario1", "Toronto1"],
+    onChange: async (values, _) => {console.log(values)},
   },
 }
diff --git a/src/components/data-entry/QueryItem/Cascader.tsx b/src/components/data-entry/QueryItem/Cascader.tsx
index b2cdf791f..0bc834e4a 100644
--- a/src/components/data-entry/QueryItem/Cascader.tsx
+++ b/src/components/data-entry/QueryItem/Cascader.tsx
@@ -2,31 +2,31 @@ import './query-item.css'
 import { GetProp } from 'antd'
 import { ReactNode, useState } from 'react'
 import {
-  AddIcon,
   Cascader as BaseCascader,
-  CircleDashedIcon,
   Flex,
   ICascaderProps as IBaseCascaderProps,
   Input,
-  Space,
   Typography,
+  EmptyIcon,
+  EventAttributesIcon,
+  EventsIcon,
+  UserAttributesIcon,
 } from 'src/components'
 
 export interface CascaderOption {
   value: string
-  label: ReactNode
-  selectedLabel?: string
+  label: string
   children?: CascaderOption[]
   disabled?: boolean
 }
 
-export type CascaderIcons = 'blank' | 'attribute' | 'user' | 'event'
+export type CascaderIcons = 'empty' | 'eventAttribute' | 'userAttribute' | 'event'
 
 const CascaderIconList = {
-  blank: <CircleDashedIcon className="query-item__icon" />,
-  attribute: <AddIcon className="query-item__icon" />,
-  user: <AddIcon className="query-item__icon" />,
-  event: <AddIcon className="query-item__icon" />,
+  empty: () => <EmptyIcon className="query-item__icon" />,
+  eventAttribute: () => <EventAttributesIcon className="query-item__icon" />,
+  userAttribute: () => <UserAttributesIcon className="query-item__icon" />,
+  event: () => <EventsIcon className="query-item__icon" />,
 }
 
 export interface ICascaderProps {
@@ -44,7 +44,7 @@ export const Cascader = (props: ICascaderProps) => {
   const options: CascaderOption[] = []
   const [items] = useState(props.options ?? options)
   const [searchValue, setSearchValue] = useState('')
-  const [selectedValue, setSelectedValue] = useState<(number | string)[]>(props.value ?? [""])
+  const [selectedValue, setSelectedValue] = useState<(number | string)[]>(props.value ?? [''])
   const [isOpen, setIsOpen] = useState(false)
 
   const onSearch = (value: string) => {
@@ -89,7 +89,7 @@ export const Cascader = (props: ICascaderProps) => {
           status={props.errorMessage ? 'error' : undefined}
           className={inputClasses}
           value={(selectedValue as string[])?.slice(-1)}
-          prefix={props.icon ?? <CircleDashedIcon className="query-item__icon" />}
+          prefix={props.icon ? CascaderIconList[props.icon]() : <EmptyIcon className="query-item__icon" />}
         />
       </BaseCascader>
       {props.errorMessage && <Typography.Text type={'danger'}>{props.errorMessage}</Typography.Text>}
diff --git a/src/components/data-entry/QueryItem/Qualifier.stories.tsx b/src/components/data-entry/QueryItem/Qualifier.stories.tsx
index a0db68957..f2d8bda94 100644
--- a/src/components/data-entry/QueryItem/Qualifier.stories.tsx
+++ b/src/components/data-entry/QueryItem/Qualifier.stories.tsx
@@ -42,3 +42,11 @@ export const Disabled: Story = {
     options: defaultOptions,
   },
 }
+
+
+export const PreSelected: Story = {
+  args: {
+    options: defaultOptions,
+    value: { value: '2', label: 'is greater than' },
+  },
+}
diff --git a/src/components/data-entry/QueryItem/Qualifier.tsx b/src/components/data-entry/QueryItem/Qualifier.tsx
index 06bf5d039..cc6346c4a 100644
--- a/src/components/data-entry/QueryItem/Qualifier.tsx
+++ b/src/components/data-entry/QueryItem/Qualifier.tsx
@@ -11,8 +11,8 @@ export interface IQueryItemQualifierProps {
   options: IQueryItemQualifierOption[]
   disabled?: boolean
   errorMessage?: string
-  onChange: (value: IQueryItemQualifierOption) => void
-  value: IQueryItemQualifierOption
+  onChange?: (value: IQueryItemQualifierOption) => void
+  value?: IQueryItemQualifierOption
 }
 
 export const Qualifier = (props: IQueryItemQualifierProps) => {
@@ -22,7 +22,7 @@ export const Qualifier = (props: IQueryItemQualifierProps) => {
     menuItemSelectedIcon: node =>
       node.isSelected ? <CheckIcon className="query-item-qualifier__item-selected-icon" /> : null,
     onChange: props.onChange,
-    onDropdownVisibleChange: () => setIsOpen(true),
+    onDropdownVisibleChange: () => setIsOpen(!isOpen),
     placement: 'bottomLeft',
     popupMatchSelectWidth: false,
     status: props.errorMessage ? 'error' : undefined,