Remove isClusterScoped from ItemListLayout (#2743)

* remove isClusterScoped from ItemListLayout

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

* Move <NamespaceSelectFilter> to KubeObjectListLayout

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

* revert to simpler NamespaceSelectFilter fix

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

src/renderer/components/+apps-helm-charts/helm-charts.tsx

@@ -81,7 +81,6 @@ export class HelmCharts extends Component<Props> {
           tableId="helm_charts"
           className="HelmCharts"
           store={helmChartStore}
-          isClusterScoped={true}
           isSelectable={false}
           sortingCallbacks={{
             [columnId.name]: (chart: HelmChart) => chart.getName(),

src/renderer/components/+custom-resources/crd-details.tsx

@@ -145,7 +145,7 @@ export class CRDDetails extends React.Component<Props> {
         <>
           <DrawerTitle title="Validation"/>
           <AceEditor
-            mode="json"
+            mode="yaml"
             className="validation"
             value={validation}
             readOnly

src/renderer/components/+custom-resources/crd-list.tsx

@@ -90,7 +90,6 @@ export class CrdList extends React.Component {
         isConfigurable
         tableId="crd"
         className="CrdList"
-        isClusterScoped={true}
         store={crdStore}
         items={items}
         sortingCallbacks={sortingCallbacks}

src/renderer/components/+custom-resources/crd-resources.tsx

@@ -95,7 +95,6 @@ export class CrdResources extends React.Component<Props> {
         isConfigurable
         tableId="crd_resources"
         className="CrdResources"
-        isClusterScoped={!isNamespaced}
         store={store}
         sortingCallbacks={sortingCallbacks}
         searchFilters={[

src/renderer/components/+namespaces/namespaces.tsx

@@ -47,7 +47,6 @@ export class Namespaces extends React.Component<Props> {
     return (
       <TabLayout>
         <KubeObjectListLayout
-          isClusterScoped
           isConfigurable
           tableId="namespaces"
           className="Namespaces" store={namespaceStore}

src/renderer/components/+nodes/nodes.tsx

@@ -166,7 +166,7 @@ export class Nodes extends React.Component<Props> {
           isConfigurable
           tableId="nodes"
           className="Nodes"
-          store={nodesStore} isClusterScoped
+          store={nodesStore}
           isReady={nodesStore.isLoaded}
           dependentStores={[podsStore]}
           isSelectable={false}

src/renderer/components/+pod-security-policies/pod-security-policies.tsx

@@ -43,7 +43,6 @@ export class PodSecurityPolicies extends React.Component {
         isConfigurable
         tableId="access_pod_security_policies"
         className="PodSecurityPolicies"
-        isClusterScoped={true}
         store={podSecurityPoliciesStore}
         sortingCallbacks={{
           [columnId.name]: (item: PodSecurityPolicy) => item.getName(),

src/renderer/components/+storage-classes/storage-classes.tsx

@@ -49,7 +49,7 @@ export class StorageClasses extends React.Component<Props> {
         isConfigurable
         tableId="storage_classes"
         className="StorageClasses"
-        store={storageClassStore} isClusterScoped
+        store={storageClassStore}
         sortingCallbacks={{
           [columnId.name]: (item: StorageClass) => item.getName(),
           [columnId.age]: (item: StorageClass) => item.getTimeDiffFromNow(),

src/renderer/components/+storage-volumes/volumes.tsx

@@ -52,7 +52,7 @@ export class PersistentVolumes extends React.Component<Props> {
         isConfigurable
         tableId="storage_volumes"
         className="PersistentVolumes"
-        store={volumesStore} isClusterScoped
+        store={volumesStore}
         sortingCallbacks={{
           [columnId.name]: (item: PersistentVolume) => item.getName(),
           [columnId.storageClass]: (item: PersistentVolume) => item.getStorageClass(),

src/renderer/components/item-object-list/item-list-layout.tsx

@@ -24,7 +24,7 @@ import groupBy from "lodash/groupBy";
 
 import React, { ReactNode } from "react";
 import { computed, makeObservable } from "mobx";
-import { disposeOnUnmount, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog";
 import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallback } from "../table";
 import { boundMethod, createStorage, cssNames, IClassName, isReactNode, noop, ObservableToggleSet, prevDefault, stopPropagation } from "../../utils";
@@ -36,13 +36,14 @@ import { SearchInputUrl } from "../input";
 import { Filter, FilterType, pageFilters } from "./page-filters.store";
 import { PageFiltersList } from "./page-filters-list";
 import { PageFiltersSelect } from "./page-filters-select";
-import { NamespaceSelectFilter } from "../+namespaces/namespace-select-filter";
 import { ThemeStore } from "../../theme.store";
 import { MenuActions } from "../menu/menu-actions";
 import { MenuItem } from "../menu";
 import { Checkbox } from "../checkbox";
 import { UserStore } from "../../../common/user-store";
 import { namespaceStore } from "../+namespaces/namespace.store";
+import { KubeObjectStore } from "../../kube-object.store";
+import { NamespaceSelectFilter } from "../+namespaces/namespace-select-filter";
 
 // todo: refactor, split to small re-usable components
 
@@ -63,7 +64,6 @@ export interface ItemListLayoutProps<T extends ItemObject = ItemObject> {
   store: ItemStore<T>;
   dependentStores?: ItemStore[];
   preloadStores?: boolean;
-  isClusterScoped?: boolean;
   hideFilters?: boolean;
   searchFilters?: SearchFilter<T>[];
   /** @deprecated */
@@ -137,7 +137,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
   }
 
   async componentDidMount() {
-    const { isClusterScoped, isConfigurable, tableId, preloadStores } = this.props;
+    const { isConfigurable, tableId, preloadStores } = this.props;
 
     if (isConfigurable && !tableId) {
       throw new Error("[ItemListLayout]: configurable list require props.tableId to be specified");
@@ -149,12 +149,6 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
 
     if (preloadStores) {
       this.loadStores();
-
-      if (!isClusterScoped) {
-        disposeOnUnmount(this, [
-          namespaceStore.onContextChange(() => this.loadStores())
-        ]);
-      }
     }
   }
 
@@ -162,7 +156,6 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
     const { store, dependentStores } = this.props;
     const stores = Array.from(new Set([store, ...dependentStores]));
 
-    // load context namespaces by default (see also: `<NamespaceSelectFilter/>`)
     stores.forEach(store => store.loadAll(namespaceStore.contextNamespaces));
   }
 
@@ -224,7 +217,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
   }
 
   @computed get items() {
-    const {filters, filterCallbacks } = this;
+    const { filters, filterCallbacks } = this;
     const filterGroups = groupBy<Filter>(filters, ({ type }) => type);
 
     const filterItems: ItemsFilter[] = [];
@@ -330,7 +323,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
       return null;
     }
 
-    return <PageFiltersList filters={filters}/>;
+    return <PageFiltersList filters={filters} />;
   }
 
   renderNoItems() {
@@ -355,7 +348,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
       );
     }
 
-    return <NoItems/>;
+    return <NoItems />;
   }
 
   renderItems() {
@@ -397,20 +390,26 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
   }
 
   renderHeader() {
-    const { showHeader, customizeHeader, renderHeaderTitle, headerClassName, isClusterScoped } = this.props;
+    const { showHeader, customizeHeader, renderHeaderTitle, headerClassName } = this.props;
 
-    if (!showHeader) return null;
+    if (!showHeader) {
+      return null;
+    }
+
+    const showNamespaceSelectFilter = this.props.store instanceof KubeObjectStore && this.props.store.api.isNamespaced;
     const title = typeof renderHeaderTitle === "function" ? renderHeaderTitle(this) : renderHeaderTitle;
     const placeholders: IHeaderPlaceholders = {
       title: <h5 className="title">{title}</h5>,
       info: this.renderInfo(),
-      filters: <>
+      filters: (
-        {!isClusterScoped && <NamespaceSelectFilter/>}
+        <>
-        <PageFiltersSelect allowEmpty disableFilters={{
+          {showNamespaceSelectFilter && <NamespaceSelectFilter />}
-          [FilterType.NAMESPACE]: true, // namespace-select used instead
+          <PageFiltersSelect allowEmpty disableFilters={{
-        }}/>
+            [FilterType.NAMESPACE]: true, // namespace-select used instead
-      </>,
+          }} />
-      search: <SearchInputUrl/>,
+        </>
+      ),
+      search: <SearchInputUrl />,
     };
     let header = this.renderHeaderContent(placeholders);
 

src/renderer/components/layout/__test__/main-layout-header.test.tsx

@@ -29,6 +29,19 @@ import { MainLayoutHeader } from "../main-layout-header";
 import { Cluster } from "../../../../main/cluster";
 import { ClusterStore } from "../../../../common/cluster-store";
 import mockFs from "mock-fs";
+import { ThemeStore } from "../../../theme.store";
+import { UserStore } from "../../../../common/user-store";
+
+jest.mock("electron", () => {
+  return {
+    app: {
+      getVersion: () => "99.99.99",
+      getPath: () => "tmp",
+      getLocale: () => "en",
+      setLoginItemSettings: jest.fn(),
+    },
+  };
+});
 
 describe("<MainLayoutHeader />", () => {
   let cluster: Cluster;
@@ -60,6 +73,8 @@ describe("<MainLayoutHeader />", () => {
 
     mockFs(mockOpts);
 
+    UserStore.createInstance();
+    ThemeStore.createInstance();
     ClusterStore.createInstance();
 
     cluster = new Cluster({
@@ -71,6 +86,8 @@ describe("<MainLayoutHeader />", () => {
 
   afterEach(() => {
     ClusterStore.resetInstance();
+    ThemeStore.resetInstance();
+    UserStore.resetInstance();
     mockFs.restore();
   });