feat: enhance SourceSchemaPreview button integration in select components (#1223)

Author: elizabetdev

.changeset/itchy-peas-pull.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": minor
+---
+
+Improve SourceSchemaPreview button integration in SourceSelect and DBTableSelect components.

packages/app/src/DBSearchPage.tsx

@@ -1215,13 +1215,10 @@ function DBSearchPage() {
               onCreate={openNewSourceModal}
               allowedSourceKinds={[SourceKind.Log, SourceKind.Trace]}
               data-testid="source-selector"
+              sourceSchemaPreview={
+                <SourceSchemaPreview source={inputSourceObj} variant="text" />
+              }
             />
-            <span className="ms-1">
-              <SourceSchemaPreview
-                source={inputSourceObj}
-                iconStyles={{ size: 'xs', color: 'dark.2' }}
-              />
-            </span>
             <Menu withArrow position="bottom-start">
               <Menu.Target>
                 <ActionIcon

packages/app/src/DashboardFiltersEditModal.tsx

@@ -89,12 +89,9 @@ const DashboardFilterEditForm = ({
                 data-testid="source-selector"
                 rules={{ required: true }}
                 comboboxProps={{ withinPortal: true }}
-              />
-            </span>
-            <span className="me-2">
-              <SourceSchemaPreview
-                source={source}
-                iconStyles={{ color: 'dark.2' }}
+                sourceSchemaPreview={
+                  <SourceSchemaPreview source={source} variant="text" />
+                }
               />
             </span>
           </Group>

packages/app/src/components/DBEditTimeChartForm.tsx

@@ -686,10 +686,9 @@ export default function EditTimeChartForm({
               control={control}
               name="source"
               data-testid="source-selector"
-            />
-            <SourceSchemaPreview
-              source={tableSource}
-              iconStyles={{ color: 'dark.2' }}
+              sourceSchemaPreview={
+                <SourceSchemaPreview source={tableSource} variant="text" />
+              }
             />
           </Flex>
 

packages/app/src/components/DBTableSelect.tsx

@@ -4,6 +4,7 @@ import { Flex, Select } from '@mantine/core';
 import { useTablesDirect } from '@/clickhouse';
 
 import SourceSchemaPreview from './SourceSchemaPreview';
+import { SourceSelectRightSection } from './SourceSelect';
 
 export default function DBTableSelect({
   database,
@@ -36,6 +37,19 @@ export default function DBTableSelect({
     label: db.name,
   }));
 
+  const rightSectionProps = SourceSelectRightSection({
+    sourceSchemaPreview:
+      connectionId && database && table ? (
+        <SourceSchemaPreview
+          source={{
+            connection: connectionId,
+            from: { databaseName: database, tableName: table },
+          }}
+          variant="text"
+        />
+      ) : undefined,
+  });
+
   return (
     <Flex align="center" gap={8}>
       <Select
@@ -53,17 +67,7 @@ export default function DBTableSelect({
         ref={inputRef}
         size={size}
         className="flex-grow-1"
-      />
-      <SourceSchemaPreview
-        source={
-          connectionId && database && table
-            ? {
-                connection: connectionId,
-                from: { databaseName: database, tableName: table },
-              }
-            : undefined
-        }
-        iconStyles={{ color: 'gray.4' }}
+        {...rightSectionProps}
       />
     </Flex>
   );

packages/app/src/components/SourceSchemaPreview.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { MetricsDataType, TSource } from '@hyperdx/common-utils/dist/types';
-import { Modal, Paper, Tabs, Text, TextProps, Tooltip } from '@mantine/core';
+import { Modal, Paper, Tabs, TextProps, Tooltip } from '@mantine/core';
+import { IconCode } from '@tabler/icons-react';
 
 import { useTableMetadata } from '@/hooks/useMetadata';
 
@@ -11,13 +12,15 @@ interface SourceSchemaInfoIconProps {
   isEnabled: boolean;
   tableCount: number;
   iconStyles?: Pick<TextProps, 'size' | 'color'>;
+  variant?: 'icon' | 'text';
 }
 
 const SourceSchemaInfoIcon = ({
   onClick,
   isEnabled,
   tableCount,
   iconStyles,
+  variant = 'icon',
 }: SourceSchemaInfoIconProps) => {
   const tooltipText = isEnabled
     ? tableCount > 1
@@ -33,11 +36,15 @@ const SourceSchemaInfoIcon = ({
       position="right"
       onClick={() => isEnabled && onClick()}
     >
-      <Text {...iconStyles}>
-        <i
-          className={`bi bi-code-square ${isEnabled ? 'cursor-pointer' : ''}`}
-        />
-      </Text>
+      {variant === 'text' ? (
+        <span
+          style={{ cursor: isEnabled ? 'pointer' : 'default', ...iconStyles }}
+        >
+          Schema
+        </span>
+      ) : (
+        <IconCode size={16} />
+      )}
     </Tooltip>
   );
 };
@@ -79,6 +86,7 @@ export interface SourceSchemaPreviewProps {
   source?: Pick<TSource, 'connection' | 'from' | 'metricTables'> &
     Partial<Pick<TSource, 'kind' | 'name'>>;
   iconStyles?: Pick<TextProps, 'size' | 'color'>;
+  variant?: 'icon' | 'text';
 }
 
 const METRIC_TYPE_NAMES: Record<MetricsDataType, string> = {
@@ -92,6 +100,7 @@ const METRIC_TYPE_NAMES: Record<MetricsDataType, string> = {
 const SourceSchemaPreview = ({
   source,
   iconStyles,
+  variant = 'icon',
 }: SourceSchemaPreviewProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -130,6 +139,7 @@ const SourceSchemaPreview = ({
         onClick={() => setIsModalOpen(true)}
         iconStyles={iconStyles}
         tableCount={tables.length}
+        variant={variant}
       />
       {isEnabled && (
         <Modal

packages/app/src/components/SourceSelect.tsx

@@ -1,22 +1,59 @@
 import { memo, useMemo } from 'react';
 import { UseControllerProps } from 'react-hook-form';
 import { SourceKind } from '@hyperdx/common-utils/dist/types';
-import { SelectProps } from '@mantine/core';
+import { SelectProps, UnstyledButton } from '@mantine/core';
+import { ComboboxChevron } from '@mantine/core';
 
 import SelectControlled from '@/components/SelectControlled';
 import { HDX_LOCAL_DEFAULT_SOURCES } from '@/config';
 import { useSources } from '@/source';
 
+import styles from '../../styles/SourceSelectControlled.module.scss';
+
+interface SourceSelectRightSectionProps {
+  sourceSchemaPreview?: React.ReactNode;
+}
+
+export const SourceSelectRightSection = ({
+  sourceSchemaPreview,
+}: SourceSelectRightSectionProps) => {
+  if (!sourceSchemaPreview) {
+    return {
+      rightSection: <ComboboxChevron />,
+    };
+  }
+
+  return {
+    rightSection: (
+      <>
+        <UnstyledButton
+          onClick={e => {
+            e.stopPropagation();
+            e.preventDefault();
+          }}
+          className={styles.sourceSchemaPreviewButton}
+        >
+          {sourceSchemaPreview}
+        </UnstyledButton>
+        <ComboboxChevron />
+      </>
+    ),
+    rightSectionWidth: 70,
+  };
+};
+
 function SourceSelectControlledComponent({
   size,
   onCreate,
   allowedSourceKinds,
   comboboxProps,
+  sourceSchemaPreview,
   ...props
 }: {
   size?: string;
   onCreate?: () => void;
   allowedSourceKinds?: SourceKind[];
+  sourceSchemaPreview?: React.ReactNode;
 } & UseControllerProps<any> &
   SelectProps) {
   const { data } = useSources();
@@ -45,6 +82,8 @@ function SourceSelectControlledComponent({
     [data, onCreate, allowedSourceKinds, hasLocalDefaultSources],
   );
 
+  const rightSectionProps = SourceSelectRightSection({ sourceSchemaPreview });
+
   return (
     <SelectControlled
       {...props}
@@ -57,6 +96,7 @@ function SourceSelectControlledComponent({
       maxDropdownHeight={280}
       size={size}
       onCreate={onCreate}
+      {...rightSectionProps}
     />
   );
 }

packages/app/styles/SourceSelectControlled.module.scss

@@ -0,0 +1,13 @@
+.sourceSchemaPreviewButton {
+  pointer-events: all;
+  font-size: var(--mantine-font-size-xxs);
+  background-color: var(--mantine-color-gray-9);
+  color: var(--mantine-color-gray-2);
+  padding-inline: var(--mantine-spacing-xxxs);
+  border-radius: var(--mantine-radius-xs);
+
+  &:hover {
+    color: var(--mantine-color-gray-1);
+    cursor: pointer;
+  }
+}