Add delete branch #956 (#991)

treeverse · Dec 9, 2020 · 93b4222 · 93b4222
1 parent 25b7cba
commit 93b4222
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 4 deletions.
diff --git a/webui/src/actions/api.js b/webui/src/actions/api.js
@@ -404,6 +404,15 @@ class Branches {
         return response.json();
     }
 
+    async delete(repoId, name) {
+        const response = await apiRequest(`/repositories/${repoId}/branches/${name}`, {
+            method: 'DELETE',
+        });
+        if (response.status !== 204) {
+            throw new Error(await extractError(response));
+        }
+    }
+
     async revert(repoId, branch, options) {
         const response = await apiRequest(`/repositories/${repoId}/branches/${branch}`, {
             method: 'PUT',

diff --git a/webui/src/actions/branches.js b/webui/src/actions/branches.js
@@ -5,6 +5,7 @@ export const PAGINATION_AMOUNT = 300;
 export const BRANCHES_LIST = new AsyncActionType('BRANCHES_LIST');
 export const BRANCHES_LIST_PAGINATE = new AsyncActionType('BRANCHES_LIST_PAGINATE');
 export const BRANCHES_CREATE = new AsyncActionType('BRANCHES_CREATE');
+export const BRANCHES_DELETE = new AsyncActionType('BRANCHES_DELETE');
 export const BRANCHES_REVERT = new AsyncActionType('BRANCHES_REVERT');
 
 export const listBranches = (repoId, from = "", amount = PAGINATION_AMOUNT) => {
@@ -29,6 +30,12 @@ export const resetBranch = () => ({
     ...BRANCHES_CREATE.resetAction(),
 });
 
+export const deleteBranch = (repoId, branchName) => {
+    return BRANCHES_DELETE.execute(async () => {
+        return await api.branches.delete(repoId, branchName)
+    })
+};
+
 export const revertBranch = (repoId, branchName, options) =>
     BRANCHES_REVERT.execute(() => api.branches.revert(repoId, branchName, options));
 

diff --git a/webui/src/components/BranchesPage.js b/webui/src/components/BranchesPage.js
@@ -2,11 +2,11 @@ import React, {useMemo, useEffect, useRef, useState} from "react";
 
 import ButtonToolbar from "react-bootstrap/ButtonToolbar";
 import {connect} from "react-redux";
-import {listBranches, listBranchesPaginate, createBranch, resetBranch} from "../actions/branches";
+import {listBranches, listBranchesPaginate, createBranch, resetBranch, deleteBranch} from "../actions/branches";
 import Modal from "react-bootstrap/Modal";
 import Form from "react-bootstrap/Form";
 import Button from "react-bootstrap/Button";
-import {GitBranchIcon, LinkIcon, LinkExternalIcon, BrowserIcon} from "@primer/octicons-react";
+import {GitBranchIcon, LinkIcon, LinkExternalIcon, BrowserIcon, TrashcanIcon} from "@primer/octicons-react";
 import Alert from "react-bootstrap/Alert";
 import ListGroup from "react-bootstrap/ListGroup";
 import ListGroupItem from "react-bootstrap/ListGroupItem";
@@ -17,6 +17,7 @@ import ClipboardButton from "./ClipboardButton";
 import OverlayTrigger from "react-bootstrap/OverlayTrigger";
 import Tooltip from "react-bootstrap/Tooltip";
 import RefDropdown from "./RefDropdown";
+import ConfirmationModal from "./ConfirmationModal"
 import {Link} from "react-router-dom";
 
 
@@ -96,9 +97,27 @@ const CreateBranchButton = connect(
     );
 });
 
-const BranchesPage = ({repo, branches, listBranches, listBranchesPaginate, createStatus }) => {
+const BranchesPage = connect(
+    ({ branches }) => ({ deleteStatus: branches.delete }),
+    ({ deleteBranch })
+)(({repo, branches, listBranches, listBranchesPaginate, createStatus, deleteBranch, deleteStatus }) => {
 
     const buttonVariant = "secondary";
+    const [selectedBranch, setSelectedBranch] = useState("");
+    const [show,setShow] = useState(false);
+
+    const inProgress = deleteStatus.inProgress;
+
+    const handleClose = () => {
+        setShow(false);
+    }
+    const handleShow = () => setShow(true);
+
+    const onSubmit = () => {
+        if (inProgress) return;
+        deleteBranch(repo.id, selectedBranch);
+        handleClose();
+    }
 
     useEffect(() => {
         listBranches(repo.id, "");
@@ -109,6 +128,12 @@ const BranchesPage = ({repo, branches, listBranches, listBranchesPaginate, creat
             listBranches(repo.id, "");
     }, [listBranches, createStatus.done, repo.id]);
 
+    useEffect(() => {
+        if (deleteStatus.done){
+            listBranches(repo.id, "");
+            }
+    }, [listBranches, deleteStatus.done, repo.id]);
+
 
     let body;
     if (branches.loading) {
@@ -131,6 +156,18 @@ const BranchesPage = ({repo, branches, listBranches, listBranchesPaginate, creat
                                 </div>
                                 <div className="float-right">
                                     <ButtonGroup className="branch-actions">
+                                        {(repo.default_branch !== branch) ? 
+                                        (<OverlayTrigger placement="bottom" overlay={<Tooltip>delete the branch</Tooltip>}>
+                                            <Button variant={buttonVariant} 
+                                                onClick={() =>{
+                                                    setSelectedBranch(branch);
+                                                    handleShow();
+                                                    }
+                                            }>
+                                            <TrashcanIcon/>
+                                            </Button> 
+                                        </OverlayTrigger>) : 
+                                        (<span/>)}
                                         <ClipboardButton variant={buttonVariant} text={`s3://${repo.id}/${branch}/`} tooltip="copy S3 URI to clipboard" icon={<LinkExternalIcon/>}/>
                                         <ClipboardButton variant={buttonVariant} text={`lakefs://${repo.id}@${branch}`} tooltip="copy URI to clipboard" icon={<LinkIcon/>}/>
                                         <ClipboardButton variant={buttonVariant} text={branch} tooltip="copy ID to clipboard"/>
@@ -145,6 +182,7 @@ const BranchesPage = ({repo, branches, listBranches, listBranchesPaginate, creat
                                             </Button>
                                         </OverlayTrigger>
                                     </ButtonGroup>
+                                    <ConfirmationModal show={show} onHide={handleClose} msg={`are you sure you wish to delete branch ${selectedBranch}?`} onConfirm={onSubmit}/>
                                 </div>
                             </div>
                         </ListGroupItem>
@@ -172,7 +210,7 @@ const BranchesPage = ({repo, branches, listBranches, listBranchesPaginate, creat
             {body}
         </div>
     );
-};
+});
 
 export default connect(
     ({ branches }) => ({ branches: branches.list, createStatus: branches.create }),

diff --git a/webui/src/store/branches.js b/webui/src/store/branches.js
@@ -2,6 +2,7 @@ import * as async from './async';
 
 import {
     BRANCHES_CREATE,
+    BRANCHES_DELETE,
     BRANCHES_REVERT,
     BRANCHES_LIST,
     BRANCHES_LIST_PAGINATE,
@@ -11,6 +12,7 @@ import {
 const initialState = {
     list: async.initialState,
     create: async.actionInitialState,
+    delete: async.actionInitialState,
     revert: async.actionInitialState,
 };
 
@@ -19,6 +21,7 @@ const store = (state = initialState, action) => {
         ...state,
         list: async.reduce(BRANCHES_LIST, state.list, action),
         create: async.actionReduce(BRANCHES_CREATE, state.create, action),
+        delete: async.actionReduce(BRANCHES_DELETE,state.delete, action),
         revert: async.actionReduce(BRANCHES_REVERT, state.revert, action),
     };