From 2157048f18b775ec8a08a228610123de7af2ac94 Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <56969857+mxkaske@users.noreply.github.com>
Date: Fri, 26 Apr 2024 17:08:08 +0200
Subject: [PATCH] feat: visibility filter and small tabs link improvement
 (#786)

---
 .../[domain]/_components/header.tsx           |  2 +-
 .../src/components/dashboard/tabs-link.tsx    | 66 ++++++++++++++-----
 .../components/data-table/monitor/columns.tsx |  9 +++
 .../data-table/monitor/data-table-toolbar.tsx | 10 +++
 .../data-table/monitor/data-table.tsx         | 17 +++++
 .../data-table/status-page/columns.tsx        | 38 ++++++++---
 .../src/components/layout/header/app-tabs.tsx |  2 +-
 7 files changed, 117 insertions(+), 27 deletions(-)

diff --git a/apps/web/src/app/status-page/[domain]/_components/header.tsx b/apps/web/src/app/status-page/[domain]/_components/header.tsx
index 59f084a9..e897c745 100644
--- a/apps/web/src/app/status-page/[domain]/_components/header.tsx
+++ b/apps/web/src/app/status-page/[domain]/_components/header.tsx
@@ -43,7 +43,7 @@ export function Header({ navigation, plan, page }: Props) {
             </div>
           ) : null}
         </div>
