Add integrations page (#9155)

* update useSettings

* Integration page skeleton

* add descriptions

* update design

* Integration page style update

* clean up

* update integration card

Co-authored-by: Tom Moor <tom.moor@gmail.com>

* Update integration icon size

Co-authored-by: Tom Moor <tom.moor@gmail.com>

* Update all integrations menu item

* update IntegrationCard to use the `Text` component

* update card status

* fix: Google analytics never shows as installed
fix: Styling tweaks
Move webhooks out of integrations

* Add breadcrumbs

* Add filtering

* refactor

* Add hover state, tweak descriptions

---------

Co-authored-by: Tess99854 <tesnimesb@gmail.com>
Co-authored-by: Mahmoud Mohammed Ali <ibn.el4ai5@gmail.com>
Co-authored-by: Mahmoud Ali <mahmoud.ali.khallaf@gmail.com>

plugins/googleanalytics/client/Settings.tsx

@@ -6,12 +6,12 @@ import { useTranslation, Trans } from "react-i18next";
 import { toast } from "sonner";
 import { IntegrationType, IntegrationService } from "@shared/types";
 import Integration from "~/models/Integration";
+import { IntegrationScene } from "~/scenes/Settings/components/IntegrationScene";
 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";
 
@@ -75,7 +75,7 @@ function GoogleAnalytics() {
   );
 
   return (
-    <Scene title={t("Google Analytics")} icon={<GoogleIcon />}>
+    <IntegrationScene title={t("Google Analytics")} icon={<GoogleIcon />}>
       <Heading>{t("Google Analytics")}</Heading>
 
       <Text as="p" type="secondary">
@@ -100,7 +100,7 @@ function GoogleAnalytics() {
           {formState.isSubmitting ? `${t("Saving")}…` : t("Save")}
         </Button>
       </form>
-    </Scene>
+    </IntegrationScene>
   );
 }
 

plugins/googleanalytics/client/index.tsx

@@ -10,6 +10,8 @@ PluginManager.add([
     value: {
       group: "Integrations",
       icon: Icon,
+      description:
+        "Measure adoption and engagement by sending view and event analytics directly to your GA4 dashboard.",
       component: createLazyComponent(() => import("./Settings")),
     },
   },

plugins/googleanalytics/plugin.json

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