New settings layouts. Segment management screen.

src/app/(main)/websites/[websiteId]/segments/SegmentAddButton.tsx

@@ -1,7 +1,7 @@
 import { Button, DialogTrigger, Modal, Text, Icon, Dialog } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
 import { Plus } from '@/components/icons';
-import { SegmentEditForm } from '@/app/(main)/websites/[websiteId]/segments/SegmentEditForm';
+import { SegmentEditForm } from './SegmentEditForm';
 
 export function SegmentAddButton({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();

src/app/(main)/websites/[websiteId]/segments/SegmentDeleteButton.tsx

@@ -0,0 +1,55 @@
+import { Dialog } from '@umami/react-zen';
+import { ActionButton } from '@/components/input/ActionButton';
+import { Trash } from '@/components/icons';
+import { ConfirmationForm } from '@/components/common/ConfirmationForm';
+import { messages } from '@/components/messages';
+import { useApi, useMessages, useModified } from '@/components/hooks';
+
+export function SegmentDeleteButton({
+  segmentId,
+  websiteId,
+  name,
+  onSave,
+}: {
+  segmentId: string;
+  websiteId: string;
+  name: string;
+  onSave?: () => void;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate, isPending, error } = useMutation({
+    mutationFn: () => del(`/websites/${websiteId}/segments/${segmentId}`),
+  });
+  const { touch } = useModified();
+
+  const handleConfirm = (close: () => void) => {
+    mutate(null, {
+      onSuccess: () => {
+        touch('segments');
+        onSave?.();
+        close();
+      },
+    });
+  };
+
+  return (
+    <ActionButton tooltip={formatMessage(labels.delete)} icon={<Trash />}>
+      <Dialog title={formatMessage(labels.confirm)} style={{ width: 400 }}>
+        {({ close }) => (
+          <ConfirmationForm
+            message={formatMessage(messages.confirmRemove, {
+              target: name,
+            })}
+            isLoading={isPending}
+            error={error}
+            onConfirm={handleConfirm.bind(null, close)}
+            onClose={close}
+            buttonLabel={formatMessage(labels.delete)}
+            buttonVariant="danger"
+          />
+        )}
+      </Dialog>
+    </ActionButton>
+  );
+}

src/app/(main)/websites/[websiteId]/segments/SegmentEditButton.tsx

@@ -0,0 +1,34 @@
+import { ActionButton } from '@/components/input/ActionButton';
+import { Edit } from '@/components/icons';
+import { Dialog } from '@umami/react-zen';
+import { SegmentEditForm } from '@/app/(main)/websites/[websiteId]/segments/SegmentEditForm';
+import { useMessages } from '@/components/hooks';
+
+export function SegmentEditButton({
+  segmentId,
+  websiteId,
+  filters,
+}: {
+  segmentId: string;
+  websiteId: string;
+  filters: any[];
+}) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <ActionButton tooltip={formatMessage(labels.edit)} icon={<Edit />}>
+      <Dialog title={formatMessage(labels.segment)} style={{ width: 800 }}>
+        {({ close }) => {
+          return (
+            <SegmentEditForm
+              segmentId={segmentId}
+              websiteId={websiteId}
+              filters={filters}
+              onClose={close}
+            />
+          );
+        }}
+      </Dialog>
+    </ActionButton>
+  );
+}

src/app/(main)/websites/[websiteId]/segments/SegmentEditForm.tsx

@@ -6,24 +6,30 @@ import {
   FormSubmitButton,
   TextField,
   Label,
+  Loading,
 } from '@umami/react-zen';
 import { subMonths, endOfDay } from 'date-fns';
 import { FieldFilters } from '@/components/input/FieldFilters';
 import { useState } from 'react';
