feat: adds dismiss health event (#5863)

Co-authored-by: Zaimwa9 <wadii.zaim@flagsmith.com>

Author: tiagoapolo

frontend/common/services/useHealthEvents.ts

@@ -6,6 +6,17 @@ export const healthService = service
   .enhanceEndpoints({ addTagTypes: ['HealthEvents'] })
   .injectEndpoints({
     endpoints: (builder) => ({
+      dismissHealthEvent: builder.mutation<
+        Res['healthEvents'],
+        Req['dismissHealthEvent']
+      >({
+        invalidatesTags: [{ id: 'LIST', type: 'HealthEvents' }],
+        query: (query: Req['dismissHealthEvent']) => ({
+          method: 'POST',
+          url: `projects/${query.projectId}/feature-health/events/${query.eventId}/dismiss/`,
+        }),
+      }),
+
       getHealthEvents: builder.query<
         Res['healthEvents'],
         Req['getHealthEvents']
@@ -31,9 +42,22 @@ export async function getHealthEvents(
   )
 }
 
+export async function dismissHealthEvent(
+  store: any,
+  data: Req['dismissHealthEvent'],
+  options?: Parameters<
+    typeof healthService.endpoints.dismissHealthEvent.initiate
+  >[1],
+) {
+  return store.dispatch(
+    healthService.endpoints.dismissHealthEvent.initiate(data, options),
+  )
+}
+
 // END OF FUNCTION_EXPORTS
 
 export const {
+  useDismissHealthEventMutation,
   useGetHealthEventsQuery,
   // END OF EXPORTS
 } = healthService

frontend/common/types/requests.ts

@@ -192,6 +192,7 @@ export type Req = {
   getAvailablePermissions: { level: PermissionLevel }
   getTag: { id: string }
   getHealthEvents: { projectId: number | string }
+  dismissHealthEvent: { projectId: number | string; eventId: number }
   getHealthProviders: { projectId: number }
   createHealthProvider: { projectId: number; name: string }
   deleteHealthProvider: { projectId: number; name: string }

frontend/common/types/responses.ts

@@ -719,6 +719,7 @@ export type HealthEventReason = {
 }
 
 export type HealthEvent = {
+  id: number
   created_at: string
   environment: number
   feature: number

frontend/web/components/modals/CreateFlag.js

@@ -1934,6 +1934,7 @@ const CreateFlag = class extends Component {
                                     >
                                       <FeatureHealthTabContent
                                         projectId={projectFlag.project}
+                                        environmentId={this.props.environmentId}
                                       />
                                     </TabItem>
                                   )}

frontend/web/components/modals/FeatureHealthTabContent.tsx

@@ -1,7 +1,10 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Icon from 'components/Icon'
 import Constants from 'common/constants'
-import { useGetHealthEventsQuery } from 'common/services/useHealthEvents'
+import {
+  useDismissHealthEventMutation,
+  useGetHealthEventsQuery,
+} from 'common/services/useHealthEvents'
 import Button from 'components/base/forms/Button'
 import moment from 'moment'
 import Collapse from '@material-ui/core/Collapse'
@@ -11,9 +14,11 @@ import {
   FeatureHealthEventReasonTextBlock,
   FeatureHealthEventReasonUrlBlock,
 } from 'common/types/responses'
+import AppActions from 'common/dispatcher/app-actions'
 
 type FeatureHealthTabContentProps = {
   projectId: number
+  environmentId: number
 }
 
 const EventTextBlocks = ({
@@ -106,13 +111,34 @@ const EventURLBlocks = ({
 }
 
 const FeatureHealthTabContent: React.FC<FeatureHealthTabContentProps> = ({
+  environmentId,
   projectId,
 }) => {
   const { data: healthEvents, isLoading } = useGetHealthEventsQuery(
     { projectId: String(projectId) },
     { skip: !projectId },
   )
 
+  const [dismissHealthEvent, { error: dismissError, isSuccess: isDismissed }] =
+    useDismissHealthEventMutation()
+
+  useEffect(() => {
+    if (isDismissed) {
+      toast('Event dismissed')
+      AppActions.refreshFeatures(projectId, environmentId)
+    }
+  }, [isDismissed, projectId, environmentId])
+
+  useEffect(() => {
+    if (dismissError) {
+      toast('Failed to dismiss event', 'danger')
+    }
+  }, [dismissError])
+
+  const handleDismiss = (eventId: number) => {
+    dismissHealthEvent({ eventId, projectId })
+  }
+
   if (isLoading) {
     return (
       <div className='text-center'>
@@ -143,13 +169,31 @@ const FeatureHealthTabContent: React.FC<FeatureHealthTabContentProps> = ({
                   className='ms-1 mr-1'
                   icon={warning}
                 />
-                <h6 className='mb-0'>{event.provider_name} Provider</h6>
+                <div>
+                  <Row>
+                    <h6 className='mb-0'>{event.provider_name} Provider</h6>
+                    <div className='ml-2'>
+                      <Tooltip title={moment(event.created_at).fromNow()}>
+                        {moment(event.created_at).format('Do MMM YYYY HH:mma')}
+                      </Tooltip>
+                    </div>
+                  </Row>
+                </div>
               </div>
-              <div>
-                <Tooltip title={moment(event.created_at).fromNow()}>
-                  {moment(event.created_at).format('Do MMM YYYY HH:mma')}
+              <Row>
+                <Button
+                  className='mr-1'
+                  size='xSmall'
+                  theme='secondary'
+                  onClick={() => handleDismiss(event.id)}
+                >
+                  Dismiss
+                </Button>
+                <Tooltip title={<Icon width={18} name='info-outlined' />}>
+                  When dismissed, this event will no longer be shown in the
+                  Unhealthy Events list.
                 </Tooltip>
-              </div>
+              </Row>
             </div>
             <div className='d-flex' style={{ gap: 96 }}>
               <EventTextBlocks textBlocks={event?.reason?.text_blocks} />