Adding a feature to delete skills from skill page for admins

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…

Continue ReadingAdding a feature to delete skills from skill page for admins