@patternfly/quickstarts 2.2.3 → 2.2.4

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

@@ -0,0 +1,305 @@
+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'];
+
+type 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-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,
+    },
+    // ALLOWED_TAGS: [
+    //   'b',
+    //   'i',
+    //   'strike',
+    //   's',
+    //   'del',
+    //   'em',
+    //   'strong',
+    //   'a',
+    //   'p',
+    //   'h1',
+    //   'h2',
+    //   'h3',
+    //   'h4',
+    //   'ul',
+    //   'ol',
+    //   'li',
+    //   'code',
+    //   'pre',
+    //   'button',
+    //   ...tableTags,
+    //   'div',
+    //   'img',
+    //   'span',
+    //   'svg',
+    // ],
+    // ALLOWED_ATTR: ['href', 'target', 'rel', 'class', 'src', 'alt', 'id'],
+    // ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto|didact):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i,
+  });
+};
+
+type SyncMarkdownProps = {
+  content?: string;
+  emptyMsg?: string;
+  exactHeight?: boolean;
+  /* truncateContent?: boolean; */
+  extensions?: ShowdownExtension[];
+  renderExtension?: (contentDocument: HTMLDocument, 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> = ({
+  // truncateContent,
+  content,
+  emptyMsg,
+  extensions,
+  renderExtension,
+  exactHeight,
+  inline,
+  className,
+}) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  const markup = React.useMemo(() => {
+    return 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;
+  };
+})();
+
+type RenderExtensionProps = {
+  renderExtension: (contentDocument: HTMLDocument, rootSelector: string) => React.ReactNode;
+  selector: string;
+  markup: string;
+  docContext?: HTMLDocument;
+};
+
+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<number>();
+
+  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
+    // @ts-ignore
+    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-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-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);
+  }
+}

package/src/ConsoleInternal/components/utils/camel-case-wrap.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+const MEMO = {};
+
+export const CamelCaseWrap: React.SFC<CamelCaseWrapProps> = ({ value, dataTest }) => {
+  if (!value) {
+    return '-';
+  }
+
+  if (MEMO[value]) {
+    return MEMO[value];
+  }
+
+  // Add word break points before capital letters (but keep consecutive capital letters together).
+  const words = value.match(/[A-Z]+[^A-Z]*|[^A-Z]+/g);
+  const rendered = (
+    <span data-test={dataTest}>
+      {words.map((word, i) => (
+        <React.Fragment key={i}>
+          {word}
+          {i !== words.length - 1 && <wbr />}
+        </React.Fragment>
+      ))}
+    </span>
+  );
+  MEMO[value] = rendered;
+  return rendered;
+};
+
+export type CamelCaseWrapProps = {
+  value: string;
+  dataTest?: string;
+};

package/src/ConsoleInternal/components/utils/index.tsx

@@ -0,0 +1,3 @@
+export * from './status-box';
+export * from './router';
+export * from './camel-case-wrap';

package/src/ConsoleInternal/components/utils/router.ts

@@ -0,0 +1,47 @@
+import { History, createBrowserHistory, createMemoryHistory } from 'history';
+import { QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY } from '../../../utils/const';
+
+type AppHistory = History & { pushPath: History['push'] };
+
+let createHistory;
+
+try {
+  if (process.env.NODE_ENV === 'test') {
+    // Running in node. Can't use browser history
+    createHistory = createMemoryHistory;
+  } else {
+    createHistory = createBrowserHistory;
+  }
+} catch (unused) {
+  createHistory = createBrowserHistory;
+}
+
+export const history: AppHistory = createHistory();
+
+export const removeQueryArgument = (k: string) => {
+  const params = new URLSearchParams(window.location.search);
+  if (params.has(k)) {
+    params.delete(k);
+    const url = new URL(window.location.href);
+    // @ts-ignore
+    history.replace(`${url.pathname}?${params.toString()}${url.hash}`);
+  }
+};
+
+export const setQueryArgument = (k: string, v: string) => {
+  if (!v) {
+    return removeQueryArgument(k);
+  }
+  const params = new URLSearchParams(window.location.search);
+  if (params.get(k) !== v) {
+    params.set(k, v);
+    const url = new URL(window.location.href);
+    // @ts-ignore
+    history.replace(`${url.pathname}?${params.toString()}${url.hash}`);
+  }
+};
+
+export const clearFilterParams = () => {
+  removeQueryArgument(QUICKSTART_SEARCH_FILTER_KEY);
+  removeQueryArgument(QUICKSTART_STATUS_FILTER_KEY);
+};

