SUSI.AI Admin Panel now allows the Admin to create, read, update and delete config keys present in system settings. Config keys are API keys which are used to link the application to third party services like Google Maps, Google ReCaptcha, Google Analytics, Matomo, etc. The API key is a unique identifier that is used to authenticate requests associated with the project for usage and billing purposes.
CRUD Operations
Create Config Key
To create a config key click on “Add Config Key” Button, a dialog opens up which has two field Key Name and Key Value. this.props.actions.openModal opens up the shared Dialog Modal. On clicking on “Create”, the createApiKey is called which takes in the two parameters.
handleCreate = () => {
this.props.actions.openModal({
modalType: 'createSystemSettings',
type: 'Create',
handleConfirm: this.confirmUpdate,
keyName: this.state.keyName,
keyValue: this.state.keyValue,
handleClose: this.props.actions.closeModal,
});
};
handleSave = () => {
const { keyName, keyValue } = this.state;
const { handleConfirm } = this.props;
createApiKey({ keyName, keyValue })
.then(() => handleConfirm())
.catch(error => {
console.log(error);
});
};
Read Config Key
API endpoint fetchApiKeys is called on componentDidMount and when Config Key is created, updated or deleted.
fetchApiKeys = () => {
fetchApiKeys()
.then(payload => {
let apiKeys = [];
let i = 1;
let keys = Object.keys(payload.keys);
keys.forEach(j => {
const apiKey = {
serialNum: i,
keyName: j,
value: payload.keys[j],
};
++i;
apiKeys.push(apiKey);
});
this.setState({
apiKeys: apiKeys,
loading: false,
});
})
.catch(error => {
console.log(error);
});
};
Update Config Key
To Update a config key click on edit from the actions column, Update Config Key dialog opens up which allows you to edit the key value. On clicking on update, the createApiKey API is called.
handleUpdate = row => {
this.props.actions.openModal({
modalType: 'updateSystemSettings',
type: 'Update',
keyName: row.keyName,
keyValue: row.value,
handleConfirm: this.confirmUpdate,
handleClose: this.props.actions.closeModal,
});
};
Delete Config Key
To delete a config key click on delete from actions column, delete config key confirmation dialog opens up. On clicking on Delete, the deleteApiKey is called which takes in key name as parameter.
handleDelete = row => {
this.setState({ keyName: row.keyName });
this.props.actions.openModal({
modalType: 'deleteSystemSettings',
keyName: row.keyName,
handleConfirm: this.confirmDelete,
handleClose: this.props.actions.closeModal,
});
};
confirmDelete = () => {
const { keyName } = this.state;
deleteApiKey({ keyName })
.then(this.fetchApiKeys)
.catch(error => {
console.log(error);
});
this.props.actions.closeModal();
};
In conclusion, CRUD operations of Config Keys help admins to manage third party services. With these operations the admin can manage the API keys of various services without having to look for them in the backend.