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

misc: finalized ui design of integration sync status

Browse Source
This commit is contained in:
Sheen Capadngan
2024-05-21 02:35:23 +08:00
parent 7d3a62cc4c
commit 9253c69325
1 changed files with 36 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
+36 -18
View File
@@ -1,5 +1,6 @@
import Link from "next/link"; import Link from "next/link";
import { faArrowRight, faCheck, faXmark } from "@fortawesome/free-solid-svg-icons"; import { faCalendarCheck } from "@fortawesome/free-regular-svg-icons";
import { faArrowRight, faXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { format } from "date-fns"; import { format } from "date-fns";
import { integrationSlugNameMapping } from "public/data/frequentConstants"; import { integrationSlugNameMapping } from "public/data/frequentConstants";
@@ -13,6 +14,7 @@ import {
FormLabel, FormLabel,
IconButton, IconButton,
Skeleton, Skeleton,
Tag,
Tooltip Tooltip
} from "@app/components/v2"; } from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context"; import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
@@ -189,35 +191,51 @@ export const IntegrationsSection = ({
</div> </div>
)} )}
</div> </div>
<div className="flex cursor-default items-center"> <div className="mt-[1.5rem] flex cursor-default">
{!!integration.isSynced && !!integration.lastUsed && ( {integration.isSynced != null && integration.lastUsed != null && (
<div className="mr-5 flex items-center justify-end text-sm"> <Tag
<div> key={integration.id}
Last sync: {format(new Date(integration.lastUsed), "yyyy-MM-dd, hh:mm aaa")} className={integration.isSynced ? "bg-green/50" : "bg-red/80"}
</div> >
<Tooltip <Tooltip
center center
className="max-w-xs whitespace-normal break-words"
content={ content={
integration.isSynced <div className="flex max-h-[10rem] flex-col overflow-auto ">
? "Secrets are in sync" <div className="flex self-start">
: `Failed to sync secrets: ${integration.syncMessage || "Generic error"}` <FontAwesomeIcon
icon={faCalendarCheck}
className="pt-0.5 pr-2 text-sm"
/>
<div className="text-sm">Last sync</div>
</div>
<div className="pl-5 text-left text-xs">
{format(new Date(integration.lastUsed), "yyyy-MM-dd, hh:mm aaa")}
</div>
{!integration.isSynced && (
<>
<div className="mt-2 flex self-start">
<FontAwesomeIcon icon={faXmark} className="pt-1 pr-2 text-sm" />
<div className="text-sm">Fail reason</div>
</div>
<div className="pl-5 text-left text-xs">
{integration.syncMessage}
</div>
</>
)}
</div>
} }
> >
<FontAwesomeIcon <div className="px-2 text-white">Sync Status</div>
icon={integration.isSynced ? faCheck : faXmark}
className={`ml-3 ${
integration.isSynced ? "text-green-600" : "text-red-600"
}`}
/>
</Tooltip> </Tooltip>
</div> </Tag>
)} )}
<ProjectPermissionCan <ProjectPermissionCan
I={ProjectPermissionActions.Delete} I={ProjectPermissionActions.Delete}
a={ProjectPermissionSub.Integrations} a={ProjectPermissionSub.Integrations}
> >
{(isAllowed: boolean) => ( {(isAllowed: boolean) => (
<div className="ml-2 opacity-80 duration-200 hover:opacity-100"> <div className="ml-2 flex items-end opacity-80 duration-200 hover:opacity-100">
<Tooltip content="Remove Integration"> <Tooltip content="Remove Integration">
<IconButton <IconButton
onClick={() => handlePopUpOpen("deleteConfirmation", integration)} onClick={() => handlePopUpOpen("deleteConfirmation", integration)}