Fix hydration errors across a variety of pages (#1556)

Small PR to resolve all the hydration errors on a few pages

Author: brandon-pereira

.changeset/blue-drinks-dress.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+Fix hydration errors across a variety of pages

packages/app/src/HDXMultiSeriesTableChart.tsx

@@ -293,8 +293,8 @@ export const Table = ({
             </tr>
           )}
         </tbody>
-        {tableBottom && tableBottom}
       </table>
+      {tableBottom}
     </div>
   );
 };

packages/app/src/SessionsPage.tsx

@@ -220,7 +220,7 @@ function SessionCardList({
 const defaultTimeRange = parseTimeQuery('Past 1h', false) as [Date, Date];
 const appliedConfigMap = {
   sessionSource: parseAsString,
-  where: parseAsString,
+  where: parseAsString.withDefault(''),
   whereLanguage: parseAsStringEnum<'sql' | 'lucene'>(['sql', 'lucene']),
 };
 export default function SessionsPage() {

packages/app/src/TeamPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { Fragment, useCallback, useState } from 'react';
 import Head from 'next/head';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
@@ -162,11 +162,11 @@ function SourcesSection() {
       <Card variant="muted">
         <Stack>
           {sources?.map(s => (
-            <>
-              <Flex key={s.id} justify="space-between" align="center">
+            <Fragment key={s.id}>
+              <Flex justify="space-between" align="center">
                 <div>
                   <Text>{s.name}</Text>
-                  <Text size="xxs" c="dimmed" mt="xs">
+                  <Text size="xxs" c="dimmed" mt="xs" component="div">
                     <Group gap="xs">
                       {capitalizeFirstLetter(s.kind)}
                       <Group gap={2}>
@@ -216,7 +216,7 @@ function SourcesSection() {
                 />
               )}
               <Divider />
-            </>
+            </Fragment>
           ))}
           {!IS_LOCAL_MODE && isCreatingSource && (
             <TableSourceForm

packages/app/src/components/DBSearchPageFilters.tsx

@@ -1229,7 +1229,7 @@ const DBSearchPageFiltersComponent = ({
                   withArrow
                   label="Denoise results will visually remove events matching common event patterns from the results table."
                 >
-                  <Text size="xs" mt="-2px">
+                  <Text size="xs" mt="-2px" component="div">
                     <Group gap={2}>
                       <IconShadow
                         size={14}
@@ -1258,7 +1258,7 @@ const DBSearchPageFiltersComponent = ({
                     withArrow
                     label="Only show root spans (spans with no parent span)."
                   >
-                    <Text size="xs" mt="-2px">
+                    <Text size="xs" mt="-2px" component="div">
                       <Group gap={2}>
                         <IconSitemap
                           size={14}