From ff8b855678b8a73e98e534bd9711584d8a42c7d7 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Wed, 24 Jan 2024 16:07:05 +0700 Subject: [PATCH] SQL preview on hover snippet (#20694) * SQL preview on hover snippet * Fix class name * Fix some styling * Fix some styling * Remove console log * Fix --- .../Realtime/Inspector/MessagesFormatters.tsx | 1 - .../interfaces/SQLEditor/SQLEditor.tsx | 2 +- .../Settings/Logs/LogsFormatters.tsx | 1 - .../layouts/SQLEditorLayout/QueryItem.tsx | 83 ++++++++++++++----- .../layouts/SQLEditorLayout/SQLEditorMenu.tsx | 2 +- .../to-be-cleaned/SimpleCodeBlock.tsx | 4 +- apps/studio/components/ui/CopyButton.tsx | 27 ++---- packages/ui/index.tsx | 7 ++ 8 files changed, 85 insertions(+), 42 deletions(-) diff --git a/apps/studio/components/interfaces/Realtime/Inspector/MessagesFormatters.tsx b/apps/studio/components/interfaces/Realtime/Inspector/MessagesFormatters.tsx index 8f20acebf9a..58beca3d595 100644 --- a/apps/studio/components/interfaces/Realtime/Inspector/MessagesFormatters.tsx +++ b/apps/studio/components/interfaces/Realtime/Inspector/MessagesFormatters.tsx @@ -39,7 +39,6 @@ export const SelectionDetailedRow = ({ {!hideCopy && ( { range: new monaco.Range(line, 1, line, 20), options: { isWholeLine: true, - inlineClassName: 'bg-amber-600', + inlineClassName: 'bg-warning-400', }, }, ] diff --git a/apps/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx b/apps/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx index a186f7ac9b2..10e382b2432 100644 --- a/apps/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx +++ b/apps/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx @@ -38,7 +38,6 @@ export const SelectionDetailedRow = ({ {valueRender ?? value} { const { ref, id: activeId } = useParams() - const { id, name, description } = tabInfo || {} + const { id, name, description, content } = tabInfo || {} const isActive = id === activeId const activeItemRef = useRef(null) @@ -61,24 +66,64 @@ const QueryItem = ({ tabInfo }: QueryItemProps) => { }) return ( -
) : null} - > - -

+ +

) : null} > - {name} -

- -
{}
-
+ +

+ {name} +

+ +
{}
+
+ + {!isActive && ( + +

Query preview:

+
+ {content.sql.trim() ? ( + + {content.sql.replaceAll('\n', ' ').replaceAll(/\s+/g, ' ').slice(0, 43) + + `${content.sql.length > 43 ? '...' : ''}`} + + ) : ( +

This query is empty

+ )} + {content.sql.trim() && ( + + )} +
+ + )} + ) } @@ -225,7 +270,7 @@ const QueryItemActions = observer(({ tabInfo, activeId }: QueryItemActionsProps) - + {isSnippetOwner && ( diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx index 17f03702f1b..f186c21f9d2 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx @@ -3,7 +3,7 @@ import { useParams } from 'common' import { observer } from 'mobx-react-lite' import { useRouter } from 'next/router' import { useMemo, useState } from 'react' -import { Button, cn, IconPlus, IconSearch, IconX, Input, Menu } from 'ui' +import { Button, IconPlus, IconSearch, IconX, Input, Menu, cn } from 'ui' import { untitledSnippetTitle } from 'components/interfaces/SQLEditor/SQLEditor.constants' import { createSqlSnippetSkeleton } from 'components/interfaces/SQLEditor/SQLEditor.utils' diff --git a/apps/studio/components/to-be-cleaned/SimpleCodeBlock.tsx b/apps/studio/components/to-be-cleaned/SimpleCodeBlock.tsx index be6d2969a6a..e1f0a6589d2 100644 --- a/apps/studio/components/to-be-cleaned/SimpleCodeBlock.tsx +++ b/apps/studio/components/to-be-cleaned/SimpleCodeBlock.tsx @@ -20,6 +20,7 @@ const prism = { } interface SimpleCodeBlockProps { + parentClassName?: string className?: string metastring?: string showCopy?: boolean @@ -27,6 +28,7 @@ interface SimpleCodeBlockProps { const SimpleCodeBlock = ({ children, + parentClassName, className: languageClassName, metastring, showCopy = true, @@ -67,7 +69,7 @@ const SimpleCodeBlock = ({ {({ className, tokens, getLineProps, getTokenProps }) => { return (
- 
+            
               {tokens.map((line, i) => {
                 const lineProps = getLineProps({ line, key: i })
 
diff --git a/apps/studio/components/ui/CopyButton.tsx b/apps/studio/components/ui/CopyButton.tsx
index 690f3399d7e..505c31ace4c 100644
--- a/apps/studio/components/ui/CopyButton.tsx
+++ b/apps/studio/components/ui/CopyButton.tsx
@@ -1,20 +1,12 @@
-import { Button, ButtonProps } from 'ui'
+import { Button, ButtonProps, IconCheck, IconClipboard } from 'ui'
 import { copyToClipboard } from 'lib/helpers'
-import { IconClipboard } from 'ui'
 import { useEffect, useState } from 'react'
 
 export interface CopyButtonProps extends ButtonProps {
   text: string
-  // used for text-less feedback
-  bounceIconOnCopy?: boolean
+  iconOnly?: boolean
 }
-const CopyButton: React.FC = ({
-  text,
-  children,
-  onClick,
-  bounceIconOnCopy,
-  ...props
-}) => {
+const CopyButton = ({ text, iconOnly = false, children, onClick, ...props }: CopyButtonProps) => {
   const [showCopied, setShowCopied] = useState(false)
 
   useEffect(() => {
@@ -31,16 +23,15 @@ const CopyButton: React.FC = ({
         onClick?.(e)
       }}
       icon={
-        
+        showCopied ? (
+          
+        ) : (
+          
+        )
       }
       {...props}
     >
-      {children ?? (showCopied ? 'Copied' : 'Copy')}
+      {!iconOnly && <>{children ?? (showCopied ? 'Copied' : 'Copy')}}
     
   )
 }
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 3e8d2005db1..d6b74fbee8c 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -196,6 +196,13 @@ export {
   TabsTrigger as TabsTrigger_Shadcn_,
 } from './src/components/shadcn/ui/tabs/tabs'
 
+export {
+  TooltipProvider as TooltipProvider_Shadcn_,
+  Tooltip as Tooltip_Shadcn_,
+  TooltipTrigger as TooltipTrigger_Shadcn_,
+  TooltipContent as TooltipContent_Shadcn_,
+} from './src/components/shadcn/ui/tooltip'
+
 export { ScrollArea, ScrollBar } from './src/components/shadcn/ui/scroll-area'
 
 export { Separator } from './src/components/shadcn/ui/separator'