Headlamp new user welcome UI

frontend/src/components/App/CreateCluster/AddCluster.tsx

@@ -31,6 +31,7 @@ import { useTypedSelector } from '../../../redux/hooks';
 import { DialogProps } from '../../common/Dialog';
 import { PageGrid } from '../../common/Resource';
 import SectionBox from '../../common/SectionBox';
+import { TutorialToolTip } from '../../common/Tutorial/TutorialToolTip';
 
 function AddClusterProvider({ title, icon, description, url }: ClusterProviderInfo) {
   const history = useHistory();
@@ -66,6 +67,35 @@ export default function AddCluster(props: DialogProps & { onChoice: () => void }
     entry => entry.url === '/plugin-catalog'
   );
 
+  // Hackathon WIP for tutorial mode
+  // console.log('current tutorial mode', localStorage.getItem('tutorialMode'));
+  // const isTutorialMode = localStorage.getItem('tutorialMode') === 'true';
+
+  // const [loadFromKubeConfigDescription, setloadFromKubeConfigDescription] = React.useState<
+  //   string | React.ReactNode
+  // >('loading..');
+
+  // React.useEffect(() => {
+  //   if (isTutorialMode) {
+  //     setloadFromKubeConfigDescription(
+  //       <TutorialToolTip
+  //         context="LoadFromKubeConfig"
+  //         labelText={t('translation|Load from KubeConfig')}
+  //       />
+  //     );
+  //   } else {
+  //     setloadFromKubeConfigDescription(t('translation|Load from KubeConfig'));
+  //   }
+  // }, [isTutorialMode, loadFromKubeConfigDescription, t]);
+  // need to clean later
+
+  const buttonText = (
+    <TutorialToolTip
+      context="LoadFromKubeConfig"
+      labelText={t('translation|Load from KubeConfig')}
+    />
+  );
+
   return (
     <PageGrid>
       <SectionBox backLink title={t('translation|Add Cluster')} py={2} mt={[4, 0, 0]}>
@@ -82,7 +112,7 @@ export default function AddCluster(props: DialogProps & { onChoice: () => void }
                   onClick={() => history.push(createRouteURL('loadKubeConfig'))}
                   startIcon={<InlineIcon icon="mdi:plus-box-outline" />}
                 >
-                  {t('translation|Load from KubeConfig')}
+                  {buttonText}
                 </Button>
               </CardContent>
             </Card>

frontend/src/components/Sidebar/Sidebar.tsx

@@ -30,6 +30,8 @@ import { createRouteURL } from '../../lib/router/createRouteURL';
 import { useTypedSelector } from '../../redux/hooks';
 import ActionButton from '../common/ActionButton';
 import CreateButton from '../common/Resource/CreateButton';
+import { TutorialGuide } from '../common/Tutorial';
+import { TutorialToolTip } from '../common/Tutorial/TutorialToolTip';
 import NavigationTabs from './NavigationTabs';
 import SidebarItem, { SidebarItemProps } from './SidebarItem';
 import { DefaultSidebars, setSidebarSelected, setWhetherSidebarOpen } from './sidebarSlice';
@@ -73,6 +75,10 @@ function AddClusterButton() {
   const { t } = useTranslation(['translation']);
   const { isOpen } = useSidebarInfo();
 
+  const buttonText = (
+    <TutorialToolTip context="AddClusterButton" labelText={t('translation|Add Cluster')} />
+  );
+
   return (
     <Box pb={2}>
       {isOpen ? (
@@ -81,13 +87,13 @@ function AddClusterButton() {
           startIcon={<InlineIcon icon="mdi:plus-box-outline" />}
           sx={{ color: theme => theme.palette.sidebar.color }}
         >
-          {t('translation|Add Cluster')}
+          {buttonText}
         </Button>
       ) : (
         <ActionButton
           onClick={() => history.push(createRouteURL('addCluster'))}
           icon="mdi:plus-box-outline"
-          description={t('translation|Add Cluster')}
+          description={buttonText}
           color="#adadad"
           width={38}
         />
@@ -96,6 +102,36 @@ function AddClusterButton() {
   );
 }
 
+function HelpButton() {
+  const { isOpen } = useSidebarInfo();
+  const { t } = useTranslation();
+  const [openGuide, setOpenGuide] = React.useState(false);
+  const label = t('translation|Guide');
+
+  return (
+    <Box pb={2}>
+      {isOpen ? (
+        <Button
+          onClick={() => setOpenGuide(true)}
+          startIcon={<InlineIcon icon="mdi:lightbulb-on-outline" />}
+          sx={{ color: theme => theme.palette.sidebar.color }}
+        >
+          {label}
+        </Button>
+      ) : (
+        <ActionButton
+          onClick={() => setOpenGuide(true)}
+          icon="mdi:lightbulb-on-outline"
+          description={label}
+          color="#adadad"
+          width={38}
+        />
+      )}
+      <TutorialGuide open={openGuide} onClose={() => setOpenGuide(false)} />
+    </Box>
+  );
+}
+
 function SidebarToggleButton() {
   const dispatch = useDispatch();
   const { isOpen, isNarrow, canExpand, isTemporary } = useSidebarInfo();
@@ -134,12 +170,19 @@ const DefaultLinkArea = memo((props: { sidebarName: string; isOpen: boolean }) =
       <Box
         display="flex"
         justifyContent="space-between"
-        alignItems="center"
-        flexDirection={isOpen ? 'row' : 'column'}
+        alignItems="flex-start"
+        flexDirection={'column'}
         p={1}
       >
-        <Box>{isElectron() && <AddClusterButton />}</Box>
         <Box>
+          <HelpButton />
+        </Box>
+        <Box>{isElectron() && <AddClusterButton />}</Box>
+        <Box
+          sx={{
+            alignSelf: isOpen ? 'flex-end' : 'center',
+          }}
+        >
           <SidebarToggleButton />
         </Box>
       </Box>
@@ -148,7 +191,27 @@ const DefaultLinkArea = memo((props: { sidebarName: string; isOpen: boolean }) =
 
   return (
     <Box textAlign="center">
-      <CreateButton isNarrow={!isOpen} />
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          mb: 2,
+        }}
+      >
+        <Box
+          sx={{
+            alignSelf: isOpen ? 'flex-start' : 'center',
+            mt: 1,
+            ml: isOpen ? 2 : 0,
+            mb: isOpen ? 2 : 0,
+          }}
+        >
+          <HelpButton />
+        </Box>
+        <CreateButton isNarrow={!isOpen} />
+      </Box>
       <Box
         display="flex"
         justifyContent="space-between"
@@ -347,9 +410,9 @@ export const PureSidebar = memo(
 
     const conditionalProps = isTemporaryDrawer
       ? {
-          open: temporarySideBarOpen,
-          onClose: onToggleOpen,
-        }
+        open: temporarySideBarOpen,
+        onClose: onToggleOpen,
+      }
       : {};
 
     React.useEffect(() => {

frontend/src/components/cluster/KubeConfigLoader.tsx

@@ -36,6 +36,7 @@ import { setStatelessConfig } from '../../redux/configSlice';
 import { DialogTitle } from '../common/Dialog';
 import { DropZoneBox } from '../common/DropZoneBox';
 import Loader from '../common/Loader';
+import { TutorialToolTip } from '../common/Tutorial/TutorialToolTip';
 import { ClusterDialog } from './Chooser';
 
 interface Cluster {
@@ -226,6 +227,13 @@ function KubeConfigLoader() {
     }
   }
 
+  const buttonText = (
+    <TutorialToolTip
+      context="LoadDemoKubeConfig"
+      labelText={t('translation|Load example KubeConfig')}
+    />
+  );
+
   function renderSwitch() {
     switch (state) {
       case Step.LoadKubeConfig:
@@ -246,6 +254,16 @@ function KubeConfigLoader() {
                     {t('translation|Choose file')}
                   </Button>
                 </Tooltip>
+
+                {/* clean later: button for demo */}
+                <Button
+                  // variant="contained"
+                  sx={{
+                    marginTop: 2,
+                  }}
+                >
+                  {buttonText}
+                </Button>
               </FormControl>
             </DropZoneBox>
             <Box style={{ display: 'flex', justifyContent: 'center' }}>

frontend/src/components/common/ActionButton/ActionButton.tsx

@@ -26,7 +26,7 @@ export type ButtonStyle = 'action' | 'menu';
 
 export interface ActionButtonProps {
   /** A short description of the action. */
-  description: string;
+  description: string | React.ReactNode;
   /** Either a string icon, or imported icon. */
   icon: string | IconifyIcon;
   /** The action when it's activated. */

frontend/src/components/common/Resource/CreateButton.tsx

@@ -26,6 +26,7 @@ import { useTranslation } from 'react-i18next';
 import { useSelectedClusters } from '../../../lib/k8s';
 import { Activity } from '../../activity/Activity';
 import ActionButton from '../ActionButton';
+import { TutorialToolTip } from '../Tutorial/TutorialToolTip';
 import EditorDialog from './EditorDialog';
 
 interface CreateButtonProps {
@@ -53,6 +54,8 @@ export default function CreateButton(props: CreateButtonProps) {
     }
   }, [clusters]);
 
+  const buttonText = <TutorialToolTip context="CreateButton" labelText={t('translation|Create')} />;
+
   const openActivity = () => {
     const id = 'create-button';
     Activity.launch({
@@ -128,7 +131,7 @@ export default function CreateButton(props: CreateButtonProps) {
             },
           })}
         >
-          {t('translation|Create')}
+          {buttonText}
         </Button>
       )}
     </React.Fragment>

frontend/src/components/common/Resource/EditorDialog.tsx

@@ -47,6 +47,7 @@ import ConfirmButton from '../ConfirmButton';
 import { Dialog, DialogProps } from '../Dialog';
 import Loader from '../Loader';
 import Tabs from '../Tabs';
+import { TutorialToolTip } from '../Tutorial';
 import DocsViewer from './DocsViewer';
 import SimpleEditor from './SimpleEditor';
 import { UploadDialog } from './UploadDialog';
@@ -447,6 +448,18 @@ export default function EditorDialog(props: EditorDialogProps) {
                 >
                   {t('translation|Upload File/URL')}
                 </Button>
+
+                {/* clean later: hackathon demo button */}
+                <Button
+                  onClick={() => {
+                    setUploadFiles(true);
+                  }}
+                >
+                  <TutorialToolTip
+                    context="CreateDemoResource"
+                    labelText={t('translation|Create demo resource')}
+                  />
+                </Button>
               </FormGroup>
             </Grid>
           </Grid>