@patternfly/quickstarts 0.0.0

package/src/ConsoleShared/src/components/markdown-extensions/showdown-extension.scss

@@ -0,0 +1,52 @@
+.pfext-markdown-view {
+  .pfext-code-block__pre {
+    /* override the styles applied by showdown while parsing <pre /> */
+    display: flex;
+    border: none;
+    border-radius: none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+  }
+  
+  .pfext-markdown-execute-snippet {
+  
+    &__button {
+      & > i.fa-check {
+        display: none;
+      }
+  
+      & > i.fa-play {
+        display: inline;
+      }
+  
+      &[data-executed] {
+        & > i.fa-check {
+          display: inline;
+        }
+  
+        & > i.fa-play {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .pfext-markdown-admonition {
+    &.pf-v5-c-alert {
+      // add margins to match design
+      margin: var(--pf-v5-global--spacer--md) 0;
+      .pf-v5-c-alert__title {
+        // remove margins from markdown css
+        margin-top: 0;
+        margin-bottom: 0;
+        // lift PF style specificity to override markdown css
+        font-weight: var(--pf-v5-c-alert__title--FontWeight);
+        font-family: inherit;
+        line-height: inherit;
+        color: var(--pf-v5-c-alert__title--Color);
+        word-break: break-word;
+      }
+    }
+  }
+}

package/src/ConsoleShared/src/components/markdown-extensions/utils.ts

@@ -0,0 +1 @@
+export const removeTemplateWhitespace = (template: string): string => template.replace(/>(?:\s|\n)+</g, '><');

package/src/ConsoleShared/src/components/markdown-highlight-extension/MarkdownHighlightExtension.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { Spotlight } from '../spotlight';
+
+interface MarkdownHighlightExtensionProps {
+  docContext: Document;
+  rootSelector: string;
+}
+const MarkdownHighlightExtension: React.FC<MarkdownHighlightExtensionProps> = ({
+  docContext,
+  rootSelector,
+}) => {
+  const [selector, setSelector] = React.useState<string>(null);
+  React.useEffect(() => {
+    const elements = docContext.querySelectorAll(`${rootSelector} [data-highlight]`);
+    let timeoutId: NodeJS.Timeout;
+    function startHighlight(e) {
+      const highlightId = e.target.getAttribute('data-highlight');
+      if (!highlightId) {
+        return;
+      }
+      setSelector(null);
+      timeoutId = setTimeout(() => {
+        setSelector(`[data-quickstart-id="${highlightId}"]`);
+      }, 0);
+    }
+    elements && elements.forEach((elm) => elm.addEventListener('click', startHighlight));
+    return () => {
+      clearTimeout(timeoutId);
+      elements && elements.forEach((elm) => elm.removeEventListener('click', startHighlight));
+    };
+  }, [docContext, rootSelector]);
+  React.useEffect(() => {
+    const elements = docContext.querySelectorAll(`${rootSelector} [class^=data-highlight__]`);
+    let timeoutId: NodeJS.Timeout;
+    function startHighlight(e) {
+      e.preventDefault();
+      const classes = e.target.getAttribute('class').split(' ');
+      let highlightId;
+
+      for (const className of classes) {
+        if (className.startsWith('data-highlight__')) {
+          highlightId = className.split('__')[1];
+          break;
+        }
+      }
+      if (!highlightId) {
+        return;
+      }
+      setSelector(null);
+      timeoutId = setTimeout(() => {
+        setSelector(`[data-quickstart-id="${highlightId}"]`);
+      }, 0);
+    }
+    elements && elements.forEach((elm) => elm.addEventListener('click', startHighlight));
+    return () => {
+      clearTimeout(timeoutId);
+      elements && elements.forEach((elm) => elm.removeEventListener('click', startHighlight));
+    };
+  }, [docContext, rootSelector]);
+  if (!selector) {
+    return null;
+  }
+  return <Spotlight selector={selector} interactive />;
+};
+export default MarkdownHighlightExtension;

package/src/ConsoleShared/src/components/markdown-highlight-extension/highlight-consts.ts

@@ -0,0 +1,9 @@
+export const LINK_LABEL = '[\\d\\w\\s-()$!]+';
+export const HIGHLIGHT_ACTIONS = ['highlight'];
+export const SELECTOR_ID = `[\\w-]+`;
+
+// [linkLabel]{{action id}}
+export const HIGHLIGHT_REGEXP = new RegExp(
+  `\\[(${LINK_LABEL})]{{(${HIGHLIGHT_ACTIONS.join('|')}) (${SELECTOR_ID})}}`,
+  'g',
+);

package/src/ConsoleShared/src/components/markdown-highlight-extension/index.ts

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

package/src/ConsoleShared/src/components/modal/Modal.scss

@@ -0,0 +1,3 @@
+.pfext-modal {
+  position: absolute !important;
+}

package/src/ConsoleShared/src/components/modal/Modal.tsx

@@ -0,0 +1,19 @@
+import './Modal.scss';
+import * as React from 'react';
+import { Modal as PfModal, ModalProps as PfModalProps } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
+
+type ModalProps = {
+  isFullScreen?: boolean;
+  ref?: React.LegacyRef<PfModal>;
+} & PfModalProps;
+
+const Modal: React.FC<ModalProps> = ({ isFullScreen = false, className, ...props }) => (
+  <PfModal
+    {...props}
+    className={css('pfext-modal', className)}
+    appendTo={() => (isFullScreen ? document.body : document.querySelector('#modal-container'))}
+  />
+);
+
+export default Modal;

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

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

package/src/ConsoleShared/src/components/popper/Portal.tsx

@@ -0,0 +1,25 @@
+import { useIsomorphicLayoutEffect } from '@patternfly/react-core';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+type GetContainer = Element | null | undefined | (() => Element);
+
+interface PortalProps {
+  children: React.ReactNode;
+  container?: GetContainer;
+}
+
+const getContainer = (container: GetContainer): Element | null | undefined =>
+  typeof container === 'function' ? container() : container;
+
+const Portal = ({ children, container }: PortalProps) => {
+  const [containerNode, setContainerNode] = React.useState<Element>();
+
+  useIsomorphicLayoutEffect(() => {
+    setContainerNode(getContainer(container) || document.body);
+  }, [container]);
+
+  return containerNode ? ReactDOM.createPortal(children, containerNode) : null;
+};
+
+export default Portal;

package/src/ConsoleShared/src/components/popper/SimplePopper.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import Portal from './Portal';
+
+interface SimplePopperProps {
+  children: React.ReactNode;
+}
+
+const SimplePopper = ({ children }: SimplePopperProps) => {
+  const openProp = true;
+  const nodeRef = React.useRef<Element>();
+  const popperRef = React.useRef(null);
+  const [isOpen, setOpenState] = React.useState(openProp);
+
+  const setOpen = React.useCallback((newOpen: boolean) => {
+    setOpenState(newOpen);
+  }, []);
+
+  React.useEffect(() => {
+    setOpen(openProp);
+  }, [openProp, setOpen]);
+
+  const onKeyDown = React.useCallback(
+    (e: KeyboardEvent) => {
+      if (e.keyCode === 27) {
+        setOpen(false);
+      }
+    },
+    [setOpen],
+  );
+
+  const onClickOutside = React.useCallback(
+    (e: MouseEvent) => {
+      if (!nodeRef.current || (e.target instanceof Node && !nodeRef.current.contains(e.target))) {
+        setOpen(false);
+      }
+    },
+    [setOpen],
+  );
+
+  const destroy = React.useCallback(() => {
+    if (popperRef.current) {
+      popperRef.current.destroy();
+      document.removeEventListener('keydown', onKeyDown, true);
+      document.removeEventListener('mousedown', onClickOutside, true);
+      document.removeEventListener('touchstart', onClickOutside, true);
+    }
+  }, [onClickOutside, onKeyDown]);
+
+  const initialize = React.useCallback(() => {
+    if (!nodeRef.current || !isOpen) {
+      return;
+    }
+
+    destroy();
+  }, [isOpen, destroy]);
+
+  const nodeRefCallback = React.useCallback(
+    (node) => {
+      nodeRef.current = node;
+      initialize();
+    },
+    [initialize],
+  );
+
+  React.useEffect(() => {
+    initialize();
+  }, [initialize]);
+
+  React.useEffect(() => () => {
+      destroy();
+    }, [destroy]);
+
+  React.useEffect(() => {
+    if (!isOpen) {
+      destroy();
+    }
+  }, [destroy, isOpen]);
+
+  return isOpen ? (
+    <Portal>
+      <div
+        ref={nodeRefCallback}
+        style={{ zIndex: 9999, position: 'absolute', top: 0, left: 0 }}
+        className="pfext-quick-start__base"
+      >
+        {children}
+      </div>
+    </Portal>
+  ) : null;
+};
+
+export default SimplePopper;

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

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

package/src/ConsoleShared/src/components/spotlight/InteractiveSpotlight.tsx

@@ -0,0 +1,58 @@
+import './spotlight.scss';
+import * as React from 'react';
+import { Portal, SimplePopper } from '../popper';
+
+interface InteractiveSpotlightProps {
+  element: Element;
+}
+
+const isInViewport = (elementToCheck: Element) => {
+  const rect = elementToCheck.getBoundingClientRect();
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+};
+
+const InteractiveSpotlight: React.FC<InteractiveSpotlightProps> = ({ element }) => {
+  const { top, bottom, left, right, height, width } = element.getBoundingClientRect();
+  const style: React.CSSProperties = {
+    height,
+    width,
+    top,
+    left,
+    bottom,
+    right,
+  };
+  const [clicked, setClicked] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!clicked) {
+      if (!isInViewport(element)) {
+        element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+      }
+      const handleClick = () => setClicked(true);
+      document.addEventListener('click', handleClick);
+      return () => {
+        document.removeEventListener('click', handleClick);
+      };
+    }
+    return () => {};
+  }, [element, clicked]);
+
+  if (clicked) {
+    return null;
+  }
+
+  return (
+    <Portal>
+      <SimplePopper>
+        <div className="pfext-spotlight pfext-spotlight__element-highlight-animate" style={style} />
+      </SimplePopper>
+    </Portal>
+  );
+};
+
+export default InteractiveSpotlight;

package/src/ConsoleShared/src/components/spotlight/Spotlight.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import InteractiveSpotlight from './InteractiveSpotlight';
+import StaticSpotlight from './StaticSpotlight';
+
+interface SpotlightProps {
+  selector: string;
+  interactive?: boolean;
+}
+
+const Spotlight: React.FC<SpotlightProps> = ({ selector, interactive }) => {
+  // if target element is a hidden one return null
+  const element = React.useMemo(() => {
+    const highlightElement = document.querySelector(selector);
+    let hiddenElement = highlightElement;
+    while (hiddenElement) {
+      const ariaHidden = hiddenElement.getAttribute('aria-hidden');
+      if (ariaHidden === 'true') {
+        return null;
+      }
+      hiddenElement = hiddenElement.parentElement;
+    }
+    return highlightElement;
+  }, [selector]);
+
+  if (!element) {
+    return null;
+  }
+  return interactive ? (
+    <InteractiveSpotlight element={element} />
+  ) : (
+    <StaticSpotlight element={element} />
+  );
+};
+
+export default Spotlight;

package/src/ConsoleShared/src/components/spotlight/StaticSpotlight.tsx

@@ -0,0 +1,32 @@
+import './spotlight.scss';
+import * as React from 'react';
+import { useBoundingClientRect } from '../../hooks';
+import Portal from '../popper/Portal';
+
+interface StaticSpotlightProps {
+  element: Element;
+}
+
+const StaticSpotlight: React.FC<StaticSpotlightProps> = ({ element }) => {
+  const clientRect = useBoundingClientRect(element as HTMLElement);
+  const style: React.CSSProperties = clientRect
+    ? {
+        top: clientRect.top,
+        left: clientRect.left,
+        height: clientRect.height,
+        width: clientRect.width,
+      }
+    : {};
+  return clientRect ? (
+    <Portal>
+      <div className="pf-v5-c-backdrop pfext-spotlight__with-backdrop">
+        <div
+          className="pfext-spotlight pfext-spotlight__element-highlight-noanimate"
+          style={style}
+        />
+      </div>
+    </Portal>
+  ) : null;
+};
+
+export default StaticSpotlight;

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

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

package/src/ConsoleShared/src/components/spotlight/spotlight.scss

@@ -0,0 +1,63 @@
+@keyframes pfext-spotlight-expand {
+  0% {
+    outline-offset: -4px;
+    outline-width: 4px;
+    opacity: 1;
+  }
+  100% {
+    outline-offset: 21px;
+    outline-width: 12px;
+    opacity: 0;
+  }
+}
+
+@keyframes pfext-spotlight-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes pfext-spotlight-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.pfext-spotlight {
+  pointer-events: none;
+  position: absolute;
+  &__with-backdrop {
+    mix-blend-mode: hard-light;
+  }
+  &__element-highlight-noanimate {
+    border: var(--pf-v5-global--BorderWidth--xl) solid var(--pf-v5-global--palette--blue-200);
+    background-color: var(--pf-v5-global--palette--black-500);
+    z-index: 9999;
+  }
+  &__element-highlight-animate {
+    pointer-events: none;
+    position: absolute;
+    box-shadow: inset 0px 0px 0px 4px var(--pf-v5-global--palette--blue-200);
+    opacity: 0;
+    animation: 0.4s pfext-spotlight-fade-in 0s ease-in-out, 5s pfext-spotlight-fade-out 12.8s ease-in-out;
+    animation-fill-mode: forwards;
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      animation: 1.2s pfext-spotlight-expand 1.6s ease-out;
+      animation-fill-mode: forwards;
+      outline: 4px solid var(--pf-v5-global--palette--blue-200);
+      outline-offset: -4px;
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import PopoverStatus from './PopoverStatus';
+import StatusIconAndText from './StatusIconAndText';
+import { StatusComponentProps } from './types';
+
+const GenericStatus: React.FC<GenericStatusProps> = (props) => {
+  const { Icon, children, popoverTitle, title, noTooltip, iconOnly, ...restProps } = props;
+  const renderIcon = iconOnly && !noTooltip ? <Icon title={title} /> : <Icon />;
+  const statusBody = (
+    <StatusIconAndText
+      {...restProps}
+      noTooltip={noTooltip}
+      title={title}
+      iconOnly={iconOnly}
+      icon={renderIcon}
+    />
+  );
+  return React.Children.toArray(children).length ? (
+    <PopoverStatus title={popoverTitle || title} {...restProps} statusBody={statusBody}>
+      {children}
+    </PopoverStatus>
+  ) : (
+    statusBody
+  );
+};
+
+type GenericStatusProps = StatusComponentProps & {
+  Icon: React.ComponentType<{ title?: string }>;
+  children?: React.ReactNode;
+  popoverTitle?: string;
+  noTooltip?: boolean;
+};
+
+export default GenericStatus;

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

@@ -0,0 +1,27 @@
+// TODO: Pull from Patternfly when they add it
+// https://github.com/patternfly/patternfly-design/issues/921#issuecomment-726183814
+import * as React from 'react';
+
+export default (props) => (
+  <svg
+    width="12px"
+    height="13px"
+    {...props}
+    viewBox="0 0 12 13"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g id="icon_notstarted" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <path
+        d="M5.99998569,12.3124969 C7.04685832,12.3124969 8.01560589,12.0507786 8.90622877,11.5273425 C9.79685164,11.0039064 10.5038813,10.2968767 11.0273175,9.4062538 C11.5507536,8.51563092 11.8124718,7.54688335 11.8124718,6.50001073 C11.8124718,5.45313811 11.5507536,4.48439053 11.0273175,3.59376766 C10.5038813,2.70314478 9.79685164,1.9961151 8.90622877,1.47267896 C8.01560589,0.949242832 7.04685832,0.687524587 5.99998569,0.687524587 C4.95311307,0.687524587 3.9843655,0.949242832 3.09374262,1.47267896 C2.20311975,1.9961151 1.49609006,2.70314478 0.972653931,3.59376766 C0.449217798,4.48439053 0.187499553,5.45313811 0.187499553,6.50001073 C0.187499553,7.54688335 0.449217798,8.51563092 0.972653931,9.4062538 C1.49609006,10.2968767 2.20311975,11.0039064 3.09374262,11.5273425 C3.9843655,12.0507786 4.95311307,12.3124969 5.99998569,12.3124969 Z M5.99998569,11.1874996 C5.15623771,11.1874996 4.37498969,10.9765626 3.65624128,10.5546886 C2.93749288,10.1328146 2.36718186,9.56250355 1.94530786,8.84375514 C1.52343387,8.12500674 1.31249687,7.34375872 1.31249687,6.50001073 C1.31249687,5.65626274 1.52343387,4.87501472 1.94530786,4.15626632 C2.36718186,3.43751791 2.93749288,2.86720689 3.65624128,2.4453329 C4.37498969,2.0234589 5.15623771,1.8125219 5.99998569,1.8125219 C6.84373368,1.8125219 7.6249817,2.0234589 8.34373011,2.4453329 C9.06247851,2.86720689 9.63278953,3.43751791 10.0546635,4.15626632 C10.4765375,4.87501472 10.6874745,5.65626274 10.6874745,6.50001073 C10.6874745,7.34375872 10.4765375,8.12500674 10.0546635,8.84375514 C9.63278953,9.56250355 9.06247851,10.1328146 8.34373011,10.5546886 C7.6249817,10.9765626 6.84373368,11.1874996 5.99998569,11.1874996 Z"
+        id="Circle"
+        fill="#6A6E73"
+        fillRule="nonzero"
+      />
+      <circle id="Oval" fill="#6A6E73" cx="3" cy="6.5" r="1" />
+      <circle id="Oval-Copy-2" fill="#6A6E73" cx="6" cy="6.5" r="1" />
+      <circle id="Oval-Copy-3" fill="#6A6E73" cx="9" cy="6.5" r="1" />
+    </g>
+  </svg>
+);

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Button, Popover, PopoverPosition } from '@patternfly/react-core';
+
+const PopoverStatus: React.FC<PopoverStatusProps> = ({
+  hideHeader,
+  children,
+  isVisible = null,
+  statusBody,
+  title,
+  onHide,
+  onShow,
+}) => (
+  <Popover
+    position={PopoverPosition.right}
+    headerContent={hideHeader ? null : title}
+    bodyContent={children}
+    aria-label={title}
+    onHide={onHide}
+    onShow={onShow}
+    isVisible={isVisible}
+  >
+    <Button variant="link" isInline>
+      {statusBody}
+    </Button>
+  </Popover>
+);
+
+interface PopoverStatusProps {
+  children: React.ReactNode;
+  statusBody: React.ReactNode;
+  onHide?: (event: MouseEvent | KeyboardEvent) => void;
+  onShow?: (event: MouseEvent | KeyboardEvent) => void;
+  title?: string;
+  hideHeader?: boolean;
+  isVisible?: boolean;
+  shouldClose?: (hideFunction: any) => void;
+}
+
+export default PopoverStatus;

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import SyncAltIcon from '@patternfly/react-icons/dist/js/icons/sync-alt-icon';
+import { DASH } from '../../constants';
+import { SuccessStatus } from './statuses';
+import StatusIconAndText from './StatusIconAndText';
+import { StatusComponentProps } from './types';
+
+export const Status: React.FC<StatusProps> = ({
+  status,
+  title,
+  iconOnly,
+  noTooltip,
+  className,
+}) => {
+  const statusProps = { title: title || status, iconOnly, noTooltip, className };
+  switch (status) {
+    case 'In Progress':
+      return <StatusIconAndText {...statusProps} icon={<SyncAltIcon />} />;
+
+    case 'Complete':
+      return <SuccessStatus {...statusProps} />;
+
+    default:
+      return <>{status || DASH}</>;
+  }
+};
+
+export const StatusIcon: React.FC<StatusIconProps> = ({ status }) => (
+  <Status status={status} iconOnly />
+);
+
+interface StatusIconProps {
+  status: string;
+}
+
+type StatusProps = StatusComponentProps & {
+  status: string;
+};

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import { CamelCaseWrap } from '@console/internal/components/utils';
+import { DASH } from '../../constants';
+import { StatusComponentProps } from './types';
+
+type StatusIconAndTextProps = StatusComponentProps & {
+  icon?: React.ReactElement;
+  spin?: boolean;
+};
+
+const StatusIconAndText: React.FC<StatusIconAndTextProps> = ({
+  icon,
+  title,
+  spin,
+  iconOnly,
+  noTooltip,
+  className,
+}) => {
+  if (!title) {
+    return <>{DASH}</>;
+  }
+
+  return (
+    <span
+      className={css('pfext-icon-and-text', className)}
+      title={iconOnly && !noTooltip ? title : undefined}
+    >
+      {icon &&
+        React.cloneElement(icon, {
+          className: css(
+            spin && 'fa-spin',
+            icon.props.className,
+            !iconOnly && 'pfext-icon-and-text__icon pfext-icon-flex-child',
+          ),
+        })}
+      {!iconOnly && <CamelCaseWrap value={title} dataTest="status-text" />}
+    </span>
+  );
+};
+
+export default StatusIconAndText;