Implemented expanded view in dialog.

2025-12-08 05:12:36 +01:00 · 2025-08-07 22:10:02 -07:00 · 2025-08-07 22:10:02 -07:00 · 4e25c07160
commit 4e25c07160
parent 0b4851125d
9 changed files with 136 additions and 104 deletions
--- a/src/app/(main)/websites/[websiteId]/WebsiteCompareTables.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteCompareTables.tsx
@ -1,6 +1,5 @@
-import { Grid, Heading, Column, Row } from '@umami/react-zen';
+import { Grid, Heading, Column, Row, NavMenu, NavMenuItem, Text } from '@umami/react-zen';
 import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
-import { SideMenu } from '@/components/common/SideMenu';
 import { BrowsersTable } from '@/components/metrics/BrowsersTable';
 import { ChangeLabel } from '@/components/metrics/ChangeLabel';
 import { CitiesTable } from '@/components/metrics/CitiesTable';
@ -40,7 +39,7 @@ const views = {
 };

 export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
-  const [data, setData] = useState([]);
+  const [data] = useState([]);
  const { dateRange, dateCompare } = useDateRange(websiteId);
  const { formatMessage, labels } = useMessages();
  const {
@ -53,72 +52,72 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
    {
      id: 'path',
      label: formatMessage(labels.pages),
-      url: updateParams({ view: 'path' }),
+      path: updateParams({ view: 'path' }),
    },
    {
      id: 'referrer',
      label: formatMessage(labels.referrers),
-      url: updateParams({ view: 'referrer' }),
+      path: updateParams({ view: 'referrer' }),
    },
    {
      id: 'browser',
      label: formatMessage(labels.browsers),
-      url: updateParams({ view: 'browser' }),
+      path: updateParams({ view: 'browser' }),
    },
    {
      id: 'os',
      label: formatMessage(labels.os),
-      url: updateParams({ view: 'os' }),
+      path: updateParams({ view: 'os' }),
    },
    {
      id: 'device',
      label: formatMessage(labels.devices),
-      url: updateParams({ view: 'device' }),
+      path: updateParams({ view: 'device' }),
    },
    {
      id: 'country',
      label: formatMessage(labels.countries),
-      url: updateParams({ view: 'country' }),
+      path: updateParams({ view: 'country' }),
    },
    {
      id: 'region',
      label: formatMessage(labels.regions),
-      url: updateParams({ view: 'region' }),
+      path: updateParams({ view: 'region' }),
    },
    {
      id: 'city',
      label: formatMessage(labels.cities),
-      url: updateParams({ view: 'city' }),
+      path: updateParams({ view: 'city' }),
    },
    {
      id: 'language',
      label: formatMessage(labels.languages),
-      url: updateParams({ view: 'language' }),
+      path: updateParams({ view: 'language' }),
    },
    {
      id: 'screen',
      label: formatMessage(labels.screens),
-      url: updateParams({ view: 'screen' }),
+      path: updateParams({ view: 'screen' }),
    },
    {
      id: 'event',
      label: formatMessage(labels.events),
-      url: updateParams({ view: 'event' }),
+      path: updateParams({ view: 'event' }),
    },
    {
      id: 'query',
      label: formatMessage(labels.queryParameters),
-      url: updateParams({ view: 'query' }),
+      path: updateParams({ view: 'query' }),
    },
    {
      id: 'hostname',
      label: formatMessage(labels.hostname),
-      url: updateParams({ view: 'hostname' }),
+      path: updateParams({ view: 'hostname' }),
    },
    {
      id: 'tag',
      label: formatMessage(labels.tags),
-      url: updateParams({ view: 'tag' }),
+      path: updateParams({ view: 'tag' }),
    },
  ];

