@patternfly/quickstarts 2.2.3 → 2.2.4

package/src/ConsoleShared/src/utils/useCombineRefs.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export const useCombineRefs = <RefType extends any>(...refs: (React.Ref<RefType> | undefined)[]) =>
+  React.useCallback(
+    (element: RefType | null): void =>
+      refs.forEach((ref) => {
+        if (ref) {
+          if (typeof ref === 'function') {
+            ref(element);
+          } else {
+            (ref as React.MutableRefObject<any>).current = element;
+          }
+        }
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    refs,
+  );

package/src/HelpTopicDrawer.tsx

@@ -0,0 +1,124 @@
+import './QuickStartDrawer.scss';
+import * as React from 'react';
+import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
+import HelpTopicPanelContent from './HelpTopicPanelContent';
+import {
+  HelpTopicContext,
+  HelpTopicContextValues,
+  useValuesForHelpTopicContext,
+} from './utils/help-topic-context';
+import { QuickStartContextValues } from './utils/quick-start-context';
+import { HelpTopic } from './utils/help-topic-types';
+
+export interface HelpTopicContainerProps extends React.HTMLProps<HTMLDivElement> {
+  /** array of HelpTopics */
+  helpTopics: HelpTopic[];
+  /** text resources object
+   * Add custom strings: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#localization
+   */
+  resourceBundle?: any;
+  /** language of the current resource bundle */
+  language?: string;
+  /** if true, will show a loading spinner on the catalog page (default false) */
+  loading?: boolean;
+  /**
+   * Additional markdown extensions and renderers to use
+   * Example usage: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#markdown-extensions
+   */
+  markdown?: {
+    extensions?: any[];
+    renderExtension?: (docContext: HTMLDocument, rootSelector: string) => React.ReactNode;
+  };
+  /** additional quick start context props */
+  contextProps?: QuickStartContextValues;
+}
+
+export const HelpTopicContainer: React.FC<HelpTopicContainerProps> = ({
+  helpTopics,
+  children,
+  resourceBundle,
+  language,
+  loading = false,
+  markdown,
+  contextProps,
+  ...props
+}: HelpTopicContainerProps) => {
+  const valuesForHelpTopicContext: HelpTopicContextValues = useValuesForHelpTopicContext({
+    helpTopics,
+    language,
+    resourceBundle: {
+      ...resourceBundle,
+      // Start: "Let's go!",
+      // Continue: 'Resume',
+      // Restart: 'Start over',
+    },
+    loading,
+    markdown,
+    ...contextProps,
+  });
+
+  React.useEffect(() => {
+    if (loading !== valuesForHelpTopicContext.loading) {
+      valuesForHelpTopicContext.setLoading(loading);
+    }
+  }, [loading, valuesForHelpTopicContext]);
+
+  React.useEffect(() => {
+    if (
+      helpTopics &&
+      JSON.stringify(helpTopics) !== JSON.stringify(valuesForHelpTopicContext.helpTopics)
+    ) {
+      valuesForHelpTopicContext.setHelpTopics(helpTopics);
+    }
+  }, [helpTopics, valuesForHelpTopicContext]);
+
+  const drawerProps = {
+    //TODO add extras here?
+    ...props,
+  };
+
+  return (
+    <HelpTopicContext.Provider value={valuesForHelpTopicContext}>
+      <HelpTopicDrawer {...drawerProps}>{children}</HelpTopicDrawer>
+    </HelpTopicContext.Provider>
+  );
+};
+
+export interface HelpTopicDrawerProps extends React.HTMLProps<HTMLDivElement> {
+  helpTopics?: HelpTopic[];
+  children?: React.ReactNode;
+}
+
+export const HelpTopicDrawer: React.FC<HelpTopicDrawerProps> = ({ children, ...props }) => {
+  const { activeHelpTopic, filteredHelpTopics, setActiveHelpTopicByName } = React.useContext<
+    HelpTopicContextValues
+  >(HelpTopicContext);
+
+  const onClose = () => {
+    setActiveHelpTopicByName('');
+  };
+
+  const panelContent = (
+    <HelpTopicPanelContent
+      activeHelpTopic={activeHelpTopic}
+      filteredHelpTopics={filteredHelpTopics}
+      onClose={onClose}
+    />
+  );
+
+  return (
+    <>
+      <Drawer isExpanded={!!activeHelpTopic} isInline {...props}>
+        {children ? (
+          <DrawerContent panelContent={panelContent}>
+            <DrawerContentBody className="pfext-quick-start-drawer__body">
+              {children}
+            </DrawerContentBody>
+          </DrawerContent>
+        ) : (
+          <div className="pf-c-drawer__main">{panelContent}</div>
+        )}
+      </Drawer>
+    </>
+  );
+};

package/src/HelpTopicPanelContent.tsx

@@ -0,0 +1,152 @@
+import * as React from 'react';
+import {
+  Button,
+  Divider,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerHead,
+  DrawerPanelBody,
+  DrawerPanelContent,
+  OptionsMenu,
+  OptionsMenuItem,
+  OptionsMenuToggle,
+  Stack,
+  StackItem,
+  Title,
+} from '@patternfly/react-core';
+
+import QuickStartMarkdownView from './QuickStartMarkdownView';
+import { HelpTopic } from './utils/help-topic-types';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+
+import './QuickStartPanelContent.scss';
+import { HelpTopicContext, HelpTopicContextValues } from './utils/help-topic-context';
+
+type HelpTopicPanelContentProps = {
+  activeHelpTopic: HelpTopic;
+  filteredHelpTopics?: HelpTopic[];
+  isResizable?: boolean;
+  onClose: () => void;
+};
+
+const HelpTopicPanelContent: React.FC<HelpTopicPanelContentProps> = ({
+  activeHelpTopic = null,
+  filteredHelpTopics = [],
+  isResizable = true,
+  onClose,
+  ...props
+}) => {
+  const { setActiveHelpTopicByName } = React.useContext<HelpTopicContextValues>(HelpTopicContext);
+
+  const [isHelpTopicMenuOpen, setIsHelpTopicMenuOpen] = React.useState(false);
+
+  const toggleHelpTopicMenu = () => {
+    setIsHelpTopicMenuOpen(!isHelpTopicMenuOpen);
+  };
+
+  const onSelectHelpTopic = (event) => {
+    const topicName = event.currentTarget.id;
+    setActiveHelpTopicByName(topicName);
+    toggleHelpTopicMenu();
+  };
+
+  const menuItems =
+    filteredHelpTopics.length > 0 &&
+    filteredHelpTopics.map((topic) => {
+      return (
+        <OptionsMenuItem key={topic.name} onSelect={onSelectHelpTopic} id={topic.name}>
+          {topic.title}
+        </OptionsMenuItem>
+      );
+    });
+
+  const paddingContainer = (children) => <div style={{ padding: '24px' }}>{children}</div>;
+
+  const panelBodyItems = (
+    <>
+      {paddingContainer(<QuickStartMarkdownView content={activeHelpTopic?.content} />)}
+      {activeHelpTopic?.links?.length && <Divider />}
+      {paddingContainer(
+        <Stack hasGutter>
+          {activeHelpTopic?.links?.map(({ href, text, newTab, isExternal }, index) => {
+            return (
+              <StackItem key={index}>
+                <Button
+                  component="a"
+                  href={href}
+                  target={newTab ? '_blank' : ''}
+                  rel="noopener noreferrer"
+                  variant="link"
+                  aria-label={`Open documentation in new window`}
+                  isInline
+                  icon={isExternal ? <ExternalLinkAltIcon /> : null}
+                  iconPosition="right"
+                  style={{ fontSize: 'inherit' }}
+                >
+                  {text || href}
+                </Button>
+              </StackItem>
+            );
+          })}
+        </Stack>,
+      )}
+    </>
+  );
+
+  const content = (
+    <DrawerPanelContent isResizable={isResizable} className="pfext-quick-start__base" {...props}>
+      <div>
+        <DrawerHead>
+          <div className="pfext-quick-start-panel-content__title">
+            {menuItems && (
+              <OptionsMenu
+                id={'helptopics'}
+                isPlain
+                isOpen={isHelpTopicMenuOpen}
+                toggle={
+                  <OptionsMenuToggle
+                    style={{ paddingLeft: '0px' }}
+                    onToggle={toggleHelpTopicMenu}
+                    toggleTemplate={<BarsIcon />}
+                  />
+                }
+                menuItems={menuItems}
+              />
+            )}
+
+            <Title
+              headingLevel="h1"
+              size="xl"
+              className="pfext-quick-start-panel-content__name"
+              style={{ marginRight: 'var(--pf-global--spacer--md)' }}
+            >
+              {activeHelpTopic?.title}
+            </Title>
+          </div>
+          {
+            <DrawerActions>
+              <DrawerCloseButton
+                onClick={onClose}
+                className="pfext-quick-start-panel-content__close-button"
+                data-testid="qs-drawer-close"
+              />
+            </DrawerActions>
+          }
+        </DrawerHead>
+        <Divider />
+        <DrawerPanelBody
+          hasNoPadding
+          className="pfext-quick-start-panel-content__body"
+          data-test="content"
+        >
+          {panelBodyItems}
+        </DrawerPanelBody>
+      </div>
+    </DrawerPanelContent>
+  );
+
+  return content;
+};
+
+export default HelpTopicPanelContent;

package/src/QuickStartCatalogPage.tsx

@@ -0,0 +1,190 @@
+import * as React from 'react';
+import {
+  Button,
+  Divider,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
+  EmptyStatePrimary,
+  Text,
+  Title,
+} from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
+import { EmptyBox, LoadingBox, clearFilterParams } from '@console/internal/components/utils';
+import QuickStartCatalog from './catalog/QuickStartCatalog';
+import QuickStartCatalogFilter from './catalog/Toolbar/QuickStartCatalogFilter';
+import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-context';
+import { QuickStart } from './utils/quick-start-types';
+import { filterQuickStarts } from './utils/quick-start-utils';
+
+export type QuickStartCatalogPageProps = {
+  quickStarts?: QuickStart[];
+  showFilter?: boolean;
+  sortFnc?: (q1: QuickStart, q2: QuickStart) => number;
+  title?: string;
+  hint?: string;
+  showTitle?: boolean;
+};
+
+export const QuickStartCatalogEmptyState = ({ clearFilters }) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  return (
+    <EmptyState>
+      <EmptyStateIcon icon={SearchIcon} />
+      <Title size="lg" headingLevel="h4">
+        {getResource('No results found')}
+      </Title>
+      <EmptyStateBody>
+        {getResource(
+          'No results match the filter criteria. Remove filters or clear all filters to show results.',
+        )}
+      </EmptyStateBody>
+      <EmptyStatePrimary>
+        <Button variant="link" onClick={clearFilters} data-test="clear-filter button">
+          {getResource('Clear all filters')}
+        </Button>
+      </EmptyStatePrimary>
+    </EmptyState>
+  );
+};
+
+export const QuickStartCatalogPage: React.FC<QuickStartCatalogPageProps> = ({
+  quickStarts,
+  showFilter,
+  sortFnc = (q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName),
+  title,
+  hint,
+  showTitle = true,
+}) => {
+  const sortFncCallback = React.useCallback(sortFnc, []);
+  const {
+    allQuickStarts = [],
+    setAllQuickStarts,
+    allQuickStartStates,
+    getResource,
+    filter,
+    setFilter,
+    loading,
+  } = React.useContext<QuickStartContextValues>(QuickStartContext);
+
+  React.useEffect(() => {
+    // passed through prop, not context
+    if (quickStarts && JSON.stringify(quickStarts) !== JSON.stringify(allQuickStarts)) {
+      setAllQuickStarts(quickStarts);
+    }
+  }, [quickStarts, allQuickStarts, setAllQuickStarts]);
+
+  const initialFilteredQuickStarts = showFilter
+    ? filterQuickStarts(
+        allQuickStarts,
+        filter.keyword,
+        filter.status.statusFilters,
+        allQuickStartStates,
+      ).sort(sortFncCallback)
+    : allQuickStarts;
+
+  const [filteredQuickStarts, setFilteredQuickStarts] = React.useState(initialFilteredQuickStarts);
+  React.useEffect(() => {
+    const filteredQs = showFilter
+      ? filterQuickStarts(
+          allQuickStarts,
+          filter.keyword,
+          filter.status.statusFilters,
+          allQuickStartStates,
+        ).sort(sortFncCallback)
+      : allQuickStarts;
+    // also needs a check whether the content of the QS changed
+    if (
+      filteredQs.length !== filteredQuickStarts.length ||
+      JSON.stringify(filteredQs) !== JSON.stringify(filteredQuickStarts)
+    ) {
+      setFilteredQuickStarts(filteredQs);
+    }
+  }, [
+    allQuickStarts,
+    allQuickStartStates,
+    showFilter,
+    filter.keyword,
+    filter.status.statusFilters,
+    sortFncCallback,
+    filteredQuickStarts,
+  ]);
+
+  const clearFilters = () => {
+    setFilter('keyword', '');
+    setFilter('status', []);
+    clearFilterParams();
+    setFilteredQuickStarts(
+      allQuickStarts.sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName)),
+    );
+  };
+
+  const onSearchInputChange = (searchValue) => {
+    const result = filterQuickStarts(
+      allQuickStarts,
+      searchValue,
+      filter.status.statusFilters,
+      allQuickStartStates,
+    ).sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName));
+    if (searchValue !== filter.keyword) {
+      setFilter('keyword', searchValue);
+    }
+    if (result.length !== filteredQuickStarts.length) {
+      setFilteredQuickStarts(result);
+    }
+  };
+
+  const onStatusChange = (statusList) => {
+    const result = filterQuickStarts(
+      allQuickStarts,
+      filter.keyword,
+      statusList,
+      allQuickStartStates,
+    ).sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName));
+    if (JSON.stringify(statusList) !== JSON.stringify(filter.status)) {
+      setFilter('status', statusList);
+    }
+    if (result.length !== filteredQuickStarts.length) {
+      setFilteredQuickStarts(result);
+    }
+  };
+
+  if (loading) {
+    return <LoadingBox />;
+  }
+
+  if (!allQuickStarts || allQuickStarts.length === 0) {
+    return <EmptyBox label={getResource('Quick Starts')} />;
+  }
+
+  return (
+    <div className="pfext-quick-start__base">
+      {showTitle && (
+        <div className="pfext-page-layout__header">
+          <Text component="h1" className="pfext-page-layout__title" data-test="page-title">
+            {title || getResource('Quick Starts')}
+          </Text>
+          {hint && <div className="pfext-page-layout__hint">{hint}</div>}
+        </div>
+      )}
+      {showTitle && <Divider component="div" />}
+      {showFilter && (
+        <>
+          <QuickStartCatalogFilter
+            quickStartsCount={filteredQuickStarts.length}
+            onSearchInputChange={onSearchInputChange}
+            onStatusChange={onStatusChange}
+          />
+          <Divider component="div" />
+        </>
+      )}
+      <>
+        {filteredQuickStarts.length === 0 ? (
+          <QuickStartCatalogEmptyState clearFilters={clearFilters} />
+        ) : (
+          <QuickStartCatalog quickStarts={filteredQuickStarts} />
+        )}
+      </>
+    </div>
+  );
+};

