[pull] master from supabase:master

apps/studio/components/grid/components/header/Header.tsx

@@ -2,7 +2,6 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import saveAs from 'file-saver'
 import { ArrowUp, ChevronDown, FileText, Trash } from 'lucide-react'
 import Link from 'next/link'
-import Papa from 'papaparse'
 import { ReactNode, useState } from 'react'
 import { toast } from 'sonner'
 
@@ -28,6 +27,7 @@ import { useTableEditorTableStateSnapshot } from 'state/table-editor-table'
 import {
   Button,
   cn,
+  copyToClipboard,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -37,6 +37,7 @@ import {
 } from 'ui'
 import { ExportDialog } from './ExportDialog'
 import { FilterPopover } from './filter/FilterPopover'
+import { formatRowsForCSV } from './Header.utils'
 import { SortPopover } from './sort/SortPopover'
 // [Joshen] CSV exports require this guard as a fail-safe if the table is
 // just too large for a browser to keep all the rows in memory before
@@ -281,6 +282,25 @@ const RowHeader = () => {
     })
   }
 
+  const onCopyRows = (type: 'csv' | 'json' | 'sql') => {
+    const rows = allRows.filter((x) => snap.selectedRows.has(x.idx))
+
+    if (type === 'csv') {
+      const csv = formatRowsForCSV({
+        rows,
+        columns: snap.table!.columns.map((column) => column.name),
+      })
+      copyToClipboard(csv)
+    } else if (type === 'sql') {
+      const sqlStatements = formatTableRowsToSQL(snap.table, rows)
+      copyToClipboard(sqlStatements)
+    } else if (type === 'json') {
+      copyToClipboard(JSON.stringify(rows))
+    }
+
+    toast.success('Copied rows to clipboard')
+  }
+
   const onRowsExportCSV = async () => {
     setIsExporting(true)
 
@@ -340,16 +360,8 @@ const RowHeader = () => {
       return
     }
 
-    const formattedRows = rows.map((row) => {
-      const formattedRow = row
-      Object.keys(row).map((column) => {
-        if (typeof row[column] === 'object' && row[column] !== null)
-          formattedRow[column] = JSON.stringify(formattedRow[column])
-      })
-      return formattedRow
-    })
-
-    const csv = Papa.unparse(formattedRows, {
+    const csv = formatRowsForCSV({
+      rows,
       columns: snap.table!.columns.map((column) => column.name),
     })
     const csvData = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
@@ -494,6 +506,42 @@ const RowHeader = () => {
                 : `Delete ${snap.selectedRows.size} row`}
           </ButtonTooltip>
         )}
+
+        {!snap.allRowsSelected ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                type="default"
+                size="tiny"
+                iconRight={<ChevronDown />}
+                loading={isExporting}
+                disabled={isExporting}
+              >
+                Copy
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-40">
+              <DropdownMenuItem onClick={() => onCopyRows('csv')}>Copy as CSV</DropdownMenuItem>
+              <DropdownMenuItem onClick={() => onCopyRows('sql')}>Copy as SQL</DropdownMenuItem>
+              <DropdownMenuItem onClick={() => onCopyRows('json')}>Copy as JSON</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : (
+          <ButtonTooltip
+            disabled
+            type="default"
+            tooltip={{
+              content: {
+                side: 'bottom',
+                className: 'w-64 text-center',
+                text: 'Copy to clipboard is not supported while all rows in the table are selected',
+              },
+            }}
+          >
+            Copy
+          </ButtonTooltip>
+        )}
+
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button

apps/studio/components/grid/components/header/Header.utils.ts

@@ -0,0 +1,14 @@
+import Papa from 'papaparse'
+
+export const formatRowsForCSV = ({ rows, columns }: { rows: any[]; columns: string[] }) => {
+  const formattedRows = rows.map((row) => {
+    const formattedRow = row
+    Object.keys(row).map((column) => {
+      if (typeof row[column] === 'object' && row[column] !== null)
+        formattedRow[column] = JSON.stringify(formattedRow[column])
+    })
+    return formattedRow
+  })
+  const csv = Papa.unparse(formattedRows, { columns })
+  return csv
+}

apps/studio/components/grid/components/menu/RowContextMenu.tsx

@@ -1,6 +1,7 @@
-import { Clipboard, Edit, Trash } from 'lucide-react'
+import { ChevronRight, Clipboard, Edit, Trash } from 'lucide-react'
 import { useCallback } from 'react'
-import { Item, ItemParams, Menu } from 'react-contexify'
+import { Item, ItemParams, Menu, Separator, Submenu } from 'react-contexify'
+import { toast } from 'sonner'
 
 import type { SupaRow } from 'components/grid/types'
 import { useTableEditorStateSnapshot } from 'state/table-editor'
@@ -48,27 +49,50 @@ const RowContextMenu = ({ rows }: RowContextMenuProps) => {
       const text = formatClipboardValue(value)
 
       copyToClipboard(text)
+      toast.success('Copied cell value to clipboard')
     },
     [rows, snap.gridColumns, snap.selectedCellPosition]
   )
 
