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

UI update to inetgrations

Browse Source
This commit is contained in:
Vladyslav Matsiiako
2023-06-26 18:08:00 -07:00
parent 5f683dd389
commit 072f6c737c
1 changed files with 19 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
+19 -15
View File
@@ -10,7 +10,8 @@ import {
IconButton, IconButton,
Select, Select,
SelectItem, SelectItem,
Skeleton Skeleton,
Tooltip
} from "@app/components/v2"; } from "@app/components/v2";
import { usePopUp } from "@app/hooks"; import { usePopUp } from "@app/hooks";
import { TIntegration } from "@app/hooks/api/types"; import { TIntegration } from "@app/hooks/api/types";
@@ -53,7 +54,7 @@ export const IntegrationsSection = ({
<div className="flex flex-col space-y-4 p-6 pt-0"> <div className="flex flex-col space-y-4 p-6 pt-0">
{integrations?.map((integration) => ( {integrations?.map((integration) => (
<div <div
className="flex justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 pb-2" className="flex max-w-8xl justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 pb-2"
key={`integration-${integration?._id.toString()}`} key={`integration-${integration?._id.toString()}`}
> >
<div className="flex"> <div className="flex">
@@ -62,7 +63,7 @@ export const IntegrationsSection = ({
<Select <Select
value={integration.environment} value={integration.environment}
isDisabled={integration.isActive} isDisabled={integration.isActive}
className="min-w-[8rem]" className="min-w-[8rem] border border-mineshaft-700"
> >
{environments.map((environment) => { {environments.map((environment) => {
return ( return (
@@ -79,7 +80,7 @@ export const IntegrationsSection = ({
</div> </div>
<div className="ml-2 flex flex-col"> <div className="ml-2 flex flex-col">
<FormLabel label="Secret Path" /> <FormLabel label="Secret Path" />
<div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200"> <div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200 border border-mineshaft-700">
{integration.secretPath} {integration.secretPath}
</div> </div>
</div> </div>
@@ -88,13 +89,13 @@ export const IntegrationsSection = ({
</div> </div>
<div className="ml-4 flex flex-col"> <div className="ml-4 flex flex-col">
<FormLabel label="Integration" /> <FormLabel label="Integration" />
<div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200"> <div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200 border border-mineshaft-700">
{integrationSlugNameMapping[integration.integration]} {integrationSlugNameMapping[integration.integration]}
</div> </div>
</div> </div>
<div className="ml-2 flex flex-col"> <div className="ml-2 flex flex-col">
<FormLabel label="App" /> <FormLabel label="App" />
<div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200"> <div className="min-w-[8rem] rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200 border border-mineshaft-700">
{integration.integration === "hashicorp-vault" {integration.integration === "hashicorp-vault"
? `${integration.app} - path: ${integration.path}` ? `${integration.app} - path: ${integration.path}`
: integration.app} : integration.app}
@@ -106,7 +107,7 @@ export const IntegrationsSection = ({
integration.integration === "gitlab") && ( integration.integration === "gitlab") && (
<div className="ml-4 flex flex-col"> <div className="ml-4 flex flex-col">
<FormLabel label="Target Environment" /> <FormLabel label="Target Environment" />
<div className="rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200"> <div className="rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200 border border-mineshaft-700">
{integration.targetEnvironment} {integration.targetEnvironment}
</div> </div>
</div> </div>
@@ -114,13 +115,16 @@ export const IntegrationsSection = ({
</div> </div>
<div className="flex cursor-default items-center"> <div className="flex cursor-default items-center">
<div className="ml-2 opacity-80 duration-200 hover:opacity-100"> <div className="ml-2 opacity-80 duration-200 hover:opacity-100">
<IconButton <Tooltip content="Remove Integration">
onClick={() => handlePopUpOpen("deleteConfirmation", integration)} <IconButton
ariaLabel="delete" onClick={() => handlePopUpOpen("deleteConfirmation", integration)}
colorSchema="danger" ariaLabel="delete"
> colorSchema="danger"
<FontAwesomeIcon icon={faXmark} /> variant="star"
</IconButton> >
<FontAwesomeIcon icon={faXmark} className="px-0.5" />
</IconButton>
</Tooltip>
</div> </div>
</div> </div>
</div> </div>
@@ -130,7 +134,7 @@ export const IntegrationsSection = ({
<DeleteActionModal <DeleteActionModal
isOpen={popUp.deleteConfirmation.isOpen} isOpen={popUp.deleteConfirmation.isOpen}
title={`Are you sure want to remove ${ title={`Are you sure want to remove ${
(popUp?.deleteConfirmation.data as TIntegration)?.integration || " " (popUp?.deleteConfirmation.data as TIntegration)?.integrationAuth || " "
} integration for ${(popUp?.deleteConfirmation.data as TIntegration)?.app || " "}?`} } integration for ${(popUp?.deleteConfirmation.data as TIntegration)?.app || " "}?`}
onChange={(isOpen) => handlePopUpToggle("deleteConfirmation", isOpen)} onChange={(isOpen) => handlePopUpToggle("deleteConfirmation", isOpen)}
deleteKey={(popUp?.deleteConfirmation?.data as TIntegration)?.app || ""} deleteKey={(popUp?.deleteConfirmation?.data as TIntegration)?.app || ""}