@ -150,19 +149,21 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
  return (
    <Panel>
      <Grid columns={{ xs: '1fr', lg: '200px 1fr 1fr' }} gap="6">
-        <SideMenu items={items} selectedKey={view} />
+        <NavMenu>
+          {items.map(({ id, label }) => {
+            return (
+              <NavMenuItem key={id}>
+                <Text>{label}</Text>
+              </NavMenuItem>
+            );
+          })}
+        </NavMenu>
        <Column border="left" paddingLeft="6" gap="6">
          <Row alignItems="center" justifyContent="space-between">
            <Heading size="1">{formatMessage(labels.previous)}</Heading>
            <DateDisplay startDate={startDate} endDate={endDate} />
          </Row>
-          <Component
-            websiteId={websiteId}
-            limit={20}
-            showMore={false}
-            onDataLoad={setData}
-            params={params}
-          />
+          <Component websiteId={websiteId} limit={20} showMore={false} params={params} />
        </Column>
        <Column border="left" paddingLeft="6" gap="6">
          <Row alignItems="center" justifyContent="space-between">
--- a/src/app/(main)/websites/[websiteId]/WebsiteDetailsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteDetailsPage.tsx
@ -1,18 +1,29 @@
 'use client';
-import { Column } from '@umami/react-zen';
+import { Column, Modal, Dialog } from '@umami/react-zen';
 import { useNavigation } from '@/components/hooks';
 import { Panel } from '@/components/common/Panel';
 import { WebsiteChart } from './WebsiteChart';
 import { WebsiteExpandedView } from './WebsiteExpandedView';
 import { WebsiteMetricsBar } from './WebsiteMetricsBar';
 import { WebsiteTableView } from './WebsiteTableView';
-import { WebsiteCompareTables } from './WebsiteCompareTables';
 import { WebsiteControls } from './WebsiteControls';

 export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
  const {
+    router,
    query: { view, compare },
+    updateParams,
  } = useNavigation();
+  const handleClose = (close: () => void) => {
+    router.push(updateParams({ view: undefined }));
+    close();
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      router.push(updateParams({ view: undefined }));
+    }
+  };

  return (
    <Column gap>
@ -21,9 +32,14 @@ export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
      <Panel>
        <WebsiteChart websiteId={websiteId} compareMode={compare} />
      </Panel>
-      {!view && !compare && <WebsiteTableView websiteId={websiteId} />}
-      {view && !compare && <WebsiteExpandedView websiteId={websiteId} />}
-      {compare && <WebsiteCompareTables websiteId={websiteId} />}
+      <WebsiteTableView websiteId={websiteId} />
+      <Modal isOpen={!!view} onOpenChange={handleOpenChange} isDismissable>
+        <Dialog style={{ width: '90vw', height: '90vh' }}>
+          {({ close }) => {
+            return <WebsiteExpandedView websiteId={websiteId} onClose={() => handleClose(close)} />;
+          }}
+        </Dialog>
+      </Modal>
    </Column>
  );
 }
--- a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
@ -1,7 +1,5 @@
-import { Icon, Text, Grid, Column } from '@umami/react-zen';
-import { LinkButton } from '@/components/common/LinkButton';
+import { Grid, Column, NavMenu, NavMenuItem } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
-import { SideMenu } from '@/components/common/SideMenu';
 import { BrowsersTable } from '@/components/metrics/BrowsersTable';
 import { CitiesTable } from '@/components/metrics/CitiesTable';
 import { CountriesTable } from '@/components/metrics/CountriesTable';
@ -17,8 +15,7 @@ import { RegionsTable } from '@/components/metrics/RegionsTable';
 import { ScreenTable } from '@/components/metrics/ScreenTable';
 import { TagsTable } from '@/components/metrics/TagsTable';
 import { ChannelsTable } from '@/components/metrics/ChannelsTable';
