[NGO Admin] Fix monitoring observers bugs

web/src/features/filtering/components/ActiveFilters.tsx

@@ -1,6 +1,9 @@
+import { useDataSource } from '@/common/data-source-store';
 import { DateTimeFormat } from '@/common/formats';
+import { DataSources } from '@/common/types';
 import { FilterBadge } from '@/components/ui/badge';
 import { useCurrentElectionRoundStore } from '@/context/election-round.store';
+import { useCoalitionDetails } from '@/features/election-event/hooks/coalition-hooks';
 import { useFormSubmissionsFilters } from '@/features/responses/hooks/form-submissions-queries';
 import {
   mapFormSubmissionFollowUpStatus,
@@ -12,9 +15,6 @@ import { useNavigate } from '@tanstack/react-router';
 import { format } from 'date-fns/format';
 import { FC, useCallback } from 'react';
 import { FILTER_KEY, FILTER_LABEL } from '../filtering-enums';
-import { useDataSource } from '@/common/data-source-store';
-import { useCoalitionDetails } from '@/features/election-event/hooks/coalition-hooks';
-import { DataSources } from '@/common/types';
 
 interface ActiveFilterProps {
   filterId: string;
@@ -50,7 +50,7 @@ const FILTER_LABELS = new Map<string, string>([
   [FILTER_KEY.LocationL3, FILTER_LABEL.LocationL3],
   [FILTER_KEY.LocationL4, FILTER_LABEL.LocationL4],
   [FILTER_KEY.LocationL5, FILTER_LABEL.LocationL5],
-  [FILTER_KEY.FormSubmissionsMonitoringObserverTags, FILTER_LABEL.FormSubmissionsMonitoringObserverTags],
+  [FILTER_KEY.TagsFilter, FILTER_LABEL.TagsFilter],
   [FILTER_KEY.PollingStationNumber, FILTER_LABEL.PollingStationNumber],
   [FILTER_KEY.FormId, FILTER_LABEL.FormId],
   [FILTER_KEY.FormStatusFilter, FILTER_LABEL.FormStatus],
@@ -120,7 +120,8 @@ export const ActiveFilters: FC<ActiveFiltersProps> = ({ queryParams }) => {
         .filter(([filterId, value]) => isNotNilOrWhitespace(value?.toString()))
         .filter(
           ([filterId, value]) =>
-            filterId !== FILTER_KEY.CoalitionMemberId || (dataSource === DataSources.Coalition && filterId === FILTER_KEY.CoalitionMemberId)
+            filterId !== FILTER_KEY.CoalitionMemberId ||
+            (dataSource === DataSources.Coalition && filterId === FILTER_KEY.CoalitionMemberId)
         )
         .map(([filterId, value]) => {
           let key = '';

web/src/features/filtering/filtering-enums.ts

@@ -16,7 +16,7 @@ export const enum FILTER_KEY {
   LocationL4 = 'level4Filter',
   LocationL5 = 'level5Filter',
   PollingStationNumber = 'pollingStationNumberFilter',
-  FormSubmissionsMonitoringObserverTags = 'tagsFilter',
+  TagsFilter = 'tagsFilter',
   ViewBy = 'viewBy',
   Tab = 'tab',
   FormId = 'formId',
@@ -25,10 +25,10 @@ export const enum FILTER_KEY {
   FromDate = 'submissionsFromDate',
   ToDate = 'submissionsToDate',
   SearchText = 'searchText',
-  QuickReportIncidentCategory ='incidentCategory',
-  QuickReportFollowUpStatus ='quickReportFollowUpStatus',
-  HasQuickReports ='hasQuickReports',
-  DataSource ='dataSource',
+  QuickReportIncidentCategory = 'incidentCategory',
+  QuickReportFollowUpStatus = 'quickReportFollowUpStatus',
+  HasQuickReports = 'hasQuickReports',
+  DataSource = 'dataSource',
   CoalitionMemberId = 'coalitionMemberId',
 }
 
@@ -46,15 +46,15 @@ export const enum FILTER_LABEL {
   LocationL4 = 'Location - L4',
   LocationL5 = 'Location - L5',
   PollingStationNumber = 'Polling station number',
-  FormSubmissionsMonitoringObserverTags = 'Observer tags',
+  TagsFilter = 'Observer tags',
   MediaFiles = 'Has attachments',
   FormId = 'Form',
   FormStatus = 'Form status',
   FromDate = 'From date',
   ToDate = 'To Date',
   SearchText = 'Search text',
-  QuickReportIncidentCategory ='Incident category',
-  QuickReportFollowUpStatus ='Quick report follow up status',
-  HasQuickReports ='Has quick reports',
-  CoalitionMemberId = 'NGO'
+  QuickReportIncidentCategory = 'Incident category',
+  QuickReportFollowUpStatus = 'Quick report follow up status',
+  HasQuickReports = 'Has quick reports',
+  CoalitionMemberId = 'NGO',
 }

web/src/features/monitoring-observers/components/EditMonitoringObserver/EditMonitoringObserver.tsx

@@ -17,6 +17,7 @@ import { useNavigate, useRouter } from '@tanstack/react-router';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { monitoringObserversKeys } from '../../hooks/monitoring-observers-queries';
+import { targetedObserversKeys } from '../../hooks/push-messages-queries';
 import { MonitoringObserverStatus, UpdateMonitoringObserverRequest } from '../../models/monitoring-observer';
 import { MonitorObserverBackButton } from '../MonitoringObserverBackButton';
 
@@ -87,6 +88,7 @@ export default function EditObserver() {
       });
       router.invalidate();
       queryClient.invalidateQueries({ queryKey: monitoringObserversKeys.all(electionRoundId) });
+      queryClient.invalidateQueries({ queryKey: targetedObserversKeys.all(electionRoundId) });
 
       navigate({
         to: '/monitoring-observers/view/$monitoringObserverId/$tab',

web/src/features/monitoring-observers/components/MonitoringObserversList/CreateMonitoringObserverDialog.tsx

@@ -13,6 +13,7 @@ import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { monitoringObserversKeys } from '../../hooks/monitoring-observers-queries';
+import { targetedObserversKeys } from '../../hooks/push-messages-queries';
 
 export interface CreateMonitoringObserverDialogProps {
   open: boolean;
@@ -54,6 +55,8 @@ function CreateMonitoringObserverDialog({ open, onOpenChange }: CreateMonitoring
       });
 
       queryClient.invalidateQueries({ queryKey: monitoringObserversKeys.all(electionRoundId) });
+      queryClient.invalidateQueries({ queryKey: targetedObserversKeys.all(electionRoundId) });
+
       form.reset({});
       onOpenChange(false);
     },

web/src/features/monitoring-observers/components/PushMessageForm/PushMessageForm.tsx

@@ -40,9 +40,7 @@ import { targetedMonitoringObserverColDefs } from '../../utils/column-defs';
 
 const createPushMessageSchema = z.object({
   title: z.string().min(1, { message: 'Your message must have a title before sending.' }),
-  messageBody: z
-    .string()
-    .min(1, { message: 'Your message must have a detailed description before sending.' })
+  messageBody: z.string().min(1, { message: 'Your message must have a detailed description before sending.' }),
 });
 
 function PushMessageForm(): FunctionComponent {
@@ -201,7 +199,7 @@ function PushMessageForm(): FunctionComponent {
                     value={searchText}
                     placeholder='Search'
                   />
-                  <MonitoringObserverTagsSelect />
+                  <MonitoringObserverTagsSelect isUsingAlternativeFilteringKey />
                   <MonitoringObserverStatusSelect />
                   <FormTypeFilter />
                   <FormSubmissionsFormFilter />

web/src/features/monitoring-observers/filtering/MonitoringObserverTagsSelect.tsx

@@ -7,13 +7,13 @@ import { useMonitoringObserversTags } from '@/hooks/tags-queries';
 import { FC } from 'react';
 
 interface MonitoringObserverTagsSelectProps {
-  isFilteringFormSubmissions?: boolean;
+  isUsingAlternativeFilteringKey?: boolean;
 }
 
-export const MonitoringObserverTagsSelect: FC<MonitoringObserverTagsSelectProps> = ({ isFilteringFormSubmissions }) => {
-  const COMPONENT_FILTER_KEY = isFilteringFormSubmissions
-    ? FILTER_KEY.FormSubmissionsMonitoringObserverTags
-    : FILTER_KEY.MonitoringObserverTags;
+export const MonitoringObserverTagsSelect: FC<MonitoringObserverTagsSelectProps> = ({
+  isUsingAlternativeFilteringKey,
+}) => {
+  const COMPONENT_FILTER_KEY = isUsingAlternativeFilteringKey ? FILTER_KEY.TagsFilter : FILTER_KEY.MonitoringObserverTags;
 
   const currentElectionRoundId = useCurrentElectionRoundStore((s) => s.currentElectionRoundId);
   const { data: tags } = useMonitoringObserversTags(currentElectionRoundId);

web/src/features/responses/components/FormSubmissionsFiltersByEntry/FormSubmissionsFiltersByEntry.tsx

@@ -1,4 +1,7 @@
+import { useDataSource } from '@/common/data-source-store';
+import { DataSources } from '@/common/types';
 import { PollingStationsFilters } from '@/components/PollingStationsFilters/PollingStationsFilters';
+import { CoalitionMemberFilter } from '@/features/filtering/components/CoalitionMemberFilter';
 import { FilteringContainer } from '@/features/filtering/components/FilteringContainer';
 import { FormTypeFilter } from '@/features/filtering/components/FormTypeFilter';
 import { MonitoringObserverTagsSelect } from '@/features/monitoring-observers/filtering/MonitoringObserverTagsSelect';
@@ -11,9 +14,6 @@ import { FormSubmissionsMediaFilesFilter } from '../../../filtering/components/F
 import { FormSubmissionsQuestionNotesFilter } from '../../../filtering/components/FormSubmissionsQuestionNotesFilter';
 import { FormSubmissionsQuestionsAnsweredFilter } from '../../../filtering/components/FormSubmissionsQuestionsAnsweredFilter';
 import { FormSubmissionsToDateFilter } from '../../../filtering/components/FormSubmissionsToDateFilter';
-import { useDataSource } from '@/common/data-source-store';
-import { DataSources } from '@/common/types';
-import { CoalitionMemberFilter } from '@/features/filtering/components/CoalitionMemberFilter';
 
 export const FormSubmissionsFiltersByEntry: FC = () => {
   const dataSource = useDataSource();
@@ -28,7 +28,7 @@ export const FormSubmissionsFiltersByEntry: FC = () => {
       <FormSubmissionsQuestionsAnsweredFilter />
       <FormSubmissionsQuestionNotesFilter />
       <FormSubmissionsMediaFilesFilter />
-      <MonitoringObserverTagsSelect isFilteringFormSubmissions />
+      <MonitoringObserverTagsSelect isUsingAlternativeFilteringKey />
       <PollingStationsFilters />
       <FormSubmissionsFromDateFilter />
       <FormSubmissionsToDateFilter />

web/src/features/responses/components/FormSubmissionsFiltersByForm/FormSubmissionsFiltersByForm.tsx

@@ -1,4 +1,7 @@
+import { useDataSource } from '@/common/data-source-store';
+import { DataSources } from '@/common/types';
 import { PollingStationsFilters } from '@/components/PollingStationsFilters/PollingStationsFilters';
+import { CoalitionMemberFilter } from '@/features/filtering/components/CoalitionMemberFilter';
 import { FilteringContainer } from '@/features/filtering/components/FilteringContainer';
 import { FormSubmissionsFollowUpFilter } from '@/features/filtering/components/FormSubmissionsFollowUpFilter';
 import { FormSubmissionsFormFilter } from '@/features/filtering/components/FormSubmissionsFormFilter';
@@ -11,9 +14,6 @@ import { FC } from 'react';
 import { FormSubmissionsFlaggedAnswersFilter } from '../../../filtering/components/FormSubmissionsFlaggedAnswersFilter';
 import { FormSubmissionsMediaFilesFilter } from '../../../filtering/components/FormSubmissionsMediaFilesFilter';
 import { FormSubmissionsQuestionNotesFilter } from '../../../filtering/components/FormSubmissionsQuestionNotesFilter';
-import { useDataSource } from '@/common/data-source-store';
-import { DataSources } from '@/common/types';
-import { CoalitionMemberFilter } from '@/features/filtering/components/CoalitionMemberFilter';
 
 export const FormSubmissionsFiltersByForm: FC = () => {
   const dataSource = useDataSource();
@@ -28,7 +28,7 @@ export const FormSubmissionsFiltersByForm: FC = () => {
       <FormSubmissionsQuestionsAnsweredFilter />
       <FormSubmissionsQuestionNotesFilter />
       <FormSubmissionsMediaFilesFilter />
-      <MonitoringObserverTagsSelect isFilteringFormSubmissions />
+      <MonitoringObserverTagsSelect isUsingAlternativeFilteringKey />
       <PollingStationsFilters />
       <FormSubmissionsFromDateFilter />
       <FormSubmissionsToDateFilter />

web/src/features/responses/components/FormSubmissionsFiltersByObserver/FormSubmissionsFiltersByObserver.tsx

@@ -8,12 +8,12 @@ import { FormSubmissionsFollowUpFilter } from '../../../filtering/components/For
 
 export function FormSubmissionsFiltersByObserver(): FunctionComponent {
   const dataSource = useDataSource();
-  
+
   return (
     <FilteringContainer>
       <FormSubmissionsFollowUpFilter />
       {dataSource === DataSources.Coalition ? <CoalitionMemberFilter /> : null}
-      <MonitoringObserverTagsSelect isFilteringFormSubmissions />
+      <MonitoringObserverTagsSelect isUsingAlternativeFilteringKey />
       <FormSubmissionsFlaggedAnswersFilter />
     </FilteringContainer>
   );