flatten file heirarchy

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

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

@@ -12,7 +12,7 @@ import { helmChartStore } from "./helm-chart.store";
 import type { HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.api";
 import { HelmChartDetails } from "./helm-chart-details";
 import { navigation } from "../../navigation";
-import { ItemListLayout } from "../item-object-list/item-list-layout";
+import { ItemListLayout } from "../item-object-list/list-layout";
 import { helmChartsURL } from "../../../common/routes";
 import type { HelmChartsRouteParams } from "../../../common/routes";
 

src/renderer/components/+network-port-forwards/port-forwards.tsx

@@ -8,7 +8,7 @@ import "./port-forwards.scss";
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import type { RouteComponentProps } from "react-router-dom";
-import { ItemListLayout } from "../item-object-list/item-list-layout";
+import { ItemListLayout } from "../item-object-list/list-layout";
 import type { PortForwardItem, PortForwardStore } from "../../port-forward";
 import { PortForwardMenu } from "./port-forward-menu";
 import { PortForwardsRouteParams, portForwardsURL } from "../../../common/routes";

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

@@ -3,24 +3,24 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "../item-list-layout.scss";
+import "./item-list-layout.scss";
 
 import React, { ReactNode } from "react";
 import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import { ConfirmDialog, ConfirmDialogParams } from "../../confirm-dialog";
-import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallbacks } from "../../table";
-import { boundMethod, cssNames, IClassName, isReactNode, prevDefault, stopPropagation } from "../../../utils";
-import { AddRemoveButtons, AddRemoveButtonsProps } from "../../add-remove-buttons";
-import { NoItems } from "../../no-items";
-import { Spinner } from "../../spinner";
-import type { ItemObject, ItemStore } from "../../../../common/item.store";
-import { Filter, pageFilters } from "../page-filters.store";
-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 { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog";
+import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallbacks } from "../table";
+import { boundMethod, cssNames, IClassName, isReactNode, prevDefault, stopPropagation } from "../../utils";
+import { AddRemoveButtons, AddRemoveButtonsProps } from "../add-remove-buttons";
+import { NoItems } from "../no-items";
+import { Spinner } from "../spinner";
+import type { ItemObject, ItemStore } from "../../../common/item.store";
+import { Filter, pageFilters } from "./page-filters.store";
+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";
 
 interface ItemListLayoutContentProps<I extends ItemObject> {
   getFilters: () => Filter[]

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

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./item-list-layout.scss";
+
+import React from "react";
+import { PageFiltersList } from "./page-filters-list";
+import { observer } from "mobx-react";
+import type { Filter } from "./page-filters.store";
+
+export interface ItemListLayoutFilterProps {
+  getIsReady: () => boolean
+  getFilters: () => Filter[]
+  getFiltersAreShown: () => boolean
+  hideFilters: boolean
+}
+
+export const ItemListLayoutFilters = observer(({ getFilters, getFiltersAreShown, getIsReady, hideFilters }: ItemListLayoutFilterProps) => {
+  const filters = getFilters();
+
+  if (!getIsReady() || !filters.length || hideFilters || !getFiltersAreShown()) {
+    return null;
+  }
+
+  return <PageFiltersList filters={filters} />;
+});
+

src/renderer/components/item-object-list/header-filters.tsx

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { observer } from "mobx-react";
+import React from "react";
+import type { HeaderPlaceholders } from "./list-layout";
+
+export interface ItemListLayoutHeaderFiltersProps {
+  headerPlaceholders: HeaderPlaceholders
+}
+
+export const ItemListLayoutHeaderFilters = observer(({ headerPlaceholders }: ItemListLayoutHeaderFiltersProps) => (
+  <>
+    {headerPlaceholders.filters}
+  </>
+));

src/renderer/components/item-object-list/header-info.tsx

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import { observer } from "mobx-react";
+import type { ItemObject, ItemStore } from "../../../common/item.store";
+import type { Filter } from "./page-filters.store";
+import type { HeaderPlaceholders } from "./list-layout";
+
+interface ItemListLayoutHeaderInfoProps<I extends ItemObject> {
+  headerPlaceholders: HeaderPlaceholders;
+  getItems: () => I[];
+  store: ItemStore<I>;
+  getFilters: () => Filter[]
+  toggleFilters: () => void
+}
+
+export const ItemListLayoutHeaderInfo = observer(<I extends ItemObject>({
+  headerPlaceholders,
+  getItems,
+  getFilters,
+  store,
+  toggleFilters,
+}: ItemListLayoutHeaderInfoProps<I>) => {
+  const renderInfo = () => {
+    const allItemsCount = store.getTotalCount();
+    const itemsCount = getItems().length;
+
+    if (getFilters().length > 0) {
+      return (
+        <>
+          <a onClick={toggleFilters}>Filtered</a>: {itemsCount} / {allItemsCount}
+        </>
+      );
+    }
+
+    return allItemsCount === 1
+      ? `${allItemsCount} item`
+      : `${allItemsCount} items`;
+  };
+
+  const info = headerPlaceholders.info ?? renderInfo();
+
+  if (!info) {
+    return null;
+  }
+
+  return (
+    <div className="info-panel box grow">
+      {info}
+    </div>
+  );
+});

src/renderer/components/item-object-list/header-search.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { observer } from "mobx-react";
+import type { ItemObject } from "../../../common/item.store";
+import { SearchInputUrl } from "../input";
+import React from "react";
+import type { HeaderPlaceholders, SearchFilter } from "./list-layout";
+
+interface ItemListLayoutHeaderSearchProps<I extends ItemObject> {
+  searchFilters: SearchFilter<I>[];
+  headerPlaceholders: HeaderPlaceholders;
+}
+
+export const ItemListLayoutHeaderSearch = observer(<I extends ItemObject>({
+  searchFilters,
+  headerPlaceholders = {},
+}: ItemListLayoutHeaderSearchProps<I>) => {
+  const { searchProps } = headerPlaceholders;
+
+  if (searchFilters.length === 0 || !searchProps) {
+    return null;
+  }
+
+  return <SearchInputUrl {...searchProps} />;
+});

src/renderer/components/item-object-list/item-list-layout-header/item-list-layout-header-title/item-list-layout-header-title.tsx → src/renderer/components/item-object-list/header-title.tsx

@@ -4,7 +4,7 @@
  */
 import { observer } from "mobx-react";
 import React from "react";
-import type { HeaderPlaceholders } from "../../item-list-layout";
+import type { HeaderPlaceholders } from "./list-layout";
 
 interface ItemListLayoutHeaderTitleProps {
   renderHeaderTitle: React.ReactNode | (() => React.ReactNode);

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

@@ -3,20 +3,20 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "../item-list-layout.scss";
+import "./item-list-layout.scss";
 
 import React, { ReactNode } from "react";
 import { observer } from "mobx-react";
-import { cssNames, IClassName } from "../../../utils";
-import type { ItemObject, ItemStore } from "../../../../common/item.store";
-import type { Filter } from "../page-filters.store";
-import { ItemListLayoutHeaderTitle } from "./item-list-layout-header-title/item-list-layout-header-title";
-import { ItemListLayoutHeaderInfo } from "./item-list-layout-header-info/item-list-layout-header-info";
-import { ItemListLayoutHeaderFilters } from "./item-list-layout-header-filters/item-list-layout-header-filters";
-import { ItemListLayoutHeaderSearch } from "./item-list-layout-header-search/item-list-layout-header-search";
-import type { HeaderCustomizer, SearchFilter } from "../item-list-layout";
+import { cssNames, IClassName } from "../../utils";
+import type { ItemObject, ItemStore } from "../../../common/item.store";
+import type { Filter } from "./page-filters.store";
+import { ItemListLayoutHeaderTitle } from "./header-title";
+import { ItemListLayoutHeaderInfo } from "./header-info";
+import { ItemListLayoutHeaderFilters } from "./header-filters";
+import { ItemListLayoutHeaderSearch } from "./header-search";
+import type { HeaderCustomizer, SearchFilter } from "./list-layout";
 
-interface ItemListLayoutHeaderProps<I extends ItemObject> {
+export interface ItemListLayoutHeaderProps<I extends ItemObject> {
   getItems: () => I[];
   getFilters: () => Filter[];
   toggleFilters: () => void;
@@ -44,6 +44,10 @@ export class ItemListLayoutHeader<I extends ItemObject> extends React.Component<
       renderHeaderTitle,
       headerClassName,
       searchFilters,
+      getItems,
+      store,
+      getFilters,
+      toggleFilters,
     } = this.props;
 
     if (!showHeader) {
@@ -69,10 +73,10 @@ export class ItemListLayoutHeader<I extends ItemObject> extends React.Component<
 
         <ItemListLayoutHeaderInfo
           headerPlaceholders={headerPlaceholders}
-          getItems={this.props.getItems}
-          store={this.props.store}
-          getFilters={this.props.getFilters}
-          toggleFilters={this.props.toggleFilters}
+          getItems={getItems}
+          store={store}
+          getFilters={getFilters}
+          toggleFilters={toggleFilters}
         />
 
         <ItemListLayoutHeaderFilters headerPlaceholders={headerPlaceholders} />

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

@@ -3,4 +3,4 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-export * from "./item-list-layout";
+export * from "./list-layout";