fix(app): connect to cdn modal instructions (#6824)

Author: n1ru4l

packages/web/app/package.json

@@ -114,6 +114,7 @@
     "react-icons": "5.4.0",
     "react-select": "5.9.0",
     "react-string-replace": "1.1.1",
+    "react-textarea-autosize": "8.5.9",
     "react-toastify": "10.0.6",
     "react-virtualized-auto-sizer": "1.0.25",
     "react-virtuoso": "4.12.3",

packages/web/app/src/components/layouts/target.tsx

@@ -536,9 +536,10 @@ function FederationModalContent(props: {
         {authenticateSection}
         <div className="mt-2">
           <InputCopy
+            multiline
             value={`docker run --name hive-gateway --rm -p 4000:4000 \\
   ghcr.io/graphql-hive/gateway supergraph \\
-  '${props.cdnUrl}' \\
+  "${props.cdnUrl}" \\
   --hive-cdn-key '<hive_cdn_access_key>'`}
           />
         </div>
@@ -557,6 +558,7 @@ function FederationModalContent(props: {
         </p>
         {authenticateSection}
         <InputCopy
+          multiline
           value={`docker run --name hive-gateway --rm \\
   --env HIVE_CDN_ENDPOINT="${props.cdnUrl}" \\
   --env HIVE_CDN_KEY="<hive_cdn_access_key>"
@@ -575,14 +577,17 @@ function FederationModalContent(props: {
           .
         </p>
       </TabsContent>
-      <TabsContent value="cdn" className="space-y-2 pt-2" variant="content">
+      <TabsContent value="cdn" variant="content">
         <p>For other tooling you can access the raw supergraph by sending a HTTP request.</p>
         <p>To access your schema from Hive's CDN, use the following endpoint:</p>
-        <InputCopy value={`${props.cdnUrl}/supergraph`} />
+        <div>
+          <InputCopy multiline value={`${props.cdnUrl}/supergraph`} />
+        </div>
         <p>Here is an example calling the endpoint using curl.</p>
         {authenticateSection}
         <div className="mt-2">
           <InputCopy
+            multiline
             value={`curl -H 'X-Hive-CDN-Key: <hive_cdn_access_key>' \\
   ${props.cdnUrl}/supergraph`}
           />

packages/web/app/src/components/ui/input-copy.tsx

@@ -2,9 +2,10 @@ import { useCallback, useEffect, useState } from 'react';
 import { CheckIcon, CopyIcon } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
 import { useClipboard } from '@/lib/hooks';
 
-export function InputCopy(props: { value: string; className?: string }) {
+export function InputCopy(props: { value: string; className?: string; multiline?: boolean }) {
   const [isCopied, setIsCopied] = useState(false);
   const copyToClipboard = useClipboard();
 
@@ -22,25 +23,35 @@ export function InputCopy(props: { value: string; className?: string }) {
   const handleClick = useCallback(async () => {
     await copyToClipboard(props.value);
     setIsCopied(true);
-  }, [copyToClipboard]);
+  }, [copyToClipboard, props.value]);
 
   return (
     <div className="flex w-full max-w-2xl items-center space-x-2">
-      <div className="relative grow">
-        <Input
-          type="text"
+      {props.multiline ? (
+        <Textarea
           value={props.value}
           readOnly
-          className={`bg-secondary truncate text-white ${props.className}`}
+          autoSize
           onFocus={ev => ev.target.select()}
+          className={`bg-secondary w-full resize-none font-mono text-xs text-white ${props.className}`}
         />
-      </div>
+      ) : (
+        <div className="relative grow">
+          <Input
+            type="text"
+            value={props.value}
+            readOnly
+            className={`bg-secondary truncate text-white ${props.className}`}
+            onFocus={ev => ev.target.select()}
+          />
+        </div>
+      )}
       <Button
         type="button"
         onClick={handleClick}
         variant="outline"
         size="icon"
-        className="bg-secondary size-10 shrink-0"
+        className="bg-secondary size-10 shrink-0 self-baseline"
       >
         {isCopied ? (
           <CheckIcon className="size-4 text-emerald-500" />

packages/web/app/src/components/ui/textarea.tsx

@@ -1,20 +1,22 @@
 import React from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
 import { cn } from '@/lib/utils';
 
 type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps & { autoSize?: boolean }>(
+  ({ className, autoSize, ...props }, ref) => {
+    const classNameFinal = cn(
+      'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      autoSize && 'min-h-[0px]',
+      className,
     );
+
+    if (autoSize) {
+      return <TextareaAutosize className={classNameFinal} ref={ref} {...(props as any)} />;
+    }
+
+    return <textarea className={classNameFinal} ref={ref} {...props} />;
   },
 );
 Textarea.displayName = 'Textarea';