Fix Typescript issues for frontend integrations

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
@@ -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],