+  const onCopyRowContent = useCallback(
+    (p: ItemParams) => {
+      const { props } = p
+      const { rowIdx } = props
+      const row = rows[rowIdx]
+      copyToClipboard(JSON.stringify(row))
+      toast.success('Copied row to clipboard')
+    },
+    [rows]
+  )
+
   return (
-    <>
-      <Menu id={ROW_CONTEXT_MENU_ID} animation={false}>
+    <Menu id={ROW_CONTEXT_MENU_ID} animation={false} className="!min-w-36">
+      <Submenu
+        label={
+          <div className="flex items-center space-x-2">
+            <Clipboard size={12} />
+            <span className="text-xs">Copy</span>
+          </div>
+        }
+        arrow={<ChevronRight size={12} />}
+      >
         <Item onClick={onCopyCellContent}>
-          <Clipboard size={14} />
-          <span className="ml-2 text-xs">Copy cell content</span>
-        </Item>
-        <Item onClick={onEditRowClick} hidden={!snap.editable} data="edit">
-          <Edit size={14} />
-          <span className="ml-2 text-xs">Edit row</span>
+          <span className="ml-2 text-xs">Copy cell</span>
         </Item>
-        <Item onClick={onDeleteRow} hidden={!snap.editable} data="delete">
-          <Trash size={14} stroke="red" />
-          <span className="ml-2 text-xs">Delete row</span>
+        <Item onClick={onCopyRowContent}>
+          <span className="ml-2 text-xs">Copy row</span>
         </Item>
-      </Menu>
-    </>
+      </Submenu>
+      <Item onClick={onEditRowClick} hidden={!snap.editable} data="edit">
+        <Edit size={12} />
+        <span className="ml-2 text-xs">Edit row</span>
+      </Item>
+      <Separator />
+      <Item onClick={onDeleteRow} hidden={!snap.editable} data="delete">
+        <Trash size={12} />
+        <span className="ml-2 text-xs">Delete row</span>
+      </Item>
+    </Menu>
   )
 }
 export default RowContextMenu

apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx

