hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

fix namespace-select-filter.tsx

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2022-04-12 14:53:24 -04:00
parent 9c388dc499
commit b2d36493ae
2 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/renderer/components/+namespaces/namespace-select-filter-model/namespace-select-filter-model.tsx
View File

@ -17,6 +17,10 @@ export const selectAllNamespaces = Symbol("all-namespaces-selected");
export type SelectAllNamespaces = typeof selectAllNamespaces;
export interface NamespaceSelectFilterOption {
namespace: string | SelectAllNamespaces;
}
export class NamespaceSelectFilterModel {
constructor(private readonly dependencies: Dependencies) {
makeObservable(this, {
@ -27,7 +31,7 @@ export class NamespaceSelectFilterModel {
});
}
readonly options = computed(() => {
readonly options = computed((): readonly NamespaceSelectFilterOption[] => {
const baseOptions = this.dependencies.namespaceStore.items.map(ns => ns.getName());
baseOptions.sort((
@ -36,20 +40,22 @@ export class NamespaceSelectFilterModel {
- +this.selectedNames.has(left)
));
return [selectAllNamespaces, ...baseOptions] as const;
const res = [selectAllNamespaces, ...baseOptions] as const;
return res.map(namespace => ({ namespace }));
});
formatOptionLabel = (option: string | SelectAllNamespaces) => {
if (option === selectAllNamespaces) {
formatOptionLabel = ({ namespace }: NamespaceSelectFilterOption) => {
if (namespace === selectAllNamespaces) {
return "All Namespaces";
}
const isSelected = this.isSelected(option);
const isSelected = this.isSelected(namespace);
return (
<div className="flex gaps align-center">
<Icon small material="layers" />
<span>{option}</span>
<span>{namespace}</span>
{isSelected && (
<Icon
small
@ -61,12 +67,12 @@ export class NamespaceSelectFilterModel {
);
};
getOptionLabel = (option: string | SelectAllNamespaces) => {
if (option === selectAllNamespaces) {
getOptionLabel = ({ namespace }: NamespaceSelectFilterOption) => {
if (namespace === selectAllNamespaces) {
return "All Namespaces";
}
return option;
return namespace;
};
menuIsOpen = false;
@ -94,7 +100,7 @@ export class NamespaceSelectFilterModel {
this.dependencies.namespaceStore.selectAll();
};
onChange = (namespace: unknown, action: ActionMeta<string | SelectAllNamespaces>) => {
onChange = (namespace: unknown, action: ActionMeta<NamespaceSelectFilterOption>) => {
switch (action.action) {
case "clear":
this.dependencies.namespaceStore.selectAll();
@ -105,13 +111,13 @@ export class NamespaceSelectFilterModel {
}
break;
case "select-option":
if (action.option === selectAllNamespaces) {
if (action.option?.namespace === selectAllNamespaces) {
this.dependencies.namespaceStore.selectAll();
} else if (action.option) {
if (this.isMultiSelection) {
this.dependencies.namespaceStore.toggleSingle(action.option);
this.dependencies.namespaceStore.toggleSingle(action.option.namespace);
} else {
this.dependencies.namespaceStore.selectSingle(action.option);
this.dependencies.namespaceStore.selectSingle(action.option.namespace);
}
}
break;

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

@ -12,7 +12,7 @@ import { components } from "react-select";
import type { NamespaceStore } from "./namespace-store/namespace.store";
import { Select } from "../select";
import { withInjectables } from "@ogre-tools/injectable-react";
import type { NamespaceSelectFilterModel, SelectAllNamespaces } from "./namespace-select-filter-model/namespace-select-filter-model";
import type { NamespaceSelectFilterModel, NamespaceSelectFilterOption, SelectAllNamespaces } from "./namespace-select-filter-model/namespace-select-filter-model";
import namespaceSelectFilterModelInjectable from "./namespace-select-filter-model/namespace-select-filter-model.injectable";
import namespaceStoreInjectable from "./namespace-store/namespace-store.injectable";
@ -31,7 +31,7 @@ const NonInjectedNamespaceSelectFilter = observer(({ model, id }: Dependencies &
onKeyDown={model.onKeyDown}
onClick={model.onClick}
>
<Select<string | SelectAllNamespaces, true>
<Select<{ namespace: string | SelectAllNamespaces }, true>
id={id}
isMulti={true}
isClearable={false}
@ -58,7 +58,7 @@ export const NamespaceSelectFilter = withInjectables<Dependencies, NamespaceSele
}),
});
export interface CustomPlaceholderProps extends PlaceholderProps<string | SelectAllNamespaces, boolean> {}
export interface CustomPlaceholderProps extends PlaceholderProps<NamespaceSelectFilterOption, boolean> {}
interface PlaceholderDependencies {
namespaceStore: NamespaceStore;