Add "Actions" button to all details pages

src/components/molecules/ActionDropdown/ActionDropdown.jsx

@@ -85,8 +85,8 @@ class ActionDropdown extends React.Component<Props, State> {
 
   itemMouseDown: boolean
   listRef: HTMLElement
-  arrowRef: HTMLElement
   tipRef: HTMLElement
+  buttonRef: HTMLElement
 
   componentDidMount() {
     window.addEventListener('mousedown', this.handlePageClick, false)
@@ -101,17 +101,12 @@ class ActionDropdown extends React.Component<Props, State> {
   }
 
   updateListPosition() {
-    if (!this.state.showDropdownList || !this.listRef || !this.arrowRef || !this.tipRef) {
+    if (!this.state.showDropdownList || !this.listRef || !this.tipRef || !this.buttonRef) {
       return
     }
-
-    let listWidth = this.listRef.offsetWidth
-    let arrowWidth = this.arrowRef.offsetWidth
-    let arrowHeight = this.arrowRef.offsetHeight
-    let tipHeight = this.tipRef.offsetHeight
-    const tipLeftOffset = 6
-    const tipTopOffset = 6
-    let arrowOffset = this.arrowRef.getBoundingClientRect()
+    let tipHeight = this.tipRef.offsetHeight / 2
+    let topOffset = 6
+    let buttonRect = this.buttonRef.getBoundingClientRect()
 
     // If a modal is opened, body scroll is removed and body top is set to replicate scroll position
     let scrollOffset = 0
@@ -119,8 +114,8 @@ class ActionDropdown extends React.Component<Props, State> {
       scrollOffset = -parseInt(document.body && document.body.style.top, 10)
     }
 
-    this.listRef.style.top = `${arrowOffset.top + (window.pageYOffset || scrollOffset) + arrowHeight + tipHeight + tipTopOffset}px`
-    this.listRef.style.left = `${arrowOffset.left + tipLeftOffset + (arrowWidth - listWidth)}px`
+    this.listRef.style.top = `${buttonRect.top + buttonRect.height + tipHeight + topOffset + (window.pageYOffset || scrollOffset)}px`
+    this.listRef.style.left = `${buttonRect.left + window.pageXOffset}px`
   }
 
   @autobind
@@ -179,7 +174,7 @@ class ActionDropdown extends React.Component<Props, State> {
     return ReactDOM.createPortal((
       <List
         innerRef={list => { this.listRef = list }}
-        width={`${StyleProps.inputSizes.regular.width - 4}px`}
+        width={`${StyleProps.inputSizes.regular.width}px`}
         padding={0}
         customStyle={ListStyle}
       >
@@ -196,8 +191,8 @@ class ActionDropdown extends React.Component<Props, State> {
           secondary
           centered
           value={this.props.label}
+          customRef={ref => { this.buttonRef = ref }}
           onClick={() => { this.handleButtonClick() }}
-          arrowRef={ref => { this.arrowRef = ref }}
         />
         {this.renderList()}
       </Wrapper>

src/components/molecules/DropdownLink/DropdownLink.jsx

@@ -54,7 +54,7 @@ export const List = styled.div`
 export const Tip = styled.div`
   position: absolute;
   top: -6px;
-  right: 8px;
+  right: 11px;
   width: 10px;
   height: 10px;
   background: ${Palette.grayscale[1]};

src/components/organisms/EndpointDetailsContent/EndpointDetailsContent.jsx

@@ -59,14 +59,9 @@ const Value = styled.div``
 const Buttons = styled.div`
   display: flex;
   justify-content: space-between;
+  margin-top: 64px;
 `
-const MainButtons = styled.div`
-  display: flex;
-  flex-direction: column;
-  button {
-    margin-bottom: 16px;
-  }
-`
+const MainButtons = styled.div``
 const DeleteButton = styled.div``
 const LoadingWrapper = styled.div`
   display: flex;
@@ -87,7 +82,6 @@ type Props = {
   usage: { migrations: MainItem[], replicas: MainItem[] },
   onDeleteClick: () => void,
   onValidateClick: () => void,
-  onEditClick: () => void,
   passwordFields?: string[],
 }
 @observer
@@ -157,7 +151,6 @@ class EndpointDetailsContent extends React.Component<Props> {
     return (
       <Buttons>
         <MainButtons>
-          <Button secondary onClick={this.props.onEditClick} data-test-id="edContent-editButton">Edit Endpoint</Button>
           <Button onClick={this.props.onValidateClick} data-test-id="edContent-validateButton">Validate Endpoint</Button>
         </MainButtons>
         <DeleteButton>

src/components/organisms/EndpointDetailsContent/test.jsx

@@ -83,13 +83,10 @@ describe('EndpointDetailsContent Component', () => {
   it('dispatches buttons clicks', () => {
     let onDeleteClick = sinon.spy()
     let onValidateClick = sinon.spy()
-    let onEditClick = sinon.spy()
 
-    let wrapper = wrap({ item, onDeleteClick, onValidateClick, onEditClick })
-    wrapper.find('editButton').click()
+    let wrapper = wrap({ item, onDeleteClick, onValidateClick })
     wrapper.find('validateButton').click()
     wrapper.find('deleteButton').click()
-    expect(onEditClick.calledOnce).toBe(true)
     expect(onValidateClick.calledOnce).toBe(true)
     expect(onDeleteClick.calledOnce).toBe(true)
   })

src/components/organisms/ProjectDetailsContent/ProjectDetailsContent.jsx

@@ -40,7 +40,7 @@ const Info = styled.div`
   display: flex;
   flex-wrap: wrap;
   margin-top: 32px;
-  margin-left: -32px;  
+  margin-left: -32px;
 `
 const Field = styled.div`
   ${StyleProps.exactWidth('calc(50% - 32px)')}
@@ -66,10 +66,9 @@ const TableStyled = styled(Table)`
   margin-bottom: 32px;
 `
 const Buttons = styled.div`
-  margin-top: 32px;
+  margin-top: 64px;
   display: flex;
   justify-content: space-between;
-  margin-top: 32px;
 `
 const UserColumn = styled.div`
   ${props => props.disabled ? css`color: ${Palette.grayscale[3]};` : ''}
@@ -96,27 +95,23 @@ type Props = {
   loading: boolean,
   users: User[],
   usersLoading: boolean,
-  deleteDisabled: boolean,
   roleAssignments: RoleAssignment[],
   roles: Role[],
   loggedUserId: string,
   onEnableUser: (user: User) => void,
   onRemoveUser: (user: User) => void,
   onUserRoleChange: (user: User, roleId: string, toggled: boolean) => void,
-  onEditProjectClick: () => void,
-  onDeleteConfirmation: () => void,
   onAddMemberClick: () => void,
+  onDeleteClick: () => void,
 }
 type State = {
   showRemoveUserAlert: boolean,
-  showDeleteProjectAlert: boolean,
 }
 const testName = 'pdContent'
 @observer
 class ProjectDetailsContent extends React.Component<Props, State> {
   state = {
     showRemoveUserAlert: false,
-    showDeleteProjectAlert: false,
   }
 
   selectedUser: ?User
@@ -151,15 +146,6 @@ class ProjectDetailsContent extends React.Component<Props, State> {
     this.setState({ showRemoveUserAlert: false })
   }
 
-  handleDeleteConfirmation() {
-    this.setState({ showDeleteProjectAlert: false })
-    this.props.onDeleteConfirmation()
-  }
-
-  handleCloseDeleteConfirmation() {
-    this.setState({ showDeleteProjectAlert: false })
-  }
-
   renderLoading() {
     return (
       <LoadingWrapper>
@@ -174,10 +160,6 @@ class ProjectDetailsContent extends React.Component<Props, State> {
     return (
       <Buttons>
         <ButtonsColumn>
-          <Button
-            secondary
-            onClick={this.props.onEditProjectClick}
-          >Edit Project</Button>
           <Button
             onClick={this.props.onAddMemberClick}
           >Add Member</Button>
@@ -186,7 +168,7 @@ class ProjectDetailsContent extends React.Component<Props, State> {
           <Button
             alert
             hollow
-            onClick={() => { this.setState({ showDeleteProjectAlert: true }) }}
+            onClick={() => { this.props.onDeleteClick() }}
           >Delete Project</Button>
         </ButtonsColumn>
       </Buttons>
@@ -328,25 +310,6 @@ class ProjectDetailsContent extends React.Component<Props, State> {
             onRequestClose={() => { this.handleCloseRemoveUserConfirmation() }}
           />
         ) : null}
-        {this.state.showDeleteProjectAlert && !this.props.deleteDisabled ? (
-          <AlertModal
-            isOpen
-            title="Delete Project?"
-            message="Are you sure you want to delete this project?"
-            extraMessage="Deleting a Coriolis Project is permanent!"
-            onConfirmation={() => { this.handleDeleteConfirmation() }}
-            onRequestClose={() => { this.handleCloseDeleteConfirmation() }}
-          />
-        ) : this.state.showDeleteProjectAlert && this.props.deleteDisabled ? (
-          <AlertModal
-            isOpen
-            type="error"
-            title="Error deleting project"
-            message="The project can't be deleted"
-            extraMessage="You can't delete the last project since you'll no longer be able to log in"
-            onRequestClose={() => { this.handleCloseDeleteConfirmation() }}
-          />
-        ) : null}
       </Wrapper>
     )
   }

src/components/organisms/ProjectDetailsContent/test.jsx

@@ -34,7 +34,7 @@ type Props = {
 const wrap = (props: Props) => new TW(shallow(
   <ProjectDetailsContent
     onAddMemberClick={() => { }}
-    onDeleteConfirmation={() => { }}
+    onDeleteClick={() => { }}
     onEditProjectClick={() => { }}
     onEnableUser={() => { }}
     onRemoveUser={() => { }}

src/components/organisms/UserDetailsContent/UserDetailsContent.jsx

@@ -22,7 +22,6 @@ import CopyValue from '../../atoms/CopyValue'
 import CopyMultilineValue from '../../atoms/CopyMultilineValue'
 import StatusImage from '../../atoms/StatusImage'
 import Button from '../../atoms/Button'
-import AlertModal from '../../organisms/AlertModal'
 
 import type { User } from '../../../types/User'
 import type { Project } from '../../../types/Project'
@@ -38,7 +37,7 @@ const Info = styled.div`
   display: flex;
   flex-wrap: wrap;
   margin-top: 32px;
-  margin-left: -32px;  
+  margin-left: -32px;
 `
 const Link = styled.a`
   color: ${Palette.primary};
@@ -64,10 +63,9 @@ const LoadingWrapper = styled.div`
   margin: 32px 0 64px 0;
 `
 const Buttons = styled.div`
-  margin-top: 32px;
+  margin-top: 64px;
   display: flex;
   justify-content: space-between;
-  margin-top: 32px;
 `
 const ButtonsColumn = styled.div`
   display: flex;
@@ -87,29 +85,12 @@ type Props = {
   projects: Project[],
   userProjects: Project[],
   isLoggedUser: boolean,
-  onEditClick: () => void,
   onUpdatePasswordClick: () => void,
-  onDeleteConfirmation: () => void,
-}
-type State = {
-  showDeleteConfirmation: boolean,
+  onDeleteClick: () => void,
 }
 const testName = 'udContent'
 @observer
-class UserDetailsContent extends React.Component<Props, State> {
-  state = {
-    showDeleteConfirmation: false,
-  }
-
-  handleDeleteConfirmation() {
-    this.setState({ showDeleteConfirmation: false })
-    this.props.onDeleteConfirmation()
-  }
-
-  handleCloseDeleteConfirmation() {
-    this.setState({ showDeleteConfirmation: false })
-  }
-
+class UserDetailsContent extends React.Component<Props> {
   renderLoading() {
     if (!this.props.loading) {
       return null
@@ -128,14 +109,13 @@ class UserDetailsContent extends React.Component<Props, State> {
     return (
       <Buttons>
         <ButtonsColumn>
-          <Button secondary onClick={this.props.onEditClick}>Edit user</Button>
           <Button hollow onClick={this.props.onUpdatePasswordClick}>Change password</Button>
         </ButtonsColumn>
         <ButtonsColumn>
           <Button
             alert
             hollow
-            onClick={() => { this.setState({ showDeleteConfirmation: true }) }}
+            onClick={() => { this.props.onDeleteClick() }}
             disabled={this.props.isLoggedUser}
           >Delete user</Button>
         </ButtonsColumn>
@@ -222,16 +202,6 @@ class UserDetailsContent extends React.Component<Props, State> {
         {this.renderInfo()}
         {this.renderLoading()}
         {this.renderButtons()}
-        {this.state.showDeleteConfirmation ? (
-          <AlertModal
-            isOpen
-            title="Delete User?"
-            message="Are you sure you want to delete this user?"
-            extraMessage="Deleting a Coriolis User is permanent!"
-            onConfirmation={() => { this.handleDeleteConfirmation() }}
-            onRequestClose={() => { this.handleCloseDeleteConfirmation() }}
-          />
-        ) : null}
       </Wrapper>
     )
   }

src/components/organisms/UserDetailsContent/test.jsx

@@ -33,6 +33,7 @@ const wrap = (props: Props) => new TW(shallow(
     onEditClick={() => { }}
     onUpdatePasswordClick={() => { }}
     onDeleteConfirmation={() => { }}
+    onDeleteClick={() => { }}
     {...props}
   />
 ), 'udContent')

src/components/pages/EndpointDetailsPage/EndpointDetailsPage.jsx

@@ -26,20 +26,26 @@ import AlertModal from '../../organisms/AlertModal'
 import Modal from '../../molecules/Modal'
 import EndpointValidation from '../../organisms/EndpointValidation'
 import Endpoint from '../../organisms/Endpoint'
+import EndpointDuplicateOptions from '../../organisms/EndpointDuplicateOptions'
 
 import endpointStore, { passwordFields } from '../../../stores/EndpointStore'
 import migrationStore from '../../../stores/MigrationStore'
 import replicaStore from '../../../stores/ReplicaStore'
 import userStore from '../../../stores/UserStore'
+import projectStore from '../../../stores/ProjectStore'
+
 import type { Endpoint as EndpointType } from '../../../types/Endpoint'
 import type { MainItem } from '../../../types/MainItem'
 
+import Palette from '../../styleUtils/Palette'
+
 import endpointImage from './images/endpoint.svg'
 
 const Wrapper = styled.div``
 
 type Props = {
   match: any,
+  history: any,
 }
 type State = {
   showDeleteEndpointConfirmation: boolean,
@@ -47,7 +53,9 @@ type State = {
   showEndpointModal: boolean,
   showEndpointInUseModal: boolean,
   showEndpointInUseLoadingModal: boolean,
-  endpointUsage: { replicas: MainItem[], migrations: MainItem[] }
+  endpointUsage: { replicas: MainItem[], migrations: MainItem[] },
+  showDuplicateModal: boolean,
+  duplicating: boolean,
 }
 @observer
 class EndpointDetailsPage extends React.Component<Props, State> {
@@ -57,6 +65,8 @@ class EndpointDetailsPage extends React.Component<Props, State> {
     showEndpointModal: false,
     showEndpointInUseModal: false,
     showEndpointInUseLoadingModal: false,
+    showDuplicateModal: false,
+    duplicating: false,
     endpointUsage: { replicas: [], migrations: [] },
   }
 
@@ -163,7 +173,32 @@ class EndpointDetailsPage extends React.Component<Props, State> {
     this.setState({ showEndpointInUseModal: false })
   }
 
+  handleDuplicateClick() {
+    this.setState({ showDuplicateModal: true })
+  }
+
+  handleDuplicate(projectId: string) {
+    let endpoint = this.getEndpoint()
+    if (!endpoint) {
+      return
+    }
+
+    this.setState({ duplicating: true })
+
+    let shouldSwitchProject = projectId !== (userStore.loggedUser ? userStore.loggedUser.project.id : '')
+
+    endpointStore.duplicate({
+      shouldSwitchProject,
+      endpoints: [endpoint],
+      onSwitchProject: () => userStore.switchProject(projectId),
+    }).then(() => {
+      this.props.history.push('/endpoints')
+    })
+  }
+
   loadData() {
+    projectStore.getProjects()
+
     endpointStore.getEndpoints().then(() => {
       let endpoint = this.getEndpoint()
 
@@ -180,7 +215,26 @@ class EndpointDetailsPage extends React.Component<Props, State> {
   }
 
   render() {
+    let selectedProjectId = userStore.loggedUser ? userStore.loggedUser.project.id : ''
+
     let endpoint = this.getEndpoint()
+    let dropdownActions = [{
+      label: 'Validate',
+      color: Palette.primary,
+      action: () => { this.handleValidateClick() },
+    }, {
+      label: 'Edit',
+      action: () => { this.handleEditClick() },
+
+    }, {
+      label: 'Duplicate',
+      action: () => { this.handleDuplicateClick() },
+
+    }, {
+      label: 'Delete Endpoint',
+      color: Palette.alert,
+      action: () => { this.handleDeleteEndpointClick() },
+    }]
     return (
       <Wrapper>
         <DetailsTemplate
@@ -189,8 +243,9 @@ class EndpointDetailsPage extends React.Component<Props, State> {
             onUserItemClick={item => { this.handleUserItemClick(item) }}
           />}
           contentHeaderComponent={<DetailsContentHeader
-            item={(endpoint: any)}
+            item={endpoint}
             onBackButonClick={() => { this.handleBackButtonClick() }}
+            dropdownActions={dropdownActions}
             typeImage={endpointImage}
             description={endpoint ? endpoint.description : ''}
           />}
@@ -202,7 +257,6 @@ class EndpointDetailsPage extends React.Component<Props, State> {
             connectionInfo={endpointStore.connectionInfo}
             onDeleteClick={() => { this.handleDeleteEndpointClick() }}
             onValidateClick={() => { this.handleValidateClick() }}
-            onEditClick={() => { this.handleEditClick() }}
           />}
         />
         <AlertModal
@@ -249,6 +303,21 @@ class EndpointDetailsPage extends React.Component<Props, State> {
             onCancelClick={() => { this.handleCloseEndpointModal() }}
           />
         </Modal>
+        {this.state.showDuplicateModal ? (
+          <Modal
+            isOpen
+            title="Duplicate Endpoint"
+            onRequestClose={() => { this.setState({ showDuplicateModal: false }) }}
+          >
+            <EndpointDuplicateOptions
+              duplicating={this.state.duplicating}
+              projects={projectStore.projects}
+              selectedProjectId={selectedProjectId}
+              onCancelClick={() => { this.setState({ showDuplicateModal: false }) }}
+              onDuplicateClick={projectId => { this.handleDuplicate(projectId) }}
+            />
+          </Modal>
+        ) : null}
       </Wrapper>
     )
   }

src/components/pages/EndpointsPage/EndpointsPage.jsx

@@ -33,11 +33,9 @@ import endpointImage from './images/endpoint-large.svg'
 
 import projectStore from '../../../stores/ProjectStore'
 import userStore from '../../../stores/UserStore'
-import EndpointSource from '../../../sources/EndpointSource'
 import endpointStore from '../../../stores/EndpointStore'
 import migrationStore from '../../../stores/MigrationStore'
 import replicaStore from '../../../stores/ReplicaStore'
-import notificationStore from '../../../stores/NotificationStore'
 import providerStore from '../../../stores/ProviderStore'
 import LabelDictionary from '../../../utils/LabelDictionary'
 import { requestPollTimeout } from '../../../config.js'
@@ -162,44 +160,15 @@ class EndpointsPage extends React.Component<{}, State> {
   handleDuplicate(projectId: string) {
     this.setState({ modalIsOpen: false, duplicating: true })
 
-    let selectedProjectId = userStore.loggedUser ? userStore.loggedUser.project.id : ''
-    let switchProject = projectId !== selectedProjectId
-
-    let endpoints = []
-    let items = this.state.confirmationItems || []
-    Promise.all(items.map(endpoint => {
-      return EndpointSource.getConnectionInfo(endpoint).then(connectionInfo => {
-        endpoints.push({
-          ...endpoint,
-          connection_info: connectionInfo,
-          name: `${endpoint.name}${!switchProject ? ' (copy)' : ''}`,
-        })
-      })
-    })).then(() => {
-      if (switchProject) {
-        return userStore.switchProject(projectId).then(() => {
-          this.handleProjectChange()
-        })
-      }
-      return Promise.resolve()
-    }).then(() => {
-      return Promise.all(endpoints.map(endpoint => {
-        return EndpointSource.add(endpoint, true)
-      }).map((p: Promise<any>) => p.catch(e => e)))
-        .then((results: (Endpoint | { status: string, data?: { description: string } })[]) => {
-          let internalServerErrors = results.filter(r => r.status && r.status === 500)
-          if (internalServerErrors.length > 0) {
-            notificationStore.alert(`There was a problem duplicating ${internalServerErrors.length} endpoint${internalServerErrors.length > 1 ? 's' : ''}`, 'error')
-          }
-          let forbiddenErrors = results.filter(r => r.status && r.status === 403)
-          if (forbiddenErrors.length > 0 && forbiddenErrors[0].data && forbiddenErrors[0].data.description) {
-            notificationStore.alert(String(forbiddenErrors[0].data.description), 'error')
-          }
-        })
-    }).catch(e => {
-      if (e.data && e.data.description) {
-        notificationStore.alert(e.data.description, 'error')
-      }
+    let shouldSwitchProject = projectId !== (userStore.loggedUser ? userStore.loggedUser.project.id : '')
+    let endpoints = this.state.confirmationItems || []
+
+    endpointStore.duplicate({
+      shouldSwitchProject,
+      endpoints,
+      onSwitchProject: () => userStore.switchProject(projectId).then(() => {
+        this.handleProjectChange()
+      }),
     }).then(() => {
       this.pollData(true)
       this.setState({ showDuplicateModal: false, duplicating: false })

src/components/pages/ProjectDetailsPage/ProjectDetailsPage.jsx

@@ -26,11 +26,14 @@ import DetailsContentHeader from '../../organisms/DetailsContentHeader'
 import ProjectDetailsContent from '../../organisms/ProjectDetailsContent'
 import ProjectModal from '../../organisms/ProjectModal'
 import ProjectMemberModal from '../../organisms/ProjectMemberModal'
+import AlertModal from '../../organisms/AlertModal'
 
 import projectStore from '../../../stores/ProjectStore'
 import userStore from '../../../stores/UserStore'
 import notificationStore from '../../../stores/NotificationStore'
 
+import Palette from '../../styleUtils/Palette'
+
 import projectImage from './images/project.svg'
 
 const Wrapper = styled.div``
@@ -41,6 +44,7 @@ type Props = {
 type State = {
   showProjectModal: boolean,
   showAddMemberModal: boolean,
+  showDeleteProjectAlert: boolean,
   addingMember: boolean,
 }
 @observer
@@ -48,6 +52,7 @@ class ProjectDetailsPage extends React.Component<Props, State> {
   state = {
     showProjectModal: false,
     showAddMemberModal: false,
+    showDeleteProjectAlert: false,
     addingMember: false,
   }
 
@@ -118,6 +123,8 @@ class ProjectDetailsPage extends React.Component<Props, State> {
   }
 
   handleDeleteConfirmation() {
+    this.setState({ showDeleteProjectAlert: false })
+
     projectStore.delete(this.props.match.params.id).then(() => {
       if (
         userStore.loggedUser &&
@@ -167,6 +174,10 @@ class ProjectDetailsPage extends React.Component<Props, State> {
     })
   }
 
+  handleDeleteProjectClick() {
+    this.setState({ showDeleteProjectAlert: true })
+  }
+
   loadData() {
     const projectId = this.props.match.params.id
     projectStore.getProjects()
@@ -177,6 +188,19 @@ class ProjectDetailsPage extends React.Component<Props, State> {
   }
 
   render() {
+    let dropdownActions = [{
+      label: 'Add Member',
+      color: Palette.primary,
+      action: () => { this.handleAddMemberClick() },
+    }, {
+      label: 'Edit Project',
+      action: () => { this.handleEditProjectClick() },
+    }, {
+      label: 'Delete Project',
+      color: Palette.alert,
+      action: () => { this.handleDeleteProjectClick() },
+    }]
+
     return (
       <Wrapper>
         <DetailsTemplate
@@ -187,6 +211,7 @@ class ProjectDetailsPage extends React.Component<Props, State> {
           contentHeaderComponent={<DetailsContentHeader
             item={{ ...projectStore.projectDetails, description: '' }}
             onBackButonClick={() => { this.handleBackButtonClick() }}
+            dropdownActions={dropdownActions}
             typeImage={projectImage}
             description={''}
           />}
@@ -197,14 +222,12 @@ class ProjectDetailsPage extends React.Component<Props, State> {
             usersLoading={projectStore.usersLoading}
             roleAssignments={projectStore.roleAssignments}
             roles={projectStore.roles}
-            deleteDisabled={projectStore.projects.length === 1}
             loggedUserId={userStore.loggedUser ? userStore.loggedUser.id : ''}
             onEnableUser={user => { this.handleEnableUser(user) }}
             onRemoveUser={user => { this.handleRemoveUser(user) }}
-            onEditProjectClick={() => { this.handleEditProjectClick() }}
-            onDeleteConfirmation={() => { this.handleDeleteConfirmation() }}
             onAddMemberClick={() => { this.handleAddMemberClick() }}
             onUserRoleChange={(user, roleId, toggled) => { this.handleUserRoleChange(user, roleId, toggled) }}
+            onDeleteClick={() => this.handleDeleteProjectClick()}
           />}
         />
         {this.state.showProjectModal ? (
@@ -225,6 +248,25 @@ class ProjectDetailsPage extends React.Component<Props, State> {
             onRequestClose={() => { this.setState({ showAddMemberModal: false }) }}
           />
         ) : null}
+        {this.state.showDeleteProjectAlert && projectStore.projects.length > 1 ? (
+          <AlertModal
+            isOpen
+            title="Delete Project?"
+            message="Are you sure you want to delete this project?"
+            extraMessage="Deleting a Coriolis Project is permanent!"
+            onConfirmation={() => { this.handleDeleteConfirmation() }}
+            onRequestClose={() => { this.setState({ showDeleteProjectAlert: false }) }}
+          />
+        ) : this.state.showDeleteProjectAlert && projectStore.projects.length === 1 ? (
+          <AlertModal
+            isOpen
+            type="error"
+            title="Error deleting project"
+            message="The project can't be deleted"
+            extraMessage="You can't delete the last project since you'll no longer be able to log in"
+            onRequestClose={() => { this.setState({ showDeleteProjectAlert: false }) }}
+          />
+        ) : null}
       </Wrapper>
     )
   }

src/components/pages/UserDetailsPage/UserDetailsPage.jsx

@@ -24,10 +24,13 @@ import DetailsPageHeader from '../../organisms/DetailsPageHeader'
 import DetailsContentHeader from '../../organisms/DetailsContentHeader'
 import UserDetailsContent from '../../organisms/UserDetailsContent'
 import UserModal from '../../organisms/UserModal'
+import AlertModal from '../../organisms/AlertModal'
 
 import userStore from '../../../stores/UserStore'
 import projectStore from '../../../stores/ProjectStore'
 
+import Palette from '../../styleUtils/Palette'
+
 import userImage from './images/user.svg'
 
 const Wrapper = styled.div``
@@ -38,12 +41,14 @@ type Props = {
 type State = {
   showUserModal: boolean,
   editPassword: boolean,
+  showDeleteAlert: boolean,
 }
 @observer
 class UserDetailsPage extends React.Component<Props, State> {
   state = {
     showUserModal: false,
     editPassword: false,
+    showDeleteAlert: false,
   }
 
   componentDidMount() {
@@ -101,6 +106,10 @@ class UserDetailsPage extends React.Component<Props, State> {
     this.setState({ showUserModal: true, editPassword: true })
   }
 
+  handleDeleteClick() {
+    this.setState({ showDeleteAlert: true })
+  }
+
   loadData(id?: string) {
     projectStore.getProjects()
     userStore.getProjects(id || this.props.match.params.id)
@@ -108,6 +117,19 @@ class UserDetailsPage extends React.Component<Props, State> {
   }
 
   render() {
+    let dropdownActions = [{
+      label: 'Change passowrd',
+      color: Palette.primary,
+      action: () => { this.handleUpdatePasswordClick() },
+    }, {
+      label: 'Edit user',
+      action: () => { this.handleEditClick() },
+    }, {
+      label: 'Delete user',
+      color: Palette.alert,
+      action: () => { this.handleDeleteClick() },
+    }]
+
     return (
       <Wrapper>
         <DetailsTemplate
@@ -119,16 +141,16 @@ class UserDetailsPage extends React.Component<Props, State> {
             item={{ ...userStore.userDetails, description: '' }}
             onBackButonClick={() => { this.handleBackButtonClick() }}
             typeImage={userImage}
+            dropdownActions={dropdownActions}
             description={''}
           />}
           contentComponent={<UserDetailsContent
-            onDeleteConfirmation={() => { this.handleDeleteConfirmation() }}
+            onDeleteClick={() => { this.handleDeleteClick() }}
             user={userStore.userDetails}
             isLoggedUser={userStore.loggedUser && userStore.userDetails ? userStore.loggedUser.id === userStore.userDetails.id : false}
             loading={userStore.userDetailsLoading}
             userProjects={userStore.projects}
             projects={projectStore.projects}
-            onEditClick={() => { this.handleEditClick() }}
             onUpdatePasswordClick={() => { this.handleUpdatePasswordClick() }}
           />}
         />
@@ -143,6 +165,16 @@ class UserDetailsPage extends React.Component<Props, State> {
             onUpdateClick={user => { this.handleUserUpdateClick(user) }}
           />
         ) : null}
+        {this.state.showDeleteAlert ? (
+          <AlertModal
+            isOpen
+            title="Delete User?"
+            message="Are you sure you want to delete this user?"
+            extraMessage="Deleting a Coriolis User is permanent!"
+            onConfirmation={() => { this.handleDeleteConfirmation() }}
+            onRequestClose={() => { this.setState({ showDeleteAlert: false }) }}
+          />
+        ) : null}
       </Wrapper>
     )
   }

src/sources/NotificationSource.js

@@ -115,8 +115,8 @@ class DataUtils {
 class NotificationSource {
   static loadData(): Promise<NotificationItemData[]> {
     return Promise.all([
-      Api.send({ url: `${servicesUrl.coriolis}/${Api.projectId}/migrations`, skipLog: true }),
-      Api.send({ url: `${servicesUrl.coriolis}/${Api.projectId}/replicas/detail`, skipLog: true }),
+      Api.send({ url: `${servicesUrl.coriolis}/${Api.projectId}/migrations`, skipLog: true, quietError: true }),
+      Api.send({ url: `${servicesUrl.coriolis}/${Api.projectId}/replicas/detail`, skipLog: true, quietError: true }),
     ]).then(([migrationsResponse, replicasResponse]) => {
       let migrations = migrationsResponse.data.migrations
       let replicas = replicasResponse.data.replicas

src/stores/EndpointStore.js

@@ -15,6 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 import { observable, action } from 'mobx'
 import type { Endpoint, Validation, StorageBackend } from '../types/Endpoint'
+import notificationStore from './NotificationStore'
 import EndpointSource from '../sources/EndpointSource'
 
 export const passwordFields = ['password', 'private_key_passphrase']
@@ -81,6 +82,46 @@ class EndpointStore {
     })
   }
 
+  @action duplicate(opts: {
+    shouldSwitchProject: boolean,
+    onSwitchProject: () => Promise<void>,
+    endpoints: Endpoint[],
+  }): Promise<void> {
+    let endpoints = []
+    return Promise.all(opts.endpoints.map(endpoint => {
+      return EndpointSource.getConnectionInfo(endpoint).then(connectionInfo => {
+        endpoints.push({
+          ...endpoint,
+          connection_info: connectionInfo,
+          name: `${endpoint.name}${!opts.shouldSwitchProject ? ' (copy)' : ''}`,
+        })
+      })
+    })).then(() => {
+      if (opts.shouldSwitchProject) {
+        return opts.onSwitchProject()
+      }
+      return Promise.resolve()
+    }).then(() => {
+      return Promise.all(endpoints.map(endpoint => {
+        return EndpointSource.add(endpoint, true)
+      }).map((p: Promise<any>) => p.catch(e => e)))
+        .then((results: (Endpoint | { status: string, data?: { description: string } })[]) => {
+          let internalServerErrors = results.filter(r => r.status && r.status === 500)
+          if (internalServerErrors.length > 0) {
+            notificationStore.alert(`There was a problem duplicating ${internalServerErrors.length} endpoint${internalServerErrors.length > 1 ? 's' : ''}`, 'error')
+          }
+          let forbiddenErrors = results.filter(r => r.status && r.status === 403)
+          if (forbiddenErrors.length > 0 && forbiddenErrors[0].data && forbiddenErrors[0].data.description) {
+            notificationStore.alert(String(forbiddenErrors[0].data.description), 'error')
+          }
+        })
+    }).catch(e => {
+      if (e.data && e.data.description) {
+        notificationStore.alert(e.data.description, 'error')
+      }
+    })
+  }
+
   @action setConnectionInfo(connectionInfo: $PropertyType<Endpoint, 'connection_info'>) {
     this.connectionInfo = connectionInfo
     this.connectionInfoLoading = false