feat(dashboards): add details widget to query summary page

static/app/components/core/code/codeBlock.tsx

@@ -219,11 +219,13 @@ const FlexSpacer = styled('div')`
 
 const Wrapper = styled('div')<{isRounded: boolean}>`
   position: relative;
+  height: 100%;
   background: var(--prism-block-background);
   border-radius: ${p => (p.isRounded ? p.theme.borderRadius : '0px')};
 
   pre {
     margin: 0;
+    height: 100%;
   }
 
   &[data-render-inline='true'] pre {

static/app/views/dashboards/utils/prebuiltConfigs/queries/querySummary.ts

@@ -45,7 +45,7 @@ export const QUERIES_SUMMARY_PREBUILT_CONFIG: PrebuiltDashboard = {
         },
       ],
       widgetType: WidgetType.SPANS,
-      layout: {w: 2, h: 1, x: 2, y: 0, minH: 1},
+      layout: {y: 0, x: 2, h: 1, w: 2, minH: 1},
     },
     {
       id: 'metrics-duration',
@@ -66,7 +66,7 @@ export const QUERIES_SUMMARY_PREBUILT_CONFIG: PrebuiltDashboard = {
         },
       ],
       widgetType: WidgetType.SPANS,
-      layout: {w: 2, h: 1, x: 0, y: 0, minH: 1},
+      layout: {y: 0, x: 0, h: 1, w: 2, minH: 1},
     },
     {
       id: 'metrics-time-spent',
@@ -87,7 +87,31 @@ export const QUERIES_SUMMARY_PREBUILT_CONFIG: PrebuiltDashboard = {
         },
       ],
       widgetType: WidgetType.SPANS,
-      layout: {w: 2, h: 1, x: 4, y: 0, minH: 1},
+      layout: {y: 0, x: 4, h: 1, w: 2, minH: 1},
+    },
+    {
+      id: 'example-query',
+      title: 'Example Query',
+      description: '',
+      displayType: DisplayType.DETAILS,
+      thresholds: null,
+      interval: '1h',
+      queries: [
+        {
+          name: '',
+          fields: ['id', 'span.op', 'span.group', 'span.description', 'span.category'],
+          aggregates: [],
+          columns: ['id', 'span.op', 'span.group', 'span.description', 'span.category'],
+          fieldAliases: [],
+          conditions: '',
+          orderby: 'id',
+          onDemand: [],
+          linkedDashboards: [],
+        },
+      ],
+      limit: 1,
+      widgetType: WidgetType.SPANS,
+      layout: {y: 1, x: 0, h: 2, w: 6, minH: 2},
     },
     {
       id: 'transactions-with-query',
@@ -111,7 +135,7 @@ export const QUERIES_SUMMARY_PREBUILT_CONFIG: PrebuiltDashboard = {
         },
       ],
       widgetType: WidgetType.SPANS,
-      layout: {w: 6, h: 2, x: 0, y: 3, minH: 2},
+      layout: {y: 5, x: 0, h: 2, w: 6, minH: 2},
     },
     {
       id: 'metrics-throughput-line',
@@ -135,7 +159,7 @@ export const QUERIES_SUMMARY_PREBUILT_CONFIG: PrebuiltDashboard = {
         },
       ],
       widgetType: WidgetType.SPANS,
-      layout: {w: 3, h: 2, x: 0, y: 1, minH: 2},
+      layout: {y: 3, x: 0, h: 2, w: 3, minH: 2},
     },
     {
       id: 'metrics-duration-line',
@@ -158,7 +182,7 @@ export const QUERIES_SUMMARY_PREBUILT_CONFIG: PrebuiltDashboard = {
           isHidden: false,
         },
       ],
-      layout: {w: 3, h: 2, x: 3, y: 1, minH: 2},
+      layout: {y: 3, x: 3, h: 2, w: 3, minH: 2},
     },
   ],
 };

static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.tsx

@@ -1,10 +1,9 @@
 import styled from '@emotion/styled';
 
-import {AutoSizedText} from 'sentry/views/dashboards/widgetCard/autoSizedText';
 import type {DefaultDetailWidgetFields} from 'sentry/views/dashboards/widgets/detailsWidget/types';
-import {FullSpanDescription} from 'sentry/views/insights/common/components/fullSpanDescription';
+import {DatabaseSpanDescription} from 'sentry/views/insights/common/components/spanDescription';
 import {resolveSpanModule} from 'sentry/views/insights/common/utils/resolveSpanModule';
-import {SpanFields, type SpanResponse} from 'sentry/views/insights/types';
+import {ModuleName, SpanFields, type SpanResponse} from 'sentry/views/insights/types';
 
 import {DEEMPHASIS_COLOR_NAME, LOADING_PLACEHOLDER} from './settings';
 
