Support action 'SHOW' and 'ENABLE' conditionals (#11132)

* add conditionals schema def

* progress with backend conditional validation

* minor lint fix

* implement conditional check for actions

* move custom action config to events backend only

* remove import

* add action hidden conditional check

* fix hiding of custom actions

* remove unused action config definitions

* remove unused action config schemas, add conditional effects to all action types

* minor refactor

* fix lint issue

* use shorthand

* minor refactor

* add back missing config

* fix hook issue

* feat: add flags conditional (#11168)

* feat: add flags conditional

* fix: amend export of new package

* refactor and support array of flags

* add support for status conditional

* fix lint error

* fix import

---------

Co-authored-by: Nil20 <[email protected]>
Co-authored-by: Cihan Bebek <[email protected]>

---------

Co-authored-by: Md. Ashikul Alam <[email protected]>
Co-authored-by: Nil20 <[email protected]>

Author: 3 people

packages/client/src/v2-events/features/workqueues/EventOverview/EventOverview.tsx

@@ -93,7 +93,7 @@ function EventOverviewFull({ event }: { event: EventDocument }) {
       <EventSummary
         event={flattenedEventIndex}
         eventConfiguration={eventConfiguration}
-        flags={flags}
+        eventIndex={eventIndex}
       />
     </Content>
   )
@@ -148,7 +148,7 @@ function EventOverviewProtected({ eventIndex }: { eventIndex: EventIndex }) {
         hideSecuredFields
         event={flattenedEventIndex}
         eventConfiguration={eventConfiguration}
-        flags={flags}
+        eventIndex={eventIndex}
       />
     </Content>
   )

packages/client/src/v2-events/features/workqueues/EventOverview/components/EventSummary.tsx

@@ -16,7 +16,8 @@ import {
   getDeclarationFields,
   areConditionsMet,
   getMixedPath,
-  Flag
+  Flag,
+  EventIndex
 } from '@opencrvs/commons/client'
 import { FieldValue } from '@opencrvs/commons/client'
 import { useIntlFormatMessageWithFlattenedParams } from '@client/v2-events/messages/utils'
@@ -115,17 +116,17 @@ export const summaryMessages = messages
 export function EventSummary({
   event,
   eventConfiguration,
-  flags,
+  eventIndex,
   hideSecuredFields = false
 }: {
   event: Record<string, FieldValue>
   eventConfiguration: EventConfig
-  flags: Flag[]
+  eventIndex: EventIndex
   hideSecuredFields?: boolean
 }) {
   const intl = useIntlFormatMessageWithFlattenedParams()
   const validationContext = useValidatorContext()
-  const flagLabels = useFlagLabelsString(eventConfiguration, flags)
+  const flagLabels = useFlagLabelsString(eventConfiguration, eventIndex.flags)
   const { summary, label: eventLabelMessage } = eventConfiguration
   const declarationFields = getDeclarationFields(eventConfiguration)
   const securedFields = declarationFields
@@ -135,7 +136,12 @@ export function EventSummary({
   const configuredFields = summary.fields.map((field) => {
     if (
       field.conditionals &&
-      !areConditionsMet(field.conditionals, event, validationContext)
+      !areConditionsMet(
+        field.conditionals,
+        event,
+        validationContext,
+        eventIndex
+      )
     ) {
       return null
     }

packages/client/src/v2-events/features/workqueues/EventOverview/components/useAllowedActionConfigurations.tsx

@@ -30,7 +30,12 @@ import {
   configurableEventScopeAllowed,
   ITokenPayload,
   ActionTypes,
-  CustomActionConfig
+  CustomActionConfig,
+  isActionEnabled,
+  isActionVisible,
+  getActionConfig,
+  ValidatorContext,
+  EventConfig
 } from '@opencrvs/commons/client'
 import { IconProps } from '@opencrvs/components/src/Icon'
 import { useEvents } from '@client/v2-events/features/events/useEvents/useEvents'
@@ -55,6 +60,7 @@ import {
   useCustomActionModal
 } from '@client/v2-events/features/events/actions/quick-actions/useQuickActionModal'
 import { useRejectionModal } from '@client/v2-events/features/events/actions/reject/useRejectionModal'
+import { useValidatorContext } from '@client/v2-events/hooks/useValidatorContext'
 
 const STATUSES_THAT_CAN_BE_ASSIGNED: EventStatus[] = [
   EventStatus.enum.NOTIFIED,
@@ -182,6 +188,7 @@ interface ActionConfig {
   ctaLabel?: TranslationConfig
   disabled?: boolean
   hidden?: boolean
+  customActionType?: string
 }
 
 type ActionMenuActionType = WorkqueueActionType | ClientSpecificAction
@@ -555,8 +562,6 @@ function useCustomActionConfigs(
   const scopes = useSelector(getScope) ?? []
   const { eventConfiguration } = useEventConfiguration(event.type)
   const { customActionModal, onCustomAction } = useCustomActionModal(event)
-
-  // @TODO: Could we share these with the useViewableActionConfigurations() function?
   const { findFromCache } = useEvents().getEvent
   const isDownloaded = Boolean(findFromCache(event.id).data)
   const assignmentStatus = getAssignmentStatus(event, authentication.sub)
@@ -577,7 +582,8 @@ function useCustomActionConfigs(
           onCustomAction(action, workqueue),
         disabled: !isDownloadedAndAssignedToUser,
         hidden: false,
-        type: ActionType.CUSTOM
+        type: ActionType.CUSTOM,
+        customActionType: action.customActionType
       }))
   }, [eventConfiguration, onCustomAction, isDownloadedAndAssignedToUser])
 
@@ -597,6 +603,39 @@ function useCustomActionConfigs(
   return { customActionModal, customActionConfigs }
 }
 
+/** Actions might have configured SHOW or ENABLE conditionals. Let's apply their effects here. */
+function applyActionConditionalEffects({
+  event,
+  action,
+  validatorContext,
+  eventConfiguration
+}: {
+  event: EventIndex
+  action: ActionMenuItem
+  validatorContext: ValidatorContext
+  eventConfiguration: EventConfig
+}) {
+  const actionConfig = getActionConfig({
+    eventConfiguration,
+    actionType: action.type as ActionType,
+    customActionType:
+      'customActionType' in action ? action.customActionType : undefined
+  })
+
+  if (!actionConfig || !actionConfig.conditionals) {
+    return action
+  }
+
+  const hidden = !isActionVisible(actionConfig, event, validatorContext)
+  const disabled = !isActionEnabled(actionConfig, event, validatorContext)
+
+  return {
+    ...action,
+    hidden: action.hidden || hidden,
+    disabled: action.disabled || disabled
+  }
+}
+
 /**
  *
  * NOTE: In principle, you should never add new business rules to the `useAction` hook alone. All the actions are validated by the server and their order is enforced.
@@ -611,6 +650,8 @@ export function useAllowedActionConfigurations(
   const isPending = event.flags.some((flag) => flag.endsWith(':requested'))
   const { isActionAllowed } = useUserAllowedActions(event.type)
   const drafts = useDrafts()
+  const validatorContext = useValidatorContext()
+  const { eventConfiguration } = useEventConfiguration(event.type)
 
   const openDraft = drafts
     .getAllRemoteDrafts()
@@ -645,14 +686,22 @@ export function useAllowedActionConfigurations(
     .filter((action) => isActionAllowed(action))
     // We need to transform data and filter out hidden actions to ensure hasOnlyMetaAction receives the correct values.
     .map((a) => ({ ...config[a], type: a }))
-    .filter((a: ActionConfig) => !a.hidden)
 
   const { customActionModal, customActionConfigs } = useCustomActionConfigs(
     event,
     authentication
   )
 
   const allActionConfigs = [...allowedActionConfigs, ...customActionConfigs]
+    .map((action) =>
+      applyActionConditionalEffects({
+        event,
+        action,
+        validatorContext,
+        eventConfiguration
+      })
+    )
+    .filter((a: ActionConfig) => !a.hidden)
 
   // Check if the user can perform any action other than ASSIGN, or UNASSIGN
   const hasOnlyMetaActions = allActionConfigs.every(({ type }) =>

packages/commons/src/conditionals/conditionals.test.ts

@@ -18,7 +18,10 @@ import {
   ConditionalParameters,
   UserConditionalParameters,
   EventConditionalParameters,
-  FormConditionalParameters
+  FormConditionalParameters,
+  EventStateConditionalParameters,
+  flag,
+  status
 } from './conditionals'
 import { formatISO } from 'date-fns'
 import { SCOPES } from '../scopes'
@@ -28,6 +31,7 @@ import { field } from '../events/field'
 import { event } from '../events/event'
 import { TokenUserType } from '../authentication'
 import { UUID } from '../uuid'
+import { EventStatus, InherentFlags } from '../client'
 
 /*  eslint-disable max-lines */
 
@@ -1018,6 +1022,73 @@ describe('"user" conditionals', () => {
   })
 })
 
+describe('"flag" conditionals', () => {
+  it('validates "flag()" conditional', () => {
+    const params = {
+      $flags: [InherentFlags.CORRECTION_REQUESTED],
+      $status: EventStatus.enum.REGISTERED,
+      $now: formatISO(new Date(), { representation: 'date' }),
+      $online: true
+    } satisfies EventStateConditionalParameters
+
+    expect(validate(flag(InherentFlags.INCOMPLETE), params)).toBe(false)
+    expect(validate(flag(InherentFlags.CORRECTION_REQUESTED), params)).toBe(
+      true
+    )
+  })
+
+  it('validation fails if flags array is empty', () => {
+    const params = {
+      $flags: [],
+      $status: EventStatus.enum.REGISTERED,
+      $now: formatISO(new Date(), { representation: 'date' }),
+      $online: true
+    } satisfies EventStateConditionalParameters
+
+    expect(validate(flag(InherentFlags.CORRECTION_REQUESTED), params)).toBe(
+      false
+    )
+  })
+
+  it('validation fails if params dont include flags', () => {
+    const params = {
+      $status: EventStatus.enum.REGISTERED,
+      $now: formatISO(new Date(), { representation: 'date' }),
+      $online: true
+    }
+
+    // @ts-expect-error testing missing flags param
+    expect(validate(flag(InherentFlags.CORRECTION_REQUESTED), params)).toBe(
+      false
+    )
+  })
+})
+
+describe('"status" conditionals', () => {
+  it('validates "status()" conditional', () => {
+    const params = {
+      $flags: [],
+      $status: EventStatus.enum.REGISTERED,
+      $now: formatISO(new Date(), { representation: 'date' }),
+      $online: true
+    } satisfies EventStateConditionalParameters
+
+    expect(validate(status('VALIDATED'), params)).toBe(false)
+    expect(validate(status('REGISTERED'), params)).toBe(true)
+  })
+
+  it('validation fails if params dont include status', () => {
+    const params = {
+      $flags: [],
+      $now: formatISO(new Date(), { representation: 'date' }),
+      $online: true
+    }
+
+    // @ts-expect-error testing missing status param
+    expect(validate(status('REGISTERED'), params)).toBe(false)
+  })
+})
+
 describe('"event" conditionals', () => {
   it('validates "event.hasAction" conditional', () => {
     const now = formatISO(new Date(), { representation: 'date' })

packages/commons/src/conditionals/conditionals.ts

@@ -16,6 +16,7 @@ import { PartialSchema as AjvJSONSchemaType } from 'ajv/dist/types/json-schema'
 import { userSerializer } from '../events/serializers/user/serializer'
 import { omitKeyDeep } from '../utils'
 import { UUID } from '../uuid'
+import { EventStatus } from '../events/EventMetadata'
 
 /* eslint-disable max-lines */
 
@@ -68,10 +69,16 @@ export type FormConditionalParameters = CommonConditionalParameters & {
   $leafAdminStructureLocationIds?: Array<{ id: UUID }>
 }
 
+export type EventStateConditionalParameters = CommonConditionalParameters & {
+  $flags: string[]
+  $status: EventStatus
+}
+
 export type ConditionalParameters =
   | UserConditionalParameters
   | EventConditionalParameters
   | FormConditionalParameters
+  | EventStateConditionalParameters
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
@@ -328,6 +335,37 @@ function defineComparison(
   })
 }
 
+/** Check if an event flag is present */
+export function flag(flagvalue: string) {
+  return defineConditional({
+    type: 'object',
+    properties: {
+      $flags: {
+        type: 'array',
+        contains: {
+          type: 'string',
+          const: flagvalue
+        }
+      }
+    },
+    required: ['$flags']
+  })
+}
+
+/** Check if an event flag is present */
+export function status(statusValue: EventStatus) {
+  return defineConditional({
+    type: 'object',
+    properties: {
+      $status: {
+        type: 'string',
+        const: statusValue
+      }
+    },
+    required: ['$status']
+  })
+}
+
 /**
  * Generate conditional rules for a form field.
  *