Ui Plugin Slots

Reusable Vue components for creating UI plugin slots.

Getting Started

Installing

1. Create .npmrc file in the root directory of your Project project and fill with:

   @intuitivewebsolutions:registry=https://npm.pkg.github.com/
   //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

   make sure you create a Github access token with packages permissions and export it as GITHUB_TOKEN

2. Install by running:

   yarn add @intuitivewebsolutions/bc-ui-plugins-slots
   # or: npm install -s @intuitivewebsolutions/bc-ui-plugins-slots

Usage

With a webpack bundler

in the component you want to add the slot to: import the component and register it in the components object.

import BcPluginSlot from "@intuitivewebsolutions/bc-ui-plugin-slots";

...
  components: {
    'bc-plugin-slot': BcPluginSlot,
  }
...

Now you can use it in the template:

<template>
  <div id="app">
    <bc-plugin-slot
      :plugin-methods="{sayHi: (name) => $message('Hi! ' + name)}"
      plugin-slot-name="my-app:header:button-row"
      handler-component="bc-plugin-button-row"
      plugins-url="https://some.url/plugins"
      integrations-url="https://integrations.engineering-dev.britecore.com"
    />
  </div>
</template>

now the sayHi method will be exposed to any plugins if they are initialized on this slot.

Attributes

required attributes are marked with *

1. * plugin-slot-name a unique name to distinguish the slot.

2. * handler-component defines which slot type to render, you have three options: bc-plugin-button-row, bc-plugin-auto-complete and bc-plugin-markup

3. * plugins-url The endpoint to fetch the plugins list from, the json response must be JSON:API compliant, sample

4. * integrations-url Url of BriteCore Integrations, this is used for making requests from plugins to our integrations.

5. access-token If the plugins api requires an Authorization header this value should be passed to authenticate the request, if your plugin sends requests to BriteCore integration services then this attribute is required.

6. context a json object that the plugin will have access to, it can be any json serializable data

7. plugin-slot-disabled if set to true all inputs and buttons inside that slot will be disabled.

8. disabled-message if plugin-slot-disabled is set to true then disabled-message will be used in the pop up message to indicate why an input is disabled.

9. plugin-methods an object that contains the methods to be exposed to the plugin when the connection is initialized between a plugin and a plugin slot, there are already some methods that are exposed by default and can be used in all plugins like:

   • getSlotInfo
   • displayErrors
   • displayMessage
   • displayInfoPopUp
   • getAccessToken

   and there are other exposed methods based on the type of the slot, for instance ButtonRow slot type has:

   • updateButtons
   • showLoadingIndicator Markup slot type has:
   • setData
   • getData
   • showLoadingIndicator

Running locally

Start by running the mock plugins server to serve some static plugins, run:

cd dev/plugins
# install dependencies and run server.
yarn && yarn start

Now you will have a node express server running on port 3000, now you can start webpack dev server, open another terminal tab and run the server using this command on the root directory of this project.

yarn && yarn serve

Now open http://localhost:8000 and you should see the plugins rendering on the page.

Testing

Run tests by using

yarn test:unit