various fixes

Signed-off-by: Max Cao <[email protected]>

src/app/AppLayout/AppLayout.tsx

@@ -232,10 +232,6 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
 
   const dismissSslErrorModal = React.useCallback(() => setShowSslErrorModal(false), [setShowSslErrorModal]);
 
-  const onNavToggleMobile = React.useCallback(() => {
-    setIsNavOpen((isNavOpenMobile) => !isNavOpenMobile);
-  }, [setIsNavOpen]);
-
   const onNavToggle = React.useCallback(() => {
     setIsNavOpen((isNavOpen) => {
       if (joyState.run === true && joyState.stepIndex === 1 && !isNavOpen) {
@@ -250,9 +246,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
     (props: { mobileView: boolean; windowSize: number }) => {
       if (joyState.run === false) {
         setIsMobileView(props.mobileView);
-        if (props.mobileView) {
-          setIsNavOpen(false);
-        }
+        setIsNavOpen(!props.mobileView);
       }
     },
     [joyState, setIsMobileView, setIsNavOpen]

src/app/BreadcrumbPage/BreadcrumbPage.tsx

@@ -39,7 +39,6 @@ import {
   Breadcrumb,
   BreadcrumbHeading,
   BreadcrumbItem,
-  PageBreadcrumb,
   PageGroup,
   PageSection,
   Stack,
@@ -62,7 +61,7 @@ export interface BreadcrumbTrail {
 export const BreadcrumbPage: React.FC<BreadcrumbPageProps> = (props) => {
   return (
     <PageGroup>
-      <PageBreadcrumb>
+      <PageSection>
         <Breadcrumb>
           {(props.breadcrumbs || []).map(({ title, path }) => (
             <BreadcrumbItem key={path}>
@@ -71,8 +70,6 @@ export const BreadcrumbPage: React.FC<BreadcrumbPageProps> = (props) => {
           ))}
           <BreadcrumbHeading>{props.pageTitle}</BreadcrumbHeading>
         </Breadcrumb>
-      </PageBreadcrumb>
-      <PageSection>
         <Stack hasGutter={true}>
           {React.Children.map(props.children, (child) => (
             <StackItem isFilled={isItemFilled(child)}>{child}</StackItem>

src/app/Joyride/JoyrideTooltip.tsx

@@ -118,7 +118,7 @@ const JoyrideTooltip: React.FC<TooltipRenderProps> = ({
     >
       <Card>
         <CardTitle style={{ textAlign: 'center' }}>{title}</CardTitle>
-        <CardBody style={{ fontSize: '15px' }}>{content}</CardBody>
+        <CardBody style={{ fontSize: '1em' }}>{content}</CardBody>
         {index !== 1 && <CardFooter>{footer}</CardFooter>}
       </Card>
     </div>

src/app/QuickStarts/quickstarts/automated-rules-quickstart.tsx

@@ -53,7 +53,7 @@ const AutomatedRulesQuickStart: QuickStart = {
     durationMinutes: 10,
     icon: cryostatLogoIcon,
     description: `Learn about automated rules in [APP] and how to create one.`,
-    prerequisites: [''],
+    prerequisites: ['Start a Recording'],
     introduction: `
 # Automated Rules
 Automated Rules are configurations that instruct [APP] to create JDK Flight Recordings on matching target JVM applications. Each Automated Rule specifies parameters for which Event Template to use, how much data should be kept in the application recording buffer, and how frequently Cryostat should copy the application recording buffer into Cryostat’s own archived storage.

src/app/QuickStarts/quickstarts/start-a-recording.tsx

@@ -106,7 +106,7 @@ There are two tabs within the Recordings page:
 
 [Active Recordings]{{highlight active-recordings-tab}} and [Archived Recordings]{{highlight archived-recordings-tab}}.
 
-Active recordings are recordings that are currently running, and Archived recordings are recordings that have been stopped.
+Active recordings are recordings that only exist only within the target JVM. Archived recordings are recordings that have been saved from the target JVM and copied to Cryostat's storage volume.
 
 We will start a recording while on the Active tab.
 
@@ -129,7 +129,8 @@ After the creation of a recording, the recording will be displayed in the Active
         description: `
 Stopping a recording will cut off the recording at the time that the recording is stopped.
 
-1. Click the [Stop]{{highlight recordings-stop-btn}} button to stop the recording.`,
+1. Click the [checkbox]{{highlight active-recordings-checkbox}} ☐ next to the recording.
+2. Click the [Stop]{{highlight recordings-stop-btn}} button to stop the recording.`,
         review: {
           instructions: '#### Verify that the STATE field of the recording has changed to STOPPED.',
           failedTaskHelp: 'If you do not see the recording, try the **Start a recording** task again.',
@@ -166,7 +167,7 @@ Downloading a recording will save the recording to your local machine as a JFR f
       {
         title: 'Archive a recording',
         description: `
-Archiving a recording will save the recording to [APP]'s archival storage, and will persist even after [APP] is restarted. These recordings will show up in the target JVM's Archived Recordings tab, as well as in the [Archives]{{highlight nav-archives-tab}} view on the [APP] console navigation bar.
+Archiving a recording will save the recording to [APP]'s archival storage, and will persist even after either the target JVM, or [APP], has stopped. These recordings will show up in the target JVM's Archived Recordings tab, as well as in the [Archives]{{highlight nav-archives-tab}} view on the [APP] console navigation bar.
 
 1. Click the [Archive]{{highlight recordings-archive-btn}} button to archive the recording.
 2. Go to the [Archived Recordings]{{highlight archived-recordings-tab}} tab to see the archived recording in [APP]'s storage.

src/app/Recordings/ActiveRecordingsTable.tsx

@@ -898,6 +898,7 @@ export const ActiveRecordingRow: React.FC<ActiveRecordingRowProps> = ({
             onChange={handleCheck}
             isChecked={checkedIndices.includes(index)}
             id={`active-table-row-${index}-check`}
+            data-quickstart-id="active-recordings-checkbox"
           />
         </Td>
         <Td

src/app/app.css

@@ -37,7 +37,6 @@ SOFTWARE.
 */
 html, body, #root {
   height: 100%;
-  overflow: hidden;
 }
 
 :root {

src/test/Archives/__snapshots__/Archives.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`<Archives /> renders correctly 1`] = `
   className="pf-c-page__main-group"
 >
   <section
-    className="pf-c-page__main-breadcrumb"
+    className="pf-c-page__main-section"
   >
     <nav
       aria-label="Breadcrumb"
@@ -28,10 +28,6 @@ exports[`<Archives /> renders correctly 1`] = `
         </li>
       </ol>
     </nav>
-  </section>
-  <section
-    className="pf-c-page__main-section"
-  >
     <div
       className="pf-l-stack pf-m-gutter"
     >

src/test/Dashboard/__snapshots__/Dashboard.test.tsx.snap

@@ -12,7 +12,7 @@ Array [
     className="pf-c-page__main-group"
   >
     <section
-      className="pf-c-page__main-breadcrumb"
+      className="pf-c-page__main-section"
     >
       <nav
         aria-label="Breadcrumb"
@@ -35,10 +35,6 @@ Array [
           </li>
         </ol>
       </nav>
-    </section>
-    <section
-      className="pf-c-page__main-section"
-    >
       <div
         className="pf-l-stack pf-m-gutter"
       >

src/test/Rules/__snapshots__/Rules.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`<Rules /> renders correctly 1`] = `
   className="pf-c-page__main-group"
 >
   <section
-    className="pf-c-page__main-breadcrumb"
+    className="pf-c-page__main-section"
   >
     <nav
       aria-label="Breadcrumb"
@@ -28,10 +28,6 @@ exports[`<Rules /> renders correctly 1`] = `
         </li>
       </ol>
     </nav>
-  </section>
-  <section
-    className="pf-c-page__main-section"
-  >
     <div
       className="pf-l-stack pf-m-gutter"
     >

src/test/Settings/__snapshots__/Settings.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`<Settings/> renders correctly 1`] = `
   className="pf-c-page__main-group"
 >
   <section
-    className="pf-c-page__main-breadcrumb"
+    className="pf-c-page__main-section"
   >
     <nav
       aria-label="Breadcrumb"
@@ -28,10 +28,6 @@ exports[`<Settings/> renders correctly 1`] = `
         </li>
       </ol>
     </nav>
-  </section>
-  <section
-    className="pf-c-page__main-section"
-  >
     <div
       className="pf-l-stack pf-m-gutter"
     >