Add horizontal scrolling to NamespaceSelect (#2276)

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

@@ -4,6 +4,23 @@
   }
 }
 
+.GradientValueContainer {
+  width: 8px;
+  height: var(--font-size);
+  position: absolute;
+  z-index: 20;
+
+  &.front {
+    left: 0px;
+    background: linear-gradient(to right, var(--contentColor) 0px, transparent);
+  }
+
+  &.back {
+    right: 0px;
+    background: linear-gradient(to left, var(--contentColor) 0px, transparent);
+  }
+}
+
 .NamespaceSelect {
   @include namespaceSelectCommon;
 
@@ -11,12 +28,19 @@
     &__placeholder {
       width: 100%;
       white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
+      overflow: scroll;
+      margin-left: -8px;
+      padding-left: 8px;
+      margin-right: -8px;
+      padding-right: 8px;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
     }
   }
 }
 
 .NamespaceSelectMenu {
   @include namespaceSelectCommon;
-}
+}

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

@@ -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;
@@ -64,7 +75,9 @@ export class NamespaceSelect extends React.Component<Props> {
   };
 
   render() {
-    const { className, showIcons, customizeOptions, ...selectProps } = this.props;
+    const { className, showIcons, customizeOptions, components = {}, ...selectProps } = this.props;
+
+    components.ValueContainer ??= GradientValueContainer;
 
     return (
       <Select
@@ -72,6 +85,7 @@ export class NamespaceSelect extends React.Component<Props> {
         menuClass="NamespaceSelectMenu"
         formatOptionLabel={this.formatOptionLabel}
         options={this.options}
+        components={components}
         {...selectProps}
       />
     );

src/renderer/components/select/select.tsx

@@ -103,6 +103,7 @@ export class Select extends React.Component<SelectProps> {
       value, options, components = {}, ...props
     } = this.props;
     const themeClass = `theme-${this.theme}`;
+    const WrappedMenu = components.Menu ?? Menu;
 
     const selectProps: Partial<SelectProps> = {
       ...props,
@@ -116,9 +117,9 @@ export class Select extends React.Component<SelectProps> {
       components: {
         ...components,
         Menu: props => (
-          <Menu
+          <WrappedMenu
             {...props}
-            className={cssNames(menuClass, themeClass)}
+            className={cssNames(menuClass, themeClass, props.className)}
           />
         ),
       }