@scm-manager/ui-components 2.30.2-20220116-102851 → 2.31.1-20220118-142503

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "2.30.2-20220116-102851",
+  "version": "2.31.1-20220118-142503",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -25,7 +25,7 @@
     "@scm-manager/jest-preset": "^2.13.0",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.12.0",
-    "@scm-manager/ui-tests": "^2.30.2-20220116-102851",
+    "@scm-manager/ui-tests": "^2.31.1-20220118-142503",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-storyshots": "^6.3.12",
     "@storybook/builder-webpack5": "^6.3.12",
@@ -66,9 +66,9 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.4.3",
-    "@scm-manager/ui-api": "^2.30.2-20220116-102851",
-    "@scm-manager/ui-extensions": "^2.30.2-20220116-102851",
-    "@scm-manager/ui-types": "^2.30.2-20220116-102851",
+    "@scm-manager/ui-api": "^2.31.1-20220118-142503",
+    "@scm-manager/ui-extensions": "^2.31.1-20220118-142503",
+    "@scm-manager/ui-types": "^2.31.1-20220118-142503",
     "classnames": "^2.2.6",
     "date-fns": "^2.4.1",
     "deepmerge": "^4.2.2",

package/src/OverviewPageActions.tsx

@@ -37,6 +37,7 @@ type Props = {
   label?: string;
   testId?: string;
   searchPlaceholder?: string;
+  groupAriaLabelledby?: string;
 };
 
 const createAbsoluteLink = (url: string) => {
@@ -52,7 +53,8 @@ const OverviewPageActions: FC<Props> = ({
   groupSelected,
   label,
   testId,
-  searchPlaceholder
+  searchPlaceholder,
+  groupAriaLabelledby
 }) => {
   const history = useHistory();
   const location = useLocation();
@@ -62,6 +64,7 @@ const OverviewPageActions: FC<Props> = ({
   const groupSelector = groups && (
     <div className="column is-flex">
       <Select
+        ariaLabelledby={groupAriaLabelledby}
         className="is-fullwidth"
         options={groups.map(g => ({ value: g, label: g }))}
         value={currentGroup}

package/src/Tag.tsx

@@ -24,6 +24,7 @@
 import React, { FC } from "react";
 import classNames from "classnames";
 import { Color, Size } from "./styleConstants";
+import { useTranslation } from "react-i18next";
 
 type Props = {
   className?: string;
@@ -51,8 +52,10 @@ const Tag: FC<Props> = ({
   title,
   onClick,
   onRemove,
-  children,
+  children
 }) => {
+  const [t] = useTranslation("commons");
+
   let showIcon = null;
   if (icon) {
     showIcon = (
@@ -64,7 +67,7 @@ const Tag: FC<Props> = ({
   }
   let showDelete = null;
   if (onRemove) {
-    showDelete = <button className="tag is-delete" onClick={onRemove} />;
+    showDelete = <button className="tag is-delete" onClick={onRemove} aria-label={t("tag.delete")} />;
   }
 
   return (
@@ -78,7 +81,7 @@ const Tag: FC<Props> = ({
           {
             "is-outlined": outlined,
             "is-rounded": rounded,
-            "is-clickable": onClick,
+            "is-clickable": onClick
           },
           size === "small" && smallClassNames
         )}

package/src/__snapshots__/storyshots.test.ts.snap

@@ -34,6 +34,7 @@ exports[`Storyshots BranchSelector Default 1`] = `
               className="control select is-fullwidth"
             >
               <select
+                aria-labelledby="branch-select_0"
                 disabled={false}
                 onBlur={[Function]}
                 onChange={[Function]}
@@ -3048,7 +3049,6 @@ exports[`Storyshots Forms/Radio Default 1`] = `
       className="radio mr-2"
     >
       <input
-        aria-describedby="radio_56"
         aria-labelledby="radio_55"
         checked={false}
         onBlur={[Function]}
@@ -3070,7 +3070,6 @@ exports[`Storyshots Forms/Radio Default 1`] = `
       className="radio mr-2"
     >
       <input
-        aria-describedby="radio_58"
         aria-labelledby="radio_57"
         checked={true}
         onBlur={[Function]}
@@ -3100,7 +3099,6 @@ exports[`Storyshots Forms/Radio Disabled 1`] = `
       disabled={true}
     >
       <input
-        aria-describedby="radio_60"
         aria-labelledby="radio_59"
         checked={true}
         disabled={true}
@@ -3128,7 +3126,6 @@ Array [
       className="radio mr-2"
     >
       <input
-        aria-describedby="radio_68"
         aria-labelledby="radio_67"
         checked={false}
         onBlur={[Function]}
@@ -3160,7 +3157,6 @@ exports[`Storyshots Forms/Radio ReactHookForm 1`] = `
         className="radio mr-2"
       >
         <input
-          aria-describedby="radio_70"
           aria-labelledby="radio_69"
           defaultChecked={true}
           name="rememberMe"
@@ -3184,7 +3180,6 @@ exports[`Storyshots Forms/Radio ReactHookForm 1`] = `
         className="radio mr-2"
       >
         <input
-          aria-describedby="radio_72"
           aria-labelledby="radio_71"
           name="rememberMe"
           onBlur={[Function]}
@@ -3208,7 +3203,6 @@ exports[`Storyshots Forms/Radio ReactHookForm 1`] = `
       className="radio mr-2 ml-2"
     >
       <input
-        aria-describedby="radio_74"
         aria-labelledby="radio_73"
         name="scramblePassword"
         onBlur={[Function]}
@@ -3232,7 +3226,6 @@ exports[`Storyshots Forms/Radio ReactHookForm 1`] = `
       disabled={true}
     >
       <input
-        aria-describedby="radio_76"
         aria-labelledby="radio_75"
         disabled={true}
         name="disabled"
@@ -3256,7 +3249,6 @@ exports[`Storyshots Forms/Radio ReactHookForm 1`] = `
       className="radio mr-2"
     >
       <input
-        aria-describedby="radio_78"
         aria-labelledby="radio_77"
         name="readonly"
         onBlur={[Function]}
@@ -3298,7 +3290,6 @@ Array [
       className="radio mr-2"
     >
       <input
-        aria-describedby="radio_66"
         aria-labelledby="radio_65"
         checked={false}
         onBlur={[Function]}

package/src/forms/Radio.tsx

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { ChangeEvent, FC, FocusEvent } from "react";
+import React, { ChangeEvent, FC, FocusEvent, useMemo } from "react";
 import classNames from "classnames";
 import { Help } from "../index";
 import { createFormFieldWrapper, FieldProps, FieldType, isLegacy, isUsingRef } from "./FormFieldTypes";
@@ -47,8 +47,8 @@ const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({
   ariaLabelledby,
   ...props
 }) => {
-  const id = ariaLabelledby || createA11yId("radio");
-  const helpId = createA11yId("radio");
+  const id = useMemo(() => ariaLabelledby || createA11yId("radio"), [ariaLabelledby]);
+  const helpId = useMemo(() => createA11yId("radio"), []);
 
   const renderHelp = () => {
     const helpText = props.helpText;
@@ -77,7 +77,7 @@ const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({
     }
   };
 
-  const labelElement = props.label ? (<span id={id}>{props.label}</span>) : null;
+  const labelElement = props.label ? <span id={id}>{props.label}</span> : null;
 
   return (
     <fieldset className="is-inline-block" disabled={readOnly}>
@@ -98,7 +98,7 @@ const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({
           ref={props.innerRef}
           defaultChecked={defaultChecked}
           aria-labelledby={id}
-          aria-describedby={helpId}
+          aria-describedby={props.helpText ? helpId : undefined}
         />{" "}
         {labelElement}
         {renderHelp()}

package/src/forms/Select.tsx

@@ -124,7 +124,7 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
           onChange={handleInput}
           onBlur={handleBlur}
           disabled={disabled}
-          aria-labelledby={label ? a11yId : undefined}
+          aria-labelledby={ariaLabelledby || (label ? a11yId : undefined)}
           aria-describedby={helpText ? helpId : undefined}
           {...createAttributesForTesting(testId)}
         >

package/src/markdown/LazyMarkdownView.tsx

@@ -0,0 +1,230 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { FC } from "react";
+import { RouteComponentProps, withRouter } from "react-router-dom";
+import unified from "unified";
+import parseMarkdown from "remark-parse";
+import sanitize from "rehype-sanitize";
+import remark2rehype from "remark-rehype";
+import rehype2react from "rehype-react";
+import gfm from "remark-gfm";
+import { BinderContext } from "@scm-manager/ui-extensions";
+import ErrorBoundary from "../ErrorBoundary";
+import { create as createMarkdownHeadingRenderer } from "./MarkdownHeadingRenderer";
+import { create as createMarkdownLinkRenderer } from "./MarkdownLinkRenderer";
+import { useTranslation, WithTranslation, withTranslation } from "react-i18next";
+import Notification from "../Notification";
+import { createTransformer as createChangesetShortlinkParser } from "./remarkChangesetShortLinkParser";
+import { createTransformer as createValuelessTextAdapter } from "./remarkValuelessTextAdapter";
+import MarkdownCodeRenderer from "./MarkdownCodeRenderer";
+import { AstPlugin } from "./PluginApi";
+import createMdastPlugin from "./createMdastPlugin";
+// @ts-ignore
+import gh from "hast-util-sanitize/lib/github";
+import raw from "rehype-raw";
+import slug from "rehype-slug";
+import merge from "deepmerge";
+import { createComponentList } from "./createComponentList";
+import { ProtocolLinkRendererExtension, ProtocolLinkRendererExtensionMap } from "./markdownExtensions";
+
+export type MarkdownProps = {
+  content: string;
+  renderContext?: object;
+  renderers?: any;
+  skipHtml?: boolean;
+  enableAnchorHeadings?: boolean;
+  // basePath for markdown links
+  basePath?: string;
+  permalink?: string;
+  mdastPlugins?: AstPlugin[];
+};
+
+type Props = RouteComponentProps & WithTranslation & MarkdownProps;
+
+type State = {
+  contentRef: HTMLDivElement | null | undefined;
+};
+
+const xmlMarkupSample = `\`\`\`xml
+<your>
+  <xml>
+    <content/>
+  </xml>
+</your>
+\`\`\``;
+
+const MarkdownErrorNotification: FC = () => {
+  const [t] = useTranslation("commons");
+  return (
+    <Notification type="danger">
+      <div className="content">
+        <p className="subtitle">{t("markdownErrorNotification.title")}</p>
+        <p>{t("markdownErrorNotification.description")}</p>
+        <pre>
+          <code>{xmlMarkupSample}</code>
+        </pre>
+        <p>
+          {t("markdownErrorNotification.spec")}:{" "}
+          <a href="https://github.github.com/gfm/" target="_blank" rel="noreferrer">
+            GitHub Flavored Markdown Spec
+          </a>
+        </p>
+      </div>
+    </Notification>
+  );
+};
+
+class LazyMarkdownView extends React.Component<Props, State> {
+  static contextType = BinderContext;
+
+  static defaultProps: Partial<Props> = {
+    enableAnchorHeadings: false,
+    skipHtml: false
+  };
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      contentRef: null
+    };
+  }
+
+  shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>): boolean {
+    // We have check if the contentRef changed and update afterwards so the page can scroll to the anchor links.
+    // Otherwise it can happen that componentDidUpdate is never executed depending on how fast the markdown got rendered
+    // We also have to check if props have changed, because we also want to rerender if one of our props has changed
+    return this.state.contentRef !== nextState.contentRef || this.props !== nextProps;
+  }
+
+  componentDidUpdate() {
+    const { contentRef } = this.state;
+    // we have to use componentDidUpdate, because we have to wait until all
+    // children are rendered and componentDidMount is called before the
+    // markdown content was rendered.
+    const hash = this.props.location.hash;
+    if (contentRef && hash) {
+      // we query only child elements, to avoid strange scrolling with multiple
+      // markdown elements on one page.
+      const elementId = decodeURIComponent(hash.substring(1) /* remove # */);
+      const element = contentRef.querySelector(`[id="${elementId}"]`);
+      if (element && element.scrollIntoView) {
+        element.scrollIntoView();
+      }
+    }
+  }
+
+  render() {
+    const {
+      content,
+      renderers,
+      renderContext,
+      enableAnchorHeadings,
+      skipHtml,
+      basePath,
+      permalink,
+      t,
+      mdastPlugins = []
+    } = this.props;
+
+    const rendererFactory = this.context.getExtension("markdown-renderer-factory");
+    let remarkRendererList = renderers;
+
+    if (rendererFactory) {
+      remarkRendererList = rendererFactory(renderContext);
+    }
+
+    if (!remarkRendererList) {
+      remarkRendererList = {};
+    }
+
+    if (enableAnchorHeadings && permalink && !remarkRendererList.heading) {
+      remarkRendererList.heading = createMarkdownHeadingRenderer(permalink);
+    }
+
+    let protocolLinkRendererExtensions: ProtocolLinkRendererExtensionMap = {};
+    if (!remarkRendererList.link) {
+      const extensionPoints = this.context.getExtensions(
+        "markdown-renderer.link.protocol"
+      ) as ProtocolLinkRendererExtension[];
+      protocolLinkRendererExtensions = extensionPoints.reduce<ProtocolLinkRendererExtensionMap>(
+        (prev, { protocol, renderer }) => {
+          prev[protocol] = renderer;
+          return prev;
+        },
+        {}
+      );
+      remarkRendererList.link = createMarkdownLinkRenderer(basePath, protocolLinkRendererExtensions);
+    }
+
+    if (!remarkRendererList.code) {
+      remarkRendererList.code = MarkdownCodeRenderer;
+    }
+
+    const remarkPlugins = [...mdastPlugins, createChangesetShortlinkParser(t), createValuelessTextAdapter()].map(
+      createMdastPlugin
+    );
+
+    let processor = unified()
+      .use(parseMarkdown)
+      .use(gfm)
+      .use(remarkPlugins)
+      .use(remark2rehype, { allowDangerousHtml: true });
+
+    if (!skipHtml) {
+      processor = processor.use(raw);
+    }
+
+    processor = processor
+      .use(slug)
+      .use(
+        sanitize,
+        merge(gh, {
+          attributes: {
+            code: ["className"] // Allow className for code elements, this is necessary to extract the code language
+          },
+          clobberPrefix: "", // Do not prefix user-provided ids and class names,
+          protocols: {
+            href: Object.keys(protocolLinkRendererExtensions)
+          }
+        })
+      )
+      .use(rehype2react, {
+        createElement: React.createElement,
+        passNode: true,
+        components: createComponentList(remarkRendererList, { permalink })
+      });
+
+    const renderedMarkdown: any = processor.processSync(content).result;
+
+    return (
+      <ErrorBoundary fallback={MarkdownErrorNotification}>
+        <div ref={el => this.setState({ contentRef: el })} className="content is-word-break">
+          {renderedMarkdown}
+        </div>
+      </ErrorBoundary>
+    );
+  }
+}
+
+export default withRouter(withTranslation("repos")(LazyMarkdownView));

package/src/markdown/MarkdownView.tsx

@@ -21,209 +21,16 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC } from "react";
-import { RouteComponentProps, withRouter } from "react-router-dom";
-import unified from "unified";
-import parseMarkdown from "remark-parse";
-import sanitize from "rehype-sanitize";
-import remark2rehype from "remark-rehype";
-import rehype2react from "rehype-react";
-import gfm from "remark-gfm";
-import { BinderContext } from "@scm-manager/ui-extensions";
-import ErrorBoundary from "../ErrorBoundary";
-import { create as createMarkdownHeadingRenderer } from "./MarkdownHeadingRenderer";
-import { create as createMarkdownLinkRenderer } from "./MarkdownLinkRenderer";
-import { useTranslation, WithTranslation, withTranslation } from "react-i18next";
-import Notification from "../Notification";
-import { createTransformer as createChangesetShortlinkParser } from "./remarkChangesetShortLinkParser";
-import { createTransformer as createValuelessTextAdapter } from "./remarkValuelessTextAdapter";
-import MarkdownCodeRenderer from "./MarkdownCodeRenderer";
-import { AstPlugin } from "./PluginApi";
-import createMdastPlugin from "./createMdastPlugin";
-// @ts-ignore
-import gh from "hast-util-sanitize/lib/github";
-import raw from "rehype-raw";
-import slug from "rehype-slug";
-import merge from "deepmerge";
-import { createComponentList } from "./createComponentList";
-import { ProtocolLinkRendererExtension, ProtocolLinkRendererExtensionMap } from "./markdownExtensions";
+import React, { FC, Suspense } from "react";
+import { MarkdownProps } from "./LazyMarkdownView";
+import Loading from "../Loading";
 
-type Props = RouteComponentProps &
-  WithTranslation & {
-    content: string;
-    renderContext?: object;
-    renderers?: any;
-    skipHtml?: boolean;
-    enableAnchorHeadings?: boolean;
-    // basePath for markdown links
-    basePath?: string;
-    permalink?: string;
-    mdastPlugins?: AstPlugin[];
-  };
+const LazyMarkdownView = React.lazy(() => import("./LazyMarkdownView"));
 
-type State = {
-  contentRef: HTMLDivElement | null | undefined;
-};
+const MarkdownView: FC<MarkdownProps> = props => (
+  <Suspense fallback={<Loading />}>
+    <LazyMarkdownView {...props} />
+  </Suspense>
+);
 
-const xmlMarkupSample = `\`\`\`xml
-<your>
-  <xml>
-    <content/>
-  </xml>
-</your>
-\`\`\``;
-
-const MarkdownErrorNotification: FC = () => {
-  const [t] = useTranslation("commons");
-  return (
-    <Notification type="danger">
-      <div className="content">
-        <p className="subtitle">{t("markdownErrorNotification.title")}</p>
-        <p>{t("markdownErrorNotification.description")}</p>
-        <pre>
-          <code>{xmlMarkupSample}</code>
-        </pre>
-        <p>
-          {t("markdownErrorNotification.spec")}:{" "}
-          <a href="https://github.github.com/gfm/" target="_blank" rel="noreferrer">
-            GitHub Flavored Markdown Spec
-          </a>
-        </p>
-      </div>
-    </Notification>
-  );
-};
-
-class MarkdownView extends React.Component<Props, State> {
-  static contextType = BinderContext;
-
-  static defaultProps: Partial<Props> = {
-    enableAnchorHeadings: false,
-    skipHtml: false,
-  };
-
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      contentRef: null,
-    };
-  }
-
-  shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>): boolean {
-    // We have check if the contentRef changed and update afterwards so the page can scroll to the anchor links.
-    // Otherwise it can happen that componentDidUpdate is never executed depending on how fast the markdown got rendered
-    // We also have to check if props have changed, because we also want to rerender if one of our props has changed
-    return this.state.contentRef !== nextState.contentRef || this.props !== nextProps;
-  }
-
-  componentDidUpdate() {
-    const { contentRef } = this.state;
-    // we have to use componentDidUpdate, because we have to wait until all
-    // children are rendered and componentDidMount is called before the
-    // markdown content was rendered.
-    const hash = this.props.location.hash;
-    if (contentRef && hash) {
-      // we query only child elements, to avoid strange scrolling with multiple
-      // markdown elements on one page.
-      const elementId = decodeURIComponent(hash.substring(1) /* remove # */);
-      const element = contentRef.querySelector(`[id="${elementId}"]`);
-      if (element && element.scrollIntoView) {
-        element.scrollIntoView();
-      }
-    }
-  }
-
-  render() {
-    const {
-      content,
-      renderers,
-      renderContext,
-      enableAnchorHeadings,
-      skipHtml,
-      basePath,
-      permalink,
-      t,
-      mdastPlugins = [],
-    } = this.props;
-
-    const rendererFactory = this.context.getExtension("markdown-renderer-factory");
-    let remarkRendererList = renderers;
-
-    if (rendererFactory) {
-      remarkRendererList = rendererFactory(renderContext);
-    }
-
-    if (!remarkRendererList) {
-      remarkRendererList = {};
-    }
-
-    if (enableAnchorHeadings && permalink && !remarkRendererList.heading) {
-      remarkRendererList.heading = createMarkdownHeadingRenderer(permalink);
-    }
-
-    let protocolLinkRendererExtensions: ProtocolLinkRendererExtensionMap = {};
-    if (!remarkRendererList.link) {
-      const extensionPoints = this.context.getExtensions(
-        "markdown-renderer.link.protocol"
-      ) as ProtocolLinkRendererExtension[];
-      protocolLinkRendererExtensions = extensionPoints.reduce<ProtocolLinkRendererExtensionMap>(
-        (prev, { protocol, renderer }) => {
-          prev[protocol] = renderer;
-          return prev;
-        },
-        {}
-      );
-      remarkRendererList.link = createMarkdownLinkRenderer(basePath, protocolLinkRendererExtensions);
-    }
-
-    if (!remarkRendererList.code) {
-      remarkRendererList.code = MarkdownCodeRenderer;
-    }
-
-    const remarkPlugins = [...mdastPlugins, createChangesetShortlinkParser(t), createValuelessTextAdapter()].map(
-      createMdastPlugin
-    );
-
-    let processor = unified()
-      .use(parseMarkdown)
-      .use(gfm)
-      .use(remarkPlugins)
-      .use(remark2rehype, { allowDangerousHtml: true });
-
-    if (!skipHtml) {
-      processor = processor.use(raw);
-    }
-
-    processor = processor
-      .use(slug)
-      .use(
-        sanitize,
-        merge(gh, {
-          attributes: {
-            code: ["className"], // Allow className for code elements, this is necessary to extract the code language
-          },
-          clobberPrefix: "", // Do not prefix user-provided ids and class names,
-          protocols: {
-            href: Object.keys(protocolLinkRendererExtensions),
-          },
-        })
-      )
-      .use(rehype2react, {
-        createElement: React.createElement,
-        passNode: true,
-        components: createComponentList(remarkRendererList, { permalink }),
-      });
-
-    const renderedMarkdown: any = processor.processSync(content).result;
-
-    return (
-      <ErrorBoundary fallback={MarkdownErrorNotification}>
-        <div ref={(el) => this.setState({ contentRef: el })} className="content is-word-break">
-          {renderedMarkdown}
-        </div>
-      </ErrorBoundary>
-    );
-  }
-}
-
-export default withRouter(withTranslation("repos")(MarkdownView));
+export default MarkdownView;