Modularize integration sections in frontend

frontend/components/integrations/CloudIntegration.tsx

@@ -6,7 +6,7 @@ import {
     faX,
   } from "@fortawesome/free-solid-svg-icons";
 
-interface CloudIntegration {
+interface Props {
     integration: IntegrationOption;
     setSelectedIntegrationOption: () => void;
     integrationOptionPress: () => void;
@@ -27,7 +27,7 @@ const CloudIntegration = ({
     integrationOptionPress,
     deleteIntegrationAuth,
     authorizations
-}: CloudIntegration) => {
+}: Props) => {
     return (
         <div
         className={`relative ${

frontend/components/integrations/CloudIntegrationSection.tsx

@@ -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;

frontend/components/integrations/FrameworkIntegrationSection.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import FrameworkIntegration from "./FrameworkIntegration";
+
+interface Framework {
+    name: string;
+    image: string;
+    link: string;
+}
+
+interface Props {
+    framework: Framework
+}
+
+const FrameworkIntegrationSection = ({ frameworks }: Props) => {
+    return (
+      <>
+        <div className="flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2">
+          <h1 className="font-semibold text-3xl">Framework Integrations</h1>
+          <p className="text-base text-gray-400">
+            Click on a framework to get the setup instructions.
+          </p>
+        </div>
+        <div className="grid gap-4 grid-cols-7 grid-rows-2 mx-6 mt-4 max-w-5xl">
+          {frameworks.map((framework) => (
+            <FrameworkIntegration framework={framework} />
+          ))}
+        </div>
+      </>
+    );
+}
+
+export default FrameworkIntegrationSection;
+

frontend/components/integrations/ProjectIntegrationSection.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import Integration from "./Integration";
+import guidGenerator from "~/utilities/randomId";
+
+interface Props {
+    projectIntegrations: any
+}
+
+const ProjectIntegrationSection = ({
+    projectIntegrations
+}: Props) => {
+    return (
+        <>
+        <div className="flex flex-col justify-between items-start mx-4 mb-4 mt-6 text-xl max-w-5xl px-2">
+          <h1 className="font-semibold text-3xl">Current Project Integrations</h1>
+          <p className="text-base text-gray-400">
+            Manage your integrations of Infisical with third-party services.
+          </p>
+        </div>
+        {projectIntegrations.map((projectIntegration) => (
+          <Integration
+            key={guidGenerator()}
+            projectIntegration={projectIntegration}
+          />
+        ))}
+      </>
+    );
+}
+
+export default ProjectIntegrationSection;

frontend/pages/integrations/[id].js

@@ -4,8 +4,9 @@ import Image from "next/image";
 import { useRouter } from "next/router";
 import NavHeader from "~/components/navigation/NavHeader";
 import Integration from "~/components/integrations/Integration";
-import FrameworkIntegration from "~/components/integrations/FrameworkIntegration";
-import CloudIntegration from "~/components/integrations/CloudIntegration";
+import FrameworkIntegrationSection from "~/components/integrations/FrameworkIntegrationSection";
+import CloudIntegrationSection from "~/components/integrations/CloudIntegrationSection";
+import ProjectIntegrationSection from "~/components/integrations/ProjectIntegrationSection";
 import guidGenerator from "~/utilities/randomId";
 import { 
   frameworks
@@ -180,50 +181,21 @@ export default function Integrations() {
           handleBotActivate={handleBotActivate}
           handleIntegrationOption={handleIntegrationOption}
         />
+        
         {projectIntegrations.length > 0 && (
-          <>
-            <div className="flex flex-col justify-between items-start mx-4 mb-4 mt-6 text-xl max-w-5xl px-2">
-              <p className="font-semibold text-3xl">Current Project Integrations</p>
-              <p className="text-base text-gray-400">
-                Manage your integrations of Infisical with third-party services.
-              </p>
-            </div>
-            {projectIntegrations.map((projectIntegration) => (
-              <Integration
-                key={guidGenerator()}
-                projectIntegration={projectIntegration}
-              />
-            ))}
-          </>
+          <ProjectIntegrationSection 
+            projectIntegrations={projectIntegrations}
+          />
         )}
-        <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`}>
-          <p className="font-semibold text-3xl">Cloud Integrations</p>
-          <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>
-        <div className="flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2">
-          <p className="font-semibold text-3xl">Framework Integrations</p>
-          <p className="text-base text-gray-400">
-            Click on a framework to get the setup instructions.
-          </p>
-        </div>
-        <div className="grid gap-4 grid-cols-7 grid-rows-2 mx-6 mt-4 max-w-5xl">
-          {frameworks.map((framework) => (
-            <FrameworkIntegration framework={framework} />
-          ))}
-        </div>
+        <CloudIntegrationSection 
+          projectIntegrations={projectIntegrations}
+          integrations={integrations}
+          setSelectedIntegrationOption={setSelectedIntegrationOption}
+          integrationOptionPress={integrationOptionPress}
+          deleteIntegrationAuth={deleteIntegrationAuth}
+          authorizations={authorizations}
+        />
+        <FrameworkIntegrationSection frameworks={frameworks} />
       </div>
     </div>
   ) : (