Skip to content

Extending Mission Control

Guido edited this page Jul 13, 2020 · 5 revisions

The plugin index file is the right place to register additional functionalities in pre-determined regions of the application

System

Add item to the top menu

To add an item to the top menu bar

plug(
  'menu',
  null,
  {
    id: 'plugin-manager',
    label: 'Plugins',
    url: '/plugins',
    permission: 'admins'
  }
);

This will add the item Plugins to the top bar that will redirect the browser to the page /plugins (you will have to register the page with plug('pages', ...).

The available options for a menu item

Option Type Required Description
id string yes The unique id of the menu item
label string yes The label item
url string yes The URL to redirect the browser to, if it's an internal link, a page must be registered with plug('pages', ...)
permission string/[string] no A permission or a list of permission this link is visibile to (a user can have one or more permission). If empty it will be visible to anyone. Use plug('permissions', ...) to register a new permission

Add item and sub-items to the sidebar

To add items and subitems to the sidebar of Mission Control

plug(
  'sidebar',
  null,
  {
    id: 'myuniqueid',
    label: 'My Items',
    url: '/mycustompage',
    icon: 'file-text',
    options: [
      { label: 'Item 1', url: '/my-custom-1', id: 'item-1' },
      { label: 'Item 2', url: '/my-custom-2', id: 'item-2' }
    ]
  }
);

TBC

Permissions

To register a new permission that will be available in the permissions drop down of the admin modal (and can be used in any permission option while registering views)

plug(
  'permissions',
  null,
  {
    permission: 'plugins',
    name: 'Manage plugings',
    description: `Add, remove and manage plugins in Mission Control`,
    group: 'General'
  }
);

TBC

Add a custom page

To register a custom page in Mission Control

plug(
  'pages', 
  MyCustomPage, { 
    url: '/mypage', 
    title: 'A custom page', 
    id: 'custom-page', 
    permission: 'plugins' 
  }
);

TBC

Users

Add footer button to the user modal

To add a footer button in the user's modal

plug(
  'user-button',
  MyButton
);

An example of the React view

import { Button } from 'rsuite';
const MyButton = ({ user }) => (
  <Button onClick={() => alert(user.first_name)}>Click Me!</Button>
);

The React view receives the following properties from the user modal view

Property Type Description
user user A user object

Dashboard

Add a widget to the dashboard

To add a widget to the home page dashboard

plug(
	'widgets', 
	MyWidget, 
   { x: 0, y: 0, w: 2, h: 6, isResizable: true, id: 1 }
);

The available options

Option Required Type Description
x yes integer The initial x position of the widget
y yes integer The initial y position of the widget
w yes integer The initial width of the widget
h yes integer The initial height of the widget
isResizable yes boolean If the widget can be resized
id yes integer/string A unique id of the widget

Devices

Add header in device page

To add an header in the general information of the device detail page

plug(
  'device-header',
  ({ device }) => {
    return <span>{device.payload.network.apn.name}</span>
  },
  {
    label: 'A label',
    edit: '/network/my_config',
    id: 'my-id',
    tooltip: 'Edit this param'
  }
);

The available options

Option Required Type Description
id yes string The device id
label yes string A descriptive label
tooltip no string Tooltip text for the edit button
edit no string The path of the portion of json schema to edit (i.e. /network/my_config

And example of React view

({ device }) => {
 	return <span>{device.payload.my_param}</span>
 }

The React view receives the following properties from the device detail view

Property Type Description
device device A device object

Content Management System

Adding a tab to the content modal

The code below will add a tab to the content modal

import { plug } from 'code-plug';

plug('content-tabs', MyTab, {
  id: 'content-configuration',
  label: 'Configuration'
});

The available options

Option Required Type Description
id yes string The unique id of the tab
label yes string The tab label
namespace no string/[string] List of content namespaces for which the table is visible. Empty array or null means it's always visible
permission no [string] In order to show the tab, user must have one of these permissions

An example of custom tab

const MyTab = ({ formValue = {}, onChange = () => {}, disabled = false }) => (
  <div className="my-tab">
    <input 
      value={formValue.my_field}
      onChange={e => onChange({ ...formValue, my_field: e.target.value }}
	  />
  </div>
);

It's important to remember that a tab is only able to change the payload key of the content, which is space where all custom plugins store the extension to the contents, it's important to preserve the content of payload without overwriting other plugin's extension.

The React view receives the following properties by the modal view

Property Type Description
formValue object The hash of the payload field of the current content
onChange function Propagate the change, always send all the payload value with onChange({ ...formValue, my_field: ... })otherwise other's plugin value will be overwritten
disabled boolean Disable the form (for example while saving)

Object reference

User

Name Type Description
id integer The internal id of the user (it's the unique key in the database)
userId string The unique userId of the platform, it's generally the user id of the chat platform the user is using
first_name string
last_name string
language string The default language of the user (not all platforms provide this value). Two letters ISO format
username string The user nickname (not all platforms provide this value)
createdAt date
payload json The user's payload. It's a json object where plugins stores additional values about this user
Clone this wiki locally