Add customSelectedOptionRenderer to style ContextSwitcher dropdown button

[ndricimrr]

Description

Changes proposed in this pull request:
Added function to customise context switcher button label

In order to test it append the following entry to contextSwitcher.options at test/e2e-test-application/src/luigi-config/extended/navigation.js:233 after label and pathValue
customRendererCategory: n !== 1 ? n % 2 == 0 ? "production" : "stage" : “”

Next add another entry to the contextSwitcher{...}

...
customSelectedOptionRenderer: (option) => {
    if (option.customRendererCategory === 'production') {
      // render a green bubble
      return `<label style="color: #8F0; font-weight:bold">
      ${option.label}
      <img src="https://i.ibb.co/sJZ4TwX/favicon-16x16.png" height="10" />
      </label>`;
    } else if (option.customRendererCategory === 'stage') {
      // render a blue bubble
      return `<label style="color: #08F; font-weight:bold">
      ${option.label}
      <img src="https://i.ibb.co/4p6jtzw/favicon-16x16.png" height="10"  />
      </label>`;
    } else {
    return `${option.label}`;
    }
},
..

Result:

Add this flag to lerna when bootstrapping if your dependencies are not linked:
lerna bootstrap --force-local

Related issue(s)

[alexandra-simeonova]

Great job 👍

[JohannesDoberer]

LGTM 👍

[maxmarkus]

LGTM