@patternfly/chatbot 2.2.1 → 6.3.0-prerelease.10

package/src/SourcesCard/SourcesCard.test.tsx

@@ -5,18 +5,13 @@ import '@testing-library/jest-dom';
 import SourcesCard from './SourcesCard';
 
 describe('SourcesCard', () => {
-  it('should render card', () => {
-    const { container } = render(<SourcesCard sources={[{ link: '' }]} />);
-    expect(container).toMatchSnapshot();
-  });
-
   it('should render card correctly if one source with only a link is passed in', () => {
     render(<SourcesCard sources={[{ link: '' }]} />);
     expect(screen.getByText('1 source')).toBeTruthy();
     expect(screen.getByText('Source 1')).toBeTruthy();
     // no buttons or navigation when there is only 1 source
     expect(screen.queryByRole('button')).toBeFalsy();
-    expect(screen.queryByText('1 of 1')).toBeFalsy();
+    expect(screen.queryByText('1/1')).toBeFalsy();
   });
 
   it('should render card correctly if one source with a title is passed in', () => {
@@ -53,7 +48,7 @@ describe('SourcesCard', () => {
     );
     expect(screen.getByText('2 sources')).toBeTruthy();
     expect(screen.getByText('How to make an apple pie')).toBeTruthy();
-    expect(screen.getByText('1 of 2')).toBeTruthy();
+    expect(screen.getByText('1/2')).toBeTruthy();
     screen.getByRole('button', { name: /Go to previous page/i });
     screen.getByRole('button', { name: /Go to next page/i });
   });
@@ -68,12 +63,12 @@ describe('SourcesCard', () => {
       />
     );
     expect(screen.getByText('How to make an apple pie')).toBeTruthy();
-    expect(screen.getByText('1 of 2')).toBeTruthy();
+    expect(screen.getByText('1/2')).toBeTruthy();
     expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
     await userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
     expect(screen.queryByText('How to make an apple pie')).toBeFalsy();
     expect(screen.getByText('How to make cookies')).toBeTruthy();
-    expect(screen.getByText('2 of 2')).toBeTruthy();
+    expect(screen.getByText('2/2')).toBeTruthy();
     expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeEnabled();
     expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
   });
@@ -106,19 +101,6 @@ describe('SourcesCard', () => {
     expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
   });
 
-  it('should change ofWord appropriately', () => {
-    render(
-      <SourcesCard
-        sources={[
-          { title: 'How to make an apple pie', link: '' },
-          { title: 'How to make cookies', link: '' }
-        ]}
-        ofWord={'de'}
-      />
-    );
-    expect(screen.getByText('1 de 2')).toBeTruthy();
-  });
-
   it('should render navigation aria label appropriately', () => {
     render(
       <SourcesCard
@@ -235,4 +217,30 @@ describe('SourcesCard', () => {
     await userEvent.click(screen.getByRole('button', { name: /Go to previous page/i }));
     expect(spy).toHaveBeenCalledTimes(2);
   });
+
+  it('should handle showMore appropriately', async () => {
+    render(
+      <SourcesCard
+        sources={[
+          {
+            title: 'Getting started with Red Hat OpenShift',
+            link: '#',
+            body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...',
+            hasShowMore: true
+          },
+          {
+            title: 'Azure Red Hat OpenShift documentation',
+            link: '#',
+            body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure ...'
+          },
+          {
+            title: 'OKD Documentation: Home',
+            link: '#',
+            body: 'OKD is a distribution of Kubernetes optimized for continuous application development and multi-tenant deployment. OKD also serves as the upstream code base upon ...'
+          }
+        ]}
+      />
+    );
+    expect(screen.getByRole('region')).toHaveAttribute('class', 'pf-v6-c-expandable-section__content');
+  });
 });

package/src/SourcesCard/SourcesCard.tsx

@@ -12,22 +12,31 @@ import {
   CardFooter,
   CardProps,
   CardTitle,
+  ExpandableSection,
+  ExpandableSectionVariant,
   Icon,
   pluralize,
   Truncate
 } from '@patternfly/react-core';
+import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 
 export interface SourcesCardProps extends CardProps {
   /** Additional classes for the pagination navigation container. */
   className?: string;
   /** Flag indicating if the pagination is disabled. */
   isDisabled?: boolean;
-  /** Label for the English word "of". */
+  /** @deprecated ofWord has been deprecated. Label for the English word "of." */
   ofWord?: string;
   /** Accessible label for the pagination component. */
   paginationAriaLabel?: string;
   /** Content rendered inside the paginated card */
-  sources: { title?: string; link: string; body?: React.ReactNode | string }[];
+  sources: {
+    title?: string;
+    link: string;
+    body?: React.ReactNode | string;
+    isExternal?: boolean;
+    hasShowMore?: boolean;
+  }[];
   /** Label for the English word "source" */
   sourceWord?: string;
   /** Plural for sourceWord */
@@ -42,12 +51,15 @@ export interface SourcesCardProps extends CardProps {
   onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when page is changed. */
   onSetPage?: (event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => void;
+  /** Label for English words "show more" */
+  showMoreWords?: string;
+  /** Label for English words "show less" */
+  showLessWords?: string;
 }
 
 const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
   className,
   isDisabled,
-  ofWord = 'of',
   paginationAriaLabel = 'Pagination',
   sources,
   sourceWord = 'source',
@@ -57,9 +69,17 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
   onNextClick,
   onPreviousClick,
   onSetPage,
+  showMoreWords = 'show more',
+  showLessWords = 'show less',
+  isCompact,
   ...props
 }: SourcesCardProps) => {
   const [page, setPage] = React.useState(1);
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
 
   const handleNewPage = (_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
     setPage(newPage);
@@ -76,15 +96,39 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
   return (
     <div className="pf-chatbot__source">
       <span>{pluralize(sources.length, sourceWord, sourceWordPlural)}</span>
-      <Card className="pf-chatbot__sources-card" {...props}>
+      <Card isCompact={isCompact} className="pf-chatbot__sources-card" {...props}>
         <CardTitle className="pf-chatbot__sources-card-title">
-          <a href={sources[page - 1].link}>{renderTitle(sources[page - 1].title)}</a>
+          <Button
+            component="a"
+            variant={ButtonVariant.link}
+            href={sources[page - 1].link}
+            icon={sources[page - 1].isExternal ? <ExternalLinkSquareAltIcon /> : undefined}
+            iconPosition="end"
+            isInline
+            rel={sources[page - 1].isExternal ? 'noreferrer' : undefined}
+            target={sources[page - 1].isExternal ? '_blank' : undefined}
+          >
+            {renderTitle(sources[page - 1].title)}
+          </Button>
         </CardTitle>
         {sources[page - 1].body && (
-          <CardBody
-            className={`pf-chatbot__sources-card-body ${sources.length === 1 && 'pf-chatbot__sources-card-no-footer'}`}
-          >
-            {sources[page - 1].body}
+          <CardBody className={`pf-chatbot__sources-card-body`}>
+            {sources[page - 1].hasShowMore ? (
+              // prevents extra VO announcements of button text - parent Message has aria-live
+              <div aria-live="off">
+                <ExpandableSection
+                  variant={ExpandableSectionVariant.truncate}
+                  toggleText={isExpanded ? showLessWords : showMoreWords}
+                  onToggle={onToggle}
+                  isExpanded={isExpanded}
+                  truncateMaxLines={2}
+                >
+                  {sources[page - 1].body}
+                </ExpandableSection>
+              </div>
+            ) : (
+              <div className="pf-chatbot__sources-card-body-text">{sources[page - 1].body}</div>
+            )}
           </CardBody>
         )}
         {sources.length > 1 && (
@@ -117,6 +161,9 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
                     </svg>
                   </Icon>
                 </Button>
+                <span aria-hidden="true">
+                  {page}/{sources.length}
+                </span>
                 <Button
                   variant={ButtonVariant.plain}
                   isDisabled={isDisabled || page === sources.length}
@@ -144,10 +191,6 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
                   </Icon>
                 </Button>
               </nav>
-
-              <span aria-hidden="true">
-                {page} {ofWord} {sources.length}
-              </span>
             </div>
           </CardFooter>
         )}

package/src/TermsOfUse/TermsOfUse.scss

@@ -64,3 +64,23 @@
     font-size: var(--pf-t--global--font--size--heading--2xl);
   }
 }
+
+.pf-chatbot__terms-of-use-modal.pf-m-compact {
+  .pf-chatbot__terms-of-use--header {
+    gap: var(--pf-t--global--spacer--md);
+    align-items: flex-start;
+    margin-block-start: var(--pf-t--global--spacer--lg);
+  }
+
+  .pf-chatbot__terms-of-use--modal-header {
+    --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  }
+
+  .pf-chatbot__terms-of-use--modal-body {
+    --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  }
+}

package/src/TermsOfUse/TermsOfUse.tsx

@@ -33,6 +33,8 @@ export interface TermsOfUseProps extends ModalProps {
   innerRef?: React.Ref<HTMLDivElement>;
   /** OuiaID applied to modal */
   ouiaId?: string;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
 }
 
 export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
@@ -50,6 +52,7 @@ export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
   children,
   innerRef,
   ouiaId = 'TermsOfUse',
+  isCompact,
   ...props
 }: TermsOfUseProps) => {
   const handlePrimaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
@@ -67,19 +70,21 @@ export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
       ouiaId={ouiaId}
       aria-labelledby="terms-of-use-title"
       aria-describedby="terms-of-use-modal"
-      className={`pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${className ? className : ''}`}
+      className={`pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`}
       displayMode={displayMode}
       {...props}
     >
       {/* This is a workaround since the PatternFly modal doesn't have ref forwarding */}
       <section className={`pf-chatbot__terms-of-use--section`} aria-label={title} tabIndex={-1} ref={innerRef}>
-        <ModalHeader>
+        <ModalHeader className="pf-chatbot__terms-of-use--modal-header">
           <div className="pf-chatbot__terms-of-use--header">
-            {image && altText && <img src={image} className="pf-chatbot__terms-of-use--image" alt={altText} />}
+            {!isCompact && image && altText && (
+              <img src={image} className="pf-chatbot__terms-of-use--image" alt={altText} />
+            )}
             <h1 className="pf-chatbot__terms-of-use--title">{title}</h1>
           </div>
         </ModalHeader>
-        <ModalBody>
+        <ModalBody className="pf-chatbot__terms-of-use--modal-body">
           <Content>{children}</Content>
         </ModalBody>
         <ModalFooter className="pf-chatbot__terms-of-use--footer">

package/src/tracking/console_tracking_provider.ts

@@ -1,30 +1,34 @@
-import { TrackingSpi } from './tracking_spi';
+import { InitProps, TrackingSpi } from './tracking_spi';
 import { TrackingApi, TrackingEventProperties } from './tracking_api';
 
 export class ConsoleTrackingProvider implements TrackingSpi, TrackingApi {
+  private verbose = false;
   trackPageView(url: string | undefined) {
-    // eslint-disable-next-line no-console
-    console.log('ConsoleProvider pageView', url);
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('ConsoleProvider pageView ', url);
+    }
   }
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  registerProvider(): void {}
 
-  initialize(): void {
-    // eslint-disable-next-line no-console
-    console.log('ConsoleProvider initialize');
+  initialize(props: InitProps): void {
+    this.verbose = props.verbose;
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('ConsoleProvider initialize');
+    }
   }
 
-  identify(userID: string): void {
-    // eslint-disable-next-line no-console
-    console.log('ConsoleProvider identify', userID);
+  identify(userID: string, userProperties: TrackingEventProperties = {}): void {
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('ConsoleProvider identify ', userID, userProperties);
+    }
   }
 
   trackSingleItem(item: string, properties?: TrackingEventProperties): void {
-    // eslint-disable-next-line no-console
-    console.log('ConsoleProvider: ' + item, properties);
-  }
-
-  getKey(): string {
-    return 'console';
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('ConsoleProvider: ' + item, properties);
+    }
   }
 }

package/src/tracking/posthog_tracking_provider.ts

@@ -4,13 +4,14 @@ import { TrackingApi, TrackingEventProperties } from './tracking_api';
 import { InitProps, TrackingSpi } from './tracking_spi';
 
 export class PosthogTrackingProvider implements TrackingSpi, TrackingApi {
-  getKey(): string {
-    return 'posthogKey';
-  }
+  private verbose = false;
 
   initialize(props: InitProps): void {
-    // eslint-disable-next-line no-console
-    console.log('PosthogProvider initialize');
+    this.verbose = props.verbose;
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('PosthogProvider initialize');
+    }
     const posthogKey = props.posthogKey as string;
 
     posthog.init(posthogKey, {
@@ -21,22 +22,28 @@ export class PosthogTrackingProvider implements TrackingSpi, TrackingApi {
     });
   }
 
-  identify(userID: string): void {
-    // eslint-disable-next-line no-console
-    console.log('PosthogProvider userID: ' + userID);
-    posthog.identify(userID);
+  identify(userID: string, userProperties: TrackingEventProperties = {}): void {
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('PosthogProvider userID: ' + userID);
+    }
+    posthog.identify(userID, userProperties);
   }
 
   trackPageView(url: string | undefined): void {
-    // eslint-disable-next-line no-console
-    console.log('PostHogProvider url', url);
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('PostHogProvider url ', url);
+    }
     // TODO posthog seems to record that automatically.
     //  How to not clash with this here? Just leave as no-op?
   }
 
   trackSingleItem(item: string, properties?: TrackingEventProperties): void {
-    // eslint-disable-next-line no-console
-    console.log('PosthogProvider: trackSingleItem' + item, properties);
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('PosthogProvider: trackSingleItem ' + item, properties);
+    }
     posthog.capture(item, { properties });
   }
 }

