improvement: only sort by status if 1 or more integrations is failing to sync; otherwise sort by integration

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 (
     <Tr
       onClick={() => 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}`}
     >
       <Td>

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>(IntegrationsOrderBy.Status, { initPerPage: 20 });
+  } = usePagination<IntegrationsOrderBy>(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]));