Vincent-Hackathon: Frontend: Sidebar: Add tutorial tooltip for closed sidebar add cluster

Author: vyncent-t

frontend/src/components/Sidebar/Sidebar.tsx

@@ -30,6 +30,7 @@ import { createRouteURL } from '../../lib/router/createRouteURL';
 import { useTypedSelector } from '../../redux/hooks';
 import ActionButton from '../common/ActionButton';
 import CreateButton from '../common/Resource/CreateButton';
+import { TutorialToolTip } from '../common/Tutorial/TutorialToolTip';
 import NavigationTabs from './NavigationTabs';
 import SidebarItem, { SidebarItemProps } from './SidebarItem';
 import { DefaultSidebars, setSidebarSelected, setWhetherSidebarOpen } from './sidebarSlice';
@@ -73,6 +74,28 @@ function AddClusterButton() {
   const { t } = useTranslation(['translation']);
   const { isOpen } = useSidebarInfo();
 
+  const [AddClusterButtonDescription, setAddClusterButtonDescription] = React.useState<
+    string | React.ReactNode
+  >('loading..');
+
+  // since we can use this as part of the tutorial mode we grab the tutorialEnabled from local storage
+
+  // set it with a useEffect for now, we can always change it latter in the settings to have that refresh thing to set the local storage
+  // localStorage.setItem('tutorialMode', 'true');
+  console.log('current tutorial mode', localStorage.getItem('tutorialMode'));
+  const isTutorialMode = localStorage.getItem('tutorialMode') === 'true';
+
+  React.useEffect(() => {
+    if (isTutorialMode) {
+      // setAddClusterButtonDescription("tutorial");
+      setAddClusterButtonDescription(
+        <TutorialToolTip context="AddClusterButton" labelText={t('translation|Add Cluster')} />
+      );
+    } else {
+      setAddClusterButtonDescription(t('translation|Add Cluster'));
+    }
+  }, [isTutorialMode, AddClusterButtonDescription, t]);
+
   return (
     <Box pb={2}>
       {isOpen ? (
@@ -81,13 +104,13 @@ function AddClusterButton() {
           startIcon={<InlineIcon icon="mdi:plus-box-outline" />}
           sx={{ color: theme => theme.palette.sidebar.color }}
         >
-          {t('translation|Add Cluster')}
+          {AddClusterButtonDescription}
         </Button>
       ) : (
         <ActionButton
           onClick={() => history.push(createRouteURL('addCluster'))}
           icon="mdi:plus-box-outline"
-          description={t('translation|Add Cluster')}
+          description={AddClusterButtonDescription}
           color="#adadad"
           width={38}
         />