@@ -15,39 +14,29 @@ interface DetailsWidgetVisualizationProps {
 export function DetailsWidgetVisualization(props: DetailsWidgetVisualizationProps) {
   const {span} = props;
 
-  const spanOp = span[SpanFields.SPAN_OP];
-  const spanDescription = span[SpanFields.SPAN_DESCRIPTION];
+  const spanOp = span[SpanFields.SPAN_OP] ?? '';
+  const spanDescription = span[SpanFields.SPAN_DESCRIPTION] ?? '';
   const spanGroup = span[SpanFields.SPAN_GROUP];
   const spanCategory = span[SpanFields.SPAN_CATEGORY];
 
   const moduleName = resolveSpanModule(spanOp, spanCategory);
 
-  if (spanOp === 'db') {
+  if (moduleName === ModuleName.DB) {
     return (
-      <FullSpanDescription
-        group={spanGroup}
-        shortDescription={spanDescription}
-        moduleName={moduleName}
+      <DatabaseSpanDescription
+        showBorder={false}
+        shouldClipHeight={false}
+        groupId={spanGroup}
+        preliminaryDescription={spanDescription}
       />
     );
   }
 
-  // String values don't support differences, thresholds, max values, or anything else.
-  return (
-    <Wrapper>
-      {spanOp} - {spanDescription}
-    </Wrapper>
-  );
+  return <Wrapper>{`${spanOp} - ${spanDescription}`}</Wrapper>;
 }
 
 function Wrapper({children}: any) {
-  return (
-    <GrowingWrapper>
-      <AutoResizeParent>
-        <AutoSizedText>{children}</AutoSizedText>
-      </AutoResizeParent>
-    </GrowingWrapper>
-  );
+  return <GrowingWrapper>{children}</GrowingWrapper>;
 }
 
 // Takes up 100% of the parent. If within flex context, grows to fill.
@@ -59,21 +48,6 @@ const GrowingWrapper = styled('div')`
   width: 100%;
 `;
 
-const AutoResizeParent = styled('div')`
-  position: absolute;
-  inset: 0;
-
-  color: ${p => p.theme.headingColor};
-
-  container-type: size;
-  container-name: auto-resize-parent;
-
-  * {
-    line-height: 1;
-    text-align: left !important;
-  }
-`;
-
 const LoadingPlaceholder = styled('span')`
   color: ${p => p.theme[DEEMPHASIS_COLOR_NAME]};
   font-size: ${p => p.theme.fontSize.lg};

static/app/views/insights/common/components/spanDescription.tsx

@@ -29,13 +29,17 @@ interface Props {
   groupId: SpanResponse[SpanFields.SPAN_GROUP];
   op: SpanResponse[SpanFields.SPAN_OP];
   preliminaryDescription?: string;
+  shouldClipHeight?: boolean;
+  showBorder?: boolean;
 }
 
 const formatter = new SQLishFormatter();
 
 export function DatabaseSpanDescription({
   groupId,
   preliminaryDescription,
+  showBorder = true,
+  shouldClipHeight = true,
 }: Omit<Props, 'op'>) {
   const navigate = useNavigate();
   const location = useLocation();
@@ -130,17 +134,21 @@ export function DatabaseSpanDescription({
   }, [preliminaryDescription, indexedSpan, system]);
 
   return (
-    <Frame>
+    <Frame showBorder={showBorder}>
       {areIndexedSpansLoading ? (
         <WithPadding>
           <LoadingIndicator mini />
         </WithPadding>
       ) : (
-        <QueryClippedBox clipHeight={500} isExpanded={isExpanded}>
+        <QueryWrapper
+          clipHeight={500}
+          isExpanded={isExpanded}
+          shouldClipHeight={shouldClipHeight}
+        >
           <CodeBlock language={system === 'mongodb' ? 'json' : 'sql'} isRounded={false}>
             {formattedDescription ?? ''}
           </CodeBlock>
-        </QueryClippedBox>
+        </QueryWrapper>
       )}
 
       {!areIndexedSpansLoading && (
@@ -164,19 +172,25 @@ export function DatabaseSpanDescription({
   );
 }
 
-function QueryClippedBox(props: any) {
-  const {isExpanded, children} = props;
+function QueryWrapper(props: any) {
+  const {isExpanded, children, shouldClipHeight} = props;
+
+  if (!shouldClipHeight) {
+    return <StyledFullBox>{children}</StyledFullBox>;
+  }
 
   if (isExpanded) {
     return children;
   }
-
   return <StyledClippedBox {...props} />;
 }
 
-const Frame = styled('div')`
-  border: solid 1px ${p => p.theme.border};
-  border-radius: ${p => p.theme.borderRadius};
+const Frame = styled('div')<{showBorder: boolean}>`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border: ${p => (p.showBorder ? `solid 1px ${p.theme.border}` : 'none')};
+  border-radius: ${p => (p.showBorder ? p.theme.borderRadius : '0')};
   overflow: hidden;
 `;
 
@@ -192,3 +206,9 @@ const StyledClippedBox = styled(ClippedBox)`
     z-index: 1;
   }
 `;
+
+const StyledFullBox = styled('div')`
+  padding: 0;
+  height: 100%;
+  overflow-y: auto;
+`;