feat(quickstarts/tour): add Cryostat guided tour and various QuickStarts

README.md

@@ -90,3 +90,37 @@ The extraction tool is [`i18next-parser`](https://www.npmjs.com/package/i18next-
 ).
 
 To workaround this, specify static values in `i18n.ts` file under any top-level directory below `src/app`. For example, `src/app/Settings/i18n.ts`.
+
+## ADDING QUICKSTARTS
+
+To add a new quickstart, create a new tsx/ts file under `src/app/QuickStarts` with your Quick Start name, like `my-quickstart.tsx`. 
+
+### Highlighting elements
+
+You can highlight an element on the page from within a quick start. The element that should be highlightable needs a data-quickstart-id attribute. Example:
+```
+<button data-quickstart-id="special-btn">Click me</button>
+```
+
+In the quick start task description, you can add this type of markdown to target this element:
+```
+Highlight [special button]{{highlight special-btn}}
+```
+
+### Copyable text
+
+You can have inline or block copyable text.
+
+#### Inline copyable text example
+```
+`echo "Donec id est ante"`{{copy}}
+```
+
+#### Multiline copyable text example
+```
+    ```
+      First line of text.
+      Second line of text.
+    ```{{copy}}
+```
+

locales/en/public.json

@@ -17,6 +17,15 @@
     "CARD_DESCRIPTION_FULL": "This is a do-nothing placeholder with all the config.",
     "CARD_TITLE": "All Placeholder"
   },
+  "AppLayout": {
+    "APP_LAUNCHER": {
+      "ABOUT": "About",
+      "DOCUMENTATION": "Documentation",
+      "GUIDED_TOUR": "Guided tour",
+      "HELP": "Help",
+      "QUICKSTARTS": "Quick Starts"
+    }
+  },
   "AutomatedAnalysisCard": {
     "CARD_DESCRIPTION": "Assess common application performance and configuration issues",
     "CARD_DESCRIPTION_FULL": "Creates a recording and periodically evaluates various common problems in application configuration and performance. Results are displayed with scores from 0-100 with colour coding and in groups. This card should be unique on a dashboard.",

package.json

@@ -110,6 +110,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^12.1.5",
+    "react-joyride": "^2.5.3",
     "react-redux": "^8.0.5",
     "react-router-last-location": "^2.0.1",
     "showdown": "^2.1.0"

src/app/About/AboutCryostatModal.tsx

@@ -38,6 +38,7 @@
 import bkgImg from '@app/assets/about_background.png';
 import cryostatLogo from '@app/assets/cryostat_icon_rgb_reverse.svg';
 import build from '@app/build.json';
+import { portalRoot } from '@app/utils/utils';
 import { AboutModal } from '@patternfly/react-core';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -46,18 +47,17 @@ import { AboutDescription } from './AboutDescription';
 export const AboutCryostatModal = ({ isOpen, onClose }) => {
   const { t } = useTranslation();
   return (
-    <>
-      <AboutModal
-        productName={build.productName}
-        brandImageSrc={cryostatLogo}
-        brandImageAlt="Cryostat Logo"
-        isOpen={isOpen}
-        onClose={onClose}
-        trademark={t('CRYOSTAT_TRADEMARK', { ns: 'common' })}
-        backgroundImageSrc={bkgImg}
-      >
-        <AboutDescription />
-      </AboutModal>
-    </>
+    <AboutModal
+      appendTo={portalRoot}
+      productName={build.productName}
+      brandImageSrc={cryostatLogo}
+      brandImageAlt="Cryostat Logo"
+      isOpen={isOpen}
+      onClose={onClose}
+      trademark={t('CRYOSTAT_TRADEMARK', { ns: 'common' })}
+      backgroundImageSrc={bkgImg}
+    >
+      <AboutDescription />
+    </AboutModal>
   );
 };