@scm-manager/ui-components 2.27.3 → 2.27.5-20211121-150210

package/src/repos/RepositoryFlags.tsx

@@ -86,13 +86,13 @@ const RepositoryFlags: FC<Props> = ({ repository, className, tooltipLocation = "
   );
 
   return (
-    <span className={classNames("is-flex", "is-align-items-center", className)}>
+    <div className={classNames("is-flex", "is-align-items-center", className)}>
       {modal}
       <RepositoryFlagContainer>
         {repositoryFlags}
         <ExtensionPoint name="repository.flags" props={{ repository, tooltipLocation }} renderAll={true} />
       </RepositoryFlagContainer>
-    </span>
+    </div>
   );
 };
 

package/src/repos/TokenizedDiffView.tsx

@@ -26,35 +26,46 @@ import styled from "styled-components";
 // @ts-ignore we have no typings for react-diff-view
 import { Diff, useTokenizeWorker } from "react-diff-view";
 import { FileDiff } from "@scm-manager/ui-types";
-import { determineLanguage } from "../languages";
 
 // @ts-ignore no types for css modules
 import theme from "../syntax-highlighting.module.css";
+import { determineLanguage } from "../languages";
 
 const DiffView = styled(Diff)`
   /* align line numbers */
+
   & .diff-gutter {
     text-align: right;
   }
+
   /* column sizing */
+
   > colgroup .diff-gutter-col {
     width: 3.25rem;
   }
+
   /* prevent following content from moving down */
+
   > .diff-gutter:empty:hover::after {
     font-size: 0.7rem;
   }
+
   /* smaller font size for code and
   ensure same monospace font throughout whole scmm */
+
   & .diff-line {
     font-size: 0.75rem;
     font-family: "Courier New", Monaco, Menlo, "Ubuntu Mono", "source-code-pro", monospace;
   }
+
   /* comment padding for sidebyside view */
+
   &.split .diff-widget-content .is-indented-line {
     padding-left: 3.25rem;
   }
+
   /* comment padding for combined view */
+
   &.unified .diff-widget-content .is-indented-line {
     padding-left: 6.5rem;
   }
@@ -71,10 +82,17 @@ type Props = {
   className?: string;
 };
 
+const findSyntaxHighlightingLanguage = (file: FileDiff) => {
+  if (file.syntaxModes) {
+    return file.syntaxModes["prism"] || file.syntaxModes["codemirror"] || file.syntaxModes["ace"] || file.language;
+  }
+  return file.language;
+};
+
 const TokenizedDiffView: FC<Props> = ({ file, viewType, className, children }) => {
   const { tokens } = useTokenizeWorker(tokenize, {
     hunks: file.hunks,
-    language: determineLanguage(file.language),
+    language: determineLanguage(findSyntaxHighlightingLanguage(file))
   });
 
   return (

package/src/repos/annotate/Annotate.stories.tsx

@@ -67,7 +67,7 @@ const commitImplementMain = {
 };
 
 const source: AnnotatedSource = {
-  language: "golang",
+  language: "go",
   lines: [
     {
       lineNumber: 1,

package/src/repos/annotate/Annotate.tsx

@@ -32,7 +32,7 @@ import { PrismAsyncLight as ReactSyntaxHighlighter, createElement } from "react-
 // eslint-disable-next-line no-restricted-imports
 import highlightingTheme from "../../syntax-highlighting";
 import { DateInput } from "../../useDateFormatter";
-import Popover from "./Popover";
+import AnnotatePopover from "./AnnotatePopover";
 import AnnotateLine from "./AnnotateLine";
 import { Action } from "./actions";
 import { determineLanguage } from "../../languages";
@@ -128,7 +128,7 @@ const Annotate: FC<Props> = ({ source, repository, baseDate }) => {
   let popover = null;
   if ((state.onPopover || state.onLine) && state.annotation) {
     popover = (
-      <Popover
+      <AnnotatePopover
         annotation={state.annotation}
         dispatch={dispatch}
         offsetTop={state.offset}

package/src/repos/annotate/AnnotateLine.tsx

@@ -58,6 +58,7 @@ const LineNumber = styled(LineElement)`
   text-overflow: ellipsis;
   white-space: nowrap;
 
+  // TODO: ERSETZEN?
   border-left: 1px solid lightgrey;
   border-right: 1px solid lightgrey;
 

package/src/repos/annotate/{Popover.tsx → AnnotatePopover.tsx}

@@ -85,7 +85,7 @@ type PopoverProps = {
   dispatch: Dispatch<Action>;
 };
 
