Add filter for deprecated domains (#880)

* Fix page filters styling, by aligning all items to flex-end instead of only the filters clear button being aligned so
* Add an optional "mini" field to the page filter config that allows the filter to render in the minimum required size instead of being equally sized like the other page filters
* Modify domain listing logic to filter out deleted and invalid domains
* Add checkbox filter that shows deprecated domains when toggled

Author: adhityamamallan

src/components/page-filters/page-filters-fields/page-filters-fields.styles.ts

@@ -13,13 +13,17 @@ export const styled = {
       marginBottom: $theme.sizing.scale700,
       [$theme.mediaQuery.medium]: {
         flexDirection: 'row',
+        alignItems: 'flex-end',
       },
     })
   ),
-  SearchFilterContainer: createStyled('div', {
-    flexGrow: 2,
-    flexBasis: 0,
-  }),
+  SearchFilterContainer: createStyled<'div', { $mini: boolean | undefined }>(
+    'div',
+    ({ $mini }) => ({
+      flexGrow: $mini ? 0 : 2,
+      flexBasis: 'fit-content',
+    })
+  ),
 };
 
 export const overrides = {
@@ -31,8 +35,6 @@ export const overrides = {
         height: $theme.sizing.scale950,
         [$theme.mediaQuery.medium]: {
           flexGrow: 0,
-          alignSelf: 'flex-end',
-          marginTop: $theme.sizing.scale700,
         },
       }),
     },

src/components/page-filters/page-filters-fields/page-filters-fields.tsx