package/src/ConsoleInternal/components/utils/status-box.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import { QuickStartContext, QuickStartContextValues } from '../../../utils/quick-start-context';
+
+export const Box: React.FC<BoxProps> = ({ children, className }) => (
+  <div className={css('pfext-status-box', className)}>{children}</div>
+);
+
+export const Loading: React.FC<LoadingProps> = ({ className }) => (
+  <div className={css('pfext-m-loader', className)}>
+    <div className="pfext-m-loader-dot__one" />
+    <div className="pfext-m-loader-dot__two" />
+    <div className="pfext-m-loader-dot__three" />
+  </div>
+);
+Loading.displayName = 'Loading';
+
+export const LoadingBox: React.FC<LoadingBoxProps> = ({ className, message }) => (
+  <Box className={css('pfext-status-box--loading', className)}>
+    <Loading />
+    {message && <div className="pfext-status-box__loading-message">{message}</div>}
+  </Box>
+);
+LoadingBox.displayName = 'LoadingBox';
+
+export const EmptyBox: React.FC<EmptyBoxProps> = ({ label }) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  return (
+    <Box>
+      <div data-test="empty-message" className="text-center">
+        {label
+          ? getResource('No {{label}} found').replace('{{label}}', label)
+          : getResource('Not found')}
+      </div>
+    </Box>
+  );
+};
+EmptyBox.displayName = 'EmptyBox';
+
+type BoxProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+type LoadErrorProps = {
+  label: string;
+  className?: string;
+  message?: string;
+  canRetry?: boolean;
+};
+
+type LoadingProps = {
+  className?: string;
+};
+
+type LoadingBoxProps = {
+  className?: string;
+  message?: string;
+};
+
+type EmptyBoxProps = {
+  label?: string;
+};
+
+type MsgBoxProps = {
+  title?: string;
+  detail?: React.ReactNode;
+  className?: string;
+};
+
+type AccessDeniedProps = {
+  message?: string;
+};
+
+type DataProps = {
+  NoDataEmptyMsg?: React.ComponentType;
+  EmptyMsg?: React.ComponentType;
+  label?: string;
+  unfilteredData?: any;
+  data?: any;
+  children?: React.ReactNode;
+};
+
+type StatusBoxProps = {
+  label?: string;
+  loadError?: any;
+  loaded?: boolean;
+  data?: any;
+  unfilteredData?: any;
+  skeleton?: React.ReactNode;
+  NoDataEmptyMsg?: React.ComponentType;
+  EmptyMsg?: React.ComponentType;
+  children?: React.ReactNode;
+};

package/src/ConsoleInternal/module/k8s/types.ts

@@ -0,0 +1,53 @@
+export type AccessReviewResourceAttributes = {
+  group?: string;
+  resource?: string;
+  subresource?: string;
+  verb?: K8sVerb;
+  name?: string;
+  namespace?: string;
+};
+
+export type K8sVerb =
+  | 'create'
+  | 'get'
+  | 'list'
+  | 'update'
+  | 'patch'
+  | 'delete'
+  | 'deletecollection'
+  | 'watch';
+
+export type OwnerReference = {
+  name: string;
+  kind: string;
+  uid: string;
+  apiVersion: string;
+  controller?: boolean;
+  blockOwnerDeletion?: boolean;
+};
+
+export type ObjectMetadata = {
+  name: string;
+  annotations?: { [key: string]: string };
+  clusterName?: string;
+  creationTimestamp?: string;
+  deletionGracePeriodSeconds?: number;
+  deletionTimestamp?: string;
+  finalizers?: string[];
+  generateName?: string;
+  generation?: number;
+  labels?: { [key: string]: string };
+  managedFields?: any[];
+  namespace?: string;
+  ownerReferences?: OwnerReference[];
+  resourceVersion?: string;
+  uid?: string;
+  // language can be: en
+  language?: string;
+  // country can be: US
+  country?: string;
+  // locale is a combination of language and country, for example: en_US
+  locale?: string;
+  // anything else to custom define
+  [key: string]: any;
+};

package/src/ConsoleShared/index.ts

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

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

@@ -0,0 +1,7 @@
+export * from './modal';
+export * from './spotlight';
+export * from './markdown-highlight-extension';
+export * from './markdown-extensions';
+export * from './popper';
+export * from './utils';
+export * from './status';

package/src/ConsoleShared/src/components/layout/PageLayout.scss

@@ -0,0 +1,29 @@
+.pfext-page-layout {
+  &__content {
+    padding: var(--pf-global--spacer--lg);
+    flex: 1;
+  }
+
+  &__header {
+    padding-top: 1px;
+    background-color: var(--pf-global--BackgroundColor--light-100);
+  }
+
+  &__hint {
+    padding-left: var(--pf-global--spacer--lg);
+    padding-right: var(--pf-global--spacer--lg);
+    padding-bottom: var(--pf-global--spacer--md);
+    font-size: 14px;
+  }
+
+  &__title {
+    padding-left: var(--pf-global--spacer--lg);
+    padding-right: var(--pf-global--spacer--lg);
+    font-size: var(--pf-global--FontSize--2xl);
+    margin-top: 23px;
+    margin-bottom: 11.5px;
+    font-family: var(--pf-global--FontFamily--heading--sans-serif);
+    font-weight: var(--pf-global--FontWeight--normal);
+    line-height: 1.1;
+  }
+}