Show last commit of branch in ui

scm-ui/ui-webapp/src/repos/branches/components/BranchDetail.tsx

@@ -26,21 +26,45 @@ import { Branch, Repository } from "@scm-manager/ui-types";
 import { WithTranslation, withTranslation } from "react-i18next";
 import BranchButtonGroup from "./BranchButtonGroup";
 import DefaultBranchTag from "./DefaultBranchTag";
+import { DateFromNow } from "@scm-manager/ui-components";
+import styled from "styled-components";
 
 type Props = WithTranslation & {
   repository: Repository;
   branch: Branch;
 };
 
+const FlexRow = styled.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+`;
+
+const Created = styled.div`
+  margin-left: 0.5rem;
+  font-size: 0.8rem;
+`;
+
+const Label = styled.strong`
+  margin-right: 0.3rem;
+`;
+
+const Date = styled(DateFromNow)`
+  font-size: 0.8rem;
+`;
+
 class BranchDetail extends React.Component<Props> {
   render() {
     const { repository, branch, t } = this.props;
 
     return (
       <div className="media">
-        <div className="media-content subtitle">
-          <strong>{t("branch.name")}</strong> {branch.name} <DefaultBranchTag defaultBranch={branch.defaultBranch} />
-        </div>
+        <FlexRow className="media-content subtitle">
+          <Label>{t("branch.name")}</Label> {branch.name} <DefaultBranchTag defaultBranch={branch.defaultBranch} />
+          <Created className="is-ellipsis-overflow">
+            {t("tags.overview.created")} <Date date={branch.lastCommitDate} className="has-text-grey" />
+          </Created>
+        </FlexRow>
         <div className="media-right">
           <BranchButtonGroup repository={repository} branch={branch} />
         </div>

scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx

@@ -25,8 +25,9 @@ import React, { FC } from "react";
 import { Link as ReactLink } from "react-router-dom";
 import { Branch, Link } from "@scm-manager/ui-types";
 import DefaultBranchTag from "./DefaultBranchTag";
-import { Icon } from "@scm-manager/ui-components";
+import { DateFromNow, Icon } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
+import styled from "styled-components";
 
 type Props = {
   baseUrl: string;
@@ -34,6 +35,11 @@ type Props = {
   onDelete: (branch: Branch) => void;
 };
 
+const Created = styled.span`
+  margin-left: 1rem;
+  font-size: 0.8rem;
+`;
+
 const BranchRow: FC<Props> = ({ baseUrl, branch, onDelete }) => {
   const to = `${baseUrl}/${encodeURIComponent(branch.name)}/info`;
   const [t] = useTranslation("repos");
@@ -56,6 +62,9 @@ const BranchRow: FC<Props> = ({ baseUrl, branch, onDelete }) => {
           {branch.name}
           <DefaultBranchTag defaultBranch={branch.defaultBranch} />
         </ReactLink>
+        <Created className="has-text-grey is-ellipsis-overflow">
+          {t("branches.table.lastCommit")} <DateFromNow date={branch.lastCommitDate} />
+        </Created>
       </td>
       <td className="is-darker">{deleteButton}</td>
     </tr>