From 7f908fc18b298eaad09c48cfd0c59d908009bec8 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 13 Dec 2024 14:48:12 +0100
Subject: [PATCH] ui: fix dash options menu, fix cr/up button

---
 .../AddCardSection/AddCardSection.tsx         |  2 +-
 .../DashboardList/DashboardList.tsx           | 65 ++++++++++++++-----
 .../DashboardWidgetGrid.tsx                   |  2 +-
 .../WidgetView/WidgetViewHeader.tsx           |  2 +-
 4 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx b/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx
index 5e4feb6ce..42f597511 100644
--- a/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx
+++ b/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx
@@ -213,7 +213,7 @@ function CategoryTab({ tab, inCards }: { tab: string; inCards?: boolean }) {
 }
 
 const AddCardSection = observer(
-  ({ inCards, fit }: { fit?: boolean; inCards?: boolean }) => {
+  ({ inCards }: { inCards?: boolean }) => {
     const { showModal } = useModal();
     const { metricStore, dashboardStore, projectsStore } = useStore();
     const [tab, setTab] = React.useState('product_analytics');
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
index 20a44c01f..f1a32c29a 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
@@ -7,6 +7,8 @@ import {
   Tag,
   Tooltip,
   Typography,
+  Dropdown,
+  Button,
 } from 'antd';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
@@ -17,8 +19,8 @@ import { useStore } from 'App/mstore';
 import Dashboard from 'App/mstore/types/dashboard';
 import { dashboardSelected, withSiteId } from 'App/routes';
 import CreateDashboardButton from 'Components/Dashboard/components/CreateDashboardButton';
-import { ItemMenu, confirm } from 'UI';
-
+import { Icon, confirm } from 'UI';
+import { EllipsisVertical } from "lucide-react";
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 import DashboardEditModal from '../DashboardEditModal';
@@ -26,6 +28,7 @@ import DashboardEditModal from '../DashboardEditModal';
 function DashboardList() {
   const { dashboardStore, projectsStore } = useStore();
   const siteId = projectsStore.siteId;
+  const optionsRef = React.useRef<HTMLDivElement>(null);
   const [focusTitle, setFocusedInput] = React.useState(true);
   const [showEditModal, setShowEditModal] = React.useState(false);
 
@@ -124,20 +127,44 @@ function DashboardList() {
       title: 'Options',
       dataIndex: 'dashboardId',
       width: '5%',
-      onCell: () => ({ onClick: (e) => e.stopPropagation() }),
       render: (id) => (
-        <ItemMenu
-          bold
-          items={[
-            { icon: 'pencil', text: 'Rename', onClick: () => onEdit(id, true) },
-            {
-              icon: 'users',
-              text: 'Visibility & Access',
-              onClick: () => onEdit(id, false),
+        <Dropdown
+          arrow={false}
+          trigger={'click'}
+          menu={{
+            items: [
+              {
+                icon: <Icon name={'pencil'} />,
+                key: 'rename',
+                label: 'Rename',
+                onClick: () => onEdit(id, true),
+              },
+              {
+                icon: <Icon name={'users'} />,
+                key: 'access',
+                label: 'Visibility & Access',
+                onClick: () => onEdit(id, false),
+              },
+              {
+                icon: <Icon name={'trash'} />,
+                key: 'delete',
+                label: 'Delete',
+                onClick: () => onDelete(id),
+              },
+            ],
+            onClick: ({ key }) => {
+              if (key === 'rename') {
+                onEdit(id, true);
+              } else if (key === 'access') {
+                onEdit(id, false);
+              } else if (key === 'delete') {
+                void onDelete(id);
+              }
             },
-            { icon: 'trash', text: 'Delete', onClick: () => onDelete(id) },
-          ]}
-        />
+          }}
+        >
+          <Button ref={optionsRef} icon={<EllipsisVertical size={16} />} />
+        </Dropdown>
       ),
     },
   ];
@@ -200,7 +227,15 @@ function DashboardList() {
           size: 'small',
         }}
         onRow={(record) => ({
-          onClick: () => {
+          onClick: (e) => {
+            if (optionsRef.current) {
+              if (optionsRef.current.contains(e.target) || e.target === optionsRef.current) {
+                return;
+              }
+            }
+            if (e.target.classList.contains('lucide')) {
+              return;
+            }
             dashboardStore.selectDashboardById(record.dashboardId);
             const path = withSiteId(
               dashboardSelected(record.dashboardId),
diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
index d2961db0d..f41ed2595 100644
--- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
@@ -59,7 +59,7 @@ function DashboardWidgetGrid(props: Props) {
                   'absolute -left-2 top-1/2 -translate-y-1/2',
                 )}
               >
-                <Popover arrow={false} overlayInnerStyle={{ padding: 0, borderRadius: '0.75rem' }} content={<AddCardSection fit inCards />} trigger={'click'}>
+                <Popover arrow={false} overlayInnerStyle={{ padding: 0, borderRadius: '0.75rem' }} content={<AddCardSection />} trigger={'click'}>
                   <Button icon={<PlusOutlined size={14} />} shape={'circle'} size={'small'} />
                 </Popover>
               </div>
diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx
index 2ec4edeca..384046b4b 100644
--- a/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx
@@ -47,7 +47,7 @@ function WidgetViewHeader({ onClick, onSave }: Props) {
           loading={metricStore.isSaving}
           disabled={metricStore.isSaving || !widget.hasChanged}
         >
-          Update
+          {widget.exists() ? 'Update' : 'Create'}
         </Button>
         <CardViewMenu />
       </Space>