Final clean up

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 (
     <div className="flex flex-col gap-5 lg:grid lg:grid-cols-2 lg:gap-20 w-full">
@@ -112,30 +111,18 @@ export const ConnectionPanel = ({
         <h1 className="text-sm mb-2">{title}</h1>
         <p className="text-sm text-foreground-light mb-4">{description}</p>
         <div className="flex flex-col -space-y-px">
-          {/* [JOSHEN TODO] Is this supposed to be hard-coded? */}
-          {false ? (
-            <Input
-              copy
-              readOnly
-              className="text-xs dark:bg-alternative font-mono input-mono [&>div>div>div>input]:text-xs [&>div>div>div>input]:opacity-100 rounded-b-none"
-              value={connectionString}
-              onCopy={onCopy}
-            />
-          ) : (
-            <>
-              {fileTitle && <CodeBlockFileHeader title={fileTitle} />}
-              <CodeBlock
-                wrapperClassName={cn(
-                  '[&_pre]:rounded-b-none [&_pre]:px-4 [&_pre]:py-3',
-                  fileTitle && '[&_pre]:rounded-t-none'
-                )}
-                language={lang}
-                value={connectionString}
-                className="[&_code]:text-[12px] [&_code]:text-foreground"
-                hideLineNumbers
-              />
-            </>
-          )}
+          {fileTitle && <CodeBlockFileHeader title={fileTitle} />}
+          <CodeBlock
+            wrapperClassName={cn(
+              '[&_pre]:rounded-b-none [&_pre]:px-4 [&_pre]:py-3',
+              fileTitle && '[&_pre]:rounded-t-none'
+            )}
+            language={lang}
+            value={connectionString}
+            className="[&_code]:text-[12px] [&_code]:text-foreground"
+            hideLineNumbers
+            onCopyCallback={onCopyCallback}
+          />
           {notice && (
             <div className="border px-4 py-1 w-full justify-start rounded-t-none !last:rounded-b group-data-[state=open]:rounded-b-none border-light">
               {notice?.map((text: string) => (

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)}
               />
               <ConnectionPanel
                 contentType={contentType}
@@ -299,7 +299,6 @@ export const DatabaseConnectionString = () => {
                 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 && (
                 <Admonition
@@ -345,7 +345,6 @@ export const DatabaseConnectionString = () => {
                 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)}
               />
             </div>
           </div>

apps/studio/pages/project/[ref]/index.tsx

@@ -59,7 +59,9 @@ const Home: NextPageWithLayout = () => {
         <div className="flex items-center gap-x-3">
           {project?.status === PROJECT_STATUS.ACTIVE_HEALTHY && <SecurityStatus />}
           {IS_PLATFORM && project?.status === PROJECT_STATUS.ACTIVE_HEALTHY && <ServiceStatus />}
-          {!connectDialogUpdate && <Connect />}
+          {IS_PLATFORM &&
+            project?.status === PROJECT_STATUS.ACTIVE_HEALTHY &&
+            !connectDialogUpdate && <Connect />}
         </div>
       </div>
 

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)