refactor files structure and add domains page query params

.devcontainer/devcontainer.json

@@ -9,7 +9,6 @@
 		"../docker-compose.yml",
 		"docker-compose.yml"
 	],
-
 	// The 'service' property is the name of the service for the container that VS Code should
 	// use. Update this value and .devcontainer/docker-compose.yml to the real service name.
 	"service": "cadence_web",

src/configs/clusters/clusters-configs.ts → src/config/clusters/clusters-config.ts

@@ -1,7 +1,7 @@
 import GRPC_PEERS from "../grpc/grpc-peers";
 import GRPC_SERVICES_NAMES from "../grpc/grpc-services-names";
 import CLUSTER_NAMES from "./cluster-names";
-import { ClusterConfig, ClustersConfigs } from "./clusters-configs.types";
+import { ClusterConfig, ClustersConfigs } from "./clusters-config.types";
 
 const configsHasSameLength = [GRPC_PEERS, GRPC_SERVICES_NAMES].every((config) => config.length === CLUSTER_NAMES.length)
 if (!configsHasSameLength) throw new Error('Failed to build cluster configuration: cluster names, grpc peers & service names count doesn\'t match');

src/containers/domains-page/config/domains-page-filters-config.ts

@@ -0,0 +1,15 @@
+import { DomainPageFilters } from "../domains-page-filters/domains-page-filters.types";
+import DomainsPageFiltersClusterName from "../domains-page-filters-cluster-name/domains-page-filters-cluster-name";
+
+const domainPageFilters = [
+    {
+        id: 'clusterName',
+        renderFilter: DomainsPageFiltersClusterName,
+    },
+    {
+        id: 'searchText',
+        renderFilter: DomainsPageFiltersClusterName,
+    }
+] as const satisfies DomainPageFilters;
+
+export default domainPageFilters;

src/containers/domains-page/config/domains-page-query-params.ts

@@ -0,0 +1,29 @@
+import { PageQueryParam } from "@/hooks/use-page-query-params/types"
+
+const domainPageQueryParamsConfig:
+    [
+        PageQueryParam<"searchText", string>,
+        PageQueryParam<"clusterName", string>,
+        PageQueryParam<"sortColumn", string>,
+        PageQueryParam<"sortOrder", string>
+    ]
+    = [{
+        key: "searchText",
+        queryParamKey: "s",
+        defaultValue: ""
+    },
+    {
+        key: "clusterName",
+        queryParamKey: "c",
+        defaultValue: ""
+    },
+    {
+        key: "sortColumn",
+        queryParamKey: "sc",
+    },
+    {
+        key: "sortOrder",
+        queryParamKey: "so",
+    }] as const;
+
+export default domainPageQueryParamsConfig;

src/containers/domains-page/domains-table/domains-table.config.ts → src/containers/domains-page/config/domains-table-columns-config.ts

@@ -1,4 +1,4 @@
-import { TableColumn } from "@/layout/table/table";
+import { TableColumn } from "@/layout/table/table.types";
 import { DomainData } from "../domains-page.types";
 import DomainsTableClusterCell from "../domains-table-cluster-cell/domains-table-cluster-cell";
 import DomainsTableDomainNameCell from "../domains-table-domain-name-cell/domains-table-domain-name-cell";

src/containers/domains-page/domains-page-filters-cluster-name/domains-page-filters-cluster-name.styles.ts

@@ -0,0 +1,31 @@
+import type { StyletronCSSObject, StyletronCSSObjectOf } from "@/hooks/use-styletron-classes";
+import { Theme } from "baseui";
+import type { FormControlOverrides } from "baseui/form-control/types";
+import { StyleObject } from "styletron-react";
+
+export const overrides = {
+    selectFormControl: {
+        Label: {
+            style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+                ...$theme.typography.LabelXSmall
+            })
+        },
+        ControlContainer: {
+            style: (): StyleObject => ({
+                margin: "0px"
+            })
+        }
+    } satisfies FormControlOverrides
+
+}
+
+
+const cssStylesObj = {
+    selectFilterContainer: (theme) => ({
+        [theme.mediaQuery.medium]: {
+            flex: "1",
+        }
+    }),
+} satisfies StyletronCSSObject;
+
+export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> = cssStylesObj;