package/src/tracking/segment_tracking_provider.ts

@@ -5,13 +5,14 @@ import { InitProps, TrackingSpi } from './tracking_spi';
 
 export class SegmentTrackingProvider implements TrackingSpi, TrackingApi {
   private analytics: AnalyticsBrowser | undefined;
-  getKey(): string {
-    return 'segmentKey';
-  }
+  private verbose = false;
 
   initialize(props: InitProps): void {
-    // eslint-disable-next-line no-console
-    console.log('SegmentProvider initialize');
+    this.verbose = props.verbose;
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('SegmentProvider initialize');
+    }
     const segmentKey = props.segmentKey as string;
 
     // We need to create an object here, as ts lint is unhappy otherwise
@@ -32,17 +33,21 @@ export class SegmentTrackingProvider implements TrackingSpi, TrackingApi {
     );
   }
 
-  identify(userID: string): void {
-    // eslint-disable-next-line no-console
-    console.log('SegmentProvider userID: ' + userID);
+  identify(userID: string, userProperties: TrackingEventProperties = {}): void {
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('SegmentProvider userID: ' + userID);
+    }
     if (this.analytics) {
-      this.analytics.identify(userID);
+      this.analytics.identify(userID, userProperties);
     }
   }
 
   trackPageView(url: string | undefined): void {
-    // eslint-disable-next-line no-console
-    console.log('SegmentProvider url', url);
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('SegmentProvider url ', url);
+    }
     if (this.analytics) {
       if (url) {
         this.analytics.page(url);
@@ -53,8 +58,10 @@ export class SegmentTrackingProvider implements TrackingSpi, TrackingApi {
   }
 
   trackSingleItem(item: string, properties?: TrackingEventProperties): void {
-    // eslint-disable-next-line no-console
-    console.log('SegmentProvider: trackSingleItem' + item, properties);
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('SegmentProvider: trackSingleItem ' + item, properties);
+    }
     if (this.analytics) {
       this.analytics.track(item, { properties });
     }

package/src/tracking/trackingProviderProxy.ts

@@ -6,9 +6,9 @@ class TrackingProviderProxy implements TrackingApi {
     this.providers = providers;
   }
 
-  identify(userID: string): void {
+  identify(userID: string, userProperties: TrackingEventProperties = {}): void {
     for (const provider of this.providers) {
-      provider.identify(userID);
+      provider.identify(userID, userProperties);
     }
   }
 

package/src/tracking/tracking_api.ts

@@ -3,7 +3,7 @@ export interface TrackingEventProperties {
 }
 
 export interface TrackingApi {
-  identify: (userID: string) => void;
+  identify: (userID: string, userProperties: TrackingEventProperties) => void;
 
   trackPageView: (url: string | undefined) => void;
 

package/src/tracking/tracking_registry.ts

@@ -1,4 +1,4 @@
-import { InitProps, TrackingSpi } from './tracking_spi';
+import { InitProps, Providers, TrackingSpi } from './tracking_spi';
 import { TrackingApi } from './tracking_api';
 import TrackingProviderProxy from './trackingProviderProxy';
 import { ConsoleTrackingProvider } from './console_tracking_provider';
@@ -8,26 +8,59 @@ import { UmamiTrackingProvider } from './umami_tracking_provider';
 
 export const getTrackingProviders = (initProps: InitProps): TrackingApi => {
   const providers: TrackingSpi[] = [];
-  providers.push(new SegmentTrackingProvider());
-  providers.push(new PosthogTrackingProvider());
-  providers.push(new UmamiTrackingProvider());
 
-  // TODO dynamically find and register providers
+  if (initProps.activeProviders) {
+    let tmpProps: string[] = initProps.activeProviders;
+
+    // Theoretically we get an array of provider names, but it could also be a CSV string...
+    if (!Array.isArray(initProps.activeProviders)) {
+      const tmpString = initProps.activeProviders as string;
+      if (tmpString && tmpString.indexOf(',') !== -1) {
+        tmpProps = tmpString.split(',');
+      } else {
+        tmpProps = [tmpString];
+      }
+    }
+
+    tmpProps.forEach((provider) => {
+      switch (Providers[provider]) {
+        case Providers.Segment:
+          providers.push(new SegmentTrackingProvider());
+          break;
+        case Providers.Umami:
+          providers.push(new UmamiTrackingProvider());
+          break;
+        case Providers.Posthog:
+          providers.push(new PosthogTrackingProvider());
+          break;
+        case Providers.Console:
+          providers.push(new ConsoleTrackingProvider());
+          break;
+        case Providers.None: // Do nothing, just a placeholder
+          break;
+        default:
+          if (providers.length > 1) {
+            if (initProps.verbose) {
+              // eslint-disable-next-line no-console
+              console.error("Unknown provider '" + provider);
+            }
+          }
+          break;
+      }
+    });
+  }
 
   // Initialize them
-  const enabledProviders: TrackingSpi[] = [];
   for (const provider of providers) {
-    const key = provider.getKey();
-    if (Object.keys(initProps).indexOf(key) > -1) {
+    try {
       provider.initialize(initProps);
-      enabledProviders.push(provider);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
     }
   }
-  // Add the console provider
-  const consoleTrackingProvider = new ConsoleTrackingProvider();
-  enabledProviders.push(consoleTrackingProvider); // TODO noop- provider?
 
-  return new TrackingProviderProxy(enabledProviders);
+  return new TrackingProviderProxy(providers);
 };
 
 export default getTrackingProviders;

package/src/tracking/tracking_spi.ts

@@ -1,14 +1,25 @@
-import { TrackingApi, TrackingEventProperties } from './tracking_api';
+import { TrackingApi } from './tracking_api';
 
-export interface InitProps {
-  [key: string]: string | number | boolean;
+export enum Providers {
+  None,
+  Segment,
+  Umami,
+  Posthog,
+  Console
+}
+
+export type ProviderAsString = keyof typeof Providers;
+
+export interface BaseProps {
+  verbose: boolean;
+  activeProviders: [ProviderAsString];
 }
 
+export type InitProps = {
+  [key: string]: string | number | boolean;
+} & BaseProps;
+
 export interface TrackingSpi extends TrackingApi {
-  // Return a key in InitProps to check if the provided should be enabled
-  getKey: () => string;
   // Initialize the provider
   initialize: (props: InitProps) => void;
-  // Track a single item
-  trackSingleItem: (item: string, properties?: TrackingEventProperties) => void;
 }