feat: support self hosted grist (#5655)

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

app/scenes/Settings/SelfHosted.tsx

@@ -16,6 +16,7 @@ import SettingRow from "./components/SettingRow";
 
 type FormData = {
   drawIoUrl: string;
+  gristUrl: string;
 };
 
 function SelfHosted() {
@@ -23,11 +24,16 @@ function SelfHosted() {
   const { t } = useTranslation();
   const { showToast } = useToasts();
 
-  const integration = find(integrations.orderedData, {
+  const integrationDiagrams = find(integrations.orderedData, {
     type: IntegrationType.Embed,
     service: IntegrationService.Diagrams,
   }) as Integration<IntegrationType.Embed> | undefined;
 
+  const integrationGrist = find(integrations.orderedData, {
+    type: IntegrationType.Embed,
+    service: IntegrationService.Grist,
+  }) as Integration<IntegrationType.Embed> | undefined;
+
   const {
     register,
     reset,
@@ -36,7 +42,8 @@ function SelfHosted() {
   } = useForm<FormData>({
     mode: "all",
     defaultValues: {
-      drawIoUrl: integration?.settings.url,
+      drawIoUrl: integrationDiagrams?.settings.url,
+      gristUrl: integrationGrist?.settings.url,
     },
   });
 
@@ -47,15 +54,18 @@ function SelfHosted() {
   }, [integrations]);
 
   React.useEffect(() => {
-    reset({ drawIoUrl: integration?.settings.url });
-  }, [integration, reset]);
+    reset({
+      drawIoUrl: integrationDiagrams?.settings.url,
+      gristUrl: integrationGrist?.settings.url,
+    });
+  }, [integrationDiagrams, integrationGrist, reset]);
 
   const handleSubmit = React.useCallback(
     async (data: FormData) => {
       try {
         if (data.drawIoUrl) {
           await integrations.save({
-            id: integration?.id,
+            id: integrationDiagrams?.id,
             type: IntegrationType.Embed,
             service: IntegrationService.Diagrams,
             settings: {
@@ -63,7 +73,20 @@ function SelfHosted() {
             },
           });
         } else {
-          await integration?.delete();
+          await integrationDiagrams?.delete();
+        }
+
+        if (data.gristUrl) {
+          await integrations.save({
+            id: integrationGrist?.id,
+            type: IntegrationType.Embed,
+            service: IntegrationService.Grist,
+            settings: {
+              url: data.gristUrl,
+            },
+          });
+        } else {
+          await integrationGrist?.delete();
         }
 
         showToast(t("Settings saved"), {
@@ -75,7 +98,7 @@ function SelfHosted() {
         });
       }
     },
-    [integrations, integration, t, showToast]
+    [integrations, integrationDiagrams, integrationGrist, t, showToast]
   );
 
   return (
@@ -98,6 +121,19 @@ function SelfHosted() {
           />
         </SettingRow>
 
+        <SettingRow
+          label={t("Grist deployment")}
+          name="gristUrl"
+          description={t("Add your self-hosted grist installation URL here.")}
+          border={false}
+        >
+          <Input
+            placeholder="https://docs.getgrist.com/"
+            pattern="https?://.*"
+            {...register("gristUrl")}
+          />
+        </SettingRow>
+
         <Button type="submit" disabled={formState.isSubmitting}>
           {formState.isSubmitting ? `${t("Saving")}…` : t("Save")}
         </Button>