From 1a262505747018a09b64e1718a8e80aeddee59b1 Mon Sep 17 00:00:00 2001
From: Arnau Sanchez <pyarnau@gmail.com>
Date: Wed, 12 Jun 2024 12:56:06 +0200
Subject: [PATCH 1/5] poc: Use approval app as plugin

---
 package.json                                  |   1 +
 src/components/utils/use-boolean.ts           |  27 +++++
 src/pages/data-approval/DataApprovalTable.tsx | 106 ++++++++++++------
 yarn.lock                                     |  42 +++++++
 4 files changed, 140 insertions(+), 36 deletions(-)
 create mode 100644 src/components/utils/use-boolean.ts

diff --git a/package.json b/package.json
index 8d70f811..4c9a163c 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
         "@eyeseetea/d2-api": "1.14.0",
         "@eyeseetea/d2-ui-components": "2.7.0",
         "@eyeseetea/feedback-component": "0.1.2",
+        "@krakenjs/post-robot": "^11.0.0",
         "@material-ui/core": "4.12.3",
         "@material-ui/icons": "4.11.3",
         "@material-ui/styles": "4.11.4",
diff --git a/src/components/utils/use-boolean.ts b/src/components/utils/use-boolean.ts
new file mode 100644
index 00000000..35b5cf1a
--- /dev/null
+++ b/src/components/utils/use-boolean.ts
@@ -0,0 +1,27 @@
+import React from "react";
+
+type Callback = () => void;
+
+type UseBooleanReturn = [boolean, UseBooleanActions];
+
+interface UseBooleanActions {
+    set: (newValue: boolean) => void;
+    toggle: Callback;
+    enable: Callback;
+    disable: Callback;
+}
+
+export function useBooleanState(initialValue: boolean): UseBooleanReturn {
+    const [value, setValue] = React.useState(initialValue);
+
+    const actions = React.useMemo(() => {
+        return {
+            set: (newValue: boolean) => setValue(newValue),
+            enable: () => setValue(true),
+            disable: () => setValue(false),
+            toggle: () => setValue(value_ => !value_),
+        };
+    }, [setValue]);
+
+    return [value, actions];
+}
diff --git a/src/pages/data-approval/DataApprovalTable.tsx b/src/pages/data-approval/DataApprovalTable.tsx
index 0e8273a3..312da3c8 100644
--- a/src/pages/data-approval/DataApprovalTable.tsx
+++ b/src/pages/data-approval/DataApprovalTable.tsx
@@ -1,17 +1,9 @@
 import React from "react";
 import { LinearProgress } from "@material-ui/core";
 // @ts-ignore
