SUSI Skill CMS has evolved drastically over the past few months with not only the introduction of skill metrics, skill analytics and powerful sorting features and interactive skill view types we needed the SUSI admins to be able to delete skills directly from the skills page and hence the skill can be deleted without visiting the admin service and then locating the skill and deleting it. This feature can be useful when a skill live on the system needs to be removed instantaneously for any reason like the API used by the skill going down or if it is a redundant skill or anything else. This feature was much needed for the admins and thus it was implemented.

About the API

An API is developed at the server so from the client we call this API to fetch data from the server and plug this data into the chart we wish to render.

Endpoint :

/cms/deleteSkill.json?access_token={access_token}&model={model}&group={group}&language={language}&skill={skill}

Parameters :

• Model
• Group
• Skill
• Language
• Feedback
• Access token (taken from the session of the logged in user)

Sample API call :

/cms/deleteSkill.json?access_token=ANecfA1GjP4Bkgv4PwjL0OAW4kODzW&model=general&group=Knowledge&language=en&skill=whois

Displaying a button with delete icon on skill page

The option to delete skill should be available at the skill page for each skill so we add a button with a delete icon for this in the group of edit skills and skill version buttons, clicking over this button will open up a confirmation dialog with two actions notable the delete/confirm button which deletes the skills and the cancel button which can be useful in case the user changes their mind. On clicking the delete button the request to delete the skill is sent to the server and thus the skill is deleted.

Import some required components

import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import Cookies from 'universal-cookie';
import $ from 'jquery';

Adding some variables to the component state which will help us decide when the delete skill dialog is to be shown.

this.state = {
   ...
   showDeleteDialog: false,
   ...
}

Display the delete skill button only when the user is logged in user has admin rights.

{
   cookies.get(showAdmin) ? (
           ...
   ): ''
}

Adding some JSX to the component’s render function which includes a div in the skill page section and the Dialog component for the delete skill and some actions which in our case is the the confirmation to delete skill and to cancel the skill deletion in case the user changes their mind. Also a tooltip is shown which appears on hovering over the delete skill button.

<div className="skillDeleteBtn">
 <FloatingActionButton
        onClick={this.handleDeleteToggle}
        data-tip="Delete Skill"
        backgroundColor={colors.header}
 >
        <DeleteBtn />
 </FloatingActionButton>
 <ReactTooltip effect="solid" place="bottom" />
 <Dialog
        title="Delete Skill"
        actions={deleteDialogActions}
        modal={false}
        open={this.state.showDeleteDialog}
        onRequestClose={this.handleDeleteToggle}
 >
        <div>
         Are you sure about deleting{' '}
         <span style={{ fontWeight: 'bold' }}>
           {this.state.skill_name}
         </span>?
        </div>
 </Dialog>
</div>

Clicking the delete skill button will change the state variable which decides whether the dialog is to be shown or not.

handleDeleteToggle = () => {
 this.setState({
        showDeleteDialog: !this.state.showDeleteDialog,
 });
};

Adding submit and cancel actions for the dialog menu and send them to the dialog as a prop.

const deleteDialogActions = [
 <FlatButton
        label="Delete"
        key="delete"
        style={{ color: 'rgb(66, 133, 244)' }}
        onClick={this.deleteSkill}
 />,
 <FlatButton
        label="Cancel"
        key="cancel"
        style={{ color: 'rgb(66, 133, 244)' }}
        onClick={this.handleDeleteToggle}
 />,
];

Hitting the endpoint for skill deletion.

Adding onClick event handlers for dialog actions, for the cancel button we simply toggle the view of the delete skill dialog and for the submit button hits the endpoint for skill deletion and then we display a snack bar message about the status of request we submit if it succeeded or failed. Once the submit button is clicked we hit the delete skill endpoint by supplying appropriate params and post the request for skill deletion by calling the API through AJAX with appropriate params and thus this concludes the skill deletion workflow.

Build the URL for the AJAX request.

let deleteUrl =    `${urls.API_URL}/cms/deleteSkill.json?model=${this.state.skillModel}&group=${this.state.skillGroup}&language=${this.state.skillLanguagelanguage}&skill=${this.state.skill_name}&access_token=${cookies.get('loggedIn')}`

Make an AJAX request to the built API URL and in case the request is successful we set the conditional for displaying the snackbar to true and set the snackbar message depending on whether the skill was deleted successfully or it failed.

$.ajax({
 url: deleteUrl,
 dataType: 'jsonp',
 jsonp: 'callback',
 crossDomain: true,
 success: function(data) {
        // redirect to the index page since the skill page won't be accessible
        this.handleDeleteToggle();
        this.setState({
         dataReceived: true,
        });
        this.props.history.push('/');
 }.bind(this),
 error: function(err) {
        console.log(err);
        this.handleReportToggle();
        this.setState({
         openSnack: true,
         snackMessage: 'Failed to delete the skill.',
        });
 }.bind(this),
});

This concludes the workflow of how the skill deletion feature was implemented on the CMS skill page for admins. I hope you found this useful.

Resources

• David Gilbertson, Icons as react components: https://medium.com/@david.gilbertson/icons-as-react-components-de3e33cb8792 
• Guide to use material icons, https://material-ui.com/style/icons/