@@ -12,6 +12,11 @@ import { Eye, EyeOff, MinusCircle } from 'lucide-react'
 import { DuplicateSecretWarningModal } from './DuplicateSecretWarningModal'
 import {
   Button,
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormField_Shadcn_,
@@ -149,99 +154,101 @@ const AddNewSecretForm = () => {
   }
 
   return (
-    <Panel>
-      <Panel.Content className="grid gap-4">
-        <h2 className="text-sm">Add new secrets</h2>
-        <Form_Shadcn_ {...form}>
-          <form className="w-full" onSubmit={form.handleSubmit(onSubmit)}>
-            {fields.map((fieldItem, index) => (
-              <div key={fieldItem.id} className="grid grid-cols-[1fr_1fr_auto] gap-4 mb-4">
-                <FormField_Shadcn_
-                  control={form.control}
-                  name={`secrets.${index}.name`}
-                  render={({ field }) => (
-                    <FormItem_Shadcn_ className="w-full">
-                      <FormLabel_Shadcn_>Key</FormLabel_Shadcn_>
-                      <FormControl_Shadcn_>
-                        <Input
-                          {...field}
-                          placeholder="e.g. CLIENT_KEY"
-                          onPaste={(e) => handlePaste(e.nativeEvent)}
-                        />
-                      </FormControl_Shadcn_>
-                      <FormMessage_Shadcn_ />
-                    </FormItem_Shadcn_>
-                  )}
-                />
-                <FormField_Shadcn_
-                  control={form.control}
-                  name={`secrets.${index}.value`}
-                  render={({ field }) => (
-                    <FormItem_Shadcn_ className="w-full relative">
-                      <FormLabel_Shadcn_>Value</FormLabel_Shadcn_>
-                      <FormControl_Shadcn_>
-                        <Input
-                          {...field}
-                          type={showSecretValue ? 'text' : 'password'}
-                          actions={
-                            <div className="mr-1">
-                              <Button
-                                type="text"
-                                className="px-1"
-                                icon={showSecretValue ? <EyeOff /> : <Eye />}
-                                onClick={() => setShowSecretValue(!showSecretValue)}
-                              />
-                            </div>
-                          }
-                        />
-                      </FormControl_Shadcn_>
-                      <FormMessage_Shadcn_ />
-                    </FormItem_Shadcn_>
-                  )}
-                />
-
-                <Button
-                  type="default"
-                  className="h-[34px] mt-6"
-                  icon={<MinusCircle />}
-                  onClick={() => (fields.length > 1 ? remove(index) : form.reset(defaultValues))}
-                />
-              </div>
-            ))}
-
-            <Button
-              type="default"
-              onClick={() => {
-                const formValues = form.getValues('secrets')
-                const isEmptyForm = formValues.every((field) => !field.name && !field.value)
-                if (isEmptyForm) {
-                  fields.forEach((_, index) => remove(index))
-                  append({ name: '', value: '' })
-                } else {
-                  append({ name: '', value: '' })
-                }
-              }}
-            >
-              Add another
-            </Button>
-
-            <div className="flex items-center gap-2 col-span-2 -mx-6 px-6 border-t pt-4 mt-4">
+    <>
+      <Form_Shadcn_ {...form}>
+        <form className="w-full" onSubmit={form.handleSubmit(onSubmit)}>
+          <Card>
+            <CardHeader>
+              <CardTitle>Add new secrets</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {fields.map((fieldItem, index) => (
+                <div key={fieldItem.id} className="grid grid-cols-[1fr_1fr_auto] gap-4 mb-4">
+                  <FormField_Shadcn_
+                    control={form.control}
+                    name={`secrets.${index}.name`}
+                    render={({ field }) => (
+                      <FormItem_Shadcn_ className="w-full">
+                        <FormLabel_Shadcn_>Key</FormLabel_Shadcn_>
+                        <FormControl_Shadcn_>
+                          <Input
+                            {...field}
+                            placeholder="e.g. CLIENT_KEY"
+                            onPaste={(e) => handlePaste(e.nativeEvent)}
+                          />
+                        </FormControl_Shadcn_>
+                        <FormMessage_Shadcn_ />
+                      </FormItem_Shadcn_>
+                    )}
+                  />
+                  <FormField_Shadcn_
+                    control={form.control}
+                    name={`secrets.${index}.value`}
+                    render={({ field }) => (
+                      <FormItem_Shadcn_ className="w-full relative">
+                        <FormLabel_Shadcn_>Value</FormLabel_Shadcn_>
+                        <FormControl_Shadcn_>
+                          <Input
+                            {...field}
+                            type={showSecretValue ? 'text' : 'password'}
+                            actions={
+                              <div className="mr-1">
+                                <Button
+                                  type="text"
+                                  className="px-1"
+                                  icon={showSecretValue ? <EyeOff /> : <Eye />}
+                                  onClick={() => setShowSecretValue(!showSecretValue)}
+                                />
+                              </div>
+                            }
+                          />
+                        </FormControl_Shadcn_>
+                        <FormMessage_Shadcn_ />
+                      </FormItem_Shadcn_>
+                    )}
+                  />
+
+                  <Button
+                    type="default"
+                    className="h-[34px] mt-6"
+                    icon={<MinusCircle />}
+                    onClick={() => (fields.length > 1 ? remove(index) : form.reset(defaultValues))}
+                  />
+                </div>
+              ))}
+
+              <Button
+                type="default"
+                onClick={() => {
+                  const formValues = form.getValues('secrets')
+                  const isEmptyForm = formValues.every((field) => !field.name && !field.value)
+                  if (isEmptyForm) {
+                    fields.forEach((_, index) => remove(index))
+                    append({ name: '', value: '' })
+                  } else {
+                    append({ name: '', value: '' })
+                  }
+                }}
+              >
+                Add another
+              </Button>
+            </CardContent>
+            <CardFooter className="justify-end space-x-2">
               <Button type="primary" htmlType="submit" disabled={isCreating} loading={isCreating}>
                 {isCreating ? 'Saving...' : 'Save'}
               </Button>
-            </div>
-          </form>
-        </Form_Shadcn_>
-      </Panel.Content>
-
+            </CardFooter>
+          </Card>
+        </form>
+      </Form_Shadcn_>
       <DuplicateSecretWarningModal
         visible={!!duplicateSecretName}
         onCancel={handleCancelDuplicate}
         onConfirm={handleConfirmDuplicate}
         isCreating={isCreating}
         secretName={duplicateSecretName}
       />
-    </Panel>
+    </>
   )
 }