feat(joyride): show guided tour upon cryostat upgrades (#971)

* chore(comp): remove unused hint banner

* feat(joyride): check asset version

* chore(version): display cryostat version

src/app/About/AboutCryostatModal.tsx

@@ -49,7 +49,7 @@ export const AboutCryostatModal = ({ isOpen, onClose }) => {
   return (
     <AboutModal
       appendTo={portalRoot}
-      productName={build.productName}
+      productName={`${build.productName} ${build.version}`}
       brandImageSrc={cryostatLogo}
       brandImageAlt="Cryostat Logo"
       isOpen={isOpen}

src/app/AppLayout/AppLayout.tsx

@@ -48,9 +48,10 @@ import { SessionState } from '@app/Shared/Services/Login.service';
 import { NotificationCategory } from '@app/Shared/Services/NotificationChannel.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { FeatureLevel } from '@app/Shared/Services/Settings.service';
+import { saveToLocalStorage } from '@app/utils/LocalStorage';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
 import { useTheme } from '@app/utils/useTheme';
-import { cleanDataId, openTabForUrl, portalRoot } from '@app/utils/utils';
+import { cleanDataId, isAssetNew, openTabForUrl, portalRoot } from '@app/utils/utils';
 import {
   Alert,
   AlertActionCloseButton,
@@ -586,6 +587,13 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
     [handleCloseNotificationCenter]
   );
 
+  React.useEffect(() => {
+    if (showUserIcon && isAssetNew(build.version)) {
+      handleOpenGuidedTour();
+      saveToLocalStorage('ASSET_VERSION', build.version);
+    }
+  }, [handleOpenGuidedTour, showUserIcon]);
+
   return (
     <GlobalQuickStartDrawer>
       <CryostatJoyride>

src/app/Joyride/CryostatJoyride.tsx

@@ -85,7 +85,7 @@ const CryostatJoyride: React.FC<CryostatJoyrideProps> = (props) => {
                 width={300}
               />
               <h1>
-                Welcome to <strong>Cryostat</strong>!
+                Welcome to <strong>Cryostat {build.version}</strong>!
               </h1>
             </div>
           ),

src/app/Topology/Topology.tsx

@@ -38,22 +38,18 @@
 
 import { BreadcrumbPage } from '@app/BreadcrumbPage/BreadcrumbPage';
 import { ErrorView } from '@app/ErrorView/ErrorView';
-import { FeatureFlag } from '@app/Shared/FeatureFlag/FeatureFlag';
 import { LinearDotSpinner } from '@app/Shared/LinearDotSpinner';
 import { ViewMode } from '@app/Shared/Redux/Configurations/TopologyConfigSlice';
 import { RootState } from '@app/Shared/Redux/ReduxStore';
 import { NotificationCategory } from '@app/Shared/Services/NotificationChannel.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
-import { FeatureLevel } from '@app/Shared/Services/Settings.service';
-import { getFromLocalStorage, saveToLocalStorage } from '@app/utils/LocalStorage';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
 import { Bullseye, Card, CardBody } from '@patternfly/react-core';
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { Link, withRouter } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 import { TopologyGraphView } from './GraphView/TopologyGraphView';
 import { TopologyListView } from './ListView/TopologyListView';
-import { HintBanner } from './Shared/HintBanner';
 import { DiscoveryTreeContext, SearchExprService, SearchExprServiceContext } from './Shared/utils';
 import { DEFAULT_EMPTY_UNIVERSE } from './typings';
 
@@ -75,19 +71,13 @@ export const Topology: React.FC<TopologyProps> = ({ ..._props }) => {
 
   const [discoveryTree, setDiscoveryTree] = React.useState(DEFAULT_EMPTY_UNIVERSE);
 
-  const [shouldShowBanner, setShouldShowBanner] = React.useState(getFromLocalStorage('TOPOLOGY_SHOW_BANNER', true));
   const isGraphView = useSelector((state: RootState) => {
     const _currentMode: ViewMode = state.topologyConfigs.viewMode;
     return _currentMode === 'graph';
   });
 
   const [error, setError] = React.useState<Error>();
 
-  const closeBanner = React.useCallback(() => {
-    setShouldShowBanner(false);
-    saveToLocalStorage('TOPOLOGY_SHOW_BANNER', false);
-  }, [setShouldShowBanner]);
-
   const _refreshDiscoveryTree = React.useCallback(
     (onSuccess?: () => void) => {
       addSubscription(
@@ -178,11 +168,6 @@ export const Topology: React.FC<TopologyProps> = ({ ..._props }) => {
 
   return (
     <>
-      <FeatureFlag level={FeatureLevel.BETA}>
-        <HintBanner onClose={closeBanner} show={shouldShowBanner}>
-          For topology guides, see <Link to={'/quickstarts'}>Quickstarts</Link>.
-        </HintBanner>
-      </FeatureFlag>
       <BreadcrumbPage pageTitle={'Topology'} {..._props}>
         <Card isFullHeight id="topology-card">
           <CardBody style={{ padding: 0 }}>

src/app/Topology/styles/base.css

@@ -250,31 +250,6 @@ Below CSS rules only apply to Topology components
   font-weight: 700;
 }
 
-.topology__hint-banner {
-  position: relative;
-  box-sizing: border-box;
-  text-align: center;
-  padding: 0.2em 0 0.2em 0;
-  background-color: var(--pf-global--palette--blue-400);
-  color: var(--pf-global--palette--white);
-  font-size: 0.9em;
-  margin-bottom: -1em;
-}
-
-.topology__hint-banner a {
-  color: var(--pf-global--palette--white);
-  text-decoration: solid underline var(--pf-global--palette--white) 1px;
-}
-
-.topology__hint-banner .close-icon {
-  position: relative;
-  float: right;
-  font-size: 1em;
-  margin-right: 1em;
-  transform: translateY(calc(50% - 0.25em));
-  cursor: pointer;
-}
-
 #topology__visualization-container.topology__main-container  {
   padding: 1em;
 }

src/app/build.json

@@ -11,5 +11,6 @@
   "fileIssueUrl": "https://github.com/cryostatio/cryostat/issues/new?labels=user+report,bug&body=Affects+__REPLACE_VERSION__",
   "mailingListName": "Google Groups",
   "mailingListUrl": "https://groups.google.com/g/cryostat-development",
-  "licenseUrl": "https://github.com/cryostatio/cryostat/blob/main/LICENSE"
+  "licenseUrl": "https://github.com/cryostatio/cryostat/blob/main/LICENSE",
+  "version": "2.4.0-dev"
 }

src/app/utils/LocalStorage.ts

@@ -37,14 +37,14 @@
  */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export enum LocalStorageKey {
+  ASSET_VERSION,
   FEATURE_LEVEL,
   DASHBOARD_CFG,
   AUTOMATED_ANALYSIS_FILTERS,
   TARGET_RECORDING_FILTERS,
   CREDENTIAL_LOCATION,
   TARGET,
   TARGET_FAVORITES,
-  TOPOLOGY_SHOW_BANNER,
   TOPOLOGY_GRAPH_POSITONS,
   TOPOLOGY_NODE_POSITIONS,
   TOPOLOGY_CONFIG,

src/app/utils/utils.ts

@@ -40,6 +40,7 @@ import { ISortBy, SortByDirection } from '@patternfly/react-table';
 import _ from 'lodash';
 import { useHistory } from 'react-router-dom';
 import { BehaviorSubject, Observable } from 'rxjs';
+import { getFromLocalStorage } from './LocalStorage';
 
 const SECOND_MILLIS = 1000;
 const MINUTE_MILLIS = 60 * SECOND_MILLIS;
@@ -266,3 +267,45 @@ export const getActiveTab = <T>(search: string, key: string, supportedTabs: T[],
 };
 
 export const clickOutside = () => document.body.click();
+
+export interface SemVer {
+  major: number;
+  minor: number;
+  patch: number;
+}
+
+// https://semver.org/#is-there-a-suggested-regular-expression-regex-to-check-a-semver-string
+export const semverRegex =
+  /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/;
+
+export const getSemVer = (str: string): SemVer | undefined => {
+  const matched = str.match(semverRegex);
+  if (matched) {
+    const [_, major, minor, patch] = matched;
+    return {
+      major: Number(major),
+      minor: Number(minor),
+      patch: Number(patch),
+    };
+  }
+  return undefined;
+};
+
+const convert = (ver: SemVer) => ver.major * 100 + ver.minor * 10 + ver.patch;
+
+export const compareSemVer = (ver1: SemVer, ver2: SemVer): number => {
+  const _ver1 = convert(ver1);
+  const _ver2 = convert(ver2);
+  return _ver1 > _ver2 ? 1 : _ver1 < _ver2 ? -1 : 0;
+};
+
+export const isAssetNew = (currVerStr: string) => {
+  const oldVer = getSemVer(getFromLocalStorage('ASSET_VERSION', '0.0.0'));
+  const currVer = getSemVer(currVerStr);
+
+  if (!currVer) {
+    throw new Error(`Invalid asset version: ${currVer}`);
+  }
+  // Invalid (old) version is ignored.
+  return !oldVer || compareSemVer(currVer, oldVer) > 0;
+};