crd listing fixes

Signed-off-by: Roman <ixrock@gmail.com>

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

@@ -29,23 +29,31 @@ enum columnId {
 
 @observer
 export class CrdList extends React.Component {
-  @computed get groups(): string[] {
+  get selectedGroups(): string[] {
     return crdGroupsUrlParam.get();
   }
 
-  onSelectGroup(group: string) {
-    const groups = new Set(this.groups);
+  @computed get items() {
+    if (this.selectedGroups.length) {
+      return crdStore.items.filter(item => this.selectedGroups.includes(item.getGroup()));
+    }
+
+    return crdStore.items; // show all by default
+  }
+
+  toggleSelection(group: string) {
+    const groups = new Set(crdGroupsUrlParam.get());
 
     if (groups.has(group)) {
-      groups.delete(group); // toggle selection
+      groups.delete(group);
     } else {
       groups.add(group);
     }
-    crdGroupsUrlParam.set(Array.from(groups));
+    crdGroupsUrlParam.set([...groups]);
   }
 
   render() {
-    const selectedGroups = this.groups;
+    const { items, selectedGroups } = this;
     const sortingCallbacks = {
       [columnId.kind]: (crd: CustomResourceDefinition) => crd.getResourceKind(),
       [columnId.group]: (crd: CustomResourceDefinition) => crd.getGroup(),
@@ -60,13 +68,9 @@ export class CrdList extends React.Component {
         className="CrdList"
         isClusterScoped={true}
         store={crdStore}
+        items={items}
         sortingCallbacks={sortingCallbacks}
         searchFilters={Object.values(sortingCallbacks)}
-        filterItems={[
-          (items: CustomResourceDefinition[]) => {
-            return selectedGroups.length ? items.filter(item => selectedGroups.includes(item.getGroup())) : items;
-          }
-        ]}
         renderHeaderTitle="Custom Resources"
         customizeHeader={() => {
           let placeholder = <>All groups</>;
@@ -81,7 +85,8 @@ export class CrdList extends React.Component {
                 className="group-select"
                 placeholder={placeholder}
                 options={Object.keys(crdStore.groups)}
-                onChange={({ value: group }: SelectOption) => this.onSelectGroup(group)}
+                onChange={({ value: group }: SelectOption) => this.toggleSelection(group)}
+                closeMenuOnSelect={false}
                 controlShouldRenderValue={false}
                 formatOptionLabel={({ value: group }: SelectOption) => {
                   const isSelected = selectedGroups.includes(group);

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

@@ -45,6 +45,7 @@ export interface ItemListLayoutProps<T extends ItemObject = ItemObject> {
   isClusterScoped?: boolean;
   hideFilters?: boolean;
   searchFilters?: SearchFilter<T>[];
+  /** @deprecated */
   filterItems?: ItemsFilter<T>[];
 
   // header (title, filtering, searching, etc.)

src/renderer/components/layout/sidebar-item.tsx

@@ -64,7 +64,8 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
       <div className={classNames} data-test-id={id}>
         <NavLink
           to={url}
-          className={cssNames("nav-item flex gaps align-center", { active: isActive, expandable: isExpandable })}
+          isActive={() => isActive}
+          className={cssNames("nav-item flex gaps align-center", { expandable: isExpandable })}
           onClick={isExpandable ? prevDefault(toggleExpand) : undefined}>
           {icon}
           <span className="link-text box grow">{text}</span>
@@ -75,7 +76,7 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
         </NavLink>
         {isExpandable && expanded && (
           <ul className={cssNames("sub-menu", { active: isActive })}>
-            {subMenus.map(({ url, title, routePath }) => {
+            {subMenus.map(({ title, routePath, url = routePath }) => {
               const subItemId = `${id}${routePath}`;
 
               return (
@@ -84,7 +85,7 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
                   id={subItemId}
                   url={url}
                   text={title}
-                  isActive={isActiveRoute({ exact: true, path: routePath })}
+                  isActive={isActiveRoute({ path: url, exact: true })}
                 />
               );
             })}

src/renderer/components/layout/sidebar.tsx

@@ -66,6 +66,7 @@ export class Sidebar extends React.Component<Props> {
           url={crdURL({ query: { groups: group } })}
           subMenus={submenus}
           text={group}
+          isActive={false}
         />
       );
     });
@@ -145,7 +146,7 @@ export class Sidebar extends React.Component<Props> {
             focusable={false}
             className="pin-icon"
             tooltip="Compact view"
-            material={compact ? "keyboard_arrow_left" : "keyboard_arrow_right"}
+            material={compact ? "keyboard_arrow_right" : "keyboard_arrow_left"}
             onClick={toggle}
           />
         </div>