src/containers/domains-page/domains-page-filters-cluster-name/domains-page-filters-cluster-name.tsx

@@ -0,0 +1,31 @@
+"use client";
+import React from 'react';
+import useStyletronClasses from '@/hooks/use-styletron-classes';
+import { cssStyles, overrides } from './domains-page-filters-cluster-name.styles';
+import { FormControl } from 'baseui/form-control';
+import { Select } from 'baseui/select';
+import CLUSTERS_CONFIGS from '@/config/clusters/clusters-config';
+import { DomainPageFilterProps } from "../domains-page-filters/domains-page-filters.types";
+
+const clustersOptions = CLUSTERS_CONFIGS.map(({ clusterName }) => ({ label: clusterName, id: clusterName }));
+
+function DomainsPageFiltersClusterName({ onChange, value }: DomainPageFilterProps) {
+    const { cls } = useStyletronClasses(cssStyles);
+
+    const clusterValue = clustersOptions.filter(({ id }) => id === value)
+
+    return (
+        <div className={cls.selectFilterContainer}>
+            <FormControl overrides={overrides.selectFormControl} label="Clusters">
+                <Select
+                    size="compact"
+                    value={clusterValue}
+                    options={clustersOptions}
+                    onChange={(params) => onChange(String(params.value[0]?.id))}
+                />
+            </FormControl>
+        </div>
+    );
+}
+
+export default DomainsPageFiltersClusterName;

src/containers/domains-page/domains-page-filters/domains-page-filters.styles.ts

@@ -1,22 +1,8 @@
 import type { StyletronCSSObject, StyletronCSSObjectOf } from "@/hooks/use-styletron-classes";
