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,28 +46,45 @@ 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>
-            <Menu.DialogButton
+            {canDelete ? (
-              title={t("branch.delete.confirmAlert.title")}
+              <Menu.DialogButton
-              description={t("branch.delete.confirmAlert.message", { branch: branch.name })}
+                title={t("branch.delete.confirmAlert.title")}
-              footer={[
+                description={t("branch.delete.confirmAlert.message", { branch: branch.name })}
-                <Dialog.CloseButton key="yes" onClick={() => remove(branch)} isLoading={isLoading}>
+                footer={[
-                  {t("branch.delete.confirmAlert.submit")}
+                  <Dialog.CloseButton key="yes" onClick={() => remove(branch)} isLoading={isLoading}>
-                </Dialog.CloseButton>,
+                    {t("branch.delete.confirmAlert.submit")}
-                <Dialog.CloseButton key="no" variant="primary" autoFocus>
+                  </Dialog.CloseButton>,
-                  {t("branch.delete.confirmAlert.cancel")}
+                  <Dialog.CloseButton key="no" variant="primary" autoFocus>
-                </Dialog.CloseButton>,
+                    {t("branch.delete.confirmAlert.cancel")}
-              ]}
+                  </Dialog.CloseButton>,
-            >
+                ]}
-              <Icon>trash</Icon>
+              >
-              {t("branch.delete.button")}
+                <Icon>trash</Icon>
-            </Menu.DialogButton>
+                {t("branch.delete.button")}
+              </Menu.DialogButton>
+            ) : null}
             <ExtensionPoint<extensionPoints.BranchListMenu>
               name="branches.list.menu"
               props={{
@@ -100,29 +117,31 @@ const BranchListItem: FC<Props> = ({ branch, remove, isLoading, branchesDetails,
           }}
         />
       </Card.Row>
-      <Card.Row>
+      {hasDetails ? (
-        <Card.Details>
+        <Card.Row>
-          <Card.Details.Detail>
+          <Card.Details>
-            {({ labelId }) => (
+            {!branch.defaultBranch ? (
-              <>
+              <Card.Details.Detail>
-                <Card.Details.Detail.Label id={labelId}>
+                {({ labelId }) => (
-                  {branch.defaultBranch ? null : t("branch.aheadBehind.label")}
+                  <>
-                </Card.Details.Detail.Label>
+                    <Card.Details.Detail.Label id={labelId}>{t("branch.aheadBehind.label")}</Card.Details.Detail.Label>
-                <AheadBehindTag branch={branch} details={branchDetails} labelId={labelId} />
+                    <AheadBehindTag branch={branch} details={branchDetails} labelId={labelId} />
-              </>
+                  </>
-            )}
+                )}
-          </Card.Details.Detail>
+              </Card.Details.Detail>
-          <ExtensionPoint<extensionPoints.BranchListDetail>
+            ) : null}
-            name="branches.list.detail"
+            <ExtensionPoint<extensionPoints.BranchListDetail>
-            props={{
+              name="branches.list.detail"
-              repository,
+              props={{
-              branch,
+                repository,
-              branchDetails,
+                branch,
-            }}
+                branchDetails,
-            renderAll
+              }}
-          />
+              renderAll
-        </Card.Details>
+            />
-      </Card.Row>
+          </Card.Details>
+        </Card.Row>
+      ) : null}
     </CardList.Card>
   );
 };