@patternfly/chatbot 2.2.0-prerelease.4 → 2.2.0-prerelease.40

package/src/Message/Message.tsx

@@ -2,17 +2,17 @@
 // Chatbot Main - Message
 // ============================================================================
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import {
+  AlertProps,
   Avatar,
   AvatarProps,
+  ContentVariants,
   Label,
-  LabelGroup,
   LabelGroupProps,
-  LabelProps,
   Timestamp,
   Truncate
 } from '@patternfly/react-core';
@@ -25,12 +25,26 @@ 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';
+import UserFeedback, { UserFeedbackProps } from './UserFeedback/UserFeedback';
+import UserFeedbackComplete, { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
+import TableMessage from './TableMessage/TableMessage';
+import TrMessage from './TableMessage/TrMessage';
+import TdMessage from './TableMessage/TdMessage';
+import TbodyMessage from './TableMessage/TbodyMessage';
+import TheadMessage from './TableMessage/TheadMessage';
+import ThMessage from './TableMessage/ThMessage';
+import { TableProps } from '@patternfly/react-table';
+import ImageMessage from './ImageMessage/ImageMessage';
+import rehypeUnwrapImages from 'rehype-unwrap-images';
+import rehypeExternalLinks from 'rehype-external-links';
+import rehypeSanitize from 'rehype-sanitize';
+import { PluggableList } from 'react-markdown/lib';
+import LinkMessage from './LinkMessage/LinkMessage';
+import ErrorMessage from './ErrorMessage/ErrorMessage';
 
-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;
@@ -50,6 +64,17 @@ export interface MessageAttachment {
   spinnerTestId?: string;
 }
 
+export interface MessageExtraContent {
+  /** Content to display before the main content */
+  beforeMainContent?: ReactNode;
+
+  /** Content to display after the main content */
+  afterMainContent?: ReactNode;
+
+  /** Content to display at the end */
+  endContent?: ReactNode;
+}
+
 export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'role'> {
   /** Unique id for message */
   id?: string;
@@ -57,6 +82,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   role: 'user' | 'bot';
   /** Message content */
   content?: string;
+  /** Extra Message content */
+  extraContent?: MessageExtraContent;
   /** Name of the user */
   name?: string;
   /** Avatar src for the user */
@@ -85,15 +112,45 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   quickResponses?: QuickResponse[];
   /** Props for quick responses container */
   quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+  /** Props for user feedback card */
+  userFeedbackForm?: Omit<UserFeedbackProps, 'ref'>;
+  /** Props for user feedback response */
+  userFeedbackComplete?: Omit<UserFeedbackCompleteProps, 'ref'>;
   /** Whether avatar is round */
   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;
+  };
+  /** Turns the container into a live region so that changes to content within the Message, such as appending a feedback card, are reliably announced to assistive technology. */
+  isLiveRegion?: boolean;
+  /** Ref applied to message  */
+  innerRef?: React.Ref<HTMLDivElement>;
+  /** Props for table message. It is important to include a detailed aria-label that describes the purpose of the table. */
+  tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
+  /** Additional rehype plugins passed from the consumer */
+  additionalRehypePlugins?: PluggableList;
+  /** Whether to open links in message in new tab. */
+  openLinkInNewTab?: boolean;
+  /** Optional inline error message that can be displayed in the message */
+  error?: AlertProps;
 }
 
