@patternfly/quickstarts 0.0.0

package/src/ConsoleInternal/components/catalog/_catalog.scss

@@ -0,0 +1,392 @@
+@use 'sass:math';
+
+// frontend/public/style/_vars.scss
+$font-size-base: 14px;
+$pfext-m-catalog-tile-height: 100%;
+$pfext-m-catalog-tile-width: 260px;
+
+$catalog-capability-level-icon-left: -20px;
+$catalog-capability-level-icon-top: 4px;
+$catalog-capability-level-inactive-color: var(--pf-v5-global--Color--400);
+$catalog-item-icon-size-lg: 40px;
+$catalog-item-icon-size-sm: 24px;
+$pfext-modal-ignore-warning-icon-width: 30px;
+$catalog-tile-width: $pfext-m-catalog-tile-width;
+
+// reset font size back to 13px since console h5 font size is 14px
+.catalog-item-header-pf-subtitle {
+  font-size: 13px;
+}
+
+.catalog-tile-pf-body .catalog-tile-pf-subtitle {
+  font-size: ($font-size-base - 1);
+}
+
+.pfext-catalog {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  min-width: 515px; // in order to accommodate filters and tiles at mobile
+}
+
+.pfext-catalog-tile-view {
+  display: flex;
+  flex-wrap: wrap;
+  --pf-v5-l-gallery--GridTemplateColumns: repeat(auto-fill, 260px) !important;
+}
+
+.pfext-catalog__body {
+  min-width: 575px; // Minimum shrinkable width of .pfext-catalog child elements => 15 + ((220 + 15) + (30 + 250 + 30)) + 15
+  @media (min-width: $screen-sm-min) {
+    min-width: 590px; // Left margin 30 instead of 15
+  }
+}
+
+.pfext-catalog-item-details {
+  display: flex;
+  margin: 0 0 10px;
+
+  &__description {
+    white-space: pre-wrap;
+  }
+
+  &__kind-label {
+    font-weight: var(--pf-v5-global--FontWeight--bold);
+  }
+
+  &__name {
+    margin-bottom: 10px;
+  }
+
+  &__provider,
+  &__tags {
+    margin-bottom: 5px;
+  }
+
+  &__tag {
+    color: $color-pf-black-600;
+    font-size: ($font-size-base - 1);
+    margin-right: 5px;
+    text-transform: uppercase;
+  }
+}
+
+.pfext-catalog-item-icon {
+  padding-right: 10px;
+
+  &__icon {
+    font-size: $catalog-item-icon-size-sm;
+
+    &--large {
+      font-size: $catalog-item-icon-size-lg;
+    }
+  }
+
+  &__img {
+    max-height: $catalog-item-icon-size-sm;
+    max-width: $catalog-item-icon-size-sm;
+
+    &[src$='.svg'] {
+      width: $catalog-item-icon-size-sm;
+    }
+
+    &--large {
+      max-height: $catalog-item-icon-size-lg;
+      max-width: $catalog-item-icon-size-lg;
+
+      &[src$='.svg'] {
+        width: $catalog-item-icon-size-lg;
+      }
+    }
+  }
+}
+
+.pfext-catalog-page {
+  background: $color-pf-white;
+  border: 1px solid var(--pf-v5-global--BorderColor--300);
+  display: flex;
+  flex: 1;
+  padding-top: math.div($grid-gutter-width, 2);
+
+  &--with-sidebar {
+    margin: 0 math.div($grid-gutter-width, 2);
+    padding-bottom: math.div($grid-gutter-width, 2);
+  }
+
+  &__btn-group__group-by {
+    display: inline;
+    margin-left: var(--pf-v5-global--spacer--md);
+  }
+
+  &__content {
+    flex: 1 1 auto;
+    overflow: hidden;
+  }
+
+  &__description {
+    margin-top: -10px;
+    padding: 0 math.div($grid-gutter-width, 2) 10px;
+    @media (min-width: $grid-float-breakpoint) {
+      padding-left: $grid-gutter-width;
+      padding-right: $grid-gutter-width;
+    }
+  }
+
+  &__filter {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__filter-toggle {
+    margin-top: 5px;
+  }
+
+  &__grid {
+    background-color: $color-pf-black-150;
+  }
+
+  &__grouped-items {
+    margin-bottom: var(--pf-v5-global--spacer--md);
+  }
+
+  &__group-title {
+    margin-bottom: var(--pf-v5-global--spacer--sm);
+  }
+
+  &__header {
+    margin: 0 $grid-gutter-width 0 0;
+  }
+
+  &__heading {
+    font-size: 16px;
+    margin: 0 0 20px 30px;
+  }
+
+  &__hint {
+    margin: 0 0 var(--pf-v5-global--spacer--md) 0;
+  }
+
+  &__input {
+    display: inline-flex !important;
+    margin: 0 0 20px 30px;
+    width: auto !important;
+  }
+
+  &__sort {
+    display: inline;
+    margin-left: var(--pf-v5-global--spacer--md);
+  }
+
+  &__num-items {
+    font-weight: var(--pf-v5-global--FontWeight--bold);
+    padding: 0 0 20px;
+  }
+
+  &__info-icon {
+    vertical-align: middle;
+    color: #6a6e73;
+    &:hover {
+      color: #151515;
+    }
+  }
+
+  // Enable scrolling on the modal
+  &__overlay {
+    border: 0 !important; // Collapse default PF4 modal border-width
+
+    .modal-body .pfext-hint-block {
+      margin-bottom: 10px;
+    }
+
+    .properties-side-panel-pf {
+      flex: 0 0 auto;
+    }
+  }
+
+  &__overlay--right {
+    bottom: 0;
+    padding: 0 !important;
+    right: 0;
+    top: 4.75rem; // --pf-v5-c-page__header--MinHeight
+
+    .pf-v5-c-modal-box__body {
+      // Required to position scroll shadows correctly on Chrome
+      display: flex;
+      flex-direction: column;
+      margin: 0 !important;
+      padding: 0;
+    }
+
+    .modal-body-inner-shadow-covers {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+    }
+
+    h1 {
+      white-space: normal;
+    }
+  }
+
+  &__overlay-action {
+    align-items: baseline;
+    display: inline-flex !important;
+    margin: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--sm) 0 0;
+    overflow-x: hidden;
+  }
+
+  &__overlay-action-icon {
+    flex-shrink: 0;
+    font-size: $font-size-base;
+    margin-left: 6px;
+  }
+
+  &__overlay-action-label {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__overlay-actions {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: var(--pf-v5-global--spacer--md);
+    white-space: normal;
+  }
+
+  &__overlay-header {
+    margin-bottom: var(--pf-v5-global--spacer--md);
+  }
+
+  &__overlay-body {
+    margin: 0;
+    padding-left: var(--pf-v5-global--spacer--lg);
+    padding-right: var(--pf-v5-global--spacer--lg);
+    padding-top: var(--pf-v5-global--spacer--md);
+    @media (min-width: $screen-sm-min) {
+      display: flex;
+    }
+  }
+
+  &__overlay-description {
+    margin: 20px 0 0;
+    white-space: pre-wrap;
+    // TODO: find fix for urls that don't wrap
+    // fix below causes undesirable wrapping on non-urls
+    // word-break: break-all;
+    h1,
+    h2,
+    h3 {
+      color: #333; // same color as styles hardcoded in markdown text component
+    }
+
+    h2 {
+      font-size: 20px;
+    }
+
+    p,
+    li,
+    ol {
+      color: #333; // same color as styles hardcoded in markdown text component
+      font-size: $font-size-base !important;
+    }
+
+    @media (min-width: $screen-sm-min) {
+      flex: 1 1 auto;
+      margin-left: 20px;
+      margin-top: 0;
+    }
+  }
+
+  &__tabs {
+    flex: 0 0 220px;
+    margin: 0 math.div($grid-gutter-width, 2) 0 0;
+  }
+}
+
+@media screen and (min-width: $screen-sm) {
+  .pf-v5-c-modal-box.pfext-catalog-page__overlay {
+    width: 600px;
+  }
+}
+
+@media screen and (min-width: $screen-md) {
+  .pf-v5-c-modal-box.pfext-catalog-page__overlay {
+    width: 900px;
+  }
+}
+
+.pfext-catalog-tab__empty {
+  color: $color-pf-black-600;
+}
+
+.pfext-modal-ignore-warning {
+  height: initial;
+
+  &__checkbox.checkbox {
+    margin-bottom: 0;
+    padding-top: 15px;
+  }
+  &__content {
+    display: flex;
+  }
+  &__icon {
+    font-size: $pfext-modal-ignore-warning-icon-width;
+    margin-right: 15px;
+    // Avoid the dialog shifting when the icon loads.
+    min-width: $pfext-modal-ignore-warning-icon-width;
+  }
+  &__link {
+    display: block;
+    margin: 10px 0;
+  }
+}
+
+.properties-side-panel-pf-property-label {
+  font-size: ($font-size-base - 1);
+}
+
+.properties-side-panel-pf-property-value__capability-level {
+  color: $catalog-capability-level-inactive-color;
+  margin-bottom: 5px;
+  position: relative;
+
+  &--active {
+    color: inherit;
+
+    &::before {
+      display: none; // hide empty circle since icon is present
+    }
+  }
+
+  &::before {
+    // empty circle
+    border: 1px solid $catalog-capability-level-inactive-color;
+    border-radius: 10px;
+    content: '';
+    height: 14px;
+    left: $catalog-capability-level-icon-left;
+    position: absolute;
+    top: $catalog-capability-level-icon-top;
+    width: 14px;
+  }
+
+  &:not(:last-child)::after {
+    // pipe after circle
+    background: $catalog-capability-level-inactive-color;
+    content: '';
+    height: 6px;
+    left: -13px;
+    position: absolute;
+    top: 21px;
+    width: 1px;
+  }
+}
+
+.properties-side-panel-pf-property-value__capability-level-icon {
+  left: $catalog-capability-level-icon-left;
+  position: absolute;
+  top: $catalog-capability-level-icon-top;
+}
+
+.properties-side-panel-pf-property-value__capability-levels {
+  list-style: none;
+}

package/src/ConsoleInternal/components/markdown-view.tsx

@@ -0,0 +1,276 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import { Converter } from 'showdown';
+import { useForceRender } from '@console/shared';
+import { QuickStartContext, QuickStartContextValues } from '../../utils/quick-start-context';
+import './_markdown-view.scss';
+
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const DOMPurify = require('dompurify');
+
+// const tableTags = ['table', 'thead', 'tbody', 'tr', 'th', 'td'];
+
+interface ShowdownExtension {
+  type: string;
+  regex?: RegExp;
+  replace?: (...args: any[]) => string;
+}
+
+export const markdownConvert = (markdown, extensions?: ShowdownExtension[]) => {
+  const converter = new Converter({
+    tables: true,
+    openLinksInNewWindow: true,
+    strikethrough: true,
+    emoji: false,
+  });
+
+  if (extensions) {
+    converter.addExtension(extensions);
+  }
+
+  DOMPurify.addHook('beforeSanitizeElements', function (node) {
+    // nodeType 1 = element type
+
+    // transform anchor tags
+    if (node.nodeType === 1 && node.nodeName.toLowerCase() === 'a') {
+      node.setAttribute('rel', 'noopener noreferrer');
+      return node;
+    }
+
+    // add PF class to ul and ol lists
+    if (
+      node.nodeType === 1 &&
+      (node.nodeName.toLowerCase() === 'ul' || node.nodeName.toLowerCase() === 'ol')
+    ) {
+      node.setAttribute('class', 'pf-v5-c-list');
+      return node;
+    }
+  });
+
+  // Add a hook to make all links open a new window
+  DOMPurify.addHook('afterSanitizeAttributes', function (node) {
+    // set all elements owning target to target=_blank
+    if ('target' in node) {
+      node.setAttribute('target', '_blank');
+    }
+    // set non-HTML/MathML links to xlink:show=new
+    if (
+      !node.hasAttribute('target') &&
+      (node.hasAttribute('xlink:href') || node.hasAttribute('href'))
+    ) {
+      node.setAttribute('xlink:show', 'new');
+    }
+  });
+
+  return DOMPurify.sanitize(converter.makeHtml(markdown), {
+    USE_PROFILES: {
+      html: true,
+      svg: true,
+    },
+  });
+};
+
+interface SyncMarkdownProps {
+  content?: string;
+  emptyMsg?: string;
+  exactHeight?: boolean;
+  extensions?: ShowdownExtension[];
+  renderExtension?: (contentDocument: Document, rootSelector: string) => React.ReactNode;
+  inline?: boolean;
+  className?: string;
+}
+
+type InnerSyncMarkdownProps = Pick<SyncMarkdownProps, 'renderExtension' | 'exactHeight'> & {
+  markup: string;
+  isEmpty: boolean;
+  className?: string;
+};
+
+export const SyncMarkdownView: React.FC<SyncMarkdownProps> = ({
+  content,
+  emptyMsg,
+  extensions,
+  renderExtension,
+  exactHeight,
+  inline,
+  className,
+}) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  const markup = React.useMemo(
+    () => markdownConvert(content || emptyMsg || getResource('Not available'), extensions),
+    [content, emptyMsg, extensions, getResource],
+  );
+  const innerProps: InnerSyncMarkdownProps = {
+    renderExtension: extensions?.length > 0 ? renderExtension : undefined,
+    exactHeight,
+    markup,
+    isEmpty: !content,
+    className,
+  };
+  return inline ? <InlineMarkdownView {...innerProps} /> : <IFrameMarkdownView {...innerProps} />;
+};
+
+const uniqueId = (function () {
+  let num = 0;
+  return function (prefix) {
+    const prefixStr = String(prefix) || '';
+    num += 1;
+    return prefixStr + num;
+  };
+})();
+
+interface RenderExtensionProps {
+  renderExtension: (contentDocument: Document, rootSelector: string) => React.ReactNode;
+  selector: string;
+  markup: string;
+  docContext?: Document;
+}
+
+const RenderExtension: React.FC<RenderExtensionProps> = ({
+  renderExtension,
+  selector,
+  markup,
+  docContext,
+}) => {
+  const forceRender = useForceRender();
+  const markupRef = React.useRef<string>(null);
+  const shouldRenderExtension = React.useCallback(() => {
+    if (markupRef.current === markup) {
+      return true;
+    }
+    markupRef.current = markup;
+    return false;
+  }, [markup]);
+  /**
+   * During a render cycle in which markup changes, renderExtension receives an old copy of document
+   * because react is still updating the dom using `dangerouslySetInnerHTML` with latest markdown markup
+   * which causes the component rendered by renderExtension to receive old copy of document
+   * use forceRender to delay the rendering of extension by one render cycle
+   */
+  React.useEffect(() => {
+    if (renderExtension) {
+      forceRender();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [markup]);
+  return (
+    <>{shouldRenderExtension() ? renderExtension?.(docContext ?? document, selector) : null}</>
+  );
+};
+
+const InlineMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
+  markup,
+  isEmpty,
+  renderExtension,
+  className,
+}) => {
+  const id = React.useMemo(() => uniqueId('markdown'), []);
+  return (
+    <div className={css('pfext-markdown-view', { 'is-empty': isEmpty }, className)} id={id}>
+      <div dangerouslySetInnerHTML={{ __html: markup }} />
+      {renderExtension && (
+        <RenderExtension renderExtension={renderExtension} selector={`#${id}`} markup={markup} />
+      )}
+    </div>
+  );
+};
+
+const IFrameMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
+  exactHeight,
+  markup,
+  isEmpty,
+  renderExtension,
+  className,
+}) => {
+  const [frame, setFrame] = React.useState<HTMLIFrameElement>();
+  const [loaded, setLoaded] = React.useState(false);
+  const updateTimeoutHandle = React.useRef<NodeJS.Timeout>();
+
+  const updateDimensions = React.useCallback(() => {
+    if (!frame?.contentWindow?.document.body.firstChild) {
+      return;
+    }
+    frame.style.height = `${frame.contentWindow.document.body.firstElementChild.scrollHeight}px`;
+
+    // Let the new height take effect, then reset again once we recompute
+    updateTimeoutHandle.current = setTimeout(() => {
+      if (exactHeight) {
+        frame.style.height = `${frame.contentWindow.document.body.firstElementChild.scrollHeight}px`;
+      } else {
+        // Increase by 15px for the case where a horizontal scrollbar might appear
+        frame.style.height = `${
+          frame.contentWindow.document.body.firstElementChild.scrollHeight + 15
+        }px`;
+      }
+    });
+  }, [frame, exactHeight]);
+
+  React.useEffect(
+    () => () => {
+      clearTimeout(updateTimeoutHandle.current);
+    },
+    [],
+  );
+
+  const onLoad = React.useCallback(() => {
+    updateDimensions();
+    setLoaded(true);
+  }, [updateDimensions]);
+
+  // Find the app's stylesheets and inject them into the frame to ensure consistent styling.
+  const filteredLinks = Array.from(document.getElementsByTagName('link')).filter((l) =>
+    l.href.includes('app-bundle'),
+  );
+
+  const linkRefs = filteredLinks.reduce(
+    (refs, link) => `${refs}
+    <link rel="stylesheet" href="${link.href}">`,
+    '',
+  );
+
+  const contents = `
+  ${linkRefs}
+  <style type="text/css">
+  body {
+    background-color: transparent !important;
+    color: ${isEmpty ? '#999' : '#333'};
+    font-family: var(--pf-v5-global--FontFamily--sans-serif);
+    min-width: auto !important;
+  }
+  table {
+    display: block;
+    margin-bottom: 11.5px;
+    overflow-x: auto;
+  }
+  td,
+  th {
+    border-bottom: 1px solid #ededed;
+    padding: 10px;
+    vertical-align: top;
+  }
+  th {
+    padding-top: 0;
+  }
+  </style>
+  <body class="pf-m-redhat-font"><div style="overflow-y: auto;">${markup}</div></body>`;
+  return (
+    <>
+      <iframe
+        sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin"
+        srcDoc={contents}
+        style={{ border: '0px', display: 'block', width: '100%', height: '0' }}
+        ref={(r) => setFrame(r)}
+        onLoad={() => onLoad()}
+        className={className}
+      />
+      {loaded && frame && renderExtension && (
+        <RenderExtension
+          markup={markup}
+          selector={''}
+          renderExtension={renderExtension}
+          docContext={frame.contentDocument}
+        />
+      )}
+    </>
+  );
+};

