Modularize integration sections in frontend

2026-10-12 02:29:09 +00:00 · 2022-12-11 15:20:10 -05:00
parent d410b42a34
commit 74d5586005
5 changed files with 132 additions and 46 deletions
@@ -0,0 +1,51 @@
+import React from "react";
+import CloudIntegration from "./CloudIntegration";
+
+interface IntegrationOption {
+    name: string;
+    type: string;
+    clientId: string;
+    docsLink: string;
+}
+
+interface Props {
+    projectIntegrations: any;
+    integrations: IntegrationOption[];
+    setSelectedIntegrationOption: () => void;
+    integrationOptionPress: () => void;
+    deleteIntegrationAuth: () => void;
+    authorizations: any;
+}
+
+const CloudIntegrationSection = ({ 
+    projectIntegrations,
+    integrations,
+    setSelectedIntegrationOption,
+    integrationOptionPress,
+    deleteIntegrationAuth,
+    authorizations
+}: Props) => {
+    return (
+        <>
+            <div className={`flex flex-col justify-between items-start m-4 ${projectIntegrations.length > 0 ? 'mt-12' : 'mt-6'} text-xl max-w-5xl px-2`}>
+            <h1 className="font-semibold text-3xl">Cloud Integrations</h1>
+            <p className="text-base text-gray-400">
+                Click on an integration to begin syncing secrets to it.
+            </p>
+            </div>
+            <div className="grid gap-4 grid-cols-4 grid-rows-2 mx-6 max-w-5xl">
+            {integrations.map((integration) => (
+                <CloudIntegration 
+                integration={integration}
+                setSelectedIntegrationOption={setSelectedIntegrationOption}
+                integrationOptionPress={integrationOptionPress}
+                deleteIntegrationAuth={deleteIntegrationAuth}
+                authorizations={authorizations}
+                />
+            ))}
+            </div>
+        </>
+    );
+}
+
+export default CloudIntegrationSection;