-export const Message: React.FunctionComponent<MessageProps> = ({
+export const MessageBase: React.FunctionComponent<MessageProps> = ({
   role,
   content,
+  extraContent,
   name,
   avatar,
   timestamp,
@@ -108,8 +165,25 @@ export const Message: React.FunctionComponent<MessageProps> = ({
   attachments,
   hasRoundAvatar = true,
   avatarProps,
+  quickStarts,
+  userFeedbackForm,
+  userFeedbackComplete,
+  isLiveRegion = true,
+  innerRef,
+  tableProps,
+  openLinkInNewTab = true,
+  additionalRehypePlugins = [],
+  error,
   ...props
 }: MessageProps) => {
+  const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
+  let rehypePlugins: PluggableList = [rehypeUnwrapImages];
+  if (openLinkInNewTab) {
+    rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
+  }
+  if (additionalRehypePlugins) {
+    rehypePlugins.push(...additionalRehypePlugins);
+  }
   let avatarClassName;
   if (avatarProps && 'className' in avatarProps) {
     const { className, ...rest } = avatarProps;
@@ -123,6 +197,9 @@ export const Message: React.FunctionComponent<MessageProps> = ({
     <section
       aria-label={`Message from ${role} - ${dateString}`}
       className={`pf-chatbot__message pf-chatbot__message--${role}`}
+      aria-live={isLiveRegion ? 'polite' : undefined}
+      aria-atomic={isLiveRegion ? false : undefined}
+      ref={innerRef}
       {...props}
     >
       {/* We are using an empty alt tag intentionally in order to reduce noise on screen readers */}
@@ -151,32 +228,76 @@ export const Message: React.FunctionComponent<MessageProps> = ({
             {isLoading ? (
               <MessageLoading loadingWord={loadingWord} />
             ) : (
-              <Markdown
-                components={{
-                  p: TextMessage,
-                  code: ({ children }) => <CodeBlockMessage {...codeBlockProps}>{children}</CodeBlockMessage>,
-                  ul: UnorderedListMessage,
-                  ol: OrderedListMessage,
-                  li: ListItemMessage
-                }}
-                remarkPlugins={[remarkGfm]}
-              >
-                {content}
-              </Markdown>
+              <>
+                {beforeMainContent && <>{beforeMainContent}</>}
+                {error ? (
+                  <ErrorMessage {...error} />
+                ) : (
+                  <Markdown
+                    components={{
+                      p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
+                      code: ({ children, ...props }) => (
+                        <CodeBlockMessage {...props} {...codeBlockProps}>
+                          {children}
+                        </CodeBlockMessage>
+                      ),
+                      h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
+                      h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
+                      h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
+                      h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
+                      h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
+                      h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
+                      blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />,
+                      ul: (props) => <UnorderedListMessage {...props} />,
+                      ol: (props) => <OrderedListMessage {...props} />,
+                      li: (props) => <ListItemMessage {...props} />,
+                      table: (props) => <TableMessage {...props} {...tableProps} />,
+                      tbody: (props) => <TbodyMessage {...props} />,
+                      thead: (props) => <TheadMessage {...props} />,
+                      tr: (props) => <TrMessage {...props} />,
+                      td: (props) => {
+                        // Conflicts with Td type
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        const { width, ...rest } = props;
+                        return <TdMessage {...rest} />;
+                      },
+                      th: (props) => <ThMessage {...props} />,
+                      img: (props) => <ImageMessage {...props} />,
+                      a: (props) => (
+                        <LinkMessage href={props.href} rel={props.rel} target={props.target}>
+                          {props.children}
+                        </LinkMessage>
+                      )
+                    }}
+                    remarkPlugins={[remarkGfm]}
+                    rehypePlugins={rehypePlugins}
+                  >
+                    {content}
+                  </Markdown>
+                )}
+                {afterMainContent && <>{afterMainContent}</>}
+              </>
             )}
             {!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} />}
+            {userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} />}
+            {userFeedbackComplete && <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} />}
             {!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 && (
@@ -197,10 +318,15 @@ export const Message: React.FunctionComponent<MessageProps> = ({
               ))}
             </div>
           )}
+          {!isLoading && endContent && <>{endContent}</>}
         </div>
       </div>
     </section>
   );
 };
 
+const Message = React.forwardRef((props: MessageProps, ref: React.Ref<HTMLDivElement>) => (
+  <MessageBase innerRef={ref} {...props} />
+));
+
 export default Message;

package/src/Message/MessageLoading.scss

@@ -3,9 +3,9 @@
 // ============================================================================
 .pf-chatbot__message-loading {
   width: 36px;
-  padding: var(--pf-t--chatbot-message--type--padding);
+  padding: var(--pf-t--global--spacer--sm);
   background-color: var(--pf-t--global--background--color--tertiary--default);
-  border-radius: var(--pf-t--chatbot-message--type--border--radius);
+  border-radius: var(--pf-t--global--border--radius--small);
 
   &-dots {
     position: relative;

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,54 @@
+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'>;
+  /** Callback when a response is clicked; used in feedback cards */
+  onSelect?: (id: string) => void;
+}
+
+export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
+  quickResponses,
+  quickResponseContainerProps = { numLabels: 5 },
+  onSelect
+}: QuickResponseProps) => {
+  const [selectedQuickResponse, setSelectedQuickResponse] = React.useState<string>();
+
+  const handleQuickResponseClick = (id: string, onClick?: () => void) => {
+    setSelectedQuickResponse(id);
+    onClick && onClick();
+    onSelect && onSelect(id);
+  };
+  return (
+    <LabelGroup
+      className={`pf-chatbot__message-quick-response ${quickResponseContainerProps?.className ? 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,24 @@
+.pf-chatbot__quickstarts-tile {
+  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();
+  });
+});