Omni-search improvements. (#2823)

Co-authored-by: Sudheer Salavadi <connect.uxmaster@gmail.com>
2024-12-06 17:36:02 +01:00 · 2024-12-06 17:36:02 +01:00 · 71844f395d
commit 71844f395d
parent 16ab955da7
9 changed files with 106 additions and 67 deletions
--- 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>
--- 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
--- 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;
--- 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
--- 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>
--- 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;
  },
--- 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}
--- 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 {
--- 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',