-import { CssVariables } from "@dhis2/ui";
-// @ts-ignore
-import { SelectionProvider } from "approval-app/es/selection-context";
-// @ts-ignore
-import { AppProvider } from "approval-app/es/app-context";
-// @ts-ignore
-import { Layout } from "approval-app/es/app/layout.js";
-// @ts-ignore
-import { Display } from "approval-app/es/data-workspace/display";
-// @ts-ignore
-import { useSelectionContext } from "approval-app/es/selection-context";
+import postRobot from "@krakenjs/post-robot";
+import { useBooleanState } from "../../components/utils/use-boolean";
+import { useAppContext } from "../../contexts/api-context";
 
 export interface DataApprovalTableProps {
     dataSetId: string;
@@ -20,41 +12,83 @@ export interface DataApprovalTableProps {
     attributeOptionComboId: string;
 }
 
-const DataApprovalTable: React.FC<DataApprovalTableProps> = props => {
+export function useDhis2Url(path: string) {
+    const { api, isDev } = useAppContext();
+    return (isDev ? "/dhis2" : api.baseUrl) + path;
+}
+
+export const DataApprovalTable: React.FunctionComponent<DataApprovalTableProps> = props => {
+    const pluginUrl = useDhis2Url("/dhis-web-approval/plugin.html");
+    const iframeRef = React.useRef<HTMLIFrameElement>(null);
+    const isPluginReady = useDataApprovalPlugin(iframeRef, props);
+
     return (
         <>
-            <CssVariables spacers colors theme />
+            {!isPluginReady && <LinearProgress />}
 
-            <AppProvider>
-                <SelectionProvider disableHistory={true}>
-                    <DataValuesTableContents {...props} />
-                </SelectionProvider>
-            </AppProvider>
+            <iframe
+                src={pluginUrl}
+                ref={iframeRef}
+                style={styles.iframe}
+                width={"100%"}
+                height={500}
+            />
         </>
     );
 };
 
-const DataValuesTableContents: React.FC<DataApprovalTableProps> = props => {
-    const { orgUnitId, dataSetId, period, attributeOptionComboId } = props;
-    const selection = useSelectionContext();
-    const isSelectionFilled = selection.orgUnit && selection.period;
+const styles = {
+    iframe: { border: "none", overflow: "hidden" },
+};
+
+type Size = {
+    width: number;
+    height: number;
+};
 
+function useDataApprovalPlugin(
+    iframeRef: React.RefObject<HTMLIFrameElement>,
+    dataApproval: object
+) {
     React.useEffect(() => {
-        if (isSelectionFilled) return;
-        selection.selectOrgUnit({ id: orgUnitId });
-        selection.selectPeriod(period);
-        selection.selectFilter(`ao:${attributeOptionComboId}`);
-    }, [selection, isSelectionFilled, orgUnitId, period, attributeOptionComboId]);
+        const iframe = iframeRef.current;
+        if (!iframe || !dataApproval) return;
 
-    if (!isSelectionFilled) return <LinearProgress />;
+        const pluginProps = {
+            dataApproval: dataApproval,
+        };
 
-    return (
-        <Layout.Container>
-            <Layout.Content>
-                <Display dataSetId={dataSetId} />
-            </Layout.Content>
-        </Layout.Container>
-    );
-};
+        postRobot.send(iframe.contentWindow, "newProps", pluginProps);
+
+        const listener = postRobot.on(
+            "getProps",
+            { window: iframeRef.current.contentWindow },
+            () => pluginProps
+        );
+
+        return () => listener.cancel();
+    }, [iframeRef, dataApproval]);
+
+    const [isPluginReady, { enable: setPluginAsReady }] = useBooleanState(false);
+
+    React.useEffect(() => {
+        if (!iframeRef?.current) return;
+
+        const listener = postRobot.on(
+            "installationStatus",
+            { window: iframeRef.current.contentWindow },
+            (ev: { data: { installationStatus: "READY" | "INSTALLING" | "UNKNOWN" } }) => {
+                // await navigator.serviceWorker.getRegistration() return undefined, no PWA for capture-app
+                //if (ev.data.installationStatus === "READY") {
+                setPluginAsReady();
+                //}
+            }
+        );
+
+        return () => listener.cancel();
+    }, [iframeRef, setPluginAsReady]);
+
+    return isPluginReady;
+}
 
 export default React.memo(DataApprovalTable);
