awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-09 12:28:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(integrations-page): added back cloudflare changes in main integrations page

Browse Source
This commit is contained in:
akhilmhdh
2023-06-24 23:35:55 +05:30
parent 611fae785a
commit 9c0e32a790
2 changed files with 63 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx
+28 -25
View File
@@ -1,17 +1,17 @@
import crypto from 'crypto'; import crypto from "crypto";
import { UserWsKeyPair, TCloudIntegration } from '@app/hooks/api/types'; import { UserWsKeyPair, TCloudIntegration } from "@app/hooks/api/types";
import { import {
decryptAssymmetric, decryptAssymmetric,
encryptAssymmetric encryptAssymmetric
} from '../../components/utilities/cryptography/crypto'; } from "../../components/utilities/cryptography/crypto";
export const generateBotKey = (botPublicKey: string, latestKey: UserWsKeyPair) => { export const generateBotKey = (botPublicKey: string, latestKey: UserWsKeyPair) => {
const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY'); const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
if (!PRIVATE_KEY) { if (!PRIVATE_KEY) {
throw new Error('Private Key missing'); throw new Error("Private Key missing");
} }
const WORKSPACE_KEY = decryptAssymmetric({ const WORKSPACE_KEY = decryptAssymmetric({
@@ -33,64 +33,67 @@ export const generateBotKey = (botPublicKey: string, latestKey: UserWsKeyPair) =
export const redirectForProviderAuth = (integrationOption: TCloudIntegration) => { export const redirectForProviderAuth = (integrationOption: TCloudIntegration) => {
try { try {
// generate CSRF token for OAuth2 code-token exchange integrations // generate CSRF token for OAuth2 code-token exchange integrations
const state = crypto.randomBytes(16).toString('hex'); const state = crypto.randomBytes(16).toString("hex");
localStorage.setItem('latestCSRFToken', state); localStorage.setItem("latestCSRFToken", state);
let link = ''; let link = "";
switch (integrationOption.slug) { switch (integrationOption.slug) {
case 'azure-key-vault': case "azure-key-vault":
link = `https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${window.location.origin}/integrations/azure-key-vault/oauth2/callback&response_mode=query&scope=https://vault.azure.net/.default openid offline_access&state=${state}`; link = `https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${window.location.origin}/integrations/azure-key-vault/oauth2/callback&response_mode=query&scope=https://vault.azure.net/.default openid offline_access&state=${state}`;
break; break;
case 'aws-parameter-store': case "aws-parameter-store":
link = `${window.location.origin}/integrations/aws-parameter-store/authorize`; link = `${window.location.origin}/integrations/aws-parameter-store/authorize`;
break; break;
case 'aws-secret-manager': case "aws-secret-manager":
link = `${window.location.origin}/integrations/aws-secret-manager/authorize`; link = `${window.location.origin}/integrations/aws-secret-manager/authorize`;
break; break;
case 'heroku': case "heroku":
link = `https://id.heroku.com/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=write-protected&state=${state}`; link = `https://id.heroku.com/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=write-protected&state=${state}`;
break; break;
case 'vercel': case "vercel":
link = `https://vercel.com/integrations/${integrationOption.clientSlug}/new?state=${state}`; link = `https://vercel.com/integrations/${integrationOption.clientSlug}/new?state=${state}`;
break; break;
case 'netlify': case "netlify":
link = `https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&state=${state}&redirect_uri=${window.location.origin}/integrations/netlify/oauth2/callback`; link = `https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&state=${state}&redirect_uri=${window.location.origin}/integrations/netlify/oauth2/callback`;
break; break;
case 'github': case "github":
link = `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo&redirect_uri=${window.location.origin}/integrations/github/oauth2/callback&state=${state}`; link = `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo&redirect_uri=${window.location.origin}/integrations/github/oauth2/callback&state=${state}`;
break; break;
case 'gitlab': case "gitlab":
link = `https://gitlab.com/oauth/authorize?client_id=${integrationOption.clientId}&redirect_uri=${window.location.origin}/integrations/gitlab/oauth2/callback&response_type=code&state=${state}`; link = `https://gitlab.com/oauth/authorize?client_id=${integrationOption.clientId}&redirect_uri=${window.location.origin}/integrations/gitlab/oauth2/callback&response_type=code&state=${state}`;
break; break;
case 'render': case "render":
link = `${window.location.origin}/integrations/render/authorize`; link = `${window.location.origin}/integrations/render/authorize`;
break; break;
case 'flyio': case "flyio":
link = `${window.location.origin}/integrations/flyio/authorize`; link = `${window.location.origin}/integrations/flyio/authorize`;
break; break;
case 'circleci': case "circleci":
link = `${window.location.origin}/integrations/circleci/authorize`; link = `${window.location.origin}/integrations/circleci/authorize`;
break; break;
case 'travisci': case "travisci":
link = `${window.location.origin}/integrations/travisci/authorize`; link = `${window.location.origin}/integrations/travisci/authorize`;
break; break;
case 'supabase': case "supabase":
link = `${window.location.origin}/integrations/supabase/authorize`; link = `${window.location.origin}/integrations/supabase/authorize`;
break; break;
case 'checkly': case "checkly":
link = `${window.location.origin}/integrations/checkly/authorize`; link = `${window.location.origin}/integrations/checkly/authorize`;
break; break;
case 'railway': case "railway":
link = `${window.location.origin}/integrations/railway/authorize`; link = `${window.location.origin}/integrations/railway/authorize`;
break; break;
case 'hashicorp-vault': case "hashicorp-vault":
link = `${window.location.origin}/integrations/hashicorp-vault/authorize`; link = `${window.location.origin}/integrations/hashicorp-vault/authorize`;
break; break;
case "cloudflare-pages":
link = `${window.location.origin}/integrations/cloudflare-pages/authorize`;
break;
default: default:
break; break;
} }
if (link !== '') { if (link !== "") {
window.location.assign(link); window.location.assign(link);
} }
} catch (err) { } catch (err) {
frontend/src/views/IntegrationsPage/IntegrationsPage.tsx
+35 -34
View File
@@ -1,12 +1,12 @@
import { useCallback, useEffect } from 'react'; import { useCallback, useEffect } from "react";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { useRouter } from 'next/router'; import { useRouter } from "next/router";
import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider'; import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
import NavHeader from '@app/components/navigation/NavHeader'; import NavHeader from "@app/components/navigation/NavHeader";
import { Button,Modal, ModalContent } from '@app/components/v2'; import { Button, Modal, ModalContent } from "@app/components/v2";
import { useWorkspace } from '@app/context'; import { useWorkspace } from "@app/context";
import { usePopUp } from '@app/hooks'; import { usePopUp } from "@app/hooks";
import { import {
useDeleteIntegration, useDeleteIntegration,
useDeleteIntegrationAuth, useDeleteIntegrationAuth,
@@ -15,17 +15,18 @@ import {
useGetWorkspaceAuthorizations, useGetWorkspaceAuthorizations,
useGetWorkspaceBot, useGetWorkspaceBot,
useGetWorkspaceIntegrations, useGetWorkspaceIntegrations,
useUpdateBotActiveStatus} from '@app/hooks/api'; useUpdateBotActiveStatus
import { IntegrationAuth } from '@app/hooks/api/types'; } from "@app/hooks/api";
import { IntegrationAuth } from "@app/hooks/api/types";
import { CloudIntegrationSection } from './components/CloudIntegrationSection'; import { CloudIntegrationSection } from "./components/CloudIntegrationSection";
import { FrameworkIntegrationSection } from './components/FrameworkIntegrationSection'; import { FrameworkIntegrationSection } from "./components/FrameworkIntegrationSection";
import { IntegrationsSection } from './components/IntegrationsSection'; import { IntegrationsSection } from "./components/IntegrationsSection";
import { import {
generateBotKey, generateBotKey,
redirectForProviderAuth, redirectForProviderAuth,
redirectToIntegrationAppConfigScreen redirectToIntegrationAppConfigScreen
} from './IntegrationPage.utils'; } from "./IntegrationPage.utils";
type Props = { type Props = {
frameworkIntegrations: Array<{ name: string; slug: string; image: string; docsLink: string }>; frameworkIntegrations: Array<{ name: string; slug: string; image: string; docsLink: string }>;
@@ -37,15 +38,15 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
const router = useRouter(); const router = useRouter();
const { currentWorkspace } = useWorkspace(); const { currentWorkspace } = useWorkspace();
const workspaceId = currentWorkspace?._id || ''; const workspaceId = currentWorkspace?._id || "";
const environments = currentWorkspace?.environments || []; const environments = currentWorkspace?.environments || [];
const { data: latestWsKey } = useGetUserWsKey(workspaceId); const { data: latestWsKey } = useGetUserWsKey(workspaceId);
const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([ const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
'activeBot', "activeBot",
'revokeProviderPermissionConf', "revokeProviderPermissionConf",
'removeIntegrationConf' "removeIntegrationConf"
] as const); ] as const);
const { data: cloudIntegrations, isLoading: isCloudIntegrationsLoading } = const { data: cloudIntegrations, isLoading: isCloudIntegrationsLoading } =
@@ -126,7 +127,7 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
// confirmation to user passing the bot key for provider to get secret access // confirmation to user passing the bot key for provider to get secret access
const handleProviderIntegrationStart = (provider: string) => { const handleProviderIntegrationStart = (provider: string) => {
if (!bot?.isActive) { if (!bot?.isActive) {
handlePopUpOpen('activeBot', { provider }); handlePopUpOpen("activeBot", { provider });
return; return;
} }
handleProviderIntegration(provider); handleProviderIntegration(provider);
@@ -135,7 +136,7 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
const handleUserAcceptBotCondition = () => { const handleUserAcceptBotCondition = () => {
const { provider } = popUp.activeBot?.data as { provider: string }; const { provider } = popUp.activeBot?.data as { provider: string };
handleProviderIntegration(provider); handleProviderIntegration(provider);
handlePopUpClose('activeBot'); handlePopUpClose("activeBot");
}; };
const handleIntegrationDelete = async (integrationId: string, cb: () => void) => { const handleIntegrationDelete = async (integrationId: string, cb: () => void) => {
@@ -143,14 +144,14 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
await deleteIntegration({ id: integrationId, workspaceId }); await deleteIntegration({ id: integrationId, workspaceId });
if (cb) cb(); if (cb) cb();
createNotification({ createNotification({
type: 'success', type: "success",
text: 'Deleted integration' text: "Deleted integration"
}); });
} catch (err) { } catch (err) {
console.log(err); console.log(err);
createNotification({ createNotification({
type: 'error', type: "error",
text: 'Failed to delete integration' text: "Failed to delete integration"
}); });
} }
}; };
@@ -165,21 +166,21 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
}); });
if (cb) cb(); if (cb) cb();
createNotification({ createNotification({
type: 'success', type: "success",
text: 'Revoked provider authentication' text: "Revoked provider authentication"
}); });
} catch (err) { } catch (err) {
console.error(err); console.error(err);
createNotification({ createNotification({
type: 'error', type: "error",
text: 'Failed to revoke provider authentication' text: "Failed to revoke provider authentication"
}); });
} }
}; };
return ( return (
<div className="container mx-auto px-8 pb-12 text-white"> <div className="container mx-auto px-8 pb-12 text-white">
<NavHeader pageName={t('integrations.title')} isProjectRelated /> <NavHeader pageName={t("integrations.title")} isProjectRelated />
<IntegrationsSection <IntegrationsSection
isLoading={isIntegrationLoading} isLoading={isIntegrationLoading}
integrations={integrations} integrations={integrations}
@@ -195,17 +196,17 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
/> />
<Modal <Modal
isOpen={popUp.activeBot?.isOpen} isOpen={popUp.activeBot?.isOpen}
onOpenChange={(isOpen) => handlePopUpToggle('activeBot', isOpen)} onOpenChange={(isOpen) => handlePopUpToggle("activeBot", isOpen)}
> >
<ModalContent <ModalContent
title={t('integrations.grant-access-to-secrets') as string} title={t("integrations.grant-access-to-secrets") as string}
footerContent={ footerContent={
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Button onClick={() => handleUserAcceptBotCondition()}> <Button onClick={() => handleUserAcceptBotCondition()}>
{t('integrations.grant-access-button') as string} {t("integrations.grant-access-button") as string}
</Button> </Button>
<Button <Button
onClick={() => handlePopUpClose('activeBot')} onClick={() => handlePopUpClose("activeBot")}
variant="outline_bg" variant="outline_bg"
colorSchema="secondary" colorSchema="secondary"
> >
@@ -214,7 +215,7 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
</div> </div>
} }
> >
{t('integrations.why-infisical-needs-access')} {t("integrations.why-infisical-needs-access")}
</ModalContent> </ModalContent>
</Modal> </Modal>
<FrameworkIntegrationSection frameworks={frameworkIntegrations} /> <FrameworkIntegrationSection frameworks={frameworkIntegrations} />