CDE-54 Walkthrough Implementation

lib/components/CdeModal.tsx

@@ -12,14 +12,17 @@ import {useUIContext} from "../contexts/ui/UIContext.ts";
 const CdeModal: FC = () => {
     const [isModalOpen, setIsModalOpen] = useState(true);
     const [isInfoOpen, setIsInfoOpen] = useState(false);
+    const [homeStepIndex, setHomeStepIndex] = useState(0);
 
-    const {step, errorMessage, setErrorMessage, loadingMessage, handleClose} = useUIContext();
+    const {step, errorMessage, setErrorMessage, loadingMessage, handleClose, isTourOpen, setIsTourOpen} = useUIContext();
 
     const onClose = () => {
         setIsModalOpen(false)
         handleClose()
     }
 
+    const updateHomeTourStep = () => isTourOpen && setHomeStepIndex(prevStepIndex => prevStepIndex + 1);
+
     useEffect(() => {
         if (errorMessage) {
             const timer = setTimeout(() => {
@@ -32,19 +35,19 @@ const CdeModal: FC = () => {
     const renderStepComponent = (): ReactElement => {
         switch (step) {
             case STEPS.HOME:
-                return <Home/>;
+                return <Home homeStepIndex={homeStepIndex} setHomeStepIndex={setHomeStepIndex}/>;
             case STEPS.COLLECTION:
                 return <MappingStep/>;
             // Add cases for other steps
             default:
                 return <TemplateStep/>
         }
     };
-
+    
     return (
         <>
             <Modal open={isModalOpen} onClose={onClose} maxWidth="xl" isInfoOpen={isInfoOpen}>
-                <Header onClose={onClose} isInfoOpen={isInfoOpen} setIsInfoOpen={setIsInfoOpen} step={step}/>
+                <Header onClose={onClose} isInfoOpen={isInfoOpen} setIsInfoOpen={setIsInfoOpen} step={step} setIsTourOpen={setIsTourOpen} onAfterSidebarToggle={updateHomeTourStep}/>
                 {loadingMessage ? <CommonCircularProgress label='Processing data...'/> : renderStepComponent()}
             </Modal>
             <Snackbar

lib/components/common/CustomMappingDropdown.tsx

@@ -180,6 +180,8 @@ interface CustomEntitiesDropdownProps {
         header?: Header;
         collections: SelectableCollection[];
         onCollectionSelect: (collection: SelectableCollection) => void;
+        onDropdownToggle?: () => void;
+        dropdownClassname?: string;
     };
     variableName: string
     onCustomDictionaryFieldCreation: (option: Option, newIsSelectedState: boolean) => void;
@@ -203,6 +205,8 @@ export default function CustomEntitiesDropdown({
                                                        header,
                                                        collections,
                                                        onCollectionSelect,
+                                                       onDropdownToggle = () => {},
+                                                       dropdownClassname
                                                    },
                                                    variableName,
                                                    onCustomDictionaryFieldCreation,
@@ -283,10 +287,10 @@ export default function CustomEntitiesDropdown({
                 }
             }
         };
-
+        onDropdownToggle();
         setIsLoading(true);
         fetchOptions().then(() => setIsLoading(false));
-    }, [searchInput, onSearch, open]);
+    }, [searchInput, onSearch, open, onDropdownToggle]);
 
     const groupedOptions = searchResults.reduce((grouped: GroupedOptions, option: Option) => {
         const group = option.group;
@@ -392,6 +396,7 @@ export default function CustomEntitiesDropdown({
                 open={open}
                 placement='bottom-end'
                 anchorEl={anchorEl}
+                className={dropdownClassname}
                 sx={{
                     height: "21.875rem",
                     borderRadius: '0.5rem',

lib/components/common/Filters.tsx

@@ -36,51 +36,53 @@ const Filters: React.FC<FiltersProps> = ({ anchorEl, handleClose, open, id, chec
                 horizontal: 'right',
             }}
         >
-            <Box sx={{
-                borderBottom: '0.0625rem solid #ECEDEE',
-                padding: '1rem',
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center'
-            }}>
-                <Typography sx={{
-                    fontSize: '0.75rem',
-                    fontWeight: 500,
-                    lineHeight: '150%',
-                    color: '#676C74'
-                }}>Filter by</Typography>
-                <Button
-                    variant="text"
-                    onClick={onReset}
-                    sx={{
-                        p: 0,
+            <div className='mapping__filter-popover'>
+                <Box sx={{
+                    borderBottom: '0.0625rem solid #ECEDEE',
+                    padding: '1rem',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center'
+                }}>
+                    <Typography sx={{
                         fontSize: '0.75rem',
-                        '&:hover': {
-                            background: 'transparent'
-                        }
-                    }}
-                >
-                    Reset filters
-                </Button>
-            </Box>
+                        fontWeight: 500,
+                        lineHeight: '150%',
+                        color: '#676C74'
+                    }}>Filter by</Typography>
+                    <Button
+                        variant="text"
+                        onClick={onReset}
+                        sx={{
+                            p: 0,
+                            fontSize: '0.75rem',
+                            '&:hover': {
+                                background: 'transparent'
+                            }
+                        }}
+                    >
+                        Reset filters
+                    </Button>
+                </Box>
 
-            <Box p='1rem' sx={{ borderBottom: '0.0625rem solid #ECEDEE' }}>
-                <Typography sx={{
-                    fontSize: '0.75rem',
-                    fontWeight: 500,
-                    lineHeight: '150%',
-                    color: '#676C74',
-                    mb: '0.75rem'
-                }}>Status</Typography>
+                <Box p='1rem' sx={{ borderBottom: '0.0625rem solid #ECEDEE' }}>
+                    <Typography sx={{
+                        fontSize: '0.75rem',
+                        fontWeight: 500,
+                        lineHeight: '150%',
+                        color: '#676C74',
+                        mb: '0.75rem'
+                    }}>Status</Typography>
 
-                <Box mt="0.75rem">
-                    <FormGroup>
-                        <Checkbox checked={checked[EntityType.CDE]} onChange={onChange} name={EntityType.CDE} label="Mapped to CDE" />
-                        <Checkbox checked={checked[EntityType.CustomDictionaryField]} onChange={onChange} name={EntityType.CustomDictionaryField} label="Mapped to Data Dictionary field" />
-                        <Checkbox checked={checked[EntityType.Unknown]} onChange={onChange} name={EntityType.Unknown} label="Unmapped" />
-                    </FormGroup>
+                    <Box mt="0.75rem">
+                        <FormGroup>
+                            <Checkbox checked={checked[EntityType.CDE]} onChange={onChange} name={EntityType.CDE} label="Mapped to CDE" />
+                            <Checkbox checked={checked[EntityType.CustomDictionaryField]} onChange={onChange} name={EntityType.CustomDictionaryField} label="Mapped to Data Dictionary field" />
+                            <Checkbox checked={checked[EntityType.Unknown]} onChange={onChange} name={EntityType.Unknown} label="Unmapped" />
+                        </FormGroup>
+                    </Box>
                 </Box>
-            </Box>
+            </div>
         </Popover>
     )
 }

lib/components/common/Header.tsx

@@ -1,9 +1,9 @@
-import {Box, Button, Divider, IconButton, Typography} from "@mui/material";
-import {vars} from "../../theme/variables";
-import {CloseIcon, MapTriFold} from "../../icons";
+import { Box, Button, Divider, IconButton, Typography } from "@mui/material";
+import { vars } from "../../theme/variables";
+import { CloseIcon, MapTriFold } from "../../icons";
 import Info from "./Info";
 
-const {baseWhite, gray100, gray700} = vars
+const { baseWhite, gray100, gray700 } = vars
 
 const styles = {
     root: {
@@ -26,40 +26,49 @@ const styles = {
     }
 }
 
-const Header = (props: { onClose: () => void, isInfoOpen: boolean, setIsInfoOpen: (b: boolean) => void, step: number }) => {
-    const {onClose, isInfoOpen, setIsInfoOpen, step} = props
+const Header = (props: { onClose: () => void, isInfoOpen: boolean, setIsInfoOpen: (b: boolean) => void, step: number, setIsTourOpen: (b: boolean) => void, onAfterSidebarToggle?: () => void }) => {
+    const {onClose, isInfoOpen, setIsInfoOpen, step, setIsTourOpen, onAfterSidebarToggle = () => {}} = props
 
+    const handleInfoBtnClick = () => {
+        setIsInfoOpen(true)
+        onAfterSidebarToggle()
+    }
+
+    const handleClose = () => {
+        setIsInfoOpen(false);
+        onAfterSidebarToggle();
+    }
     return (
         <>
             <Box sx={styles.root}>
                 <Box display='flex' alignItems='center' flex={1}>
                     <IconButton disableRipple onClick={onClose} sx={{
                         borderRadius: '0.5rem',
-            '&:hover': {
-              background: gray100
-            }
-          }}>
-            <CloseIcon />
-          </IconButton>
-          <Divider sx={{ borderRight: `0.0625rem solid ${gray100}`, height: '2.25rem', mx: '1rem' }} />
-          <Typography>
-            {step === -1 ? "Create template" : "Map selected dataset"}
-          </Typography>
-        </Box>
+                        '&:hover': {
+                            background: gray100
+                        }
+                    }}>
+                        <CloseIcon />
+                    </IconButton>
+                    <Divider sx={{ borderRight: `0.0625rem solid ${gray100}`, height: '2.25rem', mx: '1rem' }} />
+                    <Typography>
+                        {step === -1 ? "Create template" : "Map selected dataset"}
+                    </Typography>
+                </Box>
 
                 <Box display='flex' gap={1}>
                     {
-                        step!==-1 && <IconButton sx={{borderRadius: '0.5rem'}}>
-                        <MapTriFold/>
-                    </IconButton>
+                        step !== -1 && <IconButton sx={{ borderRadius: '0.5rem' }} onClick={() => setIsTourOpen(true)}>
+                            <MapTriFold />
+                        </IconButton>
                     }
-                    <Button onClick={() => setIsInfoOpen(true)} disableRipple variant="outlined">
+                    <Button onClick={handleInfoBtnClick} disableRipple variant="outlined" className="about-info__btn">
                         Info
                     </Button>
                 </Box>
             </Box>
 
-            {isInfoOpen && <Info setIsInfoOpen={setIsInfoOpen}/>}
+            {isInfoOpen && <Info handleClose={handleClose}/>}
         </>
     )
 };

lib/components/common/Info.tsx

@@ -108,17 +108,13 @@ const styles = {
     }
 };
 
-const Info = (props: { setIsInfoOpen: (b: boolean) => void }) => {
-    const {setIsInfoOpen} = props
-
-    const handleClose = () => {
-        setIsInfoOpen(false)
-    }
+const Info = (props: { handleClose: () => void }) => {
+    const {handleClose} = props
 
     const InfoContent = () => (
-        <>
+        <Box>
             <Box sx={styles.header}>
-                <IconButton onClick={handleClose} sx={{p: 1, borderRadius: 2, ml: 'auto'}}>
+                <IconButton onClick={handleClose} sx={{p: 1, borderRadius: 2, ml: 'auto'}} className="sidebar__close-button">
                     <CloseIcon/>
                 </IconButton>
                 <Typography variant="h3">About CDE mapping</Typography>
@@ -192,13 +188,13 @@ const Info = (props: { setIsInfoOpen: (b: boolean) => void }) => {
                     </Typography>
                 </Box>
             </Box>
-        </>
+        </Box>
     )
 
     return (
         <>
             <Box sx={styles.backdrop} onClick={handleClose}/>
-            <Box sx={styles.wrap}>
+            <Box sx={styles.wrap} className="about-info__sidebar">
                 {InfoContent()}
             </Box>
         </>

lib/components/common/PreviewBox.tsx

@@ -1,25 +1,28 @@
-import React from "react";
 import {Box, Typography, Chip, Button} from "@mui/material";
 import {useDataContext} from "../../contexts/data/DataContext.ts";
 import {ArrowDropDown, BulletIcon} from "../../icons";
 import {StyledTable} from "./StyledTable";
 import {useUIContext} from "../../contexts/ui/UIContext.ts";
 import {useServicesContext} from "../../contexts/services/ServicesContext.ts";
 
+interface PreviewBoxProps {
+    togglePreview: boolean;
+    onToggle: () => void;
+}
 
-const PreviewBox = () => {
+const PreviewBox = ({togglePreview, onToggle}: PreviewBoxProps) => {
     const {datasetSample} = useDataContext();
     const {step, setStep} = useUIContext();
     const {
         getTotalRowsCount,
         getUnmappedRowsCount,
         getMappedRowsCount,
     } = useServicesContext();
-    const [togglePreview, setTogglePreview] = React.useState(false);
+
     const headers = datasetSample[0]
 
     return (
-        <Box sx={{
+        <Box className="preview__toggle" sx={{
             position: 'absolute',
             background: '#fff',
             zIndex: 9999999999,
@@ -30,8 +33,7 @@ const PreviewBox = () => {
             borderRadius: '0.75rem 0.75rem 0 0',
             border: '0.0625rem solid #ECEDEE',
         }}>
-            <Box display='flex' gap={1.5} px={3} py={2} sx={{cursor: 'pointer'}} alignItems='center'
-                 onClick={() => setTogglePreview(!togglePreview)}>
+            <Box display='flex' gap={1.5} px={3} py={2} sx={{ cursor: 'pointer' }} alignItems='center' onClick={onToggle} className="preview__toggle_false">
                 <Typography sx={{
                     flex: 1,
                     color: '#676C74',

lib/components/common/StyledCard.tsx

@@ -15,11 +15,11 @@ interface StyledCardProps {
     value: string;
     isSuggested?: boolean;
     selectedValue: string;
-    onChange: (value: string) => void;
+    onChange: (value: string, selectedValue: string) => void;
+    onAfterChange: () => void;
 }
 
 const StyledCard: React.FC<StyledCardProps> = ({value, isSuggested, selectedValue, onChange}) => {
-
     const radioGroup = useRadioGroup();
     let checked = false;
 
@@ -28,10 +28,8 @@ const StyledCard: React.FC<StyledCardProps> = ({value, isSuggested, selectedValu
     }
 
     const handleRadioChange = () => {
-        if (value !== selectedValue) {
-            onChange(value);
-        }
-    };
+        onChange(value, selectedValue);
+    }
 
     return (
         <Box sx={{minWidth: 320}}>