@scm-manager/ui-components 2.31.1 → 2.31.2-20220124-105541

package/src/buttons/ButtonGroup.tsx

@@ -33,18 +33,7 @@ class ButtonGroup extends React.Component<Props> {
   render() {
     const { className, children } = this.props;
 
-    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>;
+    return <div className={classNames("buttons", className)}>{children}</div>;
   }
 }
 

package/src/forms/AddKeyValueEntryToTableField.tsx

@@ -25,6 +25,7 @@ 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;
@@ -42,8 +43,15 @@ const FullWidthInputField = styled(InputField)`
   width: 100%;
 `;
 
-const MarginTopButton = styled(AddButton)`
-  margin-top: 2rem;
+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 AddKeyValueEntryToTableField: FC<Props> = ({
@@ -55,7 +63,7 @@ const AddKeyValueEntryToTableField: FC<Props> = ({
   valueHelpText,
   validateEntry,
   errorMessage,
-  addEntry,
+  addEntry
 }) => {
   const [key, setKey] = useState("");
   const [value, setValue] = useState("");
@@ -75,9 +83,8 @@ const AddKeyValueEntryToTableField: FC<Props> = ({
   };
 
   return (
-    <div className="is-flex is-justify-content-space-between">
+    <MobileWrappedDiv className="is-flex is-align-items-flex-end">
       <FullWidthInputField
-        className="mr-5"
         label={keyFieldLabel}
         errorMessage={errorMessage}
         onChange={setKey}
@@ -88,7 +95,6 @@ const AddKeyValueEntryToTableField: FC<Props> = ({
         helpText={keyHelpText}
       />
       <FullWidthInputField
-        className="mr-5"
         label={valueFieldLabel}
         errorMessage={errorMessage}
         onChange={setValue}
@@ -98,12 +104,13 @@ const AddKeyValueEntryToTableField: FC<Props> = ({
         disabled={disabled}
         helpText={valueHelpText}
       />
-      <MarginTopButton
+      <AddButton
+        className="ml-auto mb-3"
         label={buttonLabel}
         action={add}
         disabled={disabled || !key || !value || !isValid(key) || !isValid(value)}
       />
-    </div>
+    </MobileWrappedDiv>
   );
 };
 

package/src/layout/Page.tsx

@@ -51,11 +51,6 @@ 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();
@@ -90,7 +85,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 = (
@@ -118,10 +113,12 @@ export default class Page extends React.Component<Props> {
         <>
           <div className="columns">
             <div className="column">
-              <MaxTitleHeight className="is-flex">
-                <Title title={this.getTextualTitle()}>{this.getTitleComponent()}</Title>
-                {afterTitle && <div className="ml-2">{afterTitle}</div>}
-              </MaxTitleHeight>
+              <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>
               {subtitle ? <Subtitle>{subtitle}</Subtitle> : null}
             </div>
             {pageActions}
@@ -144,7 +141,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/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;

package/src/modals/Modal.tsx

@@ -25,6 +25,7 @@ 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";
 
@@ -47,6 +48,9 @@ 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;