Continue trimming frontend integration page and renaming variables

2026-09-22 13:39:35 +00:00 · 2022-12-12 10:36:13 -05:00
parent 397c15d61e
commit c6c2cfaaa5
6 changed files with 94 additions and 94 deletions
--- 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');

--- 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
--- a/frontend/components/integrations/CloudIntegrationSection.tsx
+++ b/frontend/components/integrations/CloudIntegrationSection.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import CloudIntegration from "./CloudIntegration";

-interface IntegrationOption {
+interface CloudIntegrationOption {
    name: string;
    type: string;
    clientId: string;
@@ -9,39 +9,34 @@ interface IntegrationOption {
 }

 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>
--- 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,8 +79,8 @@ 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>
@@ -87,14 +88,14 @@ const Integration = ({
                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();
                }}
--- a/frontend/components/integrations/ProjectIntegrationSection.tsx
+++ b/frontend/components/integrations/ProjectIntegrationSection.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;
--- a/frontend/pages/integrations/[id].js
+++ b/frontend/pages/integrations/[id].js
@@ -6,10 +6,9 @@ import NavHeader from "~/components/navigation/NavHeader";
 import Integration from "~/components/integrations/Integration";
 import FrameworkIntegrationSection from "~/components/integrations/FrameworkIntegrationSection";
 import CloudIntegrationSection from "~/components/integrations/CloudIntegrationSection";
-import ProjectIntegrationSection from "~/components/integrations/ProjectIntegrationSection";
-import frameworkIntegrations from "../../public/json/frameworkIntegrations.json";
-import cloudIntegrations from "../../public/json/cloudIntegrations.json";
-import deleteIntegrationAuth from "../api/integrations/DeleteIntegrationAuth";
+import IntegrationSection from "~/components/integrations/IntegrationSection";
+import frameworkIntegrationOptions from "../../public/json/frameworkIntegrations.json";
+import cloudIntegrationOptions from "../../public/json/cloudIntegrations.json";
 import getWorkspaceAuthorizations from "../api/integrations/getWorkspaceAuthorizations";
 import getWorkspaceIntegrations from "../api/integrations/getWorkspaceIntegrations";
 import getBot from "../api/bot/getBot";
@@ -34,19 +33,25 @@ export default function Integrations() {
  useEffect(async () => {
    try {
      // get project integration authorizations
-      setIntegrationAuths(await getWorkspaceAuthorizations({
-        workspaceId: router.query.id,
-      }));
+      setIntegrationAuths(
+        await getWorkspaceAuthorizations({
+          workspaceId: router.query.id,
+        })
+      );

      // get project integrations
-      setIntegrations(await getWorkspaceIntegrations({
-        workspaceId: router.query.id,
-      }));
+      setIntegrations(
+        await getWorkspaceIntegrations({
+          workspaceId: router.query.id,
+        })
+      );
      
      // get project bot
-      setBot(await getBot({
-        workspaceId: router.query.id
-      }));
+      setBot(
+        await getBot({
+          workspaceId: router.query.id
+        }
+      ));
      
    } catch (err) {
      console.log(err);
@@ -159,7 +164,10 @@ export default function Integrations() {
        />
      </Head>
      <div className="w-full max-h-96 pb-2 h-screen max-h-[calc(100vh-10px)] overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
-        <NavHeader pageName="Project Integrations" isProjectRelated={true} />
+        <NavHeader 
+          pageName="Project Integrations" 
+          isProjectRelated={true} 
+        />
        <ActivateBotDialog 
          isOpen={isActivateBotOpen}
          closeModal={() => setIsActivateBotOpen(false)}
@@ -167,21 +175,15 @@ export default function Integrations() {
          handleBotActivate={handleBotActivate}
          handleIntegrationOption={handleIntegrationOption}
        />
-        {integrations.length > 0 && ( // shouldn't need to check for length
-          <ProjectIntegrationSection 
-            projectIntegrations={integrations}
-          />
-        )}
+        <IntegrationSection integrations={integrations} />
        <CloudIntegrationSection 
-          projectIntegrations={integrations}
-          integrations={cloudIntegrations}
+          cloudIntegrationOptions={cloudIntegrationOptions}
          setSelectedIntegrationOption={setSelectedIntegrationOption}
          integrationOptionPress={integrationOptionPress}
-          deleteIntegrationAuth={deleteIntegrationAuth}
-          authorizations={integrationAuths}
+          integrationAuths={integrationAuths}
        />
        <FrameworkIntegrationSection 
-          frameworks={frameworkIntegrations} 
+          frameworks={frameworkIntegrationOptions} 
        />
      </div>
    </div>