New settings layouts. Segment management screen.

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>