package/src/QuickStartCloseModal.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { Button, Flex, FlexItem, ModalVariant } from '@patternfly/react-core';
+import { Modal } from '@console/shared';
+import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-context';
+
+type QuickStartCloseModalProps = {
+  isOpen: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+};
+
+const QuickStartCloseModal: React.FC<QuickStartCloseModalProps> = ({
+  isOpen,
+  onConfirm,
+  onCancel,
+}) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  return (
+    <Modal
+      className="pfext-quick-start-drawer__modal pfext-quick-start__base"
+      isOpen={isOpen}
+      variant={ModalVariant.small}
+      showClose={false}
+      data-test="leave-quickstart"
+      title={getResource('Leave quick start?')}
+      footer={
+        <Flex>
+          <FlexItem align={{ default: 'alignRight' }}>
+            <Button variant="secondary" data-test="cancel button" onClick={onCancel}>
+              {getResource('Cancel')}
+            </Button>
+          </FlexItem>
+          <FlexItem>
+            <Button variant="primary" data-test="leave button" onClick={onConfirm}>
+              {getResource('Leave')}
+            </Button>
+          </FlexItem>
+        </Flex>
+      }
+      isFullScreen
+    >
+      {getResource('Your progress will be saved.')}
+    </Modal>
+  );
+};
+
+export default QuickStartCloseModal;

