awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-11 06:29:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix Typescript issues for frontend integrations

Browse Source
This commit is contained in:
Tuan Dang
2022-12-18 18:57:50 -05:00
parent 6ea26c135a
commit 91052df5f9
15 changed files with 160 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/basic/Listbox.tsx
+3 -3
View File
@@ -10,10 +10,10 @@ import { Listbox, Transition } from "@headlessui/react";
interface ListBoxProps {
selected: string;
onChange: () => void;
onChange: (arg: string) => void;
data: string[];
text: string;
buttonAction: () => void;
text?: string;
buttonAction?: () => void;
isFull?: boolean;
}
frontend/components/basic/buttons/Button.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ import {
const classNames = require("classnames");
type ButtonProps = {
text: string;
text?: string;
onButtonPressed: () => void;
loading?: boolean;
color?: string;
frontend/components/integrations/CloudIntegration.tsx
+8 -8
View File
@@ -1,30 +1,32 @@
import React from "react";
import Image from "next/image";
import { useRouter } from "next/router";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faCheck,
faX,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import deleteIntegrationAuth from "../../pages/api/integrations/DeleteIntegrationAuth";
interface CloudIntegrationOption {
isAvailable: Boolean;
isAvailable: boolean;
name: string;
type: string;
clientId: string;
docsLink: string;
slug: string;
}
interface IntegrationAuth {
id: string;
_id: string;
integration: string;
}
interface Props {
cloudIntegrationOption: CloudIntegrationOption;
setSelectedIntegrationOption: () => void;
integrationOptionPress: () => void;
setSelectedIntegrationOption: (cloudIntegration: CloudIntegrationOption) => void;
integrationOptionPress: (cloudIntegrationOption: CloudIntegrationOption) => void;
integrationAuths: IntegrationAuth[];
}
@@ -45,9 +47,7 @@ const CloudIntegration = ({
onClick={() => {
if (!cloudIntegrationOption.isAvailable) return;
setSelectedIntegrationOption(cloudIntegrationOption);
integrationOptionPress({
integrationOption: cloudIntegrationOption
});
integrationOptionPress(cloudIntegrationOption);
}}
key={cloudIntegrationOption.name}
>
frontend/components/integrations/CloudIntegrationSection.tsx
+3
View File
@@ -1,11 +1,14 @@
import React from "react";
import CloudIntegration from "./CloudIntegration";
interface CloudIntegrationOption {
isAvailable: boolean;
name: string;
type: string;
clientId: string;
docsLink: string;
slug: string;
}
interface Props {
frontend/components/integrations/FrameworkIntegrationSection.tsx
+4 -1
View File
@@ -1,14 +1,17 @@
import React from "react";
import FrameworkIntegration from "./FrameworkIntegration";
interface Framework {
name: string;
image: string;
link: string;
slug: string;
docsLink: string;
}
interface Props {
framework: Framework
frameworks: [Framework]
}
const FrameworkIntegrationSection = ({ frameworks }: Props) => {
frontend/components/integrations/Integration.tsx
+64 -46
View File
@@ -6,23 +6,30 @@ import {
faX,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
envMapping,
reverseEnvMapping,
reverseContextNetlifyMapping
} from "../../public/data/frequentConstants";
import updateIntegration from "../../pages/api/integrations/updateIntegration"
import deleteIntegration from "../../pages/api/integrations/DeleteIntegration"
import getIntegrationApps from "../../pages/api/integrations/GetIntegrationApps";
import Button from "~/components/basic/buttons/Button";
import ListBox from "~/components/basic/Listbox";
import deleteIntegration from "../../pages/api/integrations/DeleteIntegration"
import getIntegrationApps from "../../pages/api/integrations/GetIntegrationApps";
import updateIntegration from "../../pages/api/integrations/updateIntegration"
import {
envMapping,
reverseContextNetlifyMapping,
reverseEnvMapping} from "../../public/data/frequentConstants";
interface Integration {
_id: string;
app?: string;
environment: string;
integration: string;
integrationAuth: string;
isActive: Boolean;
isActive: boolean;
}
interface IntegrationApp {
name: string;
siteId: string;
}
const Integration = ({
@@ -35,39 +42,44 @@ const Integration = ({
);
const [fileState, setFileState] = useState([]);
const router = useRouter();
const [apps, setApps] = useState([]); // integration app objects
const [integrationApp, setIntegrationApp] = useState(null); // integration app name
const [integrationTarget, setIntegrationTarget] = useState(null); // vercel-specific integration param
const [integrationContext, setIntegrationContext] = useState(null); // netlify-specific integration param
const [apps, setApps] = useState<IntegrationApp[]>([]); // integration app objects
const [integrationApp, setIntegrationApp] = useState(""); // integration app name
const [integrationTarget, setIntegrationTarget] = useState(""); // vercel-specific integration param
const [integrationContext, setIntegrationContext] = useState(""); // netlify-specific integration param
useEffect(async () => {
interface App {
name: string;
siteId?: string;
}
useEffect(() => {
const tempApps = await getIntegrationApps({
integrationAuthId: integration.integrationAuth,
});
setApps(tempApps);
setIntegrationApp(
integration.app ? integration.app : tempApps[0].name
);
switch (integration.integration) {
case "vercel":
setIntegrationTarget("Development");
break;
case "netlify":
setIntegrationContext("All");
break;
default:
break;
const loadIntegration = async () => {
interface App {
name: string;
siteId?: string;
}
const tempApps: [IntegrationApp] = await getIntegrationApps({
integrationAuthId: integration.integrationAuth,
});
setApps(tempApps);
setIntegrationApp(
integration.app ? integration.app : tempApps[0].name
);
switch (integration.integration) {
case "vercel":
setIntegrationTarget("Development");
break;
case "netlify":
setIntegrationContext("All");
break;
default:
break;
}
}
loadIntegration();
}, []);
const renderIntegrationSpecificParams = (integration) => {
const renderIntegrationSpecificParams = (integration: Integration) => {
try {
switch (integration.integration) {
case "vercel":
@@ -77,11 +89,11 @@ const Integration = ({
ENVIRONMENT
</div>
<ListBox
data={!integration.isActive && [
data={!integration.isActive ? [
"Production",
"Preview",
"Development"
]}
] : []}
selected={"Production"}
onChange={setIntegrationTarget}
/>
@@ -94,13 +106,13 @@ const Integration = ({
CONTEXT
</div>
<ListBox
data={!integration.isActive && [
data={!integration.isActive ? [
"All",
"Production",
"Deploy previews",
"Branch deploys",
"Local development"
]}
] : []}
selected={integrationContext}
onChange={setIntegrationContext}
/>
@@ -126,9 +138,11 @@ const Integration = ({
"Staging",
"Testing",
"Production",
] : null}
] : []}
selected={integrationEnvironment}
onChange={setIntegrationEnvironment}
onChange={(environment) => {
setIntegrationEnvironment(environment);
}}
isFull={true}
/>
</div>
@@ -152,9 +166,11 @@ const Integration = ({
APP
</div>
<ListBox
data={!integration.isActive && apps.map((app) => app.name)}
data={!integration.isActive ? apps.map((app) => app.name) : []}
selected={integrationApp}
onChange={setIntegrationApp}
onChange={(app) => {
setIntegrationApp(app);
}}
/>
</div>
{renderIntegrationSpecificParams(integration)}
@@ -172,7 +188,9 @@ const Integration = ({
<Button
text="Start Integration"
onButtonPressed={async () => {
const siteId = apps.find((app) => app.name === integrationApp).siteId ? apps.find((app) => app.name === integrationApp).siteId : null;
const siteApp = apps.find((app) => app.name === integrationApp); // obj or undefined
const siteId = siteApp ? siteApp.siteId : null;
const result = await updateIntegration({
integrationId: integration._id,
environment: envMapping[integrationEnvironment],
frontend/components/integrations/IntegrationSection.tsx
+13 -6
View File
@@ -1,15 +1,22 @@
import React from "react";
import Integration from "./Integration";
import guidGenerator from "~/utilities/randomId";
interface Integration {
}
import Integration from "./Integration";
interface Props {
integrations: any
}
interface IntegrationType {
_id: string;
app?: string;
environment: string;
integration: string;
integrationAuth: string;
isActive: boolean;
}
const ProjectIntegrationSection = ({
integrations
}: Props) => {
@@ -21,12 +28,12 @@ const ProjectIntegrationSection = ({
Manage your integrations of Infisical with third-party services.
</p>
</div>
{integrations.map((integration => (
{integrations.map((integration: IntegrationType) => (
<Integration
key={guidGenerator()}
integration={integration}
/>
)))}
))}
</div>
) : <div></div>
}
frontend/components/utilities/config/index.ts
+1 -5
View File
@@ -4,15 +4,11 @@ const POSTHOG_HOST =
process.env.NEXT_PUBLIC_POSTHOG_HOST! || "https://app.posthog.com";
const STRIPE_PRODUCT_PRO = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_PRO!;
const STRIPE_PRODUCT_STARTER = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_STARTER!;
const CLIENT_ID_HEROKU = process.env.NEXT_PUBLIC_CLIENT_ID_HEROKU!;
const CLIENT_ID_NETLIFY = process.env.NEXT_PUBLIC_CLIENT_ID_NETLIFY!;
export {
ENV,
POSTHOG_API_KEY,
POSTHOG_HOST,
STRIPE_PRODUCT_PRO,
STRIPE_PRODUCT_STARTER,
CLIENT_ID_HEROKU,
CLIENT_ID_NETLIFY
STRIPE_PRODUCT_STARTER
};