fix: remove several source change forms throughout the log drawer (#730)

Author: knudtty

.changeset/big-rules-think.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+36c3edc fix: remove several source change forms throughout the log drawer

packages/app/src/components/DBRowOverviewPanel.tsx

@@ -123,7 +123,6 @@ export function RowOverviewPanel({
       {!hideHeader && (
         <Box px="32px" pt="md">
           <DBRowSidePanelHeader
-            sourceId={source.id}
             date={new Date(firstRow?.__hdx_timestamp ?? 0)}
             tags={{}}
             mainContent={mainContent}

packages/app/src/components/DBRowSidePanel.tsx

@@ -247,7 +247,6 @@ export default function DBRowSidePanel({
             <>
               <Box p="sm">
                 <DBRowSidePanelHeader
-                  sourceId={source.id}
                   date={timestampDate}
                   tags={tags}
                   mainContent={mainContent}

packages/app/src/components/DBRowSidePanelHeader.tsx

@@ -5,10 +5,9 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Box, Button, Flex, Modal, Paper, Popover, Text } from '@mantine/core';
+import { Button, Flex, Paper, Text } from '@mantine/core';
 
 import EventTag from '@/components/EventTag';
-import { TableSourceForm } from '@/components/SourceForm';
 import { FormatTime } from '@/useFormatTime';
 import { useUserPreferences } from '@/useUserPreferences';
 import { formatDistanceToNowStrictShort } from '@/utils';
@@ -20,37 +19,13 @@ const isValidDate = (date: Date) => 'getTime' in date && !isNaN(date.getTime());
 
 const MAX_MAIN_CONTENT_LENGTH = 2000;
 
-const EditButton = ({
-  sourceId,
-  label,
-}: {
-  sourceId: string;
-  label?: string;
-}) => {
-  return (
-    <Popover width={600} position="bottom" withArrow withinPortal={false}>
-      <Popover.Target>
-        <Button size="compact-xs" variant="subtle" color="gray">
-          <i className="bi bi-gear-fill fs-8.5" />
-          {label && <span className="ms-2">{label}</span>}
-        </Button>
-      </Popover.Target>
-      <Popover.Dropdown>
-        <TableSourceForm sourceId={sourceId} />
-      </Popover.Dropdown>
-    </Popover>
-  );
-};
-
 export default function DBRowSidePanelHeader({
-  sourceId,
   tags,
   mainContent = '',
   mainContentHeader,
   date,
   severityText,
 }: {
-  sourceId: string;
   date: Date;
   mainContent?: string;
   mainContentHeader?: string;
@@ -137,12 +112,9 @@ export default function DBRowSidePanelHeader({
           ref={headerRef}
         >
           <Flex justify="space-between" mb="xs">
-            <Flex align="baseline" gap={2}>
-              <Text size="xs" c="gray.4">
-                {mainContentHeader}
-              </Text>
-              <EditButton sourceId={sourceId} />
-            </Flex>
+            <Text size="xs" c="gray.4">
+              {mainContentHeader}
+            </Text>
             {/* Toggles expanded sidebar header*/}
             {headerHeight >= maxBoxHeight && (
               <Button
@@ -184,7 +156,6 @@ export default function DBRowSidePanelHeader({
           <Text size="xs" c="gray.4" mb="xs">
             [Empty]
           </Text>
-          <EditButton sourceId={sourceId} label="Set body expression" />
         </Paper>
       )}
       <Flex mt="sm">

packages/app/src/components/DBTracePanel.tsx

@@ -4,7 +4,6 @@ import { useForm } from 'react-hook-form';
 import { tcFromSource } from '@hyperdx/common-utils/dist/metadata';
 import { SourceKind } from '@hyperdx/common-utils/dist/types';
 import {
-  ActionIcon,
   Button,
   Center,
   Divider,
@@ -14,15 +13,13 @@ import {
   Stack,
   Text,
 } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
 
 import { DBTraceWaterfallChartContainer } from '@/components/DBTraceWaterfallChart';
 import { useSource, useUpdateSource } from '@/source';
 import TabBar from '@/TabBar';
 
 import { RowDataPanel } from './DBRowDataPanel';
 import { RowOverviewPanel } from './DBRowOverviewPanel';
-import { TableSourceForm } from './SourceForm';
 import { SourceSelectControlled } from './SourceSelect';
 import { SQLInlineEditorControlled } from './SQLInlineEditor';
 
@@ -103,22 +100,6 @@ export default function DBTracePanel({
   }, [parentSourceData?.traceIdExpression, traceIdSetValue]);
 
   const [showTraceIdInput, setShowTraceIdInput] = useState(false);
-  const [showSourceForm, setShowSourceForm] = useState(false);
-  useEffect(() => {
-    if (
-      isTraceSourceLoading == false &&
-      (traceSourceData == null ||
-        traceSourceData?.kind == 'log' ||
-        traceSourceData?.durationExpression == null)
-    ) {
-      setShowSourceForm(true);
-    }
-  }, [showSourceForm, traceSourceData, isTraceSourceLoading]);
-
-  const [
-    sourceFormModalOpened,
-    { open: openSourceFormModal, close: closeSourceFormModal },
-  ] = useDisclosure(false);
 
   // Reset highlighted row when trace ID changes
   // otherwise we'll show stale span details
@@ -155,19 +136,6 @@ export default function DBTracePanel({
               : 'Correlated Log Source'}
           </Text>
           <SourceSelectControlled control={control} name="source" size="xs" />
-          <ActionIcon
-            variant="subtle"
-            color="dark.2"
-            size="sm"
-            onClick={
-              sourceFormModalOpened ? closeSourceFormModal : openSourceFormModal
-            }
-            title="Edit Source"
-          >
-            <Text size="xs">
-              <i className="bi bi-gear" />
-            </Text>
-          </ActionIcon>
         </Group>
       </Flex>
       {(showTraceIdInput || !traceId) && parentSourceId != null && (
@@ -214,7 +182,6 @@ export default function DBTracePanel({
         </Stack>
       )}
       <Divider my="sm" />
-      {sourceFormModalOpened && <TableSourceForm sourceId={watch('source')} />}
       {traceSourceData?.kind === SourceKind.Trace && (
         <DBTraceWaterfallChartContainer
           traceTableSource={traceSourceData}