@scm-manager/ui-components 2.31.1-20220118-144252 → 2.31.1

package/src/buttons/ButtonGroup.tsx

@@ -33,7 +33,18 @@ class ButtonGroup extends React.Component<Props> {
   render() {
     const { className, children } = this.props;
 
-    return <div className={classNames("buttons", className)}>{children}</div>;
+    const childWrapper: ReactNode[] = [];
+    React.Children.forEach(children, (child) => {
+      if (child) {
+        childWrapper.push(
+          <div className="control" key={childWrapper.length}>
+            {child}
+          </div>
+        );
+      }
+    });
+
+    return <div className={classNames("field", "is-grouped", className)}>{childWrapper}</div>;
   }
 }
 

package/src/forms/AddKeyValueEntryToTableField.tsx

@@ -25,7 +25,6 @@ import React, { FC, useState } from "react";
 import styled from "styled-components";
 import InputField from "./InputField";
 import { AddButton } from "../buttons";
-import { devices } from "../devices";
 
 type Props = {
   addEntry: (key: string, value: string) => void;
@@ -43,15 +42,8 @@ const FullWidthInputField = styled(InputField)`
   width: 100%;
 `;
 
-const MobileWrappedDiv = styled.div`
-  @media screen and (min-width: ${devices.tablet.width}px) {
-    & > ${FullWidthInputField} {
-      margin-right: 1.5rem;
-    }
-  }
-  @media screen and (max-width: ${devices.mobile.width}px) {
-    flex-wrap: wrap;
-  }
+const MarginTopButton = styled(AddButton)`
+  margin-top: 2rem;
 `;
 
 const AddKeyValueEntryToTableField: FC<Props> = ({
@@ -63,7 +55,7 @@ const AddKeyValueEntryToTableField: FC<Props> = ({
   valueHelpText,
   validateEntry,
   errorMessage,
-  addEntry
+  addEntry,
 }) => {
   const [key, setKey] = useState("");
   const [value, setValue] = useState("");
@@ -83,8 +75,9 @@ const AddKeyValueEntryToTableField: FC<Props> = ({
   };
 
   return (
-    <MobileWrappedDiv className="is-flex is-align-items-flex-end">
+    <div className="is-flex is-justify-content-space-between">
       <FullWidthInputField
+        className="mr-5"
         label={keyFieldLabel}
         errorMessage={errorMessage}
         onChange={setKey}
@@ -95,6 +88,7 @@ const AddKeyValueEntryToTableField: FC<Props> = ({
         helpText={keyHelpText}
       />
       <FullWidthInputField
+        className="mr-5"
         label={valueFieldLabel}
         errorMessage={errorMessage}
         onChange={setValue}
@@ -104,13 +98,12 @@ const AddKeyValueEntryToTableField: FC<Props> = ({
         disabled={disabled}
         helpText={valueHelpText}
       />
-      <AddButton
-        className="ml-auto mb-3"
+      <MarginTopButton
         label={buttonLabel}
         action={add}
         disabled={disabled || !key || !value || !isValid(key) || !isValid(value)}
       />
-    </MobileWrappedDiv>
+    </div>
   );
 };
 

package/src/layout/Page.tsx

@@ -51,6 +51,11 @@ const PageActionContainer = styled.div`
   }
 `;
 
+const MaxTitleHeight = styled.div`
+  // remove blank space in repo create form
+  height: 2.25rem;
+`;
+
 export default class Page extends React.Component<Props> {
   componentDidUpdate() {
     const textualTitle = this.getTextualTitle();
@@ -85,7 +90,7 @@ export default class Page extends React.Component<Props> {
 
     let pageActions = null;
     let pageActionsExists = false;
-    React.Children.forEach(children, child => {
+    React.Children.forEach(children, (child) => {
       if (child && !error) {
         if (this.isPageAction(child)) {
           pageActions = (
@@ -113,12 +118,10 @@ export default class Page extends React.Component<Props> {
         <>
           <div className="columns">
             <div className="column">
-              <div className="is-flex is-flex-wrap-wrap is-align-items-center">
-                <Title className="mb-0 mr-2" title={this.getTextualTitle()}>
-                  {this.getTitleComponent()}
-                </Title>
-                {afterTitle}
-              </div>
+              <MaxTitleHeight className="is-flex">
+                <Title title={this.getTextualTitle()}>{this.getTitleComponent()}</Title>
+                {afterTitle && <div className="ml-2">{afterTitle}</div>}
+              </MaxTitleHeight>
               {subtitle ? <Subtitle>{subtitle}</Subtitle> : null}
             </div>
             {pageActions}
@@ -141,7 +144,7 @@ export default class Page extends React.Component<Props> {
     }
 
     const content: ReactNode[] = [];
-    React.Children.forEach(children, child => {
+    React.Children.forEach(children, (child) => {
       if (child) {
         if (!this.isPageAction(child)) {
           content.push(child);

package/src/markdown/MarkdownView.tsx

@@ -21,16 +21,209 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC, Suspense } from "react";
-import { MarkdownProps } from "./LazyMarkdownView";
-import Loading from "../Loading";
+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";
 
-const LazyMarkdownView = React.lazy(() => import("./LazyMarkdownView"));
+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 MarkdownView: FC<MarkdownProps> = props => (
-  <Suspense fallback={<Loading />}>
-    <LazyMarkdownView {...props} />
-  </Suspense>
-);
+type State = {
+  contentRef: HTMLDivElement | null | undefined;
+};
 
-export default MarkdownView;
+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));

package/src/modals/Modal.tsx

@@ -25,7 +25,6 @@ import React, { FC, MutableRefObject, useRef } from "react";
 import classNames from "classnames";
 import styled from "styled-components";
 import { Dialog } from "@headlessui/react";
-import { devices } from "../devices";
 
 type ModalSize = "S" | "M" | "L";
 
@@ -48,9 +47,6 @@ type Props = {
 const SizedModal = styled.div<{ size?: ModalSize; overflow: string }>`
   width: ${props => (props.size ? `${modalSizes[props.size]}%` : "640px")};
   overflow: ${props => props.overflow};
-  @media screen and (max-width: ${devices.mobile.width}px) {
-    width: ${props => (props.size ? `${modalSizes[props.size]}%` : "320px")};
-  }
 `;
 
 export const Modal: FC<Props> = ({

package/src/repos/Diff.tsx

@@ -64,14 +64,14 @@ const Diff: FC<Props> = ({ diff, ...fileProps }) => {
       {diff.length === 0 ? (
         <Notification type="info">{t("diff.noDiffFound")}</Notification>
       ) : (
-        diff.map(file => <DiffFile key={createKey(file)} file={file} {...fileProps} />)
+        diff.map((file) => <DiffFile key={createKey(file)} file={file} {...fileProps} />)
       )}
     </div>
   );
 };
 
 Diff.defaultProps = {
-  sideBySide: false
+  sideBySide: false,
 };
 
 export default Diff;