Merge pull request #1265 from scm-manager/feature/numbers_in_source

Feature/numbers in source

docs/de/user/repo/code.md

@@ -42,6 +42,11 @@ Nach einem Klick auf eine Datei in den Sources landet man in der Detailansicht d
 
 ![Repository-Code-FileDetails](assets/repository-code-fileViewer.png)
 
+### Datei Annotate
+Ergänzt jede Codezeile mit entsprechenden Informationen, wann und von welchem Autor diese zuletzt geändert wurde. Mit einem Hover auf der linken Seite erscheint ein Popover mit Changeset und weiteren Informationen.
+
+![Repository-Code-FileAnnotate](assets/repository-code-fileAnnotate.png)
+
 ### Datei Historie
 Bei der Datei Details Ansicht kann man über einen Switch oben rechts auf die Historien-Ansicht wechseln. Dort werden die Commits aufgelistet, die diese Datei verändert haben.
 

docs/en/user/repo/code.md

@@ -43,6 +43,11 @@ After clicking on a file in the sources, the details of the file are shown. Depe
 
 ![Repository-Code-FileDetails](assets/repository-code-fileViewer.png)
 
+### File Annotate
+Supplements each line of code with the relevant information when and by which author it was last modified. With a hover on the left side a popover with changeset and further information appears.
+
+![Repository-Code-FileAnnotate](assets/repository-code-fileAnnotate.png)
+
 ### File History
 In the detailed file view there is a switch button in the upper right corner which allows to switch to the history view. The history shows all commits that changed the file.
 

scm-ui/ui-components/src/SyntaxHighlighter.stories.tsx

@@ -55,4 +55,9 @@ storiesOf("SyntaxHighlighter", module)
     <Spacing>
       <SyntaxHighlighter language="python" value={PyHttpServer} />
     </Spacing>
+  ))
+  .add("Without line numbers", () => (
+    <Spacing>
+      <SyntaxHighlighter language="java" value={JavaHttpServer} showLineNumbers={false} />
+    </Spacing>
   ));

scm-ui/ui-components/src/SyntaxHighlighter.tsx

@@ -30,13 +30,15 @@ import { arduinoLight } from "react-syntax-highlighter/dist/cjs/styles/hljs";
 type Props = {
   language?: string;
   value: string;
+  showLineNumbers?: boolean;
 };
 
 const defaultLanguage = "text";
 
 class SyntaxHighlighter extends React.Component<Props> {
   static defaultProps: Partial<Props> = {
-    language: defaultLanguage
+    language: defaultLanguage,
+    showLineNumbers: true
   };
 
   getLanguage = () => {
@@ -48,9 +50,10 @@ class SyntaxHighlighter extends React.Component<Props> {
   };
 
   render() {
+    const { showLineNumbers } = this.props;
     const language = this.getLanguage();
     return (
-      <ReactSyntaxHighlighter showLineNumbers={false} language={language} style={arduinoLight}>
+      <ReactSyntaxHighlighter showLineNumbers={showLineNumbers} language={language} style={arduinoLight}>
         {this.props.value}
       </ReactSyntaxHighlighter>
     );