mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Turn on strict mode in tsconfig.json, some helpful lints, and required cleanup where strictness necessitates it (#5195)
* Turn on strict mode in tsconfig.json - Add route, clusterRoute, and payloadValidatedClusterRoute helper functions to improve types with backend routes - Turn on the following new lints: - react/jsx-first-prop-new-line - react/jsx-wrap-multilines - react/jsx-one-expression-per-line - react/jsx-max-props-per-line - react/jsx-indent - react/jsx-indent-props Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix build Signed-off-by: Sebastian Malton <sebastian@malton.name> * Replace KubeObject scope strings with enum Signed-off-by: Sebastian Malton <sebastian@malton.name> * Revert package.json version changes Signed-off-by: Sebastian Malton <sebastian@malton.name> * revert move hostedCluster(Id) Signed-off-by: Sebastian Malton <sebastian@malton.name> * change some type param names to be not single letters Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove copy-extension-themes Signed-off-by: Sebastian Malton <sebastian@malton.name> * add new make clean action Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix build to not use webpack for generating types Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube-object-menu.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix select.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * revert move fileNameMigration to index Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix ref logic error Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix log-resource-selector.test.tsx tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-store.test.ts test by overriding createStorage to not touch file system Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cluster.test.ts tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube=api.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fixed hotbar-store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kubeconfig-manager.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cluster-role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix pods.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix delete-cluster-dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix daemonset.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix replicaset.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix statefulsets/dialog/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix replicasets/scale-dialog/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix deployments.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix deployments/scale/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cronjob.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix stateful-set.api.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix deployment.api.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix api-manager.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix statefulset.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix job.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix pods.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix scroll-spy.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix hotbar-remove-command.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog-entity-registry.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix welcome.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix verify-that-all-routes-have-route-component.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix pod-tolerations.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * better fix for previous 3 fixes, plus also select.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube-object-menu.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix app-paths.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-tabs.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix isReactNode typing Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix sub-title.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix drawer.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix list-layout.tsx and header.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix error-boundary.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix upgrade-chart/store.ts and dock-tab.store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix install-chart/store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix edit-resource/store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix create-resource/store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix namespace-select.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix namespace-select-filter.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix crd-list.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix wrong types for extensions Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix circular dependency Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix circular dependency on catalogCategoryRegistry Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix api-kube Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix type errors, most <Select /> errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * fixing more type errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * some more fixing type errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * convert all KubeApis to injectable with legacy global backups Signed-off-by: Sebastian Malton <sebastian@malton.name> * factor out into a common file all the exports Signed-off-by: Sebastian Malton <sebastian@malton.name> * convert all KubeObjectStores to injectable with legacy global backups Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix lint Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove unused legacy KubeApi globals Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix bad previous commit Signed-off-by: Sebastian Malton <sebastian@malton.name> * more crash fixing Signed-off-by: Sebastian Malton <sebastian@malton.name> * try and fix behavioural tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix sidebar-and-tab-navigation-for-core.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix sidebar-and-tab-navigation-for-extensions.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-using-application-menu.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make ThemeStore non-singleton and fix navigation-to-terminal-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * extensions.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog-entity-registry.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-using-application-menu.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix log-resource-selector.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-tabs.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix delete-cluster-dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-kubernetes-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-editor-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-proxy-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-using-application-menu.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-application-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix select.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix hotbar-remove-command.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cluster-role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-extension-specific-preferences.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-telemetry-preferences.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix closing-preferences.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-editor-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-proxy-preferences.test.ts - Fix other type errors too Signed-off-by: Sebastian Malton <sebastian@malton.name> * final tweaks Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add more tsconfig files, fix bug in <Catalog> - Make all of history, navigation injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix type errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * Convert all of kube-details-params/ and navigate/ to injectable - This fixes a runtime error that was encountered during testing Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix runtime errors on renderer - remove all static uses of `createPageParam` (and then removed the legacy global) - Made LensRendererExtension and LensMainExtension just used dependencies and not the getLegacyDi - Fixed circular dep in extension-loader Signed-off-by: Sebastian Malton <sebastian@malton.name> * Move registerStore calls to after injectMany Signed-off-by: Sebastian Malton <sebastian@malton.name> * replace all the rest of the legacy uses of apiManager Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix stack overflow and cycles in DI Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix NamespaceSelectFilter not opening Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix WizardStep and AddNamespaceDialog Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix KubeApi's not being registered Signed-off-by: Sebastian Malton <sebastian@malton.name> * cleanup WindowManager Signed-off-by: Sebastian Malton <sebastian@malton.name> * Proper fix for Wizard, fix NamespaceStore.subscribe Signed-off-by: Sebastian Malton <sebastian@malton.name> * Rewrite withTooltip to be more type correct - Fixes mobx related "too many recursive actions" error - Change all the uses of withTooltips to be functional components Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add e2e test to cover kube api registration Signed-off-by: Sebastian Malton <sebastian@malton.name> * cleanup internal-commands Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove cast in <Animate> Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix command-palette e2e test Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix type error after rebase Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix test name Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix lint Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix code to help CodeQL scanner Signed-off-by: Sebastian Malton <sebastian@malton.name> * update intree extension lock files Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix build-extensions picking wrong @types/react Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix tests from rebase Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix type error Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make KubeconfigSyncManager more injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix crash in test mode for Dialog Signed-off-by: Sebastian Malton <sebastian@malton.name> * make Select snapshots deterministic Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix new type error Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube-object.store.test.ts typing Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix merge build issues Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix snapshots after merge Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix lint after merge Signed-off-by: Sebastian Malton <sebastian@malton.name> * reexport BaseKubeJsonApiObjectMetadata Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix typo in terminalSpawningPool Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove duplicate license header Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix typo to waitUntilDefined Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove iter use from getLegacyGlobalDiForExtensionApi Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove complex createStorage override Signed-off-by: Sebastian Malton <sebastian@malton.name> * override logger with mocks only when needed for tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove specialized overrideStore flags for getDiForUnitTesting Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove unnecessary | undefined types from the exactOptionalFieldTypes experiment Signed-off-by: Sebastian Malton <sebastian@malton.name> * use more descriptive name for local test mocks Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove unnecessary addition to 'make clean' target Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove oddity of KubeObjectStore.getById(undefined) being allowed Signed-off-by: Sebastian Malton <sebastian@malton.name> * rename KubeObject.getDescriptor in favour of name without fundemental JS meaning Signed-off-by: Sebastian Malton <sebastian@malton.name> * Simplify legacyRegisterApi when working in behaviour unit tests - Don't emit within main environment as there should be no auto registering there Signed-off-by: Sebastian Malton <sebastian@malton.name> * change confusing variable name in ReactiveDuration Signed-off-by: Sebastian Malton <sebastian@malton.name> * make visitor pattern more explicit for Entity contextMenuOpen Signed-off-by: Sebastian Malton <sebastian@malton.name> * toggleDetails -> toggleKubeDetailsPane is more specific Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove outdated comment Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix bug where LensExtension dependencies are not set Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix tests from the revert of react 18 Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix more tests from merge Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix typings with new is-compatible-extension tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * more type fixing Signed-off-by: Sebastian Malton <sebastian@malton.name> * Revert in-tree extension versions Signed-off-by: Sebastian Malton <sebastian@malton.name> * Improve name of guarding injectable for stores and apis - New name better implies that it is just a guard state and does not do anything Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add helper for <Select>.isMulti for storing in a Set<Value> Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix is-compatible-extension.test.ts types Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton authored and 
GitHub committed
1 parent
381d77c633
commit
dfcb7c3330
1062 files changed
+26512
-28689
No files matched your search
@@ -4,9 +4,8 @@
|
||||
*/
|
||||
import React from "react";
|
||||
import "@testing-library/jest-dom/extend-expect";
|
||||
import type { SelectOption } from "./select";
|
||||
import { Select } from "./select";
|
||||
import { UserStore } from "../../../common/user-store";
|
||||
import { ThemeStore } from "../../theme.store";
|
||||
import { getDiForUnitTesting } from "../../getDiForUnitTesting";
|
||||
import type { DiContainer } from "@ogre-tools/injectable";
|
||||
import type { DiRender } from "../test-utils/renderFor";
|
||||
@@ -18,6 +17,7 @@ import { computed } from "mobx";
|
||||
import type { LensRendererExtension } from "../../../extensions/lens-renderer-extension";
|
||||
import getConfigurationFileModelInjectable from "../../../common/get-configuration-file-model/get-configuration-file-model.injectable";
|
||||
import appVersionInjectable from "../../../common/get-configuration-file-model/app-version/app-version.injectable";
|
||||
import ipcRendererInjectable from "../../app-paths/get-value-from-registered-channel/ipc-renderer/ipc-renderer.injectable";
|
||||
|
||||
jest.mock("electron", () => ({
|
||||
ipcRenderer: {
|
||||
@@ -36,21 +36,18 @@ describe("<Select />", () => {
|
||||
|
||||
mockFs();
|
||||
|
||||
await di.runSetups();
|
||||
di.override(directoryForUserDataInjectable, () => "some-directory-for-user-data");
|
||||
di.override(rendererExtensionsInjectable, () => computed(() => [] as LensRendererExtension[]));
|
||||
di.override(ipcRendererInjectable, () => ({
|
||||
on: jest.fn(),
|
||||
invoke: jest.fn(), // TODO: replace with proper mocking via the IPC bridge
|
||||
} as never));
|
||||
|
||||
di.permitSideEffects(getConfigurationFileModelInjectable);
|
||||
di.permitSideEffects(appVersionInjectable);
|
||||
|
||||
UserStore.createInstance();
|
||||
ThemeStore.createInstance();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
ThemeStore.resetInstance();
|
||||
UserStore.resetInstance();
|
||||
|
||||
mockFs.restore();
|
||||
});
|
||||
|
||||
@@ -68,7 +65,13 @@ describe("<Select />", () => {
|
||||
|
||||
const onChange = jest.fn();
|
||||
|
||||
const { container } = render(<Select id="some-test-input" onChange={onChange} options={options} />);
|
||||
const { container } = render((
|
||||
<Select
|
||||
id="some-test-input"
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
/>
|
||||
));
|
||||
|
||||
expect(container).toBeInstanceOf(HTMLElement);
|
||||
});
|
||||
@@ -87,10 +90,16 @@ describe("<Select />", () => {
|
||||
|
||||
const onChange = jest.fn();
|
||||
|
||||
const { container } = render(<Select id="some-test-input" value={options[0].value} onChange={onChange} options={options} />);
|
||||
const { container } = render((
|
||||
<Select
|
||||
value={options[0].value}
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
/>
|
||||
));
|
||||
const selectedValueContainer = container.querySelector(".Select__single-value");
|
||||
|
||||
expect(selectedValueContainer.textContent).toBe(options[0].label);
|
||||
expect(selectedValueContainer?.textContent).toBe(options[0].label);
|
||||
});
|
||||
|
||||
it("should reflect to change value", async () => {
|
||||
@@ -107,14 +116,26 @@ describe("<Select />", () => {
|
||||
|
||||
const onChange = jest.fn();
|
||||
|
||||
const { container, rerender } = render(<Select id="some-test-input" value={options[0].value} onChange={onChange} options={options} />);
|
||||
const { container, rerender } = render((
|
||||
<Select
|
||||
value={options[0].value}
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
/>
|
||||
));
|
||||
const selectedValueContainer = container.querySelector(".Select__single-value");
|
||||
|
||||
expect(selectedValueContainer.textContent).toBe(options[0].label);
|
||||
expect(selectedValueContainer?.textContent).toBe(options[0].label);
|
||||
|
||||
rerender(<Select id="some-test-input" value={options[1].value} onChange={onChange} options={options} />);
|
||||
rerender((
|
||||
<Select
|
||||
value={options[1].value}
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
/>
|
||||
));
|
||||
|
||||
expect(container.querySelector(".Select__single-value").textContent).toBe(options[1].label);
|
||||
expect(container.querySelector(".Select__single-value")?.textContent).toBe(options[1].label);
|
||||
});
|
||||
|
||||
it("should unselect value if null is passed as a value", async () => {
|
||||
@@ -131,12 +152,24 @@ describe("<Select />", () => {
|
||||
|
||||
const onChange = jest.fn();
|
||||
|
||||
const { container, rerender } = render(<Select id="some-test-input" value={options[0].value} onChange={onChange} options={options} />);
|
||||
const { container, rerender } = render((
|
||||
<Select
|
||||
value={options[0].value}
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
/>
|
||||
));
|
||||
const selectedValueContainer = container.querySelector(".Select__single-value");
|
||||
|
||||
expect(selectedValueContainer.textContent).toBe(options[0].label);
|
||||
expect(selectedValueContainer?.textContent).toBe(options[0].label);
|
||||
|
||||
rerender(<Select id="some-test-input" value={null} onChange={onChange} options={options} />);
|
||||
rerender((
|
||||
<Select<string, SelectOption<string>>
|
||||
value={null}
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
/>
|
||||
));
|
||||
|
||||
expect(container.querySelector(".Select__single-value")).not.toBeInTheDocument();
|
||||
});
|
||||
@@ -155,12 +188,24 @@ describe("<Select />", () => {
|
||||
|
||||
const onChange = jest.fn();
|
||||
|
||||
const { container, rerender } = render(<Select id="some-test-input" value={options[0].value} onChange={onChange} options={options} />);
|
||||
const { container, rerender } = render((
|
||||
<Select
|
||||
value={options[0].value}
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
/>
|
||||
));
|
||||
const selectedValueContainer = container.querySelector(".Select__single-value");
|
||||
|
||||
expect(selectedValueContainer.textContent).toBe(options[0].label);
|
||||
expect(selectedValueContainer?.textContent).toBe(options[0].label);
|
||||
|
||||
rerender(<Select id="some-test-input" value={undefined} onChange={onChange} options={options} />);
|
||||
rerender((
|
||||
<Select<string, SelectOption<string>>
|
||||
value={undefined}
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
/>
|
||||
));
|
||||
|
||||
expect(container.querySelector(".Select__single-value")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
@@ -8,148 +8,248 @@
|
||||
import "./select.scss";
|
||||
|
||||
import React from "react";
|
||||
import { computed, makeObservable } from "mobx";
|
||||
import type { ObservableSet } from "mobx";
|
||||
import { action, computed, makeObservable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import ReactSelect, {
|
||||
type ActionMeta,
|
||||
components,
|
||||
type GroupBase,
|
||||
type Props as ReactSelectProps,
|
||||
type StylesConfig,
|
||||
} from "react-select";
|
||||
import ReactSelectCreatable, { type CreatableProps } from "react-select/creatable";
|
||||
import { ThemeStore } from "../../theme.store";
|
||||
import ReactSelect, { components, createFilter } from "react-select";
|
||||
import type { Props as ReactSelectProps, GroupBase, MultiValue, OptionsOrGroups, PropsValue, SingleValue } from "react-select";
|
||||
import type { ThemeStore } from "../../themes/store";
|
||||
import { autoBind, cssNames } from "../../utils";
|
||||
import { merge } from "lodash";
|
||||
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||
import themeStoreInjectable from "../../themes/store.injectable";
|
||||
|
||||
const { Menu } = components;
|
||||
|
||||
export interface GroupSelectOption<T extends SelectOption = SelectOption> {
|
||||
label: React.ReactNode;
|
||||
options: T[];
|
||||
export interface SelectOption<Value> {
|
||||
value: Value;
|
||||
label: string;
|
||||
isDisabled?: boolean;
|
||||
isSelected?: boolean;
|
||||
}
|
||||
|
||||
export interface SelectOption<T = any> {
|
||||
value: T;
|
||||
label?: React.ReactNode;
|
||||
}
|
||||
/**
|
||||
* @deprecated This should not be used anymore, convert the options yourself.
|
||||
*/
|
||||
export type LegacyAutoConvertedOptions = string[];
|
||||
|
||||
export interface SelectProps<T = any> extends ReactSelectProps<T, boolean>, CreatableProps<T, boolean, GroupBase<T>> {
|
||||
export interface SelectProps<
|
||||
Value,
|
||||
/**
|
||||
* This needs to extend `object` because even though `ReactSelectProps` allows for any `T`, the
|
||||
* maintainers of `react-select` says that they don't support it.
|
||||
*
|
||||
* Ref: https://github.com/JedWatson/react-select/issues/5032
|
||||
*
|
||||
* Futhermore, we mandate the option is of this shape because it is easier than requiring
|
||||
* `getOptionValue` and `getOptionLabel` all over the place.
|
||||
*/
|
||||
Option extends SelectOption<Value>,
|
||||
IsMulti extends boolean,
|
||||
Group extends GroupBase<Option> = GroupBase<Option>,
|
||||
> extends Omit<ReactSelectProps<Option, IsMulti, Group>, "value" | "options"> {
|
||||
id?: string; // Optional only because of Extension API. Required to make Select deterministic in unit tests
|
||||
value?: T;
|
||||
themeName?: "dark" | "light" | "outlined" | "lens";
|
||||
menuClass?: string;
|
||||
value?: PropsValue<Value>;
|
||||
options: NonNullable<ReactSelectProps<Option, IsMulti, Group>["options"]> | LegacyAutoConvertedOptions;
|
||||
|
||||
/**
|
||||
* @deprecated This option does nothing
|
||||
*/
|
||||
isCreatable?: boolean;
|
||||
autoConvertOptions?: boolean; // to internal format (i.e. {value: T, label: string}[]), not working with groups
|
||||
onChange?(option: T, meta?: ActionMeta<any>): void;
|
||||
|
||||
/**
|
||||
* @deprecated We will always auto convert options if they are of type `string`
|
||||
*/
|
||||
autoConvertOptions?: boolean;
|
||||
}
|
||||
|
||||
function isGroup<Option, Group extends GroupBase<Option>>(optionOrGroup: Option | Group): optionOrGroup is Group {
|
||||
return Array.isArray((optionOrGroup as Group).options);
|
||||
}
|
||||
|
||||
const defaultFilter = createFilter({
|
||||
stringify(option) {
|
||||
if (typeof option.value === "symbol") {
|
||||
return option.label;
|
||||
}
|
||||
|
||||
return `${option.label} ${option.value}`;
|
||||
},
|
||||
});
|
||||
|
||||
interface Dependencies {
|
||||
themeStore: ThemeStore;
|
||||
}
|
||||
|
||||
export function onMultiSelectFor<Value, Option extends SelectOption<Value>, Group extends GroupBase<Option> = GroupBase<Option>>(collection: Set<Value> | ObservableSet<Value>): SelectProps<Value, Option, true, Group>["onChange"] {
|
||||
return action((newValue, meta) => {
|
||||
switch (meta.action) {
|
||||
case "clear":
|
||||
collection.clear();
|
||||
break;
|
||||
case "deselect-option":
|
||||
case "remove-value":
|
||||
case "pop-value":
|
||||
if (meta.option) {
|
||||
collection.delete(meta.option.value);
|
||||
}
|
||||
break;
|
||||
case "select-option":
|
||||
if (meta.option) {
|
||||
collection.add(meta.option.value);
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@observer
|
||||
export class Select extends React.Component<SelectProps> {
|
||||
static defaultProps: Omit<SelectProps, "id"> = {
|
||||
autoConvertOptions: true,
|
||||
class NonInjectedSelect<
|
||||
Value,
|
||||
Option extends SelectOption<Value>,
|
||||
IsMulti extends boolean = false,
|
||||
Group extends GroupBase<Option> = GroupBase<Option>,
|
||||
> extends React.Component<SelectProps<Value, Option, IsMulti, Group> & Dependencies> {
|
||||
static defaultProps = {
|
||||
menuPortalTarget: document.body,
|
||||
menuPlacement: "auto",
|
||||
menuPlacement: "auto" as const,
|
||||
};
|
||||
|
||||
constructor(props: SelectProps) {
|
||||
constructor(props: SelectProps<Value, Option, IsMulti, Group> & Dependencies) {
|
||||
super(props);
|
||||
makeObservable(this);
|
||||
autoBind(this);
|
||||
}
|
||||
|
||||
@computed get themeClass() {
|
||||
const themeName = this.props.themeName || ThemeStore.getInstance().activeTheme.type;
|
||||
const themeName = this.props.themeName || this.props.themeStore.activeTheme.type;
|
||||
|
||||
return `theme-${themeName}`;
|
||||
}
|
||||
|
||||
@computed get styles(): StylesConfig {
|
||||
const defaultStyles: StylesConfig = {
|
||||
menuPortal: styles => ({
|
||||
...styles,
|
||||
zIndex: "auto",
|
||||
}),
|
||||
};
|
||||
|
||||
return merge(defaultStyles, this.props.styles);
|
||||
}
|
||||
|
||||
protected isValidOption(opt: SelectOption | any) {
|
||||
return typeof opt === "object" && opt.value !== undefined;
|
||||
}
|
||||
|
||||
@computed get selectedOption() {
|
||||
const { value, isMulti } = this.props;
|
||||
|
||||
if (isMulti) {
|
||||
return this.options.filter(opt => {
|
||||
const values = value ? [].concat(value) : [];
|
||||
|
||||
return values.includes(opt) || values.includes(opt.value);
|
||||
});
|
||||
}
|
||||
|
||||
return this.options.find(opt => opt === value || opt.value === value) || null;
|
||||
}
|
||||
|
||||
@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[];
|
||||
}
|
||||
|
||||
onChange(value: SelectOption, meta: ActionMeta<any>) {
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(value, meta);
|
||||
}
|
||||
}
|
||||
|
||||
onKeyDown(evt: React.KeyboardEvent<HTMLDivElement>) {
|
||||
if (this.props.onKeyDown) {
|
||||
this.props.onKeyDown(evt);
|
||||
}
|
||||
const escapeKey = evt.nativeEvent.code === "Escape";
|
||||
this.props.onKeyDown?.(evt);
|
||||
|
||||
if (escapeKey) evt.stopPropagation(); // don't close the <Dialog/>
|
||||
if (evt.nativeEvent.code === "Escape") {
|
||||
evt.stopPropagation(); // don't close the <Dialog/>
|
||||
}
|
||||
}
|
||||
|
||||
private filterSelectedMultiValue(values: MultiValue<Value> | null, options: OptionsOrGroups<Option, Group>): MultiValue<Option> | null {
|
||||
if (!values) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return options
|
||||
.flatMap(option => (
|
||||
isGroup(option)
|
||||
? option.options
|
||||
: option
|
||||
))
|
||||
.filter(option => values.includes(option.value));
|
||||
}
|
||||
|
||||
private findSelectedSingleValue(value: SingleValue<Value>, options: OptionsOrGroups<Option, Group>): SingleValue<Option> {
|
||||
if (value === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
for (const optionOrGroup of options) {
|
||||
if (isGroup(optionOrGroup)) {
|
||||
for (const option of optionOrGroup.options) {
|
||||
if (option.value === value) {
|
||||
return option;
|
||||
}
|
||||
}
|
||||
} else if (optionOrGroup.value === value) {
|
||||
return optionOrGroup;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
private findSelectedPropsValue(value: PropsValue<Value>, options: OptionsOrGroups<Option, Group>, isMulti: IsMulti | undefined): PropsValue<Option> {
|
||||
if (isMulti) {
|
||||
return this.filterSelectedMultiValue(value as MultiValue<Value>, options);
|
||||
}
|
||||
|
||||
return this.findSelectedSingleValue(value as SingleValue<Value>, options);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
className, menuClass, isCreatable, autoConvertOptions,
|
||||
value, options, components = {}, id: inputId, ...props
|
||||
} = this.props;
|
||||
const WrappedMenu = components.Menu ?? Menu;
|
||||
|
||||
const selectProps: Partial<SelectProps> = {
|
||||
...props,
|
||||
...(inputId ? { inputId } : {}),
|
||||
styles: this.styles,
|
||||
value: autoConvertOptions ? this.selectedOption : value,
|
||||
options: autoConvertOptions ? this.options : options,
|
||||
onChange: this.onChange,
|
||||
onKeyDown: this.onKeyDown,
|
||||
className: cssNames("Select", this.themeClass, className),
|
||||
classNamePrefix: "Select",
|
||||
className,
|
||||
menuClass,
|
||||
components: {
|
||||
...components,
|
||||
Menu: props => (
|
||||
<WrappedMenu
|
||||
{...props}
|
||||
className={cssNames(menuClass, this.themeClass, props.className)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
};
|
||||
Menu: WrappedMenu = Menu,
|
||||
...components
|
||||
} = {},
|
||||
styles,
|
||||
value = null,
|
||||
options,
|
||||
isMulti,
|
||||
id: inputId,
|
||||
onChange,
|
||||
...props
|
||||
} = this.props;
|
||||
|
||||
return isCreatable
|
||||
? <ReactSelectCreatable {...selectProps} /> // select list with ability to add new options
|
||||
: <ReactSelect {...selectProps} />;
|
||||
const convertedOptions = options.map(option => (
|
||||
typeof option === "string"
|
||||
? {
|
||||
value: option,
|
||||
label: option,
|
||||
} as unknown as Option
|
||||
: option
|
||||
));
|
||||
|
||||
if (options.length > 0 && !(options?.[0] as { label?: string }).label) {
|
||||
console.warn("[SELECT]: will not display any label in dropdown");
|
||||
}
|
||||
|
||||
return (
|
||||
<ReactSelect
|
||||
{...props}
|
||||
styles={{
|
||||
menuPortal: styles => ({
|
||||
...styles,
|
||||
zIndex: "auto",
|
||||
}),
|
||||
...styles,
|
||||
}}
|
||||
instanceId={inputId}
|
||||
inputId={inputId}
|
||||
filterOption={defaultFilter} // This is done because the default filter crashes on symbols
|
||||
isMulti={isMulti}
|
||||
options={convertedOptions}
|
||||
value={this.findSelectedPropsValue(value, convertedOptions, isMulti)}
|
||||
onKeyDown={this.onKeyDown}
|
||||
className={cssNames("Select", this.themeClass, className)}
|
||||
classNamePrefix="Select"
|
||||
onChange={action(onChange)} // This is done so that all changes are actionable
|
||||
components={{
|
||||
...components,
|
||||
Menu: ({ className, ...props }) => (
|
||||
<WrappedMenu
|
||||
{...props}
|
||||
className={cssNames(menuClass, this.themeClass, className)}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const Select = withInjectables<Dependencies, SelectProps<unknown, SelectOption<unknown>, boolean>>(NonInjectedSelect, {
|
||||
getProps: (di, props) => ({
|
||||
...props,
|
||||
themeStore: di.inject(themeStoreInjectable),
|
||||
}),
|
||||
}) as <
|
||||
Value,
|
||||
Option extends SelectOption<Value>,
|
||||
IsMulti extends boolean = false,
|
||||
Group extends GroupBase<Option> = GroupBase<Option>,
|
||||
>(props: SelectProps<Value, Option, IsMulti, Group>) => React.ReactElement;
|
||||
Reference in new issue
Block a user