Matomo integration (#7009)

plugins/googleanalytics/client/Icon.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+type Props = {
+  /** The size of the icon, 24px is default to match standard icons */
+  size?: number;
+  /** The color of the icon, defaults to the current text color */
+  fill?: string;
+  className?: string;
+};
+
+function GoogleLogo({ size = 24, fill = "currentColor", className }: Props) {
+  return (
+    <svg
+      fill={fill}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path d="M19.2312 10.5455H11.8276V13.6364H16.0892C15.6919 15.6 14.0306 16.7273 11.8276 16.7273C9.22733 16.7273 7.13267 14.6182 7.13267 12C7.13267 9.38182 9.22733 7.27273 11.8276 7.27273C12.9472 7.27273 13.9584 7.67273 14.7529 8.32727L17.0643 6C15.6558 4.76364 13.85 4 11.8276 4C7.42159 4 3.88232 7.56364 3.88232 12C3.88232 16.4364 7.42159 20 11.8276 20C15.8002 20 19.4117 17.0909 19.4117 12C19.4117 11.5273 19.3395 11.0182 19.2312 10.5455Z" />
+    </svg>
+  );
+}
+
+export default GoogleLogo;

plugins/googleanalytics/client/Settings.tsx

@@ -0,0 +1,107 @@
+import find from "lodash/find";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation, Trans } from "react-i18next";
+import { toast } from "sonner";
+import { IntegrationType, IntegrationService } from "@shared/types";
+import Integration from "~/models/Integration";
+import SettingRow from "~/scenes/Settings/components/SettingRow";
+import Button from "~/components/Button";
+import Heading from "~/components/Heading";
+import GoogleIcon from "~/components/Icons/GoogleIcon";
+import Input from "~/components/Input";
+import Scene from "~/components/Scene";
+import Text from "~/components/Text";
+import useStores from "~/hooks/useStores";
+
+type FormData = {
+  measurementId: string;
+};
+
+function GoogleAnalytics() {
+  const { integrations } = useStores();
+  const { t } = useTranslation();
+
+  const integration = find(integrations.orderedData, {
+    type: IntegrationType.Analytics,
+    service: IntegrationService.GoogleAnalytics,
+  }) as Integration<IntegrationType.Analytics> | undefined;
+
+  const {
+    register,
+    reset,
+    handleSubmit: formHandleSubmit,
+    formState,
+  } = useForm<FormData>({
+    mode: "all",
+    defaultValues: {
+      measurementId: integration?.settings.measurementId,
+    },
+  });
+
+  React.useEffect(() => {
+    void integrations.fetchPage({
+      type: IntegrationType.Analytics,
+    });
+  }, [integrations]);
+
+  React.useEffect(() => {
+    reset({ measurementId: integration?.settings.measurementId });
+  }, [integration, reset]);
+
+  const handleSubmit = React.useCallback(
+    async (data: FormData) => {
+      try {
+        if (data.measurementId) {
+          await integrations.save({
+            id: integration?.id,
+            type: IntegrationType.Analytics,
+            service: IntegrationService.GoogleAnalytics,
+            settings: {
+              measurementId: data.measurementId,
+            },
+          });
+        } else {
+          await integration?.delete();
+        }
+
+        toast.success(t("Settings saved"));
+      } catch (err) {
+        toast.error(err.message);
+      }
+    },
+    [integrations, integration, t]
+  );
+
+  return (
+    <Scene title={t("Google Analytics")} icon={<GoogleIcon />}>
+      <Heading>{t("Google Analytics")}</Heading>
+
+      <Text as="p" type="secondary">
+        <Trans>
+          Add a Google Analytics 4 measurement ID to send document views and
+          analytics from the workspace to your own Google Analytics account.
+        </Trans>
+      </Text>
+      <form onSubmit={formHandleSubmit(handleSubmit)}>
+        <SettingRow
+          label={t("Measurement ID")}
+          name="measurementId"
+          description={t(
+            'Create a "Web" stream in your Google Analytics admin dashboard and copy the measurement ID from the generated code snippet to install.'
+          )}
+          border={false}
+        >
+          <Input placeholder="G-XXXXXXXXX1" {...register("measurementId")} />
+        </SettingRow>
+
+        <Button type="submit" disabled={formState.isSubmitting}>
+          {formState.isSubmitting ? `${t("Saving")}…` : t("Save")}
+        </Button>
+      </form>
+    </Scene>
+  );
+}
+
+export default observer(GoogleAnalytics);

plugins/googleanalytics/plugin.json

@@ -0,0 +1,6 @@
+{
+  "id": "googleanalytics",
+  "name": "Google Analytics",
+  "priority": 30,
+  "description": "Adds support for reporting analytics to a Google."
+}