Merge pull request #1493 from Vizzuality/MRXN23-439-move-export-solut…

…ions-btn FE (fix): move export solutions [MRXN23-439]
Vizzuality · Sep 11, 2023 · 97406c5 · 97406c5
2 parents a9a6005 + 2cf41c9
commit 97406c5
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 63 deletions.
diff --git a/app/layout/project/sidebar/project/scenarios-list/index.tsx b/app/layout/project/sidebar/project/scenarios-list/index.tsx
@@ -16,6 +16,7 @@ import {
   useScenarios,
   useDuplicateScenario,
   useCancelRunScenario,
+  useDownloadSolutionsSummary,
 } from 'hooks/scenarios';
 import { useToasts } from 'hooks/toast';
 
@@ -28,6 +29,7 @@ import { ScrollArea } from 'components/scroll-area';
 import HelpBeacon from 'layout/help/beacon';
 import NoResults from 'layout/project/sidebar/project/inventory-panel/components/no-results';
 import ScenarioToolbar from 'layout/project/sidebar/project/scenarios-list/toolbar';
+import Section from 'layout/section';
 import { cn } from 'utils/cn';
 
 import bgScenariosDashboard from 'images/new-layout/bg-scenarios-dashboard.png';
@@ -42,8 +44,9 @@ export const ScenariosList: React.FC = () => {
   const queryClient = useQueryClient();
   const { addToast } = useToasts();
 
-  const [modal, setModal] = useState(false);
+  const [modal, setModal] = useState<boolean>(false);
   const [deleteScenario, setDelete] = useState(null);
+  const [solutionsReportLoader, setSolutionsReportLoader] = useState<boolean>(false);
 
   const { search, filters, sort } = useSelector((state) => state['/projects/[id]']);
 
@@ -187,6 +190,33 @@ export const ScenariosList: React.FC = () => {
     [addToast, cancelRunMutation]
   );
 
+  const downloadSolutionsSummary = useDownloadSolutionsSummary();
+
+  const onDownloadSolutionsSummary = useCallback(() => {
+    setSolutionsReportLoader(true);
+
+    downloadSolutionsSummary.mutate(
+      { id: pid },
+      {
+        onError: () => {
+          addToast(
+            'download-error',
+            <>
+              <h2 className="font-medium">Error!</h2>
+              <ul className="text-sm">Solutions report not downloaded</ul>
+            </>,
+            {
+              level: 'error',
+            }
+          );
+        },
+        onSettled: () => {
+          setSolutionsReportLoader(false);
+        },
+      }
+    );
+  }, [downloadSolutionsSummary, addToast, pid]);
+
   return (
     <AnimatePresence>
       <div
@@ -204,7 +234,6 @@ export const ScenariosList: React.FC = () => {
           className="relative flex flex-grow flex-col space-y-3 overflow-hidden"
         >
           {(hasScenarios || search || hasFilters) && <ScenarioToolbar />}
-
           <div
             className={cn({
               'relative overflow-hidden': true,
@@ -260,7 +289,6 @@ export const ScenariosList: React.FC = () => {
               </ScrollArea>
             )}
           </div>
-
           {!hasScenarios && !search && !hasFilters && scenariosIsFetched && (
             <div className="flex flex-col space-y-2">
               <motion.div
@@ -323,18 +351,34 @@ export const ScenariosList: React.FC = () => {
           )}
 
           {(hasScenarios || search || hasFilters) && (
-            <div className="flex w-full flex-shrink-0 items-center justify-center rounded-[20px] bg-gray-700 p-6">
+            <Section className="flex w-full flex-col items-center justify-center space-y-5">
+              {hasScenarios && (
+                <Button
+                  theme="primary-alt"
+                  size="base"
+                  className="flex w-full overflow-hidden uppercase"
+                  disabled={solutionsReportLoader}
+                  onClick={onDownloadSolutionsSummary}
+                >
+                  <Loading
+                    visible={solutionsReportLoader}
+                    className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-90"
+                    iconClassName="w-10 h-10 text-primary-500"
+                  />
+                  {`Export scenario${scenariosData.length > 1 ? 's' : ''} data`}
+                </Button>
+              )}
               <Button
                 theme="primary"
                 size="base"
-                className="!px-5"
+                className="px-5"
                 disabled={!editable}
                 onClick={() => setModal(true)}
               >
                 <span className="mr-5">Create scenario</span>
                 <Icon icon={PLUS_SVG} className="h-4 w-4" />
               </Button>
-            </div>
+            </Section>
           )}
         </div>
 

diff --git a/app/layout/project/sidebar/scenario/solutions/overview/index.tsx b/app/layout/project/sidebar/scenario/solutions/overview/index.tsx
@@ -7,34 +7,27 @@ import { useRouter } from 'next/router';
 import { getScenarioEditSlice } from 'store/slices/scenarios/edit';
 
 import { motion } from 'framer-motion';
+import { HiOutlineTable } from 'react-icons/hi';
 
 import { useProject } from 'hooks/projects';
-import {
-  useScenario,
-  useDownloadScenarioReport,
-  useDownloadSolutionsSummary,
-} from 'hooks/scenarios';
+import { useScenario, useDownloadScenarioReport } from 'hooks/scenarios';
 import { useSolution, useBestSolution } from 'hooks/solutions';
 import { useToasts } from 'hooks/toast';
 
 import Button from 'components/button';
-import Icon from 'components/icon';
 import Loading from 'components/loading';
 import Modal from 'components/modal';
 import Section from 'layout/section';
 import SolutionSelected from 'layout/solutions/selected';
 import { formatFileName } from 'utils/units';
 
-import TABLE_SVG from 'svgs/ui/table.svg?sprite';
-
 import SolutionsTableForm from './table/table-form/component';
 
 export const SolutionsOverview = (): JSX.Element => {
   const { query } = useRouter();
   const { pid, sid } = query as { pid: string; sid: string };
 
   const [PDFLoader, setPDFLoader] = useState<boolean>(false);
-  const [solutionsReportLoader, setSolutionsReportLoader] = useState<boolean>(false);
   const [showTable, setShowTable] = useState<boolean>(false);
   const { addToast } = useToasts();
 
@@ -71,8 +64,6 @@ export const SolutionsOverview = (): JSX.Element => {
     runId: `${(selectedSolutionData || bestSolutionData)?.runId}`,
   });
 
-  const downloadSolutionsSummary = useDownloadSolutionsSummary();
-
   const SOLUTION_DATA = selectedSolutionData || bestSolutionData;
 
   const isBestSolution =
@@ -83,31 +74,6 @@ export const SolutionsOverview = (): JSX.Element => {
     (bestSolutionisFetching && !bestSolutionisFetched) ||
     (selectedSolutionisFetching && !selectedSolutionisFetched);
 
-  const onDownloadSolutionsSummary = useCallback(() => {
-    setSolutionsReportLoader(true);
-
-    downloadSolutionsSummary.mutate(
-      { id: pid },
-      {
-        onError: () => {
-          addToast(
-            'download-error',
-            <>
-              <h2 className="font-medium">Error!</h2>
-              <ul className="text-sm">Solutions report not downloaded</ul>
-            </>,
-            {
-              level: 'error',
-            }
-          );
-        },
-        onSettled: () => {
-          setSolutionsReportLoader(false);
-        },
-      }
-    );
-  }, [downloadSolutionsSummary, addToast, pid]);
-
   const onDownloadReport = useCallback(() => {
     setPDFLoader(true);
     addToast(
@@ -211,22 +177,7 @@ export const SolutionsOverview = (): JSX.Element => {
               <Button
                 theme="primary-alt"
                 size="base"
-                className="mb-4 flex h-12 overflow-hidden uppercase"
-                disabled={solutionsReportLoader}
-                onClick={onDownloadSolutionsSummary}
-              >
-                <Loading
-                  visible={solutionsReportLoader}
-                  className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-90"
-                  iconClassName="w-10 h-10 text-primary-500"
-                />
-                Export solutions summary
-              </Button>
-
-              <Button
-                theme="primary-alt"
-                size="base"
-                className="mb-4 flex h-12 overflow-hidden uppercase"
+                className="relative overflow-hidden uppercase"
                 disabled={PDFLoader}
                 onClick={onDownloadReport}
               >
@@ -240,11 +191,11 @@ export const SolutionsOverview = (): JSX.Element => {
               <Button
                 theme="primary"
                 size="base"
-                className="mb-4 flex h-12 uppercase"
+                className="relative uppercase"
                 onClick={() => setShowTable(true)}
               >
                 View solutions table
-                <Icon icon={TABLE_SVG} className="absolute right-8 h-4 w-4" />
+                <HiOutlineTable className="absolute right-8 h-6 w-6" />
               </Button>
 
               <Modal

diff --git a/app/svgs/ui/table.svg b/app/svgs/ui/table.svg