refactor(FOROME-933): use PopperButton for open conditions options popup

Author: QYaroslavTrefilov

src/components/popper-menu/popper-menu-item.tsx

@@ -6,7 +6,7 @@ import { Icon, TIcons } from '@ui/icon'
 export interface IPopperMenuItemProps {
   iconName?: TIcons
   className?: Argument
-  onClick?: () => void
+  onClick?: (event: any) => void
   isDisabled?: boolean
 }
 

src/pages/filter/refiner/components/right-column/condition-modal-options-button.tsx

@@ -0,0 +1,30 @@
+import { ReactElement } from 'react'
+
+import { Button } from '@ui/button'
+import { Icon } from '@ui/icon'
+
+interface IProps {
+  refEl: any
+  onClick?: () => void
+}
+
+export const ConditionModalOptionsButton = ({
+  refEl,
+  ...rest
+}: IProps): ReactElement => {
+  return (
+    <Button
+      refEl={refEl}
+      onClick={rest.onClick}
+      className="bg-transparent hover:bg-transparent  active:bg-transparent"
+      append={
+        <Icon
+          name="Options"
+          className="cursor-pointer text-blue-bright"
+          stroke={false}
+        />
+      }
+      onMouseUp={e => e.stopPropagation()}
+    />
+  )
+}

src/pages/filter/refiner/components/right-column/condition-modal-options-popup.tsx

@@ -1,26 +1,22 @@
-import { ReactElement, useRef } from 'react'
+import { ReactElement } from 'react'
 
 import { copyToClipboard } from '@core/copy-to-clipboard'
-import { useOutsideClick } from '@core/hooks/use-outside-click'
 import { t } from '@i18n'
+import filterStore from '@store/filter'
 import { Icon } from '@ui/icon'
 import { DecisionTreeModalDataCy } from '@components/data-testid/decision-tree-modal.cy'
+import {
+  IPopperMenuProps,
+  PopperMenu,
+} from '@components/popper-menu/popper-menu'
+import { PopperMenuItem } from '@components/popper-menu/popper-menu-item'
 import { showToast } from '@utils/notifications/showToast'
 
