From 4eb96e9d1d3b78f1ae907de697bc3506c4860ab8 Mon Sep 17 00:00:00 2001
From: Ayobami Akingbade <akingbadefred@gmail.com>
Date: Sun, 30 Jun 2024 06:56:31 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(ui):=20forward=20ref=20to=20to?=
 =?UTF-8?q?oltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/data/data.service.ts              |  1 +
 src/components/app/button/soft.tsx            |  4 ++-
 src/components/app/form/input/date.tsx        |  1 +
 .../app/form/input/label-and-error.tsx        |  2 +-
 src/components/app/off-canvas.tsx             |  3 +-
 src/components/app/section-box/index.tsx      |  2 +-
 src/components/app/system-icons.tsx           | 35 ++++++++++---------
 src/components/app/table/_Pagination.tsx      |  5 +--
 .../app/table/filters/Date/_Selection.tsx     |  4 +--
 src/components/app/table/index.tsx            |  8 +++--
 src/components/app/tabs.tsx                   | 25 +++++++------
 src/components/app/tooltip/index.tsx          |  5 +--
 src/components/ui/button.tsx                  |  2 +-
 src/components/ui/scroll-area.tsx             |  8 +++--
 src/components/ui/tabs.tsx                    |  2 +-
 .../app/NavigationSideBar/SideBar.tsx         |  4 +--
 .../Variables/ManageCredentialGroup.tsx       | 22 ++++++------
 tailwind.config.js                            |  5 ---
 18 files changed, 76 insertions(+), 62 deletions(-)

diff --git a/src/backend/data/data.service.ts b/src/backend/data/data.service.ts
index 53f5a5e94..8853489cc 100644
--- a/src/backend/data/data.service.ts
+++ b/src/backend/data/data.service.ts
@@ -138,6 +138,7 @@ export class DataApiService implements IDataApiService {
         ],
       })
     );