-const Popover: FC<PopoverProps> = ({ annotation, offsetTop, repository, baseDate, dispatch }) => {
+const AnnotatePopover: FC<PopoverProps> = ({ annotation, offsetTop, repository, baseDate, dispatch }) => {
   const [t] = useTranslation("repos");
   const [height, setHeight] = useState(125);
   const ref = useRef<HTMLDivElement>(null);
@@ -135,4 +135,4 @@ const Popover: FC<PopoverProps> = ({ annotation, offsetTop, repository, baseDate
   );
 };
 
-export default Popover;
+export default AnnotatePopover;

package/src/repos/index.ts

@@ -30,6 +30,7 @@ import {
   AnnotationFactoryContext,
   DiffEventHandler,
   DiffEventContext,
+  DiffObjectProps
 } from "./DiffTypes";
 
 import { FileDiff as File, FileChangeType, Hunk, Change, ChangeType } from "@scm-manager/ui-types";
@@ -64,4 +65,5 @@ export {
   AnnotationFactoryContext,
   DiffEventHandler,
   DiffEventContext,
+  DiffObjectProps
 };

package/src/repos/refractorAdapter.ts

@@ -46,10 +46,15 @@ const createAdapter = (theme: { [key: string]: string }): RefractorAdapter => {
       import(
         /* webpackChunkName: "tokenizer-refractor-[request]" */
         `refractor/lang/${lang}`
-      ).then((loadedLanguage) => {
-        refractor.register(loadedLanguage.default);
-        callback();
-      });
+      )
+        .then(loadedLanguage => {
+          refractor.register(loadedLanguage.default);
+          callback();
+        })
+        .catch(e => {
+          // eslint-disable-next-line no-console
+          console.log(`failed to load refractor language ${lang}: ${e}`);
+        });
     }
   };
 
