MTV-3731: "Tips and tricks" panel is now persistent available/displayed on all pages (#2107)

Resolves: MTV-3731

Signed-off-by: Sharon Gratch <[email protected]>

Author: sgratch

knip.config.ts

@@ -5,6 +5,8 @@ export default {
     'src/overview/OverviewPage.tsx',
     'src/overview/hooks/OverviewContext.ts',
     'src/overview/hooks/useOverviewContext.ts',
+    'src/onlineHelp/tipsAndTricksDrawer/hooks/learningExperienceContext.ts',
+    'src/onlineHelp/tipsAndTricksDrawer/hooks/useLearningExperienceContext.ts',
 
     'src/providers/create/ProvidersCreatePage.tsx',
     'src/providers/list/ProvidersListPage.tsx',

src/modules/NetworkMaps/views/details/NetworkMapDetailsPage.tsx

@@ -1,4 +1,5 @@
 import { type FC, memo } from 'react';
+import TipsAndTricksDrawer from 'src/onlineHelp/tipsAndTricksDrawer/TipsAndTricksDrawer';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { HorizontalNav, type K8sModel } from '@openshift-console/dynamic-plugin-sdk';
@@ -38,7 +39,11 @@ const NetworkMapDetailsPageInternal: FC<{
 const NetworkMapDetailsPageInternalMemo = memo(NetworkMapDetailsPageInternal);
 
 const NetworkMapDetailsPage: FC<NetworkMapDetailsPageProps> = ({ name, namespace }) => {
-  return <NetworkMapDetailsPageInternalMemo name={name} namespace={namespace} />;
+  return (
+    <TipsAndTricksDrawer>
+      <NetworkMapDetailsPageInternalMemo name={name} namespace={namespace} />;
+    </TipsAndTricksDrawer>
+  );
 };
 NetworkMapDetailsPage.displayName = 'NetworkMapDetailsPage';
 

src/modules/NetworkMaps/views/list/NetworkMapsListPage.tsx

@@ -4,6 +4,7 @@ import { loadUserSettings } from 'src/components/common/Page/userSettings';
 import StandardPage from 'src/components/page/StandardPage';
 import useGetDeleteAndEditAccessReview from 'src/modules/Providers/hooks/useGetDeleteAndEditAccessReview';
 import NetworkMapsEmptyState from 'src/networkMaps/components/NetworkMapsEmptyState';
+import TipsAndTricksDrawer from 'src/onlineHelp/tipsAndTricksDrawer/TipsAndTricksDrawer';
 
 import {
   NetworkMapModel,
@@ -127,23 +128,25 @@ const NetworkMapsListPage: FC<{
   }));
 
   return (
-    <StandardPage<NetworkMapData>
-      data-testid="network-maps-list"
-      {...(permissions.canCreate && {
-        addButton: <NetworkMapsAddButton namespace={namespace} testId="add-network-map-button" />,
-      })}
-      dataSource={[data || [], networkMapsLoaded, networkMapsLoadError]}
-      RowMapper={NetworkMapRow}
-      fieldsMetadata={fieldsMetadata}
-      namespace={namespace}
-      title={t('Network maps')}
-      titleHelpContent={t(
-        'Network maps ensure that the network configurations of your migrating virtual machines (VMs) are correctly translated and applied in the target environment.',
-      )}
-      userSettings={userSettings}
-      customNoResultsFound={<NetworkMapsEmptyState namespace={namespace} />}
-      page={1}
-    />
+    <TipsAndTricksDrawer>
+      <StandardPage<NetworkMapData>
+        data-testid="network-maps-list"
+        {...(permissions.canCreate && {
+          addButton: <NetworkMapsAddButton namespace={namespace} testId="add-network-map-button" />,
+        })}
+        dataSource={[data || [], networkMapsLoaded, networkMapsLoadError]}
+        RowMapper={NetworkMapRow}
+        fieldsMetadata={fieldsMetadata}
+        namespace={namespace}
+        title={t('Network maps')}
+        titleHelpContent={t(
+          'Network maps ensure that the network configurations of your migrating virtual machines (VMs) are correctly translated and applied in the target environment.',
+        )}
+        userSettings={userSettings}
+        customNoResultsFound={<NetworkMapsEmptyState namespace={namespace} />}
+        page={1}
+      />
+    </TipsAndTricksDrawer>
   );
 };
 

src/modules/StorageMaps/views/details/StorageMapDetailsPage.tsx

@@ -1,4 +1,5 @@
 import { type FC, memo } from 'react';
+import TipsAndTricksDrawer from 'src/onlineHelp/tipsAndTricksDrawer/TipsAndTricksDrawer';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { HorizontalNav, type K8sModel } from '@openshift-console/dynamic-plugin-sdk';
@@ -38,7 +39,11 @@ const StorageMapDetailsPageInternal: FC<{
 const StorageMapDetailsPageInternalMemo = memo(StorageMapDetailsPageInternal);
 
 const StorageMapDetailsPage: FC<StorageMapDetailsPageProps> = ({ name, namespace }) => {
-  return <StorageMapDetailsPageInternalMemo name={name} namespace={namespace} />;
+  return (
+    <TipsAndTricksDrawer>
+      <StorageMapDetailsPageInternalMemo name={name} namespace={namespace} />
+    </TipsAndTricksDrawer>
+  );
 };
 StorageMapDetailsPage.displayName = 'StorageMapDetailsPage';
 

src/modules/StorageMaps/views/list/StorageMapsListPage.tsx

@@ -3,6 +3,7 @@ import { enumToTuple } from 'src/components/common/FilterGroup/helpers';
 import { loadUserSettings } from 'src/components/common/Page/userSettings';
 import StandardPage from 'src/components/page/StandardPage';
 import useGetDeleteAndEditAccessReview from 'src/modules/Providers/hooks/useGetDeleteAndEditAccessReview';
+import TipsAndTricksDrawer from 'src/onlineHelp/tipsAndTricksDrawer/TipsAndTricksDrawer';
 import StorageMapsEmptyState from 'src/storageMaps/components/StorageMapsEmptyState';
 
 import {
@@ -127,23 +128,25 @@ const StorageMapsListPage: FC<{
   }));
 
   return (
-    <StandardPage<StorageMapData>
-      data-testid="network-maps-list"
-      {...(permissions.canCreate && {
-        addButton: <StorageMapsAddButton namespace={namespace} testId="add-storage-map-button" />,
-      })}
-      dataSource={[data || [], StorageMapsLoaded, StorageMapsLoadError]}
-      RowMapper={StorageMapRow}
-      fieldsMetadata={fieldsMetadata}
-      namespace={namespace}
-      title={t('Storage maps')}
-      titleHelpContent={t(
-        'Storage maps define how the storage of source VMs will be provisioned on the target cluster by linking source storage entities to target storage classes.',
-      )}
-      userSettings={userSettings}
-      customNoResultsFound={<StorageMapsEmptyState namespace={namespace} />}
-      page={1}
-    />
+    <TipsAndTricksDrawer>
+      <StandardPage<StorageMapData>
+        data-testid="network-maps-list"
+        {...(permissions.canCreate && {
+          addButton: <StorageMapsAddButton namespace={namespace} testId="add-storage-map-button" />,
+        })}
+        dataSource={[data || [], StorageMapsLoaded, StorageMapsLoadError]}
+        RowMapper={StorageMapRow}
+        fieldsMetadata={fieldsMetadata}
+        namespace={namespace}
+        title={t('Storage maps')}
+        titleHelpContent={t(
+          'Storage maps define how the storage of source VMs will be provisioned on the target cluster by linking source storage entities to target storage classes.',
+        )}
+        userSettings={userSettings}
+        customNoResultsFound={<StorageMapsEmptyState namespace={namespace} />}
+        page={1}
+      />
+    </TipsAndTricksDrawer>
   );
 };
 