+
     if (!data) {
       throw new NotFoundError(
         `Entity '${entity}' with '${columnField}' '${id}' does not exist`
diff --git a/src/components/app/button/soft.tsx b/src/components/app/button/soft.tsx
index feae1d4ac..ec5ff1104 100644
--- a/src/components/app/button/soft.tsx
+++ b/src/components/app/button/soft.tsx
@@ -79,7 +79,9 @@ export function SoftButton({
     );
 
   return size === "icon" ? (
-    <Tooltip text={labelString}>{buttonElement}</Tooltip>
+    <Tooltip text={labelString} isOverAButton>
+      {buttonElement}
+    </Tooltip>
   ) : (
     buttonElement
   );
diff --git a/src/components/app/form/input/date.tsx b/src/components/app/form/input/date.tsx
index 17771cd4e..7daabbbde 100644
--- a/src/components/app/form/input/date.tsx
+++ b/src/components/app/form/input/date.tsx
@@ -118,6 +118,7 @@ export function ControlledFormDateInput({
 export function FormDateInput(formInput: IFormDateInput) {
   const { input, disabled, meta, minDate, maxDate } = formInput;
   let { value } = input;
+
   if (value && typeof value === "string") {
     value = new Date(value);
     input.onChange(value);
diff --git a/src/components/app/form/input/label-and-error.tsx b/src/components/app/form/input/label-and-error.tsx
index cd690095b..2d8a62e06 100644
--- a/src/components/app/form/input/label-and-error.tsx
+++ b/src/components/app/form/input/label-and-error.tsx
@@ -38,7 +38,7 @@ export function LabelAndError({ formInput, children }: IProps) {
             </>
           )}
           {description ? (
-            <Tooltip text={description}>
+            <Tooltip isOverAButton={false} text={description}>
               <SystemIcon icon="Help" className="w-4 h-4 ml-1" />
             </Tooltip>
           ) : null}
diff --git a/src/components/app/off-canvas.tsx b/src/components/app/off-canvas.tsx
index cb39cbf88..8f837e146 100644
--- a/src/components/app/off-canvas.tsx
+++ b/src/components/app/off-canvas.tsx
@@ -5,6 +5,7 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../ui/sheet";
 import { cn } from "@/lib/utils";
 import { Separator } from "../ui/separator";
 import { NextPortal } from "./next-portal";
+import { ScrollArea } from "../ui/scroll-area";
 
 export interface IProps {
   show: boolean;
@@ -35,7 +36,7 @@ export function OffCanvas({ show, onClose, title, children, size }: IProps) {
             <SheetTitle>{_(title)}</SheetTitle>
           </SheetHeader>
           <Separator className="mt-2" />
-          <div className="flex-grow overflow-y-auto px-4 my-2">{children}</div>
+          <ScrollArea className="flex-grow px-4 my-2">{children}</ScrollArea>
         </SheetContent>
       </Sheet>
     </NextPortal>
diff --git a/src/components/app/section-box/index.tsx b/src/components/app/section-box/index.tsx
index f25e8facb..3b6970b54 100644
--- a/src/components/app/section-box/index.tsx
+++ b/src/components/app/section-box/index.tsx
@@ -49,7 +49,7 @@ export function SectionBox({
                 <p className="font-semibold">{_(title)}</p>
               )}
               {description ? (
-                <Tooltip text={description}>
+                <Tooltip isOverAButton={false} text={description}>
                   <SystemIcon icon="Help" className="h-4 w-4" />
                 </Tooltip>
               ) : null}
diff --git a/src/components/app/system-icons.tsx b/src/components/app/system-icons.tsx
index 03a5b2fe5..68da241ef 100644
--- a/src/components/app/system-icons.tsx
+++ b/src/components/app/system-icons.tsx
@@ -9,24 +9,27 @@ interface IProps {
   className: string;
 }
 
-export function SystemIcon({ icon, label, strokeWidth, className }: IProps) {
-  if (!icon) {
-    return null;
-  }
+export const SystemIcon = forwardRef<HTMLElement, IProps>(
+  ({ icon, label, strokeWidth, className }, ref) => {
+    if (!icon) {
+      return null;
+    }
 
-  if (icon === "none") {
-    return null;
-  }
+    if (icon === "none") {
+      return null;
+    }
 
-  const iconSvg = systemIconToSVG(icon, strokeWidth);
-  return (
-    <i
-      className={cn("inline-block [&_svg]:align-baseline", className)}
-      aria-label={label}
-      dangerouslySetInnerHTML={{ __html: iconSvg }}
-    />
-  );
-}
+    const iconSvg = systemIconToSVG(icon, strokeWidth);
+    return (
+      <i
+        ref={ref}
+        className={cn("inline-block", className)}
+        aria-label={label}
+        dangerouslySetInnerHTML={{ __html: iconSvg }}
+      />
+    );
+  }
+);
 
 export const GrabIcon = forwardRef<
   SVGSVGElement,
diff --git a/src/components/app/table/_Pagination.tsx b/src/components/app/table/_Pagination.tsx
index 4c5937cc9..820f2e9a4 100644
--- a/src/components/app/table/_Pagination.tsx
+++ b/src/components/app/table/_Pagination.tsx
@@ -50,8 +50,7 @@ export function TablePagination({
               onChange={(value) => setPageSize(Number(value))}
               value={`${pageSize}`}
             />{" "}
-            entries of <b>{Intl.NumberFormat("en-US").format(totalRecords)}</b>{" "}
-            results
+            of <b>{Intl.NumberFormat("en-US").format(totalRecords)}</b> results
           </Trans>
         </div>
         <nav role="navigation" aria-label="pagination">
@@ -67,6 +66,8 @@ export function TablePagination({
             breakLinkClassName={className}
             pageLinkClassName={className}
             nextLinkClassName={className}
+            breakClassName="hidden md:inline-block"
+            pageClassName="hidden md:inline-block"
             previousLinkClassName={className}
             disabledLinkClassName="opacity-70 cursor-not-allowed"
             containerClassName="flex flex-row items-center gap-1"
diff --git a/src/components/app/table/filters/Date/_Selection.tsx b/src/components/app/table/filters/Date/_Selection.tsx
index ae62ba136..f76f32231 100644
--- a/src/components/app/table/filters/Date/_Selection.tsx
+++ b/src/components/app/table/filters/Date/_Selection.tsx
@@ -54,7 +54,7 @@ export function DateSelection({
   const currentFilterValue = filterValue?.[field] || "";
   const hasCountValue = currentFilterValue?.includes(":");
   return (
-    <>
+    <div className="flex gap-2">
       {hasCountValue && (
         <Select
           placeholder={msg`Select Count`}
@@ -89,6 +89,6 @@ export function DateSelection({
         }}
         value={getFilterValue(currentFilterValue || defaultValue)}
       />
-    </>
+    </div>
   );
 }
diff --git a/src/components/app/table/index.tsx b/src/components/app/table/index.tsx
index f937441fb..a2be9f4e5 100644
--- a/src/components/app/table/index.tsx
+++ b/src/components/app/table/index.tsx
@@ -18,6 +18,7 @@ import { cn } from "@/lib/utils";
 import { Table as TableRoot } from "@/components/ui/table";
 import { Skeleton } from "@/components/ui/skeleton";
 import { TableSkeleton } from "../skeleton/table";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 export { DEFAULT_TABLE_STATE };
 
@@ -94,8 +95,9 @@ export function Table<T extends unknown>({
 
   return (
     <div className="w-full">
-      <div
-        className={cn("relative overflow-x-auto bg-base", {
+      <ScrollArea
+        orientation="horizontal"
+        className={cn("relative bg-base", {
           "min-h-[500px]": dataLength > 0 && !lean,
         })}
       >
@@ -115,7 +117,7 @@ export function Table<T extends unknown>({
           <TableFoot table={table} dataLength={dataLength} />
         </TableRoot>
         {previousDataRender}
-      </div>
+      </ScrollArea>
       {!lean && (
         <TablePagination
           {...{
diff --git a/src/components/app/tabs.tsx b/src/components/app/tabs.tsx
index be096a53c..c012625d2 100644
--- a/src/components/app/tabs.tsx
+++ b/src/components/app/tabs.tsx
@@ -5,6 +5,7 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { useLingui } from "@lingui/react";
 import { TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { cn } from "@/lib/utils";
+import { ScrollArea } from "../ui/scroll-area";
 
 interface IProps {
   contents: {
@@ -52,17 +53,19 @@ export function Tabs({ contents, currentTab, onChange }: IProps) {
       value={activeTab}
       onValueChange={changeTab}
     >
-      <TabsList>
-        {contents.map(({ label, id, muted }) => (
-          <TabsTrigger
-            value={id}
-            key={id}
-            className={cn({ "!text-muted": muted })}
-          >
-            {_(label)}
-          </TabsTrigger>
-        ))}
-      </TabsList>
+      <ScrollArea orientation="horizontal">
+        <TabsList className="mb-1">
+          {contents.map(({ label, id, muted }) => (
+            <TabsTrigger
+              value={id}
+              key={id}
+              className={cn({ "!text-muted": muted })}
+            >
+              {_(label)}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </ScrollArea>
       {contents.map(({ id, content }) => (
         <TabsContent key={id} value={id}>
           {content}
diff --git a/src/components/app/tooltip/index.tsx b/src/components/app/tooltip/index.tsx
index 25b3984e7..57dc12aeb 100644
--- a/src/components/app/tooltip/index.tsx
+++ b/src/components/app/tooltip/index.tsx
@@ -9,9 +9,10 @@ import {
 export interface IProps {
   children: ReactNode;
   text: string;
+  isOverAButton: boolean;
 }
 
-export function Tooltip({ children, text }: IProps) {
+export function Tooltip({ children, text, isOverAButton }: IProps) {
   if (!text) {
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return <>{children}</>;
@@ -19,7 +20,7 @@ export function Tooltip({ children, text }: IProps) {
   return (
     <TooltipProvider>
       <TooltipRoot>
-        <TooltipTrigger>{children}</TooltipTrigger>
+        <TooltipTrigger asChild={isOverAButton}>{children}</TooltipTrigger>
         <TooltipContent>
           <div
             className="rounded-md bg-base px-3 py-1.5 text-sm text-main shadow-md"
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 7eeaa4fb5..a2b024a8d 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap relative rounded-md text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
index 9a61c7c09..57b7a5d93 100644
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -28,8 +28,10 @@ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+    orientation?: "horizontal";
+  }
+>(({ className, children, orientation, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
     className={cn("relative overflow-hidden", className)}
@@ -38,7 +40,7 @@ const ScrollArea = React.forwardRef<
     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
       {children}
     </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
+    <ScrollBar orientation={orientation} />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
 ));
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index edb345780..8a72b40c9 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -11,7 +11,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-9 items-center justify-center rounded-md bg-base shadow-md p-1 text-main",
+      "inline-flex h-9 items-center justify-center rounded-md bg-base shadow-md p-1 text-main overflow-hidden",
       className
     )}
     {...props}
diff --git a/src/frontend/_layouts/app/NavigationSideBar/SideBar.tsx b/src/frontend/_layouts/app/NavigationSideBar/SideBar.tsx
index 82fa5024b..20ca64db2 100644
--- a/src/frontend/_layouts/app/NavigationSideBar/SideBar.tsx
+++ b/src/frontend/_layouts/app/NavigationSideBar/SideBar.tsx
@@ -67,7 +67,7 @@ export function SideBar({ isFullWidth, setIsFullWidth }: IProps) {
           : SIDE_BAR_WIDTH_VARIATIONS.collapsed,
       }}
     >
-      <div className="flex items-center justify-center h-[50px] bg-primary-shade-thick-xxl">
+      <div className="flex items-center justify-center h-[50px] bg-[hsla(var(--dp-primary),0.95)]">
         <Link href="/">
           {isFullWidth ? (
             <img
@@ -81,7 +81,7 @@ export function SideBar({ isFullWidth, setIsFullWidth }: IProps) {
         </Link>
       </div>
       <div className="flex justify-between flex-col h-[calc(100dvh-50px)]">
-        <ScrollArea className="h-[calc(100%-1px)] bg-primary-shade-thick-xxl">
+        <ScrollArea className="h-[calc(100%-1px)] bg-[hsla(var(--dp-primary),0.95)]">
           <ProfileOnNavigation isFullWidth={isFullWidth} />
           <ViewStateMachine
             loading={navigationMenuItems.isLoading}
diff --git a/src/frontend/views/settings/Variables/ManageCredentialGroup.tsx b/src/frontend/views/settings/Variables/ManageCredentialGroup.tsx
index 21ae40e84..e979139b5 100644
--- a/src/frontend/views/settings/Variables/ManageCredentialGroup.tsx
+++ b/src/frontend/views/settings/Variables/ManageCredentialGroup.tsx
@@ -218,16 +218,18 @@ export function ManageCredentialGroup({
             <PasswordMessage />
           </div>
         )}
-        <KeyValueForm
-          group={group}
-          initialValues={tableData.data.find(
-            ({ key }) => key === currentConfigItem
-          )}
-          onSubmit={async (values: { key: string; value: string }) => {
-            await upsertConfigurationMutation.mutateAsync(values);
-            closeConfigItem();
-          }}
-        />
+        <div className="px-1">
+          <KeyValueForm
+            group={group}
+            initialValues={tableData.data.find(
+              ({ key }) => key === currentConfigItem
+            )}
+            onSubmit={async (values: { key: string; value: string }) => {
+              await upsertConfigurationMutation.mutateAsync(values);
+              closeConfigItem();
+            }}
+          />
+        </div>
       </OffCanvas>
       <VariablesDocumentation />
     </Card>
diff --git a/tailwind.config.js b/tailwind.config.js
index 8abe8a1ab..12f7aca04 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,7 +14,6 @@ module.exports = {
     },
     extend: {
       colors: {
-        // foreground: "hsl(var(--foreground))",
         soft: "hsl(var(--dp-soft))",
         muted: "hsl(var(--dp-muted))",
         main: "hsl(var(--dp-main))",
@@ -29,11 +28,7 @@ module.exports = {
           "alpha-text": "hsl(var(--dp-primary-alpha-text))",
           "shade-thick": "hsla(var(--dp-primary), 0.85)",
           "shade-thick-xl": "hsla(var(--dp-primary), 0.9)",
-          "shade-thick-xxl": "hsla(var(--dp-primary), 0.95)",
         },
-        // destructive: {
-        //   DEFAULT: "hsl(var(--destructive))",
-        // },
       },
       borderRadius: {
         lg: `var(--radius)`,