@@ -58,7 +63,7 @@ const createAdapter = (theme: { [key: string]: string }): RefractorAdapter => {
   const runHook = (name: string, env: RunHookEnv) => {
     originalRunHook.apply(name, env);
     if (env.classes) {
-      env.classes = env.classes.map((className) => theme[className] || className);
+      env.classes = env.classes.map(className => theme[className] || className);
     }
   };
   // @ts-ignore hooks are not in the type definition
@@ -67,7 +72,7 @@ const createAdapter = (theme: { [key: string]: string }): RefractorAdapter => {
   return {
     isLanguageRegistered,
     loadLanguage,
-    ...refractor,
+    ...refractor
   };
 };
 

package/src/search/HighlightedFragment.tsx

@@ -24,6 +24,9 @@
 
 import React, { FC } from "react";
 
+const PRE_TAG = "<|[[--";
+const POST_TAG = "--]]|>";
+
 type Props = {
   value: string;
 };
@@ -33,14 +36,14 @@ const HighlightedFragment: FC<Props> = ({ value }) => {
 
   const result = [];
   while (content.length > 0) {
-    const start = content.indexOf("<>");
-    const end = content.indexOf("</>");
+    const start = content.indexOf(PRE_TAG);
+    const end = content.indexOf(POST_TAG);
     if (start >= 0 && end > 0) {
       if (start > 0) {
         result.push(content.substring(0, start));
       }
-      result.push(<strong>{content.substring(start + 2, end)}</strong>);
-      content = content.substring(end + 3);
+      result.push(<mark>{content.substring(start + PRE_TAG.length, end)}</mark>);
+      content = content.substring(end + POST_TAG.length);
     } else {
       result.push(content);
       break;

package/src/search/SyntaxHighlightedFragment.tsx

@@ -0,0 +1,130 @@
+/*
+ * 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, ReactNode, useEffect, useMemo, useState } from "react";
+import createAdapter from "../repos/refractorAdapter";
+// @ts-ignore no types for css modules
+import theme from "../syntax-highlighting.module.css";
+import SplitAndReplace, { Replacement } from "../SplitAndReplace";
+import { AST, RefractorNode } from "refractor";
+import { determineLanguage } from "../languages";
+
+const PRE_TAG = "<|[[--";
+const POST_TAG = "--]]|>";
+const PRE_TAG_REGEX = /<\|\[\[--/g;
+const POST_TAG_REGEX = /--]]\|>/g;
+
+const adapter = createAdapter(theme);
+
+function createReplacement(textToReplace: string): Replacement {
+  return {
+    textToReplace,
+    replacement: <mark>{textToReplace}</mark>,
+    replaceAll: true
+  };
+}
+
+function mapWithDepth(depth: number, replacements: Replacement[]) {
+  return function mapChildrenWithDepth(child: RefractorNode, i: number) {
+    return mapChild(child, i, depth, replacements);
+  };
+}
+
+function isAstElement(node: RefractorNode): node is AST.Element {
+  return (node as AST.Element).tagName !== undefined;
+}
+
+function mapChild(child: RefractorNode, i: number, depth: number, replacements: Replacement[]): ReactNode {
+  if (isAstElement(child)) {
+    const className =
+      child.properties && Array.isArray(child.properties.className)
+        ? child.properties.className.join(" ")
+        : child.properties.className;
+
+    return React.createElement(
+      child.tagName,
+      Object.assign({ key: `fract-${depth}-${i}` }, child.properties, { className }),
+      child.children && child.children.map(mapWithDepth(depth + 1, replacements))
+    );
+  }
+
+  return (
+    <SplitAndReplace key={`fract-${depth}-${i}`} text={child.value} replacements={replacements} textWrapper={s => s} />
+  );
+}
+
+type Props = {
+  value: string;
+  language: string;
+};
+
+const stripAndReplace = (value: string) => {
+  const strippedValue = value.replace(PRE_TAG_REGEX, "").replace(POST_TAG_REGEX, "");
+  let content = value;
+
+  const result: string[] = [];
+  while (content.length > 0) {
+    const start = content.indexOf(PRE_TAG);
+    const end = content.indexOf(POST_TAG);
+    if (start >= 0 && end > 0) {
+      const item = content.substring(start + PRE_TAG.length, end);
+      if (!result.includes(item)) {
+        result.push(item);
+      }
+      content = content.substring(end + POST_TAG.length);
+    } else {
+      break;
+    }
+  }
+
+  result.sort((a, b) => b.length - a.length);
+
+  return {
+    strippedValue,
+    replacements: result.map(createReplacement)
+  };
+};
+
+const SyntaxHighlightedFragment: FC<Props> = ({ value, language }) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const determinedLanguage = determineLanguage(language);
+  const { strippedValue, replacements } = useMemo(() => stripAndReplace(value), [value]);
+
+  useEffect(() => {
+    adapter.loadLanguage(determinedLanguage, () => {
+      setIsLoading(false);
+    });
+  }, [determinedLanguage]);
+
+  if (isLoading) {
+    return <SplitAndReplace text={strippedValue} replacements={replacements} textWrapper={s => s} />;
+  }
+
+  const refractorNodes = adapter.highlight(strippedValue, determinedLanguage);
+  const highlightedFragment = refractorNodes.map(mapWithDepth(0, replacements));
+
+  return <>{highlightedFragment}</>;
+};
+
+export default SyntaxHighlightedFragment;

package/src/search/TextHitField.stories.tsx

@@ -0,0 +1,69 @@
+/*
+ * 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 from "react";
+import { storiesOf } from "@storybook/react";
+import { bashHit, filenameXmlHit, javaHit, markdownHit, pullRequestHit } from "../__resources__/SearchHit";
+import TextHitField from "./TextHitField";
+
+storiesOf("TextHitField", module)
+  .add("Default", () => (
+    <pre>
+      <TextHitField hit={javaHit} field={"content"} />
+    </pre>
+  ))
+  .add("Java SyntaxHighlighting", () => (
+    <pre>
+      <TextHitField hit={javaHit} field={"content"} syntaxHighlightingLanguage="java" />
+    </pre>
+  ))
+  .add("Bash SyntaxHighlighting", () => (
+    <pre>
+      <TextHitField hit={bashHit} field={"content"} syntaxHighlightingLanguage="bash" />
+    </pre>
+  ))
+  .add("Markdown SyntaxHighlighting", () => (
+    <pre>
+      <TextHitField hit={markdownHit} field={"content"} syntaxHighlightingLanguage="markdown" />
+    </pre>
+  ))
+  .add("Unknown SyntaxHighlighting", () => (
+    <pre>
+      <TextHitField hit={bashHit} field={"content"} syntaxHighlightingLanguage="__unknown__" />
+    </pre>
+  ))
+  .add("Non Content Search", () => (
+    <pre>
+      <TextHitField hit={filenameXmlHit} field={"content"} syntaxHighlightingLanguage="xml" />
+    </pre>
+  ))
+  .add("Truncate", () => (
+    <pre>
+      <TextHitField hit={pullRequestHit} field={"description"} truncateValueAt={128} />
+    </pre>
+  ))
+  .add("Truncate Keep Whole Line", () => (
+    <pre>
+      <TextHitField hit={filenameXmlHit} field={"content"} syntaxHighlightingLanguage="xml" truncateValueAt={1024} />
+    </pre>
+  ));

package/src/search/TextHitField.tsx

@@ -26,41 +26,80 @@ import React, { FC } from "react";
 import { HighlightedHitField, Hit } from "@scm-manager/ui-types";
 import HighlightedFragment from "./HighlightedFragment";
 import { isHighlightedHitField } from "./fields";
+import SyntaxHighlightedFragment from "./SyntaxHighlightedFragment";
+
+type HighlightedTextFieldProps = {
+  field: HighlightedHitField;
+  syntaxHighlightingLanguage?: string;
+};
+
+const HighlightedTextField: FC<HighlightedTextFieldProps> = ({ field, syntaxHighlightingLanguage }) => {
+  const separator = syntaxHighlightingLanguage ? "...\n" : " ... ";
+  return (
+    <>
+      {field.fragments.map((fragment, i) => (
+        <React.Fragment key={fragment}>
+          {field.matchesContentStart ? null : separator}
+          <FieldFragment fragment={fragment} syntaxHighlightingLanguage={syntaxHighlightingLanguage} />
+          {i + 1 >= field.fragments.length && !field.matchesContentEnd ? separator : null}
+        </React.Fragment>
+      ))}
+    </>
+  );
+};
+
+type FieldFragmentProps = {
+  fragment: string;
+  syntaxHighlightingLanguage?: string;
+};
+
+const FieldFragment: FC<FieldFragmentProps> = ({ fragment, syntaxHighlightingLanguage }) => {
+  if (syntaxHighlightingLanguage) {
+    return <SyntaxHighlightedFragment value={fragment} language={syntaxHighlightingLanguage} />;
+  }
+  return <HighlightedFragment value={fragment} />;
+};
 
 type Props = {
   hit: Hit;
   field: string;
   truncateValueAt?: number;
+  syntaxHighlightingLanguage?: string;
 };
 
-type HighlightedTextFieldProps = {
-  field: HighlightedHitField;
-};
-
-const HighlightedTextField: FC<HighlightedTextFieldProps> = ({ field }) => (
-  <>
-    {field.fragments.map((fr, i) => (
-      <React.Fragment key={fr}>
-        {" ... "}
-        <HighlightedFragment value={fr} />
-        {i + 1 >= field.fragments.length ? " ... " : null}
-      </React.Fragment>
-    ))}
-  </>
-);
+function truncate(value: string, truncateValueAt: number = 0, syntaxHighlightingLanguage?: string): string {
+  if (truncateValueAt > 0 && value.length > truncateValueAt) {
+    if (syntaxHighlightingLanguage) {
+      let nextLineBreak = value.indexOf("\n", truncateValueAt);
+      if (nextLineBreak >= 0 && nextLineBreak < value.length - 1) {
+        value = value.substring(0, nextLineBreak) + "\n...";
+      }
+    } else {
+      value = value.substring(0, truncateValueAt) + "...";
+    }
+  }
+  return value;
+}
 
-const TextHitField: FC<Props> = ({ hit, field: fieldName, children, truncateValueAt = 0 }) => {
+const TextHitField: FC<Props> = ({
+  hit,
+  field: fieldName,
+  children,
+  syntaxHighlightingLanguage,
+  truncateValueAt = 0
+}) => {
   const field = hit.fields[fieldName];
   if (!field) {
     return <>{children}</>;
   } else if (isHighlightedHitField(field)) {
-    return <HighlightedTextField field={field} />;
+    return <HighlightedTextField field={field} syntaxHighlightingLanguage={syntaxHighlightingLanguage} />;
   } else {
     let value = field.value;
     if (value === "") {
       return <>{children}</>;
-    } else if (typeof value === "string" && truncateValueAt > 0 && value.length > truncateValueAt) {
-      value = value.substring(0, truncateValueAt) + "...";
+    } else if (typeof value === "string") {
+      const v = truncate(value, truncateValueAt, syntaxHighlightingLanguage);
+      return <FieldFragment fragment={v} syntaxHighlightingLanguage={syntaxHighlightingLanguage} />;
     }
     return <>{value}</>;
   }

package/src/styleConstants.ts

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 
+// TODO erweitern
 export const colors = [
   "black",
   "dark",
@@ -32,7 +33,7 @@ export const colors = [
   "info",
   "success",
   "warning",
-  "danger",
+  "danger"
 ] as const;
 export type Color = typeof colors[number];
 

package/src/syntax-highlighting.module.css

@@ -1,4 +1,4 @@
-/**
+/*
  * MIT License
  *
  * Copyright (c) 2020-present Cloudogu GmbH and Contributors