awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-08 03:27:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update ConfiguredIntegrationItem.tsx

Browse Source
This commit is contained in:
Daniel Hougaard
2024-09-16 23:05:38 +04:00
parent 38ee3a005e
commit 09887a7405
1 changed files with 34 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/IntegrationsPage/components/IntegrationsSection/ConfiguredIntegrationItem.tsx
+34 -20
View File
@@ -4,6 +4,7 @@ import { useRouter } from "next/router";
import { import {
faArrowRight, faArrowRight,
faCalendarCheck, faCalendarCheck,
faEllipsis,
faRefresh, faRefresh,
faWarning, faWarning,
faXmark faXmark
@@ -13,7 +14,7 @@ import { format } from "date-fns";
import { integrationSlugNameMapping } from "public/data/frequentConstants"; import { integrationSlugNameMapping } from "public/data/frequentConstants";
import { ProjectPermissionCan } from "@app/components/permissions"; import { ProjectPermissionCan } from "@app/components/permissions";
import { Button, FormLabel, IconButton, Tag, Tooltip } from "@app/components/v2"; import { Badge, FormLabel, IconButton, Tooltip } from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context"; import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { IntegrationMappingBehavior } from "@app/hooks/api/integrations/types"; import { IntegrationMappingBehavior } from "@app/hooks/api/integrations/types";
import { TIntegration } from "@app/hooks/api/types"; import { TIntegration } from "@app/hooks/api/types";
@@ -174,9 +175,9 @@ export const ConfiguredIntegrationItem = ({
</div> </div>
)} )}
</div> </div>
<div className="mt-[1.5rem] flex cursor-default"> <div className="mt-[1.5rem] flex cursor-default space-x-3">
{integration.isSynced != null && integration.lastUsed != null && ( {integration.isSynced != null && integration.lastUsed != null && (
<Tag key={integration.id} className={integration.isSynced ? "bg-green-800" : "bg-red/80"}> <Badge variant={integration.isSynced ? "success" : "danger"} key={integration.id}>
<Tooltip <Tooltip
center center
className="max-w-xs whitespace-normal break-words" className="max-w-xs whitespace-normal break-words"
@@ -201,32 +202,33 @@ export const ConfiguredIntegrationItem = ({
</div> </div>
} }
> >
<div className="flex items-center space-x-2 text-white"> <div className="flex h-full items-center space-x-2">
<div>{integration.isSynced ? "Synced" : "Not synced"}</div> <div>{integration.isSynced ? "Synced" : "Not synced"}</div>
{!integration.isSynced && <FontAwesomeIcon icon={faWarning} />} {!integration.isSynced && <FontAwesomeIcon icon={faWarning} />}
</div> </div>
</Tooltip> </Tooltip>
</Tag> </Badge>
)} )}
<div className="mr-1 flex items-end opacity-80 duration-200 hover:opacity-100"> <div className="space-x-1.5">
<Tooltip className="text-center" content="Manually sync integration secrets"> <Tooltip className="text-center" content="Manually sync integration secrets">
<Button <IconButton
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onManualSyncIntegration(); onManualSyncIntegration();
}} }}
ariaLabel="sync"
colorSchema="primary"
variant="star"
className="max-w-[2.5rem] border-none bg-mineshaft-500" className="max-w-[2.5rem] border-none bg-mineshaft-500"
> >
<FontAwesomeIcon icon={faRefresh} className="px-1 text-bunker-200" /> <FontAwesomeIcon icon={faRefresh} className="px-1" />
</Button> </IconButton>
</Tooltip> </Tooltip>
</div> <ProjectPermissionCan
<ProjectPermissionCan I={ProjectPermissionActions.Delete}
I={ProjectPermissionActions.Delete} a={ProjectPermissionSub.Integrations}
a={ProjectPermissionSub.Integrations} >
> {(isAllowed: boolean) => (
{(isAllowed: boolean) => (
<div className="flex items-end opacity-80 duration-200 hover:opacity-100">
<Tooltip content="Remove Integration"> <Tooltip content="Remove Integration">
<IconButton <IconButton
onClick={(e) => { onClick={(e) => {
@@ -237,13 +239,25 @@ export const ConfiguredIntegrationItem = ({
isDisabled={!isAllowed} isDisabled={!isAllowed}
colorSchema="danger" colorSchema="danger"
variant="star" variant="star"
className="max-w-[2.5rem] border-none bg-mineshaft-500"
> >
<FontAwesomeIcon icon={faXmark} className="px-0.5" /> <FontAwesomeIcon icon={faXmark} className="px-1" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div> )}
)} </ProjectPermissionCan>
</ProjectPermissionCan>
<Tooltip content="View details">
<IconButton
ariaLabel="delete"
colorSchema="primary"
variant="star"
className="max-w-[2.5rem] border-none bg-mineshaft-500"
>
<FontAwesomeIcon icon={faEllipsis} className="px-1" />
</IconButton>
</Tooltip>
</div>
</div> </div>
</div> </div>
); );