Modularize integrations into json files, continue refactoring integrations frontend

frontend/components/integrations/CloudIntegrationSection.tsx

@@ -28,21 +28,22 @@ const CloudIntegrationSection = ({
     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>
+                <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}
-                />
-            ))}
+                {integrations.map((integration) => (
+                    <CloudIntegration 
+                        integration={integration}
+                        setSelectedIntegrationOption={setSelectedIntegrationOption}
+                        integrationOptionPress={integrationOptionPress}
+                        deleteIntegrationAuth={deleteIntegrationAuth}
+                        authorizations={authorizations}
+                        key={`cloud-integration-${integration.slug}`}
+                    />
+                ))}
             </div>
         </>
     );