chore: Extract ItemStore to own package

open-lens/package.json

@@ -189,6 +189,7 @@
  "@k8slens/ensure-binaries": "^6.5.0",
  "@k8slens/error-boundary": "^1.0.0",
  "@k8slens/event-emitter": "^1.0.0",
+ "@k8slens/item-store": "^1.0.0",
  "@k8slens/feature-core": "^6.5.0",
  "@k8slens/json-api": "^1.0.0-alpha.3",
  "@k8slens/keyboard-shortcuts": "^1.0.0",

packages/core/package.json

@@ -231,6 +231,7 @@
  "@k8slens/prometheus": "^1.0.0",
  "@k8slens/react-application": "^1.0.0-alpha.5",
  "@k8slens/random": "^1.0.0",
+ "@k8slens/item-store": "^1.0.0",
  "@k8slens/resizing-anchor": "^1.0.0-alpha.5",
  "@k8slens/resource-templates": "^1.0.0-alpha.1",
  "@k8slens/routing": "^1.0.0-alpha.5",

packages/core/src/common/k8s-api/kube-object.store.ts

@@ -9,7 +9,7 @@ import { waitUntilDefined, includes, rejectPromiseBy, object } from "@k8slens/ut
 import type { KubeJsonApiDataFor, KubeObject } from "@k8slens/kube-object";
 import { KubeStatus } from "@k8slens/kube-object";
 import type { IKubeWatchEvent, KubeApiQueryParams, KubeApi, KubeApiWatchCallback } from "@k8slens/kube-api";
-import { ItemStore } from "../item.store";
+import { ItemStore } from "@k8slens/item-store";
 import { parseKubeApi } from "@k8slens/kube-api";
 import type { RequestInit } from "@k8slens/node-fetch";
 import type { Patch } from "rfc6902";

packages/core/src/renderer/port-forward/port-forward-store/port-forward-store.ts

@@ -4,7 +4,7 @@
  */
 
 import { action, makeObservable, observable, reaction } from "mobx";
-import { ItemStore } from "../../../common/item.store";
+import { ItemStore } from "@k8slens/item-store";
 import type { StorageLayer } from "../../utils/storage-helper";
 import { disposer } from "@k8slens/utilities";
 import type { ForwardedPort } from "../port-forward-item";
