From a8678c14e84b01c2d8682f886af5b5cab56959ba Mon Sep 17 00:00:00 2001 From: Vladyslav Matsiiako Date: Fri, 16 Feb 2024 22:58:56 -0800 Subject: [PATCH 1/6] updated heroku integration style --- .../src/pages/integrations/heroku/create.tsx | 95 +++++++++++++++++-- 1 file changed, 86 insertions(+), 9 deletions(-) diff --git a/frontend/src/pages/integrations/heroku/create.tsx b/frontend/src/pages/integrations/heroku/create.tsx index a63cc1d07..96cab1b6a 100644 --- a/frontend/src/pages/integrations/heroku/create.tsx +++ b/frontend/src/pages/integrations/heroku/create.tsx @@ -1,5 +1,10 @@ import { useEffect, useState } from "react"; +import Head from "next/head"; +import Image from "next/image"; +import Link from "next/link"; import { useRouter } from "next/router"; +import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import queryString from "query-string"; import { useCreateIntegration } from "@app/hooks/api"; @@ -27,7 +32,7 @@ export default function HerokuCreateIntegrationPage() { const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? ""); const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? ""); - const { data: integrationAuthApps } = useGetIntegrationAuthApps({ + const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({ integrationAuthId: (integrationAuthId as string) ?? "" }); @@ -79,10 +84,41 @@ export default function HerokuCreateIntegrationPage() { selectedSourceEnvironment && integrationAuthApps && targetApp ? ( -
- - Heroku Integration - +
+ + Set Up Heroku Integration + + + + +
+
+ Heroku logo +
+ Heroku Integration + + +
+ + Docs + +
+ + +
+ + - + setSecretPath(evt.target.value)} placeholder="Provide a path, default is /" /> - + setSelectedPipeline(val)} + className="w-full border border-mineshaft-500" + > + {uniquePipelines?.map((pipeline) => ( + + {pipeline.name} + + ))} + + +
+ After creating the integration, the following Heroku apps will be automatically synced to Infisical: +
+ {selectedPipelineApps?.map(app =>

-> {app.name}

)} +
+ From then on, every new app in the selected pipeline will be synced to Infisical, too. +
+ } + {integrationType === "App" && <> - + } + */} + + {
- {userAvailableEnvs?.map(({ name, slug }, index) => { + {visibleEnvs?.map(({ name, slug }, index) => { const envSecKeyCount = getEnvSecretKeyCount(slug); const missingKeyCount = secKeys.length - envSecKeyCount; return ( @@ -388,12 +450,12 @@ export const SecretOverviewPage = () => { )} {isTableEmpty && !isTableLoading && ( - + @@ -414,13 +476,13 @@ export const SecretOverviewPage = () => { ))} {!isTableLoading && - (userAvailableEnvs?.length > 0 ? ( + (visibleEnvs?.length > 0 ? ( filteredSecretNames.map((key, index) => ( { onSecretDelete={handleSecretDelete} onSecretUpdate={handleSecretUpdate} key={`overview-${key}-${index + 1}`} - environments={userAvailableEnvs} + environments={visibleEnvs} secretKey={key} getSecretByKey={getSecretByKey} expandableColWidth={expandableTableWidth} @@ -446,7 +508,7 @@ export const SecretOverviewPage = () => { style={{ height: "45px" }} /> - {userAvailableEnvs.map(({ name, slug }) => ( + {visibleEnvs.map(({ name, slug }) => (