expose baseurl in SourceExtensions for breadcrumb

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`}

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,9 +141,10 @@ 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>
@@ -167,6 +180,8 @@ class Content extends React.Component<Props, State> {
               </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} />}

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>;
     }