@patternfly/chatbot 6.4.0-prerelease.2 → 6.4.0-prerelease.21

package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx

@@ -1,8 +1,46 @@
-import { Fragment, FunctionComponent } from 'react';
-
+import { Fragment, FunctionComponent, useState, useEffect } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import userAvatar from './user_avatar.svg';
-import { Alert, Badge, Button, Card, CardBody, CardFooter, CardTitle } from '@patternfly/react-core';
+import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionToggle,
+  Alert,
+  Badge,
+  Button,
+  ButtonVariant,
+  Card,
+  CardBody,
+  CardExpandableContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  CodeBlock,
+  CodeBlockCode,
+  Content,
+  ContentVariants,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Flex,
+  FlexItem,
+  HelperText,
+  HelperTextItem,
+  Icon,
+  Progress,
+  ProgressMeasureLocation,
+  ExpandableSection,
+  ExpandableSectionToggle,
+  Label,
+  Tab,
+  Tabs,
+  TabTitleText,
+  Spinner
+} from '@patternfly/react-core';
+import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CubeIcon, CubesIcon } from '@patternfly/react-icons';
 
 const UserActionEndContent = () => {
   // eslint-disable-next-line no-console
@@ -36,6 +74,552 @@ const BeforeMainContent = () => (
   </div>
 );
 
+interface Stage {
+  id: string;
+  name: string;
+  startProgress: number;
+  endProgress: number;
+}
+
+const LiveProgressSummaryCard = () => {
+  const [isCardExpanded, setIsCardExpanded] = useState(false);
+  const [isAccordionExpanded, setIsAccordionExpanded] = useState('installing-toggle');
+  const [progress, setProgress] = useState(15);
+  const [isSimulationRunning, setIsSimulationRunning] = useState(false);
+  const [userManuallyExpandedAccordion, setUserManuallyExpandedAccordion] = useState(false);
+
+  const stages: Stage[] = [
+    {
+      id: 'installing-toggle',
+      name: 'Installing cluster bootstrap',
+      startProgress: 0,
+      endProgress: 25
+    },
+    {
+      id: 'setup-toggle',
+      name: 'Control plane setup',
+      startProgress: 25,
+      endProgress: 45
+    },
+    {
+      id: 'deploying-toggle',
+      name: 'Deploying cluster operators',
+      startProgress: 45,
+      endProgress: 85
+    },
+    {
+      id: 'finalizing-toggle',
+      name: 'Finalizing installation',
+      startProgress: 85,
+      endProgress: 100
+    }
+  ];
+
+  const getCurrentStage = () =>
+    stages.find((stage) => progress >= stage.startProgress && progress < stage.endProgress) ||
+    stages[stages.length - 1];
+
+  const getTimeRemaining = () => {
+    const remainingProgress = 100 - progress;
+    const estimatedMinutes = Math.max(1, Math.round((remainingProgress / 100) * 30)); // 30 minutes total simulation
+    return `About ${estimatedMinutes} minute${estimatedMinutes !== 1 ? 's' : ''} remaining`;
+  };
+
+  const getCurrentStageName = () => {
+    const currentStage = getCurrentStage();
+    return currentStage.name;
+  };
+
+  const getStageStatus = (stage: Stage) => {
+    if (progress >= stage.endProgress) {
+      return 'completed';
+    }
+    if (progress >= stage.startProgress) {
+      return 'in-progress';
+    }
+    return 'pending';
+  };
+
+  const renderStageIcon = (stage: Stage) => {
+    const status = getStageStatus(stage);
+
+    if (status === 'completed') {
+      return <CheckCircleIcon color="green" aria-label="Complete" />;
+    } else if (status === 'in-progress') {
+      return <Spinner size="sm" aria-valuetext="In progress" />;
+    } else {
+      return <div style={{ width: 'var(--pf-t--global--spacer--md)' }}>{/* Empty space for pending stages */}</div>;
+    }
+  };
+
+  // Auto-increment progress when simulation is running
+  useEffect(() => {
+    let interval;
+
+    if (isSimulationRunning && progress < 100) {
+      interval = setInterval(() => {
+        setProgress((prev) => {
+          const increment = Math.random() * 2 + 0.5; // Random increment between 0.5-2.5%
+          const newProgress = Math.min(prev + increment, 100);
+
+          // Stop simulation when complete
+          if (newProgress >= 100) {
+            setIsSimulationRunning(false);
+            setUserManuallyExpandedAccordion(false); // Reset manual override when simulation completes
+          }
+
+          return newProgress;
+        });
+      }, 800);
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [isSimulationRunning, progress]);
+
+  // Auto-expand accordion to show current stage (only if user hasn't manually overridden)
+  useEffect(() => {
+    if (isSimulationRunning && !userManuallyExpandedAccordion) {
+      setIsAccordionExpanded(getCurrentStage().id);
+    }
+  }, [progress, isSimulationRunning, userManuallyExpandedAccordion]);
+
+  const onExpandCard = (_event: React.MouseEvent) => {
+    setIsCardExpanded(!isCardExpanded);
+  };
+
+  const onExpandAccordion = (id: string) => {
+    setUserManuallyExpandedAccordion(true);
+
+    if (id === isAccordionExpanded) {
+      setIsAccordionExpanded('');
+    } else {
+      setIsAccordionExpanded(id);
+    }
+  };
+
+  const getStageContent = (stage: Stage) => {
+    const status = getStageStatus(stage);
+
+    if (status === 'in-progress') {
+      switch (stage.id) {
+        case 'installing-toggle':
+          return `Installing bootstrap node...
+Installing etcd cluster...
+Installing control plane...`;
+        case 'setup-toggle':
+          return `Configuring cluster networking...
+Setting up OpenShift API server...
+Configuring authentication...
+Setting up cluster operators...`;
+        case 'deploying-toggle':
+          return `Deploying openshift-apiserver operator...
+Deploying openshift-sdn operator...
+Deploying openshift-ingress operator...
+`;
+        case 'finalizing-toggle':
+          return `Finalizing cluster configuration...
+Running post-installation tasks...
+Setting up cluster console...`;
+      }
+    }
+    if (status === 'pending') {
+      return 'Processing...';
+    }
+    return 'Complete!';
+  };
+
+  const renderCodeBlock = (stage: Stage) => (
+    <CodeBlock
+      style={
+        {
+          '--pf-v6-c-code-block--BackgroundColor': 'var(--pf-t--color--gray--95)',
+          '--pf-v6-c-code-block--BorderRadius': 'var(--pf-t--global--border--radius--small)'
+        } as React.CSSProperties
+      }
+    >
+      <CodeBlockCode>{getStageContent(stage)}</CodeBlockCode>
+    </CodeBlock>
+  );
+
+  return (
+    <>
+      <Flex className="pf-v6-u-mt-lg" spaceItems={{ default: 'spaceItemsSm' }}>
+        <FlexItem>
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={() => {
+              setProgress(15);
+              setIsSimulationRunning(true);
+              setUserManuallyExpandedAccordion(false);
+            }}
+            isDisabled={isSimulationRunning}
+          >
+            {isSimulationRunning ? 'Simulation running...' : 'Start simulation of cluster installation progress'}
+          </Button>
+        </FlexItem>
+        <FlexItem>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => {
+              setIsSimulationRunning(false);
+              setProgress(15);
+              setIsAccordionExpanded('installing-toggle');
+              setUserManuallyExpandedAccordion(false);
+            }}
+          >
+            Reset
+          </Button>
+        </FlexItem>
+      </Flex>
+      <Card ouiaId="LiveProgressSummaryCard" isExpanded={isCardExpanded}>
+        <CardHeader
+          onExpand={onExpandCard}
+          isToggleRightAligned
+          toggleButtonProps={{
+            id: 'toggle-button1',
+            'aria-label': 'Details',
+            'aria-labelledby': 'expandable-card-title toggle-button1',
+            'aria-expanded': isCardExpanded
+          }}
+        >
+          <DescriptionList>
+            <DescriptionListGroup
+              style={
+                {
+                  '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--md)'
+                } as React.CSSProperties
+              }
+            >
+              <DescriptionListTerm id="title-outside-progress-example-label">
+                OpenShift cluster installation
+              </DescriptionListTerm>
+              <DescriptionListDescription>
+                <Progress
+                  aria-labelledby="title-outside-progress-example-label"
+                  value={progress}
+                  measureLocation={ProgressMeasureLocation.outside}
+                  style={{ '--pf-v6-c-progress--GridGap': 'var(--pf-t--global--spacer--sm' } as React.CSSProperties}
+                  helperText={
+                    <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+                      <FlexItem>
+                        <HelperText>
+                          <HelperTextItem>
+                            {progress >= 100 ? 'Installation complete!' : getCurrentStageName()}
+                          </HelperTextItem>
+                        </HelperText>
+                      </FlexItem>
+                      <FlexItem>
+                        <HelperText>
+                          {/* Progress was getting announced on VoiceOver constantly - this helps avoid that */}
+                          <HelperTextItem aria-live="off">
+                            {progress >= 100 ? 'Completed' : getTimeRemaining()}
+                          </HelperTextItem>
+                        </HelperText>
+                      </FlexItem>
+                    </Flex>
+                  }
+                />
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+          </DescriptionList>
+        </CardHeader>
+        <CardExpandableContent>
+          <CardBody>
+            <hr
+              style={
+                {
+                  border: 'none',
+                  height: 'var(--pf-t--global--border--width--divider--default)',
+                  backgroundColor: 'var(--pf-t--global--border--color--control--read-only)'
+                } as React.CSSProperties
+              }
+              className="pf-v6-u-mb-md"
+            />
+            <Accordion
+              style={
+                {
+                  '--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart': 'var(--pf-t--global--spacer--md)',
+                  '--pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd': '0',
+                  '--pf-v6-c-accordion__expandable-content-body--PaddingInlineStart': '0',
+                  '--pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd': '0',
+                  '--pf-v6-c-accordion__expandable-content--BackgroundColor': 'initial',
+                  '--pf-v6-c-accordion__expandable-content--Color': '#fff'
+                } as React.CSSProperties
+              }
+            >
+              {stages.map((stage) => (
+                <AccordionItem key={stage.id} isExpanded={isAccordionExpanded === stage.id}>
+                  <AccordionToggle
+                    onClick={() => {
+                      onExpandAccordion(stage.id);
+                    }}
+                    id={stage.id}
+                  >
+                    <Flex spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+                      <FlexItem>{renderStageIcon(stage)}</FlexItem>
+                      <FlexItem>{stage.name}</FlexItem>
+                    </Flex>
+                  </AccordionToggle>
+                  <AccordionContent id={stage.id.replace('-toggle', '')}>{renderCodeBlock(stage)}</AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </CardBody>
+        </CardExpandableContent>
+        <CardFooter>
+          <Button isBlock variant="tertiary" icon={<ArrowRightIcon />} iconPosition="end">
+            Open in console
+          </Button>
+        </CardFooter>
+      </Card>
+    </>
+  );
+};
+
+const VersionSelectorCard = () => {
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isCardSelected, setIsCardSelected] = useState('');
+  const [isExpanded, setIsExpanded] = useState(false);
+  const id1 = '4.20';
+  const id2 = '4.19';
+  const id3 = '4.18';
+  const id4 = '4.17';
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    setIsCardSelected(event.currentTarget.id);
+  };
+
+  const onToggleExpandableSection = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  const handleTabClick = (_event: any, tabIndex: string | number) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const contentId = 'detached-expandable-section-content';
+  const toggleId = 'detached-expandable-section-toggle';
+
+  const generateTabContent = (title: string, subtitle: string) => (
+    <Flex direction={{ default: 'column' }} alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapMd' }}>
+      <FlexItem alignSelf={{ default: 'alignSelfCenter' }} className="pf-v6-u-mt-md pf-v6-u-text-align-center">
+        <div className="pf-v6-u-font-weight-bold">{title}</div>
+        <div>{subtitle}</div>
+      </FlexItem>
+      <FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
+        <Card id="4.20-card" isSelectable isSelected={isCardSelected === id1}>
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id1,
+              selectableActionAriaLabelledby: '4.20-card',
+              name: 'version',
+              variant: 'single',
+              onChange,
+              isHidden: true
+            }}
+          >
+            <CardTitle>
+              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                <FlexItem>4.20.0-ec.3</FlexItem>
+                <FlexItem>
+                  <Label isCompact color={isCardSelected === id1 ? 'blue' : undefined}>
+                    Preview
+                  </Label>
+                </FlexItem>
+              </Flex>
+            </CardTitle>
+          </CardHeader>
+          <CardBody>Developer preview • Not for production</CardBody>
+        </Card>
+      </FlexItem>
+      <FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
+        <Card id="4.19-card" isSelectable isSelected={isCardSelected === id2}>
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id2,
+              selectableActionAriaLabelledby: '4.19-card',
+              name: 'version',
+              variant: 'single',
+              onChange,
+              isHidden: true
+            }}
+          >
+            <CardTitle>
+              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                <FlexItem>4.19.2</FlexItem>
+                <FlexItem>
+                  <Label isCompact color={isCardSelected === id2 ? 'blue' : undefined}>
+                    Latest
+                  </Label>
+                </FlexItem>
+              </Flex>
+            </CardTitle>
+          </CardHeader>
+          <CardBody>Newest features • 18-month support • Recommended</CardBody>
+        </Card>
+      </FlexItem>
+      <FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
+        <Card id="4.18-card" isSelectable isSelected={isCardSelected === id3}>
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id3,
+              selectableActionAriaLabelledby: '4.18-card',
+              name: 'version',
+              variant: 'single',
+              onChange,
+              isHidden: true
+            }}
+          >
+            <CardTitle>4.18.19</CardTitle>
+          </CardHeader>
+          <CardBody>Previous stable • Full support</CardBody>
+        </Card>
+        <ExpandableSection isExpanded={isExpanded} isDetached toggleId={toggleId} contentId={contentId}>
+          <Flex
+            direction={{ default: 'column' }}
+            alignItems={{ default: 'alignItemsCenter' }}
+            gap={{ default: 'gapMd' }}
+          >
+            <FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
+              <Card className="pf-v6-u-mt-md" id="4.17-card" isSelectable isSelected={isCardSelected === id4}>
+                <CardHeader
+                  selectableActions={{
+                    selectableActionId: id4,
+                    selectableActionAriaLabelledby: '4.17-card',
+                    name: 'version',
+                    variant: 'single',
+                    onChange,
+                    isHidden: true
+                  }}
+                >
+                  <CardTitle>
+                    <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                      <FlexItem>4.17.34</FlexItem>
+                      <FlexItem>
+                        <Label isCompact color={isCardSelected === id4 ? 'blue' : undefined}>
+                          Maintenance
+                        </Label>
+                      </FlexItem>
+                    </Flex>
+                  </CardTitle>
+                </CardHeader>
+                <CardBody>Maintenance support phase</CardBody>
+              </Card>
+            </FlexItem>
+          </Flex>
+        </ExpandableSection>
+      </FlexItem>
+      <FlexItem>
+        <ExpandableSectionToggle
+          isExpanded={isExpanded}
+          onToggle={onToggleExpandableSection}
+          toggleId={toggleId}
+          contentId={contentId}
+          direction="up"
+        >
+          {isExpanded ? 'Hide older versions' : 'Show older versions'}
+        </ExpandableSectionToggle>
+      </FlexItem>
+    </Flex>
+  );
+
+  return (
+    <Card ouiaId="VersionSelectorCard">
+      <CardBody
+        style={{ '--pf-v6-c-card--child--PaddingBlockEnd': 'var(--pf-t--global--spacer--md)' } as React.CSSProperties}
+      >
+        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} aria-label="Architecture" role="region" isFilled>
+          <Tab
+            eventKey={0}
+            title={
+              <TabTitleText>
+                <Flex spaceItems={{ default: 'spaceItemsXs' }}>
+                  <FlexItem>
+                    <CubeIcon />
+                  </FlexItem>
+                  <FlexItem>Single arch</FlexItem>
+                </Flex>
+              </TabTitleText>
+            }
+          >
+            {generateTabContent('x86_64 Intel/AMD only', 'Standard deployments • Most common choice')}
+          </Tab>
+          <Tab
+            eventKey={1}
+            title={
+              <TabTitleText>
+                <Flex spaceItems={{ default: 'spaceItemsXs' }}>
+                  <FlexItem>
+                    <CubesIcon />
+                  </FlexItem>
+                  <FlexItem>Multi arch</FlexItem>
+                </Flex>
+              </TabTitleText>
+            }
+          >
+            {generateTabContent('Multi arch', 'Standard deployments')}
+          </Tab>
+        </Tabs>
+      </CardBody>
+      <CardFooter>
+        <Button isBlock isDisabled={isCardSelected === ''}>
+          Continue with selections
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+};
+
+const DownloadCard = () => (
+  <Card>
+    <CardHeader isToggleRightAligned>
+      <CardTitle>
+        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+          <FlexItem>
+            <Icon size="lg" status="success">
+              <CheckCircleIcon />
+            </Icon>
+          </FlexItem>
+          <FlexItem>Your discovery ISO is ready</FlexItem>
+        </Flex>
+      </CardTitle>
+    </CardHeader>
+    <CardBody>
+      <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsLg' }}>
+        <FlexItem>
+          <Content component={ContentVariants.p}>
+            To begin adding hosts to your bare metal cluster, you first need to boot them with the generated Discovery
+            ISO. This allows the installation program to see and manage your hardware.
+          </Content>
+        </FlexItem>
+
+        <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsSm' }}>
+          <FlexItem>
+            <Button variant={ButtonVariant.primary} icon={<ArrowCircleDownIcon />} isBlock>
+              Download Discovery ISO
+            </Button>
+          </FlexItem>
+
+          <FlexItem alignSelf={{ default: 'alignSelfCenter' }}>
+            <Content component={ContentVariants.small}>1.2 GB • Expires in 24 hours</Content>
+          </FlexItem>
+        </Flex>
+      </Flex>
+    </CardBody>
+    <CardFooter>
+      <Content component={ContentVariants.small}>
+        <strong>Next step:</strong> After downloading, boot your bare metal hosts from this ISO image.
+      </Content>
+    </CardFooter>
+  </Card>
+);
+
 export const UserMessageWithExtraContent: FunctionComponent = () => (
   <>
     <Message
@@ -50,5 +634,34 @@ export const UserMessageWithExtraContent: FunctionComponent = () => (
         endContent: <UserActionEndContent />
       }}
     />
+    <Message
+      avatar={patternflyAvatar}
+      name="Bot"
+      role="bot"
+      content="This is a message with a live progress summmary card."
+      timestamp="1 hour ago"
+      extraContent={{
+        afterMainContent: <LiveProgressSummaryCard />
+      }}
+    />
+    <Message
+      avatar={patternflyAvatar}
+      name="Bot"
+      role="bot"
+      content="This is a message with a version selector card."
+      timestamp="1 hour ago"
+      extraContent={{
+        afterMainContent: <VersionSelectorCard />
+      }}
+    />
+    <Message
+      avatar={patternflyAvatar}
+      name="Bot"
+      role="bot"
+      content="All set! I've finished building the Discovery ISO. The next step is to download it and boot your hosts, which you can do using the summary card I've prepared for you:"
+      extraContent={{
+        endContent: <DownloadCard />
+      }}
+    />
   </>
 );