@patternfly/quickstarts 2.2.1 → 2.2.4

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;
+  }
+}

package/src/ConsoleShared/src/components/markdown-extensions/MarkdownCopyClipboard.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { Tooltip } from '@patternfly/react-core';
+import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
+import { useEventListener } from '../../hooks';
+import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
+
+type CopyClipboardProps = {
+  element: HTMLElement;
+  rootSelector: string;
+  docContext: HTMLDocument;
+};
+
+export const CopyClipboard: React.FC<CopyClipboardProps> = ({
+  element,
+  rootSelector,
+  docContext,
+}) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  const [showSuccessContent, setShowSuccessContent] = React.useState<boolean>(false);
+  const textToCopy = React.useMemo(() => {
+    const copyTextId = element.getAttribute(MARKDOWN_COPY_BUTTON_ID);
+    return (docContext.querySelector(
+      `${rootSelector} [${MARKDOWN_SNIPPET_ID}="${copyTextId}"]`,
+    ) as HTMLElement).innerText;
+  }, [element, docContext, rootSelector]);
+
+  useEventListener(
+    element,
+    'click',
+    React.useCallback(() => {
+      navigator.clipboard
+        .writeText(textToCopy)
+        .then(() => {
+          setShowSuccessContent(true);
+        })
+        .catch(() => {});
+    }, [textToCopy]),
+  );
+
+  useEventListener(
+    element,
+    'mouseleave',
+    React.useCallback(() => {
+      setShowSuccessContent(false);
+    }, []),
+  );
+
+  return showSuccessContent ? (
+    <Tooltip
+      key="after-copy"
+      isVisible
+      reference={() => element as HTMLElement}
+      content={getResource('Successfully copied to clipboard!')}
+      className="pfext-quick-start__base"
+    />
+  ) : (
+    <Tooltip
+      key="before-copy"
+      reference={() => element as HTMLElement}
+      content={getResource('Copy to clipboard')}
+      className="pfext-quick-start__base"
+    />
+  );
+};
+
+type MarkdownCopyClipboardProps = {
+  docContext: HTMLDocument;
+  rootSelector: string;
+};
+
+const MarkdownCopyClipboard: React.FC<MarkdownCopyClipboardProps> = ({
+  docContext,
+  rootSelector,
+}) => {
+  const elements = docContext.querySelectorAll(`${rootSelector} [${MARKDOWN_COPY_BUTTON_ID}]`);
+  return elements.length > 0 ? (
+    <>
+      {Array.from(elements).map((elm) => {
+        const attributeValue = elm.getAttribute(MARKDOWN_COPY_BUTTON_ID);
+        return (
+          <CopyClipboard
+            key={attributeValue}
+            element={elm as HTMLElement}
+            rootSelector={rootSelector}
+            docContext={docContext}
+          />
+        );
+      })}
+    </>
+  ) : null;
+};
+
+export default MarkdownCopyClipboard;

package/src/ConsoleShared/src/components/markdown-extensions/__tests__/MarkdownCopyClipboard.spec.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import MarkdownCopyClipboard, { CopyClipboard } from '../MarkdownCopyClipboard';
+import { htmlDocumentForCopyClipboard } from './test-data';
+
+describe('MarkdownCopyClipboard', () => {
+  beforeAll(() => {
+    document.body.innerHTML = htmlDocumentForCopyClipboard;
+  });
+  it('should render null if no element is found', () => {
+    const wrapper = shallow(
+      <MarkdownCopyClipboard docContext={document} rootSelector="#copy-markdown-3" />,
+    );
+    expect(wrapper.isEmptyRender()).toBe(true);
+    expect(wrapper.find(CopyClipboard).exists()).toBe(false);
+  });
+
+  it('should render null if no element is found', () => {
+    const wrapper = shallow(
+      <MarkdownCopyClipboard docContext={document} rootSelector="#copy-markdown-1" />,
+    );
+    expect(wrapper.isEmptyRender()).toBe(false);
+    expect(wrapper.find(CopyClipboard).exists()).toBe(true);
+  });
+});

