fix: session panel display state (#845)

Author: knudtty

.changeset/smooth-suns-shop.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fixed ui state on session panel to be inline with ui

packages/app/src/TeamPage.tsx

@@ -105,7 +105,7 @@ function ConnectionsSection() {
   const [isCreatingConnection, setIsCreatingConnection] = useState(false);
 
   return (
-    <Box>
+    <Box id="connections">
       <Text size="md" c="gray.4">
         Connections
       </Text>
@@ -205,7 +205,7 @@ function SourcesSection() {
   const [isCreatingSource, setIsCreatingSource] = useState(false);
 
   return (
-    <Box>
+    <Box id="sources">
       <Text size="md" c="gray.4">
         Sources
       </Text>
@@ -479,7 +479,7 @@ function TeamMembersSection() {
   };
 
   return (
-    <Box>
+    <Box id="team_members">
       <Text size="md" c="gray.4">
         Team
       </Text>
@@ -906,7 +906,7 @@ function IntegrationsSection() {
   ] = useDisclosure();
 
   return (
-    <Box>
+    <Box id="integrations">
       <Text size="md" c="gray.4">
         Integrations
       </Text>
@@ -997,7 +997,7 @@ function TeamNameSection() {
     [refetchTeam, setTeamName, team?.name],
   );
   return (
-    <Box>
+    <Box id="team_name">
       <Text size="md" c="gray.4">
         Team Name
       </Text>
@@ -1097,7 +1097,7 @@ const APIKeyCopyButton = ({
   );
 };
 
-function ApiKeySection() {
+function ApiKeysSection() {
   const { data: team, refetch: refetchTeam } = api.useTeam();
   const { data: me, isLoading: isLoadingMe } = api.useMe();
   const rotateTeamApiKey = api.useRotateTeamApiKey();
@@ -1130,7 +1130,7 @@ function ApiKeySection() {
   };
 
   return (
-    <Box>
+    <Box id="api_keys">
       <Text size="md" c="gray.4">
         API Keys
       </Text>
@@ -1233,7 +1233,7 @@ export default function TeamPage() {
               <ConnectionsSection />
               <IntegrationsSection />
               <TeamNameSection />
-              <ApiKeySection />
+              <ApiKeysSection />
 
               {hasAllowedAuthMethods && (
                 <>

packages/app/src/components/DBRowSidePanel.tsx

@@ -316,7 +316,7 @@ export default function DBRowSidePanel({
                     text: 'Surrounding Context',
                     value: Tab.Context,
                   },
-                  ...(rumSessionId != null && source.sessionSourceId
+                  ...(rumSessionId != null
                     ? [
                         {
                           text: 'Session Replay',

packages/app/src/components/DBSessionPanel.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import Link from 'next/link';
 import { Loader } from '@mantine/core';
 
 import SessionSubpanel from '@/SessionSubpanel';
@@ -99,11 +100,11 @@ export const DBSessionPanel = ({
   setSubDrawerOpen: (open: boolean) => void;
 }) => {
   const { data: traceSource } = useSource({ id: traceSourceId });
-  const { data: sessionSource } = useSource({
+  const { data: sessionSource, isLoading: isSessionSourceLoading } = useSource({
     id: traceSource?.sessionSourceId,
   });
 
-  if (!traceSource || !sessionSource) {
+  if (!traceSource || (!sessionSource && isSessionSourceLoading)) {
     return <Loader />;
   }
 
@@ -113,10 +114,9 @@ export const DBSessionPanel = ({
         <div className="m-2 fs-8 p-4">
           No correlated session source found.
           <br />
-          Go to Team Settings and update <strong>
-            {traceSource?.name}
-          </strong>{' '}
-          source to include the correlated session source.
+          Go to <Link href="/team#sources">Team Settings</Link> and update the{' '}
+          <strong>{traceSource?.name}</strong> source to include the correlated
+          session source.
         </div>
       ) : rumSessionId && traceSource ? (
         <SessionSubpanel