[Cherry-Pick-Main][UI][SDL-5853] Improve user onboarding by adding documentation to screens (#52)

Author: mkaliberda

src/ui/package.json

@@ -28,7 +28,6 @@
     "lodash-es": "^4.17.15",
     "lodash.isequal": "^4.5.0",
     "material-css": "^0.7.0",
-    "sass": "1.80.3",
     "plotly.js": "^2.11.1",
     "plotly.js-cartesian-dist-min": "^2.11.1",
     "prop-types": "^15.7.2",
@@ -42,7 +41,7 @@
     "react-i18next": "^11.8.9",
     "react-images-uploading": "^3.1.2",
     "react-loader-spinner": "^4.0.0",
-    "react-markdown": "^5.0.3",
+    "react-markdown": "8.0.7",
     "react-plotly.js": "^2.4.0",
     "react-redux": "^7.1.3",
     "react-router": "^5.2.0",
@@ -56,6 +55,7 @@
     "redux-promise-middleware": "^6.1.2",
     "redux-thunk": "^2.3.0",
     "regenerator-runtime": "^0.13.3",
+    "sass": "1.80.3",
     "start-server-and-test": "^1.11.0",
     "uuid": "^8.3.2",
     "wavefile": "^11.0.0"
@@ -136,7 +136,6 @@
     "cyheadless": "./node_modules/.bin/cypress run --headless --browser chrome",
     "test-e2e": "start-server-and-test start http://localhost:3000 cyheadless"
   },
