@patternfly/chatbot 2.1.0 → 2.2.0-prerelease.10

package/src/Message/Message.tsx

@@ -6,16 +6,7 @@ import React from 'react';
 
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import {
-  Avatar,
-  AvatarProps,
-  Label,
-  LabelGroup,
-  LabelGroupProps,
-  LabelProps,
-  Timestamp,
-  Truncate
-} from '@patternfly/react-core';
+import { Avatar, AvatarProps, Label, LabelGroupProps, Timestamp, Truncate } from '@patternfly/react-core';
 import MessageLoading from './MessageLoading';
 import CodeBlockMessage from './CodeBlockMessage/CodeBlockMessage';
 import TextMessage from './TextMessage/TextMessage';
@@ -25,12 +16,10 @@ import SourcesCard, { SourcesCardProps } from '../SourcesCard';
 import ListItemMessage from './ListMessage/ListItemMessage';
 import UnorderedListMessage from './ListMessage/UnorderedListMessage';
 import OrderedListMessage from './ListMessage/OrderedListMessage';
+import QuickStartTile from './QuickStarts/QuickStartTile';
+import { QuickStart, QuickstartAction } from './QuickStarts/types';
+import QuickResponse from './QuickResponse/QuickResponse';
 
-export interface QuickResponse extends Omit<LabelProps, 'children'> {
-  content: string;
-  id: string;
-  onClick: () => void;
-}
 export interface MessageAttachment {
   /** Name of file attached to the message */
   name: string;
@@ -89,6 +78,19 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   hasRoundAvatar?: boolean;
   /** Any additional props applied to the avatar, for additional customization  */
   avatarProps?: Omit<AvatarProps, 'alt'>;
+  /** Props for QuickStart card */
+  quickStarts?: {
+    quickStart: QuickStart;
+    onSelectQuickStart: (id?: string) => void;
+    minuteWord?: string;
+    minuteWordPlural?: string;
+    prerequisiteWord?: string;
+    prerequisiteWordPlural?: string;
+    quickStartButtonAriaLabel?: string;
+    className?: string;
+    onClick?: () => void;
+    action?: QuickstartAction;
+  };
 }
 
 export const Message: React.FunctionComponent<MessageProps> = ({
@@ -108,6 +110,7 @@ export const Message: React.FunctionComponent<MessageProps> = ({
   attachments,
   hasRoundAvatar = true,
   avatarProps,
+  quickStarts,
   ...props
 }: MessageProps) => {
   let avatarClassName;
@@ -119,6 +122,7 @@ export const Message: React.FunctionComponent<MessageProps> = ({
   // Keep timestamps consistent between Timestamp component and aria-label
   const date = new Date();
   const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+
   return (
     <section
       aria-label={`Message from ${role} - ${dateString}`}
@@ -156,7 +160,7 @@ export const Message: React.FunctionComponent<MessageProps> = ({
                   p: TextMessage,
                   code: ({ children }) => <CodeBlockMessage {...codeBlockProps}>{children}</CodeBlockMessage>,
                   ul: UnorderedListMessage,
-                  ol: OrderedListMessage,
+                  ol: (props) => <OrderedListMessage {...props} />,
                   li: ListItemMessage
                 }}
                 remarkPlugins={[remarkGfm]}
@@ -165,18 +169,23 @@ export const Message: React.FunctionComponent<MessageProps> = ({
               </Markdown>
             )}
             {!isLoading && sources && <SourcesCard {...sources} />}
+            {quickStarts && quickStarts.quickStart && (
+              <QuickStartTile
+                quickStart={quickStarts.quickStart}
+                onSelectQuickStart={quickStarts.onSelectQuickStart}
+                minuteWord={quickStarts.minuteWord}
+                minuteWordPlural={quickStarts.minuteWordPlural}
+                prerequisiteWord={quickStarts.prerequisiteWord}
+                prerequisiteWordPlural={quickStarts.prerequisiteWordPlural}
+                quickStartButtonAriaLabel={quickStarts.quickStartButtonAriaLabel}
+              />
+            )}
             {!isLoading && actions && <ResponseActions actions={actions} />}
             {!isLoading && quickResponses && (
-              <LabelGroup
-                className={`pf-chatbot__message-quick-response ${quickResponseContainerProps?.className}`}
-                {...quickResponseContainerProps}
-              >
-                {quickResponses.map(({ id, onClick, content, ...props }: QuickResponse) => (
-                  <Label variant="outline" color="blue" key={id} onClick={onClick} {...props}>
-                    {content}
-                  </Label>
-                ))}
-              </LabelGroup>
+              <QuickResponse
+                quickResponses={quickResponses}
+                quickResponseContainerProps={quickResponseContainerProps}
+              />
             )}
           </div>
           {attachments && (

package/src/Message/QuickResponse/QuickResponse.scss

@@ -0,0 +1,33 @@
+.pf-chatbot__message-quick-response {
+  .pf-v6-c-label {
+    --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--md);
+
+    @media screen and (min-width: 401px) and (max-width: 600px) {
+      --pf-v6-c-label__text--MaxWidth: 20ch;
+    }
+
+    @media screen and (max-width: 400px) {
+      --pf-v6-c-label__text--MaxWidth: 15ch;
+    }
+  }
+
+  .pf-chatbot__message-quick-response--selected {
+    .pf-v6-c-label__content:is(:hover, :focus) {
+      --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
+      --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+    }
+  }
+
+  .pf-chatbot__message-quick-response--selected:hover,
+  .pf-chatbot__message-quick-response--selected:focus {
+    --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
+    --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+  }
+
+  // active state right before selection
+  .pf-v6-c-label.pf-m-blue.pf-m-clickable .pf-v6-c-label__content:is(:active) {
+    --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+    --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+    --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
+  }
+}

package/src/Message/QuickResponse/QuickResponse.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Label, LabelGroup, LabelGroupProps, LabelProps } from '@patternfly/react-core';
+import { CheckIcon } from '@patternfly/react-icons';
+
+export interface QuickResponse extends Omit<LabelProps, 'children'> {
+  content: string;
+  id: string;
+  onClick: () => void;
+}
+
+export interface QuickResponseProps {
+  /** Props for quick responses */
+  quickResponses: QuickResponse[];
+  /** Props for quick responses container */
+  quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+}
+
+export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
+  quickResponses,
+  quickResponseContainerProps = { numLabels: 5 }
+}: QuickResponseProps) => {
+  const [selectedQuickResponse, setSelectedQuickResponse] = React.useState<string>();
+
+  const handleQuickResponseClick = (id: string, onClick?: () => void) => {
+    setSelectedQuickResponse(id);
+    onClick && onClick();
+  };
+  return (
+    <LabelGroup
+      className={`pf-chatbot__message-quick-response ${quickResponseContainerProps?.className}`}
+      {...quickResponseContainerProps}
+    >
+      {quickResponses.map(({ id, onClick, content, className, ...props }: QuickResponse) => (
+        <Label
+          variant={id === selectedQuickResponse ? undefined : 'outline'}
+          icon={id === selectedQuickResponse ? <CheckIcon /> : undefined}
+          color="blue"
+          key={id}
+          onClick={() => handleQuickResponseClick(id, onClick)}
+          className={`${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}`}
+          {...props}
+        >
+          {content}
+        </Label>
+      ))}
+    </LabelGroup>
+  );
+};
+
+export default QuickResponse;

package/src/Message/QuickStarts/FallbackImg.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+interface FallbackImgProps {
+  /** Image source */
+  src: string;
+  /** Alt text for image */
+  alt?: string;
+  /** ClassName applied to image */
+  className?: string;
+  /** Fallback */
+  fallback?: React.ReactNode;
+}
+
+const FallbackImg: React.FC<FallbackImgProps> = ({ src, alt, className, fallback }) => {
+  const [isSrcValid, setIsSrcValid] = React.useState<boolean>(true);
+
+  if (src && isSrcValid) {
+    return <img className={className} src={src} alt={alt} onError={() => setIsSrcValid(false)} />;
+  }
+
+  return <>{fallback}</>;
+};
+
+export default FallbackImg;

package/src/Message/QuickStarts/QuickStartTile.scss

@@ -0,0 +1,25 @@
+.pf-chatbot__quickstarts-tile {
+  min-width: 360px;
+  max-width: 650px;
+  width: 100%;
+
+  @media screen and (max-width: 700px) {
+    max-width: 100%;
+    min-width: initial;
+  }
+  // some icons provided to catalog tiles might have no defined height/width. Without this style, in those cases
+  // the icons would have a height and width of 0.
+  .pf-v6-c-card__header-main {
+    .pf-v6-c-icon__content {
+      display: contents;
+    }
+  }
+}
+
+.pf-v6-theme-dark {
+  .pf-chatbot__quickstarts-tile {
+    .pfext-catalog-item-icon__img {
+      filter: brightness(1.5) invert(1) hue-rotate(180deg) saturate(4);
+    }
+  }
+}

package/src/Message/QuickStarts/QuickStartTile.tsx

@@ -0,0 +1,147 @@
+import * as React from 'react';
+import RocketIcon from '@patternfly/react-icons/dist/js/icons/rocket-icon';
+import OutlinedBookmarkIcon from '@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon';
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  Icon,
+  Button,
+  Flex,
+  Stack,
+  Label,
+  pluralize
+} from '@patternfly/react-core';
+import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-clock-icon';
+import QuickStartTileHeader from './QuickStartTileHeader';
+import QuickStartTileDescription from './QuickStartTileDescription';
+import { QuickStart, QuickstartAction } from './types';
+import FallbackImg from './FallbackImg';
+
+export const camelize = (str: string) =>
+  str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
+    if (+match === 0) {
+      return '';
+    } // or if (/\s+/.test(match)) for white spaces
+    return index === 0 ? match.toLowerCase() : match.toUpperCase();
+  });
+
+export interface QuickStartTileProps {
+  /** ClassName applied to the card */
+  className?: string;
+  /** The quickstart object triggered by this tile */
+  quickStart: QuickStart;
+  /** Event handler attached to the tile */
+  onClick?: () => void;
+  /** Action config for button rendered next to title */
+  action?: QuickstartAction;
+  /** Callback that returns active quick start value when clicked */
+  onSelectQuickStart: (id?: string) => void;
+  /** Label for the English word "minute". */
+  minuteWord?: string;
+  /** Label for the English word "minutes". */
+  minuteWordPlural?: string;
+  /** Label for the English word "Prerequisite" */
+  prerequisiteWord?: string;
+  /** Label for the English word "Prerequisites" */
+  prerequisiteWordPlural?: string;
+  /** Aria-label for the quick start description button */
+  quickStartButtonAriaLabel?: string;
+}
+
+const QuickStartTile: React.FC<QuickStartTileProps> = ({
+  className,
+  quickStart,
+  onClick,
+  onSelectQuickStart,
+  minuteWord = 'minute',
+  minuteWordPlural = 'minutes',
+  prerequisiteWord,
+  prerequisiteWordPlural,
+  quickStartButtonAriaLabel,
+  action
+}) => {
+  const {
+    metadata: { name: id },
+    spec: { icon, displayName, description, durationMinutes, prerequisites, link, type }
+  } = quickStart;
+
+  let quickStartIcon: React.ReactNode;
+  if (typeof icon === 'object') {
+    quickStartIcon = <Icon size="2xl">{icon}</Icon>;
+  } else {
+    quickStartIcon = (
+      <Icon size="2xl">
+        <FallbackImg src={icon as string} alt="" className="pfext-catalog-item-icon__img" fallback={<RocketIcon />} />
+      </Icon>
+    );
+  }
+
+  const onSelect = () => {
+    if (!link) {
+      onSelectQuickStart(id);
+    } else {
+      window.open(link.href, '_blank', 'noopener,noreferrer');
+    }
+    onClick && onClick();
+  };
+
+  const ActionIcon = action?.icon || OutlinedBookmarkIcon;
+  const additionalAction = action ? (
+    <Button
+      aria-label={action['aria-label']}
+      icon={<ActionIcon />}
+      variant="plain"
+      onClick={action.onClick}
+      {...action.buttonProps}
+    />
+  ) : undefined;
+
+  return (
+    <Card
+      className={`pf-chatbot__quickstarts-tile ${className ? className : ''}`}
+      id={`${id}-chatbot-qs-tile`}
+      style={{ height: '100%' }}
+      data-testid={`chatbot-qs-card-${camelize(displayName)}`}
+    >
+      <CardHeader
+        {...(action && {
+          actions: { actions: additionalAction }
+        })}
+      >
+        {quickStartIcon}
+      </CardHeader>
+      <CardTitle>
+        <QuickStartTileHeader name={displayName} onSelect={onSelect} quickStartId={id} />
+      </CardTitle>
+      <CardBody>
+        <Stack hasGutter>
+          <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+            {type && <Label color={type.color}>{type.text}</Label>}
+            {durationMinutes && (
+              <Label variant="outline" data-test="duration" icon={<OutlinedClockIcon />}>
+                {pluralize(durationMinutes, minuteWord, minuteWordPlural)}
+              </Label>
+            )}
+          </Flex>
+          <QuickStartTileDescription
+            description={description}
+            prerequisites={prerequisites}
+            prerequisiteWord={prerequisiteWord}
+            prerequisiteWordPlural={prerequisiteWordPlural}
+            quickStartButtonAriaLabel={quickStartButtonAriaLabel}
+          />
+        </Stack>
+      </CardBody>
+      <CardFooter>
+        <Button variant="link" isInline onClick={onSelect}>
+          <span className="pf-v6-c-button__text">Start</span>
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default QuickStartTile;

package/src/Message/QuickStarts/QuickStartTileDescription.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { monitorSampleAppQuickStart } from './monitor-sampleapp-quickstart';
+import QuickStartTileDescription, { pluralizeWord } from './QuickStartTileDescription';
+
+describe('pluralizeWord function', () => {
+  it('should render no plural correctly', () => {
+    expect(pluralizeWord(2, 'pizza')).toBe('pizzas');
+  });
+});
+
+describe('QuickStart tile description', () => {
+  it('should render no prereqs correctly', () => {
+    render(<QuickStartTileDescription description={monitorSampleAppQuickStart.spec.description} />);
+    expect(screen.queryByRole('heading')).toBeFalsy();
+  });
+  it('should render singular prereq correctly', () => {
+    render(
+      <QuickStartTileDescription
+        description={monitorSampleAppQuickStart.spec.description}
+        prerequisites={[`You completed the "Getting started with a sample" quick start.`]}
+      />
+    );
+    expect(screen.getByRole('heading', { name: /1 Prerequisite/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Show prerequisite/i })).toBeTruthy();
+  });
+  it('should render plural prereq correctly', () => {
+    render(
+      <QuickStartTileDescription
+        description={monitorSampleAppQuickStart.spec.description}
+        prerequisites={[
+          `You completed the "Getting started with a sample" quick start.`,
+          `You completed the app quick start`
+        ]}
+      />
+    );
+    expect(screen.getByRole('heading', { name: /2 Prerequisites/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Show prerequisites/i })).toBeTruthy();
+  });
+  it('should be able to click prereqs link', async () => {
+    render(
+      <QuickStartTileDescription
+        description={monitorSampleAppQuickStart.spec.description}
+        prerequisites={[`You completed the "Getting started with a sample" quick start.`]}
+      />
+    );
+    const button = screen.getByRole('button', { name: /Show prerequisites/i });
+    expect(screen.queryByRole('dialog', { name: /Prerequisite/i })).toBeFalsy();
+    await userEvent.click(button);
+
+    expect(screen.getByRole('dialog', { name: /Prerequisite/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Close/i })).toBeTruthy();
+    expect(screen.getByText(/You completed the "Getting started with a sample" quick start./i)).toBeTruthy();
+  });
+});

package/src/Message/QuickStarts/QuickStartTileDescription.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { Button, Flex, pluralize, Popover } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+
+interface QuickStartTileDescriptionProps {
+  /** QuickStart description */
+  description: string;
+  /** QuickStart prerequisites */
+  prerequisites?: string[];
+  /** Label for the English word "Prerequisite" */
+  prerequisiteWord?: string;
+  /** Label for the English word "Prerequisites" */
+  prerequisiteWordPlural?: string;
+  /** Aria-label for the quick start button */
+  quickStartButtonAriaLabel?: string;
+}
+
+/** This function is a helper for pluralizing strings stolen from React.
+ *
+ * @param {number} i The quantity of the string you want to pluralize
+ * @param {string} singular The singular version of the string
+ * @param {string} plural The change to the string that should occur if the quantity is not equal to 1.
+ *                 Defaults to adding an 's'.
+ */
+export function pluralizeWord(i: number, singular: string, plural?: string) {
+  if (!plural) {
+    plural = `${singular}s`;
+  }
+  return `${i === 1 ? singular : plural}`;
+}
+
+const QuickStartTileDescription: React.FC<QuickStartTileDescriptionProps> = ({
+  description,
+  prerequisites,
+  prerequisiteWord = 'Prerequisite',
+  prerequisiteWordPlural = 'Prerequisites',
+  quickStartButtonAriaLabel = 'Show prerequisites'
+}) => {
+  const prereqs = prerequisites?.filter((p) => p);
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const pluralizedPrereq = pluralizeWord(prereqs?.length || 0, prerequisiteWord, prerequisiteWordPlural);
+  return (
+    <>
+      {description}
+      {prereqs && prereqs.length > 0 && (
+        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+          <h5>{pluralize(prereqs.length, prerequisiteWord, prerequisiteWordPlural)}</h5>
+          <Button
+            variant="link"
+            isInline
+            data-testid="qs-card-prereqs"
+            ref={buttonRef}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            aria-label={quickStartButtonAriaLabel}
+          >
+            <InfoCircleIcon />
+          </Button>
+          <Popover
+            aria-label={pluralizedPrereq}
+            headerContent={pluralizedPrereq}
+            triggerRef={buttonRef}
+            bodyContent={
+              <div>
+                <ul aria-label={pluralizedPrereq}>
+                  {prereqs.map((prerequisite, index) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <li key={index}>{prerequisite}</li>
+                  ))}
+                </ul>
+              </div>
+            }
+          />
+        </Flex>
+      )}
+    </>
+  );
+};
+export default QuickStartTileDescription;

package/src/Message/QuickStarts/QuickStartTileHeader.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Button, Flex } from '@patternfly/react-core';
+
+interface QuickStartTileHeaderProps {
+  /** Name for the header */
+  name: string;
+  /** Id for the QuickStart */
+  quickStartId?: string;
+  /** Callback for when the name of the QuickStart is clicked */
+  onSelect: (e: React.FormEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent>) => void;
+}
+
+const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({ name, quickStartId, onSelect }) => (
+  <Flex flexWrap={{ default: 'nowrap' }}>
+    <Button data-test="title" id={quickStartId} variant="link" isInline onClick={onSelect}>
+      {name}
+    </Button>
+  </Flex>
+);
+
+export default QuickStartTileHeader;

package/src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts

@@ -0,0 +1,75 @@
+export const monitorSampleAppQuickStartWithImage = {
+  apiVersion: 'console.openshift.io/v1',
+  kind: 'QuickStarts',
+  metadata: {
+    name: 'monitor-sampleapp'
+  },
+  spec: {
+    icon: 'test.png', // this is only difference
+    version: 4.7,
+    displayName: 'Monitoring your sample application',
+    durationMinutes: 10,
+    description: `Now that you’ve created a sample application and added health checks, let’s monitor your application.`,
+    prerequisites: [`You completed the "Getting started with a sample" quick start.`],
+    introduction: `### This quick start shows you how to monitor your sample application.
+You should have previously created the **sample-app** application and **nodejs-sample** deployment via the **Get started with a sample** quick start. If you haven't, you may be able to follow these tasks with any existing deployment.`,
+    tasks: [
+      {
+        title: `Viewing the monitoring details of your sample application`,
+        description: `### To view the details of your sample application:
+1. Go to the project your sample application was created in.
+2. In the **</> Developer** perspective, go to **Topology** view.
+3. Click on the **nodejs-sample** deployment to view its details.
+4. Click on the **Monitoring** tab in the side panel.
+You can see context sensitive metrics and alerts in the **Monitoring** tab.`,
+        review: {
+          instructions: `#### To verify you can view the monitoring information:
+1. Do you see a **Metrics** accordion in the side panel?
+2. Do you see a **View monitoring dashboard** link in the **Metrics** accordion?
+3. Do you see three charts in the **Metrics** accordion: **CPU Usage**, **Memory Usage** and **Receive Bandwidth**?`,
+          failedTaskHelp: `This task isn’t verified yet. Try the task again.`
+        },
+        summary: {
+          success: `You have learned how you can monitor your sample app!`,
+          failed: `Try the steps again.`
+        }
+      },
+      {
+        title: `Viewing your project monitoring dashboard`,
+        description: `### To view the project monitoring dashboard in the context of **nodejs-sample**:
+1. Click on the **View monitoring dashboard** link in the side panel.
+2. You can change the **Time Range** and **Refresh Interval** of the dashboard.
+3. You can change the context of the dashboard as well by clicking on the drop-down list. Select a specific workload or **All Workloads** to view the dashboard in the context of the entire project.`,
+        review: {
+          instructions: `#### To verify that you are able to view the monitoring dashboard:
+Do you see metrics charts in the dashboard?`,
+          failedTaskHelp: `This task isn’t verified yet. Try the task again.`
+        },
+        summary: {
+          success: `You have learned how to view the dashboard in the context of your sample app!`,
+          failed: `Try the steps again.`
+        }
+      },
+      {
+        title: `Viewing custom metrics`,
+        description: `### To view custom metrics:
+1. Click on the **Metrics** tab of the **Monitoring** page.
+2. Click the **Select Query** drop-down list to see the available queries.
+3. Click on **Filesystem Usage** from the list to run the query.`,
+        review: {
+          instructions: `#### Verify you can see the chart associated with the query:
+Do you see a chart displayed with filesystem usage for your project?  Note: select **Custom Query** from the dropdown to create and run a custom query utilizing PromQL.
+`,
+          failedTaskHelp: `This task isn’t verified yet. Try the task again.`
+        },
+        summary: {
+          success: `You have learned how to run a query!`,
+          failed: `Try the steps again.`
+        }
+      }
+    ],
+    conclusion: `You have learned how to access workload monitoring and metrics!`,
+
+    nextQuickStart: [``]
+  }
+};