From 8e9dd50828e636de9f3a72c082037bac26fa8373 Mon Sep 17 00:00:00 2001 From: Panu Horsmalahti Date: Mon, 13 Sep 2021 18:33:11 +0300 Subject: [PATCH] Add catalogAddMenu filter to CatalogCategory (#3722) --- package.json | 2 + .../__tests__/kubernetes-cluster.test.ts | 62 ++++++++++++ src/common/catalog/catalog-entity.ts | 37 ++++++++ .../__tests__/catalog-add-button.test.tsx | 94 +++++++++++++++++++ .../+catalog/catalog-add-button.tsx | 6 +- yarn.lock | 54 +++++++++++ 6 files changed, 253 insertions(+), 2 deletions(-) create mode 100644 src/common/catalog-entities/__tests__/kubernetes-cluster.test.ts create mode 100644 src/renderer/components/+catalog/__tests__/catalog-add-button.test.tsx diff --git a/package.json b/package.json index 262db118b3..ef59d10728 100644 --- a/package.json +++ b/package.json @@ -260,8 +260,10 @@ "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3", "@sentry/react": "^6.8.0", "@sentry/types": "^6.8.0", + "@testing-library/dom": "^8.2.0", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.2.6", + "@testing-library/user-event": "^13.2.1", "@types/byline": "^4.2.32", "@types/chart.js": "^2.9.34", "@types/color": "^3.0.2", diff --git a/src/common/catalog-entities/__tests__/kubernetes-cluster.test.ts b/src/common/catalog-entities/__tests__/kubernetes-cluster.test.ts new file mode 100644 index 0000000000..d14a093ee5 --- /dev/null +++ b/src/common/catalog-entities/__tests__/kubernetes-cluster.test.ts @@ -0,0 +1,62 @@ +/** + * Copyright (c) 2021 OpenLens Authors + * + * Permission is hereby granted, free of charge, to any person obtaining a copy of + * this software and associated documentation files (the "Software"), to deal in + * the Software without restriction, including without limitation the rights to + * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of + * the Software, and to permit persons to whom the Software is furnished to do so, + * subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS + * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR + * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER + * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ +import { kubernetesClusterCategory } from "../kubernetes-cluster"; + +describe("kubernetesClusterCategory", () => { + describe("filteredItems", () => { + const item1 = { + icon: "Icon", + title: "Title", + // eslint-disable-next-line @typescript-eslint/no-empty-function + onClick: () => {} + }; + const item2 = { + icon: "Icon 2", + title: "Title 2", + // eslint-disable-next-line @typescript-eslint/no-empty-function + onClick: () => {} + }; + + it("returns all items if no filter set", () => { + expect(kubernetesClusterCategory.filteredItems([item1, item2])).toEqual([item1, item2]); + }); + + it("returns filtered items", () => { + expect(kubernetesClusterCategory.filteredItems([item1, item2])).toEqual([item1, item2]); + + const disposer1 = kubernetesClusterCategory.addMenuFilter(item => item.icon === "Icon"); + + expect(kubernetesClusterCategory.filteredItems([item1, item2])).toEqual([item1]); + + const disposer2 = kubernetesClusterCategory.addMenuFilter(item => item.title === "Title 2"); + + expect(kubernetesClusterCategory.filteredItems([item1, item2])).toEqual([]); + + disposer1(); + + expect(kubernetesClusterCategory.filteredItems([item1, item2])).toEqual([item2]); + + disposer2(); + + expect(kubernetesClusterCategory.filteredItems([item1, item2])).toEqual([item1, item2]); + }); + }); +}); diff --git a/src/common/catalog/catalog-entity.ts b/src/common/catalog/catalog-entity.ts index 7b9db2f0ff..d59a21686c 100644 --- a/src/common/catalog/catalog-entity.ts +++ b/src/common/catalog/catalog-entity.ts @@ -22,6 +22,8 @@ import EventEmitter from "events"; import type TypedEmitter from "typed-emitter"; import { observable, makeObservable } from "mobx"; +import { once } from "lodash"; +import { iter, Disposer } from "../utils"; type ExtractEntityMetadataType = Entity extends CatalogEntity ? Metadata : never; type ExtractEntityStatusType = Entity extends CatalogEntity ? Status : never; @@ -48,6 +50,11 @@ export interface CatalogCategorySpec { }; } +/** + * If the filter returns true, the menu item is displayed + */ +export type AddMenuFilter = (menu: CatalogEntityAddMenu) => any; + export interface CatalogCategoryEvents { load: () => void; catalogAddMenu: (context: CatalogEntityAddMenuContext) => void; @@ -63,6 +70,10 @@ export abstract class CatalogCategory extends (EventEmitter as new () => TypedEm }; abstract spec: CatalogCategorySpec; + protected filters = observable.set([], { + deep: false, + }); + static parseId(id = ""): { group?: string, kind?: string } { const [group, kind] = id.split("/") ?? []; @@ -72,6 +83,32 @@ export abstract class CatalogCategory extends (EventEmitter as new () => TypedEm public getId(): string { return `${this.spec.group}/${this.spec.names.kind}`; } + + /** + * Add a filter for menu items of catalogAddMenu + * @param fn The function that should return a truthy value if that menu item should be displayed + * @returns A function to remove that filter + */ + public addMenuFilter(fn: AddMenuFilter): Disposer { + this.filters.add(fn); + + return once(() => void this.filters.delete(fn)); + } + + /** + * Filter menuItems according to the Category's set filters + * @param menuItems menu items to filter + * @returns filtered menu items + */ + public filteredItems(menuItems: CatalogEntityAddMenu[]) { + return Array.from( + iter.reduce( + this.filters, + iter.filter, + menuItems, + ) + ); + } } export interface CatalogEntityMetadata { diff --git a/src/renderer/components/+catalog/__tests__/catalog-add-button.test.tsx b/src/renderer/components/+catalog/__tests__/catalog-add-button.test.tsx new file mode 100644 index 0000000000..c8dc5ced76 --- /dev/null +++ b/src/renderer/components/+catalog/__tests__/catalog-add-button.test.tsx @@ -0,0 +1,94 @@ +/** + * Copyright (c) 2021 OpenLens Authors + * + * Permission is hereby granted, free of charge, to any person obtaining a copy of + * this software and associated documentation files (the "Software"), to deal in + * the Software without restriction, including without limitation the rights to + * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of + * the Software, and to permit persons to whom the Software is furnished to do so, + * subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS + * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR + * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER + * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ +import React from "react"; +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { CatalogCategory, CatalogCategorySpec } from "../../../../common/catalog"; +import { CatalogAddButton } from "../catalog-add-button"; + +class TestCatalogCategory extends CatalogCategory { + public readonly apiVersion = "catalog.k8slens.dev/v1alpha1"; + public readonly kind = "CatalogCategory"; + public metadata = { + name: "Test Category", + icon: "", + }; + public spec: CatalogCategorySpec = { + group: "entity.k8slens.dev", + versions: [], + names: { + kind: "Test" + } + }; +} + +describe("CatalogAddButton", () => { + it("opens Add menu", async () => { + const category = new TestCatalogCategory(); + + category.on("catalogAddMenu", ctx => { + ctx.menuItems.push( + { + icon: "text_snippet", + title: "Add from kubeconfig", + onClick: () => {} + } + ); + }); + + render(); + + userEvent.hover(screen.getByLabelText("SpeedDial CatalogAddButton")); + await screen.findByTitle("Add from kubeconfig"); + }); + + it("filters menu items", async () => { + const category = new TestCatalogCategory(); + + category.on("catalogAddMenu", ctx => { + ctx.menuItems.push( + { + icon: "text_snippet", + title: "foobar", + onClick: () => {} + } + ); + ctx.menuItems.push( + { + icon: "text_snippet", + title: "Add from kubeconfig", + onClick: () => {} + } + ); + }); + + category.addMenuFilter(item => item.title === "foobar"); + + render(); + + userEvent.hover(screen.getByLabelText("SpeedDial CatalogAddButton")); + + await expect(screen.findByTitle("Add from kubeconfig")) + .rejects + .toThrow(); + await screen.findByTitle("foobar"); + }); +}); diff --git a/src/renderer/components/+catalog/catalog-add-button.tsx b/src/renderer/components/+catalog/catalog-add-button.tsx index 8f3cc20412..558cdca3db 100644 --- a/src/renderer/components/+catalog/catalog-add-button.tsx +++ b/src/renderer/components/+catalog/catalog-add-button.tsx @@ -80,7 +80,9 @@ export class CatalogAddButton extends React.Component { } render() { - if (this.menuItems.length === 0) { + const filteredItems = this.props.category ? this.props.category.filteredItems(this.menuItems) : []; + + if (filteredItems.length === 0) { return null; } @@ -95,7 +97,7 @@ export class CatalogAddButton extends React.Component { direction="up" onClick={this.onButtonClick} > - { this.menuItems.map((menuItem, index) => { + {filteredItems.map((menuItem, index) => { return } diff --git a/yarn.lock b/yarn.lock index b6667a6d55..3f24e65868 100644 --- a/yarn.lock +++ b/yarn.lock @@ -802,6 +802,17 @@ "@types/yargs" "^15.0.0" chalk "^4.0.0" +"@jest/types@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.1.0.tgz#674a40325eab23c857ebc0689e7e191a3c5b10cc" + integrity sha512-pRP5cLIzN7I7Vp6mHKRSaZD7YpBTK7hawx5si8trMKqk4+WOdK8NEKOTO2G8PKWD1HbKMVckVB6/XHh/olhf2g== + dependencies: + "@types/istanbul-lib-coverage" "^2.0.0" + "@types/istanbul-reports" "^3.0.0" + "@types/node" "*" + "@types/yargs" "^16.0.0" + chalk "^4.0.0" + "@kubernetes/client-node@^0.15.1": version "0.15.1" resolved "https://registry.yarnpkg.com/@kubernetes/client-node/-/client-node-0.15.1.tgz#617357873d20de348a99227f3b699c2adb765152" @@ -1214,6 +1225,20 @@ lz-string "^1.4.4" pretty-format "^26.6.2" +"@testing-library/dom@^8.2.0": + version "8.2.0" + resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.2.0.tgz#ac46a1b9d7c81f0d341ae38fb5424b64c27d151e" + integrity sha512-U8cTWENQPHO3QHvxBdfltJ+wC78ytMdg69ASvIdkGdQ/XRg4M9H2vvM3mHddxl+w/fM6NNqzGMwpQoh82v9VIA== + dependencies: + "@babel/code-frame" "^7.10.4" + "@babel/runtime" "^7.12.5" + "@types/aria-query" "^4.2.0" + aria-query "^4.2.2" + chalk "^4.1.0" + dom-accessibility-api "^0.5.6" + lz-string "^1.4.4" + pretty-format "^27.0.2" + "@testing-library/jest-dom@^5.14.1": version "5.14.1" resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz#8501e16f1e55a55d675fe73eecee32cdaddb9766" @@ -1237,6 +1262,13 @@ "@babel/runtime" "^7.12.5" "@testing-library/dom" "^7.28.1" +"@testing-library/user-event@^13.2.1": + version "13.2.1" + resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.2.1.tgz#7a71a39e50b4a733afbe2916fa2b99966e941f98" + integrity sha512-cczlgVl+krjOb3j1625usarNEibI0IFRJrSWX9UsJ1HKYFgCQv9Nb7QAipUDXl3Xdz8NDTsiS78eAkPSxlzTlw== + dependencies: + "@babel/runtime" "^7.12.5" + "@tootallnate/once@1": version "1.1.2" resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82" @@ -2171,6 +2203,13 @@ dependencies: "@types/yargs-parser" "*" +"@types/yargs@^16.0.0": + version "16.0.4" + resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-16.0.4.tgz#26aad98dd2c2a38e421086ea9ad42b9e51642977" + integrity sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw== + dependencies: + "@types/yargs-parser" "*" + "@types/yargs@^17.0.1": version "17.0.2" resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.2.tgz#8fb2e0f4cdc7ab2a1a570106e56533f31225b584" @@ -2653,6 +2692,11 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0: "@types/color-name" "^1.1.1" color-convert "^2.0.1" +ansi-styles@^5.0.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b" + integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA== + ansi_up@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/ansi_up/-/ansi_up-5.0.1.tgz#b66839dba408d3d2f8548904f1ae6fc62d6917ef" @@ -11297,6 +11341,16 @@ pretty-format@^26.6.2: ansi-styles "^4.0.0" react-is "^17.0.1" +pretty-format@^27.0.2: + version "27.1.0" + resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.1.0.tgz#022f3fdb19121e0a2612f3cff8d724431461b9ca" + integrity sha512-4aGaud3w3rxAO6OXmK3fwBFQ0bctIOG3/if+jYEFGNGIs0EvuidQm3bZ9mlP2/t9epLNC/12czabfy7TZNSwVA== + dependencies: + "@jest/types" "^27.1.0" + ansi-regex "^5.0.0" + ansi-styles "^5.0.0" + react-is "^17.0.1" + pretty-hrtime@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"