Skip to content

Commit

Permalink
Filter button logic (nebari-dev#337)
Browse files Browse the repository at this point in the history
  • Loading branch information
kildre authored Jun 13, 2024
1 parent 5e0773c commit e629e70
Show file tree
Hide file tree
Showing 5 changed files with 121 additions and 42 deletions.
8 changes: 0 additions & 8 deletions .husky/pre-push
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,3 @@ exit 1
else
echo "No uncommitted changes found."
fi

# Run Unit Tests

npm run test

# Run Linting

npm run lint
60 changes: 30 additions & 30 deletions jhub_apps/static/js/index.js

Large diffs are not rendered by default.

63 changes: 63 additions & 0 deletions ui/src/pages/home/apps-section/app-filters/app-filters.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});
});
30 changes: 27 additions & 3 deletions ui/src/pages/home/apps-section/app-filters/app-filters.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 }
Expand Down Expand Up @@ -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}>
Expand Down Expand Up @@ -313,7 +337,7 @@ export const AppFilters = ({
onClick={handleApplyFilters}
sx={{ px: 'none !important', minWidth: '20px' }}
>
Apply
Show {filteredCount} results
</Button>
</ButtonGroup>
</Box>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/utils/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'];

0 comments on commit e629e70

Please sign in to comment.