chore: Extract ItemStore to own package

Signed-off-by: Sebastian Malton <sebastian@malton.name>

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": "info@k8slens.dev"
+  },
+  "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/utility-features/item-store/src/item.store.ts

@@ -0,0 +1,211 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+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() {
+    makeObservable(this);
+    autoBind(this);
+  }
+
+  @computed get selectedItems(): Item[] {
+    return this.pickOnlySelected(this.items);
+  }
+
+  public pickOnlySelected(items: Item[]): Item[] {
+    return items.filter((item) => this.selectedItemsIds.has(item.getId()));
+  }
+
+  public getItems(): Item[] {
+    return Array.from(this.items);
+  }
+
+  public getTotalCount(): number {
+    return this.items.length;
+  }
+
+  getByName(name: string): Item | undefined {
+    return this.items.find((item) => item.getName() === name);
+  }
+
+  getIndexById(id: string): number {
+    return this.items.findIndex((item) => item.getId() === id);
+  }
+
+  /**
+   * Return `items` sorted by the given ordering functions. If two elements of
+   * `items` are sorted to the same "index" then the next sorting function is used
+   * to determine where to place them relative to each other. Once the `sorting`
+   * functions have been all exhausted then the order is unchanged (ie a stable sort).
+   * @param items the items to be sorted (default: the current items in this store)
+   * @param sorting list of functions to determine sort order (default: sorting by name)
+   * @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[] {
+    return orderBy(items, sorting, order);
+  }
+
+  /**
+   * Load items to this.items
+   * @param request Function to return the items to be loaded.
+   * @param sortItems If true, items will be sorted.
+   * @param concurrency If true, concurrent loadItems() calls will all be executed. If false, only the first.
+   * @returns
+   */
+  @action
+  protected async rawLoadItems(request: () => Promise<Item[]>, sortItems = true, concurrency = false) {
+    if (this.isLoading) {
+      await when(() => !this.isLoading);
+
+      // If concurrency for loading is disabled, return instead of loading
+      if (!concurrency) {
+        return;
+      }
+    }
+    this.isLoading = true;
+
+    try {
+      let items = await request();
+
+      if (sortItems) {
+        items = this.sortItems(items);
+      }
+      this.items.replace(items);
+      this.isLoaded = true;
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  @action
+  protected async loadItem(request: () => Promise<Item>, sortItems = true) {
+    const item = await Promise.resolve(request()).catch(() => null);
+
+    if (item) {
+      const existingItem = this.items.find((el) => el.getId() === item.getId());
+
+      if (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);
+        }
+        this.items.replace(items);
+      }
+    }
+
+    return item;
+  }
+
+  @action
+  protected async updateItem(item: Item, request: () => Promise<Item>) {
+    const updatedItem = await request();
+    const index = this.items.findIndex((i) => i.getId() === item.getId());
+
+    this.items.splice(index, 1, updatedItem);
+
+    return updatedItem;
+  }
+
+  @action
+  protected async removeItem(item: Item, request: () => Promise<any>) {
+    await request();
+    this.items.remove(item);
+    this.selectedItemsIds.delete(item.getId());
+  }
+
+  isSelected(item: Item) {
+    return this.selectedItemsIds.has(item.getId());
+  }
+
+  @action
+  select(item: Item) {
+    this.selectedItemsIds.add(item.getId());
+  }
+
+  @action
+  unselect(item: Item) {
+    this.selectedItemsIds.delete(item.getId());
+  }
+
+  @action
+  toggleSelection(item: Item) {
+    if (this.isSelected(item)) {
+      this.unselect(item);
+    } else {
+      this.select(item);
+    }
+  }
+
+  @action
+  toggleSelectionAll(visibleItems: Item[] = this.items) {
+    const allSelected = visibleItems.every(this.isSelected);
+
+    if (allSelected) {
+      visibleItems.forEach(this.unselect);
+    } else {
+      visibleItems.forEach(this.select);
+    }
+  }
+
+  isSelectedAll(visibleItems: Item[] = this.items) {
+    if (!visibleItems.length) {
+      return false;
+    }
+
+    return visibleItems.every(this.isSelected);
+  }
+
+  @action
+  resetSelection() {
+    this.selectedItemsIds.clear();
+  }
+
+  @action
+  reset() {
+    this.resetSelection();
+    this.items.clear();
+    this.selectedItemsIds.clear();
+    this.isLoaded = false;
+    this.isLoading = false;
+  }
+
+  async removeSelectedItems?(): Promise<any>;
+
+  async removeItems?(items: Item[]): Promise<void>;
+
+  *[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;