Wrapping ReactSelect styles into CacheProvider (#2365)

* Wrap app into emotion CacheProvider to isolate styles

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix CacheProvider key

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Moving CacheProvider into more specific components

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Align @emotion/react & @emotion/cache version with ones inside react-select

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Covering more components with CacheProvider

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Changing emotion versions a bit more

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Moving CacheProvider into bootstrap

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Updating react-select types

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* A bit of cleaning up types

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Specifying types a bit more

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix gradients in namespace selector

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Importing types separately

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Using generic NonceProvider in bootstrap

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/bootstrap.tsx

@@ -19,6 +19,7 @@ import { filesystemProvisionerStore } from "../main/extension-filesystem";
 import { App } from "./components/app";
 import { LensApp } from "./lens-app";
 import { themeStore } from "./theme.store";
+import { NonceProvider as StyleCache } from "react-select";
 
 /**
  * If this is a development buid, wait a second to attach
@@ -80,9 +81,14 @@ export async function bootstrap(App: AppComponent) {
       window.location.href = "about:blank";
     }
   });
+
+  const cacheProps = { nonce: "lens", cacheKey: "lens" };
+
   render(<>
     {isMac && <div id="draggable-top" />}
-    <App />
+    <StyleCache {...cacheProps}>
+      <App />
+    </StyleCache>
   </>, rootElem);
 }
 

src/renderer/components/+namespaces/namespace-select-filter.scss

@@ -0,0 +1,41 @@
+.NamespaceSelectFilter {
+  .Select {
+    &__placeholder {
+      width: 100%;
+      white-space: nowrap;
+      overflow: scroll!important;
+      text-overflow: unset!important;
+      margin-left: -8px;
+      padding-left: 8px;
+      margin-right: -8px;
+      padding-right: 8px;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    &__value-container {
+      position: relative;
+
+      &::before, &::after {
+        content: ' ';
+        position: absolute;
+        z-index: 20;
+        display: block;
+        width: 8px;
+        height: var(--font-size);
+      }
+
+      &::before {
+        left: 0px;
+        background: linear-gradient(to right, var(--contentColor) 0px, transparent);
+      }
+
+      &::after {
+        right: 0px;
+        background: linear-gradient(to left, var(--contentColor) 0px, transparent);
+      }
+    }
+  }
+}

src/renderer/components/+namespaces/namespace-select-filter.tsx

@@ -2,7 +2,7 @@ import "./namespace-select.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { components, PlaceholderProps } from "react-select";
+import { components, OptionTypeBase, PlaceholderProps } from "react-select";
 
 import { Icon } from "../icon";
 import { FilterIcon } from "../item-object-list/filter-icon";
@@ -11,7 +11,7 @@ import { SelectOption } from "../select";
 import { NamespaceSelect } from "./namespace-select";
 import { namespaceStore } from "./namespace.store";
 
-const Placeholder = observer((props: PlaceholderProps<any>) => {
+const Placeholder = observer((props: PlaceholderProps<OptionTypeBase, boolean>) => {
   const getPlaceholder = (): React.ReactNode => {
     const namespaces = namespaceStore.contextNamespaces;
 
@@ -71,6 +71,7 @@ export class NamespaceSelectFilter extends React.Component {
         placeholder={""}
         onChange={this.onChange}
         formatOptionLabel={this.formatOptionLabel}
+        className="NamespaceSelectFilter"
       />
     );
   }

src/renderer/components/+namespaces/namespace-select.scss

@@ -23,22 +23,6 @@
 
 .NamespaceSelect {
   @include namespaceSelectCommon;
-
-  .Select {
-    &__placeholder {
-      width: 100%;
-      white-space: nowrap;
-      overflow: scroll;
-      margin-left: -8px;
-      padding-left: 8px;
-      margin-right: -8px;
-      padding-right: 8px;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  }
 }
 
 .NamespaceSelectMenu {

src/renderer/components/+namespaces/namespace-select.tsx

@@ -1,4 +1,4 @@
-import "./namespace-select.scss";
+import "./namespace-select-filter.scss";
 
 import React from "react";
 import { computed } from "mobx";
@@ -8,7 +8,6 @@ import { cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { namespaceStore } from "./namespace.store";
 import { kubeWatchApi } from "../../api/kube-watch-api";
-import { components, ValueContainerProps } from "react-select";
 
 interface Props extends SelectProps {
   showIcons?: boolean;
@@ -22,16 +21,6 @@ const defaultProps: Partial<Props> = {
   showClusterOption: false,
 };
 
-function GradientValueContainer<T>({children, ...rest}: ValueContainerProps<T>) {
-  return (
-    <components.ValueContainer {...rest}>
-      <div className="GradientValueContainer front" />
-      {children}
-      <div className="GradientValueContainer back" />
-    </components.ValueContainer>
-  );
-}
-
 @observer
 export class NamespaceSelect extends React.Component<Props> {
   static defaultProps = defaultProps as object;
@@ -77,8 +66,6 @@ export class NamespaceSelect extends React.Component<Props> {
   render() {
     const { className, showIcons, customizeOptions, components = {}, ...selectProps } = this.props;
 
-    components.ValueContainer ??= GradientValueContainer;
-
     return (
       <Select
         className={cssNames("NamespaceSelect", className)}

src/renderer/components/select/select.tsx

@@ -6,23 +6,29 @@ import React, { ReactNode } from "react";
 import { computed } from "mobx";
 import { observer } from "mobx-react";
 import { autobind, cssNames } from "../../utils";
-import ReactSelect, { ActionMeta, components, Props as ReactSelectProps, Styles } from "react-select";
-import Creatable, { CreatableProps } from "react-select/creatable";
+import ReactSelect, { components } from "react-select";
+import Creatable from "react-select/creatable";
 import { themeStore } from "../../theme.store";
 
+import type { ActionMeta, GroupTypeBase, OptionTypeBase, Props as ReactSelectProps, Styles as ReactSelectStyles } from "react-select";
+
 const { Menu } = components;
 
+type OptionType = { label: string; value: string };
+type GroupType = GroupTypeBase<OptionType>;
+
 export interface GroupSelectOption<T extends SelectOption = SelectOption> {
   label: ReactNode;
   options: T[];
 }
 
 export interface SelectOption<T = any> {
-  value: T;
+  value?: T;
   label?: React.ReactNode;
 }
 
-export interface SelectProps<T = any> extends ReactSelectProps<T>, CreatableProps<T> {
+export interface SelectProps<T = any> extends ReactSelectProps<OptionTypeBase, boolean> {
+  options?: ReadonlyArray<OptionType | GroupType | unknown>;
   value?: T;
   themeName?: "dark" | "light" | "outlined";
   menuClass?: string;
@@ -43,7 +49,7 @@ export class Select extends React.Component<SelectProps> {
     return this.props.themeName || themeStore.activeTheme.type;
   }
 
-  private styles: Styles = {
+  private styles: ReactSelectStyles<OptionTypeBase, boolean> = {
     menuPortal: styles => ({
       ...styles,
       zIndex: "auto"
@@ -68,16 +74,10 @@ export class Select extends React.Component<SelectProps> {
     return this.options.find(opt => opt === value || opt.value === value);
   }
 
-  @computed get options(): SelectOption[] {
-    const { autoConvertOptions, options } = this.props;
-
-    if (autoConvertOptions && Array.isArray(options)) {
-      return options.map(opt => {
-        return this.isValidOption(opt) ? opt : { value: opt, label: String(opt) };
-      });
-    }
-
-    return options as SelectOption[];
+  @computed get options(): readonly SelectOption[] {
+    return this.props.options.map(opt => {
+      return this.isValidOption(opt) ? opt : { value: opt, label: String(opt) };
+    });
   }
 
   @autobind()