@patternfly/chatbot 2.2.0-prerelease.3 → 2.2.0-prerelease.30

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/Message/TableMessage/TableMessage.scss

@@ -0,0 +1,23 @@
+.pf-chatbot__message-table {
+  border-radius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-table--BackgroundColor: var(--pf-t--global--background--color--tertiary--default);
+  --pf-v6-c-table--BorderColor: var(--pf-t--global--border--color--default);
+  padding: 0 var(--pf-t--global--spacer--lg) 0 var(--pf-t--global--spacer--lg);
+
+  &.pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
+    border-block-start: 0;
+  }
+
+  tbody {
+    border-radius: var(--pf-t--global--border--radius--small);
+  }
+
+  tr {
+    --pf-v6-c-table__tr--responsive--PaddingInlineEnd: 0;
+    --pf-v6-c-table__tr--responsive--PaddingInlineStart: 0;
+  }
+
+  .pf-v6-c-table__tr:last-of-type {
+    border-block-end: 0;
+  }
+}

package/src/Message/TableMessage/TableMessage.tsx

@@ -0,0 +1,83 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { Table, 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;
+}
+
+const TableMessage = ({ children, ...props }: TableProps & ExtraProps) => {
+  const { className, ...rest } = props;
+
+  // This allows us to parse the nested data we get back from the 3rd party Markdown parser
+  // Open to feedback here if there is a better way to do this
+  // This looks for ths and spits them all out so we can filter them later, looking for text values
+  const findHeaders = (array?: TableNode[]) => {
+    const headers: TableNode[] = [];
+    if (!array) {
+      return headers;
+    }
+    const traverse = (items: TableNode[]) => {
+      for (const item of items) {
+        if (item.tagName === 'th') {
+          headers.push(item);
+        }
+        if (item.children) {
+          traverse(item.children);
+        }
+      }
+    };
+
+    traverse(array);
+    return headers;
+  };
+
+  const headers = findHeaders(rest.node?.children as TableNode[] | undefined);
+  const headerTextValues = headers.map((header) => header?.children?.filter((c) => c?.type === 'text')[0]?.value);
+
+  // We are sending these header text values down to child tds by passing them through children, since mobile view for tables expects a dataLabel prop
+  // The data structure does not otherwise know this information at that level
+  // This is somewhat opinionated and may break if 3rd party library changes
+  // See Tr and Tbody for other usage
+  const modifyChildren = (children) =>
+    React.Children.map(children, (child) => {
+      if (child && headerTextValues?.length > 0) {
+        return React.cloneElement(child, { extraHeaders: headerTextValues });
+      }
+      return child;
+    });
+
+  if (!props['aria-label']) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'For accessibility reasons an aria-label should be specified for the Table via the <Message /> tableProps prop'
+    );
+  }
+
+  return (
+    // gridBreakPoint is so we show mobile-styled-PF table
+    <Table
+      aria-label={props['aria-label']}
+      gridBreakPoint="grid"
+      className={`pf-chatbot__message-table ${className ? className : ''}`}
+      {...rest}
+    >
+      {modifyChildren(children)}
+    </Table>
+  );
+};
+
+export default TableMessage;

package/src/Message/TableMessage/TbodyMessage.tsx

@@ -0,0 +1,20 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { Tbody, TbodyProps } from '@patternfly/react-table';
+
+const TbodyProps = ({ children, ...props }: TbodyProps & ExtraProps & { extraHeaders?: string[] }) => {
+  // passthrough so we can place dataLabel on tds
+  const modifyChildren = (children) => {
+    if (children && props.extraHeaders) {
+      return React.Children.map(children, (child) => React.cloneElement(child, { extraHeaders: props.extraHeaders }));
+    }
+    return children;
+  };
+
+  return <Tbody {...props}>{modifyChildren(children)}</Tbody>;
+};
+export default TbodyProps;

package/src/Message/TableMessage/TdMessage.tsx