-        <TabsContainer className="-mb-[13px] hidden sm:block" hideSeparator>
+        <TabsContainer className="-mb-[12px] hidden sm:block">
           {navigation.map(({ label, href, disabled, segment }) => {
             const active = segment === selectedSegment;
             return (
diff --git a/apps/web/src/components/dashboard/tabs-link.tsx b/apps/web/src/components/dashboard/tabs-link.tsx
index b72830f6..8b7b2a74 100644
--- a/apps/web/src/components/dashboard/tabs-link.tsx
+++ b/apps/web/src/components/dashboard/tabs-link.tsx
@@ -4,28 +4,39 @@ import * as React from "react";
 import type { LinkProps } from "next/link";
 import Link from "next/link";
 
-import { Separator } from "@openstatus/ui";
-
 import { cn } from "@/lib/utils";
 
 export interface TabsContainerProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  hideSeparator?: boolean;
-}
+  extends React.HTMLAttributes<HTMLDivElement>,
+    Partial<TabsContextProps> {}
 
 export function TabsContainer({
   className,
+  direction = "horizontal",
+  position = "end",
   children,
-  hideSeparator = false,
 }: TabsContainerProps) {
   return (
-    <nav className={cn(className)}>
-      <div className="flex w-full items-center overflow-x-auto">
-        <ul className="flex flex-row">{children}</ul>
-      </div>
-      {/* TODO: move into border-b instead to allow overwrite via className `border-b-0`? */}
-      {hideSeparator ? null : <Separator />}
-    </nav>
+    <TabsContext.Provider value={{ direction, position }}>
+      <nav
+        className={cn(
+          "flex",
+          {
+            "items-center overflow-x-auto": direction === "horizontal",
+          },
+          className,
+        )}
+      >
+        <ul
+          className={cn("flex", {
+            "flex-row": direction === "horizontal",
+            "flex-col": direction === "vertical",
+          })}
+        >
+          {children}
+        </ul>
+      </nav>
+    </TabsContext.Provider>
   );
 }
 
@@ -43,18 +54,24 @@ export function TabsLink({
   disabled,
   ...props
 }: TabsLinkProps) {
+  const { direction, position } = useTabs();
   return (
     <li
-      className={cn("flex shrink-0 list-none border-b-2 border-transparent", {
+      className={cn("flex shrink-0 list-none border-transparent", {
         "border-primary": active,
         "pointer-events-none opacity-70": disabled,
+        "border-b-2": position === "end" && direction === "horizontal",
+        "border-l-2": position === "start" && direction === "vertical",
+        // ... missing t, r
       })}
     >
       <Link
         className={cn(
-          "text-muted-foreground hover:text-primary rounded-md px-4 pb-3 pt-2 text-sm font-medium",
+          "text-muted-foreground hover:text-primary rounded-md text-sm font-medium",
           {
             "text-primary": active,
+            "px-4 pb-3 pt-2": direction === "horizontal",
+            "px-4 py-2.5": direction === "vertical",
           },
           className,
         )}
@@ -65,3 +82,22 @@ export function TabsLink({
     </li>
   );
 }
+
+// --------------
+
+interface TabsContextProps {
+  direction: "horizontal" | "vertical";
+  position: "start" | "end";
+}
+
+const TabsContext = React.createContext<TabsContextProps | null>(null);
+
+const useTabs = () => {
+  const tabsContext = React.useContext(TabsContext);
+
+  if (!tabsContext) {
+    throw new Error("useTabs has to be used within <TabsContext.Provider>");
+  }
+
+  return tabsContext;
+};
diff --git a/apps/web/src/components/data-table/monitor/columns.tsx b/apps/web/src/components/data-table/monitor/columns.tsx
index f56dee7d..c1e94114 100644
--- a/apps/web/src/components/data-table/monitor/columns.tsx
+++ b/apps/web/src/components/data-table/monitor/columns.tsx
@@ -50,6 +50,15 @@ export const columns: ColumnDef<{
       );
     },
   },
+  {
+    // REMINDER: visibility is handled within the `<DataTable />`
+    accessorKey: "public",
+    accessorFn: (row) => row.monitor.public,
+    filterFn: (row, id, value) => {
+      if (!Array.isArray(value)) return true;
+      return value.includes(row.original.monitor.public);
+    },
+  },
   {
     accessorKey: "tags",
     header: "Tags",
diff --git a/apps/web/src/components/data-table/monitor/data-table-toolbar.tsx b/apps/web/src/components/data-table/monitor/data-table-toolbar.tsx
index 43903281..a4f7f858 100644
--- a/apps/web/src/components/data-table/monitor/data-table-toolbar.tsx
+++ b/apps/web/src/components/data-table/monitor/data-table-toolbar.tsx
@@ -40,6 +40,16 @@ export function DataTableToolbar<TData>({
             }))}
           />
         )}
+        {table.getColumn("public") && (
+          <DataTableFacetedFilter
+            column={table.getColumn("public")}
+            title="Visibility"
+            options={[
+              { label: "Public", value: true },
+              { label: "Private", value: false },
+            ]}
+          />
+        )}
         {isFiltered && (
           <Button
             variant="ghost"
diff --git a/apps/web/src/components/data-table/monitor/data-table.tsx b/apps/web/src/components/data-table/monitor/data-table.tsx
index c7902073..cefc2a4e 100644
--- a/apps/web/src/components/data-table/monitor/data-table.tsx
+++ b/apps/web/src/components/data-table/monitor/data-table.tsx
@@ -5,6 +5,7 @@ import type {
   ColumnDef,
   ColumnFiltersState,
   Table as TTable,
+  VisibilityState,
 } from "@tanstack/react-table";
 import {
   flexRender,
@@ -42,16 +43,24 @@ export function DataTable<TData, TValue>({
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
     [],
   );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({
+      public: false, // default is true
+    });
+
   const table = useReactTable({
     data,
     columns,
     state: {
       columnFilters,
+      columnVisibility,
     },
     onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
     getFilteredRowModel: getFilteredRowModel(),
     getCoreRowModel: getCoreRowModel(),
     getFacetedRowModel: getFacetedRowModel(),
+    // TODO: check if we can optimize it - because it gets bigger and bigger with every new filter
     // getFacetedUniqueValues: getFacetedUniqueValues(),
     // REMINDER: We cannot use the default getFacetedUniqueValues as it doesnt support Array of Objects
     getFacetedUniqueValues: (table: TTable<TData>, columnId: string) => () => {
@@ -70,6 +79,14 @@ export function DataTable<TData, TValue>({
           map.set(tag.name, tagsNumber);
         });
       }
+      if (columnId === "public") {
+        const values = table
+          .getCoreRowModel()
+          .flatRows.map((row) => row.getValue(columnId)) as boolean[];
+        const publicValue = values.filter((v) => v === true).length;
+        map.set(true, publicValue);
+        map.set(false, values.length - publicValue);
+      }
       return map;
     },
   });
diff --git a/apps/web/src/components/data-table/status-page/columns.tsx b/apps/web/src/components/data-table/status-page/columns.tsx
index 3a10f3af..200e4960 100644
--- a/apps/web/src/components/data-table/status-page/columns.tsx
+++ b/apps/web/src/components/data-table/status-page/columns.tsx
@@ -6,12 +6,16 @@ import type { ColumnDef } from "@tanstack/react-table";
 import * as z from "zod";
 
 import type { Page } from "@openstatus/db/src/schema";
-import { Badge } from "@openstatus/ui";
+import {
+  Badge,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@openstatus/ui";
 
 import { DataTableRowActions } from "./data-table-row-actions";
 
-// TODO: add total number of monitors
-
 export const columns: ColumnDef<
   Page & { monitorsToPages: { monitor: { name: string } }[] }
 >[] = [
@@ -47,21 +51,35 @@ export const columns: ColumnDef<
         .object({ monitor: z.object({ name: z.string() }) })
         .array()
         .parse(monitorsToPages);
-      const amount = 3;
+      const firstMonitors = monitors.splice(0, 2);
+      const lastMonitors = monitors;
       return (
         <div className="flex items-center gap-2">
           <span className="flex max-w-[150px] gap-2 truncate font-medium sm:max-w-[200px] lg:max-w-[250px] xl:max-w-[350px]">
-            {monitors.slice(0, amount).map(({ monitor: { name } }, i) => (
+            {firstMonitors.map(({ monitor: { name } }, i) => (
               <Badge key={i} variant="outline">
                 {name}
               </Badge>
             ))}
           </span>
-          <span className="font-medium">
-            {monitors.length > amount ? (
-              <span>+{monitors.length - amount}</span>
-            ) : null}
-          </span>
+          {lastMonitors.length > 0 ? (
+            <TooltipProvider>
+              <Tooltip delayDuration={200}>
+                <TooltipTrigger asChild>
+                  <Badge variant="secondary" className="border">
+                    +{lastMonitors.length}
+                  </Badge>
+                </TooltipTrigger>
+                <TooltipContent side="top" className="flex gap-2">
+                  {lastMonitors.map(({ monitor: { name } }, i) => (
+                    <Badge key={i} variant="outline">
+                      {name}
+                    </Badge>
+                  ))}
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          ) : null}
         </div>
       );
     },
diff --git a/apps/web/src/components/layout/header/app-tabs.tsx b/apps/web/src/components/layout/header/app-tabs.tsx
index 68b73aa5..92e986bf 100644
--- a/apps/web/src/components/layout/header/app-tabs.tsx
+++ b/apps/web/src/components/layout/header/app-tabs.tsx
@@ -11,7 +11,7 @@ export function AppTabs() {
 
   return (
     <div className="-mb-3">
-      <TabsContainer hideSeparator>
+      <TabsContainer>
         {pagesConfig.map(({ title, segment, href }) => {
           const active = segment === selectedSegment;
           return (
-- 
2.51.2