Merge pull request #4899 from dfe-analytical-services/EES-4995-type-f…

…ilter EES-4995 only show type filter if there are api data sets
dfe-analytical-services · May 30, 2024 · 324d83c · 324d83c
2 parents b08c2bb + 1ff1189
commit 324d83c
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 27 deletions.
diff --git a/src/explore-education-statistics-frontend/src/modules/data-catalogue/DataCataloguePage.tsx b/src/explore-education-statistics-frontend/src/modules/data-catalogue/DataCataloguePage.tsx
@@ -16,6 +16,7 @@ import { QueryClient, dehydrate } from '@tanstack/react-query';
 import publicationQueries from '@frontend/queries/publicationQueries';
 
 interface Props {
+  showTypeFilter?: boolean;
   releases?: ReleaseSummary[];
   selectedPublication?: PublicationTreeSummary;
   selectedRelease?: ReleaseSummary;
@@ -25,6 +26,7 @@ interface Props {
 }
 
 const DataCataloguePage: NextPage<Props> = ({
+  showTypeFilter,
   releases = [],
   selectedPublication,
   selectedRelease,
@@ -34,7 +36,7 @@ const DataCataloguePage: NextPage<Props> = ({
 }) => {
   // TO DO EES-4781 - remove old version
   if (newDesign) {
-    return <DataCataloguePageNew />;
+    return <DataCataloguePageNew showTypeFilter={showTypeFilter} />;
   }
   return (
     <DataCataloguePageCurrent
@@ -54,6 +56,8 @@ export const getServerSideProps: GetServerSideProps<Props> = async context => {
     newDesign,
   } = context.query as Dictionary<string>;
 
+  let showTypeFilter = context.query.dataSetType === 'api';
+
   const queryClient = new QueryClient();
 
   if (newDesign) {
@@ -63,6 +67,13 @@ export const getServerSideProps: GetServerSideProps<Props> = async context => {
         publicationFilter: 'DataCatalogue',
       }),
     );
+
+    if (!showTypeFilter) {
+      const apiDataSets = await queryClient.fetchQuery(
+        dataSetFileQueries.list({ dataSetType: 'api' }),
+      );
+      showTypeFilter = !!apiDataSets.results.length;
+    }
   }
 
   const themes = newDesign
@@ -99,6 +110,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async context => {
   }
 
   const props: Props = {
+    showTypeFilter,
     releases,
     subjects,
     themes,

diff --git a/...explore-education-statistics-frontend/src/modules/data-catalogue/DataCataloguePageNew.tsx b/...explore-education-statistics-frontend/src/modules/data-catalogue/DataCataloguePageNew.tsx
@@ -55,7 +55,11 @@ export interface DataCataloguePageQuery {
   themeId?: string;
 }
 
-export default function DataCataloguePageNew() {
+interface Props {
+  showTypeFilter?: boolean;
+}
+
+export default function DataCataloguePageNew({ showTypeFilter }: Props) {
   const router = useRouter();
   const queryClient = useQueryClient();
   const { isMedia: isMobileMedia } = useMobileMedia();
@@ -318,6 +322,7 @@ export default function DataCataloguePageNew() {
                 releaseId={releaseId}
                 releases={releases}
                 showClearFiltersButton={!isMobileMedia && isFiltered}
+                showTypeFilter={showTypeFilter}
                 themeId={themeId}
                 themes={themes}
                 onChange={handleChangeFilter}
@@ -420,6 +425,7 @@ export default function DataCataloguePageNew() {
                   publications={publications}
                   releaseId={releaseId}
                   releases={releases}
+                  showTypeFilter={showTypeFilter}
                   themeId={themeId}
                   themes={themes}
                   onChange={handleChangeFilter}

diff --git a/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/Filters.tsx b/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/Filters.tsx
@@ -1,3 +1,4 @@
+import ButtonText from '@common/components/ButtonText';
 import {
   PublicationTreeSummary,
   ReleaseSummary,
@@ -16,7 +17,7 @@ import {
 } from '@frontend/services/dataSetFileService';
 import styles from '@frontend/modules/data-catalogue/components/Filters.module.scss';
 import React from 'react';
-import ButtonText from '@common/components/ButtonText';
+import classNames from 'classnames';
 
 const formId = 'filters-form';
 
@@ -28,6 +29,7 @@ interface Props {
   releaseId?: string;
   releases?: ReleaseSummary[];
   showClearFiltersButton?: boolean;
+  showTypeFilter?: boolean;
   themeId?: string;
   themes: Theme[];
   onChange: ({
@@ -48,6 +50,7 @@ export default function Filters({
   releaseId,
   releases = [],
   showClearFiltersButton,
+  showTypeFilter,
   themeId,
   themes,
   onChange,
@@ -135,31 +138,37 @@ export default function Filters({
         </FormGroup>
 
         {showClearFiltersButton && (
-          <ButtonText onClick={onClearFilters}>Clear filters</ButtonText>
+          <ButtonText
+            className={classNames({ 'govuk-!-margin-top-4': !showTypeFilter })}
+            onClick={onClearFilters}
+          >
+            Clear filters
+          </ButtonText>
+        )}
+        {showTypeFilter && (
+          <FormRadioGroup<DataSetType>
+            formGroupClass="dfe-border-top govuk-!-padding-top-4 govuk-!-margin-top-2"
+            id={`${formId}-dataSetType`}
+            legend="Type of data"
+            legendSize="s"
+            name="dataSetType"
+            options={[
+              { label: 'All data', value: 'all' },
+              {
+                label: 'API data sets only',
+                value: 'api',
+              },
+            ]}
+            small
+            value={dataSetType}
+            onChange={e => {
+              onChange({
+                filterType: 'dataSetType',
+                nextValue: e.target.value,
+              });
+            }}
+          />
         )}
-
-        <FormRadioGroup<DataSetType>
-          formGroupClass="dfe-border-top govuk-!-padding-top-4 govuk-!-margin-top-2"
-          id={`${formId}-dataSetType`}
-          legend="Type of data"
-          legendSize="s"
-          name="dataSetType"
-          options={[
-            { label: 'All data', value: 'all' },
-            {
-              label: 'API data sets only',
-              value: 'api',
-            },
-          ]}
-          small
-          value={dataSetType}
-          onChange={e => {
-            onChange({
-              filterType: 'dataSetType',
-              nextValue: e.target.value,
-            });
-          }}
-        />
       </FormFieldset>
 
       <Button className="dfe-js-hidden" type="submit">

diff --git a/...tion-statistics-frontend/src/modules/data-catalogue/components/__tests__/Filters.test.tsx b/...tion-statistics-frontend/src/modules/data-catalogue/components/__tests__/Filters.test.tsx
@@ -51,6 +51,10 @@ describe('Filters', () => {
     expect(releases[1]).toHaveTextContent('All releases');
     expect(releases[1]).toHaveValue('all');
     expect(releases[1].selected).toBe(false);
+  });
+
+  test('renders the data set type filter when showTypeFilter is true', async () => {
+    render(<Filters showTypeFilter themes={testThemes} onChange={noop} />);
 
     const apiFilter = within(
       screen.getByRole('group', {
@@ -61,6 +65,14 @@ describe('Filters', () => {
     expect(apiFilter.getByLabelText('API data sets only')).not.toBeChecked();
   });
 
+  test('does not render the data set type filter when showTypeFilter is false', async () => {
+    render(<Filters themes={testThemes} onChange={noop} />);
+
+    expect(
+      screen.queryByRole('group', { name: 'Type of data' }),
+    ).not.toBeInTheDocument();
+  });
+
   test('populates the release filter with all & releases when there is a publicationId', () => {
     render(
       <Filters
@@ -170,6 +182,7 @@ describe('Filters', () => {
       <Filters
         publicationId="publication-2"
         releases={testReleases}
+        showTypeFilter
         themes={testThemes}
         themeId="theme-2"
         onChange={handleChange}