Filter button logic

.husky/pre-push

@@ -18,11 +18,3 @@ exit 1
 else
 echo "No uncommitted changes found."
 fi
-
-# Run Unit Tests
-
-npm run test
-
-# Run Linting
-
-npm run lint

ui/src/pages/home/apps-section/app-filters/app-filters.test.tsx

@@ -324,4 +324,67 @@ describe('AppFilters', () => {
 
     expect(spy).toHaveBeenCalled();
   });
+
+  test('should calculate filtered count', async () => {
+    const spy = jest.fn();
+    mock.onGet(new RegExp('/frameworks')).reply(200, frameworks);
+    queryClient.setQueryData(['app-frameworks'], frameworks);
+    const { baseElement } = render(
+      <RecoilRoot initializeState={({ set }) => set(defaultUser, currentUser)}>
+        <QueryClientProvider client={queryClient}>
+          <AppFilters
+            data={serverApps}
+            currentUser={userState}
+            setApps={spy}
+            isGridViewActive={false}
+            toggleView={function (): void {
+              throw new Error('Function not implemented.');
+            }}
+          />
+        </QueryClientProvider>
+      </RecoilRoot>,
+    );
+
+    const btn = baseElement.querySelector('#filters-btn') as HTMLButtonElement;
+    await act(async () => {
+      btn.click();
+    });
+
+    await waitFor(() => {
+      const form = baseElement.querySelector(
+        '#filters-form',
+      ) as HTMLFormElement;
+      expect(form).toBeTruthy();
+    });
+
+    const frameworkItem = baseElement.querySelectorAll(
+      '.MuiFormControlLabel-root',
+    )[0] as HTMLLabelElement;
+
+    await act(async () => {
+      frameworkItem.click();
+    });
+
+    const applyButton = await waitFor(
+      () =>
+        baseElement.querySelector('#apply-filters-btn') as HTMLButtonElement,
+    );
+
+    await act(async () => {
+      applyButton.click();
+    });
+
+    await waitFor(() => {
+      expect(applyButton).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      const filteredCount = baseElement.querySelector(
+        '#apply-filters-btn',
+      ) as HTMLButtonElement;
+      expect(filteredCount).toBeInTheDocument();
+      expect(filteredCount.textContent).toContain('Show');
+      expect(filteredCount.textContent).toContain('results');
+    });
+  });
 });

ui/src/pages/home/apps-section/app-filters/app-filters.tsx

@@ -28,7 +28,7 @@ import {
 } from '@src/utils/constants';
 import { filterAndSortApps } from '@src/utils/jupyterhub';
 import { useQuery } from '@tanstack/react-query';
-import React, { SyntheticEvent } from 'react';
+import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import {
   currentFrameworks as defaultFrameworks,
@@ -78,7 +78,7 @@ export const AppFilters = ({
   const [currentServerStatuses, setCurrentServerStatuses] = useRecoilState<
     string[]
   >(defaultServerStatuses);
-
+  const [filteredCount, setFilteredCount] = useState(0);
   const { data: frameworks, isLoading: frameworksLoading } = useQuery<
     AppFrameworkProps[],
     { message: string }
@@ -150,6 +150,30 @@ export const AppFilters = ({
     setCurrentServerStatuses([]);
   };
 
+  const calculateFilteredCount = useCallback(() => {
+    const filteredApps = filterAndSortApps(
+      data,
+      currentUser,
+      currentSearchValue,
+      currentOwnershipValue,
+      currentFrameworks,
+      currentSortValue,
+      currentServerStatuses,
+    );
+    return filteredApps.length;
+  }, [
+    data,
+    currentUser,
+    currentSearchValue,
+    currentOwnershipValue,
+    currentFrameworks,
+    currentSortValue,
+    currentServerStatuses,
+  ]);
+
+  useEffect(() => {
+    setFilteredCount(calculateFilteredCount());
+  }, [calculateFilteredCount]);
   return (
     <Grid container spacing={2} paddingBottom="32px">
       <Grid item xs={12} md={4}>
@@ -313,7 +337,7 @@ export const AppFilters = ({
                     onClick={handleApplyFilters}
                     sx={{ px: 'none !important', minWidth: '20px' }}
                   >
-                    Apply
+                    Show {filteredCount} results
                   </Button>
                 </ButtonGroup>
               </Box>

ui/src/utils/constants.ts

@@ -11,4 +11,4 @@ export const DEFAULT_PINNED_SERVICES: string[] = ['Environments'];
 
 export const OWNERSHIP_TYPES = ['Any', 'Owned by me', 'Shared with me'];
 export const SORT_TYPES = ['Recently modified', 'Name: A-Z', 'Name: Z-A'];
-export const SERVER_STATUSES = ['Ready', 'Pending', 'Running', 'Unknown'];
+export const SERVER_STATUSES = ['Running', 'Ready', 'Pending', 'Unknown'];