@@ -18,7 +18,7 @@ export default function PageFiltersFields<P extends PageQueryParams>({
     <styled.SearchFiltersContainer>
       {pageFiltersConfig?.map((filter) => {
         return (
-          <styled.SearchFilterContainer key={filter.id}>
+          <styled.SearchFilterContainer key={filter.id} $mini={filter.mini}>
             <filter.component
               value={filter.getValue(queryParams)}
               setValue={(newValue) =>

src/components/page-filters/page-filters.types.ts

@@ -25,6 +25,7 @@ export type PageFilterConfig<
     keyof V extends string ? keyof V : never
   >;
   component: React.ComponentType<PageFilterComponentProps<V>>;
+  mini?: boolean;
 };
 
 export type Props<

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

@@ -1,9 +1,12 @@
 import { type DomainsPageFilterConfig } from '../domains-page-filters/domains-page-filters.types';
 import DomainsPageFiltersClusterName from '../domains-page-filters-cluster-name/domains-page-filters-cluster-name';
 import { type DomainsPageFiltersClusterNameValue } from '../domains-page-filters-cluster-name/domains-page-filters-cluster-name.types';
+import DomainsPageFilterDeprecated from '../domains-page-filters-deprecated/domains-page-filters-deprecated';
+import { type DomainsPageFiltersDeprecatedValue } from '../domains-page-filters-deprecated/domains-page-filters-deprecated.types';
 
 const domainsPageFiltersConfig: [
   DomainsPageFilterConfig<DomainsPageFiltersClusterNameValue>,
+  DomainsPageFilterConfig<DomainsPageFiltersDeprecatedValue>,
 ] = [
   {
     id: 'clusterName',
@@ -16,6 +19,21 @@ const domainsPageFiltersConfig: [
     formatValue: (v) => v,
     component: DomainsPageFiltersClusterName,
   },
+  {
+    id: 'showDeprecated',
+    filterFunc: (domain, queryParams) =>
+      queryParams.showDeprecated
+        ? true
+        : domain.status === 'DOMAIN_STATUS_REGISTERED',
+    getValue: (v) => ({ showDeprecated: v.showDeprecated }),
+    formatValue: (v) => ({
+      showDeprecated: v.showDeprecated
+        ? v.showDeprecated.toString()
+        : undefined,
+    }),
+    component: DomainsPageFilterDeprecated,
+    mini: true,
+  },
 ] as const;
 
 export default domainsPageFiltersConfig;

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

@@ -6,6 +6,7 @@ const domainsPageQueryParamsConfig: [
   PageQueryParam<'clusterName', string | undefined>,
   PageQueryParam<'sortColumn', string | undefined>,
   PageQueryParam<'sortOrder', SortOrder | undefined>,
+  PageQueryParam<'showDeprecated', boolean>,
 ] = [
   {
     key: 'searchText',
@@ -30,6 +31,12 @@ const domainsPageQueryParamsConfig: [
       return undefined;
     },
   },
+  {
+    key: 'showDeprecated',
+    queryParamKey: 'd',
+    defaultValue: false,
+    parseValue: (value) => value === 'true',
+  },
 ] as const;
 
 export default domainsPageQueryParamsConfig;

src/views/domains-page/domains-page-filters-deprecated/__tests__/domains-page-filters-deprecated.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen, userEvent } from '@/test-utils/rtl';
+
+import DomainsPageFilterDeprecated from '../domains-page-filters-deprecated';
+import { type DomainsPageFiltersDeprecatedValue } from '../domains-page-filters-deprecated.types';
+
+describe('DomainsPageFilterDeprecated', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the checkbox with correct label', () => {
+    setup({ showDeprecated: false });
+
+    expect(screen.getByText('Show deprecated domains')).toBeInTheDocument();
+  });
+
+  it('renders checkbox in unchecked state when showDeprecated is false', () => {
+    setup({ showDeprecated: false });
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it('renders checkbox in checked state when showDeprecated is true', () => {
+    setup({ showDeprecated: true });
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeChecked();
+  });
+
+  it('calls setValue with true when checkbox is checked', async () => {
+    const { user, mockSetValue } = setup({ showDeprecated: false });
+
+    const checkbox = screen.getByRole('checkbox');
+    await user.click(checkbox);
+
+    expect(mockSetValue).toHaveBeenCalledWith({ showDeprecated: true });
+  });
+
+  it('calls setValue with undefined when checkbox is unchecked', async () => {
+    const { user, mockSetValue } = setup({ showDeprecated: true });
+
+    const checkbox = screen.getByRole('checkbox');
+    await user.click(checkbox);
+
+    expect(mockSetValue).toHaveBeenCalledWith({ showDeprecated: undefined });
+  });
+});
+
+function setup(value: DomainsPageFiltersDeprecatedValue) {
+  const user = userEvent.setup();
+  const mockSetValue = jest.fn();
+
+  const renderResult = render(
+    <DomainsPageFilterDeprecated value={value} setValue={mockSetValue} />
+  );
+
+  return { ...renderResult, user, mockSetValue };
+}

src/views/domains-page/domains-page-filters-deprecated/domains-page-filters-deprecated.styles.ts

@@ -0,0 +1,34 @@
+import { type Theme } from 'baseui';
+import { type CheckboxOverrides } from 'baseui/checkbox';
+import { type StyleObject } from 'styletron-react';
+
+export const overrides = {
+  checkbox: {
+    Root: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        alignItems: 'center',
+        gap: $theme.sizing.scale500,
+        paddingTop: $theme.sizing.scale400,
+        paddingBottom: $theme.sizing.scale400,
+        [$theme.mediaQuery.medium]: {
+          paddingLeft: $theme.sizing.scale300,
+          paddingRight: $theme.sizing.scale700,
+        },
+      }),
+    },
+    ToggleTrack: {
+      style: {
+        marginTop: 0,
+        marginBottom: 0,
+        marginLeft: 0,
+        marginRight: 0,
+      },
+    },
+    Label: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        ...$theme.typography.LabelXSmall,
+        paddingLeft: 0,
+      }),
+    },
+  } satisfies CheckboxOverrides,
+};

src/views/domains-page/domains-page-filters-deprecated/domains-page-filters-deprecated.tsx

@@ -0,0 +1,25 @@
+import { Checkbox, STYLE_TYPE, LABEL_PLACEMENT } from 'baseui/checkbox';
+
+import { type PageFilterComponentProps } from '@/components/page-filters/page-filters.types';
+
+import { overrides } from './domains-page-filters-deprecated.styles';
+import { type DomainsPageFiltersDeprecatedValue } from './domains-page-filters-deprecated.types';
+
+export default function DomainsPageFilterDeprecated({
+  value,
+  setValue,
+}: PageFilterComponentProps<DomainsPageFiltersDeprecatedValue>) {
+  return (
+    <Checkbox
+      checkmarkType={STYLE_TYPE.toggle}
+      labelPlacement={LABEL_PLACEMENT.right}
+      overrides={overrides.checkbox}
+      checked={value.showDeprecated}
+      onChange={(e) =>
+        setValue({ showDeprecated: e.target.checked || undefined })
+      }
+    >
+      Show deprecated domains
+    </Checkbox>
+  );
+}