-import { Theme } from "baseui";
-import type { FormControlOverrides } from "baseui/form-control/types";
 import type { InputOverrides } from "baseui/input/types";
 import { StyleObject } from "styletron-react";
 
 export const overrides = {
-    selectFormControl: {
-        Label: {
-            style: ({ $theme }: { $theme: Theme }): StyleObject => ({
-                ...$theme.typography.LabelXSmall
-            })
-        },
-        ControlContainer: {
-            style: (): StyleObject => ({
-                margin: "0px"
-            })
-        }
-    } satisfies FormControlOverrides,
     searchInput: {
         StartEnhancer: {
             style: (): StyleObject => ({
@@ -57,11 +43,6 @@ const cssStylesObj = {
             flexDirection: "row"
         }
     }),
-    selectFilterContainer: (theme) => ({
-        [theme.mediaQuery.medium]: {
-            flex: "1",
-        }
-    }),
     clearBtnContainer: (theme) => ({
         display: "flex",
         flex: 1,

src/containers/domains-page/domains-page-filters/domains-page-filters.tsx

@@ -1,29 +1,26 @@
 "use client"
+import { useMemo, useState } from "react";
+import { Button } from "baseui/button";
 import { Input } from "baseui/input";
+import { Delete, Filter, Search, } from "baseui/icon";
 import { Cell, Grid } from "baseui/layout-grid";
-import { Select } from "baseui/select";
-import { FormControl } from 'baseui/form-control';
-import domainPageQueryParamsConfig from "../domains-page-query-params";
 import usePageQueryParams from "@/hooks/use-page-query-params/use-page-query-params";
-import { Delete, Filter, Search, } from "baseui/icon";
 import useStyletronClasses from "@/hooks/use-styletron-classes";
+import domainPageQueryParamsConfig from "../config/domains-page-query-params";
+import getDomainsPageChangedFiltersCount from "../utils/get-domain-page-changed-filters-count";
+import domainPageFilters from "../config/domains-page-filters-config";
 import { cssStyles, overrides } from "./domains-page-filters.styles";
-import { Button } from "baseui/button";
-import { useMemo, useState } from "react";
-import CLUSTERS_CONFIGS from "@/configs/clusters/clusters-configs";
 
-const clustersOptions = CLUSTERS_CONFIGS.map(({ clusterName }) => ({ label: clusterName, id: clusterName }));
-export default function DomainPageHeader() {
+
+export default function DomainPageFilters() {
   const [queryParams, setQueryParams] = usePageQueryParams(domainPageQueryParamsConfig, { pageRerender: false });
   const { cls, theme } = useStyletronClasses(cssStyles);
   const [showFilters, setShowFilters] = useState(false);
+
   const selectedFiltersCount = useMemo(() => {
-    return 0;
-    /*     return domainPageQueryParamsConfig
-          .reduce((result, { key, defaultValue }) => queryParams[key] === defaultValue ? result : result + 1, 0); */
-  }, [/* queryParams */]);
+    return getDomainsPageChangedFiltersCount(queryParams);
+  }, [queryParams]);
 
-  const clusterValue = clustersOptions.filter(({ id }) => id === queryParams.clusterName)
   return (
     <section>
       <Grid>
@@ -47,16 +44,11 @@ export default function DomainPageHeader() {
             </Button>
           </div>
           {showFilters && <div className={cls.filtersContainer}>
-            <div className={cls.selectFilterContainer}>
-              <FormControl overrides={overrides.selectFormControl} label="Clusters">
-                <Select
-                  size="compact"
-                  value={clusterValue}
-                  options={clustersOptions}
-                  onChange={(params) => setQueryParams({ clusterName: params.value[0]?.id })}
-                />
-              </FormControl>
-            </div>
+            {domainPageFilters.map((f) => {
+              return (
+                <f.renderFilter key={f.id} onChange={(v) => setQueryParams({ [f.id]: v })} value={queryParams[f.id]} />
+              );
+            })}
             <div className={cls.clearBtnContainer}>
               <Button startEnhancer={<Delete />} kind="tertiary" size="compact" >
                 Clear filters

src/containers/domains-page/domains-page-filters/domains-page-filters.types.ts

@@ -0,0 +1,15 @@
+import type { PageQueryParamKeys } from "@/hooks/use-page-query-params/types";
+import domainPageQueryParamsConfig from "@/containers/domains-page/domains-page-query-params";
+
+
+export type DomainPageFilterProps = {
+    onChange: (v: string | string[] | undefined) => void,
+    value: any,
+}
+
+export type DomainPageFilter = {
+    id: PageQueryParamKeys<typeof domainPageQueryParamsConfig>;
+    renderFilter: React.ComponentType<DomainPageFilterProps> | ((props: DomainPageFilterProps) => React.ReactNode);
+};
+
+export type DomainPageFilters = Array<DomainPageFilter>;

src/containers/domains-page/domains-page-title-badge/domains-page-title-badge.styles.ts

@@ -0,0 +1,18 @@
+import type{ Theme } from "baseui";
+import type { StyleObject } from "styletron-react";
+import type { BadgeOverrides } from "baseui/badge";
+
+export const overrides = {
+    badge: {
+        Badge: {
+            style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+                color: $theme.colors.contentPrimary,
+                backgroundColor: $theme.colors.backgroundTertiary,
+                borderRadius: '20px',
+                padding: `${$theme.sizing.scale0} ${$theme.sizing.scale300}`,
+                ...$theme.typography.LabelXSmall
+            }),
+        },
+    } satisfies BadgeOverrides
+}
+

src/containers/domains-page/domains-page-title-badge/domains-page-title-badge.tsx

@@ -3,27 +3,16 @@ import React from 'react';
 import { Badge } from 'baseui/badge';
 import { StyleObject } from 'styletron-react';
 import { Theme } from 'baseui';
+import type { Props } from './domains-page-title-badge.types';
+import { overrides } from './domains-page-title-badge.styles';
 
-type Props = {
-	content: string | number
-}
 
 export default function DomainsPageTitleBadge({ content }: Props) {
 
 	return (
 		<Badge
 			content={content}
-			overrides={{
-				Badge: {
-					style: ({ $theme }: { $theme: Theme }): StyleObject => ({
-						color: $theme.colors.contentPrimary,
-						backgroundColor: $theme.colors.backgroundTertiary,
-						borderRadius: '20px',
-						padding: `${$theme.sizing.scale0} ${$theme.sizing.scale300}`,
-						...$theme.typography.LabelXSmall
-					}),
-				},
-			}}
+			overrides={overrides.badge}
 		/>
 	);
 }

src/containers/domains-page/domains-page-title-badge/domains-page-title-badge.types.ts

@@ -0,0 +1,3 @@
+export type Props = {
+	content: string | number
+}

src/containers/domains-page/domains-page-title/domains-page-title.tsx

@@ -1,15 +1,11 @@
 "use client"
 import { LabelLarge } from 'baseui/typography';
 import { Cell, Grid } from "baseui/layout-grid";
-
 import useStyletronClasses from "@/hooks/use-styletron-classes";
 import { cssStyles } from "./domains-page-title.styles";
-import { ReactNode } from 'react';
+import { Props } from './domains-page-title.types';
 
 
-type Props = {
-  countBadge: ReactNode
-}
 
 export default function DomainPageTitle({ countBadge }: Props) {
   const { cls } = useStyletronClasses(cssStyles);

src/containers/domains-page/domains-page-title/domains-page-title.types.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react"
+
+export type Props = {
+    countBadge: ReactNode
+}

src/containers/domains-page/domains-page.tsx

@@ -1,10 +1,10 @@
 import React, { JSXElementConstructor, Suspense } from "react";
-import DomainPageHeader from "./domains-page-filters/domains-page-filters";
-import DomainsTable from "./domains-table/domains-table";
-import { getCachedDomains } from "./utils/get-domains";
-import DomainPageTitle from "./domains-page-title/domains-page-title";
-import DomainsPageTitleBadge from "./domains-page-title-badge/domains-page-title-badge";
+import DomainPageHeader from "@/containers/domains-page/domains-page-filters/domains-page-filters";
+import DomainsTable from "@/containers/domains-page/domains-table/domains-table";
+import DomainPageTitle from "@/containers/domains-page/domains-page-title/domains-page-title";
+import DomainsPageTitleBadge from "@/containers/domains-page/domains-page-title-badge/domains-page-title-badge";
 import SectionLoadingIndicator from "@/components/section-loading-indicator/section-loading-indicator";
+import { getCachedAllDomains } from "@/containers/domains-page/utils/get-all-domains";
 
 
 async function RSCWithAsyncProps<Component extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>, ComponentProps extends React.ComponentProps<Component>>({ component, getAsyncProps }: { component: Component, getAsyncProps: () => Promise<ComponentProps> }) {
@@ -24,7 +24,7 @@ export default async function DomainsPage() {
                     <RSCWithAsyncProps
                         component={DomainsPageTitleBadge}
                         getAsyncProps={async () => {
-                            const res = await getCachedDomains();
+                            const res = await getCachedAllDomains();
                             return { content: res.domains.length }
                         }} />
                 </Suspense>
@@ -36,7 +36,7 @@ export default async function DomainsPage() {
                 <RSCWithAsyncProps
                     component={DomainsTable}
                     getAsyncProps={async () => {
-                        const res = await getCachedDomains();
+                        const res = await getCachedAllDomains();
                         return { domains: res.domains }
                     }} />
             </Suspense>

src/containers/domains-page/domains-table-cluster-cell/domains-table-cluster-cell.styles.ts

@@ -6,10 +6,6 @@ const cssStylesObj = {
         gap: theme.sizing.scale400,
         ...theme.typography.LabelXSmall,
     }),
-    metricLinkContainer: (theme) => ({
-        display: 'flex',
-        ...theme.typography.LabelXSmall,
-    }),
 } satisfies StyletronCSSObject;
 
 export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> = cssStylesObj;