From 01c8d1cffd771e817c784623da6710a888459df3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Kurczewski?= <michalkurczewski94@gmail.com>
Date: Mon, 7 Oct 2024 15:21:46 +0200
Subject: [PATCH] [CP-3004] Added app portal component (#2112)

---
 .../components/core/text/text.component.tsx   |  2 +-
 .../header/__snapshots__/header.test.tsx.snap |  1 +
 .../rest/header/header.component.tsx          |  1 +
 .../lib/use-dev-views/views/contacts-view.ts  | 53 ++++++++++++++++++-
 libs/generic-view/models/src/index.ts         |  3 ++
 .../generic-view/models/src/lib/app-portal.ts | 20 +++++++
 .../ui/src/lib/data-rows/app-portal.tsx       | 14 +++++
 .../ui/src/lib/data-rows/data-rows.ts         |  3 ++
 8 files changed, 95 insertions(+), 2 deletions(-)
 create mode 100644 libs/generic-view/models/src/lib/app-portal.ts
 create mode 100644 libs/generic-view/ui/src/lib/data-rows/app-portal.tsx

diff --git a/libs/core/__deprecated__/renderer/components/core/text/text.component.tsx b/libs/core/__deprecated__/renderer/components/core/text/text.component.tsx
index 942a55012f..b72c909919 100644
--- a/libs/core/__deprecated__/renderer/components/core/text/text.component.tsx
+++ b/libs/core/__deprecated__/renderer/components/core/text/text.component.tsx
@@ -121,6 +121,7 @@ export interface TextProps {
   readonly onClick?: () => void
   readonly testId?: string
   readonly textRef?: React.Ref<HTMLElement>
+  readonly id?: string
 }
 
 export enum TextDisplayStyle {
@@ -185,7 +186,6 @@ const Text: FunctionComponent<TextProps> = ({
     {message && typeof message !== "string" && (
       <FormattedMessage {...message} />
     )}
-
     {!message && children}
   </TextWrapper>
 )
diff --git a/libs/core/__deprecated__/renderer/components/rest/header/__snapshots__/header.test.tsx.snap b/libs/core/__deprecated__/renderer/components/rest/header/__snapshots__/header.test.tsx.snap
index 31e38428d9..cf836f30fe 100644
--- a/libs/core/__deprecated__/renderer/components/rest/header/__snapshots__/header.test.tsx.snap
+++ b/libs/core/__deprecated__/renderer/components/rest/header/__snapshots__/header.test.tsx.snap
@@ -43,6 +43,7 @@ exports[`matches snapshot without tabs 1`] = `
     class="c1 c2"
     color="primary"
     data-testid="location"
+    id="app-header"
   >
     [value] module.overview
   </h4>
diff --git a/libs/core/__deprecated__/renderer/components/rest/header/header.component.tsx b/libs/core/__deprecated__/renderer/components/rest/header/header.component.tsx
index 3d319f3adf..b765349bc1 100644
--- a/libs/core/__deprecated__/renderer/components/rest/header/header.component.tsx
+++ b/libs/core/__deprecated__/renderer/components/rest/header/header.component.tsx
@@ -122,6 +122,7 @@ const Header: FunctionComponent<HeaderProps> = ({
         </BackButton>
       ) : (
         <HeaderText
+          id={"app-header"}
           displayStyle={TextDisplayStyle.Headline4}
           message={currentLocation}
           data-testid={"location"}
diff --git a/libs/generic-view/feature/src/lib/use-dev-views/views/contacts-view.ts b/libs/generic-view/feature/src/lib/use-dev-views/views/contacts-view.ts
index 0e78e70e6b..3d2f301bcf 100644
--- a/libs/generic-view/feature/src/lib/use-dev-views/views/contacts-view.ts
+++ b/libs/generic-view/feature/src/lib/use-dev-views/views/contacts-view.ts
@@ -6,6 +6,57 @@
 import { View } from "generic-view/utils"
 
 // @ts-ignore
-const view: View = {}
+const view: View = {
+  contactsLoader: {
+    component: "entities-loader",
+    config: {
+      entitiesTypes: ["contacts"],
+    },
+    layout: {
+      flexLayout: {
+        direction: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        rowGap: "24px",
+      },
+      gridPlacement: {
+        row: 1,
+        column: 1,
+        width: 1,
+        height: 2,
+      },
+    },
+    childrenKeys: [
+      "contactsPanelWrapper",
+      "contactsFormWrapper",
+      "emptyListWrapper",
+      "appHeader",
+    ],
+  },
+  appHeader: {
+    component: "app-portal",
+    config: {
+      portal: "app-header",
+    },
+    childrenKeys: ["appHeaderText"],
+  },
+  appHeaderText: {
+    component: "format-message",
+    config: {
+      messageTemplate: " ({contactsCount})",
+    },
+    dataProvider: {
+      source: "form-fields-v2",
+      formName: "contactsForm",
+      fields: [
+        {
+          providerField: "allContacts",
+          componentField: "data.fields.contactsCount",
+          modifier: "length",
+        }
+      ]
+    },
+  },
+}
 
 export default view
diff --git a/libs/generic-view/models/src/index.ts b/libs/generic-view/models/src/index.ts
index 64e544cc1c..272681437b 100644
--- a/libs/generic-view/models/src/index.ts
+++ b/libs/generic-view/models/src/index.ts
@@ -61,6 +61,7 @@ import { conditionalRenderer } from "./lib/conditional-renderer"
 import { toast } from "./lib/toast"
 import { selectionManager } from "./lib/selection-manager"
 import { formatMessage } from "./lib/format-message"
+import { appPortal } from "./lib/app-portal"
 
 export * from "./lib/block-box"
 export * from "./lib/block-plain"
@@ -116,6 +117,7 @@ export * from "./lib/conditional-renderer"
 export * from "./lib/format-message"
 export * from "./lib/toast"
 export * from "./lib/selection-manager"
+export * from "./lib/app-portal"
 
 export default {
   [blockBox.key]: blockBox,
@@ -176,4 +178,5 @@ export default {
   [formatMessage.key]: formatMessage,
   [toast.key]: toast,
   [selectionManager.key]: selectionManager,
+  [appPortal.key]: appPortal,
 } as const
diff --git a/libs/generic-view/models/src/lib/app-portal.ts b/libs/generic-view/models/src/lib/app-portal.ts
new file mode 100644
index 0000000000..e1d2527d1d
--- /dev/null
+++ b/libs/generic-view/models/src/lib/app-portal.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { z } from "zod"
+
+const dataValidator = z.undefined()
+
+const configValidator = z.object({
+  portal: z.literal("app-header"),
+})
+
+export type AppPortalConfig = z.infer<typeof configValidator>
+
+export const appPortal = {
+  key: "app-portal",
+  dataValidator,
+  configValidator,
+} as const
diff --git a/libs/generic-view/ui/src/lib/data-rows/app-portal.tsx b/libs/generic-view/ui/src/lib/data-rows/app-portal.tsx
new file mode 100644
index 0000000000..ff8d5aa2b9
--- /dev/null
+++ b/libs/generic-view/ui/src/lib/data-rows/app-portal.tsx
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { APIFC } from "generic-view/utils"
+import { AppPortalConfig } from "generic-view/models"
+import { createPortal } from "react-dom"
+
+export const AppPortal: APIFC<undefined, AppPortalConfig> = ({ children, config }) => {
+  const appHeaderElement = document.querySelector(`#${config.portal}`)
+  if (!appHeaderElement || !children) return null
+  return createPortal(children, appHeaderElement)
+}
diff --git a/libs/generic-view/ui/src/lib/data-rows/data-rows.ts b/libs/generic-view/ui/src/lib/data-rows/data-rows.ts
index ca4efd3590..c201001814 100644
--- a/libs/generic-view/ui/src/lib/data-rows/data-rows.ts
+++ b/libs/generic-view/ui/src/lib/data-rows/data-rows.ts
@@ -9,7 +9,9 @@ import { LabeledText } from "./labeled-text"
 import { TextPlain } from "./text-plain"
 import { TextFormatted } from "./text-formatted"
 import { Badge } from "./badge"
+import { AppPortal } from "./app-portal"
 import {
+  appPortal,
   badge,
   iconText,
   image,
@@ -25,4 +27,5 @@ export const rows = {
   [textPlain.key]: TextPlain,
   [textFormatted.key]: TextFormatted,
   [badge.key]: Badge,
+  [appPortal.key]: AppPortal,
 }