MTV-3719: Enhance MTV learning experience

Resolves: MTV-3719

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

Author: sgratch

knip.config.ts

@@ -4,9 +4,9 @@ export default {
   entry: [
     '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/onlineHelp/learningExperienceDrawer/context/ForkliftContext.ts',
+    'src/onlineHelp/learningExperienceDrawer/context/useForkliftContext.ts',
 
     'src/providers/create/ProvidersCreatePage.tsx',
     'src/providers/list/ProvidersListPage.tsx',

locales/en/plugin__forklift-console-plugin.json

@@ -2,6 +2,7 @@ import type { NavSection } from '@openshift-console/dynamic-plugin-sdk';
 import type { EncodedExtension } from '@openshift-console/dynamic-plugin-sdk-webpack';
 
 import { extensions as networkMapExtensions } from './src/networkMaps/dynamic-plugin';
+import { extensions as onlineHelpExtensions } from './src/onlineHelp/dynamic-plugin';
 import { extensions as overviewExtensions } from './src/overview/dynamic-plugin';
 import { extensions as planExtensions } from './src/plans/dynamic-plugin';
 import { extensions as providerExtensions } from './src/providers/dynamic-plugin';
@@ -36,7 +37,7 @@ const extensions: EncodedExtension[] = [
     },
     type: 'console.navigation/section',
   } as EncodedExtension<NavSection>,
-
+  ...onlineHelpExtensions,
   ...overviewExtensions,
   ...providerExtensions,
   ...planExtensions,

plugin-extensions.ts

@@ -1,6 +1,7 @@
 import type { ConsolePluginBuildMetadata } from '@openshift-console/dynamic-plugin-sdk-webpack';
 
 import { exposedModules as networkMapModules } from './src/networkMaps/dynamic-plugin';
+import { exposedModules as onlineHelpModules } from './src/onlineHelp/dynamic-plugin';
 import { exposedModules as overviewModules } from './src/overview/dynamic-plugin';
 import { exposedModules as planModules } from './src/plans/dynamic-plugin';
 import { exposedModules as providerModules } from './src/providers/dynamic-plugin';
@@ -15,6 +16,7 @@ const pluginMetadata: ConsolePluginBuildMetadata = {
     'Forklift is a suite of migration tools that facilitate the migration of VM workloads to KubeVirt.',
   displayName: 'OpenShift Console Plugin For Forklift',
   exposedModules: {
+    ...onlineHelpModules,
     ...overviewModules,
     ...providerModules,
     ...planModules,

plugin-metadata.ts

@@ -1,6 +1,6 @@
 import type { FC, ReactNode } from 'react';
 
-import { Button, ButtonVariant } from '@patternfly/react-core';
+import { Button, type ButtonProps, ButtonVariant } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 
 type ExternalLinkProps = {
@@ -10,20 +10,22 @@ type ExternalLinkProps = {
   isInline?: boolean;
   hideIcon?: boolean;
   onClick?: () => void;
+  iconPosition?: ButtonProps['iconPosition'];
 };
 
 export const ExternalLink: FC<ExternalLinkProps> = ({
   children,
   hideIcon = false,
   href,
+  iconPosition = 'end',
   isInline = false,
   onClick,
   text = null,
 }) => (
   <Button
     variant={ButtonVariant.link}
     icon={hideIcon ? undefined : <ExternalLinkAltIcon />}
-    iconPosition="right"
+    iconPosition={iconPosition}
     component="a"
     href={href}
     target="_blank"

src/components/common/ExternalLink/ExternalLink.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom-v5-compat';
 import {
   DeleteModal,
   type DeleteModalProps,
@@ -18,6 +19,7 @@ type NetworkMapActionsDropdownItemsProps = {
 export const NetworkMapActionsDropdownItems = ({ data }: NetworkMapActionsDropdownItemsProps) => {
   const { t } = useForkliftTranslation();
   const launcher = useModal();
+  const navigate = useNavigate();
 
   const { obj: networkMap } = data;
 
@@ -32,7 +34,13 @@ export const NetworkMapActionsDropdownItems = ({ data }: NetworkMapActionsDropdo
   };
 
   return [
-    <DropdownItem value={0} key="edit" to={networkMapURL}>
+    <DropdownItem
+      value={0}
+      key="edit"
+      onClick={() => {
+        navigate(networkMapURL);
+      }}
+    >
       {t('Edit network map')}
     </DropdownItem>,
 

src/networkMaps/actions/NetworkMapActionsDropdownItems.tsx

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

src/networkMaps/create/NetworkMapCreatePage.tsx

@@ -1,5 +1,5 @@
 import { type FC, memo } from 'react';
-import TipsAndTricksDrawer from 'src/onlineHelp/tipsAndTricksDrawer/TipsAndTricksDrawer';
+import LearningExperienceDrawer from 'src/onlineHelp/learningExperienceDrawer/LearningExperienceDrawer';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { HorizontalNav, type K8sModel } from '@openshift-console/dynamic-plugin-sdk';
@@ -35,10 +35,10 @@ const NetworkMapDetailsPage: FC<NetworkMapDetailsPageProps> = memo(({ name, name
   ];
 
   return (
-    <TipsAndTricksDrawer>
+    <LearningExperienceDrawer>
       <NetworkMapPageHeadings name={name} namespace={namespace} />
       <HorizontalNav pages={pages} />
-    </TipsAndTricksDrawer>
+    </LearningExperienceDrawer>
   );
 });
 

src/networkMaps/details/NetworkMapDetailsPage.tsx

@@ -4,7 +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 LearningExperienceDrawer from 'src/onlineHelp/learningExperienceDrawer/LearningExperienceDrawer';
 
 import {
   NetworkMapModel,
@@ -128,7 +128,7 @@ const NetworkMapsListPage: FC<{
   }));
 
   return (
-    <TipsAndTricksDrawer>
+    <LearningExperienceDrawer>
       <StandardPage<NetworkMapData>
         data-testid="network-maps-list"
         {...(permissions.canCreate && {
@@ -145,7 +145,7 @@ const NetworkMapsListPage: FC<{
         userSettings={userSettings}
         customNoResultsFound={<NetworkMapsEmptyState namespace={namespace} />}
       />
-    </TipsAndTricksDrawer>
+    </LearningExperienceDrawer>
   );
 };
 

src/networkMaps/list/NetworkMapsListPage.tsx

@@ -0,0 +1,21 @@
+import type { ContextProvider } from '@openshift-console/dynamic-plugin-sdk';
+import type {
+  ConsolePluginBuildMetadata,
+  EncodedExtension,
+} from '@openshift-console/dynamic-plugin-sdk-webpack';
+
+export const exposedModules: ConsolePluginBuildMetadata['exposedModules'] = {
+  ForkliftContext: './onlineHelp/learningExperienceDrawer/context/ForkliftContext',
+  useForkliftContext: './onlineHelp/learningExperienceDrawer/context/useForkliftContext',
+};
+export const extensions: EncodedExtension[] = [
+  {
+    properties: {
+      provider: { $codeRef: 'ForkliftContext.CreateForkliftContextProvider' },
+      useValueHook: {
+        $codeRef: 'useForkliftContext.useForkliftContext',
+      },
+    },
+    type: 'console.context-provider',
+  } as EncodedExtension<ContextProvider>,
+];