-
   "devDependencies": {
     "@babel/core": "^7.7.4",
     "@babel/plugin-transform-runtime": "^7.7.4",

src/ui/src/components/Layout/LayoutConstants.js

@@ -69,27 +69,31 @@ const MENU_ITEMS_INFO = {
   },
   SUMMARY: {
     title: i18n.t("layout:nav-drawer.menu-item-project-summary"),
+    tooltip: i18n.t("layout:nav-drawer-tooltips.project-summary"),
     id: "navSummary",
     orderIndex: 2,
     iconfn: (iconProps) => <SummaryIcon {...iconProps} />,
     getPath: (params = {}) => generatePath(ROUTES.MAIN.PROJECT_SUMMARY.path, { ...params }),
   },
   DATAMANAGER: {
     title: i18n.t("layout:nav-drawer.menu-item-data-manager"),
+    tooltip: i18n.t("layout:nav-drawer-tooltips.data-manager"),
     id: "navDataManager",
     orderIndex: 3,
     iconfn: (iconProps) => <StorageIcon {...iconProps} />,
     getPath: (params = {}) => generatePath(ROUTES.MAIN.DATA_MANAGER.path, { ...params }),
   },
   PRERARE_DATA: {
     title: i18n.t("layout:nav-drawer.menu-item-queries"),
+    tooltip: i18n.t("layout:nav-drawer-tooltips.queries"),
     id: "navPrepareData",
     orderIndex: 4,
     iconfn: (iconProps) => <PollOutlinedIcon {...iconProps} />,
     getPath: (params = {}) => generatePath(ROUTES.MAIN.DATA_EXPLORER.path, { ...params }),
   },
   BUILD_MODEL: {
     title: i18n.t("layout:nav-drawer.menu-item-build-model"),
+    tooltip: i18n.t("layout:nav-drawer-tooltips.pipelines"),
     id: "navBuildModel",
     orderIndex: 5,
     iconfn: (iconProps) => <BuildIcon {...iconProps} />,
@@ -98,7 +102,7 @@ const MENU_ITEMS_INFO = {
     subItems: [
       {
         title: i18n.t("layout:nav-drawer.menu-item-feature-extractor"),
-        tooltip: i18n.t("layout:nav-drawer.menu-item-pipeline-fe-tooltip"),
+        tooltip: i18n.t("layout:nav-drawer-tooltips.pipeline-fe"),
         id: "navFeatureExtractor",
         orderIndex: 1,
         iconfn: (iconProps) => <FilterAltOutlinedIcon {...iconProps} />,
@@ -107,7 +111,7 @@ const MENU_ITEMS_INFO = {
       },
       {
         title: i18n.t("layout:nav-drawer.menu-item-pipeline-custom"),
-        tooltip: i18n.t("layout:nav-drawer.menu-item-pipeline-custom-tooltip"),
+        tooltip: i18n.t("layout:nav-drawer-tooltips.pipeline-custom"),
         id: "navPipelineCustom",
         orderIndex: 3,
         iconfn: (iconProps) => <ModelTrainingOutlinedIcon {...iconProps} fontSize="medium" />,
@@ -118,7 +122,7 @@ const MENU_ITEMS_INFO = {
       },
       {
         title: i18n.t("layout:nav-drawer.menu-item-pipeline-automl"),
-        tooltip: i18n.t("layout:nav-drawer.menu-item-pipeline-automl-tooltip"),
+        tooltip: i18n.t("layout:nav-drawer-tooltips.pipeline-automl"),
         id: "navPipelineAutoML",
         orderIndex: 2,
         iconfn: (iconProps) => <AutoModeOutlinedIcon {...iconProps} />,
@@ -131,27 +135,31 @@ const MENU_ITEMS_INFO = {
   },
   MODELS: {
     title: i18n.t("layout:nav-drawer.menu-item-models"),
+    tooltip: i18n.t("layout:nav-drawer-tooltips.models"),
     id: "navOpenModel",
     orderIndex: 6,
     iconfn: (iconProps) => <DataObjectOutlinedIcon {...iconProps} />,
     getPath: (params = {}) => generatePath(ROUTES.MAIN.MODEL_SELECT.path, { ...params }),
     subItems: [
       {
         title: i18n.t("layout:nav-drawer.menu-item-explore-model"),
+        tooltip: i18n.t("layout:nav-drawer-tooltips.explore-model"),
         id: "navExploreModel",
         orderIndex: 7,
         iconfn: (iconProps) => <ExploreIcon {...iconProps} />,
         getPath: (params = {}) => generatePath(ROUTES.MAIN.MODEL_EXPLORE.path, { ...params }),
       },
       {
         title: i18n.t("layout:nav-drawer.menu-item-test-model"),
+        tooltip: i18n.t("layout:nav-drawer-tooltips.test-model"),
         id: "navTestModel",
         orderIndex: 8,
         iconfn: (iconProps) => <PlaylistAddCheckIcon {...iconProps} />,
         getPath: (params = {}) => generatePath(ROUTES.MAIN.MODEL_TEST.path, { ...params }),
       },
       {
         title: i18n.t("layout:nav-drawer.menu-item-download-model"),
+        tooltip: i18n.t("layout:nav-drawer-tooltips.download-model"),
         id: "navDownloadModel",
         orderIndex: 9,
         iconfn: (iconProps) => <CloudDownloadIcon {...iconProps} />,

src/ui/src/components/Layout/NavDrawer.jsx

@@ -167,14 +167,18 @@ const NavDrawer = ({
                   })}
                   disabled={selectedProject === null}
                 >
-                  <ListItem key={menuItem.id} id={menuItem.id}>
-                    <Tooltip title={menuItem.title} aria-label="add">
+                  <Tooltip
+                    title={menuItem.tooltip || menuItem.title}
+                    placement="right"
+                    aria-label="menuItem.title"
+                  >
+                    <ListItem key={menuItem.id} id={menuItem.id}>
                       <ListItemIcon className={classes.iconButton}>
                         {menuItem.iconfn(getMenuProps(menuItem.orderIndex))}
                       </ListItemIcon>
-                    </Tooltip>
-                    <ListItemText primary={menuItem.title} />
-                  </ListItem>
+                      <ListItemText primary={menuItem.title} />
+                    </ListItem>
+                  </Tooltip>
                 </NavLink>
 
                 {menuItem?.subItems ? (

src/ui/src/components/ModelControlPanel/ModelControlPanel.jsx

@@ -38,6 +38,7 @@ const ModelControlPanel = ({
   onChangePlatform,
   downloading,
   handleDownloadRequest,
+  onShowInformation,
 }) => {
   const { t } = useTranslation("models");
   const routersHistory = useHistory();
@@ -108,6 +109,7 @@ const ModelControlPanel = ({
           />
         </>
       }
+      onShowInformation={onShowInformation}
     />
   );
 };

src/ui/src/containers/BuildModel/TheSelectScreen/TheSelectScreen.jsx

@@ -27,7 +27,7 @@ import { useHistory, generatePath, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Box, Typography } from "@mui/material";
 import { ROUTES } from "routers";
-import { useWindowResize } from "hooks";
+import { useWindowResize, useMainContext, useReadFileText } from "hooks";
 import { RESPONSIVE } from "consts";
 import { UIButtonConvertibleToShort } from "components/UIButtons";
 
@@ -40,6 +40,8 @@ import PipelineTemplateCreateForm from "components/PipelineTemplateCreateForm";
 
 import { DEFAULT_CLASSIFIER, PIPELINE_STEP_TYPES } from "store/autoML/const";
 
+import infoFile from "i18n/locales/en/info-pipelines.md";
+
 import useStyles from "../BuildModeStyle";
 import SelectCard from "../components/SelectCard";
 
@@ -73,6 +75,9 @@ const TheSelectScreen = ({
 
   const [isShortBtnText, setIsShortBtnText] = useState(false);
 
+  const { showInformationWindow } = useMainContext();
+  const screenInfoMd = useReadFileText(infoFile);
+
   useWindowResize((data) => {
     setIsShortBtnText(data.innerWidth < RESPONSIVE.WIDTH_FOR_SHORT_TEXT);
   });
@@ -243,6 +248,7 @@ const TheSelectScreen = ({
               />
             </>
           }
+          onShowInformation={() => showInformationWindow("Pipelines", screenInfoMd)}
         />
       </Box>
       <Box mb={2}>

src/ui/src/containers/DataExplorer/TheDataExplorer.jsx

@@ -27,34 +27,45 @@ import { ROUTES } from "routers";
 import TheQueryScreen from "./TheQueryScreen";
 
 import { DataExplorerContext } from "./context";
+import { useMainContext, useReadFileText } from "hooks";
 import { AppLoader } from "components/UILoaders";
+import infoFile from "i18n/locales/en/info-queries.md";
 
 const TheQueryDetailScreen = lazy(() => import("./TheQueryDetailScreen"));
 const TheQueryCreateScreen = lazy(() => import("./TheQueryCreateScreen"));
 
 const TheDataExplorer = () => {
   const { projectUUID } = useParams();
 
+  const { showInformationWindow } = useMainContext();
+  const screenInfoMd = useReadFileText(infoFile);
+
   return (
     <ErrorBoundary>
       <Box>
         <Switch>
           <Route path={ROUTES.MAIN.DATA_EXPLORER.child.QUERY_SCREEN.path}>
             <DataExplorerContext.Provider>
-              <TheQueryScreen />
+              <TheQueryScreen
+                onShowInformation={() => showInformationWindow("Querying Data", screenInfoMd)}
+              />
             </DataExplorerContext.Provider>
           </Route>
           <Route path={ROUTES.MAIN.DATA_EXPLORER.child.QUERY_DETAILS_SCREEN.path}>
             <DataExplorerContext.Provider>
               <Suspense fallback={<AppLoader isOpen />}>
-                <TheQueryDetailScreen />
+                <TheQueryDetailScreen
+                  onShowInformation={() => showInformationWindow("Querying Data", screenInfoMd)}
+                />
               </Suspense>
             </DataExplorerContext.Provider>
           </Route>
           <Route path={ROUTES.MAIN.DATA_EXPLORER.child.QUERY_CREATE_SCREEN.path}>
             <DataExplorerContext.Provider>
               <Suspense fallback={<AppLoader isOpen />}>
-                <TheQueryCreateScreen />
+                <TheQueryCreateScreen
+                  onShowInformation={() => showInformationWindow("Querying Data", screenInfoMd)}
+                />
               </Suspense>
             </DataExplorerContext.Provider>
           </Route>

src/ui/src/containers/DataExplorer/TheQueryDetailScreen/TheQueryDetailScreen.jsx

@@ -67,6 +67,7 @@ const TheQueryDetailScreen = ({
   loadQueries,
   setHasUnsavedChanges,
   resetFeatureStats,
+  onShowInformation,
 }) => {
   const { projectUUID } = useParams();
   const { queryUUID } = useParams();
@@ -290,6 +291,7 @@ const TheQueryDetailScreen = ({
               ? RESPONSIVE.TRUNCATE_NAME_OVER_SHORT_TEXT
               : RESPONSIVE.TRUNCATE_NAME_OVER
           }
+          onShowInformation={onShowInformation}
           leftColumns={4}
           rightColumns={8}
           actionsBtns={

src/ui/src/containers/DataExplorer/TheQueryScreen/TheQueryScreen.jsx

@@ -28,7 +28,7 @@ import { useWindowResize } from "hooks";
 import { RESPONSIVE } from "consts";
 import { UIButtonConvertibleToShort } from "components/UIButtons";
 
-const TheQueryScreen = () => {
+const TheQueryScreen = ({ onShowInformation }) => {
   // eslint-disable-next-line no-unused-vars
   const { projectUUID } = useParams();
   const routersHistory = useHistory();
@@ -39,7 +39,7 @@ const TheQueryScreen = () => {
     setIsShortBtnText(data.innerWidth < RESPONSIVE.WIDTH_FOR_SHORT_TEXT);
   });
 
-  const handledleUpdateAction = () => {
+  const handleUpdateAction = () => {
     routersHistory.push({
       pathname: generatePath(ROUTES.MAIN.DATA_EXPLORER.child.QUERY_SCREEN.path, {
         projectUUID,
@@ -59,7 +59,8 @@ const TheQueryScreen = () => {
     <>
       <Box mb={2}>
         <ControlPanel
-          title={"Data Explorer"}
+          title={"Querying Data"}
+          onShowInformation={onShowInformation}
           actionsBtns={
             <>
               <UIButtonConvertibleToShort
@@ -76,7 +77,7 @@ const TheQueryScreen = () => {
         />
       </Box>
       <Box>
-        <QueriesTable onUpdateProjectAction={handledleUpdateAction} />
+        <QueriesTable onUpdateProjectAction={handleUpdateAction} />
       </Box>
     </>
   );

src/ui/src/containers/DataManager/TheCaptureDetailsScreen/TheCaptureDetailsScreen.jsx

@@ -85,6 +85,7 @@ const TheCaptureDetailsScreen = ({
   setHasUnsavedChanges,
   setSelectedLabel,
   updateCapturesStatisticsSegments,
+  onShowInformation,
 }) => {
   const classes = useStyles();
   const routersHistory = useHistory();
@@ -548,6 +549,7 @@ const TheCaptureDetailsScreen = ({
               />
             </>
           }
+          onShowInformation={onShowInformation}
         />
       </Box>
       <Box mb={1}>

src/ui/src/containers/DataManager/TheCapturesScreen/TheCapturesScreen.jsx

@@ -72,6 +72,7 @@ const TheCapturesScreen = ({
   loadSources,
   deleteCapture,
   createDefaultMetadata,
+  onShowInformation,
 }) => {
   const classes = useStyles();
   const { projectUUID } = useParams();
@@ -193,6 +194,7 @@ const TheCapturesScreen = ({
               />
             </>
           }
+          onShowInformation={onShowInformation}
         />
       </Box>
       <DialogInformation isOpen={isOpenImport} onClose={handleCloseImportForm}>

src/ui/src/containers/DataManager/TheDataManager.jsx

@@ -36,11 +36,13 @@ import DialogTableSelect from "components/UIDialogTableSelect";
 
 import { ROUTES } from "routers";
 
-import { useRouterSearchParams } from "hooks";
+import { useRouterSearchParams, useMainContext, useReadFileText } from "hooks";
+
 import TheCapturesScreen from "./TheCapturesScreen";
 
 import { DataManagerContext } from "./context";
 import { AppLoader } from "components/UILoaders";
+import infoFile from "i18n/locales/en/info-data-manager.md";
 
 // Lazy loading optional screen
 const TheCaptureDetailsScreen = lazy(() => import("./TheCaptureDetailsScreen"));
@@ -59,6 +61,9 @@ const TheDataManager = ({
   const { projectUUID } = useParams();
   const { t } = useTranslation("data-manager");
 
+  const { showInformationWindow } = useMainContext();
+  const screenInfoMd = useReadFileText(infoFile);
+
   const sessionsToSelect = useMemo(() => {
     return sessions.map((session) => ({
       ...session,
@@ -120,7 +125,10 @@ const TheDataManager = ({
           <DataManagerContext.Provider
             value={{ onOpenSelectSessionDialog: handleOpenSelectSessionDialog }}
           >
-            <TheCapturesScreen selectedSession={selectedSession} />
+            <TheCapturesScreen
+              onShowInformation={() => showInformationWindow("Data Manager", screenInfoMd)}
+              selectedSession={selectedSession}
+            />
           </DataManagerContext.Provider>
         </Route>
         <Route path={ROUTES.MAIN.DATA_MANAGER.child.CAPTURE_DETAILS_SCREEN.path}>
@@ -129,6 +137,7 @@ const TheDataManager = ({
           >
             <Suspense fallback={AppLoader}>
               <TheCaptureDetailsScreen
+                onShowInformation={() => showInformationWindow("Data Manager", screenInfoMd)}
                 selectedSession={selectedSession}
                 isDisabledByAutoSession={isDisabledByAutoSession}
                 isReadOnlyMode={isReadOnlyMode}