-import { useApi, useMessages, useModified } from '@/components/hooks';
+import { useApi, useMessages, useModified, useWebsiteSegmentQuery } from '@/components/hooks';
 import { filtersArrayToObject } from '@/lib/params';
 
 export function SegmentEditForm({
+  segmentId,
   websiteId,
   filters = [],
+  showFilters = true,
   onSave,
   onClose,
 }: {
+  segmentId: string;
   websiteId: string;
   filters?: any[];
+  showFilters?: boolean;
   onSave?: () => void;
   onClose?: () => void;
 }) {
+  const { data } = useWebsiteSegmentQuery(websiteId, segmentId);
   const { formatMessage, labels } = useMessages();
   const [currentFilters, setCurrentFilters] = useState(filters);
   const { touch } = useModified();
@@ -33,7 +39,10 @@ export function SegmentEditForm({
   const { post, useMutation } = useApi();
   const { mutate, error, isPending } = useMutation({
     mutationFn: (data: any) =>
-      post(`/websites/${websiteId}/segments`, { ...data, type: 'segment' }),
+      post(`/websites/${websiteId}/segments${segmentId ? `/${segmentId}` : ''}`, {
+        ...data,
+        type: 'segment',
+      }),
   });
 
   const handleSubmit = async (data: any) => {
@@ -49,28 +58,40 @@ export function SegmentEditForm({
     );
   };
 
+  if (segmentId && !data) {
+    return <Loading position="page" />;
+  }
+
   return (
-    <Form error={error} onSubmit={handleSubmit}>
+    <Form error={error} onSubmit={handleSubmit} defaultValues={data}>
       <FormField
         name="name"
         label={formatMessage(labels.name)}
         rules={{ required: formatMessage(labels.required) }}
       >
-        <TextField />
+        <TextField autoFocus />
       </FormField>
-      <Label>{formatMessage(labels.filters)}</Label>
-      <FieldFilters
-        websiteId={websiteId}
-        filters={currentFilters}
-        startDate={startDate}
-        endDate={endDate}
-        onSave={setCurrentFilters}
-      />
+      {showFilters && (
+        <>
+          <Label>{formatMessage(labels.filters)}</Label>
+          <FieldFilters
+            websiteId={websiteId}
+            filters={currentFilters}
+            startDate={startDate}
+            endDate={endDate}
+            onSave={setCurrentFilters}
+          />
+        </>
+      )}
       <FormButtons>
         <Button isDisabled={isPending} onPress={onClose}>
           {formatMessage(labels.cancel)}
         </Button>
-        <FormSubmitButton variant="primary" data-test="button-submit" isDisabled={isPending}>
+        <FormSubmitButton
+          variant="primary"
+          data-test="button-submit"
+          isDisabled={isPending || currentFilters.length === 0}
+        >
           {formatMessage(labels.save)}
         </FormSubmitButton>
       </FormButtons>

src/app/(main)/websites/[websiteId]/segments/SegmentsTable.tsx

@@ -1,12 +1,14 @@
-import { DataTable, DataColumn, Icon, Row, Text, MenuItem } from '@umami/react-zen';
-import { useMessages } from '@/components/hooks';
+import { DataTable, DataColumn, Row } from '@umami/react-zen';
+import { useMessages, useNavigation } from '@/components/hooks';
 import { Empty } from '@/components/common/Empty';
-import { Edit, Trash } from '@/components/icons';
 import { DateDistance } from '@/components/common/DateDistance';
-import { MenuButton } from '@/components/input/MenuButton';
+import { filtersObjectToArray } from '@/lib/params';
+import { SegmentEditButton } from '@/app/(main)/websites/[websiteId]/segments/SegmentEditButton';
+import { SegmentDeleteButton } from '@/app/(main)/websites/[websiteId]/segments/SegmentDeleteButton';
 
 export function SegmentsTable({ data = [] }) {
   const { formatMessage, labels } = useMessages();
+  const { websiteId } = useNavigation();
 
   if (data.length === 0) {
     return <Empty />;
@@ -20,27 +22,17 @@ export function SegmentsTable({ data = [] }) {
       </DataColumn>
       <DataColumn id="action" align="end" width="100px">
         {(row: any) => {
-          const { id } = row;
+          const { id, name, parameters } = row;
 
           return (
-            <MenuButton>
-              <MenuItem href={`/admin/users/${id}`} data-test="link-button-edit">
-                <Row alignItems="center" gap>
-                  <Icon>
-                    <Edit />
-                  </Icon>
-                  <Text>{formatMessage(labels.edit)}</Text>
-                </Row>
-              </MenuItem>
-              <MenuItem id="delete" onAction={null} data-test="link-button-delete">
-                <Row alignItems="center" gap>
-                  <Icon>
-                    <Trash />
-                  </Icon>
-                  <Text>{formatMessage(labels.delete)}</Text>
-                </Row>
-              </MenuItem>
-            </MenuButton>
+            <Row>
+              <SegmentEditButton
+                segmentId={id}
+                websiteId={websiteId}
+                filters={filtersObjectToArray(parameters)}
+              />
+              <SegmentDeleteButton segmentId={id} websiteId={websiteId} name={name} />
+            </Row>
           );
         }}
       </DataColumn>