Redo column type dropdown (supabase#29534)

* Redo column type dropdown * Fix spacing * Fix tests * Fix tests,2 * Fix the tests. --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>

Author: saltcod

apps/studio/components/interfaces/Database/Wrappers/WrapperDynamicColumns.tsx

@@ -131,7 +131,6 @@ const WrapperDynamicColumns = ({
  value={column.type}
  enumTypes={[]}
  onOptionSelect={(value) => onUpdateValue(column.id, 'type', value)}
- layout="vertical"
  className="[&_label]:!p-0"
  />
  </div>

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx

@@ -264,7 +264,6 @@ const ColumnEditor = ({
  <ColumnType
  showRecommendation
  value={columnFields?.format ?? ''}
- layout="vertical"
  enumTypes={enumTypes}
  error={errors.format}
  description={
@@ -305,7 +304,6 @@ const ColumnEditor = ({
  )}
  </div>
  )}
-
  <ColumnDefaultValue
  columnFields={columnFields}
  enumTypes={enumTypes}

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx

@@ -1,11 +1,39 @@
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { noop } from 'lodash'
 import Link from 'next/link'
-import { ReactNode } from 'react'
-import { Alert, Button, Input, Listbox } from 'ui'
+import { ReactNode, useState } from 'react'
+import {
+ AlertDescription_Shadcn_,
+ AlertTitle_Shadcn_,
+ Alert_Shadcn_,
+ Button,
+ CommandEmpty_Shadcn_,
+ CommandGroup_Shadcn_,
+ CommandInput_Shadcn_,
+ CommandItem_Shadcn_,
+ CommandList_Shadcn_,
+ Command_Shadcn_,
+ CriticalIcon,
+ Input,
+ PopoverContent_Shadcn_,
+ PopoverTrigger_Shadcn_,
+ Popover_Shadcn_,
+ ScrollArea,
+ cn,
+} from 'ui'
 
 import type { EnumeratedType } from 'data/enumerated-types/enumerated-types-query'
-import { Calendar, Circle, ExternalLink, Hash, ListPlus, ToggleRight, Type } from 'lucide-react'
+import {
+ Calendar,
+ Check,
+ ChevronsUpDown,
+ ExternalLink,
+ Hash,
+ ListPlus,
+ ToggleRight,
+ Type,
+} from 'lucide-react'
+
 import {
  POSTGRES_DATA_TYPES,
  POSTGRES_DATA_TYPE_OPTIONS,
@@ -16,8 +44,6 @@ import type { PostgresDataTypeOption } from '../SidePanelEditor.types'
 interface ColumnTypeProps {
  value: string
  enumTypes: EnumeratedType[]
- size?: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge'
- layout?: 'vertical' | 'horizontal'
  className?: string
  error?: any
  disabled?: boolean
@@ -30,9 +56,6 @@ interface ColumnTypeProps {
 const ColumnType = ({
  value,
  enumTypes = [],
- className,
- size = 'medium',
- layout,
  error,
  disabled = false,
  showLabel = true,
@@ -44,25 +67,43 @@ const ColumnType = ({
  const availableTypes = POSTGRES_DATA_TYPES.concat(enumTypes.map((type) => type.name))
  const isAvailableType = value ? availableTypes.includes(value) : true
  const recommendation = RECOMMENDED_ALTERNATIVE_DATA_TYPE[value]
+ const [open, setOpen] = useState(false)
+ console.log({ availableTypes })
+
+ const getOptionByName = (name: string) => {
+ // handle built in types
+ const pgOption = POSTGRES_DATA_TYPE_OPTIONS.find((option) => option.name === name)
+ if (pgOption) return pgOption
+
+ // handle custom enums
+ const enumType = enumTypes.find((type) => type.name === name)
+ return enumType ? { ...enumType, type: 'enum' } : undefined
+ }
 
  const inferIcon = (type: string) => {
  switch (type) {
  case 'number':
- return <Hash size={16} className="text-foreground" strokeWidth={1.5} />
+ return <Hash size={14} className="text-foreground" strokeWidth={1.5} />
  case 'time':
- return <Calendar size={16} className="text-foreground" strokeWidth={1.5} />
+ return <Calendar size={14} className="text-foreground" strokeWidth={1.5} />
  case 'text':
- return <Type size={16} className="text-foreground" strokeWidth={1.5} />
+ return <Type size={14} className="text-foreground" strokeWidth={1.5} />
  case 'json':
  return (
  <div className="text-foreground" style={{ padding: '0px 1px' }}>
  {'{ }'}
  </div>
  )
+ case 'jsonb':
+ return (
+ <div className="text-foreground" style={{ padding: '0px 1px' }}>
+ {'{ }'}
+ </div>
+ )
  case 'bool':
- return <ToggleRight size={16} className="text-foreground" strokeWidth={1.5} />
+ return <ToggleRight size={14} className="text-foreground" strokeWidth={1.5} />
  default:
- return <Circle size={16} className="text-foreground p-0.5" strokeWidth={1.5} />
+ return <ListPlus size={16} className="text-foreground" strokeWidth={1.5} />
  }
  }
 
@@ -119,7 +160,6 @@ const ColumnType = ({
  layout={showLabel ? 'horizontal' : undefined}
  className="md:gap-x-0"
  size="small"
- icon={inferIcon(POSTGRES_DATA_TYPE_OPTIONS.find((x) => x.name === value)?.type ?? '')}
  value={value}
  />
  </Tooltip.Trigger>
@@ -143,105 +183,126 @@ const ColumnType = ({
  }
 
  return (
- <div className="space-y-2">
- <Listbox
- label={showLabel ? 'Type' : ''}
- layout={layout || (showLabel ? 'horizontal' : 'vertical')}
- value={value}
- size={size}
- error={error}
- disabled={disabled}
- // @ts-ignore
- descriptionText={description}
- className={`${className} ${disabled ? 'column-type-disabled' : ''} rounded-md`}
- onChange={(value: string) => onOptionSelect(value)}
- optionsWidth={480}
- >
- <Listbox.Option key="empty" value="" label="---">
- ---
- </Listbox.Option>
-
- {/*
- Weird issue with Listbox here
- 1. Can't do render conditionally (&&) within Listbox hence why using Fragment
- 2. Can't wrap these 2 components within a Fragment conditional (enumTypes.length)
- as selecting the enumType option will not render it in the Listbox component
- */}
- {enumTypes.length > 0 ? (
- <Listbox.Option disabled key="header-1" value="header-1" label="header-1">
- Other Data Types
- </Listbox.Option>
- ) : (
- <></>
- )}
-
- {enumTypes.length > 0 ? (
- // @ts-ignore
- enumTypes.map((enumType: PostgresType) => (
- <Listbox.Option
- key={enumType.name}
- value={enumType.name}
- label={enumType.name}
- addOnBefore={() => {
- return <ListPlus size={16} className="text-foreground" strokeWidth={1.5} />
- }}
- >
- <div className="flex items-center space-x-4">
- <p className="text-foreground">{enumType.name}</p>
- {enumType.comment !== undefined && (
- <p className="text-foreground-lighter">{enumType.comment}</p>
- )}
+ <div>
+ <Popover_Shadcn_ open={open} onOpenChange={setOpen}>
+ <PopoverTrigger_Shadcn_ asChild>
+ <Button
+ type="default"
+ role="combobox"
+ size={'small'}
+ aria-expanded={open}
+ className="w-full justify-between"
+ iconRight={<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />}
+ >
+ {value ? (
+ <div className="flex gap-2 items-center">
+ <span>{inferIcon(getOptionByName(value)?.type ?? '')}</span>
+ {value}
  </div>
- </Listbox.Option>
- ))
- ) : (
- <></>
- )}
+ ) : (
+ 'Choose a column type...'
+ )}
+ </Button>
+ </PopoverTrigger_Shadcn_>
+ <PopoverContent_Shadcn_ className="w-[460px] p-0" side="bottom" align="center">
+ <ScrollArea className="h-[335px]">
+ <Command_Shadcn_>
+ <CommandInput_Shadcn_ placeholder="Search types..." />
+ <CommandEmpty_Shadcn_>Type not found.</CommandEmpty_Shadcn_>
 
- <Listbox.Option disabled value="header-2" label="header-2">
- PostgreSQL Data Types
- </Listbox.Option>
+ <CommandList_Shadcn_>
+ <CommandGroup_Shadcn_>
+ {POSTGRES_DATA_TYPE_OPTIONS.map((option: PostgresDataTypeOption) => (
+ <CommandItem_Shadcn_
+ key={option.name}
+ value={option.name}
+ className={cn('relative', option.name === value ? 'bg-surface-200' : '')}
+ onSelect={(value: string) => {
+ onOptionSelect(value)
+ setOpen(false)
+ }}
+ >
+ <div className="flex items-center gap-2 pr-6">
+ <span>{inferIcon(option.type)}</span>
+ <span className="text-foreground">{option.name}</span>
+ <span className="text-foreground-lighter">{option.description}</span>
+ </div>
+ <span className="absolute right-3 top-2">
+ {option.name === value ? (
+ <Check className="text-brand-500" size={14} />
+ ) : (
+ ''
+ )}
+ </span>
+ </CommandItem_Shadcn_>
+ ))}
+ </CommandGroup_Shadcn_>
+ {enumTypes.length > 0 && (
+ <>
+ <CommandItem_Shadcn_>Other types</CommandItem_Shadcn_>
+ <CommandGroup_Shadcn_>
+ {enumTypes.map((option: any) => (
+ <CommandItem_Shadcn_
+ key={option.name}
+ value={option.name}
+ className={cn('relative', option.name === value ? 'bg-surface-200' : '')}
+ onSelect={(value: string) => {
+ onOptionSelect(value)
+ setOpen(false)
+ }}
+ >
+ <div className="flex items-center gap-2">
+ <div>
+ <ListPlus size={16} className="text-foreground" strokeWidth={1.5} />
+ </div>
+ <span className="text-foreground">{option.name}</span>
+ {option.comment !== undefined && (
+ <span title={option.comment} className="text-foreground-lighter">
+ {option.comment}
+ </span>
+ )}
+ <span className="flex items-center gap-1.5">
+ {option.name === value ? <Check size={13} /> : ''}
+ </span>
+ </div>
+ </CommandItem_Shadcn_>
+ ))}
+ </CommandGroup_Shadcn_>
+ </>
+ )}
+ </CommandList_Shadcn_>
+ </Command_Shadcn_>
+ </ScrollArea>
+ </PopoverContent_Shadcn_>
+ </Popover_Shadcn_>
 
- {POSTGRES_DATA_TYPE_OPTIONS.map((option: PostgresDataTypeOption) => (
- <Listbox.Option
- key={option.name}
- value={option.name}
- label={option.name}
- addOnBefore={() => inferIcon(option.type)}
- >
- <div className="flex items-center space-x-4">
- <span className="text-foreground">{option.name}</span>
- <span className="text-foreground-lighter">{option.description}</span>
- </div>
- </Listbox.Option>
- ))}
- </Listbox>
  {showRecommendation && recommendation !== undefined && (
- <Alert
- withIcon
- variant="warning"
- title={
- <>
- It is recommended to use <code className="text-xs">{recommendation.alternative}</code>{' '}
- instead
- </>
- }
- >
- <p>
- Postgres recommends against using the data type <code className="text-xs">{value}</code>{' '}
- unless you have a very specific use case.
- </p>
- <div className="flex items-center space-x-2 mt-3">
- <Button asChild type="default" icon={<ExternalLink />}>
- <Link href={recommendation.reference} target="_blank" rel="noreferrer">
- Read more
- </Link>
- </Button>
- <Button type="primary" onClick={() => onOptionSelect(recommendation.alternative)}>
- Use {recommendation.alternative}
- </Button>
- </div>
- </Alert>
+ <Alert_Shadcn_ variant="warning">
+ <CriticalIcon />
+ <AlertTitle_Shadcn_>
+ {' '}
+ It is recommended to use <code className="text-xs">
+ {recommendation.alternative}
+ </code>{' '}
+ insteadn
+ </AlertTitle_Shadcn_>
+ <AlertDescription_Shadcn_>
+ <p>
+ Postgres recommends against using the data type{' '}
+ <code className="text-xs">{value}</code> unless you have a very specific use case.
+ </p>
+ <div className="flex items-center space-x-2 mt-3">
+ <Button asChild type="default" icon={<ExternalLink />}>
+ <Link href={recommendation.reference} target="_blank" rel="noreferrer">
+ Read more
+ </Link>
+ </Button>
+ <Button type="primary" onClick={() => onOptionSelect(recommendation.alternative)}>
+ Use {recommendation.alternative}
+ </Button>
+ </div>
+ </AlertDescription_Shadcn_>
+ </Alert_Shadcn_>
  )}
  </div>
  )

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx

@@ -226,7 +226,6 @@ const Column = ({
  <ColumnType
  value={column.format}
  enumTypes={enumTypes}
- size="small"
  showLabel={false}
  className="table-editor-column-type lg:gap-0 "
  disabled={hasForeignKeys}

playwright-tests/tests/snapshot/spec/table-editor.spec.ts

@@ -37,7 +37,7 @@ test.describe('Table Editor page', () => {
  await page.getByRole('button', { name: 'Add column' }).click()
  await page.getByRole('textbox', { name: 'column_name' }).click()
  await page.getByRole('textbox', { name: 'column_name' }).fill('defaultValueColumn')
- await page.getByRole('button', { name: '---' }).click()
+ await page.locator('button').filter({ hasText: 'Choose a column type...' }).click()
  await page.getByText('Signed two-byte integer').click()
  await page.getByTestId('defaultValueColumn-default-value').click()
  await page.getByTestId('defaultValueColumn-default-value').fill('2')