Fix issues with basic visibility filters

src/views/domain-workflows-basic/domain-workflows-basic-filters/__tests__/domain-workflows-basic-filters.test.tsx

@@ -26,21 +26,9 @@ jest.mock(
     ))
 );
 
-const mockSetQueryParams = jest.fn();
-const mockResetAllFilters = jest.fn();
-const mockActiveFiltersCount = 2;
-jest.mock('@/components/page-filters/hooks/use-page-filters', () =>
-  jest.fn(() => ({
-    resetAllFilters: mockResetAllFilters,
-    activeFiltersCount: mockActiveFiltersCount,
-    queryParams: mockDomainPageQueryParamsValues,
-    setQueryParams: mockSetQueryParams,
-  }))
-);
-
 describe(DomainWorkflowsBasicFilters.name, () => {
   it('renders page search and filters', async () => {
-    render(<DomainWorkflowsBasicFilters />);
+    setup();
 
     expect(
       await screen.findByText('Filter search: Workflow ID')
@@ -53,8 +41,7 @@ describe(DomainWorkflowsBasicFilters.name, () => {
   });
 
   it('hides page filters when filter toggle is clicked', async () => {
-    const user = userEvent.setup();
-    render(<DomainWorkflowsBasicFilters />);
+    const { user } = setup();
 
     expect(await screen.findByText('Filter fields')).toBeInTheDocument();
 
@@ -64,3 +51,18 @@ describe(DomainWorkflowsBasicFilters.name, () => {
     expect(screen.queryByText('Filter fields')).toBeNull();
   });
 });
+
+function setup() {
+  const user = userEvent.setup();
+
+  render(
+    <DomainWorkflowsBasicFilters
+      resetAllFilters={jest.fn()}
+      activeFiltersCount={2}
+      queryParams={mockDomainPageQueryParamsValues}
+      setQueryParams={jest.fn()}
+    />
+  );
+
+  return { user };
+}

src/views/domain-workflows-basic/domain-workflows-basic-filters/domain-workflows-basic-filters.tsx

@@ -1,7 +1,6 @@
 'use client';
 import { useState } from 'react';
 
-import usePageFilters from '@/components/page-filters/hooks/use-page-filters';
 import PageFiltersFields from '@/components/page-filters/page-filters-fields/page-filters-fields';
 import PageFiltersSearch from '@/components/page-filters/page-filters-search/page-filters-search';
 import PageFiltersToggle from '@/components/page-filters/page-filters-toggle/page-filters-toggle';
@@ -11,16 +10,16 @@ import domainWorkflowsBasicFiltersConfig from '../config/domain-workflows-basic-
 import DOMAIN_WORKFLOWS_BASIC_SEARCH_DEBOUNCE_MS from '../config/domain-workflows-basic-search-debounce-ms.config';
 
 import { styled } from './domain-workflows-basic-filters.styles';
+import { type Props } from './domain-workflows-basic-filters.types';
 
-export default function DomainWorkflowsBasicFilters() {
+export default function DomainWorkflowsBasicFilters({
+  resetAllFilters,
+  activeFiltersCount,
+  queryParams,
+  setQueryParams,
+}: Props) {
   const [areFiltersShown, setAreFiltersShown] = useState(true);
 
-  const { resetAllFilters, activeFiltersCount, queryParams, setQueryParams } =
-    usePageFilters({
-      pageFiltersConfig: domainWorkflowsBasicFiltersConfig,
-      pageQueryParamsConfig: domainPageQueryParamsConfig,
-    });
-
   return (
     <styled.HeaderContainer>
       <styled.InputContainer>

src/views/domain-workflows-basic/domain-workflows-basic-filters/domain-workflows-basic-filters.types.ts

@@ -1,3 +1,6 @@
+import type usePageFilters from '@/components/page-filters/hooks/use-page-filters';
 import { type WorkflowStatus } from '@/views/shared/workflow-status-tag/workflow-status-tag.types';
 
 export type WorkflowStatusBasicVisibility = WorkflowStatus | 'ALL_CLOSED';
+
+export type Props = ReturnType<typeof usePageFilters>;

src/views/domain-workflows-basic/domain-workflows-basic-table/__tests__/domain-workflows-basic-table.test.tsx

@@ -185,7 +185,11 @@ function setup({
   const user = userEvent.setup();
 
   const renderResult = render(
-    <DomainWorkflowsBasicTable domain="mock-domain" cluster="mock-cluster" />,
+    <DomainWorkflowsBasicTable
+      domain="mock-domain"
+      cluster="mock-cluster"
+      hasActiveSearchParams={false}
+    />,
     {
       endpointsMocks: [
         {

src/views/domain-workflows-basic/domain-workflows-basic-table/domain-workflows-basic-table.tsx

@@ -4,18 +4,18 @@ import React from 'react';
 import ErrorPanel from '@/components/error-panel/error-panel';
 import PanelSection from '@/components/panel-section/panel-section';
 import SectionLoadingIndicator from '@/components/section-loading-indicator/section-loading-indicator';
-import usePageQueryParams from '@/hooks/use-page-query-params/use-page-query-params';
-import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
 import WorkflowsTable from '@/views/shared/workflows-table/workflows-table';
 
 import useListWorkflowsBasic from '../hooks/use-list-workflows-basic';
 
 import { type Props } from './domain-workflows-basic-table.types';
 import getWorkflowsBasicErrorPanelProps from './helpers/get-workflows-basic-error-panel-props';
 
-export default function DomainWorkflowsBasicTable({ domain, cluster }: Props) {
-  const [queryParams] = usePageQueryParams(domainPageQueryParamsConfig);
-
+export default function DomainWorkflowsBasicTable({
+  domain,
+  cluster,
+  hasActiveSearchParams,
+}: Props) {
   const [
     {
       data,
@@ -36,10 +36,7 @@ export default function DomainWorkflowsBasicTable({ domain, cluster }: Props) {
   if (data.length === 0) {
     const errorPanelProps = getWorkflowsBasicErrorPanelProps({
       error,
-      areSearchParamsAbsent:
-        !queryParams.workflowId &&
-        !queryParams.workflowType &&
-        !queryParams.statusBasic,
+      hasActiveSearchParams,
     });
 
     if (errorPanelProps) {

src/views/domain-workflows-basic/domain-workflows-basic-table/domain-workflows-basic-table.types.ts

@@ -4,6 +4,7 @@ import { type DomainWorkflow } from '@/views/domain-page/domain-page.types';
 export type Props = {
   domain: string;
   cluster: string;
+  hasActiveSearchParams: boolean;
 };
 
 export type DomainWorkflowsBasicTableConfig = Array<

src/views/domain-workflows-basic/domain-workflows-basic-table/helpers/__tests__/get-workflows-basic-error-panel-props.test.ts

@@ -12,7 +12,7 @@ describe(getWorkflowsBasicErrorPanelProps.name, () => {
         error: new UseMergedInfiniteQueriesError('Test error', [
           new RequestError('Something went wrong', '/query1', 500),
         ]),
-        areSearchParamsAbsent: false,
+        hasActiveSearchParams: true,
       })
     ).toEqual({
       message: 'Failed to fetch workflows',
@@ -32,18 +32,18 @@ describe(getWorkflowsBasicErrorPanelProps.name, () => {
             },
           ]),
         ]),
-        areSearchParamsAbsent: false,
+        hasActiveSearchParams: true,
       })
     ).toEqual({
       message: 'Validation error: Incorrect field value',
     });
   });
 
-  it('returns "not found" error panel props when search params are absent', () => {
+  it('returns "not found" error panel props when no filters are active', () => {
     expect(
       getWorkflowsBasicErrorPanelProps({
         error: null,
-        areSearchParamsAbsent: true,
+        hasActiveSearchParams: false,
       })
     ).toEqual({
       message: 'No workflows found for this domain',
@@ -62,7 +62,7 @@ describe(getWorkflowsBasicErrorPanelProps.name, () => {
     expect(
       getWorkflowsBasicErrorPanelProps({
         error: null,
-        areSearchParamsAbsent: false,
+        hasActiveSearchParams: true,
       })
     ).toBeUndefined();
   });

src/views/domain-workflows-basic/domain-workflows-basic-table/helpers/get-workflows-basic-error-panel-props.ts

@@ -6,10 +6,10 @@ import { RequestError } from '@/utils/request/request-error';
 
 export default function getWorkflowsBasicErrorPanelProps({
   error,
-  areSearchParamsAbsent,
+  hasActiveSearchParams,
 }: {
   error: UseMergedInfiniteQueriesError | null;
-  areSearchParamsAbsent: boolean;
+  hasActiveSearchParams: boolean;
 }): ErrorPanelProps | undefined {
   if (error) {
     if (
@@ -44,7 +44,7 @@ export default function getWorkflowsBasicErrorPanelProps({
     };
   }
 
-  if (areSearchParamsAbsent) {
+  if (!hasActiveSearchParams) {
     return {
       message: 'No workflows found for this domain',
       actions: [

src/views/domain-workflows-basic/domain-workflows-basic.tsx

@@ -1,17 +1,38 @@
+'use client';
 import React from 'react';
 
+import usePageFilters from '@/components/page-filters/hooks/use-page-filters';
 import { type DomainPageTabContentProps } from '@/views/domain-page/domain-page-content/domain-page-content.types';
 
+import domainPageQueryParamsConfig from '../domain-page/config/domain-page-query-params.config';
+
+import domainWorkflowsBasicFiltersConfig from './config/domain-workflows-basic-filters.config';
 import DomainWorkflowsBasicFilters from './domain-workflows-basic-filters/domain-workflows-basic-filters';
 import DomainWorkflowsBasicTable from './domain-workflows-basic-table/domain-workflows-basic-table';
 
 export default function DomainWorkflowsBasic(props: DomainPageTabContentProps) {
+  const { resetAllFilters, activeFiltersCount, queryParams, setQueryParams } =
+    usePageFilters({
+      pageFiltersConfig: domainWorkflowsBasicFiltersConfig,
+      pageQueryParamsConfig: domainPageQueryParamsConfig,
+    });
+
   return (
     <>
-      <DomainWorkflowsBasicFilters />
+      <DomainWorkflowsBasicFilters
+        queryParams={queryParams}
+        setQueryParams={setQueryParams}
+        activeFiltersCount={activeFiltersCount}
+        resetAllFilters={resetAllFilters}
+      />
       <DomainWorkflowsBasicTable
         domain={props.domain}
         cluster={props.cluster}
+        hasActiveSearchParams={Boolean(
+          activeFiltersCount > 0 ||
+            queryParams.workflowId ||
+            queryParams.workflowType
+        )}
       />
     </>
   );