add delete link to branchDto

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

@@ -22,25 +22,43 @@
  * SOFTWARE.
  */
 import React, { FC } from "react";
-import { Link } from "react-router-dom";
-import { Branch } from "@scm-manager/ui-types";
+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 { useTranslation } from "react-i18next";
 
 type Props = {
   baseUrl: string;
   branch: Branch;
+  onDelete: (url: string) => void;
 };
 
-const BranchRow: FC<Props> = ({ baseUrl, branch }) => {
+const BranchRow: FC<Props> = ({ baseUrl, branch, onDelete }) => {
   const to = `${baseUrl}/${encodeURIComponent(branch.name)}/info`;
+  const [t] = useTranslation("repos");
+
+  let deleteButton;
+  if ((branch?._links?.delete as Link)?.href) {
+    const url = (branch._links.delete as Link).href;
+    deleteButton = (
+      <a className="level-item" onClick={() => onDelete(url)}>
+        <span className="icon is-small">
+          <Icon name="trash" className="fas" title={t("branch.delete")} />
+        </span>
+      </a>
+    );
+  }
+
   return (
     <tr>
       <td>
-        <Link to={to} title={branch.name}>
+        <ReactLink to={to} title={branch.name}>
           {branch.name}
           <DefaultBranchTag defaultBranch={branch.defaultBranch} />
-        </Link>
+        </ReactLink>
       </td>
+      <td className="is-darker">{deleteButton}</td>
     </tr>
   );
 };

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

@@ -21,41 +21,39 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import React, { FC } from "react";
+import { useTranslation } from "react-i18next";
 import BranchRow from "./BranchRow";
 import { Branch } from "@scm-manager/ui-types";
 
-type Props = WithTranslation & {
+type Props = {
   baseUrl: string;
   branches: Branch[];
+  onDelete: (url: string) => void;
 };
 
-class BranchTable extends React.Component<Props> {
-  render() {
-    const { t } = this.props;
-    return (
-      <table className="card-table table is-hoverable is-fullwidth is-word-break">
-        <thead>
-          <tr>
-            <th>{t("branches.table.branches")}</th>
-          </tr>
-        </thead>
-        <tbody>{this.renderRow()}</tbody>
-      </table>
-    );
-  }
+const BranchTable: FC<Props> = ({ baseUrl, branches, onDelete }) => {
+  const [t] = useTranslation("repos");
 
-  renderRow() {
-    const { baseUrl, branches } = this.props;
+  const renderRow = () => {
     let rowContent = null;
     if (branches) {
       rowContent = branches.map((branch, index) => {
-        return <BranchRow key={index} baseUrl={baseUrl} branch={branch} />;
+        return <BranchRow key={index} baseUrl={baseUrl} branch={branch} onDelete={onDelete} />;
       });
     }
     return rowContent;
-  }
-}
+  };
+  return (
+    <table className="card-table table is-hoverable is-fullwidth is-word-break">
+      <thead>
+        <tr>
+          <th>{t("branches.table.branches")}</th>
+        </tr>
+      </thead>
+      <tbody>{renderRow()}</tbody>
+    </table>
+  );
+};
 
-export default withTranslation("repos")(BranchTable);
+export default BranchTable;

scm-ui/ui-webapp/src/repos/branches/containers/BranchesOverview.tsx

@@ -37,6 +37,7 @@ import {
 } from "../modules/branches";
 import { orderBranches } from "../util/orderBranches";
 import BranchTable from "../components/BranchTable";
+import { apiClient } from "@scm-manager/ui-components/src";
 
 type Props = WithTranslation & {
   repository: Repository;
@@ -80,11 +81,15 @@ class BranchesOverview extends React.Component<Props> {
     );
   }
 
+  onDelete(url: string) {
+    apiClient.delete(url).catch(error => this.setState({ error }));
+  }
+
   renderBranchesTable() {
     const { baseUrl, branches, t } = this.props;
     if (branches && branches.length > 0) {
       orderBranches(branches);
-      return <BranchTable baseUrl={baseUrl} branches={branches} />;
+      return <BranchTable baseUrl={baseUrl} branches={branches} onDelete={this.onDelete} />;
     }
     return <Notification type="info">{t("branches.overview.noBranches")}</Notification>;
   }