diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/IntegrationRow.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/IntegrationRow.tsx index 6640e0c41..79c0e26f3 100644 --- a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/IntegrationRow.tsx +++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/IntegrationRow.tsx @@ -11,6 +11,7 @@ import { } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { format } from "date-fns"; +import { twMerge } from "tailwind-merge"; import { ProjectPermissionCan } from "@app/components/permissions"; import { Badge, IconButton, Td, Tooltip, Tr } from "@app/components/v2"; @@ -56,7 +57,10 @@ export const IntegrationRow = ({ return ( router.push(`/integrations/details/${integration.id}`)} - className="group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700" + className={twMerge( + "group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700", + isSynced === false && "bg-red/5 hover:bg-red/10" + )} key={`integration-${id}`} > diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/IntegrationsTable.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/IntegrationsTable.tsx index 9719e3793..05c4a2d32 100644 --- a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/IntegrationsTable.tsx +++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/IntegrationsTable.tsx @@ -1,4 +1,4 @@ -import { useMemo, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { faCheckCircle } from "@fortawesome/free-regular-svg-icons"; import { faArrowDown, @@ -115,7 +115,12 @@ export const IntegrationsTable = ({ orderBy, setOrderDirection, setOrderBy - } = usePagination(IntegrationsOrderBy.Status, { initPerPage: 20 }); + } = usePagination(IntegrationsOrderBy.App, { initPerPage: 20 }); + + useEffect(() => { + if (integrations?.some((integration) => integration.isSynced === false)) + setOrderBy(IntegrationsOrderBy.Status); + }, []); const environmentMap = new Map(environments.map((env) => [env.id, env]));