From 28f13199354824517aaed99811dfbb4db2cd47f8 Mon Sep 17 00:00:00 2001
From: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Date: Thu, 9 Jan 2020 13:43:04 +0100
Subject: [PATCH] expose baseurl in SourceExtensions for breadcrumb

---
 .../src/repos/containers/RepositoryRoot.tsx   |  2 +-
 .../src/repos/sources/containers/Content.tsx  | 91 +++++++++++--------
 .../sources/containers/SourceExtensions.tsx   |  8 +-
 3 files changed, 58 insertions(+), 43 deletions(-)

diff --git a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
index 2248f0239a..4aa3010934 100644
--- a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
@@ -147,7 +147,7 @@ class RepositoryRoot extends React.Component<Props> {
               />
               <Route
                 path={`${url}/code/sourceext/:extension/:revision/:path*`}
-                render={() => <SourceExtensions repository={repository} />}
+                render={() => <SourceExtensions repository={repository} baseUrl={`${url}/code/sources`} />}
               />
               <Route
                 path={`${url}/code`}
diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
index 28118ee52e..5a050194cd 100644
--- a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
@@ -26,6 +26,14 @@ type State = {
   errorFromExtension?: Error;
 };
 
+const Header = styled.div`
+  border-bottom: solid 1px #dbdbdb;
+  font-size: 1.25em;
+  font-weight: 300;
+  line-height: 1.25;
+  padding: 0.5em 0.75em;
+`;
+
 const VCenteredChild = styled.div`
   align-items: center;
 `;
@@ -38,6 +46,10 @@ const RightMarginFileButtonAddons = styled(FileButtonAddons)`
   margin-right: 0.5em;
 `;
 
+const BorderBottom = styled.div`
+  border-bottom: solid 1px #dbdbdb;
+`;
+
 const LighterGreyBackgroundPanelBlock = styled.div`
   background-color: #fbfbfb;
 `;
@@ -129,44 +141,47 @@ class Content extends React.Component<Props, State> {
         })}
       </p>
     ) : null;
-    const fileSize = file.directory ? "" : <FileSize bytes={file.length} />;
+    const fileSize = file.directory ? "" : <FileSize bytes={file?.length ? file.length : 0} />;
     if (!collapsed) {
       return (
-        <LighterGreyBackgroundPanelBlock className="panel-block">
-          <LighterGreyBackgroundTable className="table">
-            <tbody>
-              <tr>
-                <td>{t("sources.content.path")}</td>
-                <td className="is-word-break">{file.path}</td>
-              </tr>
-              <tr>
-                <td>{t("sources.content.branch")}</td>
-                <td className="is-word-break">{revision}</td>
-              </tr>
-              <tr>
-                <td>{t("sources.content.size")}</td>
-                <td>{fileSize}</td>
-              </tr>
-              <tr>
-                <td>{t("sources.content.commitDate")}</td>
-                <td>{date}</td>
-              </tr>
-              <tr>
-                <td>{t("sources.content.description")}</td>
-                <td className="is-word-break">{description}</td>
-              </tr>
-              <ExtensionPoint
-                name="repos.content.metadata"
-                renderAll={true}
-                props={{
-                  file,
-                  repository,
-                  revision
-                }}
-              />
-            </tbody>
-          </LighterGreyBackgroundTable>
-        </LighterGreyBackgroundPanelBlock>
+        <>
+          <LighterGreyBackgroundPanelBlock className="panel-block">
+            <LighterGreyBackgroundTable className="table">
+              <tbody>
+                <tr>
+                  <td>{t("sources.content.path")}</td>
+                  <td className="is-word-break">{file.path}</td>
+                </tr>
+                <tr>
+                  <td>{t("sources.content.branch")}</td>
+                  <td className="is-word-break">{revision}</td>
+                </tr>
+                <tr>
+                  <td>{t("sources.content.size")}</td>
+                  <td>{fileSize}</td>
+                </tr>
+                <tr>
+                  <td>{t("sources.content.commitDate")}</td>
+                  <td>{date}</td>
+                </tr>
+                <tr>
+                  <td>{t("sources.content.description")}</td>
+                  <td className="is-word-break">{description}</td>
+                </tr>
+                <ExtensionPoint
+                  name="repos.content.metadata"
+                  renderAll={true}
+                  props={{
+                    file,
+                    repository,
+                    revision
+                  }}
+                />
+              </tbody>
+            </LighterGreyBackgroundTable>
+          </LighterGreyBackgroundPanelBlock>
+          <BorderBottom />
+        </>
       );
     }
     return null;
@@ -188,9 +203,9 @@ class Content extends React.Component<Props, State> {
     return (
       <div>
         <div className="panel">
-          <div className="panel-heading">{header}</div>
-          {moreInformation}
           {breadcrumb}
+          <Header>{header}</Header>
+          {moreInformation}
           {content}
         </div>
         {errorFromExtension && <ErrorNotification error={errorFromExtension} />}
diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/SourceExtensions.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/SourceExtensions.tsx
index 64a1184978..95044fc76f 100644
--- a/scm-ui/ui-webapp/src/repos/sources/containers/SourceExtensions.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/SourceExtensions.tsx
@@ -5,13 +5,13 @@ import { RouteComponentProps, withRouter } from "react-router-dom";
 import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 import { fetchSources, getFetchSourcesFailure, getSources, isFetchSourcesPending } from "../modules/sources";
 import { connect } from "react-redux";
-import { ErrorNotification, Loading } from "@scm-manager/ui-components";
-import Notification from "@scm-manager/ui-components/src/Notification";
+import { ErrorNotification, Loading, Notification } from "@scm-manager/ui-components";
 import { WithTranslation, withTranslation } from "react-i18next";
 
 type Props = WithTranslation &
   RouteComponentProps & {
     repository: Repository;
+    baseUrl: string;
 
     // url params
     extension: string;
@@ -37,7 +37,7 @@ class SourceExtensions extends React.Component<Props> {
   }
 
   render() {
-    const { loading, error, repository, extension, revision, path, sources, t } = this.props;
+    const { loading, error, repository, extension, revision, path, sources, baseUrl, t } = this.props;
     if (error) {
       return <ErrorNotification error={error} />;
     }
@@ -45,7 +45,7 @@ class SourceExtensions extends React.Component<Props> {
       return <Loading />;
     }
 
-    const extprops = { extension, repository, revision, path, sources };
+    const extprops = { extension, repository, revision, path, sources, baseUrl };
     if (!binder.hasExtension(extensionPointName, extprops)) {
       return <Notification type="warning">{t("sources.extension.notBound")}</Notification>;
     }