Finish Netlify integration v1 full-loop

This commit is contained in:
Tuan Dang
2022-12-14 18:18:21 -05:00
parent fe17d8459b
commit 787e54fb91
14 changed files with 441 additions and 108 deletions
@@ -8,7 +8,8 @@ import {
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
envMapping,
reverseEnvMapping
reverseEnvMapping,
reverseContextNetlifyMapping
} from "../../public/data/frequentConstants";
import updateIntegration from "../../pages/api/integrations/updateIntegration"
import deleteIntegration from "../../pages/api/integrations/DeleteIntegration"
@@ -36,23 +37,85 @@ const Integration = ({
);
const [fileState, setFileState] = useState([]);
const router = useRouter();
const [apps, setApps] = useState([]);
const [integrationApp, setIntegrationApp] = useState(null);
const [integrationTarget, setIntegrationTarget] = useState(null);
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
useEffect(async () => {
interface App {
name: string;
siteId?: string;
}
const tempApps = await getIntegrationApps({
integrationAuthId: integration.integrationAuth,
});
const tempAppNames = tempApps.map((app) => app.name);
setApps(tempAppNames);
setApps(tempApps);
setIntegrationApp(
integration.app ? integration.app : tempAppNames[0]
integration.app ? integration.app : tempApps[0].name
);
setIntegrationTarget("Development");
switch (integration.integration) {
case "vercel":
setIntegrationTarget("Development");
break;
case "netlify":
setIntegrationContext("All");
break;
default:
break;
}
}, []);
const renderIntegrationSpecificParams = (integration) => {
try {
switch (integration.integration) {
case "vercel":
return (
<div>
<div className="text-gray-400 text-xs font-semibold mb-2">
ENVIRONMENT
</div>
<ListBox
data={!integration.isActive && [
"Production",
"Preview",
"Development"
]}
selected={"Production"}
onChange={setIntegrationTarget}
/>
</div>
);
case "netlify":
return (
<div>
<div className="text-gray-400 text-xs font-semibold mb-2">
CONTEXT
</div>
<ListBox
data={!integration.isActive && [
"All",
"Production",
"Deploy previews",
"Branch deploys",
"Local development"
]}
selected={integrationContext}
onChange={setIntegrationContext}
/>
</div>
);
default:
return <div></div>;
}
} catch (err) {
console.error(err);
}
}
if (!integrationApp || apps.length === 0) return <div></div>
return (
@@ -91,27 +154,12 @@ const Integration = ({
APP
</div>
<ListBox
data={!integration.isActive && apps}
data={!integration.isActive && apps.map((app) => app.name)}
selected={integrationApp}
onChange={setIntegrationApp}
/>
</div>
{integration.integration === "vercel" && (
<div>
<div className="text-gray-400 text-xs font-semibold mb-2">
ENVIRONMENT
</div>
<ListBox
data={!integration.isActive && [
"Production",
"Preview",
"Development"
]}
selected={integrationTarget}
onChange={setIntegrationTarget}
/>
</div>
)}
{renderIntegrationSpecificParams(integration)}
</div>
<div className="flex items-end">
{integration.isActive ? (
@@ -131,7 +179,9 @@ const Integration = ({
environment: envMapping[integrationEnvironment],
app: integrationApp,
isActive: true,
target: integrationTarget.toLowerCase()
target: integrationTarget ? integrationTarget.toLowerCase() : null,
context: integrationContext ? reverseContextNetlifyMapping[integrationContext] : null,
siteId: apps.find((app) => app.name === integrationApp).siteId
});
router.reload();
}}
@@ -9,7 +9,9 @@ import SecurityClient from "~/utilities/SecurityClient";
* @param {String} obj.app - name of app
* @param {String} obj.environment - project environment to push secrets from
* @param {Boolean} obj.isActive - active state
* @param {String} obj.target - (optional) target (environment)
* @param {String} obj.target - (optional) target (environment) for Vercel integration
* @param {String} obj.context - (optional) context (environment) for Netlify integration
* @param {String} obj.siteId - (optional) app (site_id) for Netlify integration
* @returns
*/
const updateIntegration = ({
@@ -17,7 +19,9 @@ const updateIntegration = ({
app,
environment,
isActive,
target
target,
context,
siteId
}) => {
return SecurityClient.fetchCall(
"/api/v1/integration/" + integrationId,
@@ -30,7 +34,9 @@ const updateIntegration = ({
app,
environment,
isActive,
target
target,
context,
siteId
}),
}
).then(async (res) => {
-2
View File
@@ -16,11 +16,9 @@ export default function Netlify() {
*/
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(async () => {
console.log('AA');
if (state === localStorage.getItem('latestCSRFToken')) {
localStorage.removeItem('latestCSRFToken');
console.log('Netlify', parsedUrl);
// http://localhost:8080/netlify?code=qnG0g_krhklWDpdUqfhU-t1sLeZzYI3gF2d6QVnL-Gc&state=3a78cd3154a9a99ddd4eb5d99dbb3289
// http://localhost:8080/netlify#access_token=d-78qUAnnSzvlgfG9Y_oUV6_4TQBxLbofImiBbKAjzE&token_type=Bearer&state=5da34fa49e301e9fa1a6e40925694b77
+14 -1
View File
@@ -12,7 +12,20 @@ const reverseEnvMapping = {
test: "Testing",
};
const vercelMapping = {
}
const reverseContextNetlifyMapping = {
"All": "all",
"Local development": "dev",
"Branch deploys": "branch-deploy",
"Deploy Previews": "deploy-preview",
"Production": "production"
}
export {
envMapping,
reverseEnvMapping
reverseEnvMapping,
reverseContextNetlifyMapping
};