src/networkMaps/create/NetworkMapCreatePage.tsx

@@ -1,4 +1,5 @@
 import type { FC } from 'react';
+import TipsAndTricksDrawer from 'src/onlineHelp/tipsAndTricksDrawer/TipsAndTricksDrawer';
 
 import { PageSection, PageSectionTypes, Title } from '@patternfly/react-core';
 import { useForkliftTranslation } from '@utils/i18n';
@@ -9,7 +10,7 @@ const NetworkMapCreatePage: FC = () => {
   const { t } = useForkliftTranslation();
 
   return (
-    <>
+    <TipsAndTricksDrawer>
       <PageSection hasBodyWrapper={false}>
         <Title headingLevel="h2">{t('Create network map')}</Title>
       </PageSection>
@@ -22,7 +23,7 @@ const NetworkMapCreatePage: FC = () => {
       >
         <CreateNetworkMapForm />
       </PageSection>
-    </>
+    </TipsAndTricksDrawer>
   );
 };
 

src/onlineHelp/forkliftHelp/ForkliftLearningExperience.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable @cspell/spellchecker */
-import { type FC, useState } from 'react';
+import type { FC } from 'react';
 import HelpTopic from 'src/onlineHelp/learningExperience/HelpTopic';
 import LearningExperienceSelect from 'src/onlineHelp/learningExperience/LearningExperienceSelect';
 import LearningTopicsCards from 'src/onlineHelp/learningExperience/LearningTopicsCards';
@@ -13,20 +12,24 @@ import {
   DrawerPanelContent,
   Title,
 } from '@patternfly/react-core';
-import { useForkliftTranslation } from '@utils/i18n';
+import { TIPS_AND_TRICKS_LABEL } from '@utils/constants';
 
 import '@patternfly/quickstarts/dist/quickstarts.css';
 import './LearningExperiencePanel.scss';
 
 type LearningExperiencePanelProps = {
   topics: LearningExperienceTopic[];
   setIsDrawerOpen: (isOpen: boolean) => void;
+  selectedTopic: LearningExperienceTopic | undefined;
+  setSelectedTopic: (selectedTopic?: LearningExperienceTopic) => void;
 };
 
-const LearningExperiencePanel: FC<LearningExperiencePanelProps> = ({ setIsDrawerOpen, topics }) => {
-  const { t } = useForkliftTranslation();
-  const [selectedTopic, setSelectedTopic] = useState<LearningExperienceTopic | undefined>();
-
+const LearningExperiencePanel: FC<LearningExperiencePanelProps> = ({
+  selectedTopic,
+  setIsDrawerOpen,
+  setSelectedTopic,
+  topics,
+}) => {
   return (
     <DrawerPanelContent isResizable className="pfext-quick-start__base forklift--learning">
       <div className="pfext-quick-start-panel-content__header pfext-quick-start-panel-content__header--blue-white forklift--learning__header">
@@ -38,7 +41,7 @@ const LearningExperiencePanel: FC<LearningExperiencePanelProps> = ({ setIsDrawer
               className="pfext-quick-start-panel-content__name"
               style={{ marginRight: 'var(--pf-t--global--spacer--md)' }}
             >
-              {t('Tips and tricks')}
+              {TIPS_AND_TRICKS_LABEL}
             </Title>
           </div>
           <DrawerActions>

src/onlineHelp/forkliftHelp/topics/const.ts

@@ -0,0 +1,55 @@
+import { type FC, type PropsWithChildren, useContext, useState } from 'react';
+
+import { Drawer, DrawerContent } from '@patternfly/react-core';
+
+import type { LearningExperienceTopic } from '../learningExperience/types';
+
+import ForkliftLearningExperience from './components/ForkliftLearningExperience';
+import TipsAndTricksHeader from './components/TipsAndTricksHeader';
+import { createLearningExperienceContext } from './hooks/learningExperienceContext';
+import {
+  loadLearningExperienceContext,
+  saveLearningExperienceContext,
+} from './utils/forkliftLearningExperienceUserSettings';
+import { indexToTopic, topicToIndex } from './utils/topicToIndexConvertors';
+
+const TipsAndTricksDrawer1: FC<PropsWithChildren> = ({ children }) => {
+  const { setUserData, userData: { showLearningPanelByContext } = {} } = useContext(
+    createLearningExperienceContext,
+  );
+
+  const [panelSelectedTopic, setPanelSelectedTopic] = useState<LearningExperienceTopic | undefined>(
+    indexToTopic(loadLearningExperienceContext()?.learningExperienceContext),
+  );
+
+  const setIsDrawerOpen = (isOpen: boolean) => {
+    setUserData({ showLearningPanelByContext: isOpen });
+  };
+
+  const setSelectedTopic = (topic?: LearningExperienceTopic) => {
+    saveLearningExperienceContext(topicToIndex(topic));
+    setPanelSelectedTopic(topic);
+  };
+
+  return (
+    <Drawer isInline isExpanded={showLearningPanelByContext} position="right">
+      <DrawerContent
+        panelContent={
+          <ForkliftLearningExperience
+            setIsDrawerOpen={setIsDrawerOpen}
+            setSelectedTopic={setSelectedTopic}
+            selectedTopic={panelSelectedTopic}
+          />
+        }
+      >
+        <TipsAndTricksHeader
+          isDrawerOpen={showLearningPanelByContext}
+          setIsDrawerOpen={setIsDrawerOpen}
+        />
+        {children}
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export default TipsAndTricksDrawer1;