Add "annotations" button to sources view

scm-ui/ui-webapp/src/repos/sources/containers/AnnotateView.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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, useEffect, useState } from "react";
+import { Link, Repository, File } from "@scm-manager/ui-types";
+import { Annotate, apiClient, ErrorNotification, Loading } from "@scm-manager/ui-components";
+import { getContentType } from "./contentType";
+import { AnnotatedSource } from "@scm-manager/ui-components/src/Annotate";
+
+type Props = {
+  file: File;
+  repository: Repository;
+};
+
+const AnnotateView: FC<Props> = ({ file, repository }) => {
+  const [annotation, setAnnotation] = useState<AnnotatedSource>(undefined);
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const [language, setLanguage] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    getContentType(file._links.self.href)
+      .then(result => {
+        setLanguage(result.language);
+      })
+      .catch(error => {
+        setError(error);
+      });
+
+    apiClient
+      .get((file._links.annotate as Link).href)
+      .then(response => response.json())
+      .then(content => {
+        setAnnotation(content);
+      })
+      .catch(error => {
+        setError(error);
+      });
+  }, [file]);
+
+  if (error) {
+    return <ErrorNotification error={error} />;
+  } else if (annotation && language) {
+    return <Annotate source={{ ...annotation, language }} repository={repository} />;
+  } else {
+    return <Loading />;
+  }
+};
+
+export default AnnotateView;

scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx

@@ -33,6 +33,7 @@ import { getSources } from "../modules/sources";
 import FileButtonAddons from "../components/content/FileButtonAddons";
 import SourcesView from "./SourcesView";
 import HistoryView from "./HistoryView";
+import AnnotateView from "./AnnotateView";
 
 type Props = WithTranslation & {
   loading: boolean;
@@ -45,7 +46,7 @@ type Props = WithTranslation & {
 
 type State = {
   collapsed: boolean;
-  showHistory: boolean;
+  selected: SourceViewSelection;
   errorFromExtension?: Error;
 };
 
@@ -81,13 +82,15 @@ const LighterGreyBackgroundTable = styled.table`
   background-color: #fbfbfb;
 `;
 
+export type SourceViewSelection = "source" | "history" | "annotations";
+
 class Content extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
 
     this.state = {
       collapsed: true,
-      showHistory: false
+      selected: "source"
     };
   }
 
@@ -97,13 +100,6 @@ class Content extends React.Component<Props, State> {
     }));
   };
 
-  setShowHistoryState(showHistory: boolean) {
-    this.setState({
-      ...this.state,
-      showHistory
-    });
-  }
-
   handleExtensionError = (error: Error) => {
     this.setState({
       errorFromExtension: error
@@ -112,14 +108,15 @@ class Content extends React.Component<Props, State> {
 
   showHeader() {
     const { repository, file, revision } = this.props;
-    const { showHistory, collapsed } = this.state;
+    const { selected, collapsed } = this.state;
     const icon = collapsed ? "angle-right" : "angle-down";
 
     const selector = file._links.history ? (
       <RightMarginFileButtonAddons
-        file={file}
-        historyIsSelected={showHistory}
-        showHistory={(changeShowHistory: boolean) => this.setShowHistoryState(changeShowHistory)}
+        selected={selected}
+        showSources={() => this.setState({ selected: "source" })}
+        showHistory={() => this.setState({ selected: "history" })}
+        showAnnotations={() => this.setState({ selected: "annotations" })}
       />
     ) : null;
 
@@ -212,15 +209,26 @@ class Content extends React.Component<Props, State> {
 
   render() {
     const { file, revision, repository, path, breadcrumb } = this.props;
-    const { showHistory, errorFromExtension } = this.state;
+    const { selected, errorFromExtension } = this.state;
 
     const header = this.showHeader();
-    const content =
-      showHistory && file._links.history ? (
-        <HistoryView file={file} repository={repository} />
-      ) : (
-        <SourcesView revision={revision} file={file} repository={repository} path={path} />
-      );
+    let content;
+    switch (selected) {
+      case "source":
+        content = (
+          <SourcesView revision={revision} file={file} repository={repository} path={path}/>
+        );
+        break;
+      case "history":
+        content = (
+          <HistoryView file={file} repository={repository}/>
+        );
+        break;
+      case "annotations":
+        content = (
+          <AnnotateView file={file} repository={repository} />
+        );
+    }
     const moreInformation = this.showMoreInformation();
 
     return (