From 71844f395d5d407f3daf554f7acdb145581a1d7e Mon Sep 17 00:00:00 2001
From: Delirium <nikita@openreplay.com>
Date: Fri, 6 Dec 2024 17:36:02 +0100
Subject: [PATCH] Omni-search improvements. (#2823)

Co-authored-by: Sudheer Salavadi <connect.uxmaster@gmail.com>
---
 .../FilterAutoComplete/AutocompleteModal.tsx  |  9 ++-
 .../shared/Filters/FilterItem/FilterItem.tsx  |  4 +-
 .../shared/Filters/FilterList/EventsOrder.tsx | 48 ++++++++++--
 .../shared/Filters/FilterList/FilterList.tsx  | 15 ++--
 .../Filters/FilterModal/FilterModal.tsx       | 78 +++++++++----------
 .../Filters/FilterOperator/FilterOperator.tsx |  1 +
 .../FilterSelection/FilterSelection.tsx       | 10 +--
 frontend/app/styles/general.css               |  2 +-
 .../src/main/modules/userTesting/styles.ts    |  6 +-
 9 files changed, 106 insertions(+), 67 deletions(-)

diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx b/frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx
index 43e7a18e6..e074a596b 100644
--- a/frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx
@@ -73,6 +73,7 @@ export function AutocompleteModal({
         loading={isLoading}
         onChange={(e) => handleInputChange(e.target.value)}
         placeholder={placeholder}
+        className='rounded-lg'
       />
       <Loader loading={isLoading}>
         <>
@@ -138,7 +139,7 @@ export function AutoCompleteContainer(props: Props) {
   return (
     <div
       className={
-        'rounded border border-gray-light px-2 relative w-fit whitespace-nowrap flex items-center'
+        'rounded-lg border border-gray-light px-2 relative w-full pr-4 whitespace-nowrap flex items-center bg-white hover:border-neutral-400'
       }
       style={{ height: 26 }}
       ref={filterValueContainer}
@@ -158,7 +159,7 @@ export function AutoCompleteContainer(props: Props) {
             </div>
             {props.value.length > 1 ? (
               <>
-                or
+                <span className='text-neutral-500/90	'>or</span>
                 {props.value.length === 2 ? (
                   <div
                     className={
@@ -182,8 +183,8 @@ export function AutoCompleteContainer(props: Props) {
             ) : null}
           </>
         ) : (
-          <div className={'text-disabled-text'}>
-            {props.placeholder ? props.placeholder : 'Select values'}
+          <div className={'text-neutral-500/90'}>
+            {props.placeholder ? props.placeholder : 'Select events'}
           </div>
         )}
       </div>
diff --git a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
index 698fc9bde..0648a4090 100644
--- a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
+++ b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
@@ -72,7 +72,7 @@ function FilterItem(props: Props) {
       <div className="flex items-start w-full">
         {!isFilter && !hideIndex && filterIndex >= 0 && (
           <div
-            className="mt-1 flex-shrink-0 border w-6 h-6 text-xs flex items-center justify-center rounded-full bg-gray-light-shade mr-2">
+            className="mt-1 flex-shrink-0 w-6 h-6 text-xs flex items-center justify-center rounded-full bg-gray-lighter	 mr-2">
             <span>{filterIndex + 1}</span>
           </div>
         )}
@@ -113,7 +113,7 @@ function FilterItem(props: Props) {
               <>
                 {props.readonly ? (
                   <div
-                    className={'rounded bg-active-blue px-2 py-1 ml-2 whitespace-nowrap overflow-hidden text-clip'}
+                    className={'rounded bg-active-blue px-2 py-1 ml-2 whitespace-nowrap overflow-hidden text-clip hover:border-neutral-400'}
                   >
                     {filter.value.map((val: string) => {
                       return filter.options && filter.options.length
diff --git a/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx b/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx
index 14c4c6abf..455da980b 100644
--- a/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx
+++ b/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx
@@ -42,14 +42,48 @@ const EventsOrder = observer((props: {
             </Tooltip>
         </div>
 
-        <Select
-            size={"small"}
-            className="text-sm"
-            onChange={(v) => onChange(null, options.find((i) => i.value === v))}
-            value={filter.eventsOrder}
-            options={options}
-        />
+  const menu = (
+    <Menu
+      onClick={(e) => {
+        const selectedOption = options.find((item) => item.value === e.key);
+        if (selectedOption && !selectedOption.disabled) {
+          onChange(null, selectedOption);
+        }
+      }}
+    >
+      {options.map((item) => (
+        <Menu.Item key={item.value} disabled={item.disabled}>
+          {item.label}
+        </Menu.Item>
+      ))}
+    </Menu>
+  );
+
+  return (
+    <div className="flex items-center gap-2">
+      <Tooltip title="Select the operator to be applied between events." placement="bottom">
+        <div className="text-neutral-500/90 text-sm">Events Order</div>
+      </Tooltip>
+
+      <Dropdown overlay={menu} trigger={['click']} placement="bottomRight" className="bg-white border border-neutral-200 rounded-lg px-1 py-0.5 hover:border-teal">
+      <a onClick={(e) => e.preventDefault()} className="text-sm items-center gap-2 hover:text-teal">
+        <Space className="text-sm">
+        {options.find((item) => item.value === filter.eventsOrder)?.label || 'Select'} 
+        </Space>
+      </a>
+
+      </Dropdown>
+    </div>
+  );
     </div>;
 });
+        
+        //<Select
+          //  size={"small"}
+            //className="text-sm"
+          //  onChange={(v) => onChange(null, options.find((i) => i.value === v))}
+          //  value={filter.eventsOrder}
+          //  options={options}
+        ///>
 
 export default EventsOrder;
diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
index 8effc13b6..16f634a6e 100644
--- a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
+++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
@@ -1,4 +1,4 @@
-import { GripHorizontal, Plus, Filter } from 'lucide-react';
+import { GripVertical, Plus, Filter } from 'lucide-react';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
 import { Button } from 'antd';
@@ -55,7 +55,7 @@ export const FilterList = observer((props: Props) => {
       }}
     >
       <div className={'flex items-center mb-2'} style={{ gap: '0.65rem' }}>
-        <div className="font-semibold">Filters</div>
+        <div className="font-medium">Filters</div>
         <FilterSelection mode={'filters'} filter={undefined} onFilterClick={onAddFilter} disabled={readonly}>
           <Button icon={<Filter size={16} strokeWidth={1} />} type="default" size={'small'}>
             Add
@@ -66,7 +66,7 @@ export const FilterList = observer((props: Props) => {
         !filter.isEvent ? (
           <div
             key={`${filter.key}-${filterIndex}`}
-            className={'py-2 hover:bg-active-blue px-5'}
+            className={'py-2 hover:bg-active-blue px-5 '}
             style={{
               marginLeft: '-1.25rem',
               width: 'calc(100% + 2.5rem)',
@@ -187,7 +187,7 @@ export const EventsList = observer((props: Props) => {
       }}
     >
       <div className="flex items-center mb-2 gap-2">
-        <div className="font-semibold">Events</div>
+        <div className="font-medium">Events</div>
         <FilterSelection mode={'events'} filter={undefined} onFilterClick={onAddFilter}>
           <Button icon={<Plus size={16} strokeWidth={1} />} type="default" size={'small'}>
             Add
@@ -220,6 +220,9 @@ export const EventsList = observer((props: Props) => {
                     : '0.5rem',
                 marginLeft: '-1.25rem',
                 width: 'calc(100% + 2.5rem)',
+                alignItems: 'start',
+                
+                
               }}
               className={'hover:bg-active-blue px-5 gap-2 items-center flex'}
               id={`${filter.key}-${filterIndex}`}
@@ -229,7 +232,7 @@ export const EventsList = observer((props: Props) => {
             >
               {!!props.onFilterMove && eventsNum > 1 ? (
                 <div
-                  className={'p-2 cursor-grab'}
+                  className={'p-2 cursor-grab text-neutral-500/90 hover:bg-gray-lighter	px-1 pt-2 rounded-lg'}
                   draggable={!!props.onFilterMove}
                   onDragStart={(e) =>
                     handleDragStart(
@@ -239,7 +242,7 @@ export const EventsList = observer((props: Props) => {
                     )
                   }
                 >
-                  <GripHorizontal size={16} />
+                  <GripVertical size={16} />
                 </div>
               ) : null}
               <FilterItem
diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
index 0be8d843b..a690bf6f9 100644
--- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
+++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
@@ -42,39 +42,39 @@ import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 
 const IconMap = {
-  [FilterKey.CLICK]: <Pointer size={18} />,
-  [FilterKey.LOCATION]: <Navigation size={18} />,
-  [FilterKey.INPUT]: <RectangleEllipsis size={18} />,
-  [FilterKey.CUSTOM]: <Code size={18} />,
-  [FilterKey.FETCH]: <ArrowUpDown size={18} />,
-  [FilterKey.GRAPHQL]: <Network size={18} />,
-  [FilterKey.STATEACTION]: <RectangleEllipsis size={18} />,
-  [FilterKey.ERROR]: <OctagonAlert size={18} />,
-  [FilterKey.ISSUE]: <CircleAlert size={18} />,
-  [FilterKey.FETCH_FAILED]: <Code size={18} />,
-  [FilterKey.DOM_COMPLETE]: <ArrowUpDown size={18} />,
-  [FilterKey.LARGEST_CONTENTFUL_PAINT_TIME]: <Network size={18} />,
-  [FilterKey.TTFB]: <Timer size={18} />,
-  [FilterKey.AVG_CPU_LOAD]: <Cpu size={18} />,
-  [FilterKey.AVG_MEMORY_USAGE]: <MemoryStick size={18} />,
-  [FilterKey.USERID]: <SquareUser size={18} />,
-  [FilterKey.USERANONYMOUSID]: <VenetianMask size={18} />,
-  [FilterKey.USER_CITY]: <Pin size={18} />,
-  [FilterKey.USER_STATE]: <MapPin size={18} />,
-  [FilterKey.USER_COUNTRY]: <Earth size={18} />,
-  [FilterKey.USER_DEVICE]: <Code size={18} />,
-  [FilterKey.USER_OS]: <AppWindow size={18} />,
-  [FilterKey.USER_BROWSER]: <Chrome size={18} />,
-  [FilterKey.PLATFORM]: <MonitorSmartphone size={18} />,
-  [FilterKey.REVID]: <FileStack size={18} />,
-  [FilterKey.REFERRER]: <Workflow size={18} />,
-  [FilterKey.DURATION]: <Clock2 size={18} />,
-  [FilterKey.TAGGED_ELEMENT]: <SquareMousePointer size={18} />,
-  [FilterKey.METADATA]: <ContactRound size={18} />,
-  [FilterKey.UTM_SOURCE]: <CornerDownRight size={18} />,
-  [FilterKey.UTM_MEDIUM]: <Layers size={18} />,
-  [FilterKey.UTM_CAMPAIGN]: <Megaphone size={18} />,
-  [FilterKey.FEATURE_FLAG]: <Flag size={18} />,
+  [FilterKey.CLICK]: <Pointer size={14}/>,
+  [FilterKey.LOCATION]: <Navigation size={14} />,
+  [FilterKey.INPUT]: <RectangleEllipsis size={14} />,
+  [FilterKey.CUSTOM]: <Code size={14} />,
+  [FilterKey.FETCH]: <ArrowUpDown size={14} />,
+  [FilterKey.GRAPHQL]: <Network size={14} />,
+  [FilterKey.STATEACTION]: <RectangleEllipsis size={14} />,
+  [FilterKey.ERROR]: <OctagonAlert size={14} />,
+  [FilterKey.ISSUE]: <CircleAlert size={14} />,
+  [FilterKey.FETCH_FAILED]: <Code size={14} />,
+  [FilterKey.DOM_COMPLETE]: <ArrowUpDown size={14} />,
+  [FilterKey.LARGEST_CONTENTFUL_PAINT_TIME]: <Network size={14} />,
+  [FilterKey.TTFB]: <Timer size={14} />,
+  [FilterKey.AVG_CPU_LOAD]: <Cpu size={14} />,
+  [FilterKey.AVG_MEMORY_USAGE]: <MemoryStick size={14} />,
+  [FilterKey.USERID]: <SquareUser size={14} />,
+  [FilterKey.USERANONYMOUSID]: <VenetianMask size={14} />,
+  [FilterKey.USER_CITY]: <Pin size={14} />,
+  [FilterKey.USER_STATE]: <MapPin size={14} />,
+  [FilterKey.USER_COUNTRY]: <Earth size={14} />,
+  [FilterKey.USER_DEVICE]: <Code size={14} />,
+  [FilterKey.USER_OS]: <AppWindow size={14} />,
+  [FilterKey.USER_BROWSER]: <Chrome size={14} />,
+  [FilterKey.PLATFORM]: <MonitorSmartphone size={14} />,
+  [FilterKey.REVID]: <FileStack size={14} />,
+  [FilterKey.REFERRER]: <Workflow size={14} />,
+  [FilterKey.DURATION]: <Clock2 size={14} />,
+  [FilterKey.TAGGED_ELEMENT]: <SquareMousePointer size={14} />,
+  [FilterKey.METADATA]: <ContactRound size={14} />,
+  [FilterKey.UTM_SOURCE]: <CornerDownRight size={14} />,
+  [FilterKey.UTM_MEDIUM]: <Layers size={14} />,
+  [FilterKey.UTM_CAMPAIGN]: <Megaphone size={14} />,
+  [FilterKey.FEATURE_FLAG]: <Flag size={14} />,
 };
 
 function filterJson(
@@ -216,21 +216,21 @@ function FilterModal(props: Props) {
   return (
     <div
       className={stl.wrapper}
-      style={{ width: '560px', height: '380px', borderRadius: '.5rem' }}
+      style={{ width: '560px', maxHeight: '380px' }}
     >
       <Input
-        className={'mb-4'}
+        className={'mb-4 rounded-xl text-lg font-medium placeholder:text-lg placeholder:font-medium placeholder:text-neutral-300'}
         placeholder={'Search'}
         value={searchQuery}
         onChange={(e) => setSearchQuery(e.target.value)}
       />
       <div className={'flex gap-2 items-start'}>
-        <div className={'flex flex-col gap-1'} style={{ flex: 1 }}>
+        <div className={'flex flex-col gap-1'}>
           {matchingCategories.map((key) => (
             <div
               key={key}
               onClick={() => setCategory(key)}
-              className={cn('rounded px-4 py-2 hover:bg-active-blue capitalize cursor-pointer', key === category ? 'bg-active-blue' : '')}
+              className={cn('rounded-xl px-4 py-2 hover:bg-active-blue capitalize cursor-pointer font-medium', key === category ? 'bg-active-blue text-teal' : '')}
             >
               {key.toLowerCase()}
             </div>
@@ -249,12 +249,12 @@ function FilterModal(props: Props) {
                   )}
                   onClick={() => onFilterClick({ ...filter })}
                 >
-                  {filter.category ? <div style={{ width: 150 }} className={'text-disabled-text w-full flex justify-between items-center'}>
+                  {filter.category ? <div style={{ width: 100 }} className={'text-neutral-500/90		 w-full flex justify-between items-center'}>
                     <span>{filter.category}</span>
                     <ChevronRight size={14} />
                   </div> : null}
                   <div className={'flex items-center gap-2'}>
-                    {getNewIcon(filter)}
+                    <span className='text-neutral-500/90	 text-xs'>{getNewIcon(filter)}</span>
                     <span>{filter.label}</span>
                   </div>
                 </div>
diff --git a/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
index c90a57954..d8b4741dd 100644
--- a/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
+++ b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
@@ -11,6 +11,7 @@ const dropdownStyles = {
       height: '26px',
       minHeight: '26px',
       backgroundColor: 'white',
+      borderRadius: '.5rem',
     }
     return obj;
   },
diff --git a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
index 74ccac3c7..d4aa16f3f 100644
--- a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
+++ b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
@@ -62,7 +62,7 @@ function FilterSelection(props: Props) {
         ) : (
           <div
             className={cn(
-              'rounded-lg py-1 px-2 flex items-center gap-1 cursor-pointer bg-white border border-gray-light text-ellipsis',
+              'rounded-lg py-1 px-2 flex items-center gap-1 cursor-pointer bg-white border border-gray-light text-ellipsis hover:border-neutral-400',
               { 'opacity-50 pointer-events-none': disabled }
             )}
             style={{
@@ -70,10 +70,10 @@ function FilterSelection(props: Props) {
             }}
             onClick={() => setShowModal(true)}
           >
-            <div>{getNewIcon(filter)}</div>
-            <div className={'text-disabled-text'}>{`${filter.category} .`}</div>
+            <div className='text-xs text-neutral-500/90'>{getNewIcon(filter)}</div>
+            <div className={'text-neutral-500/90 flex gap-2'}>{`${filter.category} •`}</div>
             <div
-              className="overflow-hidden whitespace-nowrap text-ellipsis mr-auto truncate"
+              className="rounded-lg overflow-hidden whitespace-nowrap text-ellipsis mr-auto truncate "
               style={{ textOverflow: 'ellipsis' }}
             >
               {label}
@@ -81,7 +81,7 @@ function FilterSelection(props: Props) {
           </div>
         )}
         {showModal && (
-          <div className="absolute mt-2 left-0 rounded-lg shadow bg-white z-50">
+          <div className="absolute mt-2 left-0 rounded-2xl shadow-lg bg-white z-50">
             <FilterModal
               isLive={isRoute(ASSIST_ROUTE, window.location.pathname)}
               onFilterClick={onAddFilter}
diff --git a/frontend/app/styles/general.css b/frontend/app/styles/general.css
index e95217db4..2476facf2 100644
--- a/frontend/app/styles/general.css
+++ b/frontend/app/styles/general.css
@@ -158,7 +158,7 @@
 }
 
 .border-gray-light {
-  border: solid thin $gray-light
+  border: solid thin rgb(229 231 235  / var(--tw-text-opacity, 1))
 }
 
 .btn-disabled {
diff --git a/tracker/tracker/src/main/modules/userTesting/styles.ts b/tracker/tracker/src/main/modules/userTesting/styles.ts
index 14965dffa..972fd54f9 100644
--- a/tracker/tracker/src/main/modules/userTesting/styles.ts
+++ b/tracker/tracker/src/main/modules/userTesting/styles.ts
@@ -19,7 +19,7 @@ export const containerStyle = {
   alignItems: 'center',
   padding: '1.5rem',
   borderRadius: '2px',
-  border: '1px solid #D9D9D9',
+  border: '1px solid rgb(255 255 255 / var(--tw-bg-opacity, 1))',
   background: '#FFF',
   width: '22rem',
 }
@@ -31,7 +31,7 @@ export const containerWidgetStyle = {
   padding: 'unset',
   fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
   'border-radius': '2px',
-  border: '1px solid #D9D9D9',
+  border: '1px solid rgb(255 255 255 / var(--tw-bg-opacity, 1))',
   background: 'rgba(255, 255, 255, 0.75)',
   width: '22rem',
 }
@@ -129,7 +129,7 @@ export const descriptionWidgetStyle = {
   boxSizing: 'border-box',
   display: 'block',
   width: '100%',
-  borderBottom: '1px solid #D9D9D9',
+  borderBottom: '1px solid rgb(255 255 255 / var(--tw-bg-opacity, 1))',
   background: '#FFF',
   padding: '0.65rem',
   alignSelf: 'stretch',