-interface IConditionModalOptionsPopup {
-  onClose: () => void
-  onDeleteCondition: () => void
-  filterName: string
-}
-
 export const ConditionModalOptionsPopup = ({
-  onClose,
-  onDeleteCondition,
-  filterName,
-}: IConditionModalOptionsPopup): ReactElement => {
-  const ref = useRef(null)
-
-  useOutsideClick(ref, () => onClose())
+  close,
+}: IPopperMenuProps): ReactElement => {
+  const { selectedConditionIndex, conditions } = filterStore
+  const filterName = conditions[selectedConditionIndex]?.[1] ?? ''
 
   const handleCopyFilterName = (e: React.MouseEvent) => {
     e.stopPropagation()
@@ -29,37 +25,38 @@ export const ConditionModalOptionsPopup = ({
 
     showToast(t('ds.copied'), 'info')
 
-    onClose()
+    close()
   }
 
   const handleDeleteFilterBlock = (e: React.MouseEvent) => {
     e.stopPropagation()
-    onDeleteCondition()
+    filterStore.removeCondition(selectedConditionIndex)
+    close()
   }
 
   return (
-    <div ref={ref} className="top-4 right-6 absolute z-50 text-14 font-normal">
-      <div className="top-8 flex flex-col justify-between px-0 py-0 bg-white rounded-md shadow-dark">
-        <div
-          onClick={handleDeleteFilterBlock}
-          className="flex items-center justify-between py-2 px-2 rounded-br-none rounded-bl-none rounded-l-md rounded-r-md cursor-pointer hover:bg-blue-bright hover:text-white"
-          data-testId={DecisionTreeModalDataCy.joinByAnd}
-        >
-          <div className="mr-2">{t('filter.delete')}</div>
+    <PopperMenu close={close} className="w-32">
+      <PopperMenuItem
+        onClick={handleDeleteFilterBlock}
+        data-testid={DecisionTreeModalDataCy.joinByAnd}
+      >
+        <div className="flex items-center justify-between">
+          <span className="mr-2">{t('filter.delete')}</span>
 
           <Icon name="Delete" />
         </div>
+      </PopperMenuItem>
 
-        <div
-          onClick={handleCopyFilterName}
-          className="flex items-center justify-between py-2 px-2 rounded-bl-md rounded-br-md cursor-pointer hover:bg-blue-bright hover:text-white"
-          data-testId={DecisionTreeModalDataCy.joinByOr}
-        >
-          <div>{t('filter.copy')}</div>
+      <PopperMenuItem
+        onClick={handleCopyFilterName}
+        data-testid={DecisionTreeModalDataCy.joinByOr}
+      >
+        <div className="flex items-center justify-between">
+          <span className="mr-2">{t('filter.copy')}</span>
 
           <Icon name="Copy" className="text-grey-blue" />
         </div>
-      </div>
-    </div>
+      </PopperMenuItem>
+    </PopperMenu>
   )
 }

src/pages/filter/refiner/components/right-column/query-results.tsx

@@ -40,8 +40,6 @@ export const QueryResults = observer((): ReactElement => {
           <SelectedFilterCard
             isActive={index === selectedConditionIndex}
             condition={condition}
-            onSelect={() => filterStore.selectCondition(index)}
-            onDelete={() => filterStore.removeCondition(index)}
           />
         </div>
       ))}

src/pages/filter/refiner/components/right-column/selected-filter-card.tsx

@@ -4,33 +4,31 @@ import { observer } from 'mobx-react-lite'
 
 import { FilterKindEnum } from '@core/enum/filter-kind.enum'
 import { useToggle } from '@core/hooks/use-toggle'
+import filterStore from '@store/filter'
 import { Icon } from '@ui/icon'
+import { PopperButton } from '@components/popper-button'
 import { ConditionJoinMode } from '@service-providers/common'
 import {
   TCondition,
   TFuncArgs,
   TNumericConditionBounds,
 } from '@service-providers/common/common.interface'
 import { AllNotModeLabel } from './all-not-mode-label'
+import { ConditionModalOptionsButton } from './condition-modal-options-button'
 import { ConditionModalOptionsPopup } from './condition-modal-options-popup'
 import { EnumFilter } from './enum-filter'
 import { FuncFilter } from './func-filter'
 import { NumericFilter } from './numeric-filter'
 
 interface ISelectedFilterCardProps {
   isActive: boolean
-  onSelect: () => void
-  onDelete: () => void
   condition: TCondition
 }
 
 export const SelectedFilterCard = observer(
-  ({
-    isActive,
-    onSelect,
-    onDelete,
-    condition,
-  }: ISelectedFilterCardProps): ReactElement => {
+  ({ isActive, condition }: ISelectedFilterCardProps): ReactElement => {
+    const { selectedConditionIndex } = filterStore
+
     // TODO: mobx warning for out of bounds read from condition
     //       not all of conditions have 3rd and 4th value
     const filterType: string = condition[0]
@@ -45,28 +43,19 @@ export const SelectedFilterCard = observer(
     const [isFilterContentVisible, showFilterContent, hideFilterContent] =
       useToggle(true)
 
-    const [isModalOptionsVisible, showModalOptions, hideModalOptions] =
-      useToggle(false)
-
     const toggleFilterContentVisibility = (event: React.MouseEvent) => {
       event.stopPropagation()
 
       isFilterContentVisible ? hideFilterContent() : showFilterContent()
     }
 
-    const toggleModalOptionsVisibility = (event: React.MouseEvent) => {
-      event.stopPropagation()
-
-      isModalOptionsVisible ? hideModalOptions() : showModalOptions()
-    }
-
     return (
       <>
         <div
           className={cn('relative flex flex-col px-3 cursor-pointer', {
             'bg-blue-tertiary': isActive,
           })}
-          onClick={onSelect}
+          onClick={() => filterStore.selectCondition(selectedConditionIndex)}
         >
           <div className="flex py-4 justify-between">
             <div className="flex" onClick={toggleFilterContentVisibility}>
@@ -86,20 +75,10 @@ export const SelectedFilterCard = observer(
               />
             </div>
 
-            <Icon
-              name="Options"
-              className="cursor-pointer text-blue-bright"
-              stroke={false}
-              onClick={toggleModalOptionsVisibility}
+            <PopperButton
+              ButtonElement={ConditionModalOptionsButton}
+              ModalElement={ConditionModalOptionsPopup}
             />
-
-            {isModalOptionsVisible && (
-              <ConditionModalOptionsPopup
-                onClose={hideModalOptions}
-                onDeleteCondition={onDelete}
-                filterName={filterName}
-              />
-            )}
           </div>
 
           <div className="bg-grey-light h-px w-full" />