@patternfly/chatbot 2.2.0-prerelease.1 → 2.2.0-prerelease.11

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: [``]
+  }
+};

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

@@ -0,0 +1,75 @@
+export const monitorSampleAppQuickStart = {
+  apiVersion: 'console.openshift.io/v1',
+  kind: 'QuickStarts',
+  metadata: {
+    name: 'monitor-sampleapp'
+  },
+  spec: {
+    version: 4.7,
+    displayName: 'Monitoring your sample application',
+    durationMinutes: 10,
+    icon: '',
+    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: [``]
+  }
+};

package/src/Message/QuickStarts/types.ts

@@ -0,0 +1,154 @@
+import { ButtonProps } from '@patternfly/react-core';
+
+// These types are all from the QuickStart extension.
+// We want to ensure parity, so be careful when adjusting these.
+export interface AccessReviewResourceAttributes {
+  group?: string;
+  resource?: string;
+  subresource?: string;
+  verb?: K8sVerb;
+  name?: string;
+  namespace?: string;
+}
+
+export type K8sVerb = 'create' | 'get' | 'list' | 'update' | 'patch' | 'delete' | 'deletecollection' | 'watch';
+
+export interface QuickStart {
+  apiVersion?: string;
+  kind?: string;
+  metadata: ObjectMetadata;
+  spec: QuickStartSpec;
+}
+
+export interface ObjectMetadata {
+  name: string;
+  annotations?: { [key: string]: string };
+  clusterName?: string;
+  creationTimestamp?: string;
+  deletionGracePeriodSeconds?: number;
+  deletionTimestamp?: string;
+  finalizers?: string[];
+  generateName?: string;
+  generation?: number;
+  labels?: { [key: string]: string };
+  managedFields?: any[];
+  namespace?: string;
+  ownerReferences?: OwnerReference[];
+  resourceVersion?: string;
+  uid?: string;
+  // language can be: en
+  language?: string;
+  // country can be: US
+  country?: string;
+  // locale is a combination of language and country, for example: en_US
+  locale?: string;
+  // anything else to custom define
+  [key: string]: any;
+}
+
+export interface OwnerReference {
+  name: string;
+  kind: string;
+  uid: string;
+  apiVersion: string;
+  controller?: boolean;
+  blockOwnerDeletion?: boolean;
+}
+
+export interface QuickStartTask {
+  title?: string;
+  description?: string;
+  review?: QuickStartTaskReview;
+  summary?: QuickStartTaskSummary;
+  proc?: string;
+}
+
+export interface QuickStartTaskReview {
+  instructions?: string;
+  failedTaskHelp?: string;
+}
+
+export interface QuickStartTaskSummary {
+  success?: string;
+  failed?: string;
+}
+
+export interface QuickstartAction {
+  /** Screen reader aria label. */
+  'aria-label': string;
+  /** Icon to be rendered as a plain button, by default Bookmark outlined will be used. */
+  icon?: React.ComponentType<unknown>;
+  /** Callback with synthetic event parameter. */
+  onClick?: (e: React.SyntheticEvent) => void;
+  /** Additional button props to be rendered as extra props. */
+  buttonProps?: ButtonProps;
+}
+
+export interface QuickStart {
+  apiVersion?: string;
+  kind?: string;
+  metadata: ObjectMetadata;
+  spec: QuickStartSpec;
+}
+
+export interface QuickStartSpec {
+  version?: number;
+  displayName: string;
+  durationMinutes?: number;
+  icon: React.ReactNode;
+  description: string;
+  prerequisites?: string[];
+  introduction?: string;
+  tasks?: QuickStartTask[];
+  conclusion?: string;
+  nextQuickStart?: string[];
+  accessReviewResources?: AccessReviewResourceAttributes[];
+  link?: QuickStartExternal;
+  type?: QuickStartType;
+}
+
+export interface QuickStartTask {
+  title?: string;
+  description?: string;
+  review?: QuickStartTaskReview;
+  summary?: QuickStartTaskSummary;
+  proc?: string;
+}
+
+export interface QuickStartTaskReview {
+  instructions?: string;
+  failedTaskHelp?: string;
+}
+
+export interface QuickStartTaskSummary {
+  success?: string;
+  failed?: string;
+}
+
+export type AllQuickStartStates = Record<string, QuickStartState>;
+
+export type QuickStartState = Record<string, string | number | QuickStartStatus>;
+
+export enum QuickStartStatus {
+  COMPLETE = 'Complete',
+  IN_PROGRESS = 'In Progress',
+  NOT_STARTED = 'Not started'
+}
+
+export enum QuickStartTaskStatus {
+  INIT = 'Initial',
+  VISITED = 'Visited',
+  REVIEW = 'Review',
+  SUCCESS = 'Success',
+  FAILED = 'Failed'
+}
+
+export interface QuickStartExternal {
+  href: string;
+  text?: string;
+}
+
+export interface QuickStartType {
+  text: string;
+  color?: 'green' | 'purple' | 'grey' | 'blue' | 'orange' | 'red' | 'teal' | 'orangered' | 'yellow';
+}

package/src/ResponseActions/ResponseActionButton.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { DownloadIcon } from '@patternfly/react-icons';
+import ResponseActionButton from './ResponseActionButton';
+
+describe('ResponseActionButton', () => {
+  it('renders aria-label correctly if not clicked', () => {
+    render(<ResponseActionButton icon={<DownloadIcon />} ariaLabel="Download" clickedAriaLabel="Downloaded" />);
+    expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+  });
+  it('renders aria-label correctly if clicked', () => {
+    render(
+      <ResponseActionButton icon={<DownloadIcon />} ariaLabel="Download" clickedAriaLabel="Downloaded" isClicked />
+    );
+    expect(screen.getByRole('button', { name: 'Downloaded' })).toBeTruthy();
+  });
+  it('renders tooltip correctly if not clicked', async () => {
+    render(
+      <ResponseActionButton icon={<DownloadIcon />} tooltipContent="Download" clickedTooltipContent="Downloaded" />
+    );
+    expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+    // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
+    await userEvent.click(screen.getByRole('button', { name: 'Download' }));
+    expect(screen.getByRole('tooltip', { name: 'Download' })).toBeTruthy();
+  });
+  it('renders tooltip correctly if clicked', async () => {
+    render(
+      <ResponseActionButton
+        icon={<DownloadIcon />}
+        tooltipContent="Download"
+        clickedTooltipContent="Downloaded"
+        isClicked
+      />
+    );
+    expect(screen.getByRole('button', { name: 'Downloaded' })).toBeTruthy();
+    // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
+    await userEvent.click(screen.getByRole('button', { name: 'Downloaded' }));
+    expect(screen.getByRole('tooltip', { name: 'Downloaded' })).toBeTruthy();
+  });
+  it('if clicked variant for tooltip is not supplied, it uses the default', async () => {
+    render(<ResponseActionButton icon={<DownloadIcon />} tooltipContent="Download" isClicked />);
+    // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
+    await userEvent.click(screen.getByRole('button', { name: 'Download' }));
+    expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+  });
+  it('if clicked variant for aria label is not supplied, it uses the default', async () => {
+    render(<ResponseActionButton icon={<DownloadIcon />} ariaLabel="Download" isClicked />);
+    expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+  });
+});