@sanofi-iadc/glisten

Glisten is a Vue component library that helps managing feedbacks in a Vue application. It is composed of 2 components, a client component that provides a modal and the logic to push a feedback, and a dashboard component to manage and monitor these feedbacks.

It relies on Whispr as a backend.

Documentation

To check out docs, visit https://sanofi-iadc.github.io/glisten/.

Installation

Install the component in your project.

npm install @sanofi-iadc/glisten

You need to install Vuetify and Vue-apollo to use theses compoents

npm install vuetify vue-apollo

Then configure vue-apollo to connect your project to Whispr

import Vue from 'vue';
import VueApollo from 'vue-apollo';
import Glisten, { GlistenClient, GlistenDashboard, ApolloProvider } from '@sanofi-iadc/glisten';

Vue.component('GlistenClient', GlistenClient); // this is not mandatory if you need to use only one component
Vue.component('GlistenDashboard', GlistenDashboard);

Vue.use(Glisten);
Vue.use(VueApollo);
Vue.use(Vuetify);

new Vue({
  vuetify,
  apolloProvider: ApolloProvider(
    process.env.VUE_APP_WHISPR_API_HTTP_URL,
    process.env.VUE_APP_WHISPR_API_WS_URL, // this is not needed if you use only GlistenClient
    authToken, // this is not needed if you use only GlistenClient
  ),
  render: (h) => h(App),
}).$mount('#app');

You can then use these components anywhere in your project (See usage below)

Installation in Nuxt project

Right now SSR doesn't not work with Glisten !

In a nuxt project you need to install Nuxt modules for Vuetify and Apollo, and setup it within nuxt config as such

npm install @nuxtjs/apollo
npm install @nuxtjs/vuetify

Add a plugin in plugins/glisten.client.js :

// glisten.client.js
import Vue from 'vue';
import Glisten, { GlistenClient, GlistenDashboard } from '@sanofi-iadc/glisten';

Vue.component('GlistenClient', GlistenClient);
Vue.component('GlistenDashboard', GlistenDashboard);
Vue.use(Glisten);

Then, in nuxt.config.js add :

  ssr: false, // TODO: does not work in SSR yet
  // ...

  buildModules: [
    // ...
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
  ],


  modules: [
    // ...
    '@nuxtjs/apollo',
  ],

  plugins: [{ src: '@/plugins/glisten.client.js', mode: 'client' }],

  apollo: {
    clientConfigs: {
      whispr: {
        httpEndpoint:
          process.env.WHISPR_HTTP_BASE_URL, // e.g http://localhost:3000/graphql
        wsEndpoint:
          process.env.WHISPR_WS_BASE_URL, // e.g ws://localhost:3000/graphql
      },
    },
  },

Usage

Client Component

You can either use the client to add a modal on a page like this

<template>
  <glisten-client
    :sheet="sheet"
    application-id="you-application-Name"
    user-name="your username"
    :custom-tracker="customTracker"
    text-field-label='Speak your mind'
    greetings="We're always looking to improve. Please share your feedback with us!"
    heart-color="#df323b"
    @close="toggleFeedback"
  />
</template>

Props

• sheet (boolean) : modal is showed whenever true
• application-id (string) : identify the feedback's application
• user-name (string) : default username
• text-field-label=(string) : text displayed in the text field before the user enters something)
• greetings=(string) : greeting text displayed in the top of the component)
• heart-color=(string) : color of the heart symbols)
• custom-tracker (object) : tracks context of the feedback (like current page URL)

// for instance
{
  "contextPortal": window.location.href,
  "contextPage": "",
  "categories": ['First category, 'Second category']
}

Events

• close (void) : emitted whenever close button is pressed

Dashboard component

Insert on page the following comonent

<template>
  <glisten-dashboard />
</template>

Props

• admin-access-rights (boolean) : Allows you to remove feedback from the actions column of the FeedbackList component

Glisten Client Micro front-end

You can either use the micro front-end application deployed in dedicated place. The proposed solution to use Glisten Client as a micro front-end application is Single SPA library. Communication via micro front-end application is implemented via event emitter instance.

To build a micro front-end instance, You need to run the command:

npm run build:glisten-client:microfrontend

To run instance locally, You need to run the command:

npm run serve:microfrontends

Roadmap

• [ ] Split installation of glisten in two npm packages separating feedback and dashboard
• [ ] Make the dashboard components exported as separate widgets so dashboards are composable and more flexible