[To Main / DESENG-580] Serialize data for compatibility with new Axios version

CHANGELOG.MD

@@ -1,5 +1,9 @@
 ## April 09, 2024
 
+- **Bugfix**: Stop Axios from trying to be a smarty pants and sending data in a format Flask doesn't understand
+  - This was preventing the filtering feature from working
+  - Directly serialize any metadata filters before the request to avoid Axios's new nested object serialization
+  - Deserialize it again on the Flask side
 - **Task**: CSS Selector specificity [🎟️ DESENG-577](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-577)
   - Replace the `!important` flag with more specific CSS selectors, specifically within dropdowns,
     to ensure that the correct styles are applied, and that states we have not yet designed for

met-api/src/met_api/resources/engagement.py

@@ -85,9 +85,12 @@ def get():
             if external_user_id is None:
                 exclude_internal = True
 
-            metadata = args.getlist('metadata[]')
-            if metadata:
-                metadata = [json.loads(m) for m in metadata]
+            if metadata := args.get('metadata', []):
+                metadata = json.loads(metadata)
+                if not isinstance(metadata, list) or not all(isinstance(item, dict) for item in metadata):
+                    # if metadata is not a list of dictionaries, it is in the wrong format.
+                    # blank it to avoid any issues.
+                    metadata = []
 
             search_options = {
                 'search_text': args.get('search_text', '', type=str),

met-api/tests/unit/api/test_engagement.py

@@ -558,47 +558,46 @@ def test_get_engagements_metadata_match_all(client, session):  # pylint:disable=
     })
     # pass in pagination options and do the count
     metadata_1 = json.dumps(
-        {
+        [{
             'name': 'Category',
             'values': ['Category value'],
             'filter_type': 'chips_all',
             'taxon_id': taxon.id
-        },
+        }],
         separators=(',', ':')  # Remove spaces between keys and values
     )
 
-    print(f'/api/engagements/?metadata[]={metadata_1}')
-    rv = client.get(f'/api/engagements/?metadata[]={metadata_1}')
+    rv = client.get(f'/api/engagements/?metadata={metadata_1}')
 
     assert rv.status_code == 200
     assert rv.json.get('total') == 10
 
     metadata_2 = json.dumps(
-        {
+        [{
             'name': 'Category',
             'values': ['Different'],
             'filter_type': 'chips_all',
             'taxon_id': taxon.id
-        },
+        }],
         separators=(',', ':')  # Remove spaces between keys and values
     )
 
-    rv = client.get(f'/api/engagements/?metadata[]={metadata_2}')
+    rv = client.get(f'/api/engagements/?metadata={metadata_2}')
     assert rv.status_code == 200
     assert rv.json.get('total') == 1
 
     metadata_3 = json.dumps(
-        {
+        [{
             'name': 'Category',
             'values': ['Category value', 'Different'],
             'filter_type': 'chips_all',
             'taxon_id': taxon.id
-        },
+        }],
         separators=(',', ':')  # Remove spaces between keys and values
     )
 
     rv = client.get(
-        f'/api/engagements/?metadata[]={metadata_3}')
+        f'/api/engagements/?metadata={metadata_3}')
     assert rv.status_code == 200
     # the filter should only return the engagement with both values
     assert rv.json.get('total') == 1
@@ -633,47 +632,46 @@ def test_get_engagements_metadata_match_any(client, session):  # pylint:disable=
     })
     # pass in pagination options and do the count
     metadata_1 = json.dumps(
-        {
+        [{
             'name': 'Category',
             'values': ['Category value'],
             'filter_type': 'chips_any',
             'taxon_id': taxon.id
-        },
+        }],
         separators=(',', ':')  # Remove spaces between keys and values
     )
 
-    print(f'/api/engagements/?metadata[]={metadata_1}')
-    rv = client.get(f'/api/engagements/?metadata[]={metadata_1}')
+    rv = client.get(f'/api/engagements/?metadata={metadata_1}')
 
     assert rv.status_code == 200
     assert rv.json.get('total') == 10
 
     metadata_2 = json.dumps(
-        {
+        [{
             'name': 'Category',
             'values': ['Different'],
             'filter_type': 'chips_any',
             'taxon_id': taxon.id
-        },
+        }],
         separators=(',', ':')  # Remove spaces between keys and values
     )
 
-    rv = client.get(f'/api/engagements/?metadata[]={metadata_2}')
+    rv = client.get(f'/api/engagements/?metadata={metadata_2}')
     assert rv.status_code == 200
     assert rv.json.get('total') == 1
 
     metadata_3 = json.dumps(
-        {
+        [{
             'name': 'Category',
             'values': ['Category value', 'Different'],
             'filter_type': 'chips_any',
             'taxon_id': taxon.id
-        },
+        }],
         separators=(',', ':')  # Remove spaces between keys and values
     )
 
     rv = client.get(
-        f'/api/engagements/?metadata[]={metadata_3}')
+        f'/api/engagements/?metadata={metadata_3}')
     assert rv.status_code == 200
     # the filter should return the engagements with either value
     assert rv.json.get('total') == 10

met-web/src/components/landing/LandingContext.tsx

@@ -75,7 +75,7 @@ export const LandingContextProvider = ({ children }: { children: JSX.Element | J
                 include_banner_url: true,
                 engagement_status: status,
                 search_text: name,
-                metadata: searchFilters.metadata,
+                metadata: JSON.stringify(searchFilters.metadata),
             });
             setEngagements(loadedEngagements.items);
             setTotalEngagements(loadedEngagements.total);

met-web/src/services/engagementService/index.ts

@@ -6,7 +6,6 @@ import { PatchEngagementRequest, PostEngagementRequest, PutEngagementRequest } f
 import Endpoints from 'apiManager/endpoints';
 import { replaceUrl } from 'helper';
 import { Page } from 'services/type';
-import { MetadataFilter } from 'components/metadataManagement/types';
 
 export const fetchAll = async (dispatch: Dispatch<AnyAction>): Promise<Engagement[]> => {
     const responseData = await http.GetRequest<Engagement[]>(Endpoints.Engagement.GET_LIST);
@@ -28,7 +27,7 @@ interface GetEngagementsParams {
     published_to_date?: string;
     include_banner_url?: boolean;
     has_team_access?: boolean;
-    metadata?: MetadataFilter[];
+    metadata?: string;
 }
 export const getEngagements = async (params: GetEngagementsParams = {}): Promise<Page<Engagement>> => {
     const responseData = await http.GetRequest<Page<Engagement>>(Endpoints.Engagement.GET_LIST, params);