Update SqlEditor types and move file

studio/components/interfaces/Authentication/Policies/PolicyEditor/PolicyDefinition.tsx

@@ -1,14 +1,14 @@
 import { FC, useEffect } from 'react'
 import { usePrevious } from 'hooks'
 
-import SqlEditor from 'components/to-be-cleaned/SqlEditor'
+import SqlEditor from 'components/ui/SqlEditor'
 
 interface Props {
   operation: string
   definition: string
   check: string
-  onUpdatePolicyUsing: (using: string | null) => void
-  onUpdatePolicyCheck: (check: string | null) => void
+  onUpdatePolicyUsing: (using: string | undefined) => void
+  onUpdatePolicyCheck: (check: string | undefined) => void
 }
 
 const PolicyDefinition: FC<Props> = ({
@@ -24,8 +24,8 @@ const PolicyDefinition: FC<Props> = ({
 
   const previousOperation = usePrevious(operation) || ''
   useEffect(() => {
-    if (showUsing(previousOperation) && !showUsing(operation)) onUpdatePolicyUsing(null)
-    if (showCheck(previousOperation) && !showCheck(operation)) onUpdatePolicyCheck(null)
+    if (showUsing(previousOperation) && !showUsing(operation)) onUpdatePolicyUsing(undefined)
+    if (showCheck(previousOperation) && !showCheck(operation)) onUpdatePolicyCheck(undefined)
   }, [operation])
 
   return (

studio/components/interfaces/Authentication/Policies/PolicyEditor/index.tsx

@@ -68,10 +68,10 @@ const PolicyEditor: FC<Props> = ({
             operation={operation}
             definition={definition}
             check={check}
-            onUpdatePolicyUsing={(definition: string | null) =>
+            onUpdatePolicyUsing={(definition: string | undefined) =>
               onUpdatePolicyFormFields({ definition })
             }
-            onUpdatePolicyCheck={(check: string | null) => onUpdatePolicyFormFields({ check })}
+            onUpdatePolicyCheck={(check: string | undefined) => onUpdatePolicyFormFields({ check })}
           />
         </Modal.Content>
       </div>

studio/components/interfaces/Authentication/Policies/PolicyReview.tsx

@@ -1,7 +1,7 @@
 import { Button, Modal } from '@supabase/ui'
 import { isEmpty } from 'lodash'
 import { FC, useState } from 'react'
-import SqlEditor from 'components/to-be-cleaned/SqlEditor'
+import SqlEditor from 'components/ui/SqlEditor'
 import { PolicyForReview } from './Policies.types'
 
 interface Props {

studio/components/interfaces/Authentication/Policies/PolicyTemplates/TemplatePreview.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { isEmpty } from 'lodash'
-import SqlEditor from 'components/to-be-cleaned/SqlEditor'
+import SqlEditor from 'components/ui/SqlEditor'
 import { PolicyTemplate } from './PolicyTemplates.constants'
 
 interface Props {

studio/components/interfaces/Database/Functions/CreateFunction.tsx

@@ -18,7 +18,7 @@ import { makeAutoObservable } from 'mobx'
 
 import { useStore } from 'hooks'
 import Panel from 'components/ui/Panel'
-import SqlEditor from 'components/to-be-cleaned/SqlEditor'
+import SqlEditor from 'components/ui/SqlEditor'
 import { POSTGRES_DATA_TYPES } from 'components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants'
 
 class CreateFunctionFormState {
@@ -721,10 +721,8 @@ const InputDefinition: FC = observer(({}) => {
         </p>
       </div>
       <div className="h-40 border dark:border-dark">
-        {/* @ts-ignore */}
         <SqlEditor
           defaultValue={_localState!.formState.definition.value}
-          // @ts-ignore
           onInputChange={(value: string | undefined) => {
             _localState!.onFormChange({
               key: 'definition',

studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx

@@ -12,7 +12,7 @@ import {
   Typography,
 } from '@supabase/ui'
 import { Dictionary } from '@supabase/grid'
-import SqlEditor from 'components/to-be-cleaned/SqlEditor'
+import SqlEditor from 'components/ui/SqlEditor'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
 import InformationBox from 'components/ui/InformationBox'
 
@@ -203,7 +203,6 @@ const Function: React.FC<FunctionProps> = ({ id, completeStatement, name, onClic
         leaveTo="transform opacity-0"
       >
         <div className="h-64 mt-4 border dark:border-dark">
-          {/* @ts-ignore */}
           <SqlEditor defaultValue={completeStatement} readOnly={true} contextmenu={false} />
         </div>
       </Transition>

studio/components/ui/SqlEditor.tsx

@@ -1,9 +1,18 @@
-import Editor, { useMonaco } from '@monaco-editor/react'
+import Editor, { OnChange, useMonaco } from '@monaco-editor/react'
 import { FC, useEffect, useRef } from 'react'
 import { Typography } from '@supabase/ui'
 import { useStore } from 'hooks'
 
-const SqlEditor: FC<any> = ({
+interface Props {
+  contextmenu?: boolean;
+  defaultValue?: string;
+  language?: string;
+  onInputChange?: OnChange;
+  queryId?: string;
+  readOnly?: boolean;
+}
+
+const SqlEditor: FC<Props> = ({
   queryId,
   language = 'pgsql',
   defaultValue = '',