@patternfly/chatbot 2.2.0-prerelease.8 → 2.2.0

package/dist/esm/Message/QuickResponse/QuickResponse.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
+import { CheckIcon } from '@patternfly/react-icons';
+export const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect }) => {
+    const [selectedQuickResponse, setSelectedQuickResponse] = React.useState();
+    const handleQuickResponseClick = (id, onClick) => {
+        setSelectedQuickResponse(id);
+        onClick && onClick();
+        onSelect && onSelect(id);
+    };
+    return (React.createElement(LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${(quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className) ? quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className : ''}` }, quickResponseContainerProps), quickResponses.map((_a) => {
+        var { id, onClick, content, className } = _a, props = __rest(_a, ["id", "onClick", "content", "className"]);
+        return (React.createElement(Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? React.createElement(CheckIcon, null) : undefined, color: "blue", key: id, onClick: () => handleQuickResponseClick(id, onClick), className: `${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}` }, props), content));
+    })));
+};
+export default QuickResponse;

package/dist/esm/Message/QuickStarts/FallbackImg.d.ts

@@ -0,0 +1,13 @@
+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;
+}
+declare const FallbackImg: React.FC<FallbackImgProps>;
+export default FallbackImg;

package/dist/esm/Message/QuickStarts/FallbackImg.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+const FallbackImg = ({ src, alt, className, fallback }) => {
+    const [isSrcValid, setIsSrcValid] = React.useState(true);
+    if (src && isSrcValid) {
+        return React.createElement("img", { className: className, src: src, alt: alt, onError: () => setIsSrcValid(false) });
+    }
+    return React.createElement(React.Fragment, null, fallback);
+};
+export default FallbackImg;

package/dist/esm/Message/QuickStarts/QuickStartTile.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { QuickStart, QuickstartAction } from './types';
+export declare const camelize: (str: string) => string;
+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;
+}
+declare const QuickStartTile: React.FC<QuickStartTileProps>;
+export default QuickStartTile;

package/dist/esm/Message/QuickStarts/QuickStartTile.js

@@ -0,0 +1,52 @@
+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 FallbackImg from './FallbackImg';
+export const camelize = (str) => 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();
+});
+const QuickStartTile = ({ 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;
+    if (typeof icon === 'object') {
+        quickStartIcon = React.createElement(Icon, { size: "2xl" }, icon);
+    }
+    else {
+        quickStartIcon = (React.createElement(Icon, { size: "2xl" },
+            React.createElement(FallbackImg, { src: icon, alt: "", className: "pfext-catalog-item-icon__img", fallback: React.createElement(RocketIcon, null) })));
+    }
+    const onSelect = () => {
+        if (!link) {
+            onSelectQuickStart(id);
+        }
+        else {
+            window.open(link.href, '_blank', 'noopener,noreferrer');
+        }
+        onClick && onClick();
+    };
+    const ActionIcon = (action === null || action === void 0 ? void 0 : action.icon) || OutlinedBookmarkIcon;
+    const additionalAction = action ? (React.createElement(Button, Object.assign({ "aria-label": action['aria-label'], icon: React.createElement(ActionIcon, null), variant: "plain", onClick: action.onClick }, action.buttonProps))) : undefined;
+    return (React.createElement(Card, { className: `pf-chatbot__quickstarts-tile ${className ? className : ''}`, id: `${id}-chatbot-qs-tile`, style: { height: '100%' }, "data-testid": `chatbot-qs-card-${camelize(displayName)}` },
+        React.createElement(CardHeader, Object.assign({}, (action && {
+            actions: { actions: additionalAction }
+        })), quickStartIcon),
+        React.createElement(CardTitle, null,
+            React.createElement(QuickStartTileHeader, { name: displayName, onSelect: onSelect, quickStartId: id })),
+        React.createElement(CardBody, null,
+            React.createElement(Stack, { hasGutter: true },
+                React.createElement(Flex, { spaceItems: { default: 'spaceItemsSm' } },
+                    type && React.createElement(Label, { color: type.color }, type.text),
+                    durationMinutes && (React.createElement(Label, { variant: "outline", "data-test": "duration", icon: React.createElement(OutlinedClockIcon, null) }, pluralize(durationMinutes, minuteWord, minuteWordPlural)))),
+                React.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites, prerequisiteWord: prerequisiteWord, prerequisiteWordPlural: prerequisiteWordPlural, quickStartButtonAriaLabel: quickStartButtonAriaLabel }))),
+        React.createElement(CardFooter, null,
+            React.createElement(Button, { variant: "link", isInline: true, onClick: onSelect },
+                React.createElement("span", { className: "pf-v6-c-button__text" }, "Start")))));
+};
+export default QuickStartTile;

package/dist/esm/Message/QuickStarts/QuickStartTileDescription.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+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 declare function pluralizeWord(i: number, singular: string, plural?: string): string;
+declare const QuickStartTileDescription: React.FC<QuickStartTileDescriptionProps>;
+export default QuickStartTileDescription;

package/dist/esm/Message/QuickStarts/QuickStartTileDescription.js

@@ -0,0 +1,35 @@
+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';
+/** 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, singular, plural) {
+    if (!plural) {
+        plural = `${singular}s`;
+    }
+    return `${i === 1 ? singular : plural}`;
+}
+const QuickStartTileDescription = ({ description, prerequisites, prerequisiteWord = 'Prerequisite', prerequisiteWordPlural = 'Prerequisites', quickStartButtonAriaLabel = 'Show prerequisites' }) => {
+    const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
+    const buttonRef = React.useRef(null);
+    const pluralizedPrereq = pluralizeWord((prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) || 0, prerequisiteWord, prerequisiteWordPlural);
+    return (React.createElement(React.Fragment, null,
+        description,
+        prereqs && prereqs.length > 0 && (React.createElement(Flex, { spaceItems: { default: 'spaceItemsSm' } },
+            React.createElement("h5", null, pluralize(prereqs.length, prerequisiteWord, prerequisiteWordPlural)),
+            React.createElement(Button, { variant: "link", isInline: true, "data-testid": "qs-card-prereqs", ref: buttonRef, onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, "aria-label": quickStartButtonAriaLabel },
+                React.createElement(InfoCircleIcon, null)),
+            React.createElement(Popover, { "aria-label": pluralizedPrereq, headerContent: pluralizedPrereq, triggerRef: buttonRef, bodyContent: React.createElement("div", null,
+                    React.createElement("ul", { "aria-label": pluralizedPrereq }, prereqs.map((prerequisite, index) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    React.createElement("li", { key: index }, prerequisite))))) })))));
+};
+export default QuickStartTileDescription;

package/dist/esm/Message/QuickStarts/QuickStartTileDescription.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/Message/QuickStarts/QuickStartTileDescription.test.js

@@ -0,0 +1,48 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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(React.createElement(QuickStartTileDescription, { description: monitorSampleAppQuickStart.spec.description }));
+        expect(screen.queryByRole('heading')).toBeFalsy();
+    });
+    it('should render singular prereq correctly', () => {
+        render(React.createElement(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(React.createElement(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', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(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();
+        yield 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/dist/esm/Message/QuickStarts/QuickStartTileHeader.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+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;
+}
+declare const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps>;
+export default QuickStartTileHeader;

package/dist/esm/Message/QuickStarts/QuickStartTileHeader.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Button, Flex } from '@patternfly/react-core';
+const QuickStartTileHeader = ({ name, quickStartId, onSelect }) => (React.createElement(Flex, { flexWrap: { default: 'nowrap' } },
+    React.createElement(Button, { "data-test": "title", id: quickStartId, variant: "link", isInline: true, onClick: onSelect }, name)));
+export default QuickStartTileHeader;

package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.d.ts

@@ -0,0 +1,30 @@
+export declare const monitorSampleAppQuickStartWithImage: {
+    apiVersion: string;
+    kind: string;
+    metadata: {
+        name: string;
+    };
+    spec: {
+        icon: string;
+        version: number;
+        displayName: string;
+        durationMinutes: number;
+        description: string;
+        prerequisites: string[];
+        introduction: string;
+        tasks: {
+            title: string;
+            description: string;
+            review: {
+                instructions: string;
+                failedTaskHelp: string;
+            };
+            summary: {
+                success: string;
+                failed: string;
+            };
+        }[];
+        conclusion: string;
+        nextQuickStart: string[];
+    };
+};

package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.js

@@ -0,0 +1,74 @@
+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/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart.d.ts

@@ -0,0 +1,30 @@
+export declare const monitorSampleAppQuickStart: {
+    apiVersion: string;
+    kind: string;
+    metadata: {
+        name: string;
+    };
+    spec: {
+        version: number;
+        displayName: string;
+        durationMinutes: number;
+        icon: string;
+        description: string;
+        prerequisites: string[];
+        introduction: string;
+        tasks: {
+            title: string;
+            description: string;
+            review: {
+                instructions: string;
+                failedTaskHelp: string;
+            };
+            summary: {
+                success: string;
+                failed: string;
+            };
+        }[];
+        conclusion: string;
+        nextQuickStart: string[];
+    };
+};

package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart.js

@@ -0,0 +1,74 @@
+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/dist/esm/Message/QuickStarts/types.d.ts

@@ -0,0 +1,132 @@
+import { ButtonProps } from '@patternfly/react-core';
+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?: string;
+    country?: string;
+    locale?: string;
+    [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 declare enum QuickStartStatus {
+    COMPLETE = "Complete",
+    IN_PROGRESS = "In Progress",
+    NOT_STARTED = "Not started"
+}
+export declare 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/dist/esm/Message/QuickStarts/types.js

@@ -0,0 +1,14 @@
+export var QuickStartStatus;
+(function (QuickStartStatus) {
+    QuickStartStatus["COMPLETE"] = "Complete";
+    QuickStartStatus["IN_PROGRESS"] = "In Progress";
+    QuickStartStatus["NOT_STARTED"] = "Not started";
+})(QuickStartStatus || (QuickStartStatus = {}));
+export var QuickStartTaskStatus;
+(function (QuickStartTaskStatus) {
+    QuickStartTaskStatus["INIT"] = "Initial";
+    QuickStartTaskStatus["VISITED"] = "Visited";
+    QuickStartTaskStatus["REVIEW"] = "Review";
+    QuickStartTaskStatus["SUCCESS"] = "Success";
+    QuickStartTaskStatus["FAILED"] = "Failed";
+})(QuickStartTaskStatus || (QuickStartTaskStatus = {}));

package/dist/esm/Message/TableMessage/TableMessage.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { TableProps } from '@patternfly/react-table';
+interface Properties {
+    line: number;
+    column: number;
+    offset: number;
+}
+export interface TableNode {
+    children?: TableNode[];
+    value?: string;
+    position: {
+        start: Properties;
+        end: Properties;
+    };
+    tagName: string;
+    type: string;
+}
+declare const TableMessage: ({ children, ...props }: TableProps & ExtraProps) => React.JSX.Element;
+export default TableMessage;