diff --git a/frontend/src/component/application/__tests__/__snapshots__/application-edit-component-test.js.snap b/frontend/src/component/application/__tests__/__snapshots__/application-edit-component-test.js.snap index 43f89b92f1..ae68f436be 100644 --- a/frontend/src/component/application/__tests__/__snapshots__/application-edit-component-test.js.snap +++ b/frontend/src/component/application/__tests__/__snapshots__/application-edit-component-test.js.snap @@ -23,7 +23,7 @@ exports[`renders correctly with permissions 1`] = ` - +   test-app @@ -41,27 +41,48 @@ exports[`renders correctly with permissions 1`] = ` /> -
- + - - Details - - - Edit - - + > + + + Delete + + +
+ + + Details + + + Edit + + + - +   test-app @@ -232,7 +253,6 @@ exports[`renders correctly without permission 1`] = ` /> -
{ + evt.preventDefault(); + const { deleteApplication, appName } = this.props; + await deleteApplication(appName); + this.props.history.push('/applications'); + }; + render() { if (!this.props.application) { return ; @@ -173,9 +185,6 @@ class ClientApplications extends PureComponent { ) : ( - -
Edit app meta data
- ({ name: v, label: v }))} + options={icons.map(v => ({ key: v, label: v }))} value={icon} onChange={e => storeApplicationMetaData(appName, 'icon', e.target.value)} filled @@ -211,7 +220,7 @@ class ClientApplications extends PureComponent { return ( - +  {appName} {description && {description}} @@ -220,18 +229,33 @@ class ClientApplications extends PureComponent { )} -
{hasPermission(UPDATE_APPLICATION) ? ( - this.setState({ activeTab: tabId })} - ripple - tabBarProps={{ style: { width: '100%' } }} - className="mdl-color--grey-100" - > - Details - Edit - +
+ + + + +
+ this.setState({ activeTab: tabId })} + ripple + tabBarProps={{ style: { width: '100%' } }} + className="mdl-color--grey-100" + > + Details + Edit + +
) : ( '' )} diff --git a/frontend/src/component/application/application-edit-container.js b/frontend/src/component/application/application-edit-container.js index a3d89b54ba..7d46fb674b 100644 --- a/frontend/src/component/application/application-edit-container.js +++ b/frontend/src/component/application/application-edit-container.js @@ -1,6 +1,6 @@ import { connect } from 'react-redux'; import ApplicationEdit from './application-edit-component'; -import { fetchApplication, storeApplicationMetaData } from './../../store/application/actions'; +import { fetchApplication, storeApplicationMetaData, deleteApplication } from './../../store/application/actions'; import { hasPermission } from '../../permissions'; const mapStateToProps = (state, props) => { @@ -19,6 +19,7 @@ const mapStateToProps = (state, props) => { const Constainer = connect(mapStateToProps, { fetchApplication, storeApplicationMetaData, + deleteApplication, })(ApplicationEdit); export default Constainer; diff --git a/frontend/src/data/applications-api.js b/frontend/src/data/applications-api.js index 919e3df790..5a4e3e1554 100644 --- a/frontend/src/data/applications-api.js +++ b/frontend/src/data/applications-api.js @@ -34,9 +34,18 @@ function storeApplicationMetaData(appName, key, value) { }).then(throwIfNotSuccess); } +function deleteApplication(appName) { + return fetch(`${URI}/${appName}`, { + method: 'DELETE', + headers, + credentials: 'include', + }).then(throwIfNotSuccess); +} + export default { fetchApplication, fetchAll, fetchApplicationsWithStrategyName, storeApplicationMetaData, + deleteApplication, }; diff --git a/frontend/src/page/applications/view.js b/frontend/src/page/applications/view.js index 13e72c32a6..95d163ca64 100644 --- a/frontend/src/page/applications/view.js +++ b/frontend/src/page/applications/view.js @@ -2,10 +2,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import ApplicationEditComponent from '../../component/application/application-edit-container'; -const render = ({ match: { params } }) => ; +const render = ({ match: { params }, history }) => ; render.propTypes = { match: PropTypes.object.isRequired, + history: PropTypes.object.isRequired, }; export default render; diff --git a/frontend/src/store/application/actions.js b/frontend/src/store/application/actions.js index 71e2900f8d..7a29837583 100644 --- a/frontend/src/store/application/actions.js +++ b/frontend/src/store/application/actions.js @@ -7,6 +7,8 @@ export const ERROR_UPDATING_APPLICATION_DATA = 'ERROR_UPDATING_APPLICATION_DATA' export const RECEIVE_APPLICATION = 'RECEIVE_APPLICATION'; export const UPDATE_APPLICATION_FIELD = 'UPDATE_APPLICATION_FIELD'; +export const DELETE_APPLICATION = 'DELETE_APPLICATION'; +export const ERROR_DELETE_APPLICATION = 'ERROR_DELETE_APPLICATION'; const recieveAllApplications = json => ({ type: RECEIVE_ALL_APPLICATIONS, @@ -41,3 +43,11 @@ export function fetchApplication(appName) { .then(json => dispatch(recieveApplication(json))) .catch(dispatchAndThrow(dispatch, ERROR_RECEIVE_ALL_APPLICATIONS)); } + +export function deleteApplication(appName) { + return dispatch => + api + .deleteApplication(appName) + .then(() => dispatch({ type: DELETE_APPLICATION, appName })) + .catch(dispatchAndThrow(dispatch, ERROR_DELETE_APPLICATION)); +} diff --git a/frontend/src/store/application/index.js b/frontend/src/store/application/index.js index 8e3dc36689..06da890586 100644 --- a/frontend/src/store/application/index.js +++ b/frontend/src/store/application/index.js @@ -1,5 +1,5 @@ import { fromJS, List, Map } from 'immutable'; -import { RECEIVE_ALL_APPLICATIONS, RECEIVE_APPLICATION, UPDATE_APPLICATION_FIELD } from './actions'; +import { RECEIVE_ALL_APPLICATIONS, RECEIVE_APPLICATION, UPDATE_APPLICATION_FIELD, DELETE_APPLICATION } from './actions'; import { USER_LOGOUT, USER_LOGIN } from '../user/actions'; function getInitState() { @@ -14,6 +14,11 @@ const store = (state = getInitState(), action) => { return state.set('list', new List(action.value.applications)); case UPDATE_APPLICATION_FIELD: return state.setIn(['apps', action.appName, action.key], action.value); + case DELETE_APPLICATION: { + const index = state.get('list').findIndex(item => item.appName === action.appName); + const result = state.removeIn(['list', index]); + return result.removeIn(['apps', action.appName]); + } case USER_LOGOUT: case USER_LOGIN: return getInitState();