Fix branch action & details rendering conditions

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

@@ -22,18 +22,18 @@
  * SOFTWARE.
  */
 
-import { Dialog, Menu } from "@scm-manager/ui-overlays";
+import { Card, CardList } from "@scm-manager/ui-layout";
-import { Icon } from "@scm-manager/ui-buttons";
-import { CardList, Card } from "@scm-manager/ui-layout";
 import { Link } from "react-router-dom";
 import { encodePart } from "../../sources/components/content/FileLink";
 import { useKeyboardIteratorTarget } from "@scm-manager/ui-shortcuts";
 import { Trans, useTranslation } from "react-i18next";
 import { DateFromNow } from "@scm-manager/ui-components";
-import { ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
+import { ExtensionPoint, extensionPoints, useBinder } from "@scm-manager/ui-extensions";
 import React, { FC } from "react";
 import { Branch, BranchDetails, Repository } from "@scm-manager/ui-types";
 import AheadBehindTag from "./AheadBehindTag";
+import { Dialog, Menu } from "@scm-manager/ui-overlays";
+import { Icon } from "@scm-manager/ui-buttons";
 
 type Props = {
   branch: Branch;
@@ -46,13 +46,29 @@ type Props = {
 
 const BranchListItem: FC<Props> = ({ branch, remove, isLoading, branchesDetails, baseUrl, repository }) => {
   const [t] = useTranslation("repos");
+  const binder = useBinder();
   const branchDetails = branchesDetails?.find(({ branchName }) => branchName === branch.name);
+  const canDelete = "delete" in branch._links;
+  const hasAction =
+    canDelete ||
+    binder.hasExtension<extensionPoints.BranchListMenu>("branches.list.menu", {
+      repository,
+      branch,
+    });
+  const hasDetails =
+    !branch.defaultBranch ||
+    binder.hasExtension<extensionPoints.BranchListDetail>("branches.list.detail", {
+      branch,
+      branchDetails,
+      repository,
+    });
   return (
     <CardList.Card
       key={branch.name}
       action={
-        "delete" in branch._links ? (
+        hasAction ? (
           <Menu>
+            {canDelete ? (
               <Menu.DialogButton
                 title={t("branch.delete.confirmAlert.title")}
                 description={t("branch.delete.confirmAlert.message", { branch: branch.name })}
@@ -68,6 +84,7 @@ const BranchListItem: FC<Props> = ({ branch, remove, isLoading, branchesDetails,
                 <Icon>trash</Icon>
                 {t("branch.delete.button")}
               </Menu.DialogButton>
+            ) : null}
             <ExtensionPoint<extensionPoints.BranchListMenu>
               name="branches.list.menu"
               props={{
@@ -100,18 +117,19 @@ const BranchListItem: FC<Props> = ({ branch, remove, isLoading, branchesDetails,
           }}
         />
       </Card.Row>
+      {hasDetails ? (
         <Card.Row>
           <Card.Details>
+            {!branch.defaultBranch ? (
               <Card.Details.Detail>
                 {({ labelId }) => (
                   <>
-                <Card.Details.Detail.Label id={labelId}>
+                    <Card.Details.Detail.Label id={labelId}>{t("branch.aheadBehind.label")}</Card.Details.Detail.Label>
-                  {branch.defaultBranch ? null : t("branch.aheadBehind.label")}
-                </Card.Details.Detail.Label>
                     <AheadBehindTag branch={branch} details={branchDetails} labelId={labelId} />
                   </>
                 )}
               </Card.Details.Detail>
+            ) : null}
             <ExtensionPoint<extensionPoints.BranchListDetail>
               name="branches.list.detail"
               props={{
@@ -123,6 +141,7 @@ const BranchListItem: FC<Props> = ({ branch, remove, isLoading, branchesDetails,
             />
           </Card.Details>
         </Card.Row>
+      ) : null}
     </CardList.Card>
   );
 };