Merge pull request #1530 from Vizzuality/MRXN23-475-fe-when-no-projec…

…t-summary

[MRXN23-475]: disables scenario export without run scenarios

app/components/toast/component.tsx

@@ -32,8 +32,8 @@ const THEME: ToastTheme = {
   },
   error: {
     icon: ERROR_SVG,
-    bg: 'from-red-1000 to-red-800',
-    hoverBg: 'from-red-200 to-red-1000',
+    bg: 'from-red-500 to-red-800',
+    hoverBg: 'from-red-200 to-red-900',
   },
 };
 

app/hooks/scenarios/index.ts

@@ -20,7 +20,6 @@ import { useMe } from 'hooks/me';
 import { useProjectUsers } from 'hooks/project-users';
 
 import { ItemProps } from 'components/scenarios/item/component';
-import { CostSurface } from 'types/api/cost-surface';
 import { Job } from 'types/api/job';
 import { Project } from 'types/api/project';
 import { Scenario } from 'types/api/scenario';

app/layout/help/documentation/component.tsx

@@ -23,7 +23,7 @@ export const DocumentationLink = () => {
         />
       </div>
       {isHover && (
-        <div className="z-60 absolute right-12 top-2 rounded-xl bg-white px-2 py-px text-black">
+        <div className="absolute right-12 top-2 z-50 rounded-xl bg-white px-2 py-px text-black">
           <p className="whitespace-nowrap font-sans text-sm">Marxan&apos;s documentation</p>
         </div>
       )}

app/layout/loading/component.tsx

@@ -22,7 +22,7 @@ export const Loading: React.FC<LoadingProps> = ({ loading }: LoadingProps) => {
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           className={cn({
-            'z-60 fixed h-full w-full': true,
+            'fixed z-50 h-full w-full': true,
           })}
         >
           <div

app/layout/project/sidebar/project/scenarios-list/index.tsx

@@ -1,11 +1,12 @@
 import React, { Fragment, useCallback, useState } from 'react';
 
 import { useQueryClient } from 'react-query';
-import { useSelector } from 'react-redux';
 
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 
+import { useAppSelector } from 'store/hooks';
+
 import { AnimatePresence, motion } from 'framer-motion';
 import { flatten } from 'lodash';
 
@@ -30,6 +31,7 @@ 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 { Scenario } from 'types/api/scenario';
 import { cn } from 'utils/cn';
 
 import bgScenariosDashboard from 'images/new-layout/bg-scenarios-dashboard.png';
@@ -40,15 +42,18 @@ import PLUS_SVG from 'svgs/ui/plus.svg?sprite';
 import ScenarioItem from './scenario-item';
 import ScenarioTypes from './types';
 
+const LINK_CLASSES =
+  'inline-block rounded-xl bg-gray-600 px-2.5 py-1 text-sm text-white transition-colors hover:bg-gray-100';
+
 export const ScenariosList: React.FC = () => {
   const queryClient = useQueryClient();
   const { addToast } = useToasts();
 
   const [modal, setModal] = useState<boolean>(false);
-  const [deleteScenario, setDelete] = useState(null);
+  const [deleteScenario, setDelete] = useState<Scenario>(null);
   const [solutionsReportLoader, setSolutionsReportLoader] = useState<boolean>(false);
 
-  const { search, filters, sort } = useSelector((state) => state['/projects/[id]']);
+  const { search, filters, sort } = useAppSelector((state) => state['/projects/[id]']);
 
   const { query } = useRouter();
   const { pid } = query as { pid: string };
@@ -77,11 +82,13 @@ export const ScenariosList: React.FC = () => {
 
   const deleteMutation = useDeleteScenario({});
 
+  const atLeastOneScenarioIsRun = scenariosData.some(({ ranAtLeastOnce }) => ranAtLeastOnce);
+
   const onDelete = useCallback(() => {
     deleteMutation.mutate(
       { id: deleteScenario.id },
       {
-        onSuccess: () => {
+        onSuccess: async () => {
           addToast(
             `success-scenario-delete-${deleteScenario.id}`,
             <>
@@ -92,7 +99,7 @@ export const ScenariosList: React.FC = () => {
               level: 'success',
             }
           );
-          queryClient.invalidateQueries(['scenarios', pid]);
+          await queryClient.invalidateQueries(['scenarios', pid]);
           setDelete(null);
         },
         onError: () => {
@@ -119,7 +126,7 @@ export const ScenariosList: React.FC = () => {
   });
 
   const onDuplicate = useCallback(
-    (scenarioId, scenarioName) => {
+    (scenarioId: Scenario['id'], scenarioName: Scenario['name']) => {
       duplicateScenarioMutation.mutate(
         { sid: scenarioId },
         {
@@ -156,15 +163,15 @@ export const ScenariosList: React.FC = () => {
   const cancelRunMutation = useCancelRunScenario({});
 
   const onCancelRun = useCallback(
-    (scenarioId, scenarioName) => {
+    (scenarioId: Scenario['id'], scenarioName: Scenario['name']) => {
       cancelRunMutation.mutate(
         { id: scenarioId },
         {
           onSuccess: () => {
             addToast(
               'success-cancel-scenario',
               <>
-                <h2 className="font-medium">Success!</h2>
+                <h2 className="font-medium">Success</h2>
                 <p className="text-sm">Scenario {scenarioName} canceled</p>
               </>,
               {
@@ -176,7 +183,7 @@ export const ScenariosList: React.FC = () => {
             addToast(
               'error-cancel-scenario',
               <>
-                <h2 className="font-medium">Error!</h2>
+                <h2 className="font-medium">Error</h2>
                 <p className="text-sm">Scenario {scenarioName} not canceled</p>
               </>,
               {
@@ -195,14 +202,25 @@ export const ScenariosList: React.FC = () => {
   const onDownloadSolutionsSummary = useCallback(() => {
     setSolutionsReportLoader(true);
 
+    addToast(
+      'download-info',
+      <>
+        <h2 className="font-medium">Download in progress</h2>
+        <ul className="text-sm">Your report is being downloaded.</ul>
+      </>,
+      {
+        level: 'info',
+      }
+    );
+
     downloadSolutionsSummary.mutate(
       { id: pid },
       {
         onError: () => {
           addToast(
             'download-error',
             <>
-              <h2 className="font-medium">Error!</h2>
+              <h2 className="font-medium">Error</h2>
               <ul className="text-sm">Solutions report not downloaded</ul>
             </>,
             {
@@ -312,19 +330,13 @@ export const ScenariosList: React.FC = () => {
                 </div>
                 <div className="mx-10 flex flex-wrap justify-center gap-2">
                   <Link href={`/projects/${pid}/?tab=protected-areas`}>
-                    <div className="inline-block rounded-xl bg-gray-600 px-2.5 py-1 text-sm text-white transition-colors hover:bg-gray-100">
-                      Upload Protected Areas
-                    </div>
+                    <div className={LINK_CLASSES}>Upload Protected Areas</div>
                   </Link>
                   <Link href={`/projects/${pid}/?tab=cost-surface`}>
-                    <div className="inline-block rounded-xl bg-gray-600 px-2.5 py-1 text-sm text-white transition-colors hover:bg-gray-100">
-                      Upload Cost Surface
-                    </div>
+                    <div className={LINK_CLASSES}>Upload Cost Surface</div>
                   </Link>
                   <Link href={`/projects/${pid}/?tab=features`}>
-                    <div className="inline-block rounded-xl bg-gray-600 px-2.5 py-1 text-sm text-white transition-colors hover:bg-gray-100">
-                      Upload Features
-                    </div>
+                    <div className={LINK_CLASSES}>Upload Features</div>
                   </Link>
                 </div>
               </motion.div>
@@ -357,7 +369,7 @@ export const ScenariosList: React.FC = () => {
                   theme="primary-alt"
                   size="base"
                   className="flex w-full overflow-hidden uppercase"
-                  disabled={solutionsReportLoader}
+                  disabled={solutionsReportLoader || !atLeastOneScenarioIsRun}
                   onClick={onDownloadSolutionsSummary}
                 >
                   <Loading

app/layout/project/sidebar/scenario/grid-setup/features/targets/list/component.tsx

@@ -265,9 +265,9 @@ export const ScenariosFeaturesTargets = ({ onGoBack }: { onGoBack: () => void })
             iconClassName="w-10 h-10 text-white"
           />
 
-          {(!targetedFeaturesData || !targetedFeaturesData.length) && <NoResults />}
+          {!targetedFeaturesData?.length && <NoResults />}
 
-          {!!targetedFeaturesData && !!targetedFeaturesData.length && (
+          {!!targetedFeaturesData.length && (
             <div className="relative flex flex-grow flex-col overflow-hidden">
               <div className="pointer-events-none absolute left-0 top-0 z-10 h-6 w-full bg-gradient-to-b from-gray-800 via-gray-800" />
               <div className="relative h-full overflow-y-auto overflow-x-visible px-0.5">
@@ -346,7 +346,7 @@ export const ScenariosFeaturesTargets = ({ onGoBack }: { onGoBack: () => void })
             </div>
           )}
 
-          {!!targetedFeaturesData && !!targetedFeaturesData.length && (
+          {!!targetedFeaturesData?.length && (
             <div className="flex flex-shrink-0 justify-center space-x-3">
               <Button
                 className="w-full"

app/layout/projects/show/map/index.tsx

@@ -417,7 +417,7 @@ export const ProjectMap = (): JSX.Element => {
       {id && (
         <motion.div
           key="project-map"
-          className="relative col-span-5 h-full w-full overflow-hidden"
+          className="relative h-full w-full overflow-hidden"
           initial={{ y: -10, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           exit={{ y: -10, opacity: 0 }}

app/layout/scenarios/edit/map/component.tsx

@@ -259,7 +259,7 @@ export const ScenariosEditMap = (): JSX.Element => {
   const TargetedPreviewLayers = useTargetedPreviewLayers({
     features: targetedFeaturesData,
     cache,
-    active: targetedFeaturesData.length > 0,
+    active: targetedFeaturesData?.length > 0,
     bbox,
     options: {
       featuresRecipe,

app/layout/scenarios/edit/map/legend/hooks/index.ts

@@ -130,10 +130,10 @@ export const useFeatureAbundanceLegend = () => {
 
   const { layerSettings } = useAppSelector((state) => state[`/scenarios/${sid}/edit`]);
 
-  const totalItems = features.length || 0;
+  const totalItems = features?.length || 0;
 
   const items =
-    features.map(({ id, name, amountRange = { min: 5000, max: 100000 } }, index) => {
+    features?.map(({ id, name, amountRange = { min: 5000, max: 100000 } }, index) => {
       const color =
         totalItems > COLORS['features-preview'].ramp.length
           ? chroma.scale(COLORS['features-preview'].ramp).colors(totalItems)[index]
@@ -178,10 +178,10 @@ export const useFeaturesLegend = () => {
     (state) => state[`/scenarios/${sid}/edit`]
   );
 
-  const totalItems = features.length || 0;
+  const totalItems = features?.length || 0;
 
   const items =
-    features.map(({ id, name }, index) => {
+    features?.map(({ id, name }, index) => {
       const color =
         totalItems > COLORS['features-preview'].ramp.length
           ? chroma.scale(COLORS['features-preview'].ramp).colors(totalItems)[index]

app/layout/toast/component.tsx

@@ -5,7 +5,7 @@ import { ToastContainerProps } from 'hooks/toast/types';
 
 export const ToastContainer = ({ placement, ...props }: ToastContainerProps) => (
   <div
-    className="z-60 pointer-events-none fixed max-h-full w-full max-w-full p-5"
+    className="pointer-events-none fixed z-50 max-h-full w-full max-w-full p-5"
     style={{
       ...PLACEMENTS[placement],
       maxWidth: 400,