diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx index 201ab855edf..5c21cec1cb1 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx @@ -1,7 +1,7 @@ import { FC, useEffect, useState } from 'react' import { isUndefined, isEmpty } from 'lodash' import { Dictionary } from 'components/grid' -import { Checkbox, SidePanel, Input } from '@supabase/ui' +import { Checkbox, SidePanel, Input, Button, IconExternalLink } from '@supabase/ui' import { PostgresColumn, PostgresRelationship, @@ -25,6 +25,7 @@ import { } from './ColumnEditor.utils' import { TEXT_TYPES } from '../SidePanelEditor.constants' import { ColumnField, CreateColumnPayload, UpdateColumnPayload } from '../SidePanelEditor.types' +import Link from 'next/link' interface Props { column?: PostgresColumn @@ -210,21 +211,24 @@ const ColumnEditor: FC = ({ enumTypes={enumTypes} error={errors.format} disabled={!isUndefined(columnFields?.foreignKey)} + description={ + + + + + + } onOptionSelect={(format: string) => onUpdateField({ format, defaultValue: null })} /> -
-

- - Learn more about data types - -

-
- {isUndefined(columnFields.foreignKey) && (
{columnFields.format.includes('int') && ( diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.utils.ts b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.utils.ts index fd68f6d2fa5..030957ec7a5 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.utils.ts +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.utils.ts @@ -11,6 +11,8 @@ import { uuidv4 } from 'lib/helpers' import { ColumnField, CreateColumnPayload, UpdateColumnPayload } from '../SidePanelEditor.types' const isSQLExpression = (input: string) => { + if (['CURRENT_DATE'].includes(input)) return true + if (input[0] === '(' && input[input.length - 1] === ')') { return true } diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx index 36f22b3553a..f7e6a73dfc2 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react' +import React, { FC, ReactNode } from 'react' import { IconCalendar, IconType, IconHash, Listbox, IconToggleRight, Input } from '@supabase/ui' import { PostgresType } from '@supabase/postgres-meta' import { POSTGRES_DATA_TYPES, POSTGRES_DATA_TYPE_OPTIONS } from '../SidePanelEditor.constants' @@ -12,6 +12,7 @@ interface Props { error?: any disabled?: boolean showLabel?: boolean + description?: ReactNode onOptionSelect: (value: string) => void } @@ -23,6 +24,7 @@ const ColumnType: FC = ({ error, disabled = false, showLabel = true, + description, onOptionSelect = () => {}, }) => { // @ts-ignore @@ -68,73 +70,75 @@ const ColumnType: FC = ({ } return ( - onOptionSelect(value)} - optionsWidth={480} - > - - --- - + onOptionSelect(value)} + optionsWidth={480} + > + + --- + - {/* + {/* 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 ? ( - - User-defined Enumerated Types - - ) : ( - <> - )} - - {enumTypes.length > 0 ? ( - // @ts-ignore - enumTypes.map((enumType: PostgresType) => ( - { - return
- }} - > -
-

{enumType.name}

-
- - )) - ) : ( - <> - )} - - - PostgreSQL Data Types + {enumTypes.length > 0 ? ( + + User-defined Enumerated Types + ) : ( + <> + )} - {POSTGRES_DATA_TYPE_OPTIONS.map((option: PostgresDataTypeOption) => ( + {enumTypes.length > 0 ? ( + // @ts-ignore + enumTypes.map((enumType: PostgresType) => ( inferIcon(option.type)} + key={enumType.name} + value={enumType.name} + label={enumType.name} + addOnBefore={() => { + return
+ }} >
- {option.name} - {option.description} +

{enumType.name}

- ))} - + )) + ) : ( + <> + )} + + + PostgreSQL Data Types + + + {POSTGRES_DATA_TYPE_OPTIONS.map((option: PostgresDataTypeOption) => ( + inferIcon(option.type)} + > +
+ {option.name} + {option.description} +
+
+ ))} + ) }