package/src/QuickStartController.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import QuickStartContent from './controller/QuickStartContent';
+import QuickStartFooter from './controller/QuickStartFooter';
+import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-context';
+import { QuickStart, QuickStartStatus, QuickStartTaskStatus } from './utils/quick-start-types';
+
+type QuickStartControllerProps = {
+  quickStart: QuickStart;
+  nextQuickStarts?: QuickStart[];
+  footerClass: string;
+  contentRef: React.Ref<HTMLDivElement>;
+};
+
+const QuickStartController: React.FC<QuickStartControllerProps> = ({
+  quickStart,
+  nextQuickStarts,
+  contentRef,
+  footerClass,
+}) => {
+  const {
+    metadata: { name },
+    spec: { tasks = [] },
+  } = quickStart;
+  const totalTasks = tasks?.length;
+  const {
+    activeQuickStartState,
+    setActiveQuickStart,
+    setQuickStartTaskNumber,
+    setQuickStartTaskStatus,
+    nextStep,
+    previousStep,
+  } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  const status = activeQuickStartState?.status as QuickStartStatus;
+  const taskNumber = activeQuickStartState?.taskNumber as number;
+  const allTaskStatuses = tasks.map(
+    (task, index) => activeQuickStartState[`taskStatus${index}`],
+  ) as QuickStartTaskStatus[];
+
+  const handleQuickStartChange = React.useCallback(
+    (quickStartId: string) => setActiveQuickStart(quickStartId),
+    [setActiveQuickStart],
+  );
+
+  const handleTaskStatusChange = React.useCallback(
+    (newTaskStatus: QuickStartTaskStatus) => setQuickStartTaskStatus(newTaskStatus),
+    [setQuickStartTaskStatus],
+  );
+
+  const getQuickStartActiveTask = React.useCallback(() => {
+    let activeTaskNumber = 0;
+    while (
+      activeTaskNumber !== totalTasks &&
+      activeQuickStartState[`taskStatus${activeTaskNumber}`] !== QuickStartTaskStatus.INIT
+    ) {
+      activeTaskNumber++;
+    }
+    return activeTaskNumber;
+  }, [totalTasks, activeQuickStartState]);
+
+  const handleQuickStartContinue = React.useCallback(() => {
+    const activeTaskNumber = getQuickStartActiveTask();
+    setQuickStartTaskNumber(name, activeTaskNumber);
+  }, [getQuickStartActiveTask, setQuickStartTaskNumber, name]);
+
+  const handleNext = React.useCallback(() => {
+    if (status === QuickStartStatus.COMPLETE && taskNumber === totalTasks) {
+      return handleQuickStartChange('');
+    }
+
+    if (status !== QuickStartStatus.NOT_STARTED && taskNumber === -1) {
+      return handleQuickStartContinue();
+    }
+
+    return nextStep(totalTasks);
+  }, [handleQuickStartChange, nextStep, status, taskNumber, totalTasks, handleQuickStartContinue]);
+
+  const handleBack = React.useCallback(() => {
+    return previousStep();
+  }, [previousStep]);
+
+  const handleTaskSelect = React.useCallback(
+    (selectedTaskNumber: number) => {
+      setQuickStartTaskNumber(name, selectedTaskNumber);
+    },
+    [name, setQuickStartTaskNumber],
+  );
+
+  return (
+    <>
+      <QuickStartContent
+        quickStart={quickStart}
+        nextQuickStarts={nextQuickStarts}
+        taskNumber={taskNumber}
+        allTaskStatuses={allTaskStatuses}
+        onTaskSelect={handleTaskSelect}
+        onTaskReview={handleTaskStatusChange}
+        onQuickStartChange={handleQuickStartChange}
+        ref={contentRef}
+      />
+      <QuickStartFooter
+        status={status}
+        taskNumber={taskNumber}
+        totalTasks={totalTasks}
+        onNext={handleNext}
+        onBack={handleBack}
+        footerClass={footerClass}
+        quickStartId={quickStart.metadata.name}
+      />
+    </>
+  );
+};
+
+export default QuickStartController;

package/src/QuickStartDrawer.scss

@@ -0,0 +1,11 @@
+.pfext-quick-start-drawer {
+  &__body {
+    display: flex;
+    flex-direction: column;
+    z-index: 0;
+    position: relative;
+  }
+  &__modal > .pf-c-modal-box__footer {
+    display: block;
+  }
+}