diff --git a/yarn.lock b/yarn.lock
index 84db09d8..0ca63709 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3757,6 +3757,48 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
+"@krakenjs/belter@^2.0.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@krakenjs/belter/-/belter-2.5.0.tgz#c2ead14df28b83b63d5a467e7d5960877f247210"
+  integrity sha512-c+vOJr5ojEPsH7s28XRLNkUamaXsnyM1Fs7PaYM9tUMnMUILnZ2a3jnOmXZwHYpT0eAciRHddX1333OlCR2e7Q==
+  dependencies:
+    "@krakenjs/cross-domain-safe-weakmap" "^2.0.2"
+    "@krakenjs/cross-domain-utils" "^3.0.2"
+    "@krakenjs/zalgo-promise" "^2.0.0"
+
+"@krakenjs/cross-domain-safe-weakmap@^2.0.0", "@krakenjs/cross-domain-safe-weakmap@^2.0.2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@krakenjs/cross-domain-safe-weakmap/-/cross-domain-safe-weakmap-2.0.3.tgz#eb607534c14bd8bc2f3456d993618361fb38489f"
+  integrity sha512-WsGi6347ddZ9Y0HoBuTYCX2QTAHxYVaUs2T/0n8XJKXZOEJPnLWlW6eYAOgyyuUsYusWMAkYv00fvfxAlTU8/w==
+  dependencies:
+    "@krakenjs/cross-domain-utils" "^3.0.2"
+
+"@krakenjs/cross-domain-utils@^3.0.0", "@krakenjs/cross-domain-utils@^3.0.2":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@krakenjs/cross-domain-utils/-/cross-domain-utils-3.1.0.tgz#c4863099acf36f05941345de1381ada1e207315c"
+  integrity sha512-if+mVTg56ZyLt8wn3ZbTw0IzNjbQvvj5X7lfcBlVfYdZ93TXgHa6Rt9nqdm1rZmvqb8Ct6L29Bp7SNC3xzLfUw==
+
+"@krakenjs/post-robot@^11.0.0":
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/@krakenjs/post-robot/-/post-robot-11.0.0.tgz#98a285b70db2bac2c58f297cd8403a4cc2518a6a"
+  integrity sha512-t+IlQCrwzLa1IWxEvdfr9r/xgOmQoykVQ1rtEukw1LYVHPU3p3eDDC5djODE7ErWYDbkYncrHcbDEh6Gc/G9wQ==
+  dependencies:
+    "@krakenjs/belter" "^2.0.0"
+    "@krakenjs/cross-domain-safe-weakmap" "^2.0.0"
+    "@krakenjs/cross-domain-utils" "^3.0.0"
+    "@krakenjs/universal-serialize" "^2.0.0"
+    "@krakenjs/zalgo-promise" "^2.0.0"
+
+"@krakenjs/universal-serialize@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@krakenjs/universal-serialize/-/universal-serialize-2.0.0.tgz#c4a508ec53f6b412b1032e78c570b87f4f2c7763"
+  integrity sha512-Qd9W2iaP5lMTzXPETomBDAaqbgHYkEjJKcQ+3eNC8EwWGCHFk3/+uQ41B+QYfSZqRoz8AEjdNHOps7nDEypAyw==
+
+"@krakenjs/zalgo-promise@^2.0.0":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@krakenjs/zalgo-promise/-/zalgo-promise-2.0.1.tgz#36b4225a566f0a0903a8d771a11a9efc131c6987"
+  integrity sha512-n30eknZjD7z8/joFqjI8FIDZ0yJPZHcQBce1B3tAumwNZL0C42Ta/w37MfthxHV61JHEFGfy7b727h/kzagJDA==
+
 "@material-ui/core@4.12.3":
   version "4.12.3"
   resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca"

From 10ccd8a404f753a02bd9f3a0d0c4c999a52c11e1 Mon Sep 17 00:00:00 2001
From: Arnau Sanchez <pyarnau@gmail.com>
Date: Wed, 10 Jul 2024 11:33:43 +0200
Subject: [PATCH 2/5] Use plugin.html with query strings

---
 src/pages/data-approval/DataApprovalTable.tsx | 69 +++----------------
 1 file changed, 11 insertions(+), 58 deletions(-)

diff --git a/src/pages/data-approval/DataApprovalTable.tsx b/src/pages/data-approval/DataApprovalTable.tsx
index 312da3c8..1e233188 100644
--- a/src/pages/data-approval/DataApprovalTable.tsx
+++ b/src/pages/data-approval/DataApprovalTable.tsx
@@ -1,12 +1,10 @@
 import React from "react";
-import { LinearProgress } from "@material-ui/core";
-// @ts-ignore
-import postRobot from "@krakenjs/post-robot";
-import { useBooleanState } from "../../components/utils/use-boolean";
 import { useAppContext } from "../../contexts/api-context";
