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

…rts (#910) * init commit * init commit 2 * joyride/quickstarts Signed-off-by: Max Cao <[email protected]> * highlighting elements from quickstart markdown extension Signed-off-by: Max Cao <[email protected]> * add some quickstarts, cleanup Signed-off-by: Max Cao <[email protected]> * complete some quick starts Signed-off-by: Max Cao <[email protected]> * create joyride tour Signed-off-by: Max Cao <[email protected]> * cleanup Signed-off-by: Max Cao <[email protected]> * add tour steps, fix quickstart Signed-off-by: Max Cao <[email protected]> * remove dashboard card, update snapshots Signed-off-by: Max Cao <[email protected]> * add dashboard-quickstart Signed-off-by: Max Cao <[email protected]> * fix up quickstart Signed-off-by: Max Cao <[email protected]> * fix tests Signed-off-by: Max Cao <[email protected]> * wording fixes Signed-off-by: Max Cao <[email protected]> * format Signed-off-by: Max Cao <[email protected]> * fixes from review comments Signed-off-by: Max Cao <[email protected]> * format, eslint Signed-off-by: Max Cao <[email protected]> * various fixes Signed-off-by: Max Cao <[email protected]> * fixup Signed-off-by: Max Cao <[email protected]> * use documentationUrl and blogUrl Signed-off-by: Max Cao <[email protected]> * remove mentions of upstream and add urls to build.json Signed-off-by: Max Cao <[email protected]> --------- Signed-off-by: Max Cao <[email protected]>
cryostatio · Apr 3, 2023 · d817ee2 · d817ee2
1 parent 09acca1
commit d817ee2
Show file tree

Hide file tree

Showing 62 changed files with 2,874 additions and 1,362 deletions.
diff --git a/README.md b/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}}
+```
+
diff --git a/locales/en/public.json b/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.",

diff --git a/package.json b/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"

diff --git a/src/app/About/AboutCryostatModal.tsx b/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>
   );
 };