@patternfly/quickstarts 2.2.3 → 2.3.1

package/src/ConsoleShared/src/components/status/icons.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+// import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+// import { global_default_color_200 as blueDefaultColor } from '@patternfly/react-tokens/dist/js/global_default_color_200';
+// import { global_disabled_color_100 as disabledColor } from '@patternfly/react-tokens/dist/js/global_disabled_color_100';
+import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
+import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
+// import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+
+export const GreenCheckCircleIcon: React.FC<ColoredIconProps> = ({ className, title, size }) => (
+  <CheckCircleIcon
+    data-test="success-icon"
+    size={size}
+    color={okColor.value}
+    className={className}
+    title={title}
+  />
+);
+
+export const RedExclamationCircleIcon: React.FC<ColoredIconProps> = ({
+  className,
+  title,
+  size,
+}) => (
+  <ExclamationCircleIcon
+    size={size}
+    color={dangerColor.value}
+    className={className}
+    title={title}
+  />
+);
+
+// export const YellowExclamationTriangleIcon: React.FC<ColoredIconProps> = ({
+//   className,
+//   title,
+//   size,
+// }) => (
+//   <ExclamationTriangleIcon
+//     size={size}
+//     color={warningColor.value}
+//     className={className}
+//     title={title}
+//   />
+// );
+
+export const BlueInfoCircleIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+  <InfoCircleIcon color={blueInfoColor.value} className={className} title={title} />
+);
+
+// export const GrayUnknownIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+//   <UnknownIcon color={disabledColor.value} className={className} title={title} />
+// );
+
+// export const BlueSyncIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+//   <SyncAltIcon color={blueInfoColor.value} className={className} title={title} />
+// );
+
+// export const RedResourcesFullIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+//   <ResourcesFullIcon color={dangerColor.value} className={className} title={title} />
+// );
+
+// export const YellowResourcesAlmostFullIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+//   <ResourcesAlmostFullIcon color={warningColor.value} className={className} title={title} />
+// );
+
+// export const BlueArrowCircleUpIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+//   <ArrowCircleUpIcon color={blueDefaultColor.value} className={className} title={title} />
+// );
+
+export type ColoredIconProps = {
+  className?: string;
+  title?: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+};

package/src/ConsoleShared/src/components/status/index.tsx

@@ -0,0 +1 @@
+export * from './Status';

package/src/ConsoleShared/src/components/status/statuses.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+// import HourglassHalfIcon from '@patternfly/react-icons/dist/js/icons/hourglass-half-icon';
+// import InProgressIcon from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
+import GenericStatus from './GenericStatus';
+import { BlueInfoCircleIcon, GreenCheckCircleIcon, RedExclamationCircleIcon } from './icons';
+import { StatusComponentProps } from './types';
+
+export const ErrorStatus: React.FC<StatusComponentProps> = (props) => (
+  <GenericStatus {...props} Icon={RedExclamationCircleIcon} title={props.title || 'Error'} />
+);
+ErrorStatus.displayName = 'ErrorStatus';
+
+export const InfoStatus: React.FC<StatusComponentProps> = (props) => (
+  <GenericStatus {...props} Icon={BlueInfoCircleIcon} title={props.title || 'Information'} />
+);
+InfoStatus.displayName = 'InfoStatus';
+
+// export const PendingStatus: React.FC<StatusComponentProps> = (props) => (
+//   <GenericStatus {...props} Icon={HourglassHalfIcon} title={props.title || 'Pending'} />
+// );
+// PendingStatus.displayName = 'PendingStatus';
+
+// export const ProgressStatus: React.FC<StatusComponentProps> = (props) => (
+//   <GenericStatus {...props} Icon={InProgressIcon} title={props.title || 'In progress'} />
+// );
+// ProgressStatus.displayName = 'ProgressStatus';
+
+export const SuccessStatus: React.FC<StatusComponentProps> = (props) => (
+  <GenericStatus {...props} Icon={GreenCheckCircleIcon} title={props.title || 'Healthy'} />
+);
+SuccessStatus.displayName = 'SuccessStatus';
+
+// export const WarningStatus: React.FC<StatusComponentProps> = (props) => (
+//   <GenericStatus {...props} Icon={YellowExclamationTriangleIcon} title={props.title || 'Warning'} />
+// );
+// WarningStatus.displayName = 'WarningStatus';

package/src/ConsoleShared/src/components/status/types.ts

@@ -0,0 +1,7 @@
+export type StatusComponentProps = {
+  title?: string;
+  iconOnly?: boolean;
+  noTooltip?: boolean;
+  className?: string;
+  popoverTitle?: string;
+};

package/src/ConsoleShared/src/components/utils/FallbackImg.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+type FallbackImgProps = {
+  src: string;
+  alt?: string;
+  className?: string;
+  fallback?: React.ReactNode;
+};
+
+const FallbackImg: React.FC<FallbackImgProps> = ({ src, alt, className, fallback }) => {
+  const [isSrcValid, setIsSrcValid] = React.useState<boolean>(true);
+
+  if (src && isSrcValid) {
+    return <img className={className} src={src} alt={alt} onError={() => setIsSrcValid(false)} />;
+  }
+
+  return <>{fallback}</>;
+};
+
+export default FallbackImg;

package/src/ConsoleShared/src/components/utils/index.ts

@@ -0,0 +1 @@
+export { default as FallbackImg } from './FallbackImg';

package/src/ConsoleShared/src/constants/index.ts

@@ -0,0 +1 @@
+export * from './ui';

package/src/ConsoleShared/src/constants/ui.ts

@@ -0,0 +1 @@
+export const DASH = '-';