-import { Panel } from '@/components/common/Panel';
-import { Arrow } from '@/components/icons';
+import Link from 'next/link';

 const views = {
  path: PagesTable,
@ -44,10 +41,10 @@ const views = {

 export function WebsiteExpandedView({
  websiteId,
-  domainName,
+  onClose,
 }: {
  websiteId: string;
-  domainName?: string;
+  onClose?: () => void;
 }) {
  const { formatMessage, labels } = useMessages();
  const {
@ -59,107 +56,107 @@ export function WebsiteExpandedView({
    {
      id: 'path',
      label: formatMessage(labels.pages),
-      url: updateParams({ view: 'path' }),
+      path: updateParams({ view: 'path' }),
    },
    {
      id: 'referrer',
      label: formatMessage(labels.referrers),
-      url: updateParams({ view: 'referrer' }),
+      path: updateParams({ view: 'referrer' }),
    },
    {
      id: 'channel',
      label: formatMessage(labels.channels),
-      url: updateParams({ view: 'channel' }),
+      path: updateParams({ view: 'channel' }),
    },
    {
      id: 'browser',
      label: formatMessage(labels.browsers),
-      url: updateParams({ view: 'browser' }),
+      path: updateParams({ view: 'browser' }),
    },
    {
      id: 'os',
      label: formatMessage(labels.os),
-      url: updateParams({ view: 'os' }),
+      path: updateParams({ view: 'os' }),
    },
    {
      id: 'device',
      label: formatMessage(labels.devices),
-      url: updateParams({ view: 'device' }),
+      path: updateParams({ view: 'device' }),
    },
    {
      id: 'country',
      label: formatMessage(labels.countries),
-      url: updateParams({ view: 'country' }),
+      path: updateParams({ view: 'country' }),
    },
    {
      id: 'region',
      label: formatMessage(labels.regions),
-      url: updateParams({ view: 'region' }),
+      path: updateParams({ view: 'region' }),
    },
    {
      id: 'city',
      label: formatMessage(labels.cities),
-      url: updateParams({ view: 'city' }),
+      path: updateParams({ view: 'city' }),
    },
    {
      id: 'language',
      label: formatMessage(labels.languages),
-      url: updateParams({ view: 'language' }),
+      path: updateParams({ view: 'language' }),
    },
    {
      id: 'screen',
      label: formatMessage(labels.screens),
-      url: updateParams({ view: 'screen' }),
+      path: updateParams({ view: 'screen' }),
    },
    {
      id: 'event',
      label: formatMessage(labels.events),
-      url: updateParams({ view: 'event' }),
+      path: updateParams({ view: 'event' }),
    },
    {
      id: 'query',
      label: formatMessage(labels.queryParameters),
-      url: updateParams({ view: 'query' }),
+      path: updateParams({ view: 'query' }),
    },
    {
      id: 'hostname',
      label: formatMessage(labels.hostname),
-      url: updateParams({ view: 'hostname' }),
+      path: updateParams({ view: 'hostname' }),
    },
    {
      id: 'tag',
      label: formatMessage(labels.tags),
-      url: updateParams({ view: 'tag' }),
+      path: updateParams({ view: 'tag' }),
    },
  ];

  const DetailsComponent = views[view] || (() => null);

  return (
-    <Panel>
-      <Grid columns="auto 1fr" gap="6">
-        <Column gap="6" width="200px" border="right" paddingRight="3">
-          <LinkButton href={updateParams({ view: undefined })} variant="quiet" scroll={false}>
-            <Icon rotate={180}>
-              <Arrow />
-            </Icon>
-            <Text>{formatMessage(labels.back)}</Text>
-          </LinkButton>
-          <SideMenu items={items} selectedKey={view} />
-        </Column>
-        <Column>
-          <DetailsComponent
-            websiteId={websiteId}
-            domainName={domainName}
-            animate={false}
-            virtualize={true}
-            itemCount={25}
-            allowFilter={true}
-            allowSearch={true}
-            expanded={true}
-          />
-        </Column>
-      </Grid>
-    </Panel>
+    <Grid columns="auto 1fr" gap="6" height="100%">
+      <Column gap="6" width="200px" border="right" paddingRight="3">
+        <NavMenu position="sticky" top="0">
+          {items.map(({ id, label, path }) => {
+            return (
+              <Link key={id} href={path}>
+                <NavMenuItem isSelected={id === view}>{label}</NavMenuItem>
+              </Link>
+            );
+          })}
+        </NavMenu>
+      </Column>
+      <Column>
+        <DetailsComponent
+          websiteId={websiteId}
+          animate={false}
+          virtualize={true}
+          itemCount={25}
+          allowFilter={true}
+          allowSearch={true}
+          isExpanded={true}
+          onClose={onClose}
+        />
+      </Column>
+    </Grid>
  );
 }
--- a/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx
@ -10,25 +10,27 @@ import { WorldMap } from '@/components/metrics/WorldMap';
 import { CountriesTable } from '@/components/metrics/CountriesTable';

 export function WebsiteTableView({ websiteId }: { websiteId: string }) {
+  const props = { websiteId, limit: 10, allowDownload: false };
+
  return (
    <Grid gap="3">
      <GridRow layout="two">
        <Panel>
-          <PagesTable websiteId={websiteId} limit={10} />
+          <PagesTable {...props} />
        </Panel>
        <Panel>
-          <ReferrersTable websiteId={websiteId} limit={10} />
+          <ReferrersTable {...props} />
        </Panel>
      </GridRow>
      <GridRow layout="three">
        <Panel>
-          <BrowsersTable websiteId={websiteId} limit={10} />
+          <BrowsersTable {...props} />
        </Panel>
        <Panel>
-          <OSTable websiteId={websiteId} limit={10} />
+          <OSTable {...props} />
        </Panel>
        <Panel>
-          <DevicesTable websiteId={websiteId} limit={10} />
+          <DevicesTable {...props} />
        </Panel>
      </GridRow>
      <GridRow layout="two-one">
@ -36,7 +38,7 @@ export function WebsiteTableView({ websiteId }: { websiteId: string }) {
          <WorldMap websiteId={websiteId} />
        </Panel>
        <Panel>
-          <CountriesTable websiteId={websiteId} limit={10} />
+          <CountriesTable {...props} />
        </Panel>
      </GridRow>
    </Grid>
--- a/src/app/(main)/websites/[websiteId]/segments/SegmentEditForm.tsx
+++ b/src/app/(main)/websites/[websiteId]/segments/SegmentEditForm.tsx
@ -22,7 +22,7 @@ export function SegmentEditForm({
  onSave,
  onClose,
 }: {
-  segmentId: string;
+  segmentId?: string;
  websiteId: string;
  filters?: any[];
  showFilters?: boolean;
--- a/src/components/common/SideMenu.tsx
+++ b/src/components/common/SideMenu.tsx
@ -15,9 +15,16 @@ export interface SideMenuProps {
  title?: string;
  selectedKey?: string;
  allowMinimize?: boolean;
+  children?: React.ReactNode;
 }

-export function SideMenu({ items, title, selectedKey, allowMinimize, children }: SideMenuProps) {
+export function SideMenu({
+  items = [],
+  title,
+  selectedKey,
+  allowMinimize,
+  children,
+}: SideMenuProps) {
  return (
    <Column
      gap
@ -36,7 +43,7 @@ export function SideMenu({ items, title, selectedKey, allowMinimize, children }:
        </Row>
      )}
      <NavMenu muteItems={false} gap="6">
-        {items.map(({ label, items }) => {
+        {items?.map(({ label, items }) => {
          return (
            <NavMenuGroup
              title={label}
@ -45,7 +52,7 @@ export function SideMenu({ items, title, selectedKey, allowMinimize, children }:
              allowMinimize={allowMinimize}
              marginBottom="3"
            >
-              {items.map(({ id, label, icon, path }) => {
+              {items?.map(({ id, label, icon, path }) => {
                const isSelected = selectedKey === id;

                return (
--- a/src/components/hooks/useNavigation.ts
+++ b/src/components/hooks/useNavigation.ts
@ -18,10 +18,6 @@ export function useNavigation() {
    return buildUrl(pathname, params);
  };

-  useEffect(() => {
-    setQueryParams(Object.fromEntries(searchParams));
-  }, [searchParams.toString()]);
-
  const renderUrl = (path: string, params?: Record<string, string | number> | false) => {
    return buildUrl(
      teamId ? `/teams/${teamId}${path}` : path,
@ -29,6 +25,10 @@ export function useNavigation() {
    );
  };

+  useEffect(() => {
+    setQueryParams(Object.fromEntries(searchParams));
+  }, [searchParams.toString()]);
+
  return {
    router,
    pathname,
--- a/src/components/metrics/MetricsTable.tsx
+++ b/src/components/metrics/MetricsTable.tsx
@ -7,11 +7,11 @@ import {
  useWebsiteExpandedMetricsQuery,
  useWebsiteMetricsQuery,
 } from '@/components/hooks';
-import { Arrow } from '@/components/icons';
+import { Close, Maximize } from '@/components/icons';
 import { DownloadButton } from '@/components/input/DownloadButton';
 import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
 import { percentFilter } from '@/lib/filters';
-import { Column, Icon, Row, SearchField, Text } from '@umami/react-zen';
+import { Button, Column, Icon, Row, SearchField, Text } from '@umami/react-zen';
 import { ReactNode, useMemo, useState } from 'react';
 import { ListExpandedTable, ListExpandedTableProps } from './ListExpandedTable';
 import { ListTable, ListTableProps } from './ListTable';
@ -28,7 +28,8 @@ export interface MetricsTableProps extends ListTableProps {
  showMore?: boolean;
  params?: { [key: string]: any };
  allowDownload?: boolean;
-  expanded?: boolean;
+  isExpanded?: boolean;
+  onClose?: () => void;
  children?: ReactNode;
 }

@ -43,7 +44,8 @@ export function MetricsTable({
  showMore = true,
  params,
  allowDownload = true,
-  expanded = false,
+  isExpanded = false,
+  onClose,
  children,
  ...props
 }: MetricsTableProps) {
@ -61,7 +63,7 @@ export function MetricsTable({
    },
    {
      retryDelay: delay || DEFAULT_ANIMATION_DURATION,
-      enabled: expanded,
+      enabled: isExpanded,
    },
  );

@ -75,11 +77,11 @@ export function MetricsTable({
    },
    {
      retryDelay: delay || DEFAULT_ANIMATION_DURATION,
-      enabled: !expanded,
+      enabled: !isExpanded,
    },
  );

-  const { data, isLoading, isFetching, error } = expanded ? expandedQuery : query;
+  const { data, isLoading, isFetching, error } = isExpanded ? expandedQuery : query;

  const filteredData = useMemo(() => {
    if (data) {
@ -110,20 +112,27 @@ export function MetricsTable({
    return [];
  }, [data, dataFilter, search, limit, formatValue, type]);

-  const downloadData = expanded ? data : filteredData;
+  const downloadData = isExpanded ? data : filteredData;

  return (
    <Column gap="3" justifyContent="space-between">
      <LoadingPanel isFetching={isFetching} isLoading={isLoading} error={error} gap>
        <Row alignItems="center" justifyContent="space-between">
          {allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
-          <Row>
+          <Row gap>
            {children}
            {allowDownload && <DownloadButton filename={type} data={downloadData} />}
+            {onClose && (
+              <Button onPress={onClose} variant="quiet">
+                <Icon>
+                  <Close />
+                </Icon>
+              </Button>
+            )}
          </Row>
        </Row>
        {data &&
-          (expanded ? (
+          (isExpanded ? (
            <ListExpandedTable {...(props as ListExpandedTableProps)} data={data} />
          ) : (
            <ListTable {...(props as ListTableProps)} data={filteredData} />
@ -131,10 +140,10 @@ export function MetricsTable({
        <Row justifyContent="center">
          {showMore && data && !error && limit && (
            <LinkButton href={updateParams({ view: type })} variant="quiet">
-              <Text>{formatMessage(labels.more)}</Text>
              <Icon size="sm">
-                <Arrow />
+                <Maximize />
              </Icon>
+              <Text>{formatMessage(labels.more)}</Text>
            </LinkButton>
          )}
        </Row>
--- a/src/components/metrics/QueryParametersTable.tsx
+++ b/src/components/metrics/QueryParametersTable.tsx
@ -58,7 +58,7 @@ export function QueryParametersTable({
      dataFilter={filters[filter]}
      renderLabel={renderLabel}
      delay={0}
-      expanded={false}
+      isExpanded={false}
    >
      {allowFilter && <FilterButtons items={buttons} value={filter} onChange={setFilter} />}
    </MetricsTable>