package/src/ConsoleShared/src/components/markdown-extensions/__tests__/test-data.ts

@@ -0,0 +1,5 @@
+import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID, MARKDOWN_EXECUTE_BUTTON_ID } from '../const';
+
+export const htmlDocumentForCopyClipboard = `<div id="copy-markdown-1"><div ${MARKDOWN_SNIPPET_ID}="1234">some test data for testing</div><button ${MARKDOWN_COPY_BUTTON_ID}="1234"</button><div ${MARKDOWN_SNIPPET_ID}="12354">some test data for testing</div><button ${MARKDOWN_COPY_BUTTON_ID}="12354"</button></div>`;
+
+export const htmlDocumentForExecuteButton = `<div id="execute-markdown-1"><div ${MARKDOWN_SNIPPET_ID}="1234">some test data for testing</div><button ${MARKDOWN_EXECUTE_BUTTON_ID}="1234"</button><div ${MARKDOWN_SNIPPET_ID}="12354">some test data for testing</div><button ${MARKDOWN_EXECUTE_BUTTON_ID}="12354"</button></div>`;

package/src/ConsoleShared/src/components/markdown-extensions/admonition-extension.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { removeTemplateWhitespace } from './utils';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { Alert } from '@patternfly/react-core';
+import LightbulbIcon from '@patternfly/react-icons/dist/js/icons/lightbulb-icon';
+import FireIcon from '@patternfly/react-icons/dist/js/icons/fire-icon';
+import './showdown-extension.scss';
+
+enum AdmonitionType {
+  TIP = 'TIP',
+  NOTE = 'NOTE',
+  IMPORTANT = 'IMPORTANT',
+  WARNING = 'WARNING',
+  CAUTION = 'CAUTION',
+}
+
+const admonitionToAlertVariantMap = {
+  [AdmonitionType.NOTE]: { variant: 'info' },
+  [AdmonitionType.TIP]: { variant: 'default', customIcon: <LightbulbIcon /> },
+  [AdmonitionType.IMPORTANT]: { variant: 'danger' },
+  [AdmonitionType.CAUTION]: { variant: 'warning', customIcon: <FireIcon /> },
+  [AdmonitionType.WARNING]: { variant: 'warning' },
+};
+
+const useAdmonitionShowdownExtension = () => {
+  // const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  return React.useMemo(
+    () => ({
+      type: 'lang',
+      regex: /\[([\d\w\s-()$!]+)]{{(admonition) ([\w-]+)}}/g,
+      replace: (
+        text: string,
+        content: string,
+        admonitionLabel: string,
+        admonitionType: string,
+        groupId: string,
+      ): string => {
+        if (!content || !admonitionLabel || !admonitionType || !groupId) {
+          return text;
+        }
+        admonitionType = admonitionType.toUpperCase();
+
+        const { variant, customIcon } = admonitionToAlertVariantMap[admonitionType];
+        const style =
+          admonitionType === AdmonitionType.CAUTION ? { backgroundColor: '#ec7a0915' } : {};
+
+        const pfAlert = (
+          <Alert
+            variant={variant}
+            customIcon={customIcon && customIcon}
+            isInline
+            title={admonitionType}
+            className="pfext-markdown-admonition"
+            style={style}
+          >
+            {content}
+          </Alert>
+        );
+        return removeTemplateWhitespace(renderToStaticMarkup(pfAlert));
+      },
+    }),
+    [],
+  );
+};
+
+export default useAdmonitionShowdownExtension;

package/src/ConsoleShared/src/components/markdown-extensions/code-extension.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { removeTemplateWhitespace } from './utils';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { CodeBlock } from '@patternfly/react-core';
+import './showdown-extension.scss';
+
+const useCodeShowdownExtension = () => {
+  return React.useMemo(
+    () => ({
+      type: 'output',
+      regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,
+      replace: (text: string, content: string): string => {
+        if (!content) {
+          return text;
+        }
+        const pfCodeBlock = <CodeBlock>{content}</CodeBlock>;
+
+        return removeTemplateWhitespace(renderToStaticMarkup(pfCodeBlock));
+      },
+    }),
+    [],
+  );
+};
+
+export default useCodeShowdownExtension;

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

