From 4efbd4ca16db018e83e762841f2edad7b6e7e76a Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Thu, 5 Dec 2024 16:17:16 +0800 Subject: [PATCH] Final clean up --- .../interfaces/Connect/ConnectionPanel.tsx | 41 +++++++------------ .../Connect/DatabaseConnectionString.tsx | 6 +-- apps/studio/pages/project/[ref]/index.tsx | 4 +- .../ui/src/components/CodeBlock/CodeBlock.tsx | 15 +++++-- 4 files changed, 31 insertions(+), 35 deletions(-) diff --git a/apps/studio/components/interfaces/Connect/ConnectionPanel.tsx b/apps/studio/components/interfaces/Connect/ConnectionPanel.tsx index 707ea58fd1d..a21940da701 100644 --- a/apps/studio/components/interfaces/Connect/ConnectionPanel.tsx +++ b/apps/studio/components/interfaces/Connect/ConnectionPanel.tsx @@ -11,7 +11,6 @@ import { CollapsibleTrigger_Shadcn_, WarningIcon, } from 'ui' -import { Input } from 'ui-patterns/DataInputs/Input' import { ConnectionParameters } from './ConnectionParameters' import { DirectConnectionIcon, TransactionIcon } from './PoolerIcons' @@ -20,7 +19,6 @@ interface ConnectionPanelProps { title: string description: string connectionString: string - onCopy: () => void ipv4Status: { type: 'error' | 'success' title: string @@ -36,6 +34,7 @@ interface ConnectionPanelProps { contentType?: 'input' | 'code' lang?: CodeBlockLang fileTitle?: string + onCopyCallback: () => void } const IPv4StatusIcon = ({ className, active }: { className?: string; active: boolean }) => { @@ -99,12 +98,12 @@ export const ConnectionPanel = ({ title, description, connectionString, - onCopy, ipv4Status, notice, parameters = [], lang = 'bash', fileTitle, + onCopyCallback, }: ConnectionPanelProps) => { return (
@@ -112,30 +111,18 @@ export const ConnectionPanel = ({

{title}

{description}

- {/* [JOSHEN TODO] Is this supposed to be hard-coded? */} - {false ? ( - - ) : ( - <> - {fileTitle && } - - - )} + {fileTitle && } + {notice && (
{notice?.map((text: string) => ( diff --git a/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx b/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx index f1833eaa25d..cd489d0dc0b 100644 --- a/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx +++ b/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx @@ -269,7 +269,6 @@ export const DatabaseConnectionString = () => { fileTitle={fileTitle} description="Ideal for applications with persistent, long-lived connections, such as those running on virtual machines or long-standing containers." connectionString={connectionStrings['direct'][selectedTab]} - onCopy={() => handleCopy(selectedTab)} ipv4Status={{ type: !ipv4Addon ? 'error' : 'success', title: !ipv4Addon ? 'Not IPv4 compatible' : 'IPv4 compatible', @@ -290,6 +289,7 @@ export const DatabaseConnectionString = () => { { ...CONNECTION_PARAMETERS.database, value: connectionInfo.db_name }, { ...CONNECTION_PARAMETERS.user, value: connectionInfo.db_user }, ]} + onCopyCallback={() => handleCopy(selectedTab)} /> { fileTitle={fileTitle} description="Ideal for stateless applications like serverless functions where each interaction with Postgres is brief and isolated." connectionString={connectionStrings['pooler'][selectedTab]} - onCopy={() => handleCopy(selectedTab)} ipv4Status={{ type: 'success', title: 'IPv4 compatible', @@ -324,6 +323,7 @@ export const DatabaseConnectionString = () => { description: 'Each transaction uses a different connection', }, ]} + onCopyCallback={() => handleCopy(selectedTab)} /> {ipv4Addon && ( { fileTitle={fileTitle} description="Only recommended as an alternative to Direct Connection, when connecting via an IPv4 network." connectionString={connectionStrings['pooler'][selectedTab].replace('6543', '5432')} - onCopy={() => handleCopy(selectedTab)} ipv4Status={{ type: 'success', title: 'IPv4 compatible', @@ -369,6 +368,7 @@ export const DatabaseConnectionString = () => { description: 'Connection is reserved for the entire session', }, ]} + onCopyCallback={() => handleCopy(selectedTab)} />
diff --git a/apps/studio/pages/project/[ref]/index.tsx b/apps/studio/pages/project/[ref]/index.tsx index 18bacbd94cb..c9d4e118558 100644 --- a/apps/studio/pages/project/[ref]/index.tsx +++ b/apps/studio/pages/project/[ref]/index.tsx @@ -59,7 +59,9 @@ const Home: NextPageWithLayout = () => {
{project?.status === PROJECT_STATUS.ACTIVE_HEALTHY && } {IS_PLATFORM && project?.status === PROJECT_STATUS.ACTIVE_HEALTHY && } - {!connectDialogUpdate && } + {IS_PLATFORM && + project?.status === PROJECT_STATUS.ACTIVE_HEALTHY && + !connectDialogUpdate && }
diff --git a/packages/ui/src/components/CodeBlock/CodeBlock.tsx b/packages/ui/src/components/CodeBlock/CodeBlock.tsx index b0cdea12df7..e50e03102b7 100644 --- a/packages/ui/src/components/CodeBlock/CodeBlock.tsx +++ b/packages/ui/src/components/CodeBlock/CodeBlock.tsx @@ -1,10 +1,12 @@ 'use client' +import { noop } from 'lodash' import { Check, Copy } from 'lucide-react' import { useTheme } from 'next-themes' import { Children, ReactNode, useState } from 'react' import { CopyToClipboard } from 'react-copy-to-clipboard' import { Light as SyntaxHighlighter, SyntaxHighlighterProps } from 'react-syntax-highlighter' + import { cn } from '../../lib/utils/cn' import { Button } from '../Button/Button' import { monokaiCustomTheme } from './CodeBlock.utils' @@ -13,16 +15,18 @@ import curl from 'highlightjs-curl' import bash from 'react-syntax-highlighter/dist/cjs/languages/hljs/bash' import csharp from 'react-syntax-highlighter/dist/cjs/languages/hljs/csharp' import dart from 'react-syntax-highlighter/dist/cjs/languages/hljs/dart' +import go from 'react-syntax-highlighter/dist/cjs/languages/hljs/go' import http from 'react-syntax-highlighter/dist/cjs/languages/hljs/http' import js from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript' import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json' import kotlin from 'react-syntax-highlighter/dist/cjs/languages/hljs/kotlin' -import py from 'react-syntax-highlighter/dist/cjs/languages/hljs/python' +import php from 'react-syntax-highlighter/dist/cjs/languages/hljs/php' +import { + default as py, + default as python, +} from 'react-syntax-highlighter/dist/cjs/languages/hljs/python' import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql' import ts from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript' -import php from 'react-syntax-highlighter/dist/cjs/languages/hljs/php' -import python from 'react-syntax-highlighter/dist/cjs/languages/hljs/python' -import go from 'react-syntax-highlighter/dist/cjs/languages/hljs/go' export type CodeBlockLang = | 'js' @@ -59,6 +63,7 @@ export interface CodeBlockProps { children?: string renderer?: SyntaxHighlighterProps['renderer'] focusable?: boolean + onCopyCallback?: () => void } /** @@ -93,6 +98,7 @@ export const CodeBlock = ({ hideLineNumbers = false, renderer, focusable = true, + onCopyCallback = noop, }: CodeBlockProps) => { const { resolvedTheme } = useTheme() const isDarkTheme = resolvedTheme?.includes('dark')! @@ -102,6 +108,7 @@ export const CodeBlock = ({ const handleCopy = () => { setCopied(true) + onCopyCallback() setTimeout(() => { setCopied(false) }, 1000)