Continue trimming frontend integration page and renaming variables

Infisical · Dec 12, 2022 · c6c2cfa · c6c2cfa
1 parent 397c15d
commit c6c2cfa
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 94 deletions.
diff --git a/backend/src/helpers/integration.ts b/backend/src/helpers/integration.ts
@@ -84,7 +84,6 @@ const handleOAuthExchangeHelper = async ({
         }).save();
 
     } catch (err) {
-        console.error('in', err);
         Sentry.setUser(null);
         Sentry.captureException(err);
         throw new Error('Failed to handle OAuth2 code-token exchange')
@@ -184,7 +183,7 @@ const getIntegrationAuthAccessHelper = async ({ integrationAuthId }: { integrati
     try {
         const integrationAuth = await IntegrationAuth
             .findById(integrationAuthId)
-            .select('+accessCiphertext +accessIV +accessTag');
+            .select('workspace integration +accessCiphertext +accessIV +accessTag +accessExpiresAt + refreshCiphertext');
 
         if (!integrationAuth) throw new Error('Failed to find integration auth');
 

diff --git a/frontend/components/integrations/CloudIntegration.tsx b/frontend/components/integrations/CloudIntegration.tsx
@@ -5,77 +5,76 @@ import {
     faCheck,
     faX,
   } from "@fortawesome/free-solid-svg-icons";
+import deleteIntegrationAuth from "../../pages/api/integrations/DeleteIntegrationAuth";
 
-interface Props {
-    integration: IntegrationOption;
-    setSelectedIntegrationOption: () => void;
-    integrationOptionPress: () => void;
-    deleteIntegrationAuth: () => void;
-    authorizations: any;
-}
-
-interface IntegrationOption {
+interface CloudIntegrationOption {
     name: string;
     type: string;
     clientId: string;
     docsLink: string;
 }
 
+interface Props {
+    cloudIntegrationOption: CloudIntegrationOption;
+    setSelectedIntegrationOption: () => void;
+    integrationOptionPress: () => void;
+    integrationAuths: any;
+}
+
 const CloudIntegration = ({
-    integration,
+    cloudIntegrationOption,
     setSelectedIntegrationOption,
     integrationOptionPress,
-    deleteIntegrationAuth,
-    authorizations
+    integrationAuths
 }: Props) => {
-    return authorizations ? (
+    return integrationAuths ? (
         <div
         className={`relative ${
-            ["Heroku"].includes(integration.name)
+            ["Heroku"].includes(cloudIntegrationOption.name)
             ? "hover:bg-white/10 duration-200 cursor-pointer"
             : "opacity-50"
         } flex flex-row bg-white/5 h-32 rounded-md p-4 items-center`}
         onClick={() => {
-            if (!["Heroku"].includes(integration.name)) return;
-            setSelectedIntegrationOption(integration);
+            if (!["Heroku"].includes(cloudIntegrationOption.name)) return;
+            setSelectedIntegrationOption(cloudIntegrationOption);
             integrationOptionPress({
-            integrationOption: integration
+                integrationOption: cloudIntegrationOption
             });
         }}
-        key={integration.name}
+        key={cloudIntegrationOption.name}
         >
             <Image
-            src={`/images/integrations/${integration.name}.png`}
+            src={`/images/integrations/${cloudIntegrationOption.name}.png`}
             height={70}
             width={70}
             alt="integration logo"
             />
-            {integration.name.split(" ").length > 2 ? (
+            {cloudIntegrationOption.name.split(" ").length > 2 ? (
             <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-3xl ml-4 max-w-xs">
-                <div>{integration.name.split(" ")[0]}</div>
+                <div>{cloudIntegrationOption.name.split(" ")[0]}</div>
                 <div className="text-base">
-                {integration.name.split(" ")[1]}{" "}
-                {integration.name.split(" ")[2]}
+                {cloudIntegrationOption.name.split(" ")[1]}{" "}
+                {cloudIntegrationOption.name.split(" ")[2]}
                 </div>
             </div>
             ) : (
             <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-xl ml-4 max-w-xs">
-                {integration.name}
+                {cloudIntegrationOption.name}
             </div>
             )}
-        {["Heroku"].includes(integration.name) &&
-            authorizations
+        {["Heroku"].includes(cloudIntegrationOption.name) &&
+            integrationAuths
             .map((authorization) => authorization.integration)
-            .includes(integration.name.toLowerCase()) && (
+            .includes(cloudIntegrationOption.name.toLowerCase()) && (
             <div className="absolute group z-50 top-0 right-0 flex flex-row">
                 <div
                 onClick={() => {
                     deleteIntegrationAuth({
-                    integrationAuthId: authorizations
+                    integrationAuthId: integrationAuths
                         .filter(
                         (authorization) =>
                             authorization.integration ==
-                            integration.name.toLowerCase()
+                            cloudIntegrationOption.name.toLowerCase()
                         )
                         .map((authorization) => authorization._id)[0],
                     });
@@ -98,7 +97,7 @@ const CloudIntegration = ({
                 </div>
             </div>
             )}
-        {!["Heroku"].includes(integration.name) && (
+        {!["Heroku"].includes(cloudIntegrationOption.name) && (
             <div className="absolute group z-50 top-0 right-0 flex flex-row">
             <div className="w-max bg-yellow py-0.5 px-2 rounded-bl-md rounded-tr-md text-xs flex flex-row items-center text-black opacity-90">
                 Coming Soon

diff --git a/frontend/components/integrations/CloudIntegrationSection.tsx b/frontend/components/integrations/CloudIntegrationSection.tsx
@@ -1,47 +1,42 @@
 import React from "react";
 import CloudIntegration from "./CloudIntegration";
 
-interface IntegrationOption {
+interface CloudIntegrationOption {
     name: string;
     type: string;
     clientId: string;
     docsLink: string;
 }
 
 interface Props {
-    projectIntegrations: any;
-    integrations: IntegrationOption[];
+    cloudIntegrationOptions: CloudIntegrationOption[];
     setSelectedIntegrationOption: () => void;
     integrationOptionPress: () => void;
-    deleteIntegrationAuth: () => void;
-    authorizations: any;
+    integrationAuths: any;
 }
 
 const CloudIntegrationSection = ({ 
-    projectIntegrations,
-    integrations,
+    cloudIntegrationOptions,
     setSelectedIntegrationOption,
     integrationOptionPress,
-    deleteIntegrationAuth,
-    authorizations
+    integrationAuths
 }: 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`}>
+            <div className={`flex flex-col justify-between items-start m-4 mt-7 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) => (
+                {cloudIntegrationOptions.map((cloudIntegrationOption) => (
                     <CloudIntegration 
-                        integration={integration}
+                        cloudIntegrationOption={cloudIntegrationOption}
                         setSelectedIntegrationOption={setSelectedIntegrationOption}
                         integrationOptionPress={integrationOptionPress}
-                        deleteIntegrationAuth={deleteIntegrationAuth}
-                        authorizations={authorizations}
-                        key={`cloud-integration-${integration.slug}`}
+                        integrationAuths={integrationAuths}
+                        key={`cloud-integration-${cloudIntegrationOption.slug}`}
                     />
                 ))}
             </div>

diff --git a/frontend/components/integrations/Integration.tsx b/frontend/components/integrations/Integration.tsx
@@ -15,7 +15,7 @@ import getIntegrationApps from "../../pages/api/integrations/GetIntegrationApps"
 import Button from "~/components/basic/buttons/Button";
 import ListBox from "~/components/basic/Listbox";
 
-interface ProjectIntegration {
+interface Integration {
     app?: string;
     environment: string;
     integration: string;
@@ -24,28 +24,29 @@ interface ProjectIntegration {
 }
 
 const Integration = ({ 
-    projectIntegration 
+  integration
 }: {
-    projectIntegration: ProjectIntegration;
+  integration: Integration;
 }) => {
     const [integrationEnvironment, setIntegrationEnvironment] = useState(
-      reverseEnvMapping[projectIntegration.environment]
+      reverseEnvMapping[integration.environment]
     );
     const [fileState, setFileState] = useState([]);
     const router = useRouter();
     const [apps, setApps] = useState([]);
     const [integrationApp, setIntegrationApp] = useState(
-      projectIntegration.app ? projectIntegration.app : apps[0]
+      integration.app ? integration.app : apps[0]
     );
 
     useEffect(async () => {
       const tempHerokuApps = await getIntegrationApps({
-        integrationAuthId: projectIntegration.integrationAuth,
+        integrationAuthId: integration.integrationAuth,
       });
+
       const tempHerokuAppNames = tempHerokuApps.map((app) => app.name);
       setApps(tempHerokuAppNames);
       setIntegrationApp(
-        projectIntegration.app ? projectIntegration.app : tempHerokuAppNames[0]
+        integration.app ? integration.app : tempHerokuAppNames[0]
       );
     }, []);
 
@@ -59,7 +60,7 @@ const Integration = ({
               </div>
               <ListBox
                 data={
-                  !projectIntegration.isActive && [
+                  !integration.isActive && [
                     "Development",
                     "Staging",
                     "Production",
@@ -78,23 +79,23 @@ const Integration = ({
                 INTEGRATION
               </div>
               <div className="py-2.5 bg-white/[.07] rounded-md pl-4 pr-20 text-sm font-semibold text-gray-300">
-                {projectIntegration.integration.charAt(0).toUpperCase() +
-                  projectIntegration.integration.slice(1)}
+                {integration.integration.charAt(0).toUpperCase() +
+                  integration.integration.slice(1)}
               </div>
             </div>
             <div>
               <div className="text-gray-400 self-start ml-1 mb-1 text-xs font-semibold tracking-wide">
                 HEROKU APP
               </div>
               <ListBox
-                data={!projectIntegration.isActive && apps}
+                data={!integration.isActive && apps}
                 selected={integrationApp}
                 onChange={setIntegrationApp}
               />
             </div>
           </div>
           <div className="flex flex-row mt-6">
-            {projectIntegration.isActive ? (
+            {integration.isActive ? (
               <div className="max-w-5xl flex flex-row items-center bg-white/5 p-2 rounded-md px-4">
                 <FontAwesomeIcon
                   icon={faRotate}
@@ -107,7 +108,7 @@ const Integration = ({
                 text="Start Integration"
                 onButtonPressed={async () => {
                   const result = await updateIntegration({
-                    integrationId: projectIntegration._id,
+                    integrationId: integration._id,
                     environment: envMapping[integrationEnvironment],
                     app: integrationApp,
                     isActive: true
@@ -122,7 +123,7 @@ const Integration = ({
               <Button
                 onButtonPressed={async () => {
                   await deleteIntegration({
-                    integrationId: projectIntegration._id,
+                    integrationId: integration._id,
                   });
                   router.reload();
                 }}

diff --git a/...ntegrations/ProjectIntegrationSection.tsx → ...nents/integrations/IntegrationSection.tsx b/...ntegrations/ProjectIntegrationSection.tsx → ...nents/integrations/IntegrationSection.tsx
@@ -2,29 +2,33 @@ import React from "react";
 import Integration from "./Integration";
 import guidGenerator from "~/utilities/randomId";
 
+interface Integration {
+
+}
+
 interface Props {
-    projectIntegrations: any
+  integrations: any
 }
 
 const ProjectIntegrationSection = ({
-    projectIntegrations
+  integrations
 }: Props) => {
-    return (
-        <>
+    return integrations.length > 0 ? (
+      <div className="mb-12">
         <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) => (
+        {integrations.map((integration  => ( 
           <Integration
             key={guidGenerator()}
-            projectIntegration={projectIntegration}
+            integration={integration}
           />
-        ))}
-      </>
-    );
+        )))}
+      </div>
+    ) : <div></div>
 }
 
 export default ProjectIntegrationSection;