Skip to content

Commit

Permalink
Implemented #653
Browse files Browse the repository at this point in the history
  • Loading branch information
@shamikakumar
shamikakumar committed Oct 7, 2020
1 parent f2f2416 commit 0030f9a
Show file tree
Hide file tree
Showing 5 changed files with 166 additions and 73 deletions.
36 changes: 22 additions & 14 deletions webui/src/components/Changes.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, {useState} from "react";
import Alert from "react-bootstrap/Alert";
import Table from "react-bootstrap/Table";
import {
Expand All @@ -15,25 +15,33 @@ import {connect} from "react-redux";
import {listBranches} from "../actions/branches";
import Card from "react-bootstrap/Card";
import {resetRevertBranch, revertBranch} from "../actions/branches";
import ConfirmationModal from "./ConfirmationModal";

const ChangeRowActions = connect(
({ branches }) => ({ revert: branches.revert }),
({ revertBranch, resetRevertBranch })
)(({repo, refId, entry, revertBranch, revert}) => {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const revertConfirmMsg = `are you sure you wish to revert "${entry.path}" (${entry.type})?`
const onSubmit = () => revertBranch(repo.id, refId.id, {type: "object", path: entry.path});

return (
<OverlayTrigger key={"bottom"} overlay={(<Tooltip id={"revert-entry"}>revert change</Tooltip>)}>
<Button variant="link" disabled={revert.inProgress} onClick={(e) => {
e.preventDefault();
if (revert.inProgress) {
return;
}
if (window.confirm(`are you sure you wish to revert "${entry.path}" (${entry.type})?`)) {
revertBranch(repo.id, refId.id, {type: "object", path: entry.path});
}
}} >
<HistoryIcon/>
</Button>
</OverlayTrigger>
<>
<OverlayTrigger key={"bottom"} overlay={(<Tooltip id={"revert-entry"}>revert change</Tooltip>)}>
<Button variant="link" disabled={revert.inProgress} onClick={(e) => {
e.preventDefault();
if (revert.inProgress) {
return;
}
handleShow();
}} >
<HistoryIcon/>
</Button>
</OverlayTrigger>
<ConfirmationModal show={show} onHide={handleClose} msg={revertConfirmMsg} onConfirm={onSubmit}></ConfirmationModal>
</>
);
});

Expand Down
56 changes: 33 additions & 23 deletions webui/src/components/Tree.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import {connect} from "react-redux";
import {listBranches} from "../actions/branches";
import ConfirmationModal from "./ConfirmationModal";


const humanSize = (bytes) => {
Expand Down Expand Up @@ -120,31 +121,40 @@ const Na = () => (<span>&mdash;</span>);

const EntryRowActions = ({repo, refId, entry, onDelete}) => {
const [isDropdownOpen, setDropdownOpen] = useState(false);
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const deleteConfirmMsg = `are you sure you wish to delete object "${entry.path}"?`;
const onSubmit = () => onDelete(entry);
return (
<Dropdown alignRight onToggle={setDropdownOpen}>
<Dropdown.Toggle as={React.forwardRef(({onClick, children}, ref) => {
return (
<Button variant="link" onClick={e => {
<>
<Dropdown alignRight onToggle={setDropdownOpen}>
<Dropdown.Toggle as={React.forwardRef(({onClick, children}, ref) => {
return (
<Button variant="link" onClick={e => {
e.preventDefault();
onClick(e);
}} ref={ref}>
{children}
</Button>
);
})}>
{isDropdownOpen ? <ChevronUpIcon/> : <ChevronDownIcon/>}
</Dropdown.Toggle>

<Dropdown.Menu>
<PathLink path={entry.path} refId={refId} repoId={repo.id}
as={Dropdown.Item}><DownloadIcon/> {' '} Download</PathLink>
<Dropdown.Item onClick={(e) => {
e.preventDefault();
onClick(e);
}} ref={ref}>
{children}
</Button>
);
})}>
{isDropdownOpen ? <ChevronUpIcon/> : <ChevronDownIcon/>}
</Dropdown.Toggle>

<Dropdown.Menu>
<PathLink path={entry.path} refId={refId} repoId={repo.id}
as={Dropdown.Item}><DownloadIcon/> {' '} Download</PathLink>
<Dropdown.Item onClick={(e) => {
e.preventDefault();
if (window.confirm(`are you sure you wish to delete object "${entry.path}"?`)) onDelete(entry);
}}><TrashcanIcon/> {' '} Delete
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
handleShow();
}}>
<TrashcanIcon/> {' '} Delete
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<ConfirmationModal show={show} onHide={handleClose} msg={deleteConfirmMsg} onConfirm={onSubmit}></ConfirmationModal>
</>
);
};

Expand Down
67 changes: 50 additions & 17 deletions webui/src/components/auth/groups.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import * as moment from "moment";
import Breadcrumb from "react-bootstrap/Breadcrumb";
import Tabs from "react-bootstrap/Tabs";
import Tab from "react-bootstrap/Tab";
import ConfirmationModal from "../ConfirmationModal";


export const GroupsPage = connect(
Expand All @@ -46,6 +47,7 @@ export const GroupsPage = connect(

const deleteSelectedGroups = () => {
deleteGroups(checkedGroups);
handleClose();
}

useEffect(() => {
Expand All @@ -56,6 +58,11 @@ export const GroupsPage = connect(
}
}, [deletionStatus, resetDeleteGroups, listGroups]);

const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const deleteConfirmMsg = `are you sure you'd like to delete groups: ${checkedGroups.join(', ')}?`;

return (
<Col lg={9}>
<div className={"mb-2"}>
Expand All @@ -75,11 +82,7 @@ export const GroupsPage = connect(
<Form.Control type="text" name="id" placeholder="Group ID (i.e. 'Developers')"/>
</Form.Group>
</EntityCreateButton>
<Button variant="danger" disabled={checkedGroups.length < 1} onClick={() => {
if (window.confirm(`are you sure you'd like to delete groups: ${checkedGroups.join(', ')}?`)) {
deleteSelectedGroups()
}
}}>
<Button variant="danger" disabled={checkedGroups.length < 1} onClick={handleShow}>
Delete Selected
</Button>
</ButtonToolbar>
Expand All @@ -88,6 +91,7 @@ export const GroupsPage = connect(
<SyncIcon/>
</Button>
</ButtonToolbar>
<ConfirmationModal show={show} onHide={handleClose} msg={deleteConfirmMsg} onConfirm={deleteSelectedGroups}></ConfirmationModal>
</div>
</div>

Expand Down Expand Up @@ -220,8 +224,8 @@ const GroupMembersPane = connect(
}, [groupId, listGroupMembers]);

const detachUserFn = useCallback((userId) => {
if (window.confirm(`are you sure you'd like to remove user '${userId}' from group '${groupId}'?`))
removeUserFromGroup(userId, groupId)
removeUserFromGroup(userId, groupId);
handleClose();
}, [removeUserFromGroup, groupId])


Expand All @@ -232,10 +236,14 @@ const GroupMembersPane = connect(
}
}, [groupMembershipDeletion, resetRemoveUserFromGroup, listMembersFn, groupId])


const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const [entityId , setEntityId] = useState('');
const detachConfirmMsg = `are you sure you'd like to remove user '${entityId}' from group '${groupId}'?`;

return (
<>

<div className="action-bar borderless">
<ButtonToolbar className="float-left mb-2 pl-1">
<GroupMembershipModalButton groupId={groupId} onDone={() => { listMembersFn() }}/>
Expand All @@ -257,13 +265,22 @@ const GroupMembersPane = connect(
return [
(<Link to={`/auth/users/${entity.id}`}>{entity.id}</Link>),
moment.unix(entity.creation_date).toISOString(),
(<Button size={"sm"} variant="outline-danger" onClick={() => {
detachUserFn(entity.id)
}}>Remove</Button>)
(<Button size={"sm"} variant="outline-danger"
onClick={() => {
handleShow();
setEntityId(entity.id);
}}>
Remove</Button>)
]
}}
/>
</Form>
<ConfirmationModal show={show} onHide={handleClose}
msg={detachConfirmMsg }
onConfirm = {() => {
detachUserFn(entityId);
}}>
</ConfirmationModal>
</>
);
});
Expand All @@ -281,8 +298,8 @@ const GroupPoliciesPane = connect(
}, [groupId, listGroupPolicies]);

