From 3364d5fa97fd018d998717a5cb9cd40cbc3aff1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Thu, 17 Oct 2024 15:01:56 -0500
Subject: [PATCH 1/2] 4002 - Tablepaginated filter by user role/admin users
 role - Integration (#4038)

* 4002 - Add Filter multi select type

* 4002 - Add draft multi select to Users table

* 2661 - Display all columns
---
 .../TablePaginated/Filters/Filters.tsx        |  4 ++-
 .../Filters/MultiSelect/MultiSelect.tsx       | 35 +++++++++++++++++++
 src/client/components/TablePaginated/types.ts | 15 +++++++-
 .../Admin/UserManagement/UserManagement.tsx   |  3 +-
 .../Admin/UserManagement/hooks/useColumns.tsx |  8 +++--
 .../Admin/UserManagement/hooks/useFilters.tsx | 19 ++++++++--
 src/meta/tablePaginated/tablePaginated.ts     |  3 +-
 7 files changed, 76 insertions(+), 11 deletions(-)
 create mode 100644 src/client/components/TablePaginated/Filters/MultiSelect/MultiSelect.tsx

diff --git a/src/client/components/TablePaginated/Filters/Filters.tsx b/src/client/components/TablePaginated/Filters/Filters.tsx
index 44f7c75c21..6a6a407e18 100644
--- a/src/client/components/TablePaginated/Filters/Filters.tsx
+++ b/src/client/components/TablePaginated/Filters/Filters.tsx
@@ -4,6 +4,7 @@ import React from 'react'
 import { TablePaginatedFilterType } from 'meta/tablePaginated'
 
 import Icon from 'client/components/Icon'
+import MultiSelect from 'client/components/TablePaginated/Filters/MultiSelect/MultiSelect'
 import Text from 'client/components/TablePaginated/Filters/Text/Text'
 import { TablePaginatedFilter } from 'client/components/TablePaginated/types'
 
@@ -11,8 +12,9 @@ const componentsByFilterType: Record<
   TablePaginatedFilterType,
   React.FC<TablePaginatedFilter<TablePaginatedFilterType> & { path: string }>
 > = {
-  [TablePaginatedFilterType.TEXT]: Text,
+  [TablePaginatedFilterType.MULTI_SELECT]: MultiSelect,
   [TablePaginatedFilterType.SWITCH]: () => null,
+  [TablePaginatedFilterType.TEXT]: Text,
 }
 
 type Props = {
diff --git a/src/client/components/TablePaginated/Filters/MultiSelect/MultiSelect.tsx b/src/client/components/TablePaginated/Filters/MultiSelect/MultiSelect.tsx
new file mode 100644
index 0000000000..099dc44fe8
--- /dev/null
+++ b/src/client/components/TablePaginated/Filters/MultiSelect/MultiSelect.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+
+import { TablePaginatedFilterType } from 'meta/tablePaginated'
+
+import { useAppDispatch } from 'client/store'
+import { TablePaginatedActions } from 'client/store/ui/tablePaginated'
+import { useTablePaginatedFilterValue } from 'client/store/ui/tablePaginated/hooks'
+import Select from 'client/components/Inputs/Select'
+import { TablePaginatedFilter } from 'client/components/TablePaginated/types'
+
+type Props = TablePaginatedFilter<TablePaginatedFilterType.MULTI_SELECT> & {
+  path: string
+}
+
+const MultiSelect = (props: Props) => {
+  const { fieldName, label, path, options } = props
+
+  const dispatch = useAppDispatch()
+
+  const filterValue = useTablePaginatedFilterValue<string>(path, fieldName)
+
+  const handleChange = (value: Array<string>) => {
+    dispatch(
+      TablePaginatedActions.setFilterValue({
+        fieldName,
+        path,
+        value,
+      })
+    )
+  }
+
+  return <Select isMulti onChange={handleChange} options={options} placeholder={label} value={filterValue} />
+}
+
+export default MultiSelect
diff --git a/src/client/components/TablePaginated/types.ts b/src/client/components/TablePaginated/types.ts
index 4d90e6b95a..8e1a98bdf0 100644
--- a/src/client/components/TablePaginated/types.ts
+++ b/src/client/components/TablePaginated/types.ts
@@ -31,11 +31,12 @@ export type TablePaginatedCounter = {
 export type TablePaginatedEmptyListComponent = React.FC
 
 type TablePaginatedFilterTypeMap = {
+  [TablePaginatedFilterType.MULTI_SELECT]: Array<string>
   [TablePaginatedFilterType.SWITCH]: boolean
   [TablePaginatedFilterType.TEXT]: string
 }
 
-export type TablePaginatedFilter<FilterType extends TablePaginatedFilterType> = {
+type BaseTablePaginatedFilter<FilterType extends TablePaginatedFilterType> = {
   defaultValue?: TablePaginatedFilterTypeMap[FilterType]
   fieldName: string
   hidden?: boolean
@@ -43,6 +44,18 @@ export type TablePaginatedFilter<FilterType extends TablePaginatedFilterType> =
   type: FilterType
 }
 
+type MultiSelectItem = {
+  label: string
+  value: string
+}
+
+type MultiSelectFilter = BaseTablePaginatedFilter<TablePaginatedFilterType.MULTI_SELECT> & {
+  options: Array<MultiSelectItem>
+}
+
+export type TablePaginatedFilter<FilterType extends TablePaginatedFilterType> =
+  FilterType extends TablePaginatedFilterType.MULTI_SELECT ? MultiSelectFilter : BaseTablePaginatedFilter<FilterType>
+
 export type TablePaginatedSkeleton = {
   baseColor: string
   highlightColor: string
diff --git a/src/client/pages/Admin/UserManagement/UserManagement.tsx b/src/client/pages/Admin/UserManagement/UserManagement.tsx
index f3439b3d76..85a617b0d2 100644
--- a/src/client/pages/Admin/UserManagement/UserManagement.tsx
+++ b/src/client/pages/Admin/UserManagement/UserManagement.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 
 import { ApiEndPoint } from 'meta/api/endpoint'
-import { RoleName } from 'meta/user'
 
 import TablePaginated from 'client/components/TablePaginated'
 import UsersCount from 'client/pages/Admin/UserManagement/UsersCount'
@@ -13,7 +12,7 @@ const UserManagement: React.FC = () => {
   const columns = useColumns()
   const filters = useFilters()
 
-  const gridTemplateColumns = `repeat(${Object.values(RoleName).length + 1}, 1fr)`
+  const gridTemplateColumns = `repeat(${columns.length}, 1fr)`
 
   return (
     <TablePaginated
diff --git a/src/client/pages/Admin/UserManagement/hooks/useColumns.tsx b/src/client/pages/Admin/UserManagement/hooks/useColumns.tsx
index e3aa623c5a..a80e00d1c5 100644
--- a/src/client/pages/Admin/UserManagement/hooks/useColumns.tsx
+++ b/src/client/pages/Admin/UserManagement/hooks/useColumns.tsx
@@ -7,11 +7,13 @@ import { Column } from 'client/components/TablePaginated'
 import NameField from 'client/pages/Admin/UserManagement/NameField'
 import RoleField from 'client/pages/Admin/UserManagement/RoleField'
 
-export const useColumns = (): Array<Column<User>> => {
+type Returned = Array<Column<User>>
+
+export const useColumns = (): Returned => {
   const { t } = useTranslation()
 
-  return useMemo<Array<Column<User>>>(() => {
-    const roleColumns: Array<Column<User>> = Object.values(RoleName).map((roleName) => ({
+  return useMemo<Returned>(() => {
+    const roleColumns: Returned = Object.values(RoleName).map((roleName) => ({
       component: ({ datum }) => <RoleField roleName={roleName} user={datum} />,
       header: t(Users.getI18nRoleLabelKey(roleName)),
       key: roleName,
diff --git a/src/client/pages/Admin/UserManagement/hooks/useFilters.tsx b/src/client/pages/Admin/UserManagement/hooks/useFilters.tsx
index 38b210d303..9bcff1befb 100644
--- a/src/client/pages/Admin/UserManagement/hooks/useFilters.tsx
+++ b/src/client/pages/Admin/UserManagement/hooks/useFilters.tsx
@@ -2,17 +2,24 @@ import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { TablePaginatedFilterType } from 'meta/tablePaginated'
+import { RoleName, Users } from 'meta/user'
 
 import { TablePaginatedFilter } from 'client/components/TablePaginated/types'
 
-type Returned = Array<
-  TablePaginatedFilter<TablePaginatedFilterType.TEXT> | TablePaginatedFilter<TablePaginatedFilterType.SWITCH>
->
+type Returned = Array<TablePaginatedFilter<TablePaginatedFilterType>>
 
 export const useFilters = (): Returned => {
   const { t } = useTranslation()
 
   return useMemo<Returned>(() => {
+    const roleOptions: Array<{
+      label: string
+      value: RoleName
+    }> = Object.values(RoleName).map((roleName) => ({
+      label: t(Users.getI18nRoleLabelKey(roleName)),
+      value: roleName,
+    }))
+
     return [
       {
         fieldName: 'fullName',
@@ -26,6 +33,12 @@ export const useFilters = (): Returned => {
         label: '',
         type: TablePaginatedFilterType.SWITCH,
       },
+      {
+        fieldName: 'roles',
+        label: t('common.role'),
+        options: roleOptions,
+        type: TablePaginatedFilterType.MULTI_SELECT,
+      },
     ]
   }, [t])
 }
diff --git a/src/meta/tablePaginated/tablePaginated.ts b/src/meta/tablePaginated/tablePaginated.ts
index 1654496d7c..3300812966 100644
--- a/src/meta/tablePaginated/tablePaginated.ts
+++ b/src/meta/tablePaginated/tablePaginated.ts
@@ -16,8 +16,9 @@ export type TablePaginatedCount = {
 }
 
 export enum TablePaginatedFilterType {
-  TEXT = 'text',
+  MULTI_SELECT = 'multi_select',
   SWITCH = 'switch',
+  TEXT = 'text',
 }
 
 export type TablePaginatedFilterValues = boolean | string | Array<string>

From f6ca56a0a523b9bc9c12cb45239ad58d0b741d53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yhoan=20Alejandro=20Guzm=C3=A1n=20Garc=C3=ADa?=
 <41337901+yaguzmang@users.noreply.github.com>
Date: Mon, 21 Oct 2024 10:47:49 -0500
Subject: [PATCH 2/2] 4002 - TablePaginated: Filter by User Role + Admin users
 'Role' - Multiselect UI (#4049)

* 4002 - Hide clear button in Text filter

* 4002 - Add counter label for multi select

* 4002 - Expose Select onMenuClose & onMenuOpen props

* 4002 - Add Filter multiselect styling and tooltip

* 4002 - Fix table overlapping select options

* 4002 - Add spacing between label and search input

* 4002 - Fix props order in Select

* 4002 - Rename isTooltipVisible to canDisplayTooltip

* 4002 - Rename MultiValue to MultiValueSummary

* 4002 - Rename multiLabelKey to multiLabelSummaryKey

* 4002 - Remove import as OriginalMultiValueProps

* 4002 - Render Text x button conditionally

* 4002 - Update useTooltipContent

* 4002 - Fix styling
---
 .../MultiValueSummary/MultiValueSummary.scss  |  5 ++
 .../MultiValueSummary/MultiValueSummary.tsx   | 24 ++++++++
 .../Indicators/MultiValueSummary/index.ts     |  1 +
 .../Inputs/Select/Indicators/index.ts         |  1 +
 .../components/Inputs/Select/Select.tsx       |  4 +-
 .../{useComponents.ts => useComponents.tsx}   | 17 ++++--
 src/client/components/Inputs/Select/types.ts  |  6 +-
 .../TablePaginated/Filters/Filters.scss       |  1 +
 .../Filters/MultiSelect/MultiSelect.scss      | 53 +++++++++++++++++
 .../Filters/MultiSelect/MultiSelect.tsx       | 36 +++++++++++-
 .../MultiSelect/hooks/useTooltipContent.ts    | 57 +++++++++++++++++++
 .../TablePaginated/Filters/Text/Text.scss     |  6 +-
 .../TablePaginated/Filters/Text/Text.tsx      | 12 ++--
 .../TablePaginated/TablePaginated.scss        |  1 +
 src/i18n/resources/en/admin.json              |  2 +
 15 files changed, 205 insertions(+), 21 deletions(-)
 create mode 100644 src/client/components/Inputs/Select/Indicators/MultiValueSummary/MultiValueSummary.scss
 create mode 100644 src/client/components/Inputs/Select/Indicators/MultiValueSummary/MultiValueSummary.tsx
 create mode 100644 src/client/components/Inputs/Select/Indicators/MultiValueSummary/index.ts
 rename src/client/components/Inputs/Select/hooks/{useComponents.ts => useComponents.tsx} (50%)
 create mode 100644 src/client/components/TablePaginated/Filters/MultiSelect/MultiSelect.scss
 create mode 100644 src/client/components/TablePaginated/Filters/MultiSelect/hooks/useTooltipContent.ts

diff --git a/src/client/components/Inputs/Select/Indicators/MultiValueSummary/MultiValueSummary.scss b/src/client/components/Inputs/Select/Indicators/MultiValueSummary/MultiValueSummary.scss
new file mode 100644
index 0000000000..f3cf705ce2
--- /dev/null
+++ b/src/client/components/Inputs/Select/Indicators/MultiValueSummary/MultiValueSummary.scss
@@ -0,0 +1,5 @@
+@import 'src/client/style/partials';
+
+.select__multiValue-label {
+  padding-right: $spacing-xxxs;
+}
diff --git a/src/client/components/Inputs/Select/Indicators/MultiValueSummary/MultiValueSummary.tsx b/src/client/components/Inputs/Select/Indicators/MultiValueSummary/MultiValueSummary.tsx
new file mode 100644
index 0000000000..88bd86dd80
--- /dev/null
+++ b/src/client/components/Inputs/Select/Indicators/MultiValueSummary/MultiValueSummary.tsx
@@ -0,0 +1,24 @@
+import './MultiValueSummary.scss'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { MultiValueProps as OriginalMultiValueProps } from 'react-select'
+
+import { SelectProps } from 'client/components/Inputs/Select/types'
+
+type MultiValueProps = OriginalMultiValueProps & Pick<SelectProps, 'multiLabelSummaryKey'>
+
+export const MultiValueSummary: React.FC<MultiValueProps> = (props) => {
+  const { getValue, index, multiLabelSummaryKey } = props
+  const count = getValue().length
+  const { t } = useTranslation()
+
+  const displayCountLabel = index === 0
+
+  if (displayCountLabel) {
+    return <span className="select__multiValue-label">{t(multiLabelSummaryKey, { count })}</span>
+  }
+
+  return null
+}
+
+export default MultiValueSummary
diff --git a/src/client/components/Inputs/Select/Indicators/MultiValueSummary/index.ts b/src/client/components/Inputs/Select/Indicators/MultiValueSummary/index.ts
new file mode 100644
index 0000000000..1989526209
--- /dev/null
+++ b/src/client/components/Inputs/Select/Indicators/MultiValueSummary/index.ts
@@ -0,0 +1 @@
+export { MultiValueSummary } from './MultiValueSummary'
diff --git a/src/client/components/Inputs/Select/Indicators/index.ts b/src/client/components/Inputs/Select/Indicators/index.ts
index f2321e3927..c740f581ef 100644
--- a/src/client/components/Inputs/Select/Indicators/index.ts
+++ b/src/client/components/Inputs/Select/Indicators/index.ts
@@ -1,2 +1,3 @@
 export { ClearIndicator, DropdownIndicator, IndicatorsContainer } from './Indicators'
 export { MultiSelectOption } from './MultiSelectOption'
+export { MultiValueSummary } from './MultiValueSummary'
diff --git a/src/client/components/Inputs/Select/Select.tsx b/src/client/components/Inputs/Select/Select.tsx
index 995e0e5456..3ad62231af 100644
--- a/src/client/components/Inputs/Select/Select.tsx
+++ b/src/client/components/Inputs/Select/Select.tsx
@@ -10,7 +10,7 @@ import { useValue } from './hooks/useValue'
 import { SelectProps } from './types'
 
 const Select: React.FC<SelectProps> = (props) => {
-  const { disabled, isClearable, isMulti, maxMenuHeight, placeholder } = props
+  const { disabled, isClearable, isMulti, maxMenuHeight, onMenuClose, onMenuOpen, placeholder } = props
 
   const classNames = useClassNames(props)
   const components = useComponents(props)
@@ -32,6 +32,8 @@ const Select: React.FC<SelectProps> = (props) => {
       menuPlacement="auto"
       menuPosition="fixed"
       onChange={onChange}
+      onMenuClose={onMenuClose}
+      onMenuOpen={onMenuOpen}
       options={options}
       placeholder={placeholder ?? ''}
       value={value}
diff --git a/src/client/components/Inputs/Select/hooks/useComponents.ts b/src/client/components/Inputs/Select/hooks/useComponents.tsx
similarity index 50%
rename from src/client/components/Inputs/Select/hooks/useComponents.ts
rename to src/client/components/Inputs/Select/hooks/useComponents.tsx
index a8366885c7..b754b86623 100644
--- a/src/client/components/Inputs/Select/hooks/useComponents.ts
+++ b/src/client/components/Inputs/Select/hooks/useComponents.tsx
@@ -1,18 +1,21 @@
-import { useMemo } from 'react'
-import { Props as ReactSelectProps } from 'react-select'
+import React, { useMemo } from 'react'
+import { MultiValueProps, Props as ReactSelectProps } from 'react-select'
+
+import { Objects } from 'utils/objects'
 
 import {
   ClearIndicator,
   DropdownIndicator,
   IndicatorsContainer,
   MultiSelectOption,
+  MultiValueSummary,
 } from 'client/components/Inputs/Select/Indicators'
 import { SelectProps } from 'client/components/Inputs/Select/types'
 
 type Returned = ReactSelectProps['components']
 
 export const useComponents = (props: SelectProps): Returned => {
-  const { isMulti } = props
+  const { isMulti, multiLabelSummaryKey } = props
 
   return useMemo<Returned>(() => {
     const components: Returned = {
@@ -22,7 +25,13 @@ export const useComponents = (props: SelectProps): Returned => {
       IndicatorSeparator: null,
     }
     if (isMulti) components.Option = MultiSelectOption
+    if (isMulti && !Objects.isEmpty(multiLabelSummaryKey)) {
+      components.MultiValue = (originalMultiValueProps: MultiValueProps) => (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <MultiValueSummary {...originalMultiValueProps} multiLabelSummaryKey={multiLabelSummaryKey} />
+      )
+    }
 
     return components
-  }, [isMulti])
+  }, [isMulti, multiLabelSummaryKey])
 }
diff --git a/src/client/components/Inputs/Select/types.ts b/src/client/components/Inputs/Select/types.ts
index 0d48dab5ce..eac4bb212f 100644
--- a/src/client/components/Inputs/Select/types.ts
+++ b/src/client/components/Inputs/Select/types.ts
@@ -14,13 +14,17 @@ export type OptionsOrGroups = readonly (Option | OptionsGroup)[]
 
 export type ValueInput = string | Array<string> | null
 
-type SelectBaseProps = Pick<ReactSelectProps, 'isClearable' | 'isMulti' | 'maxMenuHeight' | 'placeholder'>
+type SelectBaseProps = Pick<
+  ReactSelectProps,
+  'isClearable' | 'isMulti' | 'maxMenuHeight' | 'onMenuOpen' | 'onMenuClose' | 'placeholder'
+>
 type SelectClassNamesProps = {
   classNames?: { container?: string }
 }
 export type SelectProps = SelectBaseProps &
   SelectClassNamesProps & {
     disabled?: boolean
+    multiLabelSummaryKey?: string
     onChange: (value: string | Array<string> | null) => void
     options: OptionsOrGroups
     toggleAll?: boolean
diff --git a/src/client/components/TablePaginated/Filters/Filters.scss b/src/client/components/TablePaginated/Filters/Filters.scss
index dfd2f4c7c9..81cb58654e 100644
--- a/src/client/components/TablePaginated/Filters/Filters.scss
+++ b/src/client/components/TablePaginated/Filters/Filters.scss
@@ -4,6 +4,7 @@
   align-items: center;
   display: flex;
   gap: $spacing-xxs;
+  height: 30px;
   width: 100%;
 
   svg.icon_filter {
diff --git a/src/client/components/TablePaginated/Filters/MultiSelect/MultiSelect.scss b/src/client/components/TablePaginated/Filters/MultiSelect/MultiSelect.scss
new file mode 100644
index 0000000000..da28ad31ed
--- /dev/null
+++ b/src/client/components/TablePaginated/Filters/MultiSelect/MultiSelect.scss
@@ -0,0 +1,53 @@
+@import 'src/client/style/partials';
+
+$icon-size: 14px;
+
+.filter-multiselect__tooltip-trigger {
+  height: 100%;
+}
+
+div.filter-multiselect__container {
+  border-radius: 2px;
+  border: 1px solid $ui-border;
+  font-size: $font-xxs;
+  min-width: #{3 * $spacing-xl};
+  padding: 0;
+  transition: all 0.2s ease;
+
+  div.select__control {
+    min-height: unset;
+    padding: 0 6px;
+
+    div.select__indicatorsContainer {
+      div.select__clearIndicator {
+        height: unset;
+        width: unset;
+
+        svg.icon {
+          color: rgba(0, 0, 0, 0.5);
+          height: $icon-size;
+          width: $icon-size;
+        }
+
+        &:hover {
+          background-color: unset;
+
+          svg.icon {
+            color: $ui-destructive;
+          }
+        }
+      }
+    }
+  }
+
+  div.select__dropdownIndicator {
+    svg {
+      height: $icon-size;
+      width: $icon-size;
+    }
+  }
+
+  &.active {
+    border: 1px solid $ui-accent;
+  }
+}
diff --git a/src/client/components/TablePaginated/Filters/MultiSelect/MultiSelect.tsx b/src/client/components/TablePaginated/Filters/MultiSelect/MultiSelect.tsx
index 099dc44fe8..7b03ea2f26 100644
--- a/src/client/components/TablePaginated/Filters/MultiSelect/MultiSelect.tsx
+++ b/src/client/components/TablePaginated/Filters/MultiSelect/MultiSelect.tsx
@@ -1,6 +1,10 @@
+import './MultiSelect.scss'
 import React from 'react'
 
+import classNames from 'classnames'
+
 import { TablePaginatedFilterType } from 'meta/tablePaginated'
+import { TooltipId } from 'meta/tooltip'
 
 import { useAppDispatch } from 'client/store'
 import { TablePaginatedActions } from 'client/store/ui/tablePaginated'
@@ -8,16 +12,20 @@ import { useTablePaginatedFilterValue } from 'client/store/ui/tablePaginated/hoo
 import Select from 'client/components/Inputs/Select'
 import { TablePaginatedFilter } from 'client/components/TablePaginated/types'
 
+import { useTooltipContent } from './hooks/useTooltipContent'
+
 type Props = TablePaginatedFilter<TablePaginatedFilterType.MULTI_SELECT> & {
   path: string
 }
 
-const MultiSelect = (props: Props) => {
+const MultiSelect: React.FC<Props> = (props: Props) => {
   const { fieldName, label, path, options } = props
 
   const dispatch = useAppDispatch()
 
-  const filterValue = useTablePaginatedFilterValue<string>(path, fieldName)
+  const { hideTooltip, showTooltip, tooltipContent } = useTooltipContent({ fieldName, options, path })
+
+  const filterValue = useTablePaginatedFilterValue<Array<string>>(path, fieldName)
 
   const handleChange = (value: Array<string>) => {
     dispatch(
@@ -29,7 +37,29 @@ const MultiSelect = (props: Props) => {
     )
   }
 
-  return <Select isMulti onChange={handleChange} options={options} placeholder={label} value={filterValue} />
+  return (
+    <div
+      className="filter-multiselect__tooltip-trigger"
+      data-tooltip-content={tooltipContent}
+      data-tooltip-id={TooltipId.info}
+    >
+      <Select
+        classNames={{
+          container: classNames('filter-multiselect__container', {
+            active: filterValue?.length > 0,
+          }),
+        }}
+        isMulti
+        multiLabelSummaryKey="admin.role"
+        onChange={handleChange}
+        onMenuClose={showTooltip}
+        onMenuOpen={hideTooltip}
+        options={options}
+        placeholder={label}
+        value={filterValue}
+      />
+    </div>
+  )
 }
 
 export default MultiSelect
diff --git a/src/client/components/TablePaginated/Filters/MultiSelect/hooks/useTooltipContent.ts b/src/client/components/TablePaginated/Filters/MultiSelect/hooks/useTooltipContent.ts
new file mode 100644
index 0000000000..a7f6a44d9a
--- /dev/null
+++ b/src/client/components/TablePaginated/Filters/MultiSelect/hooks/useTooltipContent.ts
@@ -0,0 +1,57 @@
+import { useCallback, useMemo, useState } from 'react'
+
+import { Objects } from 'utils/objects'
+
+import { TablePaginatedFilterType } from 'meta/tablePaginated'
+
+import { useTablePaginatedFilterValue } from 'client/store/ui/tablePaginated/hooks'
+import { TablePaginatedFilter } from 'client/components/TablePaginated/types'
+
+type Props = {
+  fieldName: string
+  options: TablePaginatedFilter<TablePaginatedFilterType.MULTI_SELECT>['options']
+  path: string
+}
+
+type Returned = {
+  hideTooltip: () => void
+  showTooltip: () => void
+  tooltipContent: string | null
+}
+
+export const useTooltipContent = (props: Props): Returned => {
+  const { fieldName, options, path } = props
+  const filterValue = useTablePaginatedFilterValue<Array<string>>(path, fieldName)
+  const [canDisplayTooltip, setCanDisplayTooltip] = useState(true)
+
+  const valueToLabelMap = useMemo<Record<string, string>>(() => {
+    return options.reduce<Record<string, string>>((acc, { value, label }) => {
+      return { ...acc, [value]: label }
+    }, {})
+  }, [options])
+
+  const tooltipContent = useMemo<string | null>(() => {
+    if (Objects.isEmpty(filterValue)) return null
+    if (!canDisplayTooltip) return null
+
+    const selectedLabels = filterValue.reduce<Array<string>>((acc, value) => {
+      const label = valueToLabelMap[value]
+      if (!Objects.isEmpty(label)) acc.push(label)
+      return acc
+    }, [])
+
+    if (selectedLabels.length === 0) {
+      return null
+    }
+    return selectedLabels.join(', ')
+  }, [canDisplayTooltip, filterValue, valueToLabelMap])
+
+  const hideTooltip = useCallback(() => setCanDisplayTooltip(false), [])
+  const showTooltip = useCallback(() => setCanDisplayTooltip(true), [])
+
+  return {
+    hideTooltip,
+    showTooltip,
+    tooltipContent,
+  }
+}
diff --git a/src/client/components/TablePaginated/Filters/Text/Text.scss b/src/client/components/TablePaginated/Filters/Text/Text.scss
index 51352c1a35..0cbf47a894 100644
--- a/src/client/components/TablePaginated/Filters/Text/Text.scss
+++ b/src/client/components/TablePaginated/Filters/Text/Text.scss
@@ -2,6 +2,7 @@
 
 .table-paginated-filter-input {
   display: inline-block;
+  height: 100%;
   position: relative;
 
   input {
@@ -33,11 +34,6 @@
         color: $ui-destructive;
       }
     }
-
-    &.disabled {
-      opacity: 0.6;
-      pointer-events: none;
-    }
   }
 
   &.active {
diff --git a/src/client/components/TablePaginated/Filters/Text/Text.tsx b/src/client/components/TablePaginated/Filters/Text/Text.tsx
index 43f35a58fb..7acec2db13 100644
--- a/src/client/components/TablePaginated/Filters/Text/Text.tsx
+++ b/src/client/components/TablePaginated/Filters/Text/Text.tsx
@@ -41,13 +41,11 @@ const Text = (props: Props) => {
   return (
     <div className={classNames('table-paginated-filter-input', { active: !Objects.isEmpty(filterValue) })}>
       <InputText onChange={handleChange} placeholder={label} value={filterValue ?? ''} />
-      <button
-        className={classNames('clear-button icon', { disabled: Objects.isEmpty(filterValue) })}
-        onClick={handleClearInput}
-        type="button"
-      >
-        <Icon className="icon-sub" name="remove" />
-      </button>
+      {!Objects.isEmpty(filterValue) && (
+        <button className="clear-button icon" onClick={handleClearInput} type="button">
+          <Icon className="icon-sub" name="remove" />
+        </button>
+      )}
     </div>
   )
 }
diff --git a/src/client/components/TablePaginated/TablePaginated.scss b/src/client/components/TablePaginated/TablePaginated.scss
index fb71337394..943733a749 100644
--- a/src/client/components/TablePaginated/TablePaginated.scss
+++ b/src/client/components/TablePaginated/TablePaginated.scss
@@ -11,6 +11,7 @@
   gap: $spacing-xs;
   height: $spacing-l;
   padding: $spacing-xxxs;
+  z-index: 1;
 }
 
 .table-paginated-datagrid {
diff --git a/src/i18n/resources/en/admin.json b/src/i18n/resources/en/admin.json
index 9edbed3915..3161434182 100644
--- a/src/i18n/resources/en/admin.json
+++ b/src/i18n/resources/en/admin.json
@@ -7,6 +7,8 @@
   "invitationsSentCount": "Nº of Invitations sent",
   "lastStatus": "Last Status",
   "locationsCount": "Nº of Locations",
+  "role_one": "{{count}} Role",
+  "role_other": "{{count}} Roles",
   "urlParsingError": "URL parsing error",
   "usersCount": "Nº of Users",
   "verifyLinks": "Verify links"