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

Update the list of integrations in the app

Browse Source
This commit is contained in:
Vladyslav Matsiiako
2022-11-29 20:02:14 -05:00
parent 91827aed3e
commit 8e2794f6ab
23 changed files with 123 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/pages/dashboard/[id].js
+1 -7
View File
@@ -39,13 +39,7 @@ import getUser from "../api/user/getUser";
import checkUserAction from "../api/userActions/checkUserAction";
import registerUserAction from "../api/userActions/registerUserAction";
import getWorkspaces from "../api/workspace/getWorkspaces";
const envMapping = {
Development: "dev",
Staging: "staging",
Production: "prod",
Testing: "test",
};
import { envMapping } from "../../public/data/frequentConstants";
/**
* This component represent a single row for an environemnt variable on the dashboard
frontend/pages/integrations/[id].js
+36 -20
View File
@@ -24,23 +24,10 @@ import getIntegrations from "../api/integrations/GetIntegrations";
import getWorkspaceAuthorizations from "../api/integrations/getWorkspaceAuthorizations";
import getWorkspaceIntegrations from "../api/integrations/getWorkspaceIntegrations";
import startIntegration from "../api/integrations/StartIntegration";
import { envMapping, reverseEnvMapping, frameworks } from "../../public/data/frequentConstants";
const crypto = require("crypto");
const envMapping = {
Development: "dev",
Staging: "staging",
Production: "prod",
Testing: "test",
};
const reverseEnvMapping = {
dev: "Development",
staging: "Staging",
prod: "Production",
test: "Testing",
};
const Integration = ({ projectIntegration }) => {
const [integrationEnvironment, setIntegrationEnvironment] = useState(
reverseEnvMapping[projectIntegration.environment]
@@ -248,7 +235,7 @@ export default function Integrations() {
)}
<div className="flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2">
<div className="flex flex-row justify-start items-center text-3xl">
<p className="font-semibold mr-4">Available Integrations</p>
<p className="font-semibold mr-4">Platform & Cloud Integrations</p>
</div>
<p className="mr-4 text-base text-gray-400">
Click on the itegration you want to connect. This will let your
@@ -265,7 +252,7 @@ export default function Integrations() {
reach out support@infisical.com.
</p>
</div>
<div className="grid gap-4 grid-cols-3 grid-rows-3 mx-6 mt-4 max-w-5xl">
<div className="grid gap-4 grid-cols-4 grid-rows-2 mx-6 mt-4 max-w-5xl">
{Object.keys(integrations).map((integration) => (
<div
className={`relative ${
@@ -290,12 +277,12 @@ export default function Integrations() {
>
<Image
src={`/images/integrations/${integrations[integration].name}.png`}
height={100}
width={100}
height={70}
width={70}
alt="integration logo"
></Image>
{integrations[integration].name.split(" ").length > 2 ? (
<div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-3xl ml-8 max-w-xs">
<div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-3xl ml-4 max-w-xs">
<div>{integrations[integration].name.split(" ")[0]}</div>
<div className="text-base">
{integrations[integration].name.split(" ")[1]}{" "}
@@ -303,7 +290,7 @@ export default function Integrations() {
</div>
</div>
) : (
<div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-2xl ml-8 max-w-xs">
<div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-xl ml-4 max-w-xs">
{integrations[integration].name}
</div>
)}
@@ -353,6 +340,35 @@ export default function Integrations() {
</div>
))}
</div>
<div className="flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2">
<div className="flex flex-row justify-start items-center text-3xl">
<p className="font-semibold mr-4">Framework Integrations</p>
</div>
<p className="mr-4 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) => (
<div key={framework.name}>
<a
href={framework.link}
rel="noopener"
className={`relative flex flex-row items-center justify-center bg-bunker-500 hover:bg-gradient-to-tr hover:from-sky-400 hover:to-primary duration-200 h-32 rounded-md p-0.5 items-center cursor-pointer`}
>
<div className={`font-semibold bg-bunker-500 flex flex-col items-center justify-center h-full w-full rounded-md text-gray-300 group-hover:text-gray-200 duration-200 ${framework?.name?.split(" ").length > 1 ? "text-sm px-1" : "text-xl px-2"} text-center w-full max-w-xs`}>
{framework?.image && <Image
src={`/images/integrations/${framework.image}.png`}
height={framework?.name ? 60 : 90}
width={framework?.name ? 60 : 90}
alt="integration logo"
></Image>}
{framework?.name && framework?.image && <div className="h-2"></div>}
{framework?.name && framework.name}
</div>
</a>
</div>
))}
</div>
</div>
</div>
</div>