feat: allow using window.location on HTTP (#11186)

* feat: allow using .location on HTTP

* refactor: also pick the Location href/pathname/hostname

* fix cfg.body[k] getting overridden

* don't use Window to not need DOM

* use window().location.get('href') helper

* amend changelog

Author: naftis

CHANGELOG.md

@@ -8,6 +8,12 @@
 
 HTTP input now accepts `field('..')` references in the HTTP body definition.
 
+## 1.9.2
+
+### New features
+
+- Toolkit now exports `window().location.get` to country config that can be used as a template variable e.g. in HttpField request body.
+
 ## 1.9.1
 
 ### Breaking changes

packages/client/src/v2-events/features/events/registered-fields/Http.tsx

@@ -71,12 +71,11 @@ async function fetchHttpFieldValue(
     for (const [k, v] of Object.entries(cfg.body)) {
       if (isTemplateVariable(v)) {
         cfg.body[k] = getMixedPath(systemVariables, v)
-      }
-
-      if (isFieldReference(v)) {
+      } else if (isFieldReference(v)) {
         cfg.body[k] = parseFieldReferenceToValue(v, form)
+      } else {
+        cfg.body[k] = v
       }
-      cfg.body[k] = v
     }
   }
 

packages/client/src/v2-events/hooks/useSystemVariables.ts

@@ -9,6 +9,7 @@
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
 
+import { pick } from 'lodash'
 import { SystemVariables } from '@opencrvs/commons/client'
 import { useUserDetails } from './useUserDetails'
 
@@ -19,7 +20,10 @@ export function useSystemVariables() {
   const user = useUserDetails()
 
   const variables = {
-    $user: user
+    $user: user,
+    $window: {
+      location: pick(window.location, ['href', 'pathname', 'hostname'])
+    }
   } satisfies SystemVariables
 
   return variables

packages/client/src/v2-events/utils.test.ts

@@ -198,6 +198,13 @@ const testCases = [
       $user: {
         district: '',
         province: ''
+      },
+      $window: {
+        location: {
+          href: 'http://example.com',
+          pathname: '/path',
+          hostname: 'example.com'
+        }
       }
     },
     expected: undefined,
@@ -210,6 +217,13 @@ const testCases = [
       $user: {
         district: '',
         province: ''
+      },
+      $window: {
+        location: {
+          href: 'http://example.com',
+          pathname: '/path',
+          hostname: 'example.com'
+        }
       }
     },
     expected: 'Hello',
@@ -222,6 +236,13 @@ const testCases = [
       $user: {
         district: 'Ibombo',
         province: ''
+      },
+      $window: {
+        location: {
+          href: 'http://example.com',
+          pathname: '/path',
+          hostname: 'example.com'
+        }
       }
     },
     expected: 'Ibombo',
@@ -234,6 +255,13 @@ const testCases = [
       $user: {
         district: 'Ibombo',
         province: ''
+      },
+      $window: {
+        location: {
+          href: 'http://example.com',
+          pathname: '/path',
+          hostname: 'example.com'
+        }
       }
     },
     expected: 'Hello world',
@@ -249,6 +277,13 @@ const testCases = [
       $user: {
         district: 'Ibombo',
         province: 'Central'
+      },
+      $window: {
+        location: {
+          href: 'http://example.com',
+          pathname: '/path',
+          hostname: 'example.com'
+        }
       }
     },
     expected: {

packages/commons/src/events/TemplateConfig.ts

@@ -24,8 +24,26 @@ export type SystemVariables = {
     province: string
     district: string
   }
+  $window: {
+    location: {
+      href: string
+      pathname: string
+      hostname: string
+    }
+  }
 }
 
+/**
+ * Resolves `window().location.get('href')` to `window.location.href` to allow us to 1) type check system variables 2) change the implementation later if needed
+ */
+export const window = () => ({
+  location: {
+    get: (key: 'href' | 'pathname' | 'hostname') => {
+      return `$window.location.${key}`
+    }
+  }
+})
+
 /**
  * Recursively flatten the keys of an object. Used to limit types when configuring default values in country config.
  * @example