Merge pull request #18 from MetaCell/feature/CDE-57

CDE-57 feat: Add no suggestions page

lib/components/steps/MappingStep.tsx

@@ -1,7 +1,7 @@
 import {Box, Button, Tab, Tabs, Tooltip, Typography, Divider, BoxProps} from '@mui/material';
 import React, {Fragment} from 'react';
 import StepOne from './StepOne.tsx';
-import StepTwo from './StepTwo.tsx';
+import SuggestionsStep from './Suggestions/SuggestionsStep.tsx';
 import StepThree from './StepThree.tsx';
 import ModalHeightWrapper from '../common/ModalHeightWrapper.tsx';
 import {vars} from '../../theme/variables.ts';
@@ -49,7 +49,7 @@ const renderTabComponent = (step: number, changeToNextTab: () => void) => {
         case TabsEnum.Collection:
             return <ModalHeightWrapper height="11.5rem"><StepOne/></ModalHeightWrapper>;
         case TabsEnum.Suggestions:
-            return <StepTwo changeToNextTab={changeToNextTab}/>;
+            return <SuggestionsStep changeToNextTab={changeToNextTab}/>;
         case TabsEnum.Mapping:
             return <StepThree/>;
         // Add cases for other steps

lib/components/steps/Suggestions/NoSuggestions.tsx

@@ -0,0 +1,49 @@
+import {Stack, Typography, Box, Button} from '@mui/material';
+
+interface NoSuggestionsProps {
+    onNext: () => void;
+}
+
+
+function NoSuggestions({onNext}: NoSuggestionsProps) {
+
+    return (
+        <>
+            <Box
+                overflow='auto'
+                display='flex'
+                justifyContent='center'
+                alignItems='center'
+                height={1}
+                p='1.5rem'
+                pt={6}
+                pb={6}
+            >
+                <Stack spacing={6} sx={{width: 'max-content'}}>
+                    <Stack spacing={1}>
+                        <Typography variant='h3' textAlign="center">
+                            No suggestions available
+                        </Typography>
+                        <Typography variant='body2' textAlign="center">
+                            The suggestion algorithm did not detect any suggestions for the dataset given, please move
+                            to the mapping step.
+                        </Typography>
+                    </Stack>
+                    <Stack alignItems="center" sx={{width: '100%'}}>
+                        <Box>
+                            <Button
+                                disableRipple
+                                variant="contained"
+                                onClick={onNext}
+                            >
+                                Next
+                            </Button>
+                        </Box>
+                    </Stack>
+                </Stack>
+            </Box>
+        </>
+    );
+}
+
+export default NoSuggestions;

lib/components/steps/SuggestionDetailUI.tsx → lib/components/steps/Suggestions/SuggestionDetailUI.tsx

@@ -1,9 +1,9 @@
 import {Box, Checkbox, Typography} from '@mui/material';
-import {ArrowIcon, CheckboxDefault, CheckboxSelected, GlobeIcon} from '../../icons/index.tsx';
-import CdeDetails from '../common/CdeDetails.tsx';
-import {vars} from '../../theme/variables.ts';
-import {Entity} from "../../models.ts";
-import {getCleanUrl} from "../../helpers/functions.ts";
+import {ArrowIcon, CheckboxDefault, CheckboxSelected, GlobeIcon} from '../../../icons';
+import CdeDetails from '../../common/CdeDetails.tsx';
+import {vars} from '../../../theme/variables.ts';
+import {Entity} from "../../../models.ts";
+import {getCleanUrl} from "../../../helpers/functions.ts";
 
 const {
     gray900,

lib/components/steps/StepTwo.tsx → lib/components/steps/Suggestions/SuggestionsStep.tsx

@@ -1,11 +1,12 @@
 import {Box, Button, Chip, IconButton, Typography} from '@mui/material';
 import {useCallback, useEffect, useState} from 'react';
-import {ArrowDropDown, LeftIcon, RightIcon} from '../../icons/index.tsx';
+import {ArrowDropDown, LeftIcon, RightIcon} from '../../../icons';
 import SuggestionDetailUI from './SuggestionDetailUI.tsx';
-import ModalHeightWrapper from '../common/ModalHeightWrapper.tsx';
-import {vars} from '../../theme/variables.ts';
-import {useCdeContext} from "../../CdeContext.ts";
-import {MAX_SUGGESTIONS} from "../../settings.ts";
+import ModalHeightWrapper from '../../common/ModalHeightWrapper.tsx';
+import {vars} from '../../../theme/variables.ts';
+import {useCdeContext} from "../../../CdeContext.ts";
+import {MAX_SUGGESTIONS} from "../../../settings.ts";
+import NoSuggestions from "./NoSuggestions.tsx";
 
 const {
     gray100,
@@ -17,13 +18,15 @@ const {
     primary600
 } = vars;
 
-interface StepTwoProps {
+interface SuggestionsStepProps {
     changeToNextTab: () => void;
 }
 
-function StepTwo({changeToNextTab}: StepTwoProps) {
+function SuggestionsStep({changeToNextTab}: SuggestionsStepProps) {
     const [showOtherSuggestions, setShowOtherSuggestions] = useState<boolean>(false);
     const [currentKeyIndex, setCurrentKeyIndex] = useState<number>(0);
+    const [hadInitialSuggestions, setHadInitialSuggestions] = useState<boolean>(false);
+
 
     const {
         getSuggestions,
@@ -61,13 +64,23 @@ function StepTwo({changeToNextTab}: StepTwoProps) {
     }, [activeSuggestions, currentKeyIndex]);
 
     useEffect(() => {
-        if (activeSuggestions.size === 0) {
+        const initialActiveSuggestions = new Set<string>(
+            Object.keys(suggestionsMapping).filter(key => suggestionsMapping[key].length > 0)
+        );
+        setActiveSuggestions(initialActiveSuggestions);
+
+        // Set hadInitialSuggestions based on whether there were any initial suggestions
+        setHadInitialSuggestions(initialActiveSuggestions.size > 0);
+    }, [suggestionsMapping]);
+
+    useEffect(() => {
+        if (activeSuggestions.size === 0 && hadInitialSuggestions) {
             changeToNextTab();
         }
-    }, [activeSuggestions, changeToNextTab]);
+    }, [activeSuggestions, changeToNextTab, hadInitialSuggestions]);
 
     if (activeSuggestions.size === 0) {
-        return <div>No suggestions available.</div>;
+        return <NoSuggestions onNext={changeToNextTab}/>
     }
 
     const columnsWithSuggestions = Array.from(activeSuggestions);
@@ -208,4 +221,4 @@ function StepTwo({changeToNextTab}: StepTwoProps) {
     );
 }
 
-export default StepTwo;
+export default SuggestionsStep;