feat(admin-ui): Filter reservations (#4115)

* initial filter

* clenaup

* reser filters correctly

* filter reservations

* ensure reset works

* update types

* add adjustment icon

* pr prep

* update filtering with proper description handling

* location filter updates and search removal

* removed greyed out dates + add created_by filtering

* update filtering with proper ordering

* filter out selected users

* fix array issues

* update spacing for searchable queries

* fix deselection bug for inventory item search

* update date filter;

* rename const a to initialFilters

* fix re-render issue

* ui updates

* update inventory filter to remove selected items

* fix width

* fix truncation for button text if desired

* add span classes

* add "go to reservations" popover

* add tooltip if location text is truncated

* fix long items

* typing

* minor fix for select value

* fix reservation quantity field updates

* add pb

* Update packages/admin-ui/ui/src/components/templates/reservations-table/index.tsx

Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>

* feedback

* add changeset

---------

Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>

packages/admin-ui/ui/src/components/molecules/select/next-select/components/menu.tsx

@@ -1,5 +1,3 @@
-import clsx from "clsx"
-import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import {
   ActionMeta,
   CX,
@@ -12,11 +10,14 @@ import {
   OptionsOrGroups,
   PropsValue,
 } from "react-select"
+import { hasPrefix, hasSuffix, optionIsDisabled } from "../utils"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+
 import Button from "../../../../fundamentals/button"
 import CheckIcon from "../../../../fundamentals/icons/check-icon"
 import ListArrowIcon from "../../../../fundamentals/icons/list-arrow-icon"
-import { hasPrefix, hasSuffix, optionIsDisabled } from "../utils"
 import SelectPrimitives from "./select-primitives"
+import clsx from "clsx"
 
 const Menu = <
   Option,
@@ -279,7 +280,7 @@ export const Option = <
           },
           {
             "h-xlarge": size === "sm",
-            "h-10": size === "md" || !size,
+            "min-h-10": size === "md" || !size,
           },
           className
         )

packages/admin-ui/ui/src/components/molecules/select/next-select/components/single-value.tsx

@@ -1,6 +1,9 @@
-import clsx from "clsx"
 import { GroupBase, SingleValueProps } from "react-select"
+
+import Tooltip from "../../../../atoms/tooltip"
+import clsx from "clsx"
 import { hasPrefix } from "../utils"
+import { useRef } from "react"
 
 const SingleValue = <
   Option,
@@ -13,28 +16,58 @@ const SingleValue = <
   className,
   isDisabled,
   data,
+  getValue,
 }: SingleValueProps<Option, IsMulti, Group>) => {
   const prefix = hasPrefix(data) ? data.prefix : null
 
+  const isEllipsisActive = (e: HTMLDivElement | null) => {
+    if (!e || !(e.offsetParent as HTMLDivElement)?.offsetWidth) {
+      return false
+    }
+
+    return (e.offsetParent as HTMLDivElement).offsetWidth < e.scrollWidth
+  }
+
+  const getToolTipValue = () => {
+    const values = getValue()
+    if (!values.length) {
+      return null
+    }
+
+    const value = values[0] as { label: string } // option with label
+    return value.label ?? null
+  }
+
+  const toolTip = getToolTipValue()
+
+  const ref = useRef(null)
+
   return (
-    <div
-      {...innerProps}
-      className={cx(
-        {
-          "single-value": true,
-          "single-value--is-disabled": isDisabled,
-        },
-        clsx(
-          "absolute top-1/2 -translate-y-1/2 overflow-hidden overflow-ellipsis whitespace-nowrap",
-          className
-        )
-      )}
+    <Tooltip
+      className={clsx({ hidden: !isEllipsisActive(ref.current) || !toolTip })}
+      delayDuration={1000}
+      content={<div>{toolTip}</div>}
     >
-      <div className="gap-x-xsmall inter-base-regular flex items-center">
-        {prefix && <span className="inter-base-semibold">{prefix}</span>}
-        {children}
+      <div
+        {...innerProps}
+        ref={ref}
+        className={cx(
+          {
+            "single-value": true,
+            "single-value--is-disabled": isDisabled,
+          },
+          clsx(
+            "absolute top-1/2 -translate-y-1/2 overflow-hidden overflow-ellipsis whitespace-nowrap",
+            className
+          )
+        )}
+      >
+        <div className="gap-x-xsmall inter-base-regular flex items-center">
+          {prefix && <span className="inter-base-semibold">{prefix}</span>}
+          {children}
+        </div>
       </div>
-    </div>
+    </Tooltip>
   )
 }