src/views/domains-page/domains-page-filters-deprecated/domains-page-filters-deprecated.types.ts

@@ -0,0 +1,3 @@
+export type DomainsPageFiltersDeprecatedValue = {
+  showDeprecated: boolean | undefined;
+};

…er-domains-irrelevant-to-cluster.test.ts …ests__/filter-irrelevant-domains.test.tssrc/views/domains-page/helpers/__tests__/filter-domains-irrelevant-to-cluster.test.ts renamed to src/views/domains-page/helpers/__tests__/filter-irrelevant-domains.test.ts src/views/domains-page/helpers/__tests__/filter-domains-irrelevant-to-cluster.test.ts renamed to src/views/domains-page/helpers/__tests__/filter-irrelevant-domains.test.ts

@@ -1,16 +1,16 @@
 import { getDomainObj } from '../../__fixtures__/domains';
 import type { DomainData } from '../../domains-page.types';
-import filterDomainsIrrelevantToCluster from '../filter-domains-irrelevant-to-cluster';
+import filterIrrelevantDomains from '../filter-irrelevant-domains';
 
-describe('filterDomainsIrrelevantToCluster', () => {
-  it('should return domains relevant to the specified cluster', () => {
-    // picking few domains data as clusters is the only required
+describe(filterIrrelevantDomains.name, () => {
+  it('should filter out irrelevant domains', () => {
     const domains = [
       getDomainObj({
         id: '1',
         name: '1',
         clusters: [{ clusterName: 'ClusterA' }],
       }),
+      // Not relevant to the specified cluster
       getDomainObj({
         id: '1',
         name: '2',
@@ -21,14 +21,27 @@ describe('filterDomainsIrrelevantToCluster', () => {
         name: '3',
         clusters: [{ clusterName: 'ClusterA' }, { clusterName: 'ClusterC' }],
       }),
+      // Deleted/Invalid domains
+      getDomainObj({
+        id: '4',
+        name: '4',
+        clusters: [{ clusterName: 'ClusterA' }, { clusterName: 'ClusterC' }],
+        status: 'DOMAIN_STATUS_DELETED',
+      }),
+      getDomainObj({
+        id: '5',
+        name: '5',
+        clusters: [{ clusterName: 'ClusterA' }, { clusterName: 'ClusterC' }],
+        status: 'DOMAIN_STATUS_INVALID',
+      }),
     ];
 
-    const result = filterDomainsIrrelevantToCluster('ClusterA', domains);
+    const result = filterIrrelevantDomains('ClusterA', domains);
 
     expect(result).toEqual([domains[0], domains[2]]);
   });
 
-  it('should return an empty array if no domains are relevant to the specified cluster', () => {
+  it('should return an empty array if no domains are relevant', () => {
     const domains = [
       getDomainObj({
         id: '1',
@@ -42,25 +55,25 @@ describe('filterDomainsIrrelevantToCluster', () => {
       }),
     ];
 
-    const result = filterDomainsIrrelevantToCluster('ClusterA', domains);
+    const result = filterIrrelevantDomains('ClusterA', domains);
 
     expect(result).toEqual([]);
   });
 
   it('should return an empty array if domains array is empty', () => {
     const domains: DomainData[] = [];
 
-    const result = filterDomainsIrrelevantToCluster('ClusterA', domains);
+    const result = filterIrrelevantDomains('ClusterA', domains);
 
     expect(result).toEqual([]);
   });
 
   it('should handle null or undefined domains array gracefully', () => {
-    //@ts-expect-error domains comes from backend so testing null behavior
-    const resultWithNull = filterDomainsIrrelevantToCluster('ClusterA', null);
-    const resultWithUndefined = filterDomainsIrrelevantToCluster(
+    // @ts-expect-error domains come from backend so testing null behavior
+    const resultWithNull = filterIrrelevantDomains('ClusterA', null);
+    const resultWithUndefined = filterIrrelevantDomains(
       'ClusterA',
-      //@ts-expect-error domains comes from backend so testing undefined behavior
+      // @ts-expect-error domains come from backend so testing undefined behavior
       undefined
     );