const detachPolicyFn = useCallback((policyId) => {
if (window.confirm(`are you sure you'd like to detach policy '${policyId}' from group '${groupId}'?`))
detachPolicyFromGroup(groupId, policyId)
detachPolicyFromGroup(groupId, policyId);
handleClose();
},[detachPolicyFromGroup, groupId])

useEffect(() => {
Expand All @@ -292,6 +309,13 @@ const GroupPoliciesPane = connect(
}
}, [policyGroupDetachment, resetDetachPolicyFromGroup, listPoliciesFn, groupId])

const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const [entityId , setEntityId] = useState('');

const detachConfirmMsg = `are you sure you'd like to detach policy '${entityId}' from group '${groupId}'?`;

return (
<>
<div className="action-bar borderless">
Expand All @@ -314,12 +338,21 @@ const GroupPoliciesPane = connect(
return [
(<Link to={`/auth/policies/${entity.id}`}>{entity.id}</Link>),
moment.unix(entity.creation_date).toISOString(),
(<Button size={"sm"} variant="outline-danger" onClick={() => {
detachPolicyFn(entity.id)
}}>Detach</Button>)
(<Button size={"sm"} variant="outline-danger"
onClick={() => {
handleShow();
setEntityId(entity.id);
}}>
Detach</Button>)
]
}}
/>
<ConfirmationModal show={show} onHide={handleClose}
msg={detachConfirmMsg}
onConfirm = {() => {
detachPolicyFn(entityId);
}}>
</ConfirmationModal>
</>


