From d4b90dbd6c1235489378e81ad3d2fe8537000cfb Mon Sep 17 00:00:00 2001
From: alfredorubin96 <103421036+alfredorubin96@users.noreply.github.com>
Date: Fri, 16 Dec 2022 15:07:20 +0100
Subject: [PATCH] Changing card image download logic  (#273)

* feature(): Changing download logic for card download by downloading the entire card instead of just the view. This kind of change adds also the buttons to the downloaded image, that is not ideal.

* fix(download report image): added missing ref for card expanded view

* Removed package-lock.json

Co-authored-by: Alfred Rubin <alfredo.rubin@neo4j.com>
Co-authored-by: Niels de Jong <niels-121@hotmail.com>
---
 src/card/Card.tsx          | 8 ++++++--
 src/card/view/CardView.tsx | 3 ++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/card/Card.tsx b/src/card/Card.tsx
index 317260a44..1552bec3a 100644
--- a/src/card/Card.tsx
+++ b/src/card/Card.tsx
@@ -30,6 +30,7 @@ import { setReportHelpModalOpen } from '../application/ApplicationActions';
 import { loadDatabaseListFromNeo4jThunk } from '../dashboard/DashboardThunks';
 import { Neo4jContext, Neo4jContextState } from 'use-neo4j/dist/neo4j.context';
 import { getDashboardExtensions } from '../dashboard/DashboardSelectors';
+import { downloadComponentAsImage } from '../chart/ChartUtils';
 
 const NeoCard = ({
   index, // index of the card.
@@ -61,6 +62,8 @@ const NeoCard = ({
   const [databaseList, setDatabaseList] = React.useState([database]);
   const [databaseListLoaded, setDatabaseListLoaded] = React.useState(false);
 
+  const ref = React.useRef();
+
   // fetching the list of databases from neo4j, filtering out the 'system' db
   useEffect(() => {
     if (!databaseListLoaded) {
@@ -120,7 +123,7 @@ const NeoCard = ({
     <div style={{ height: '100%' }} ref={observe}>
       {/* The front of the card, referred to as the 'view' */}
       <Collapse disableStrictModeCompat in={!settingsOpen} timeout={collapseTimeout} style={{ height: '100%' }}>
-        <Card style={{ height: '100%' }}>
+        <Card ref={ref} style={{ height: '100%' }}>
           <NeoCardView
             settingsOpen={settingsOpen}
             editable={editable}
@@ -131,6 +134,7 @@ const NeoCard = ({
             database={database}
             active={active}
             setActive={setActive}
+            onDownloadImage={() => downloadComponentAsImage(ref)}
             query={report.query}
             globalParameters={globalParameters}
             fields={report.fields ? report.fields : []}
@@ -199,7 +203,7 @@ const NeoCard = ({
   // Look into React Portals: https://stackoverflow.com/questions/61432878/how-to-render-child-component-outside-of-its-parent-component-dom-hierarchy
   if (expanded) {
     return (
-      <Dialog maxWidth={'xl'} open={expanded} aria-labelledby='form-dialog-title'>
+      <Dialog maxWidth={'xl'} ref={ref} open={expanded} aria-labelledby='form-dialog-title'>
         <DialogContent
           style={{
             width: Math.min(1920, document.documentElement.clientWidth - 64),
diff --git a/src/card/view/CardView.tsx b/src/card/view/CardView.tsx
index 5d35606f0..5d19d3783 100644
--- a/src/card/view/CardView.tsx
+++ b/src/card/view/CardView.tsx
@@ -23,6 +23,7 @@ const NeoCardView = ({
   extensions,
   active,
   setActive,
+  onDownloadImage,
   type,
   selection,
   dashboardSettings,
@@ -53,7 +54,7 @@ const NeoCardView = ({
       onTitleUpdate={onTitleUpdate}
       onToggleCardSettings={onToggleCardSettings}
       settings={settings}
-      onDownloadImage={() => downloadComponentAsImage(ref)}
+      onDownloadImage={onDownloadImage}
       onToggleCardExpand={onToggleCardExpand}
       expanded={expanded}
     ></NeoCardViewHeader>