Revert "Wrapping ReactSelect styles into CacheProvider (#2365)" (#2419)

This reverts commit 69200b50c7.

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

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

@@ -1,41 +0,0 @@
-.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, OptionTypeBase, PlaceholderProps } from "react-select";
+import { components, 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<OptionTypeBase, boolean>) => {
+const Placeholder = observer((props: PlaceholderProps<any>) => {
   const getPlaceholder = (): React.ReactNode => {
     const namespaces = namespaceStore.contextNamespaces;
 
@@ -71,7 +71,6 @@ export class NamespaceSelectFilter extends React.Component {
         placeholder={""}
         onChange={this.onChange}
         formatOptionLabel={this.formatOptionLabel}
-        className="NamespaceSelectFilter"
       />
     );
   }

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

@@ -23,6 +23,22 @@
 
 .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-filter.scss";
+import "./namespace-select.scss";
 
 import React from "react";
 import { computed } from "mobx";
@@ -8,6 +8,7 @@ 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;
@@ -21,6 +22,16 @@ 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;
@@ -66,6 +77,8 @@ 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)}