+import { NamedRef } from "../../domain/entities/Ref";
 
 export interface DataApprovalTableProps {
     dataSetId: string;
+    //orgUnit: NamedRef;
     orgUnitId: string;
     period: { startDate: string; endDate: string };
     attributeOptionComboId: string;
@@ -18,14 +16,19 @@ export function useDhis2Url(path: string) {
 }
 
 export const DataApprovalTable: React.FunctionComponent<DataApprovalTableProps> = props => {
-    const pluginUrl = useDhis2Url("/dhis-web-approval/plugin.html");
+    const pluginBaseUrl = useDhis2Url("/dhis-web-approval/plugin.html");
+    const params = {
+        dataSet: "uQ6xLjyXjI1",
+        ou: "/AGZEUf9meZ6/aqWKqMN5pUb/BYGtHgVKWLY",
+        ouDisplayName: "2023-2025 SHINE",
+        pe: "202406",
+        wf: "CCy0oNyvlV1",
+    };
+    const pluginUrl = pluginBaseUrl + "#/?" + new URLSearchParams(params).toString();
     const iframeRef = React.useRef<HTMLIFrameElement>(null);
-    const isPluginReady = useDataApprovalPlugin(iframeRef, props);
 
     return (
         <>
-            {!isPluginReady && <LinearProgress />}
-
             <iframe
                 src={pluginUrl}
                 ref={iframeRef}
@@ -41,54 +44,4 @@ const styles = {
     iframe: { border: "none", overflow: "hidden" },
 };
 
-type Size = {
-    width: number;
-    height: number;
-};
-
-function useDataApprovalPlugin(
-    iframeRef: React.RefObject<HTMLIFrameElement>,
-    dataApproval: object
-) {
-    React.useEffect(() => {
-        const iframe = iframeRef.current;
-        if (!iframe || !dataApproval) return;
-
-        const pluginProps = {
-            dataApproval: dataApproval,
-        };
-
-        postRobot.send(iframe.contentWindow, "newProps", pluginProps);
-
-        const listener = postRobot.on(
-            "getProps",
-            { window: iframeRef.current.contentWindow },
-            () => pluginProps
-        );
-
-        return () => listener.cancel();
-    }, [iframeRef, dataApproval]);
-
-    const [isPluginReady, { enable: setPluginAsReady }] = useBooleanState(false);
-
-    React.useEffect(() => {
-        if (!iframeRef?.current) return;
-
-        const listener = postRobot.on(
-            "installationStatus",
-            { window: iframeRef.current.contentWindow },
-            (ev: { data: { installationStatus: "READY" | "INSTALLING" | "UNKNOWN" } }) => {
-                // await navigator.serviceWorker.getRegistration() return undefined, no PWA for capture-app
-                //if (ev.data.installationStatus === "READY") {
-                setPluginAsReady();
-                //}
-            }
-        );
-
-        return () => listener.cancel();
-    }, [iframeRef, setPluginAsReady]);
-
-    return isPluginReady;
-}
-
 export default React.memo(DataApprovalTable);

From 757d1f3b809a7caa50aa384c651dcfc22a07d154 Mon Sep 17 00:00:00 2001
From: Arnau Sanchez <pyarnau@gmail.com>
Date: Wed, 10 Jul 2024 12:07:01 +0200
Subject: [PATCH 3/5] Use @dhis2/app-runtime plugin

---
 package.json                                  |   2 +-
 src/index.ts                                  |   8 +-
 src/pages/data-approval/DataApproval.tsx      |  11 --
 src/pages/data-approval/DataApprovalTable.tsx |  20 ++--
 yarn.lock                                     | 108 +++++++++++++-----
 5 files changed, 98 insertions(+), 51 deletions(-)

diff --git a/package.json b/package.json
index 4c9a163c..9a5442cc 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
         "url": "git+https://github.com/eyeseetea/project-monitoring-app.git"
     },
     "dependencies": {
-        "@dhis2/app-runtime": "3.2.1",
+        "@dhis2/app-runtime": "3.10.4",
         "@dhis2/d2-i18n": "1.1.1",
         "@dhis2/d2-i18n-extract": "1.0.8",
         "@dhis2/d2-i18n-generate": "1.2.0",
diff --git a/src/index.ts b/src/index.ts
index a958bcb9..3002abd8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -59,7 +59,13 @@ async function main() {
             // eslint-disable-next-line react/no-children-prop
             React.createElement(
                 Provider,
-                { config, children: null },
+                {
+                    config,
+                    children: null,
+                    plugin: false,
+                    parentAlertsAdd: undefined,
+                    showAlertsInPlugin: true,
+                },
                 React.createElement(App, { d2, api, dhis2Url: baseUrl })
             ),
             document.getElementById("root")
diff --git a/src/pages/data-approval/DataApproval.tsx b/src/pages/data-approval/DataApproval.tsx
index 87414b8c..c2a8e3ae 100644
--- a/src/pages/data-approval/DataApproval.tsx
+++ b/src/pages/data-approval/DataApproval.tsx
@@ -169,17 +169,6 @@ const DataApproval: React.FC = () => {
 
             {projectDataSet && (
                 <Paper style={{ marginBottom: 20, padding: 20 }}>
-                    <link
-                        rel="stylesheet"
-                        type="text/css"
-                        href={api.baseUrl + "/dhis-web-approval/style/dhis-web-approval.css"}
-                    />
-                    <link
-                        rel="stylesheet"
-                        type="text/css"
-                        href={api.baseUrl + "/dhis-web-commons/css/light_blue/light_blue.css"}
-                    />
-
                     <DataApprovalTable
                         dataSetId={projectDataSet.getDataSet().id}
                         orgUnitId={projectDataSet.getOrgUnit().id}
diff --git a/src/pages/data-approval/DataApprovalTable.tsx b/src/pages/data-approval/DataApprovalTable.tsx
index 1e233188..8941b5a3 100644
--- a/src/pages/data-approval/DataApprovalTable.tsx
+++ b/src/pages/data-approval/DataApprovalTable.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useAppContext } from "../../contexts/api-context";
-import { NamedRef } from "../../domain/entities/Ref";
+// @ts-ignore
+import { Plugin } from "@dhis2/app-runtime/build/cjs/experimental";
 
 export interface DataApprovalTableProps {
     dataSetId: string;
@@ -28,15 +29,14 @@ export const DataApprovalTable: React.FunctionComponent<DataApprovalTableProps>
     const iframeRef = React.useRef<HTMLIFrameElement>(null);
 
     return (
-        <>
-            <iframe
-                src={pluginUrl}
-                ref={iframeRef}
-                style={styles.iframe}
-                width={"100%"}
-                height={500}
-            />
-        </>
+        <Plugin
+            pluginSource={pluginBaseUrl}
+            onError={(err: any) => {
+                console.error("ERROR", err);
+            }}
+            showAlertsInPlugin={true}
+            propToPass={"42"}
+        />
     );
 };
 
diff --git a/yarn.lock b/yarn.lock
index 0ca63709..7a71c0b8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2820,40 +2820,48 @@
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2/app-runtime@3.2.1":
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-runtime/-/app-runtime-3.2.1.tgz#c8c8ec386b1e27502c42c9481eb8b97947bebe7f"
-  integrity sha512-sQ3PAla1wlp8kzy8hOkhzfDtIP1+0r7pbKB2l9QxfDAlQntOy1aUC3hx8JIPPx5hB9hX1lwf0EPbuYH9zp+LDA==
-  dependencies:
-    "@dhis2/app-service-alerts" "3.2.1"
-    "@dhis2/app-service-config" "3.2.1"
-    "@dhis2/app-service-data" "3.2.1"
-    "@dhis2/app-service-offline" "3.2.1"
-
-"@dhis2/app-service-alerts@3.2.1":
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-service-alerts/-/app-service-alerts-3.2.1.tgz#7118e157b1b60b6d08df899ed3d2bef6efb056c7"
-  integrity sha512-XITsLOCVqxl3nFLp5oYbuwuyL9RVvQu1U5z5TXFD4B/9sZE2zdNw9FagzQkQbAWoeiNDVsoHbB4KP7rZhyDQ+Q==
-
-"@dhis2/app-service-config@3.2.1":
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-service-config/-/app-service-config-3.2.1.tgz#9e915bad721bb4cf6c6f9242ca2d959b21f78a8a"
-  integrity sha512-AzPrUuQ4MOXEpYUm5iMbCaxkjnzQVej4n5exNirolVEqUaE2NyGYYDqXp0GhxHq/q5QIhbSKqLL8NES/kDOusw==
-
-"@dhis2/app-service-data@3.2.1":
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-service-data/-/app-service-data-3.2.1.tgz#a0a3df618f99966a3511260c7ceed41cd236d4e7"
-  integrity sha512-UW3e/Gr/hBNkT/gSlJ/h49rUYJ1ws+6osNZ7Q9hI5JOGHlqPtmKcWhuHfLUMeljRs2Bvan7f5duAycssSddt0A==
+"@dhis2/app-runtime@3.10.4":
+  version "3.10.4"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-runtime/-/app-runtime-3.10.4.tgz#6064ac728770cc94c4d1975db32bd38533655cc6"
+  integrity sha512-W/d0WcYYcKAeE5/xCunZEMYUSD1fxG+JDQdRDEUsH5y5hB8i/4o2QQrZK8xa19Z3xQJhaW5ypWWqIQVjTJT2Ww==
+  dependencies:
+    "@dhis2/app-service-alerts" "3.10.4"
+    "@dhis2/app-service-config" "3.10.4"
+    "@dhis2/app-service-data" "3.10.4"
+    "@dhis2/app-service-offline" "3.10.4"
+    "@dhis2/app-service-plugin" "3.10.4"
+
+"@dhis2/app-service-alerts@3.10.4":
+  version "3.10.4"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-service-alerts/-/app-service-alerts-3.10.4.tgz#a7cce660015d79980679175e677cf6c6c3f4c7eb"
+  integrity sha512-DmSLx/kHOHpgGiL8zG0oa6D3MeCY3wPMDGqj+Gfegr654Lmyf4d2vLI7HSZUSOCdraP/fSYTypsdZmWYoXoLBQ==
+
+"@dhis2/app-service-config@3.10.4":
+  version "3.10.4"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-service-config/-/app-service-config-3.10.4.tgz#2bede4df9b036350200cbc085a2a68439fa4fa0a"
+  integrity sha512-SCFdNxJKpiBjYsU9s0R+u9GrXjzmUEpGpudmC5eQqNV6ajLiebe/pS2jcSPFzjUtHVQMADk0X8TkERoOBqWcxA==
+
+"@dhis2/app-service-data@3.10.4":
+  version "3.10.4"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-service-data/-/app-service-data-3.10.4.tgz#dcd993a24d2edd97e7ad8a042a682e60582740ff"
+  integrity sha512-RaoWniioCe33PcPZoDuO66qOrIt0JeeCN8RzmCDrRVGvGmlDTZ3hNuWm9CnsAvO1U6sYDiulKPqrEQu8YKMG0w==
   dependencies:
     react-query "^3.13.11"
 
-"@dhis2/app-service-offline@3.2.1":
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-service-offline/-/app-service-offline-3.2.1.tgz#92b6f1c9c15505b6d333adb1623b05ba78879469"
-  integrity sha512-NmxwwP2udTUvEydxvG+COk0bSmlMU9oaX9ji3UblINUewR93oB+APKAks+pAD9CCK3t6P+npGSUyFpQWyzaQMg==
+"@dhis2/app-service-offline@3.10.4":
+  version "3.10.4"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-service-offline/-/app-service-offline-3.10.4.tgz#dcdaf3a76c6c7a71f28c89a403ec130bf10fcdf3"
+  integrity sha512-SUUS+sw3FjR0TMdKSSOVzL8IfPA185gSTHQ1WE4tLc2zE92elvxLL9FuSUuTbu+l1Kr4nRQNLh8muOMWKGnWDg==
   dependencies:
     lodash "^4.17.21"
 
+"@dhis2/app-service-plugin@3.10.4":
+  version "3.10.4"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-service-plugin/-/app-service-plugin-3.10.4.tgz#f5412a1320393042012dd75713e3215e51628554"
+  integrity sha512-GW6xa/5y2yFXvhtLConnaOxKqyu6VPZWRBaQR73/bRRmFcnd7hlMkZ2M0GWSjoW4QHLXlLhXHFsgHPETBftkPg==
+  dependencies:
+    post-robot "^10.0.46"
+
 "@dhis2/d2-i18n-extract@1.0.8":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@dhis2/d2-i18n-extract/-/d2-i18n-extract-1.0.8.tgz#9d98690d522a51895c8ef3fe7136f026b0f8dacd"
@@ -6074,6 +6082,15 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+belter@^1.0.41:
+  version "1.0.190"
+  resolved "https://registry.yarnpkg.com/belter/-/belter-1.0.190.tgz#491857550ef240d9c66b56fc637991f5c3089966"
+  integrity sha512-jz05FHrO+bwitdI6JxV5ESyRdVhTcwMWQ7L4o+q/R4LNJFQrG58sp9EiwsSjhbihhiyYFcmmCMRRagxte6igtw==
+  dependencies:
+    cross-domain-safe-weakmap "^1"
+    cross-domain-utils "^2"
+    zalgo-promise "^1"
+
 bfj@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/bfj/-/bfj-7.0.2.tgz#1988ce76f3add9ac2913fd8ba47aad9e651bfbb2"
@@ -7291,6 +7308,20 @@ cronstrue@^1.81.0:
   resolved "https://registry.yarnpkg.com/cronstrue/-/cronstrue-1.110.0.tgz#cffbef09855141e518341ed5a4b575a5a4811638"
   integrity sha512-+ABuGZl/nqf/0TemAsPlMSGaB9xEobWhctfRGEqEvH3g6pB/2FGbsUHQPSL8Wt1W3nmOHe1w8GWjacN5k8d3hg==
 
+cross-domain-safe-weakmap@^1, cross-domain-safe-weakmap@^1.0.1:
+  version "1.0.29"
+  resolved "https://registry.yarnpkg.com/cross-domain-safe-weakmap/-/cross-domain-safe-weakmap-1.0.29.tgz#0847975c27d9e1cc840f24c1745311958df98022"
+  integrity sha512-VLoUgf2SXnf3+na8NfeUFV59TRZkIJqCIATaMdbhccgtnTlSnHXkyTRwokngEGYdQXx8JbHT9GDYitgR2sdjuA==
+  dependencies:
+    cross-domain-utils "^2.0.0"
+
+cross-domain-utils@^2, cross-domain-utils@^2.0.0:
+  version "2.0.38"
+  resolved "https://registry.yarnpkg.com/cross-domain-utils/-/cross-domain-utils-2.0.38.tgz#2eaf321c4dfdb61596805ca4233fde4400cb6377"
+  integrity sha512-zZfi3+2EIR9l4chrEiXI2xFleyacsJf8YMLR1eJ0Veb5FTMXeJ3DpxDjZkto2FhL/g717WSELqbptNSo85UJDw==
+  dependencies:
+    zalgo-promise "^1.0.11"
+
 cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -13903,6 +13934,17 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
+post-robot@^10.0.46:
+  version "10.0.46"
+  resolved "https://registry.yarnpkg.com/post-robot/-/post-robot-10.0.46.tgz#39cea5b51033729390fc7c90be3285cd285f0377"
+  integrity sha512-EgVJiuvI4iRWDZvzObWes0X/n8olWBEJWxlSw79zmhpgkigX8UsVL4VOBhVtoJKwf0Y9qP9g2zOONw1rv80QbA==
+  dependencies:
+    belter "^1.0.41"
+    cross-domain-safe-weakmap "^1.0.1"
+    cross-domain-utils "^2.0.0"
+    universal-serialize "^1.0.4"
+    zalgo-promise "^1.0.3"
+
 postcss-attribute-case-insensitive@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.2.tgz#d93e46b504589e94ac7277b0463226c68041a880"
@@ -17459,6 +17501,11 @@ unique-string@^1.0.0:
   dependencies:
     crypto-random-string "^1.0.0"
 
+universal-serialize@^1.0.4:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/universal-serialize/-/universal-serialize-1.0.10.tgz#3279bb30f47290ea479f45135620f98fa9d3f3a6"
+  integrity sha512-FdouA4xSFa0fudk1+z5vLWtxZCoC0Q9lKYV3uUdFl7DttNfolmiw2ASr5ddY+/Yz6Isr68u3IqC9XMSwMP+Pow==
+
 universalify@^0.1.0, universalify@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
@@ -18419,6 +18466,11 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
+zalgo-promise@^1, zalgo-promise@^1.0.11, zalgo-promise@^1.0.3:
+  version "1.0.48"
+  resolved "https://registry.yarnpkg.com/zalgo-promise/-/zalgo-promise-1.0.48.tgz#9e33eef502d5ed9f5a09fc5728c833c3e87afa2e"
+  integrity sha512-LLHANmdm53+MucY9aOFIggzYtUdkSBFxUsy4glTTQYNyK6B3uCPWTbfiGvSrEvLojw0mSzyFJ1/RRLv+QMNdzQ==
+
 zip-stream@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-4.1.0.tgz#51dd326571544e36aa3f756430b313576dc8fc79"

From 39c52160b6c9f6df990afabd3cb9903e9ebf06c5 Mon Sep 17 00:00:00 2001
From: Arnau Sanchez <pyarnau@gmail.com>
Date: Thu, 10 Oct 2024 14:08:15 +0200
Subject: [PATCH 4/5] Use data approval as plugin + pass info with query
 strings

---
 src/pages/data-approval/DataApproval.tsx      |  2 +-
 src/pages/data-approval/DataApprovalTable.tsx | 29 +++++++------------
 2 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/src/pages/data-approval/DataApproval.tsx b/src/pages/data-approval/DataApproval.tsx
index c2a8e3ae..ac5d1b3b 100644
--- a/src/pages/data-approval/DataApproval.tsx
+++ b/src/pages/data-approval/DataApproval.tsx
@@ -171,7 +171,7 @@ const DataApproval: React.FC = () => {
                 <Paper style={{ marginBottom: 20, padding: 20 }}>
                     <DataApprovalTable
                         dataSetId={projectDataSet.getDataSet().id}
-                        orgUnitId={projectDataSet.getOrgUnit().id}
+                        orgUnit={projectDataSet.getOrgUnit()}
                         attributeOptionComboId={projectDataSet.getAttributeOptionCombo().id}
                         period={periodStartEnd}
                     />
diff --git a/src/pages/data-approval/DataApprovalTable.tsx b/src/pages/data-approval/DataApprovalTable.tsx
index 8941b5a3..55f99693 100644
--- a/src/pages/data-approval/DataApprovalTable.tsx
+++ b/src/pages/data-approval/DataApprovalTable.tsx
@@ -2,11 +2,11 @@ import React from "react";
 import { useAppContext } from "../../contexts/api-context";
 // @ts-ignore
 import { Plugin } from "@dhis2/app-runtime/build/cjs/experimental";
+import { OrganisationUnit } from "../../models/Project";
 
 export interface DataApprovalTableProps {
     dataSetId: string;
-    //orgUnit: NamedRef;
-    orgUnitId: string;
+    orgUnit: OrganisationUnit;
     period: { startDate: string; endDate: string };
     attributeOptionComboId: string;
 }
@@ -17,27 +17,20 @@ export function useDhis2Url(path: string) {
 }
 
 export const DataApprovalTable: React.FunctionComponent<DataApprovalTableProps> = props => {
+    const { config } = useAppContext();
     const pluginBaseUrl = useDhis2Url("/dhis-web-approval/plugin.html");
     const params = {
-        dataSet: "uQ6xLjyXjI1",
-        ou: "/AGZEUf9meZ6/aqWKqMN5pUb/BYGtHgVKWLY",
-        ouDisplayName: "2023-2025 SHINE",
-        pe: "202406",
-        wf: "CCy0oNyvlV1",
+        dataSet: props.dataSetId,
+        ou: props.orgUnit.path,
+        ouDisplayName: props.orgUnit.displayName,
+        pe: props.period.startDate.replace(/-/g, ""),
+        wf: config.dataApprovalWorkflows.project.id,
+        hideSelectors: "true",
+        filter: `ao:${props.attributeOptionComboId}`,
     };
     const pluginUrl = pluginBaseUrl + "#/?" + new URLSearchParams(params).toString();
-    const iframeRef = React.useRef<HTMLIFrameElement>(null);
 
-    return (
-        <Plugin
-            pluginSource={pluginBaseUrl}
-            onError={(err: any) => {
-                console.error("ERROR", err);
-            }}
-            showAlertsInPlugin={true}
-            propToPass={"42"}
-        />
-    );
+    return <Plugin pluginSource={pluginUrl} showAlertsInPlugin={true} />;
 };
 
 const styles = {

From 5c66140c609280e899dd14d082cda0e4e5fee8ad Mon Sep 17 00:00:00 2001
From: Arnau Sanchez <pyarnau@gmail.com>
Date: Thu, 10 Oct 2024 14:13:57 +0200
Subject: [PATCH 5/5] Set width to 1000

---
 src/pages/data-approval/DataApprovalTable.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/data-approval/DataApprovalTable.tsx b/src/pages/data-approval/DataApprovalTable.tsx
index 55f99693..7e2c85b1 100644
--- a/src/pages/data-approval/DataApprovalTable.tsx
+++ b/src/pages/data-approval/DataApprovalTable.tsx
@@ -19,6 +19,7 @@ export function useDhis2Url(path: string) {
 export const DataApprovalTable: React.FunctionComponent<DataApprovalTableProps> = props => {
     const { config } = useAppContext();
     const pluginBaseUrl = useDhis2Url("/dhis-web-approval/plugin.html");
+
     const params = {
         dataSet: props.dataSetId,
         ou: props.orgUnit.path,
@@ -30,7 +31,7 @@ export const DataApprovalTable: React.FunctionComponent<DataApprovalTableProps>
     };
     const pluginUrl = pluginBaseUrl + "#/?" + new URLSearchParams(params).toString();
 
-    return <Plugin pluginSource={pluginUrl} showAlertsInPlugin={true} />;
+    return <Plugin width="1000" pluginSource={pluginUrl} showAlertsInPlugin={true} />;
 };
 
 const styles = {