Expand Down
14 changes: 9 additions & 5 deletions webui/src/components/auth/policies.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import * as moment from "moment";
import Breadcrumb from "react-bootstrap/Breadcrumb";
import Form from "react-bootstrap/Form";
import Alert from "react-bootstrap/Alert";
import ConfirmationModal from "../ConfirmationModal";


export const PoliciesPage = connect(
Expand All @@ -39,6 +40,7 @@ export const PoliciesPage = connect(

const deleteSelectedPolicies = () => {
deletePolicies(checkedPolicies);
handleClose();
}

useEffect(() => {
Expand All @@ -49,6 +51,11 @@ export const PoliciesPage = connect(
}
}, [deletionStatus, resetDeletePolicies, listPolicies]);

const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const confirmDeleteMsg = `are you sure you'd like to delete policies: ${checkedPolicies.join(', ')}?`;

return (
<Col lg={9}>
<div className={"mb-2"}>
Expand All @@ -71,11 +78,7 @@ export const PoliciesPage = connect(
<Form.Control as="textarea" rows="15" name="policy" placeholder="Policy JSON Document" className="policy-document"/>
</Form.Group>
</EntityCreateButton>
<Button variant="danger" disabled={checkedPolicies.length < 1} onClick={() => {
if (window.confirm(`are you sure you'd like to delete policies: ${checkedPolicies.join(', ')}?`)) {
deleteSelectedPolicies()
}
}}>
<Button variant="danger" disabled={checkedPolicies.length < 1} onClick={handleShow}>
Delete Selected
</Button>
</ButtonToolbar>
Expand All @@ -85,6 +88,7 @@ export const PoliciesPage = connect(
<SyncIcon/>
</Button>
</ButtonToolbar>
<ConfirmationModal show={show} onHide={handleClose} msg={confirmDeleteMsg} onConfirm={deleteSelectedPolicies}></ConfirmationModal>
</div>
</div>

Expand Down

0 comments on commit 0030f9a

Please sign in to comment.