feat: add information about anonymous reporting in global settings

MAIF · Nov 6, 2024 · bece74e · bece74e
1 parent ce1d876
commit bece74e
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 10 deletions.
diff --git a/izanami-frontend/src/components/Form.tsx b/izanami-frontend/src/components/Form.tsx
@@ -18,7 +18,7 @@ type FormProps<DataType> = {
       | SchemaEntry
       | (Omit<SchemaEntry, "label"> & {
           required: true;
-          label?: string | (() => string);
+          label?: string | (() => string) | (() => React.ReactNode);
           tooltip?: () => React.ReactNode;
         });
   };
@@ -47,7 +47,7 @@ export function Form<T extends TBaseObject>(props: FormProps<T>) {
       if ("required" in value && value.required) {
         let newLabel: string;
         if (typeof value.label === "function") {
-          newLabel = value.label();
+          newLabel = String(value.label());
         } else {
           newLabel = value.label ?? key;
         }

diff --git a/izanami-frontend/src/components/Modal.tsx b/izanami-frontend/src/components/Modal.tsx
@@ -9,6 +9,7 @@ export function Modal(props: {
   confirmButtonText?: string;
   children: ReactElement | ReactElement[] | string;
   position?: "top" | "center";
+  style?: React.CSSProperties;
 }) {
   const {
     visible,
@@ -19,6 +20,7 @@ export function Modal(props: {
     closeButtonText,
     confirmButtonText,
     position,
+    style,
   } = props;
 
   React.useEffect(() => {
@@ -37,11 +39,11 @@ export function Modal(props: {
         className="modal"
         tabIndex={-1}
         aria-hidden={visible ? "false" : "true"}
-        style={
-          visible
-            ? { display: "block", backgroundColor: "#0008", width: "100%" }
-            : {}
-        }
+        style={{
+          display: visible ? "block" : "none",
+          backgroundColor: "#0008",
+          width: "100%",
+        }}
       >
         <div
           className={`modal-dialog ${
@@ -54,7 +56,9 @@ export function Modal(props: {
                 <h5 className="modal-title">{title}</h5>
               </div>
             )}
-            <div className="modal-body">{children}</div>
+            <div className="modal-body" style={style}>
+              {children}
+            </div>
             <div className="modal-footer">
               <button
                 type="button"

diff --git a/izanami-frontend/src/pages/settings.tsx b/izanami-frontend/src/pages/settings.tsx
@@ -2,10 +2,13 @@ import React, { useState } from "react";
 import { useMutation, useQuery } from "react-query";
 import queryClient from "../queryClient";
 import { string } from "yup";
+import { JsonViewer } from "@textea/json-viewer";
+import { Modal } from "../components/Modal";
 
 import {
   mailerQueryKey,
   MutationNames,
+  queryStats,
   queryConfiguration,
   queryMailerConfiguration,
   updateConfiguration,
@@ -44,14 +47,21 @@ export function yupValidationToStringError(
     return error;
   }
 }
+type StatsResultStatus =
+  | { state: "SUCCESS"; results: any }
+  | { state: "ERROR"; error: string }
+  | { state: "PENDING" }
+  | { state: "INITIAL" };
 
 export function Settings() {
   const [selectedMailer, setSelectedMailer] = useState();
+  const [resultStats, setResultStats] = useState<StatsResultStatus>({
+    state: "INITIAL",
+  });
 
   const configurationQuery = useQuery(MutationNames.CONFIGURATION, () =>
     queryConfiguration()
   );
-
   const configurationMutationQuery = useMutation(
     (data: Omit<Configuration, "version">) => updateConfiguration(data)
   );
@@ -128,8 +138,41 @@ export function Settings() {
                   ],
                 },
                 anonymousReporting: {
+                  label: () => (
+                    <>
+                      <div>
+                        <span>Anonymous reporting</span>
+                        <div>
+                          This feature allows Izanami to send us periodical
+                          reports. It won’t send sensitive or personal data,
+                          only a set of usage statistics related to Izanami:
+                          <button
+                            id="stats-button"
+                            className="btn btn-secondary btn-sm ms-2"
+                            type="button"
+                            onClick={() => {
+                              queryStats()
+                                .then((r) =>
+                                  setResultStats({
+                                    state: "SUCCESS",
+                                    results: r,
+                                  })
+                                )
+                                .catch(() => {
+                                  setResultStats({
+                                    state: "ERROR",
+                                    error: "There was an error fetching data",
+                                  });
+                                });
+                            }}
+                          >
+                            See what is sent
+                          </button>
+                        </div>
+                      </div>
+                    </>
+                  ),
                   type: "bool",
-                  label: "Anonymous reporting",
                   defaultValue: configuration.anonymousReporting,
                 },
               }}
@@ -157,7 +200,30 @@ export function Settings() {
               }}
               submitText="Update settings"
             />
+            {resultStats.state !== "INITIAL" && (
+              <Modal
+                title={"Anonymous reporting statistics"}
+                visible={true}
+                onClose={() => setResultStats({ state: "INITIAL" })}
+                style={{ maxHeight: "50vh", overflowY: "auto" }}
+              >
+                {resultStats.state === "PENDING" ? (
+                  <Loader message="Loading Statistics" />
+                ) : resultStats.state === "ERROR" ? (
+                  <div>{resultStats.error}</div>
+                ) : (
+                  <JsonViewer
+                    rootName={false}
+                    value={resultStats.results}
+                    displayDataTypes={false}
+                    displaySize={false}
+                    theme="dark"
+                  />
+                )}
+              </Modal>
+            )}
           </div>
+
           <div className="col">
             <MailerDetail mailer={selectedMailer ?? configuration.mailer} />
           </div>