feat: Filters for Failover History Table (#1079)

Add filters for Failover History table, but only for active-active domains
Create filter for Cluster Attribute Scope, which depends on domain description to suggest possible scopes
Create filter for Cluster Attribute Value, which depends on selected scope to suggest possible values/names
Remove (now) unused styles file from DomainPageFailovers

Signed-off-by: Adhitya Mamallan <adhitya.mamallan@uber.com>

Author: adhityamamallan

src/views/domain-page/domain-page-failovers-filters/__tests__/domain-page-failovers-filters.test.tsx

@@ -0,0 +1,226 @@
+import { render, screen, userEvent } from '@/test-utils/rtl';
+
+import { type PageQueryParamValues } from '@/hooks/use-page-query-params/use-page-query-params.types';
+import { mockDomainPageQueryParamsValues } from '@/views/domain-page/__fixtures__/domain-page-query-params';
+import type domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
+import { mockActiveActiveDomain } from '@/views/shared/active-active/__fixtures__/active-active-domain';
+import { type ActiveActiveDomain } from '@/views/shared/active-active/active-active.types';
+
+import { PRIMARY_CLUSTER_SCOPE } from '../../domain-page-failovers/domain-page-failovers.constants';
+import DomainPageFailoversFilters from '../domain-page-failovers-filters';
+
+describe(DomainPageFailoversFilters.name, () => {
+  it('renders both filter comboboxes and reset button', () => {
+    setup({});
+
+    expect(screen.getByText('Cluster Attribute Scope')).toBeInTheDocument();
+    expect(screen.getByText('Cluster Attribute Value')).toBeInTheDocument();
+    expect(screen.getByText('Reset filters')).toBeInTheDocument();
+  });
+
+  it('displays cluster attribute scope options including primary and domain scopes', async () => {
+    const { user } = setup({});
+
+    const scopeCombobox = screen.getByPlaceholderText(
+      'Scope of cluster attribute'
+    );
+    await user.click(scopeCombobox);
+
+    expect(screen.getByText(PRIMARY_CLUSTER_SCOPE)).toBeInTheDocument();
+    expect(screen.getByText('region')).toBeInTheDocument();
+  });
+
+  it('disables cluster attribute value combobox when scope is primary', () => {
+    setup({
+      queryParamsOverrides: {
+        clusterAttributeScope: PRIMARY_CLUSTER_SCOPE,
+      },
+    });
+
+    expect(
+      screen.getByPlaceholderText('Value/name of cluster attribute')
+    ).toBeDisabled();
+  });
+
+  it('enables cluster attribute value combobox when scope is not primary', () => {
+    setup({
+      queryParamsOverrides: {
+        clusterAttributeScope: 'region',
+      },
+    });
+
+    expect(
+      screen.getByPlaceholderText('Value/name of cluster attribute')
+    ).not.toBeDisabled();
+  });
+
+  it('displays cluster attribute values for selected scope', async () => {
+    const { user } = setup({
+      queryParamsOverrides: {
+        clusterAttributeScope: 'region',
+      },
+    });
+
+    const valueCombobox = screen.getByPlaceholderText(
+      'Value/name of cluster attribute'
+    );
+    await user.click(valueCombobox);
+
+    expect(screen.getByText('region0')).toBeInTheDocument();
+    expect(screen.getByText('region1')).toBeInTheDocument();
+  });
+
+  it('calls setQueryParams with new scope and resets value when scope changes', async () => {
+    const { user, mockSetQueryParams } = setup({});
+
+    const scopeCombobox = screen.getByPlaceholderText(
+      'Scope of cluster attribute'
+    );
+    await user.click(scopeCombobox);
+    await user.click(screen.getByText('region'));
+
+    expect(mockSetQueryParams).toHaveBeenCalledWith({
+      clusterAttributeScope: 'region',
+      clusterAttributeValue: undefined,
+    });
+  });
+
+  it('calls setQueryParams with new value when cluster attribute value changes', async () => {
+    const { user, mockSetQueryParams } = setup({
+      queryParamsOverrides: {
+        clusterAttributeScope: 'region',
+      },
+    });
+
+    const valueCombobox = screen.getByPlaceholderText(
+      'Value/name of cluster attribute'
+    );
+    await user.click(valueCombobox);
+    await user.click(screen.getByText('region0'));
+
+    expect(mockSetQueryParams).toHaveBeenCalledWith({
+      clusterAttributeValue: 'region0',
+    });
+  });
+
+  it('calls setQueryParams with undefined when clearing scope', async () => {
+    const { user, mockSetQueryParams } = setup({
+      queryParamsOverrides: {
+        clusterAttributeScope: 'region',
+        clusterAttributeValue: 'region0',
+      },
+    });
+
+    const scopeCombobox = screen.getByPlaceholderText(
+      'Scope of cluster attribute'
+    );
+    await user.click(scopeCombobox);
+
+    // Find and click the clear button (BaseUI Combobox clearable)
+    const clearButtons = screen.getAllByLabelText('Clear value');
+    await user.click(clearButtons[0]);
+
+    expect(mockSetQueryParams).toHaveBeenCalledWith({
+      clusterAttributeScope: undefined,
+      clusterAttributeValue: undefined,
+    });
+  });
+
+  it('calls setQueryParams with undefined when clearing value', async () => {
+    const { user, mockSetQueryParams } = setup({
+      queryParamsOverrides: {
+        clusterAttributeScope: 'region',
+        clusterAttributeValue: 'region0',
+      },
+    });
+
+    const valueCombobox = screen.getByPlaceholderText(
+      'Value/name of cluster attribute'
+    );
+    await user.click(valueCombobox);
+
+    // Find and click the clear button
+    const clearButtons = screen.getAllByLabelText('Clear value');
+    await user.click(clearButtons[1]);
+
+    expect(mockSetQueryParams).toHaveBeenCalledWith({
+      clusterAttributeValue: undefined,
+    });
+  });
+
+  it('resets both filters when reset filters button is clicked', async () => {
+    const { user, mockSetQueryParams } = setup({
+      queryParamsOverrides: {
+        clusterAttributeScope: 'region',
+        clusterAttributeValue: 'region0',
+      },
+    });
+
+    const resetButton = screen.getByText('Reset filters');
+    await user.click(resetButton);
+
+    expect(mockSetQueryParams).toHaveBeenCalledWith({
+      clusterAttributeScope: undefined,
+      clusterAttributeValue: undefined,
+    });
+  });
+
+  it('displays current scope value in combobox', () => {
+    setup({
+      queryParamsOverrides: {
+        clusterAttributeScope: 'region',
+      },
+    });
+
+    expect(
+      screen.getByPlaceholderText('Scope of cluster attribute')
+    ).toHaveValue('region');
+  });
+
+  it('displays current value in cluster attribute value combobox', () => {
+    setup({
+      queryParamsOverrides: {
+        clusterAttributeScope: 'region',
+        clusterAttributeValue: 'region0',
+      },
+    });
+
+    expect(
+      screen.getByPlaceholderText('Value/name of cluster attribute')
+    ).toHaveValue('region0');
+  });
+});
+
+function setup({
+  queryParamsOverrides,
+  domainDescriptionOverrides,
+}: {
+  queryParamsOverrides?: Partial<
+    PageQueryParamValues<typeof domainPageQueryParamsConfig>
+  >;
+  domainDescriptionOverrides?: Partial<ActiveActiveDomain>;
+} = {}) {
+  const mockSetQueryParams = jest.fn();
+
+  const domainDescription = {
+    ...mockActiveActiveDomain,
+    ...domainDescriptionOverrides,
+  };
+
+  const queryParams = {
+    ...mockDomainPageQueryParamsValues,
+    ...queryParamsOverrides,
+  };
+
+  render(
+    <DomainPageFailoversFilters
+      domainDescription={domainDescription}
+      queryParams={queryParams}
+      setQueryParams={mockSetQueryParams}
+    />
+  );
+
+  const user = userEvent.setup();
+
+  return { mockSetQueryParams, user };
+}

src/views/domain-page/domain-page-failovers-filters/domain-page-failovers-filters.styles.ts

@@ -0,0 +1,56 @@
+import { type Theme } from 'baseui';
+import { styled as createStyled } from 'baseui';
+import { type ButtonOverrides } from 'baseui/button';
+import type { FormControlOverrides } from 'baseui/form-control/types';
+import { type StyleObject } from 'styletron-react';
+
+export const styled = {
+  FiltersContainer: createStyled('div', ({ $theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+    gap: $theme.sizing.scale500,
+    [$theme.mediaQuery.medium]: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+    },
+    marginTop: $theme.sizing.scale950,
+    marginBottom: $theme.sizing.scale900,
+  })),
+  FilterContainer: createStyled('div', ({ $theme }) => ({
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: '0',
+    [$theme.mediaQuery.medium]: {
+      alignSelf: 'flex-start',
+    },
+  })),
+};
+
+export const overrides = {
+  comboboxFormControl: {
+    Label: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        ...$theme.typography.LabelXSmall,
+      }),
+    },
+    ControlContainer: {
+      style: (): StyleObject => ({
+        margin: '0px',
+      }),
+    },
+  } satisfies FormControlOverrides,
+  clearFiltersButton: {
+    Root: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        whiteSpace: 'nowrap',
+        flexGrow: 2,
+        height: $theme.sizing.scale950,
+        [$theme.mediaQuery.medium]: {
+          flexGrow: 0,
+          alignSelf: 'flex-end',
+        },
+      }),
+    },
+  } satisfies ButtonOverrides,
+};