package/src/ConsoleInternal/components/utils/_status-box.scss

@@ -0,0 +1,58 @@
+.pfext-status-box {
+  padding: 40px 20px;
+
+  &__loading-message {
+    margin-top: var(--pf-v5-global--spacer--sm);
+  }
+}
+
+.pfext-status-box--loading {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  min-height: 50px;
+  width: 100%;
+  flex-direction: column;
+}
+
+.pfext-m-loader {
+  min-width: 18px;
+}
+
+.pfext-m-loader-dot__one,
+.pfext-m-loader-dot__two,
+.pfext-m-loader-dot__three {
+  animation-delay: 0;
+  animation-direction: normal;
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: bouncedelay;
+  animation-play-state: running;
+  animation-timing-function: ease-in-out;
+  background: #419eda;
+  border-radius: 100%;
+  display: inline-block;
+  height: 6px;
+  width: 6px;
+}
+
+.pfext-m-loader-dot__one {
+  animation-delay: -0.32s;
+}
+
+.pfext-m-loader-dot__two {
+  animation-delay: -0.16s;
+}
+
+@keyframes bouncedelay {
+  0%,
+  80%,
+  100% {
+    transform: scale(0.25, 0.25);
+  }
+  40% {
+    transform: scale(1, 1);
+  }
+}