awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-08 03:27:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

allowed creating multiple github integrations to different apps at once

Browse Source
This commit is contained in:
Vladyslav Matsiiako
2023-10-08 17:05:26 -07:00
parent 5971480ca9
commit ee6afa8983
3 changed files with 67 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/v2/SecretInput/SecretInput.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ const sanitizeConf = {
const syntaxHighlight = (content?: string | null, isVisible?: boolean) => { const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
if (content === "") return "EMPTY"; if (content === "") return "EMPTY";
if (!content) return "missing"; if (!content) return "EMPTY";
if (!isVisible) return replaceContentWithDot(content); if (!isVisible) return replaceContentWithDot(content);
const sanitizedContent = sanitizeHtml( const sanitizedContent = sanitizeHtml(
frontend/src/pages/integrations/github/create.tsx
+65 -42
View File
@@ -3,7 +3,7 @@ import Head from "next/head";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons"; import { faAngleDown, faArrowUpRightFromSquare, faBookOpen, faBugs, faCheckCircle, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import queryString from "query-string"; import queryString from "query-string";
@@ -16,6 +16,10 @@ import {
Button, Button,
Card, Card,
CardTitle, CardTitle,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
FormControl, FormControl,
Input, Input,
Select, Select,
@@ -50,7 +54,7 @@ export default function GitHubCreateIntegrationPage() {
const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState(""); const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
const [secretPath, setSecretPath] = useState("/"); const [secretPath, setSecretPath] = useState("/");
const [targetAppId, setTargetAppId] = useState(""); const [targetAppIds, setTargetAppIds] = useState<string[]>([]);
const [secretSuffix, setSecretSuffix] = useState(""); const [secretSuffix, setSecretSuffix] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@@ -64,9 +68,9 @@ export default function GitHubCreateIntegrationPage() {
useEffect(() => { useEffect(() => {
if (integrationAuthApps) { if (integrationAuthApps) {
if (integrationAuthApps.length > 0) { if (integrationAuthApps.length > 0) {
setTargetAppId(integrationAuthApps[0].appId as string); setTargetAppIds([String(integrationAuthApps[0].appId)]);
} else { } else {
setTargetAppId("none"); setTargetAppIds(["none"]);
} }
} }
}, [integrationAuthApps]); }, [integrationAuthApps]);
@@ -77,23 +81,27 @@ export default function GitHubCreateIntegrationPage() {
if (!integrationAuth?._id) return; if (!integrationAuth?._id) return;
const targetApp = integrationAuthApps?.find( const targetApps = integrationAuthApps?.filter(
(integrationAuthApp) => integrationAuthApp.appId === targetAppId (integrationAuthApp) => targetAppIds.includes(String(integrationAuthApp.appId))
); );
if (!targetApp || !targetApp.owner) return; if (!targetApps) return;
await mutateAsync({ await Promise.all(
integrationAuthId: integrationAuth?._id, targetApps.map(async (targetApp) => {
isActive: true, await mutateAsync({
app: targetApp.name, integrationAuthId: integrationAuth?._id,
sourceEnvironment: selectedSourceEnvironment, isActive: true,
owner: targetApp.owner, app: targetApp.name,
secretPath, sourceEnvironment: selectedSourceEnvironment,
metadata: { owner: targetApp.owner,
secretSuffix secretPath,
} metadata: {
}); secretSuffix
}
})
})
);
setIsLoading(false); setIsLoading(false);
router.push(`/integrations/${localStorage.getItem("projectData.id")}`); router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
@@ -106,7 +114,7 @@ export default function GitHubCreateIntegrationPage() {
workspace && workspace &&
selectedSourceEnvironment && selectedSourceEnvironment &&
integrationAuthApps && integrationAuthApps &&
targetAppId ? ( targetAppIds ? (
<div className="flex flex-col h-full w-full items-center justify-center"> <div className="flex flex-col h-full w-full items-center justify-center">
<Head> <Head>
<title>Set Up GitHub Integration</title> <title>Set Up GitHub Integration</title>
@@ -177,27 +185,42 @@ export default function GitHubCreateIntegrationPage() {
/> />
</FormControl> </FormControl>
<FormControl label="GitHub Repo"> <FormControl label="GitHub Repo">
<Select <DropdownMenu>
value={targetAppId} <DropdownMenuTrigger asChild>
onValueChange={(val) => setTargetAppId(val)} {(integrationAuthApps.length > 0) ? <div className="w-full cursor-pointer border border-mineshaft-600 inline-flex items-center justify-between rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
className="w-full border border-mineshaft-500" {targetAppIds.length === 1 ? integrationAuthApps?.find(
isDisabled={integrationAuthApps.length === 0} (integrationAuthApp) => targetAppIds[0] === String(integrationAuthApp.appId)
> )?.name : `${targetAppIds.length} repositories selected`}
{integrationAuthApps.length > 0 ? ( <FontAwesomeIcon icon={faAngleDown} className="text-xs" />
integrationAuthApps.map((integrationAuthApp) => ( </div> : <div className="w-full cursor-default border border-mineshaft-600 inline-flex items-center justify-between rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
<SelectItem No repositories found
value={integrationAuthApp.appId as string} </div>}
key={`github-repo-${integrationAuthApp.appId}`} </DropdownMenuTrigger>
> <DropdownMenuContent align="start" className="z-[100] max-h-80 overflow-y-scroll thin-scrollbar">
{integrationAuthApp.name} {(integrationAuthApps.length > 0) ? (
</SelectItem> integrationAuthApps.map((integrationAuthApp) => {
)) const isSelected = targetAppIds.includes(String(integrationAuthApp.appId));
) : (
<SelectItem value="none" key="target-app-none"> return (
No repositories found <DropdownMenuItem
</SelectItem> onClick={() => {
)} if (targetAppIds.includes(String(integrationAuthApp.appId))) {
</Select> setTargetAppIds(targetAppIds.filter((appId) => appId !== String(integrationAuthApp.appId)));
} else {
setTargetAppIds([...targetAppIds, String(integrationAuthApp.appId)]);
}
}}
key={integrationAuthApp.appId}
icon={isSelected ? <FontAwesomeIcon icon={faCheckCircle} className="text-primary pr-0.5" /> : <div className="pl-[1.01rem]"/>}
iconPos="left"
className="w-[28.4rem] text-sm"
>
{integrationAuthApp.name}
</DropdownMenuItem>
)})
) : <div/>}
</DropdownMenuContent>
</DropdownMenu>
</FormControl> </FormControl>
</motion.div> </motion.div>
</TabPanel> </TabPanel>
@@ -223,9 +246,9 @@ export default function GitHubCreateIntegrationPage() {
onClick={handleButtonClick} onClick={handleButtonClick}
color="mineshaft" color="mineshaft"
variant="outline_bg" variant="outline_bg"
className="mt-2 mb-6 ml-auto mr-6" className="mb-6 ml-auto mr-6"
isLoading={isLoading} isLoading={isLoading}
isDisabled={integrationAuthApps.length === 0} isDisabled={integrationAuthApps.length === 0 || targetAppIds.length === 0}
> >
Create Integration Create Integration
</Button> </Button>
frontend/src/views/SecretApprovalPage/SecretApprovalPage.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export const SecretApprovalPage = () => {
const workspaceId = currentWorkspace?._id || ""; const workspaceId = currentWorkspace?._id || "";
return ( return (
<div className="container mx-auto bg-bunker-800 text-white w-full h-full max-w-7xl"> <div className="container mx-auto bg-bunker-800 text-white w-full h-full max-w-7xl px-6">
<div className="my-6"> <div className="my-6">
<p className="text-3xl font-semibold text-gray-200">Secret Approvals</p> <p className="text-3xl font-semibold text-gray-200">Secret Approvals</p>
</div> </div>