@@ -0,0 +1,3 @@
+export const MARKDOWN_COPY_BUTTON_ID = 'data-copy-for';
+export const MARKDOWN_EXECUTE_BUTTON_ID = 'data-execute-for';
+export const MARKDOWN_SNIPPET_ID = 'data-snippet-id';

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

@@ -0,0 +1,5 @@
+export { default as MarkdownCopyClipboard } from './MarkdownCopyClipboard';
+export { default as useInlineCopyClipboardShowdownExtension } from './inline-clipboard-extension';
+export { default as useMultilineCopyClipboardShowdownExtension } from './multiline-clipboard-extension';
+export { default as useAdmonitionShowdownExtension } from './admonition-extension';
+export { default as useCodeShowdownExtension } from './code-extension';

package/src/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
+import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
+import { removeTemplateWhitespace } from './utils';
+import { renderToStaticMarkup } from 'react-dom/server';
+import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
+import './showdown-extension.scss';
+
+const useInlineCopyClipboardShowdownExtension = () => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  return React.useMemo(
+    () => ({
+      type: 'lang',
+      regex: /`([^`](.*?)[^`])`{{copy}}/g,
+      replace: (
+        text: string,
+        group: string,
+        subGroup: string,
+        groupType: string,
+        groupId: string,
+      ): string => {
+        if (!group || !subGroup || !groupType || !groupId) {
+          return text;
+        }
+        return removeTemplateWhitespace(
+          `<span class="pf-c-clipboard-copy pf-m-inline">
+              <span class="pf-c-clipboard-copy__text" ${MARKDOWN_SNIPPET_ID}="${groupType}">${group}</span>
+              <span class="pf-c-clipboard-copy__actions">
+                <span class="pf-c-clipboard-copy__actions-item">
+                  <button class="pf-c-button pf-m-plain" aria-label="${getResource(
+                    'Copy to clipboard',
+                  )}" ${MARKDOWN_COPY_BUTTON_ID}="${groupType}">
+                    ${renderToStaticMarkup(<CopyIcon />)}
+                  </button>
+                </span>
+              </span>
+            </span>`,
+        );
+      },
+    }),
+    [getResource],
+  );
+};
+
+export default useInlineCopyClipboardShowdownExtension;

package/src/ConsoleShared/src/components/markdown-extensions/multiline-clipboard-extension.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
+import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
+import { renderToStaticMarkup } from 'react-dom/server';
+import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
+
+import './showdown-extension.scss';
+
+const useMultilineCopyClipboardShowdownExtension = () => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  return React.useMemo(
+    () => ({
+      type: 'lang',
+      regex: /```[\n]((.*?\n)+)```{{copy}}/g,
+      replace: (
+        text: string,
+        group: string,
+        subgroup: string,
+        groupType: string,
+        groupId: string,
+      ): string => {
+        if (!group || !subgroup || !groupType || !groupId) {
+          return text;
+        }
+        return `<div class="pf-c-code-block">
+              <div class="pf-c-code-block__header">
+                <div class="pf-c-code-block__actions">
+                  <div class="pf-c-code-block__actions-item">
+                    <button class="pf-c-button pf-m-plain" type="button" aria-label="${getResource(
+                      'Copy to clipboard',
+                    )}" ${MARKDOWN_COPY_BUTTON_ID}="${groupType}">
+                      ${renderToStaticMarkup(<CopyIcon />)}
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div class="pf-c-code-block__content">
+                <pre class="pf-c-code-block__pre pfext-code-block__pre">
+                  <code class="pf-c-code-block__code" 
+                    ${MARKDOWN_SNIPPET_ID}="${groupType}">${group}</code>
+                </pre>
+              </div>
+            </div>`;
+      },
+    }),
+    [getResource],
+  );
+};
+
+export default useMultilineCopyClipboardShowdownExtension;