@@ -66,7 +66,7 @@ export class PortForwardStore extends ItemStore<PortForwardItem> {
  }
 
  loadAll() {
- return this.loadItems(() => {
+ return this.rawLoadItems(async () => {
  const portForwards = this.getPortForwards();
 
  this.dependencies.storage.set(portForwards);

packages/utility-features/item-store/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+ extends: "@k8slens/eslint-config/eslint",
+ parserOptions: {
+ project: "./tsconfig.json",
+ },
+};

packages/utility-features/item-store/.prettierrc

@@ -0,0 +1 @@
+"@k8slens/eslint-config/prettier"

packages/utility-features/item-store/.swcrc

@@ -0,0 +1,18 @@
+{
+ "module": {
+ "type": "commonjs"
+ },
+ "jsc": {
+ "parser": {
+ "syntax": "typescript",
+ "tsx": true,
+ "decorators": true,
+ "dynamicImport": false
+ },
+ "transform": {
+ "legacyDecorator": true,
+ "decoratorMetadata": true
+ },
+ "target": "es2019"
+ }
+}

packages/utility-features/item-store/index.ts

@@ -0,0 +1 @@
+export * from "./src/item.store";

packages/utility-features/item-store/jest.config.js

@@ -0,0 +1 @@
+module.exports = require("@k8slens/jest").monorepoPackageConfig(__dirname).configForNode;

packages/utility-features/item-store/package.json

@@ -0,0 +1,44 @@
+{
+ "name": "@k8slens/item-store",
+ "private": false,
+ "version": "1.0.0",
+ "description": "Item Store",
+ "type": "commonjs",
+ "publishConfig": {
+ "access": "public",
+ "registry": "https://registry.npmjs.org/"
+ },
+ "files": [
+ "dist"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/lensapp/lens.git"
+ },
+ "main": "dist/index.js",
+ "types": "dist/index.d.ts",
+ "author": {
+ "name": "OpenLens Authors",
+ "email": "[email protected]"
+ },
+ "license": "MIT",
+ "homepage": "https://github.com/lensapp/lens",
+ "scripts": {
+ "build": "lens-webpack-build",
+ "clean": "rimraf dist/",
+ "dev": "webpack --mode=development --watch",
+ "test": "jest --coverage --runInBand",
+ "lint": "lens-lint",
+ "lint:fix": "lens-lint --fix"
+ },
+ "devDependencies": {
+ "@k8slens/eslint-config": "^6.5.0-alpha.2",
+ "@k8slens/jest": "^6.5.0-alpha.4",
+ "@k8slens/typescript": "^6.5.0-alpha.2"
+ },
+ "peerDependencies": {
+ "auto-bind": "^4.0.0",
+ "lodash": "^4.17.21",
+ "mobx": "^6.9.0"
+ }
+}

packages/core/src/common/item.store.ts → packages/utility-features/item-store/src/item.store.ts

@@ -3,19 +3,26 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import type { ItemObject } from "@k8slens/list-layout";
 import autoBind from "auto-bind";
 import orderBy from "lodash/orderBy";
 import { action, computed, observable, when, makeObservable } from "mobx";
 
+export interface ItemObject {
+ getId: () => string;
+ getName: () => string;
+}
 
 export abstract class ItemStore<Item extends ItemObject> {
  protected defaultSorting = (item: Item) => item.getName();
 
  @observable failedLoading = false;
+
  @observable isLoading = false;
+
  @observable isLoaded = false;
+
  @observable items = observable.array<Item>([], { deep: false });
+
  @observable selectedItemsIds = observable.set<string>();
 
  constructor() {
@@ -28,7 +35,7 @@ export abstract class ItemStore<Item extends ItemObject> {
  }
 
  public pickOnlySelected(items: Item[]): Item[] {
- return items.filter(item => this.selectedItemsIds.has(item.getId()));
+ return items.filter((item) => this.selectedItemsIds.has(item.getId()));
  }
 
  public getItems(): Item[] {
@@ -40,11 +47,11 @@ export abstract class ItemStore<Item extends ItemObject> {
  }
 
  getByName(name: string): Item | undefined {
- return this.items.find(item => item.getName() === name);
+ return this.items.find((item) => item.getName() === name);
  }
 
  getIndexById(id: string): number {
- return this.items.findIndex(item => item.getId() === id);
+ return this.items.findIndex((item) => item.getId() === id);
  }
 
  /**
@@ -57,28 +64,14 @@ export abstract class ItemStore<Item extends ItemObject> {
  * @param order whether to sort from least to greatest (`"asc"` (default)) or vice-versa (`"desc"`)
  */
  @action
- protected sortItems(items: Item[] = this.items, sorting: ((item: Item) => any)[] = [this.defaultSorting], order?: "asc" | "desc"): Item[] {
+ protected sortItems(
+ items: Item[] = this.items,
+ sorting: ((item: Item) => any)[] = [this.defaultSorting],
+ order?: "asc" | "desc",
+ ): Item[] {
  return orderBy(items, sorting, order);
  }
 
- protected async createItem(...args: any[]): Promise<any>;
- @action
- protected async createItem(request: () => Promise<Item>) {
- const newItem = await request();
- const item = this.items.find(item => item.getId() === newItem.getId());
-
- if (item) {
- return item;
- } else {
- const items = this.sortItems([...this.items, newItem]);
-
- this.items.replace(items);
-
- return newItem;
- }
- }
-
- protected async loadItems(...args: any[]): Promise<any>;
  /**
  * Load items to this.items
  * @param request Function to return the items to be loaded.
@@ -87,7 +80,7 @@ export abstract class ItemStore<Item extends ItemObject> {
  * @returns
  */
  @action
- protected async loadItems(request: () => Promise<Item[] | any>, sortItems = true, concurrency = false) {
+ protected async rawLoadItems(request: () => Promise<Item[]>, sortItems = true, concurrency = false) {
  if (this.isLoading) {
  await when(() => !this.isLoading);
 
@@ -101,7 +94,9 @@ export abstract class ItemStore<Item extends ItemObject> {
  try {
  let items = await request();
 
- if (sortItems) items = this.sortItems(items);
+ if (sortItems) {
+ items = this.sortItems(items);
+ }
  this.items.replace(items);
  this.isLoaded = true;
  } finally {
@@ -114,16 +109,18 @@ export abstract class ItemStore<Item extends ItemObject> {
  const item = await Promise.resolve(request()).catch(() => null);
 
  if (item) {
- const existingItem = this.items.find(el => el.getId() === item.getId());
+ const existingItem = this.items.find((el) => el.getId() === item.getId());
 
  if (existingItem) {
- const index = this.items.findIndex(item => item === existingItem);
+ const index = this.items.findIndex((item) => item === existingItem);
 
  this.items.splice(index, 1, item);
  } else {
  let items = [...this.items, item];
 
- if (sortItems) items = this.sortItems(items);
+ if (sortItems) {
+ items = this.sortItems(items);
+ }
  this.items.replace(items);
  }
  }
@@ -134,7 +131,7 @@ export abstract class ItemStore<Item extends ItemObject> {
  @action
  protected async updateItem(item: Item, request: () => Promise<Item>) {
  const updatedItem = await request();
- const index = this.items.findIndex(i => i.getId() === item.getId());
+ const index = this.items.findIndex((i) => i.getId() === item.getId());
 
  this.items.splice(index, 1, updatedItem);
 
@@ -183,7 +180,9 @@ export abstract class ItemStore<Item extends ItemObject> {
  }
 
  isSelectedAll(visibleItems: Item[] = this.items) {
- if (!visibleItems.length) return false;
+ if (!visibleItems.length) {
+ return false;
+ }
 
  return visibleItems.every(this.isSelected);
  }
@@ -206,7 +205,7 @@ export abstract class ItemStore<Item extends ItemObject> {
 
  async removeItems?(items: Item[]): Promise<void>;
 
- * [Symbol.iterator]() {
+ *[Symbol.iterator]() {
  yield* this.items;
  }
 }

packages/utility-features/item-store/tsconfig.json

@@ -0,0 +1,7 @@
+{
+ "extends": "@k8slens/typescript/config/base.json",
+ "include": ["**/*.ts", "../kube-api-specifics/src/token.ts"],
+ "compilerOptions": {
+ "moduleResolution": "node"
+ }
+}

packages/utility-features/item-store/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require("@k8slens/webpack").configForReact;