Enable graph tests in OSSMC (#389)

* Enable graph tests in OSSMC

* Load the patternfly icons

* Align cypress config with Kiali repo

* Fix small issue with navigation

plugin/cypress.config.ts

@@ -13,10 +13,6 @@ export default defineConfig({
   requestTimeout: 15000,
   responseTimeout: 15000,
   fixturesFolder: 'cypress/fixtures',
-  chromeWebSecurity: true, // needs to disabled for cross origin requests
-  screenshotsFolder: 'cypress/screenshots',
-  videosFolder: 'cypress/videos',
-
   env: {
     'cypress-react-selector': {
       root: '#root'

plugin/cypress/support/commands.ts

@@ -165,10 +165,10 @@ Cypress.Commands.overwrite('visit', (originalFn, visitUrl) => {
       visitUrl.url = `/k8s/ns/${namespace}${istioUrl}/ossmconsole${webParams}`;
     }
   } else {
-    if (targetPage === 'graph') {
+    if (targetPage === 'graphpf') {
       visitUrl.url = visitUrl.url
-        .replace('/console/graph/namespaces', '/ossmconsole/graph')
-        .replace('/console/graph/node/namespaces', '/ossmconsole/graph/ns');
+        .replace('/console/graphpf/namespaces', '/ossmconsole/graph')
+        .replace('/console/graphpf/node/namespaces', '/ossmconsole/graph/ns');
     } else if (targetPage === 'istio') {
       visitUrl.url = '/k8s/all-namespaces/istio';
     } else {

plugin/src/openshift/components/KialiContainer.tsx

@@ -8,6 +8,10 @@ import { globalStyle as ossmcStyle } from '../styles/GlobalStyle';
 import kialiCSSVariables from 'styles/variables.module.scss';
 import ossmcCSSVariables from '../styles/variables.module.scss';
 
+// Load the pf-icons
+import '@patternfly/patternfly/patternfly-base.css';
+
+// Load the tooltip style
 import 'tippy.js/dist/tippy.css';
 import 'tippy.js/dist/themes/light-border.css';
 

plugin/src/openshift/pages/GraphPage.tsx

@@ -7,17 +7,15 @@ import { KialiContainer } from 'openshift/components/KialiContainer';
 import { paddingContainer } from 'openshift/styles/GlobalStyle';
 
 const GraphPageOSSMC: React.FC<void> = () => {
-  useInitKialiListeners();
+  const { pathname } = useLocation();
+  const { aggregate, aggregateValue, app, namespace, service, version, workload } = useParams<GraphURLPathProps>();
 
   const [pluginConfig, setPluginConfig] = React.useState({
     graph: {
       impl: 'pf'
     }
   });
 
-  const { pathname } = useLocation();
-  const { aggregate, aggregateValue, app, namespace, service, version, workload } = useParams<GraphURLPathProps>();
-
   React.useEffect(() => {
     getPluginConfig()
       .then(config => setPluginConfig(config))
@@ -26,6 +24,8 @@ const GraphPageOSSMC: React.FC<void> = () => {
 
   setRouterBasename(pathname);
 
+  useInitKialiListeners();
+
   return (
     <KialiContainer>
       <div className={paddingContainer}>

plugin/src/openshift/pages/MeshPage.tsx

@@ -6,12 +6,12 @@ import { MeshPage } from 'pages/Mesh/MeshPage';
 import { paddingContainer } from 'openshift/styles/GlobalStyle';
 
 const MeshPageOSSMC: React.FC<void> = () => {
-  useInitKialiListeners();
-
   const { pathname } = useLocation();
 
   setRouterBasename(pathname);
 
+  useInitKialiListeners();
+
   return (
     <KialiContainer>
       <div className={paddingContainer}>

plugin/src/openshift/pages/MeshTab/IstioMesh.tsx

@@ -9,14 +9,14 @@ import { ErrorPage } from 'openshift/components/ErrorPage';
 import { useKialiTranslation } from 'utils/I18nUtils';
 
 const IstioConfigMeshTab: React.FC<void> = () => {
-  useInitKialiListeners();
-
   const { t } = useKialiTranslation();
   const { pathname } = useLocation();
   const { name, ns, plural } = useParams<ResourceURLPathProps>();
 
   setRouterBasename(pathname);
 
+  useInitKialiListeners();
+
   const errorPage = (
     <ErrorPage title={t('Istio detail error')} message={t('Istio object is not defined correctly')}></ErrorPage>
   );

plugin/src/openshift/pages/MeshTab/ProjectMesh.tsx

@@ -10,17 +10,15 @@ import { ResourceURLPathProps } from 'openshift/utils/IstioResources';
 import { paddingContainer } from 'openshift/styles/GlobalStyle';
 
 const ProjectMeshTab: React.FC<void> = () => {
-  useInitKialiListeners();
+  const { pathname } = useLocation();
+  const { name: namespace } = useParams<ResourceURLPathProps>();
 
   const [pluginConfig, setPluginConfig] = React.useState({
     graph: {
       impl: 'pf'
     }
   });
 
-  const { pathname } = useLocation();
-  const { name: namespace } = useParams<ResourceURLPathProps>();
-
   React.useEffect(() => {
     getPluginConfig()
       .then(config => setPluginConfig(config))
@@ -29,6 +27,8 @@ const ProjectMeshTab: React.FC<void> = () => {
 
   setRouterBasename(pathname);
 
+  useInitKialiListeners();
+
   // Set namespace of the project as active namespace in redux store
   store.dispatch({ type: ActionKeys.SET_ACTIVE_NAMESPACES, payload: [{ name: namespace! }] });
 

plugin/src/openshift/pages/MeshTab/ServiceMesh.tsx

@@ -10,14 +10,14 @@ import { useKialiTranslation } from 'utils/I18nUtils';
 import { ErrorPage } from 'openshift/components/ErrorPage';
 
 const ServiceMeshTab: React.FC<void> = () => {
-  useInitKialiListeners();
-
   const { t } = useKialiTranslation();
   const { pathname } = useLocation();
   const { ns, name } = useParams<ResourceURLPathProps>();
 
   setRouterBasename(pathname);
 
+  useInitKialiListeners();
+
   const errorPage = (
     <ErrorPage title={t('Service detail error')} message={t('Service is not defined correctly')}></ErrorPage>
   );

plugin/src/openshift/pages/MeshTab/WorkloadMesh.tsx

@@ -10,14 +10,14 @@ import { ErrorPage } from 'openshift/components/ErrorPage';
 import { useKialiTranslation } from 'utils/I18nUtils';
 
 const WorkloadMeshTab: React.FC<void> = () => {
-  useInitKialiListeners();
-
   const { t } = useKialiTranslation();
   const { pathname } = useLocation();
   const { ns, name, plural } = useParams<ResourceURLPathProps>();
 
   setRouterBasename(pathname);
 
+  useInitKialiListeners();
+
   const errorPage = (
     <ErrorPage title={t('Workload detail error')} message={t('Workload is not defined correctly')}></ErrorPage>
   );

plugin/src/openshift/pages/OverviewPage.tsx

@@ -5,12 +5,12 @@ import { setRouterBasename, useInitKialiListeners } from '../utils/KialiIntegrat
 import { KialiContainer } from 'openshift/components/KialiContainer';
 
 const OverviewPageOSSMC: React.FC<void> = () => {
-  useInitKialiListeners();
-
   const { pathname } = useLocation();
 
   setRouterBasename(pathname);
 
+  useInitKialiListeners();
+
   return (
     <KialiContainer>
       <OverviewPage></OverviewPage>

plugin/src/openshift/utils/KialiIntegration.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { consoleFetchJSON } from '@openshift-console/dynamic-plugin-sdk';
-import { NavigateFunction, useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { refForKialiIstio } from './IstioResources';
 import { setRouter } from 'app/History';
 
@@ -37,25 +37,13 @@ export const setRouterBasename = (pathname: string): void => {
   setRouter([{ element: <></> }], basename);
 };
 
-// Navigates to the proper OpenShift Console page
-// If the Kiali event comes from an OSSMC page, add the new entry to the history.
-// Otherwise, last history entry is invalid and has to be replaced with the new one.
-const navigateToConsoleUrl = (pathname: string, navigate: NavigateFunction, url: string): void => {
-  if (pathname.startsWith(`/${OSSM_CONSOLE}`)) {
-    navigate(url);
-  } else {
-    navigate(url, { replace: true });
-  }
-};
-
 // Global scope variable to hold the kiali listener
 let kialiListener: (Event: MessageEvent) => void;
 
 // This listener is responsible to receive the Kiali event that is sent inside the React page to the plugin
 // When users "clicks" a link in Kiali, there is no navigation in the Kiali side; and event it's send to the parent
 // And the "plugin" is responsible to "navigate" to the proper page in the OpenShift Console with the proper context.
 export const useInitKialiListeners = (): void => {
-  const { pathname } = useLocation();
   const navigate = useNavigate();
 
   if (!kialiListener) {
@@ -139,7 +127,7 @@ export const useInitKialiListeners = (): void => {
       }
 
       if (consoleUrl) {
-        setTimeout(() => navigateToConsoleUrl(pathname, navigate, consoleUrl), 0);
+        setTimeout(() => navigate(consoleUrl), 0);
       }
     };