@@ -0,0 +1,11 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { Td, TdProps } from '@patternfly/react-table';
+
+const TdMessage = ({ children, ...props }: TdProps & ExtraProps) => <Td {...props}>{children}</Td>;
+
+export default TdMessage;

package/src/Message/TableMessage/ThMessage.tsx

@@ -0,0 +1,11 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { Th, ThProps } from '@patternfly/react-table';
+
+const ThMessage = ({ children, ...props }: ThProps & ExtraProps) => <Th {...props}>{children}</Th>;
+
+export default ThMessage;

package/src/Message/TableMessage/TheadMessage.tsx

@@ -0,0 +1,11 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { Thead, TheadProps } from '@patternfly/react-table';
+
+const TheadMessage = ({ children, ...props }: TheadProps & ExtraProps) => <Thead {...props}>{children}</Thead>;
+
+export default TheadMessage;

package/src/Message/TableMessage/TrMessage.tsx

@@ -0,0 +1,27 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { Tr, TrProps } from '@patternfly/react-table';
+
+const TrMessage = ({ children, ...props }: TrProps & ExtraProps & { extraHeaders?: string[] }) => {
+  let tdIndex = 0;
+
+  // passthrough so we can place dataLabel on tds
+  // places column name on correct child
+  const modifyChildren = (children) =>
+    React.Children.map(children, (child) => {
+      if (child.type.name === 'td' && props.extraHeaders) {
+        const clonedChild = React.cloneElement(child, { dataLabel: props.extraHeaders[tdIndex] });
+        tdIndex = tdIndex + 1;
+        return clonedChild;
+      }
+      return child;
+    });
+
+  return <Tr {...props}>{modifyChildren(children)}</Tr>;
+};
+
+export default TrMessage;

package/src/Message/TextMessage/TextMessage.scss

@@ -10,42 +10,51 @@
   }
 }
 
+// make it full width when there's a table, so the table can grow as needed
+.pf-chatbot__message-and-actions:has(.pf-chatbot__message-table) {
+  width: 100%;
+}
+
 // Need to inline shorter text
 .pf-chatbot__message-text {
   width: fit-content;
-  padding: var(--pf-t--chatbot-message--type--padding) 0 var(--pf-t--chatbot-message--type--padding) 0;
-  border-radius: var(--pf-t--chatbot-message--type--border--radius);
+  padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
+  border-radius: var(--pf-t--global--border--radius--small);
+
+  .pf-v6-c-button.pf-m-link {
+    font-size: var(--pf-t--global--font--size--md);
+  }
 
   .pf-v6-c-content,
   .pf-v6-c-content--small,
   .pf-v6-c-content--blockquote,
   p,
   a {
-    --pf-v6-c-content--FontSize: var(--pf-t--chatbot--font-size);
+    --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--md);
   }
 
   code {
-    background-color: var(--pf-t--chatbot-message--type--background--color--default);
+    background-color: var(--pf-t--global--background--color--tertiary--default);
     font-size: var(--pf-t--global--font--size--body--default);
   }
 }
 
 .pf-chatbot__message--user {
   .pf-chatbot__message-text {
-    background-color: var(--pf-t--chatbot-message--type--background--color--primary);
-    color: var(--pf-t--chatbot-message--type--text--color--primary);
-    padding: var(--pf-t--chatbot-message--type--padding);
+    background-color: var(--pf-t--global--color--brand--default);
+    color: var(--pf-t--global--text--color--on-brand--default);
+    --pf-v6-c-content--Color: var(--pf-t--global--text--color--on-brand--default);
+    padding: var(--pf-t--global--spacer--sm);
+    .pf-v6-c-button__icon {
+      --pf-v6-c-button__icon--Color: var(--pf-t--global--text--color--on-brand--default);
+    }
 
     .pf-v6-c-content,
     .pf-v6-c-content--small,
     .pf-v6-c-content--blockquote,
     p,
     a {
-      color: var(--pf-t--chatbot-message--type--text--color--primary);
-    }
-
-    code {
-      background-color: initial;
+      color: var(--pf-t--global--text--color--on-brand--default);
     }
   }
 }