diff --git a/package.json b/package.json
index 0f43a5310e..b6b1fd1ea5 100644
--- a/package.json
+++ b/package.json
@@ -286,7 +286,7 @@
"@types/react-beautiful-dnd": "^13.0.0",
"@types/react-dom": "^17.0.0",
"@types/react-router-dom": "^5.1.6",
- "@types/react-select": "^4.0.13",
+ "@types/react-select": "^3.0.13",
"@types/react-window": "^1.8.2",
"@types/readable-stream": "^2.3.9",
"@types/request": "^2.48.5",
@@ -350,7 +350,7 @@
"react-beautiful-dnd": "^13.0.0",
"react-refresh": "^0.9.0",
"react-router-dom": "^5.2.0",
- "react-select": "^4.3.0",
+ "react-select": "^3.1.0",
"react-select-event": "^5.1.0",
"react-window": "^1.8.5",
"sass-loader": "^8.0.2",
diff --git a/src/renderer/bootstrap.tsx b/src/renderer/bootstrap.tsx
index ce822ca2ae..0d412e257c 100644
--- a/src/renderer/bootstrap.tsx
+++ b/src/renderer/bootstrap.tsx
@@ -19,7 +19,6 @@ 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
@@ -81,14 +80,9 @@ export async function bootstrap(App: AppComponent) {
window.location.href = "about:blank";
}
});
-
- const cacheProps = { nonce: "lens", cacheKey: "lens" };
-
render(<>
{isMac && }
-
-
-
+
, rootElem);
}
diff --git a/src/renderer/components/+namespaces/namespace-select-filter.scss b/src/renderer/components/+namespaces/namespace-select-filter.scss
deleted file mode 100644
index b9ad196e04..0000000000
--- a/src/renderer/components/+namespaces/namespace-select-filter.scss
+++ /dev/null
@@ -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);
- }
- }
- }
-}
\ No newline at end of file
diff --git a/src/renderer/components/+namespaces/namespace-select-filter.tsx b/src/renderer/components/+namespaces/namespace-select-filter.tsx
index 7b73cfc99d..85a6299b17 100644
--- a/src/renderer/components/+namespaces/namespace-select-filter.tsx
+++ b/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) => {
+const Placeholder = observer((props: PlaceholderProps) => {
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"
/>
);
}
diff --git a/src/renderer/components/+namespaces/namespace-select.scss b/src/renderer/components/+namespaces/namespace-select.scss
index f300544cfb..33293a6d7a 100644
--- a/src/renderer/components/+namespaces/namespace-select.scss
+++ b/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 {
diff --git a/src/renderer/components/+namespaces/namespace-select.tsx b/src/renderer/components/+namespaces/namespace-select.tsx
index d3df621b50..d398f91f0a 100644
--- a/src/renderer/components/+namespaces/namespace-select.tsx
+++ b/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 = {
showClusterOption: false,
};
+function GradientValueContainer({children, ...rest}: ValueContainerProps) {
+ return (
+
+
+ {children}
+
+
+ );
+}
+
@observer
export class NamespaceSelect extends React.Component {
static defaultProps = defaultProps as object;
@@ -66,6 +77,8 @@ export class NamespaceSelect extends React.Component {
render() {
const { className, showIcons, customizeOptions, components = {}, ...selectProps } = this.props;
+ components.ValueContainer ??= GradientValueContainer;
+
return (