Sidebar item showing in wrong place

[sarg3nt]

Describe the bug

• I've created two sidebar plugins.
• The first creates a root item with an ID of apps and a display name of "Applications" This is used as a "folder" for the apps we want to show.
• The second creates an app inside of the apps "folder"
• We then Terraform the second so we can send a list of apps to create. This creates a ConfigMap for each of the items in the array that is a duplicate of the applications plugin but modified for the specific application.
• This worked fine until I added a new "Alert Manger" as new app in the Terraform array.

I cannot deduce why the new item in the Terraform array is being created in the root of the sidebar and not in the apps "folder"

I've looked at the code, the resultant HTML using inspect in my browser and cannot determine why.
The new item has a "parent" of apps just like the rest of the apps that are showing up in the apps folder.
See attached image of the result in Headlamp and the HTML created.

Result in Headlamp:

HTML

To Reproduce

Reproduction may be difficult due to the complexity of our deployment but I will paste the ConfigMaps here:

Apps This is the root sidebar item that shows "Applications"

apiVersion: v1
data:
  main.js: "/*\n * ATTENTION: The \"eval\" devtool has been used (maybe by default
    in mode: \"development\").\n * This devtool is neither made for production nor
    for readable output files.\n * It uses \"eval()\" calls to create a separate source
    file in the browser devtools.\n * If you are trying to read the output file, select
    a different devtool (https://webpack.js.org/configuration/devtool/)\n * or disable
    the default devtool with \"devtool: false\".\n * If you are looking for production-ready
    output files, see mode: \"production\" (https://webpack.js.org/configuration/mode/).\n
    */\n/******/ (() => { // webpackBootstrap\n/******/ \t\"use strict\";\n/******/
    \tvar __webpack_modules__ = ({\n\n/***/ \"./src/index.tsx\":\n/*!***********************!*\\\n
    \ !*** ./src/index.tsx ***!\n  \\***********************/\n/***/ ((__unused_webpack_module,
    __webpack_exports__, __webpack_require__) => {\n\neval(\"__webpack_require__.r(__webpack_exports__);\\n/*
    harmony import */ var _kinvolk_headlamp_plugin_lib__WEBPACK_IMPORTED_MODULE_0__
    = __webpack_require__(/*! @kinvolk/headlamp-plugin/lib */ \\\"@kinvolk/headlamp-plugin/lib\\\");\\n/*
    harmony import */ var _kinvolk_headlamp_plugin_lib__WEBPACK_IMPORTED_MODULE_0___default
    = /*#__PURE__*/__webpack_require__.n(_kinvolk_headlamp_plugin_lib__WEBPACK_IMPORTED_MODULE_0__);\\n/*
    harmony import */ var _kinvolk_headlamp_plugin_lib_CommonComponents__WEBPACK_IMPORTED_MODULE_1__
    = __webpack_require__(/*! @kinvolk/headlamp-plugin/lib/CommonComponents */ \\\"@kinvolk/headlamp-plugin/lib/CommonComponents\\\");\\n/*
    harmony import */ var _kinvolk_headlamp_plugin_lib_CommonComponents__WEBPACK_IMPORTED_MODULE_1___default
    = /*#__PURE__*/__webpack_require__.n(_kinvolk_headlamp_plugin_lib_CommonComponents__WEBPACK_IMPORTED_MODULE_1__);\\n/*
    harmony import */ var _mui_material_Typography__WEBPACK_IMPORTED_MODULE_2__ =
    __webpack_require__(/*! @mui/material/Typography */ \\\"@mui/material/Typography\\\");\\n/*
    harmony import */ var _mui_material_Typography__WEBPACK_IMPORTED_MODULE_2___default
    = /*#__PURE__*/__webpack_require__.n(_mui_material_Typography__WEBPACK_IMPORTED_MODULE_2__);\\n/*
    harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*!
    react/jsx-runtime */ \\\"react/jsx-runtime\\\");\\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3___default
    = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__);\\n\\n\\n\\n\\n//
    https://icon-sets.iconify.design/mdi/ for icons.\\n// Apps sidebar item\\n\\n(0,_kinvolk_headlamp_plugin_lib__WEBPACK_IMPORTED_MODULE_0__.registerSidebarEntry)({\\n
    \ parent: null,\\n  name: 'apps',\\n  label: 'Applications',\\n  url: '/apps',\\n
    \ icon: 'mdi:apps'\\n});\\n\\n// Apps panel\\n(0,_kinvolk_headlamp_plugin_lib__WEBPACK_IMPORTED_MODULE_0__.registerRoute)({\\n
    \ path: '/apps',\\n  sidebar: 'apps',\\n  name: 'apps',\\n  exact: true,\\n  component:
    function component() {\\n    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_kinvolk_headlamp_plugin_lib_CommonComponents__WEBPACK_IMPORTED_MODULE_1__.SectionBox,
    {\\n      title: \\\"Applications\\\",\\n      textAlign: \\\"center\\\",\\n      paddingTop:
    2,\\n      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)((_mui_material_Typography__WEBPACK_IMPORTED_MODULE_2___default()),
    {\\n        children: \\\"Cluster applications.\\\"\\n      })\\n    });\\n  }\\n});\\n\\n//#
    sourceURL=webpack://apps/./src/index.tsx?\");\n\n/***/ }),\n\n/***/ \"@kinvolk/headlamp-plugin/lib\":\n/*!****************************!*\\\n
    \ !*** external \"pluginLib\" ***!\n  \\****************************/\n/***/ ((module)
    => {\n\nmodule.exports = pluginLib;\n\n/***/ }),\n\n/***/ \"@kinvolk/headlamp-plugin/lib/CommonComponents\":\n/*!*********************************************!*\\\n
    \ !*** external \"pluginLib.CommonComponents\" ***!\n  \\*********************************************/\n/***/
    ((module) => {\n\nmodule.exports = pluginLib.CommonComponents;\n\n/***/ }),\n\n/***/
    \"@mui/material/Typography\":\n/*!********************************************************!*\\\n
    \ !*** external \"pluginLib.MuiMaterial[\\\"Typography\\\"]\" ***!\n  \\********************************************************/\n/***/
    ((module) => {\n\nmodule.exports = pluginLib.MuiMaterial[\"Typography\"];\n\n/***/
    }),\n\n/***/ \"react/jsx-runtime\":\n/*!*************************************!*\\\n
    \ !*** external \"pluginLib.ReactJSX\" ***!\n  \\*************************************/\n/***/
    ((module) => {\n\nmodule.exports = pluginLib.ReactJSX;\n\n/***/ })\n\n/******/
    \t});\n/************************************************************************/\n/******/
    \t// The module cache\n/******/ \tvar __webpack_module_cache__ = {};\n/******/
    \t\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId)
    {\n/******/ \t\t// Check if module is in cache\n/******/ \t\tvar cachedModule
    = __webpack_module_cache__[moduleId];\n/******/ \t\tif (cachedModule !== undefined)
    {\n/******/ \t\t\treturn cachedModule.exports;\n/******/ \t\t}\n/******/ \t\t//
    Create a new module (and put it into the cache)\n/******/ \t\tvar module = __webpack_module_cache__[moduleId]
    = {\n/******/ \t\t\t// no module.id needed\n/******/ \t\t\t// no module.loaded
    needed\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/ \t\n/******/ \t\t//
    Execute the module function\n/******/ \t\t__webpack_modules__[moduleId](module,
    module.exports, __webpack_require__);\n/******/ \t\n/******/ \t\t// Return the
    exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/
    \t\n/************************************************************************/\n/******/
    \t/* webpack/runtime/compat get default export */\n/******/ \t(() => {\n/******/
    \t\t// getDefaultExport function for compatibility with non-harmony modules\n/******/
    \t\t__webpack_require__.n = (module) => {\n/******/ \t\t\tvar getter = module
    && module.__esModule ?\n/******/ \t\t\t\t() => (module['default']) :\n/******/
    \t\t\t\t() => (module);\n/******/ \t\t\t__webpack_require__.d(getter, { a: getter
    });\n/******/ \t\t\treturn getter;\n/******/ \t\t};\n/******/ \t})();\n/******/
    \t\n/******/ \t/* webpack/runtime/define property getters */\n/******/ \t(() =>
    {\n/******/ \t\t// define getter functions for harmony exports\n/******/ \t\t__webpack_require__.d
    = (exports, definition) => {\n/******/ \t\t\tfor(var key in definition) {\n/******/
    \t\t\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports,
    key)) {\n/******/ \t\t\t\t\tObject.defineProperty(exports, key, { enumerable:
    true, get: definition[key] });\n/******/ \t\t\t\t}\n/******/ \t\t\t}\n/******/
    \t\t};\n/******/ \t})();\n/******/ \t\n/******/ \t/* webpack/runtime/hasOwnProperty
    shorthand */\n/******/ \t(() => {\n/******/ \t\t__webpack_require__.o = (obj,
    prop) => (Object.prototype.hasOwnProperty.call(obj, prop))\n/******/ \t})();\n/******/
    \t\n/******/ \t/* webpack/runtime/make namespace object */\n/******/ \t(() =>
    {\n/******/ \t\t// define __esModule on exports\n/******/ \t\t__webpack_require__.r
    = (exports) => {\n/******/ \t\t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag)
    {\n/******/ \t\t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value:
    'Module' });\n/******/ \t\t\t}\n/******/ \t\t\tObject.defineProperty(exports,
    '__esModule', { value: true });\n/******/ \t\t};\n/******/ \t})();\n/******/ \t\n/************************************************************************/\n/******/
    \t\n/******/ \t// startup\n/******/ \t// Load entry module and return exports\n/******/
    \t// This entry module can't be inlined because the eval devtool is used.\n/******/
    \tvar __webpack_exports__ = __webpack_require__(\"./src/index.tsx\");\n/******/
    \t\n/******/ })()\n;"
  package.json: |
    {
      "name": "apps",
      "version": "0.0.1",
      "description": "SEL Sidebar Apps plugin for Headlamp",
      "scripts": {
        "start": "headlamp-plugin start",
        "build": "headlamp-plugin build",
        "format": "headlamp-plugin format",
        "lint": "headlamp-plugin lint",
        "lint-fix": "headlamp-plugin lint --fix",
        "tsc": "headlamp-plugin tsc",
        "storybook": "headlamp-plugin storybook",
        "test": "headlamp-plugin test",
        "storybook-build": "headlamp-plugin storybook-build"
      },
      "keywords": [
        "headlamp",
        "headlamp-plugin",
        "kubernetes",
        "plugins"
      ],
      "prettier": "@kinvolk/eslint-config/prettier-config",
      "eslintConfig": {
        "extends": [
          "@kinvolk",
          "prettier",
          "plugin:jsx-a11y/recommended"
        ]
      },
      "devDependencies": {
        "@kinvolk/headlamp-plugin": "^0.9.2"
      }
    }
immutable: false
kind: ConfigMap

Alert Manger This is the one having issues, being displayed in the root.

apiVersion: v1
data:
  main.js: "/*\n * ATTENTION: The \"eval\" devtool has been used (maybe by default
    in mode: \"development\").\n * This devtool is neither made for production nor
    for readable output files.\n * It uses \"eval()\" calls to create a separate source
    file in the browser devtools.\n * If you are trying to read the output file, select
    a different devtool (https://webpack.js.org/configuration/devtool/)\n * or disable
    the default devtool with \"devtool: false\".\n * If you are looking for production-ready
    output files, see mode: \"production\" (https://webpack.js.org/configuration/mode/).\n
    */\n/******/ (() => { // webpackBootstrap\n/******/ \t\"use strict\";\n/******/
    \tvar __webpack_modules__ = ({\n\n/***/ \"./src/index.tsx\":\n/*!***********************!*\\\n
    \ !*** ./src/index.tsx ***!\n  \\***********************/\n/***/ ((__unused_webpack_module,
    __webpack_exports__, __webpack_require__) => {\n\neval(\"__webpack_require__.r(__webpack_exports__);\\n/*
    harmony import */ var _kinvolk_headlamp_plugin_lib__WEBPACK_IMPORTED_MODULE_0__
    = __webpack_require__(/*! @kinvolk/headlamp-plugin/lib */ \\\"@kinvolk/headlamp-plugin/lib\\\");\\n/*
    harmony import */ var _kinvolk_headlamp_plugin_lib__WEBPACK_IMPORTED_MODULE_0___default
    = /*#__PURE__*/__webpack_require__.n(_kinvolk_headlamp_plugin_lib__WEBPACK_IMPORTED_MODULE_0__);\\n/*
    harmony import */ var _kinvolk_headlamp_plugin_lib_CommonComponents__WEBPACK_IMPORTED_MODULE_1__
    = __webpack_require__(/*! @kinvolk/headlamp-plugin/lib/CommonComponents */ \\\"@kinvolk/headlamp-plugin/lib/CommonComponents\\\");\\n/*
    harmony import */ var _kinvolk_headlamp_plugin_lib_CommonComponents__WEBPACK_IMPORTED_MODULE_1___default
    = /*#__PURE__*/__webpack_require__.n(_kinvolk_headlamp_plugin_lib_CommonComponents__WEBPACK_IMPORTED_MODULE_1__);\\n/*
    harmony import */ var _mui_material_Typography__WEBPACK_IMPORTED_MODULE_2__ =
    __webpack_require__(/*! @mui/material/Typography */ \\\"@mui/material/Typography\\\");\\n/*
    harmony import */ var _mui_material_Typography__WEBPACK_IMPORTED_MODULE_2___default
    = /*#__PURE__*/__webpack_require__.n(_mui_material_Typography__WEBPACK_IMPORTED_MODULE_2__);\\n/*
    harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*!
    react/jsx-runtime */ \\\"react/jsx-runtime\\\");\\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3___default
    = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__);\\n\\n\\n\\n\\n//
    https://icon-sets.iconify.design/mdi/ for icons.\\n\\n(0,_kinvolk_headlamp_plugin_lib__WEBPACK_IMPORTED_MODULE_0__.registerSidebarEntry)({\\n
    \ parent: 'apps',\\n  name: 'alertmanager',\\n  label: 'Alert Manager',\\n  url:
    '/alertmanager',\\n  icon: 'mdi:clipboard-alert-outline'\\n});\\n(0,_kinvolk_headlamp_plugin_lib__WEBPACK_IMPORTED_MODULE_0__.registerRoute)({\\n
    \ path: '/alertmanager',\\n  sidebar: 'alertmanager',\\n  name: 'alertmanager',\\n
    \ exact: true,\\n  component: function component() {\\n    window.open(\\\"https://alertmanager.k8s.vault.ad.selinc.com\\\",
    \\\"_blank\\\");\\n    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_kinvolk_headlamp_plugin_lib_CommonComponents__WEBPACK_IMPORTED_MODULE_1__.SectionBox,
    {\\n      title: \\\"Alert Manager\\\",\\n      textAlign: \\\"center\\\",\\n
    \     paddingTop: 2,\\n      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)((_mui_material_Typography__WEBPACK_IMPORTED_MODULE_2___default()),
    {\\n        children: \\\"Opening in a new tab...\\\"\\n      })\\n    });\\n
    \ }\\n});\\n\\n//# sourceURL=webpack://$%7Bname%7D/./src/index.tsx?\");\n\n/***/
    }),\n\n/***/ \"@kinvolk/headlamp-plugin/lib\":\n/*!****************************!*\\\n
    \ !*** external \"pluginLib\" ***!\n  \\****************************/\n/***/ ((module)
    => {\n\nmodule.exports = pluginLib;\n\n/***/ }),\n\n/***/ \"@kinvolk/headlamp-plugin/lib/CommonComponents\":\n/*!*********************************************!*\\\n
    \ !*** external \"pluginLib.CommonComponents\" ***!\n  \\*********************************************/\n/***/
    ((module) => {\n\nmodule.exports = pluginLib.CommonComponents;\n\n/***/ }),\n\n/***/
    \"@mui/material/Typography\":\n/*!********************************************************!*\\\n
    \ !*** external \"pluginLib.MuiMaterial[\\\"Typography\\\"]\" ***!\n  \\********************************************************/\n/***/
    ((module) => {\n\nmodule.exports = pluginLib.MuiMaterial[\"Typography\"];\n\n/***/
    }),\n\n/***/ \"react/jsx-runtime\":\n/*!*************************************!*\\\n
    \ !*** external \"pluginLib.ReactJSX\" ***!\n  \\*************************************/\n/***/
    ((module) => {\n\nmodule.exports = pluginLib.ReactJSX;\n\n/***/ })\n\n/******/
    \t});\n/************************************************************************/\n/******/
    \t// The module cache\n/******/ \tvar __webpack_module_cache__ = {};\n/******/
    \t\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId)
    {\n/******/ \t\t// Check if module is in cache\n/******/ \t\tvar cachedModule
    = __webpack_module_cache__[moduleId];\n/******/ \t\tif (cachedModule !== undefined)
    {\n/******/ \t\t\treturn cachedModule.exports;\n/******/ \t\t}\n/******/ \t\t//
    Create a new module (and put it into the cache)\n/******/ \t\tvar module = __webpack_module_cache__[moduleId]
    = {\n/******/ \t\t\t// no module.id needed\n/******/ \t\t\t// no module.loaded
    needed\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/ \t\n/******/ \t\t//
    Execute the module function\n/******/ \t\t__webpack_modules__[moduleId](module,
    module.exports, __webpack_require__);\n/******/ \t\n/******/ \t\t// Return the
    exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/
    \t\n/************************************************************************/\n/******/
    \t/* webpack/runtime/compat get default export */\n/******/ \t(() => {\n/******/
    \t\t// getDefaultExport function for compatibility with non-harmony modules\n/******/
    \t\t__webpack_require__.n = (module) => {\n/******/ \t\t\tvar getter = module
    && module.__esModule ?\n/******/ \t\t\t\t() => (module['default']) :\n/******/
    \t\t\t\t() => (module);\n/******/ \t\t\t__webpack_require__.d(getter, { a: getter
    });\n/******/ \t\t\treturn getter;\n/******/ \t\t};\n/******/ \t})();\n/******/
    \t\n/******/ \t/* webpack/runtime/define property getters */\n/******/ \t(() =>
    {\n/******/ \t\t// define getter functions for harmony exports\n/******/ \t\t__webpack_require__.d
    = (exports, definition) => {\n/******/ \t\t\tfor(var key in definition) {\n/******/
    \t\t\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports,
    key)) {\n/******/ \t\t\t\t\tObject.defineProperty(exports, key, { enumerable:
    true, get: definition[key] });\n/******/ \t\t\t\t}\n/******/ \t\t\t}\n/******/
    \t\t};\n/******/ \t})();\n/******/ \t\n/******/ \t/* webpack/runtime/hasOwnProperty
    shorthand */\n/******/ \t(() => {\n/******/ \t\t__webpack_require__.o = (obj,
    prop) => (Object.prototype.hasOwnProperty.call(obj, prop))\n/******/ \t})();\n/******/
    \t\n/******/ \t/* webpack/runtime/make namespace object */\n/******/ \t(() =>
    {\n/******/ \t\t// define __esModule on exports\n/******/ \t\t__webpack_require__.r
    = (exports) => {\n/******/ \t\t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag)
    {\n/******/ \t\t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value:
    'Module' });\n/******/ \t\t\t}\n/******/ \t\t\tObject.defineProperty(exports,
    '__esModule', { value: true });\n/******/ \t\t};\n/******/ \t})();\n/******/ \t\n/************************************************************************/\n/******/
    \t\n/******/ \t// startup\n/******/ \t// Load entry module and return exports\n/******/
    \t// This entry module can't be inlined because the eval devtool is used.\n/******/
    \tvar __webpack_exports__ = __webpack_require__(\"./src/index.tsx\");\n/******/
    \t\n/******/ })()\n;"
  package.json: |
    {
      "name": "alertmanager",
      "version": "0.0.1",
      "description": "SEL Alert Manager Sidebar plugin for Headlamp",
      "scripts": {
        "start": "headlamp-plugin start",
        "build": "headlamp-plugin build",
        "format": "headlamp-plugin format",
        "lint": "headlamp-plugin lint",
        "lint-fix": "headlamp-plugin lint --fix",
        "tsc": "headlamp-plugin tsc",
        "storybook": "headlamp-plugin storybook",
        "test": "headlamp-plugin test",
        "storybook-build": "headlamp-plugin storybook-build"
      },
      "keywords": [
        "headlamp",
        "headlamp-plugin",
        "kubernetes",
        "plugins"
      ],
      "prettier": "@kinvolk/eslint-config/prettier-config",
      "eslintConfig": {
        "extends": [
          "@kinvolk",
          "prettier",
          "plugin:jsx-a11y/recommended"
        ]
      },
      "devDependencies": {
        "@kinvolk/headlamp-plugin": "^0.9.2"
      }
    }
immutable: false
kind: ConfigMap

ArgoCD This is one of the apps that is showing in the sidebar under Applications correctly.

apiVersion: v1
data:
  main.js: "/*\n * ATTENTION: The \"eval\" devtool has been used (maybe by default
    in mode: \"development\").\n * This devtool is neither made for production nor
    for readable output files.\n * It uses \"eval()\" calls to create a separate source
    file in the browser devtools.\n * If you are trying to read the output file, select
    a different devtool (https://webpack.js.org/configuration/devtool/)\n * or disable
    the default devtool with \"devtool: false\".\n * If you are looking for production-ready
    output files, see mode: \"production\" (https://webpack.js.org/configuration/mode/).\n
    */\n/******/ (() => { // webpackBootstrap\n/******/ \t\"use strict\";\n/******/
    \tvar __webpack_modules__ = ({\n\n/***/ \"./src/index.tsx\":\n/*!***********************!*\\\n
    \ !*** ./src/index.tsx ***!\n  \\***********************/\n/***/ ((__unused_webpack_module,
    __webpack_exports__, __webpack_require__) => {\n\neval(\"__webpack_require__.r(__webpack_exports__);\\n/*
    harmony import */ var _kinvolk_headlamp_plugin_lib__WEBPACK_IMPORTED_MODULE_0__
    = __webpack_require__(/*! @kinvolk/headlamp-plugin/lib */ \\\"@kinvolk/headlamp-plugin/lib\\\");\\n/*
    harmony import */ var _kinvolk_headlamp_plugin_lib__WEBPACK_IMPORTED_MODULE_0___default
    = /*#__PURE__*/__webpack_require__.n(_kinvolk_headlamp_plugin_lib__WEBPACK_IMPORTED_MODULE_0__);\\n/*
    harmony import */ var _kinvolk_headlamp_plugin_lib_CommonComponents__WEBPACK_IMPORTED_MODULE_1__
    = __webpack_require__(/*! @kinvolk/headlamp-plugin/lib/CommonComponents */ \\\"@kinvolk/headlamp-plugin/lib/CommonComponents\\\");\\n/*
    harmony import */ var _kinvolk_headlamp_plugin_lib_CommonComponents__WEBPACK_IMPORTED_MODULE_1___default
    = /*#__PURE__*/__webpack_require__.n(_kinvolk_headlamp_plugin_lib_CommonComponents__WEBPACK_IMPORTED_MODULE_1__);\\n/*
    harmony import */ var _mui_material_Typography__WEBPACK_IMPORTED_MODULE_2__ =
    __webpack_require__(/*! @mui/material/Typography */ \\\"@mui/material/Typography\\\");\\n/*
    harmony import */ var _mui_material_Typography__WEBPACK_IMPORTED_MODULE_2___default
    = /*#__PURE__*/__webpack_require__.n(_mui_material_Typography__WEBPACK_IMPORTED_MODULE_2__);\\n/*
    harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*!
    react/jsx-runtime */ \\\"react/jsx-runtime\\\");\\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3___default
    = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__);\\n\\n\\n\\n\\n//
    https://icon-sets.iconify.design/mdi/ for icons.\\n\\n(0,_kinvolk_headlamp_plugin_lib__WEBPACK_IMPORTED_MODULE_0__.registerSidebarEntry)({\\n
    \ parent: 'apps',\\n  name: 'argocd',\\n  label: 'ArgoCD',\\n  url: '/argocd',\\n
    \ icon: 'mdi:source-pull'\\n});\\n(0,_kinvolk_headlamp_plugin_lib__WEBPACK_IMPORTED_MODULE_0__.registerRoute)({\\n
    \ path: '/argocd',\\n  sidebar: 'argocd',\\n  name: 'argocd',\\n  exact: true,\\n
    \ component: function component() {\\n    window.open(\\\"https://argocd.k8s.vault.ad.selinc.com\\\",
    \\\"_blank\\\");\\n    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_kinvolk_headlamp_plugin_lib_CommonComponents__WEBPACK_IMPORTED_MODULE_1__.SectionBox,
    {\\n      title: \\\"ArgoCD\\\",\\n      textAlign: \\\"center\\\",\\n      paddingTop:
    2,\\n      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)((_mui_material_Typography__WEBPACK_IMPORTED_MODULE_2___default()),
    {\\n        children: \\\"Opening in a new tab...\\\"\\n      })\\n    });\\n
    \ }\\n});\\n\\n//# sourceURL=webpack://$%7Bname%7D/./src/index.tsx?\");\n\n/***/
    }),\n\n/***/ \"@kinvolk/headlamp-plugin/lib\":\n/*!****************************!*\\\n
    \ !*** external \"pluginLib\" ***!\n  \\****************************/\n/***/ ((module)
    => {\n\nmodule.exports = pluginLib;\n\n/***/ }),\n\n/***/ \"@kinvolk/headlamp-plugin/lib/CommonComponents\":\n/*!*********************************************!*\\\n
    \ !*** external \"pluginLib.CommonComponents\" ***!\n  \\*********************************************/\n/***/
    ((module) => {\n\nmodule.exports = pluginLib.CommonComponents;\n\n/***/ }),\n\n/***/
    \"@mui/material/Typography\":\n/*!********************************************************!*\\\n
    \ !*** external \"pluginLib.MuiMaterial[\\\"Typography\\\"]\" ***!\n  \\********************************************************/\n/***/
    ((module) => {\n\nmodule.exports = pluginLib.MuiMaterial[\"Typography\"];\n\n/***/
    }),\n\n/***/ \"react/jsx-runtime\":\n/*!*************************************!*\\\n
    \ !*** external \"pluginLib.ReactJSX\" ***!\n  \\*************************************/\n/***/
    ((module) => {\n\nmodule.exports = pluginLib.ReactJSX;\n\n/***/ })\n\n/******/
    \t});\n/************************************************************************/\n/******/
    \t// The module cache\n/******/ \tvar __webpack_module_cache__ = {};\n/******/
    \t\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId)
    {\n/******/ \t\t// Check if module is in cache\n/******/ \t\tvar cachedModule
    = __webpack_module_cache__[moduleId];\n/******/ \t\tif (cachedModule !== undefined)
    {\n/******/ \t\t\treturn cachedModule.exports;\n/******/ \t\t}\n/******/ \t\t//
    Create a new module (and put it into the cache)\n/******/ \t\tvar module = __webpack_module_cache__[moduleId]
    = {\n/******/ \t\t\t// no module.id needed\n/******/ \t\t\t// no module.loaded
    needed\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/ \t\n/******/ \t\t//
    Execute the module function\n/******/ \t\t__webpack_modules__[moduleId](module,
    module.exports, __webpack_require__);\n/******/ \t\n/******/ \t\t// Return the
    exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/
    \t\n/************************************************************************/\n/******/
    \t/* webpack/runtime/compat get default export */\n/******/ \t(() => {\n/******/
    \t\t// getDefaultExport function for compatibility with non-harmony modules\n/******/
    \t\t__webpack_require__.n = (module) => {\n/******/ \t\t\tvar getter = module
    && module.__esModule ?\n/******/ \t\t\t\t() => (module['default']) :\n/******/
    \t\t\t\t() => (module);\n/******/ \t\t\t__webpack_require__.d(getter, { a: getter
    });\n/******/ \t\t\treturn getter;\n/******/ \t\t};\n/******/ \t})();\n/******/
    \t\n/******/ \t/* webpack/runtime/define property getters */\n/******/ \t(() =>
    {\n/******/ \t\t// define getter functions for harmony exports\n/******/ \t\t__webpack_require__.d
    = (exports, definition) => {\n/******/ \t\t\tfor(var key in definition) {\n/******/
    \t\t\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports,
    key)) {\n/******/ \t\t\t\t\tObject.defineProperty(exports, key, { enumerable:
    true, get: definition[key] });\n/******/ \t\t\t\t}\n/******/ \t\t\t}\n/******/
    \t\t};\n/******/ \t})();\n/******/ \t\n/******/ \t/* webpack/runtime/hasOwnProperty
    shorthand */\n/******/ \t(() => {\n/******/ \t\t__webpack_require__.o = (obj,
    prop) => (Object.prototype.hasOwnProperty.call(obj, prop))\n/******/ \t})();\n/******/
    \t\n/******/ \t/* webpack/runtime/make namespace object */\n/******/ \t(() =>
    {\n/******/ \t\t// define __esModule on exports\n/******/ \t\t__webpack_require__.r
    = (exports) => {\n/******/ \t\t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag)
    {\n/******/ \t\t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value:
    'Module' });\n/******/ \t\t\t}\n/******/ \t\t\tObject.defineProperty(exports,
    '__esModule', { value: true });\n/******/ \t\t};\n/******/ \t})();\n/******/ \t\n/************************************************************************/\n/******/
    \t\n/******/ \t// startup\n/******/ \t// Load entry module and return exports\n/******/
    \t// This entry module can't be inlined because the eval devtool is used.\n/******/
    \tvar __webpack_exports__ = __webpack_require__(\"./src/index.tsx\");\n/******/
    \t\n/******/ })()\n;"
  package.json: |
    {
      "name": "argocd",
      "version": "0.0.1",
      "description": "SEL ArgoCD Sidebar plugin for Headlamp",
      "scripts": {
        "start": "headlamp-plugin start",
        "build": "headlamp-plugin build",
        "format": "headlamp-plugin format",
        "lint": "headlamp-plugin lint",
        "lint-fix": "headlamp-plugin lint --fix",
        "tsc": "headlamp-plugin tsc",
        "storybook": "headlamp-plugin storybook",
        "test": "headlamp-plugin test",
        "storybook-build": "headlamp-plugin storybook-build"
      },
      "keywords": [
        "headlamp",
        "headlamp-plugin",
        "kubernetes",
        "plugins"
      ],
      "prettier": "@kinvolk/eslint-config/prettier-config",
      "eslintConfig": {
        "extends": [
          "@kinvolk",
          "prettier",
          "plugin:jsx-a11y/recommended"
        ]
      },
      "devDependencies": {
        "@kinvolk/headlamp-plugin": "^0.9.2"
      }
    }
immutable: false
kind: ConfigMap

Environment

• Installation type: Kubernetes via Helm chart
• Helm
• Headlamp Version: 0.27.0
• Other: Browser is FireFox

Are you able to fix this issue?

No

[sarg3nt]

Forgot to mention things I've tried to fix it.

• Restarting the pod, which you have to do since Headlamp does not automatically pick up changes to the ConfigMaps
• Ctrl+F5 in the browser to bust the cache.
• Shortening the app title from "Alert Manager" to "Alerts"
• Renaming the app title from "Alerts" to "Blerts" just to see if it is an alphabetization issue.

None worked.

[sniok]

Hi, thanks for opening an issue!

I've looked a bit into it and it seems like the order in which plugins are loaded are causing this issue. Since 'alertmanager' comes before 'apps' alphabetically it doesn't have 'apps' parent yet to put the sidebar item into so it's just placed at the root. Which is incorrect and a bug on headlamp's side.