Kibana: Kibana left navbar icons disappear when I click my plugin icon

Created on 14 Feb 2019 · 9Comments · Source: elastic/kibana

Kibana version:
6.6.0

Elasticsearch version:
6.6.0

Server OS version:
Ubuntu 18

Browser version:
Chrome 71

Browser OS version:
Ubuntu 18

Original install method (e.g. download page, yum, from source, etc.):
kibana git repo: https://github.com/elastic/kibana.git

Describe the bug:
Kiban left navbar icons disappear when I click my plugin icon.
screenshot from 2019-02-14 10-26-27
And they are back again when I click on any of the Kibana plugins

Steps to reproduce:

Run Elasticsearch 6.6.0
Generate a plugin and set the following answers

$ cd kibana
kibana$ node scripts/generate_plugin.js rabbit
? Provide a short description An awesome Kibana plugin
? What Kibana version are you targeting? 6.6.0
? Should an app component be generated? Yes
? Should translation files be generated? Yes
? Should a hack component be generated? Yes
? Should a server API be generated? Yes
? Should SCSS be used? Yes

After the build is finished, go to the plugin and start it

$ cd ../kibana-extra/rabbit
yarn start

Expected behavior:
All icons on the Kibana left navbar must be visible after I click on my plugin icon.

Screenshots (if relevant):
Look above for the screenshots.

Errors in browser console (if relevant):
No errors.

Any additional context:

cd rabbit

$ cat index.js 
import exampleRoute from './server/routes/example';

export default function (kibana) {
  return new kibana.Plugin({
    require: ['elasticsearch'],
    name: 'rabbit',
    uiExports: {
      app: {
        title: 'Rabbit',
        description: 'An awesome Kibana plugin',
        main: 'plugins/rabbit/app',
      },
      hacks: [
        'plugins/rabbit/hack'
      ],
      styleSheetPaths: require('path').resolve(__dirname, 'public/app.scss'),
    },

    config(Joi) {
      return Joi.object({
        enabled: Joi.boolean().default(true),
      }).default();
    },

    init(server, options) { // eslint-disable-line no-unused-vars
      // Add server routes and initialize the plugin here
      exampleRoute(server);
    }
  });
}



md5-039123f926f5965a4933a65619de3ff6



$ cat public/app.js 
import React from 'react';
import { uiModules } from 'ui/modules';
import chrome from 'ui/chrome';
import { render, unmountComponentAtNode } from 'react-dom';

import 'ui/autoload/styles';
import './less/main.less';
import { Main } from './components/main';

const app = uiModules.get('apps/rabbit');

app.config($locationProvider => {
  $locationProvider.html5Mode({
    enabled: false,
    requireBase: false,
    rewriteLinks: false,
  });
});
app.config(stateManagementConfigProvider =>
  stateManagementConfigProvider.disable()
);

function RootController($scope, $element, $http) {
  const domNode = $element[0];

  // render react to DOM
  render(<Main title="rabbit" httpClient={$http} />, domNode);

  // unmount react on controller destroy
  $scope.$on('$destroy', () => {
    unmountComponentAtNode(domNode);
  });
}

chrome.setRootController('rabbit', RootController);



md5-039123f926f5965a4933a65619de3ff6



$ tree -I 'node_modules' -L 30 ../rabbit/
../rabbit/
├── index.js
├── package.json
├── public
│   ├── app.css
│   ├── app.js
│   ├── app.scss
│   ├── components
│   │   └── main
│   │       ├── index.js
│   │       └── main.js
│   ├── hack.js
│   ├── less
│   │   └── main.less
│   └── __tests__
│       └── index.js
├── README.md
├── server
│   ├── routes
│   │   └── example.js
│   └── __tests__
│       └── index.js
└── yarn.lock

Kibana-Design

Source