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

misc: applied ui/ux changes

Browse Source
This commit is contained in:
Sheen Capadngan
2024-05-22 00:06:06 +08:00
parent 9b404c215b
commit b9a9b6b4d9
3 changed files with 65 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
+55 -72
View File
@@ -1,7 +1,6 @@
import { useEffect, useRef } from "react";
import Link from "next/link";
import { faCalendarCheck } from "@fortawesome/free-regular-svg-icons";
import { faArrowRight, faRefresh, faXmark } from "@fortawesome/free-solid-svg-icons";
import { faArrowRight, faRefresh, faWarning, faXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { format } from "date-fns";
import { integrationSlugNameMapping } from "public/data/frequentConstants";
@@ -45,16 +44,7 @@ export const IntegrationsSection = ({
"deleteConfirmation"
] as const);
const syncPollingRef = useRef<NodeJS.Timeout | null>(null);
const { mutate: syncIntegration } = useSyncIntegration(syncPollingRef);
useEffect(() => {
return () => {
if (syncPollingRef.current) {
clearInterval(syncPollingRef.current);
}
};
}, []);
const { mutate: syncIntegration } = useSyncIntegration();
return (
<div className="mb-8">
@@ -207,69 +197,62 @@ export const IntegrationsSection = ({
</div>
<div className="mt-[1.5rem] flex cursor-default">
{integration.isSynced != null && integration.lastUsed != null && (
<>
<Tag
key={integration.id}
className={integration.isSynced ? "bg-green/50" : "bg-red/80"}
>
<Tooltip
center
className="max-w-xs whitespace-normal break-words"
content={
<div className="flex max-h-[10rem] flex-col overflow-auto ">
<div className="flex self-start">
<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>
</>
)}
<Tag
key={integration.id}
className={integration.isSynced ? "bg-green-800" : "bg-red/80"}
>
<Tooltip
center
className="max-w-xs whitespace-normal break-words"
content={
<div className="flex max-h-[10rem] flex-col overflow-auto ">
<div className="flex self-start">
<FontAwesomeIcon
icon={faCalendarCheck}
className="pt-0.5 pr-2 text-sm"
/>
<div className="text-sm">Last sync</div>
</div>
}
>
<div className="px-2 text-white">Sync Status</div>
</Tooltip>
</Tag>
{!integration.isSynced && integration.lastUsed != null && (
<div className="mr-1 flex items-end opacity-80 duration-200 hover:opacity-100">
<Tooltip
className="text-center"
content="Manually sync integration secrets"
>
<Button
onClick={() =>
syncIntegration({
workspaceId,
id: integration.id,
lastUsed: integration.lastUsed as string
})
}
isLoading={!!syncPollingRef.current}
className="max-w-[2.5rem] bg-mineshaft-500"
colorSchema="primary"
variant="outline"
>
<FontAwesomeIcon icon={faRefresh} className="px-1 text-bunker-200" />
</Button>
</Tooltip>
<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>
}
>
<div className="flex items-center space-x-2 text-white">
<div>Sync Status</div>
{!integration.isSynced && <FontAwesomeIcon icon={faWarning} />}
</div>
)}
</>
</Tooltip>
</Tag>
)}
<div className="mr-1 flex items-end opacity-80 duration-200 hover:opacity-100">
<Tooltip className="text-center" content="Manually sync integration secrets">
<Button
onClick={() =>
syncIntegration({
workspaceId,
id: integration.id,
lastUsed: integration.lastUsed as string
})
}
className="max-w-[2.5rem] border-none bg-mineshaft-500"
>
<FontAwesomeIcon icon={faRefresh} className="px-1 text-bunker-200" />
</Button>
</Tooltip>
</div>
<ProjectPermissionCan
I={ProjectPermissionActions.Delete}
a={ProjectPermissionSub.Integrations}