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]));
|