Merge pull request #9225 from supabase/chore/fix-column-default-value-current-date

Temp fix to treat CURRENT_DATE as expression for column editor

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<Props> = ({
             enumTypes={enumTypes}
             error={errors.format}
             disabled={!isUndefined(columnFields?.foreignKey)}
+            description={
+              <Link href="https://supabase.com/docs/guides/database/tables#data-types">
+                <a>
+                  <Button
+                    as="span"
+                    type="text"
+                    size="small"
+                    className="text-scale-1000 hover:text-scale-1200"
+                    icon={<IconExternalLink size={14} strokeWidth={2} />}
+                  >
+                    Learn more about data types
+                  </Button>
+                </a>
+              </Link>
+            }
             onOptionSelect={(format: string) => onUpdateField({ format, defaultValue: null })}
           />
 
-          <div className="text-sm grid md:grid-cols-12 md:gap-x-4 ">
-            <p className="text-scale-1100 col-span-7 col-start-5 -mt-4">
-              <a
-                href="https://supabase.com/docs/guides/database/tables#data-types"
-                target="_blank"
-                className="underline inline-block gap-1 p-2 rounded-sm"
-              >
-                Learn more about data types
-              </a>
-            </p>
-          </div>
-
           {isUndefined(columnFields.foreignKey) && (
             <div className="grid grid-cols-12 gap-4">
               {columnFields.format.includes('int') && (

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
   }

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<Props> = ({
   error,
   disabled = false,
   showLabel = true,
+  description,
   onOptionSelect = () => {},
 }) => {
   // @ts-ignore
@@ -68,73 +70,75 @@ const ColumnType: FC<Props> = ({
   }
 
   return (
-      <Listbox
-        label={showLabel ? 'Type' : ''}
-        layout={showLabel ? 'horizontal' : 'vertical'}
-        value={value}
-        size={size}
-        error={error}
-        disabled={disabled}
-        className={`${className} ${disabled ? 'column-type-disabled' : ''} rounded-md`}
-        onChange={(value: string) => onOptionSelect(value)}
-        optionsWidth={480}
-      >
-        <Listbox.Option key="empty" value="" label="---">
-          ---
-        </Listbox.Option>
+    <Listbox
+      label={showLabel ? 'Type' : ''}
+      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">
-            User-defined Enumerated 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 <div className="bg-scale-1200 mx-1 h-2 w-2 rounded-full" />
-              }}
-            >
-              <div className="flex items-center space-x-4">
-                <p>{enumType.name}</p>
-              </div>
-            </Listbox.Option>
-          ))
-        ) : (
-          <></>
-        )}
-
-        <Listbox.Option disabled value="header-2" label="header-2">
-          PostgreSQL Data Types
+      {enumTypes.length > 0 ? (
+        <Listbox.Option disabled key="header-1" value="header-1" label="header-1">
+          User-defined Enumerated Types
         </Listbox.Option>
+      ) : (
+        <></>
+      )}
 
-        {POSTGRES_DATA_TYPE_OPTIONS.map((option: PostgresDataTypeOption) => (
+      {enumTypes.length > 0 ? (
+        // @ts-ignore
+        enumTypes.map((enumType: PostgresType) => (
           <Listbox.Option
-            key={option.name}
-            value={option.name}
-            label={option.name}
-            addOnBefore={() => inferIcon(option.type)}
+            key={enumType.name}
+            value={enumType.name}
+            label={enumType.name}
+            addOnBefore={() => {
+              return <div className="bg-scale-1200 mx-1 h-2 w-2 rounded-full" />
+            }}
           >
             <div className="flex items-center space-x-4">
-              <span className="text-scale-1200">{option.name}</span>
-              <span className="text-scale-900">{option.description}</span>
+              <p>{enumType.name}</p>
             </div>
           </Listbox.Option>
-        ))}
-      </Listbox>
+        ))
+      ) : (
+        <></>
+      )}
+
+      <Listbox.Option disabled value="header-2" label="header-2">
+        PostgreSQL Data Types
+      </Listbox.Option>
+
+      {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-scale-1200">{option.name}</span>
+            <span className="text-scale-900">{option.description}</span>
+          </div>
+        </Listbox.Option>
+      ))}
+    </Listbox>
   )
 }