New extension point (for readme) in code overview

The readme files should be rendered in the code overview below
the file tree and not in a separate page. To render the readme file,
a new extension point was added. The order of items in the side
menu also got changed.

gradle/changelog/readme-changes.yaml

@@ -0,0 +1,6 @@
+- type: added
+  description: A new extension point was added, that is rendered below the file tree in the code view, it is for example used by the readme plugin, to render the readme document of the current directory
+- type: changed
+  description: The headings of rendered markdown documents will now start at h2
+- type: changed
+  description: The order of items in the repository side menu got changed, code is now always at the top

scm-ui/ui-components/src/index.ts

@@ -90,6 +90,7 @@ export * from "./devices";
 export { default as copyToClipboard } from "./CopyToClipboard";
 export { createA11yId } from "./createA11yId";
 export { useSecondaryNavigation } from "./useSecondaryNavigation";
+export { default as useScrollToElement } from "./useScrollToElement";
 
 export { default as comparators } from "./comparators";
 

scm-ui/ui-components/src/markdown/remarkToRehypeRendererAdapters.ts

@@ -58,7 +58,7 @@ export const createRemark2RehypeHeadingRendererAdapterFactory = (remarkRenderer:
     ({ node, children }: any) => {
       const renderProps = {
         id: node.properties.id,
-        level,
+        level: Math.min(level + 1, 6),
         permalink,
       };
       children = children || [];

scm-ui/ui-extensions/src/extensionPoints.tsx

@@ -402,6 +402,11 @@ export type ReposSourcesContentActionBar = RenderableExtensionPointDefinition<
   }
 >;
 
+export type RepositoryCodeOverviewContent = RenderableExtensionPointDefinition<
+  "repository.code.sources.content",
+  { sources: File; repository: Repository }
+>;
+
 export type RepositoryNavigation = RenderableExtensionPointDefinition<
   "repository.navigation",
   { repository: Repository; url: string; indexLinks: Links }

scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx

@@ -34,7 +34,6 @@ import {
   FileControlFactory,
   HealthCheckFailureDetail,
   JumpToFileButton,
-  Loading,
   NavLink,
   Page,
   PrimaryContentColumn,
@@ -44,6 +43,7 @@ import {
   SubNavigation,
   urls,
 } from "@scm-manager/ui-components";
+import { Loading } from "@scm-manager/ui-core";
 import RepositoryDetails from "../components/RepositoryDetails";
 import EditRepo from "./EditRepo";
 import BranchesOverview from "../branches/containers/BranchesOverview";
@@ -349,6 +349,16 @@ const RepositoryRoot = () => {
           </PrimaryContentColumn>
           <SecondaryNavigationColumn>
             <SecondaryNavigation label={t("repositoryRoot.menu.navigationLabel")}>
+              <RepositoryNavLink
+                repository={repository}
+                linkName={codeLinkname}
+                to={evaluateDestinationForCodeLink()}
+                icon="fas fa-code"
+                label={t("repositoryRoot.menu.sourcesNavLink")}
+                activeWhenMatch={matchesCode}
+                activeOnlyWhenExact={false}
+                title={t("repositoryRoot.menu.sourcesNavLink")}
+              />
               <ExtensionPoint<extensionPoints.RepositoryNavigationTopLevel>
                 name="repository.navigation.topLevel"
                 props={extensionProps}
@@ -380,16 +390,6 @@ const RepositoryRoot = () => {
                 activeOnlyWhenExact={false}
                 title={t("repositoryRoot.menu.tagsNavLink")}
               />
-              <RepositoryNavLink
-                repository={repository}
-                linkName={codeLinkname}
-                to={evaluateDestinationForCodeLink()}
-                icon="fas fa-code"
-                label={t("repositoryRoot.menu.sourcesNavLink")}
-                activeWhenMatch={matchesCode}
-                activeOnlyWhenExact={false}
-                title={t("repositoryRoot.menu.sourcesNavLink")}
-              />
               <ExtensionPoint<extensionPoints.RepositoryNavigation>
                 name="repository.navigation"
                 props={extensionProps}

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

@@ -21,12 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC, useEffect } from "react";
+import React, { FC, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation, useParams } from "react-router-dom";
 import { RepositoryRevisionContextProvider, urls, useSources } from "@scm-manager/ui-api";
 import { Branch, Repository } from "@scm-manager/ui-types";
-import { Breadcrumb, ErrorNotification, Loading, Notification } from "@scm-manager/ui-components";
+import { Breadcrumb } from "@scm-manager/ui-components";
+import { Notification, ErrorNotification, Loading } from "@scm-manager/ui-core";
 import FileTree from "../components/FileTree";
 import Content from "./Content";
 import CodeActionBar from "../../codeSection/components/CodeActionBar";
@@ -35,6 +36,8 @@ import FileSearchButton from "../../codeSection/components/FileSearchButton";
 import { isEmptyDirectory, isRootFile } from "../utils/files";
 import CompareLink from "../../compare/CompareLink";
 import { encodePart } from "../components/content/FileLink";
+import { ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
+import { useScrollToElement } from "@scm-manager/ui-components";
 
 type Props = {
   repository: Repository;
@@ -61,15 +64,22 @@ const Sources: FC<Props> = ({ repository, branches, selectedBranch, baseUrl }) =
   const history = useHistory();
   const location = useLocation();
   const [t] = useTranslation("repos");
+  const [contentRef, setContentRef] = useState<HTMLElement | null>();
+
+  useScrollToElement(contentRef, () => location.hash, location.hash);
+
   // redirect to default branch if no branch selected
   useEffect(() => {
     if (branches && branches.length > 0 && !selectedBranch) {
       const defaultBranch = branches?.filter((b) => b.defaultBranch === true)[0];
       history.replace(
-        `${baseUrl}/sources/${defaultBranch ? encodePart(defaultBranch.name) : encodePart(branches[0].name)}/`
+        `${baseUrl}/sources/${defaultBranch ? encodePart(defaultBranch.name) : encodePart(branches[0].name)}/${
+          location.hash
+        }`
       );
     }
-  }, [branches, selectedBranch, history, baseUrl]);
+  }, [branches, selectedBranch, history, baseUrl, location.hash]);
+
   const {
     isLoading,
     error,
@@ -108,7 +118,7 @@ const Sources: FC<Props> = ({ repository, branches, selectedBranch, baseUrl }) =
     } else {
       return;
     }
-    history.push(url);
+    history.push(`${url}${location.hash}`);
   };
 
   const evaluateSwitchViewLink = () => {
@@ -202,20 +212,27 @@ const Sources: FC<Props> = ({ repository, branches, selectedBranch, baseUrl }) =
 
   return (
     <RepositoryRevisionContextProvider revision={revision}>
-      {hasBranchesWhenSupporting(repository) && (
-        <CodeActionBar
-          selectedBranch={selectedBranch}
-          branches={branches}
-          onSelectBranch={onSelectBranch}
-          switchViewLink={evaluateSwitchViewLink()}
-          actions={
-            branches && selectedBranch ? (
-              <CompareLink repository={repository} source={encodeURIComponent(selectedBranch)} />
-            ) : null
-          }
+      <div ref={setContentRef}>
+        {hasBranchesWhenSupporting(repository) && (
+          <CodeActionBar
+            selectedBranch={selectedBranch}
+            branches={branches}
+            onSelectBranch={onSelectBranch}
+            switchViewLink={evaluateSwitchViewLink()}
+            actions={
+              branches && selectedBranch ? (
+                <CompareLink repository={repository} source={encodeURIComponent(selectedBranch)} />
+              ) : null
+            }
+          />
+        )}
+        {renderPanelContent()}
+        <ExtensionPoint<extensionPoints.RepositoryCodeOverviewContent>
+          name="repository.code.sources.content"
+          props={{ sources: file, repository }}
+          renderAll={true}
         />
-      )}
-      {renderPanelContent()}
+      </div>
     </RepositoryRevisionContextProvider>
   );
 };