From 16d75a6a1b1420f0cae384c291c197dec9603c31 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 27 Dec 2024 14:12:41 +0100
Subject: [PATCH] ui: fix card creator visibility in grid, fix table exporter
 visiblility in grid

---
 .../AddCardSection/AddCardSection.tsx         |  3 +-
 .../DashboardWidgetGrid.tsx                   | 82 ++++++++++++-------
 .../components/WidgetChart/WidgetChart.tsx    |  1 +
 .../WidgetDatatable/WidgetDatatable.tsx       | 27 ++++--
 4 files changed, 75 insertions(+), 38 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx b/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx
index 42f597511..85bfc451e 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 }: { inCards?: boolean }) => {
+  ({ inCards, handleOpenChange }: { inCards?: boolean, handleOpenChange?: (isOpen: boolean) => void }) => {
     const { showModal } = useModal();
     const { metricStore, dashboardStore, projectsStore } = useStore();
     const [tab, setTab] = React.useState('product_analytics');
@@ -238,6 +238,7 @@ const AddCardSection = observer(
           },
         }
       );
+      handleOpenChange?.(false);
     };
     return (
       <div
diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
index 9a8223239..62c835350 100644
--- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
@@ -37,35 +37,14 @@ function DashboardWidgetGrid(props: Props) {
           id={props.id}
         >
           {list?.map((item: any, index: any) => (
-            <div
+            <GridItem
               key={item.widgetId}
-              className={cn('col-span-' + item.config.col, 'group relative pl-6 pr-4 py-4 hover:bg-active-blue w-full rounded-xl')}
-            >
-              <WidgetWrapperNew
-                index={index}
-                widget={item}
-                moveListItem={(dragIndex: any, hoverIndex: any) =>
-                  dashboard?.swapWidgetPosition(dragIndex, hoverIndex)
-                }
-                dashboardId={dashboardId}
-                siteId={siteId}
-                grid="other"
-                showMenu={true}
-                isSaved={true}
-              />
-              <div
-                className={cn(
-                  'invisible group-hover:visible ',
-                  'absolute -left-2 top-1/2 -translate-y-1/2',
-                )}
-              >
-                <Popover arrow={false} overlayInnerStyle={{ padding: 0, borderRadius: '0.75rem' }} content={<AddCardSection />} trigger={'click'}>
-                <Tooltip title="Add Card">
-                  <Button icon={<PlusOutlined size={14} />} shape={'circle'} size={'small'} />
-                </Tooltip>
-                </Popover>
-              </div>
-            </div>
+              item={item}
+              index={index}
+              dashboard={dashboard}
+              dashboardId={dashboardId}
+              siteId={siteId}
+            />
           ))}
         </div>
       )}
@@ -73,4 +52,51 @@ function DashboardWidgetGrid(props: Props) {
   );
 }
 
+function GridItem({ item, index, dashboard, dashboardId, siteId }: any) {
+  const [popoverOpen, setPopoverOpen] = React.useState(false);
+  const handleOpenChange = (open: boolean) => {
+    setPopoverOpen(open);
+  };
+
+  return (
+    <div
+      key={item.widgetId}
+      className={cn('col-span-' + item.config.col, 'group relative pl-6 pr-4 py-4 hover:bg-active-blue w-full rounded-xl')}
+    >
+      <WidgetWrapperNew
+        index={index}
+        widget={item}
+        moveListItem={(dragIndex: any, hoverIndex: any) =>
+          dashboard?.swapWidgetPosition(dragIndex, hoverIndex)
+        }
+        dashboardId={dashboardId}
+        siteId={siteId}
+        grid="other"
+        showMenu={true}
+        isSaved={true}
+      />
+      <div
+        className={cn(
+          'invisible group-hover:visible ',
+          'absolute -left-2 top-1/2 -translate-y-1/2',
+        )}
+      >
+        <Popover
+          open={popoverOpen}
+          onOpenChange={handleOpenChange}
+          arrow={false}
+          overlayInnerStyle={{ padding: 0, borderRadius: '0.75rem' }}
+          content={<AddCardSection handleOpenChange={handleOpenChange} />}
+          trigger={'click'}
+        >
+          <Tooltip title="Add Card">
+            <Button icon={<PlusOutlined size={14} />} shape={'circle'} size={'small'} />
+          </Tooltip>
+        </Popover>
+      </div>
+    </div>
+  )
+}
+
+
 export default observer(DashboardWidgetGrid);
diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index bdbb72999..d23b96585 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -522,6 +522,7 @@ function WidgetChart(props: Props) {
           {renderChart()}
           {showTable ? (
             <WidgetDatatable
+              inBuilder={props.isPreview}
               defaultOpen={true}
               isTableView={_metric.viewType === 'table'}
               data={data}
diff --git a/frontend/app/components/Dashboard/components/WidgetDatatable/WidgetDatatable.tsx b/frontend/app/components/Dashboard/components/WidgetDatatable/WidgetDatatable.tsx
index 8438febaf..0ac049bbc 100644
--- a/frontend/app/components/Dashboard/components/WidgetDatatable/WidgetDatatable.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetDatatable/WidgetDatatable.tsx
@@ -29,6 +29,7 @@ interface Props {
   setEnabledRows: (rows: string[]) => void;
   defaultOpen?: boolean;
   metric: { name: string; viewType: string };
+  inBuilder?: boolean;
 }
 
 function WidgetDatatable(props: Props) {
@@ -117,14 +118,20 @@ function WidgetDatatable(props: Props) {
   return (
     <div className={cn('relative -mx-4 px-2', showTable ? '' : '')}>
       {!isTableOnlyMode && (
-        <div className='flex gap-2'>
-          <Divider style={{ borderColor: showTable ? '#efefef' : 'transparent', borderStyle:  'dashed'}} variant="dashed">
+        <div className="flex gap-2">
+          <Divider
+            style={{
+              borderColor: showTable ? '#efefef' : 'transparent',
+              borderStyle: 'dashed',
+            }}
+            variant="dashed"
+          >
             <Button
               icon={showTable ? <EyeOff size={16} /> : <Eye size={16} />}
               size={'small'}
               type={'default'}
               onClick={() => setShowTable(!showTable)}
-              className='btn-show-hide-table'
+              className="btn-show-hide-table"
             >
               {showTable ? 'Hide Table' : 'Show Table'}
             </Button>
@@ -132,7 +139,7 @@ function WidgetDatatable(props: Props) {
         </div>
       )}
 
-      {(showTable || isTableOnlyMode) ? (
+      {showTable || isTableOnlyMode ? (
         <div className={'relative pb-2'}>
           <Table
             columns={tableProps}
@@ -142,11 +149,13 @@ function WidgetDatatable(props: Props) {
             size={'small'}
             scroll={{ x: 'max-content' }}
           />
-          <TableExporter
-            tableData={tableData}
-            tableColumns={tableProps}
-            filename={props.metric.name}
-          />
+          {props.inBuilder ? (
+            <TableExporter
+              tableData={tableData}
+              tableColumns={tableProps}
+              filename={props.metric.name}
+            />
+          ) : null}
         </div>
       ) : null}
     </div>