package/src/ConsoleShared/src/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from './scroll';
+export * from './useResizeObserver';
+export * from './useScrollShadows';
+export * from './useBoundingClientRect';
+export * from './useForceRender';
+export * from './useEventListener';

package/src/ConsoleShared/src/hooks/scroll.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+export enum ScrollDirection {
+  scrollingUp = 'scrolling-up',
+  scrollingDown = 'scrolling-down',
+  scrolledToBottom = 'scrolled-to-bottom',
+  scrolledToTop = 'scrolled-to-top',
+}
+
+export const getScrollDirection = (
+  prevScrollTop: number,
+  currentScrollTop: number,
+  scrollHeight: number,
+  clientHeight: number,
+) => {
+  let direction;
+  if (scrollHeight - currentScrollTop === clientHeight) {
+    direction = ScrollDirection.scrolledToBottom;
+  } else if (currentScrollTop === 0) {
+    direction = ScrollDirection.scrolledToTop;
+  } else if (prevScrollTop > currentScrollTop) {
+    direction = ScrollDirection.scrollingUp;
+  } else if (prevScrollTop < currentScrollTop) {
+    direction = ScrollDirection.scrollingDown;
+  }
+  return direction;
+};
+
+export const useScrollDirection = (): [ScrollDirection, (event) => void] => {
+  const scrollPosition = React.useRef<number>(null);
+  const [scrollDirection, setScrollDirection] = React.useState<ScrollDirection>(null);
+  const handleScroll = React.useCallback(
+    (event) => {
+      const { scrollHeight, scrollTop, clientHeight } = event.target;
+      if (scrollPosition.current !== null) {
+        const direction = getScrollDirection(
+          scrollPosition.current,
+          scrollTop,
+          scrollHeight,
+          clientHeight,
+        );
+        if (direction && direction !== scrollDirection) {
+          setScrollDirection(direction);
+        }
+      }
+      scrollPosition.current = scrollTop;
+    },
+    [scrollDirection],
+  );
+
+  return [scrollDirection, handleScroll];
+};

package/src/ConsoleShared/src/hooks/useBoundingClientRect.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useResizeObserver } from './useResizeObserver';
+
+type BoundingClientRect = ClientRect | null;
+
+export const useBoundingClientRect = (targetElement: HTMLElement | null): BoundingClientRect => {
+  const [clientRect, setClientRect] = React.useState<BoundingClientRect>(() =>
+    targetElement ? targetElement.getBoundingClientRect() : null,
+  );
+
+  const observerCallback = React.useCallback(() => {
+    setClientRect(targetElement ? targetElement.getBoundingClientRect() : null);
+  }, [targetElement]);
+
+  useResizeObserver(observerCallback);
+
+  return clientRect;
+};

package/src/ConsoleShared/src/hooks/useEventListener.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+
+export const useEventListener = (
+  target: EventTarget,
+  event: keyof WindowEventMap,
+  callback: EventListener,
+) => {
+  useEffect(() => {
+    target.addEventListener(event, callback);
+    return () => {
+      target.removeEventListener(event, callback);
+    };
+  }, [target, event, callback]);
+};

package/src/ConsoleShared/src/hooks/useForceRender.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+/**
+ * React hook that forces component render.
+ */
+export const useForceRender = () => React.useReducer((s: boolean) => !s, false)[1] as VoidFunction;

package/src/ConsoleShared/src/hooks/useResizeObserver.ts

@@ -0,0 +1,20 @@
+// @ts-nocheck
+// TODO: Remove the no-check
+import * as React from 'react';
+
+export const useResizeObserver = (
+  callback: ResizeObserverCallback,
+  targetElement?: HTMLElement | null,
+  observerOptions: ResizeObserverObserveOptions = undefined,
+): void => {
+  const element = React.useMemo(() => targetElement ?? document.querySelector('body'), [
+    targetElement,
+  ]);
+  React.useEffect(() => {
+    const observer = new ResizeObserver(callback);
+    observer.observe(element, observerOptions);
+    return () => {
+      observer.disconnect();
+    };
+  }, [callback, observerOptions, element]);
+};

package/src/ConsoleShared/src/hooks/useScrollShadows.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { useResizeObserver } from './useResizeObserver';
+
+export enum Shadows {
+  none = 'none',
+  both = 'both',
+  top = 'top',
+  bottom = 'bottom',
+}
+
+export const useScrollShadows = (node: HTMLElement): Shadows => {
+  const [shadows, setShadows] = React.useState(Shadows.none);
+  const computeShadows = React.useCallback(() => {
+    if (node) {
+      const { scrollTop, clientHeight, scrollHeight } = node;
+      const top = scrollTop !== 0;
+      const bottom = scrollTop + clientHeight < scrollHeight;
+      if (top && bottom) {
+        setShadows(Shadows.both);
+      } else if (top) {
+        setShadows(Shadows.top);
+      } else if (bottom) {
+        setShadows(Shadows.bottom);
+      } else {
+        setShadows(Shadows.none);
+      }
+    }
+  }, [node]);
+  // recompute when the scroll container changes in size
+  useResizeObserver(computeShadows, node);
+  React.useEffect(() => {
+    if (node) {
+      // compute initial shadows
+      computeShadows();
+      // listen for scroll events
+      node.addEventListener('scroll', computeShadows);
+    }
+    return () => {
+      if (node) {
+        node.removeEventListener('scroll', computeShadows);
+      }
+    };
+  }, [node, computeShadows]);
+  return shadows;
+};

package/src/ConsoleShared/src/index.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './hooks';
+export * from './utils';
+export * from './constants';

package/src/ConsoleShared/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './useCombineRefs';

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;