From 6519141cf6fdd29201020b88710e455baf943c6e Mon Sep 17 00:00:00 2001
From: ayman <118556179+aymka@users.noreply.github.com>
Date: Tue, 30 Jan 2024 21:39:37 +0100
Subject: [PATCH] Conditionally disable export button (#127)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Maximilian Rüsch <maximilian.ruesch@stud.tu-darmstadt.de>
---
 .../CreateExport/CreateExportModal.tsx        | 40 ++++++++++++++-----
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/CreateExport/CreateExportModal.tsx b/src/components/CreateExport/CreateExportModal.tsx
index 7f554a8e..9e7b1724 100644
--- a/src/components/CreateExport/CreateExportModal.tsx
+++ b/src/components/CreateExport/CreateExportModal.tsx
@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { Modal, Stack, Group, Text, Button, Paper, CloseButton } from "@mantine/core";
+import { Modal, Stack, Group, Text, Button, Tooltip, Paper, CloseButton } from "@mantine/core";
 import { sortBy } from "lodash";
 import { useQuery } from "@tanstack/react-query";
 
@@ -41,7 +41,7 @@ export function CreateExportModal({
   const [issuesToExport, setIssuesToExport] = useState<ExportableIssue[]>([]);
   const [startDate, setStartDate] = useState<Date | null>(null);
   const [endDate, setEndDate] = useState<Date | null>(null);
-
+  const [exportHovered, setExportHovered] = useState(false);
   function calculateIssuesToExport() {
     if (!startDate || !endDate) {
       setIssuesToExport([]);
@@ -83,6 +83,8 @@ export function CreateExportModal({
       opened={opened}
       onClose={() => {
         closeModal();
+        setStartDate(null);
+        setEndDate(null);
       }}
       centered
       withCloseButton={false}
@@ -143,16 +145,16 @@ export function CreateExportModal({
               </Group>
               <DateInput
                 label="Start Date"
-                clearable
                 value={startDate}
                 onChange={setStartDate}
+                allowDeselect={false}
                 {...(endDate && { maxDate: endDate })}
               />
               <DateInput
                 label="End Date"
-                clearable
                 value={endDate}
                 onChange={setEndDate}
+                allowDeselect={false}
                 {...(startDate && { minDate: startDate })}
               />
             </Stack>
@@ -164,13 +166,31 @@ export function CreateExportModal({
             {" "}
             {issuesToExport.length}
           </Text>
-          <Button
-            ml="auto"
-            size="sm"
-            onClick={() => exportIssues(issuesToExport)}
+          <Tooltip
+            withArrow
+            multiline
+            w={200}
+            fz={14}
+            fw={500}
+            openDelay={200}
+            closeDelay={200}
+            opened={issuesToExport.length === 0 && exportHovered}
+            ta="center"
+            color="primaryBlue"
+            variant="filled"
+            label="No issues are exportable with this configuration"
           >
-            Export CSV
-          </Button>
+            <Button
+              ml="auto"
+              size="sm"
+              disabled={issuesToExport.length === 0}
+              onMouseOver={() => setExportHovered(true)}
+              onMouseOut={() => setExportHovered(false)}
+              onClick={() => exportIssues(issuesToExport)}
+            >
+              Export
+            </Button>
+          </Tooltip>
         </Group>
       </Stack>
     </Modal>