Merge pull request #6165 from supabase/fix/build-error

fix: mild fixes

studio/components/ui/DatePicker/DatePicker.stories.tsx

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
 
-import { IconLogIn } from '../Icon/icons/IconLogIn'
-
 import { DatePicker } from '.'
 import ReactDatePicker from 'react-datepicker'
 
@@ -19,7 +17,7 @@ export const Default = (args: any) => (
 export const Simple = () => {
   const [startDate, setStartDate] = useState(new Date())
   const [endDate, setEndDate] = useState(null)
-  const onChange = (dates) => {
+  const onChange = (dates: any) => {
     const [start, end] = dates
     setStartDate(start)
     setEndDate(end)

studio/components/ui/DatePicker/DatePicker.tsx

@@ -20,7 +20,7 @@ import {
 import { format } from 'date-fns'
 
 import TimeSplitInput from './TimeSplitInput'
-import DateSplitInput from './DateSplitInput'
+// import DateSplitInput from './DateSplitInput'
 import DividerSlash from './DividerSlash'
 
 import dayjs from 'dayjs'

studio/components/ui/DatePicker/DateSplitInput.tsx

@@ -1,264 +0,0 @@
-import React, { useState } from 'react'
-import { IconClock } from '@supabase/ui'
-import DividerSlash from './DividerSlash'
-
-import { format } from 'date-fns'
-import { DateType } from './DatePicker.types'
-import dayjs from 'dayjs'
-
-var advancedFormat = require('dayjs/plugin/advancedFormat')
-var utc = require('dayjs/plugin/utc')
-var timezone = require('dayjs/plugin/timezone') // dependent on utc plugin
-
-dayjs.extend(advancedFormat)
-dayjs.extend(utc)
-dayjs.extend(timezone)
-dayjs.tz.guess()
-
-// type TimeType = 'DD' | 'MM' | 'YYYY'
-
-// type Time = {
-//   HH: string
-//   mm: string
-//   ss: string
-// }
-
-interface TimeSplitInputProps {
-  date: string
-  // setTime: (x: Time) => void
-  type: 'start' | 'end'
-  // setStartTime: (x: Time) => void
-  // setEndTime: (x: Time) => void
-  // startTime: Time
-  // endTime: Time
-  startDate: any
-  endDate: any
-  setDate: ({}) => void
-}
-
-const DateSplitInput = ({
-  type,
-  date,
-  // setTime,
-  // setStartTime,
-  // setEndTime,
-  // startTime,
-  // endTime,
-  startDate,
-  endDate,
-  setDate,
-}: TimeSplitInputProps) => {
-  const [focus, setFocus] = useState(false)
-
-  const [splitDate, setSplitDate] = useState({
-    DD: format(new Date(date), 'dd'),
-    MM: format(new Date(date), 'MM'),
-    YYYY: format(new Date(date), 'yyyy'),
-  })
-
-  function handleOnChange() {
-    // console.log('handleOnChange')
-
-    const payload = {
-      DD: splitDate.DD,
-      MM: splitDate.MM,
-      YYYY: splitDate.YYYY,
-    }
-
-    // if (Number(payload.YYYY) > 2021) {
-    //   payload.YYYY = 2021
-    // }
-    // if (value.length > 2) return
-
-    // switch (valueType) {
-    //   case 'DD':
-    //     if (value && Number(value) > 23) return
-    //     break
-    //   case 'MM':
-    //     if (value && Number(value) > 59) return
-    //     break
-    //   case 'YYYY':
-    //     if (value && Number(value) > 59) return
-    //     break
-    //   default:
-    //     break
-    // }
-
-    // console.log('got here')
-
-    // payload[valueType] = value
-
-    const dns_format = new Date(Number(payload.YYYY), Number(payload.MM), Number(payload.DD))
-
-    // console.log('format:', dns_format)
-
-    setDate(dns_format)
-  }
-
-  function sanitize(valueType: DateType) {
-    // console.log('handle blur')
-    const _time = splitDate
-    // console.log('_time.MM.length', _time.MM.length)
-
-    if (_time.DD.length === 1) _time.DD = '0' + _time.DD
-    if (_time.MM.length === 1) _time.MM = '0' + _time.MM
-    if (_time.YYYY.length === 1) _time.YYYY = '0' + _time.YYYY
-
-    if (!_time.DD) _time.DD = '00'
-    if (!_time.MM) _time.MM = '00'
-    if (!_time.YYYY) _time.YYYY = '00'
-
-    // console.log('_time', _time)
-
-    let endTimeChanges = false
-    let endTimePayload = endTime
-
-    let startTimeChanges = false
-    let startTimePayload = startTime
-
-    // Only run time conflicts if
-    // startDate and endDate are the same date
-
-    // console.log(startDate)
-    // console.log(endDate)
-    if (format(new Date(startDate), 'dd/mm/yyyy') == format(new Date(endDate), 'dd/mm/yyyy')) {
-      // checks if start time is ahead of end time
-
-      if (type === 'start') {
-        // console.log('HH in start switch')
-        if (_time.MM && Number(_time.MM) > Number(endTime.HH)) {
-          endTimePayload.HH = _time.MM
-          endTimeChanges = true
-        }
-
-        if (
-          // also check the hour
-          _time.MM &&
-          Number(_time.MM) >= Number(endTime.HH) &&
-          // check the minutes
-          _time.MM &&
-          Number(_time.MM) > Number(endTime.mm)
-        ) {
-          endTimePayload.mm = _time.MM
-          endTimeChanges = true
-        }
-
-        if (
-          // also check the hour
-          _time.MM &&
-          Number(_time.MM) >= Number(endTime.HH) &&
-          // check the minutes
-          _time.MM &&
-          Number(_time.MM) >= Number(endTime.mm) &&
-          // check the seconds
-          _time.YYYY &&
-          Number(_time.YYYY) > Number(endTime.ss)
-        ) {
-          endTimePayload.ss = _time.YYYY
-          endTimeChanges = true
-        }
-      }
-
-      if (type === 'end') {
-        // console.log('HH in start switch')
-
-        if (_time.MM && Number(_time.MM) < Number(startTime.HH)) {
-          startTimePayload.HH = _time.MM
-          startTimeChanges = true
-        }
-
-        if (
-          // also check the hour
-          _time.MM &&
-          Number(_time.MM) <= Number(startTime.HH) &&
-          // check the minutes
-          _time.MM &&
-          Number(_time.MM) < Number(startTime.mm)
-        ) {
-          startTimePayload.mm = _time.MM
-          startTimeChanges = true
-        }
-
-        if (
-          // also check the hour
-          _time.MM &&
-          Number(_time.MM) <= Number(startTime.HH) &&
-          // check the minutes
-          _time.MM &&
-          Number(_time.MM) <= Number(startTime.mm) &&
-          // check the seconds
-          _time.YYYY &&
-          Number(_time.YYYY) < Number(startTime.ss)
-        ) {
-          startTimePayload.ss = _time.YYYY
-          startTimeChanges = true
-        }
-      }
-    }
-
-    setTime({ ..._time })
-
-    if (endTimeChanges) {
-      setEndTime({ ...endTimePayload })
-    }
-    if (startTimeChanges) {
-      setStartTime({ ...startTimePayload })
-    }
-
-    setFocus(false)
-  }
-
-  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
-    event.target.select()
-    setFocus(true)
-  }
-
-  return (
-    <div
-      className={`
-        flex items-center justify-center gap-0
-        text-xs text-scale-1100 bg-scale-100 dark:bg-scaleA-300 border border-scale-700 h-7 rounded
-        ${focus && ' outline outline-2 outline-scale-500 border-scale-800'}
-    `}
-    >
-      <input
-        onBlur={() => handleOnChange()}
-        onFocus={handleFocus}
-        pattern="[0-31]*"
-        placeholder="00"
-        maxLength={2}
-        onChange={(e) => setSplitDate({ ...splitDate, DD: e.target.value })}
-        aria-label="Days"
-        className="text-scale-1200 w-5 bg-transparent text-center outline-none"
-        value={splitDate.DD}
-      />
-      <DividerSlash />
-      <input
-        onBlur={() => handleOnChange()}
-        onFocus={handleFocus}
-        pattern="[0-12]*"
-        placeholder="00"
-        maxLength={2}
-        onChange={(e) => setSplitDate({ ...splitDate, MM: e.target.value })}
-        aria-label="Months"
-        className="text-scale-1200 w-5 bg-transparent text-center outline-none"
-        value={splitDate.MM}
-      />
-      <DividerSlash />
-      <input
-        onBlur={() => handleOnChange()}
-        onFocus={handleFocus}
-        pattern="[2021-2022]*"
-        placeholder="00"
-        maxLength={4}
-        minLength={4}
-        onChange={(e) => setSplitDate({ ...splitDate, YYYY: e.target.value })}
-        aria-label="Years"
-        className="text-scale-1200 w-8 bg-transparent text-center outline-none"
-        value={splitDate.YYYY}
-      />
-    </div>
-  )
-}
-
-export default DateSplitInput

studio/pages/project/[ref]/database/api-logs.tsx

@@ -16,6 +16,7 @@ export const LogPage: NextPage = () => {
       <LogsPreviewer
         projectRef={ref as string}
         condensedLayout={true}
+        // @ts-ignore
         tableName={'edge_logs'}
         queryType={'api'}
       />

studio/pages/project/[ref]/database/postgres-logs.tsx

@@ -16,6 +16,7 @@ export const LogPage: NextPage = () => {
       <LogsPreviewer
         projectRef={ref as string}
         condensedLayout={true}
+        // @ts-ignore
         tableName={'postgres_logs'}
         queryType={'database'}
       />

studio/pages/project/[ref]/functions/[id]/details.tsx

@@ -196,9 +196,9 @@ const PageLayout = () => {
               </div>
               <h4>Command line access</h4>
             </div>
-            <h5 className="text-sm text-base">Deployment management</h5>
+            <h5 className="text-base">Deployment management</h5>
             <CommandRender commands={managementCommands} />
-            <h5 className="text-sm text-base">Secrets management</h5>
+            <h5 className="text-base">Secrets management</h5>
             <CommandRender commands={secretCommands} />
           </div>
         </div>

studio/pages/project/[ref]/functions/[id]/index.tsx

@@ -1,45 +1,20 @@
 import { observer } from 'mobx-react-lite'
 import { withAuth } from 'hooks'
 
-// import FunctionLayout from './../interfaces/FunctionLayout'
-
-// const PageLayout = () => {
-//   return <FunctionLayout>Metrics</FunctionLayout>
-// }
-
 import useSWR from 'swr'
 import dayjs from 'dayjs'
-import Link from 'next/link'
-import { FC, useState } from 'react'
+
+import { useState } from 'react'
 import { useRouter } from 'next/router'
-import {
-  IconArchive,
-  IconDatabase,
-  IconKey,
-  IconZap,
-  Typography,
-  Button,
-  Dropdown,
-  IconChevronDown,
-} from '@supabase/ui'
+import { Button } from '@supabase/ui'
 
 import Panel from 'components/to-be-cleaned/Panel'
 import ChartHandler from 'components/to-be-cleaned/Charts/ChartHandler'
-import { ProjectUsageMinimal } from 'components/to-be-cleaned/Usage'
 
-import { useFlag } from 'hooks'
 import { get } from 'lib/common/fetch'
-import { API_URL, METRICS, DATE_FORMAT } from 'lib/constants'
-import Table from 'components/to-be-cleaned/Table'
-import StackedAreaChart from 'components/ui/Charts/StackedAreaChart'
-import { USAGE_COLORS } from 'components/ui/Charts/Charts.constants'
-import {
-  EndpointResponse,
-  PathsDatum,
-  StatusCodesDatum,
-} from 'components/interfaces/Home/ChartData.types'
+import { API_URL, DATE_FORMAT } from 'lib/constants'
+
 import FunctionLayout from '../interfaces/FunctionLayout'
-// import { EndpointResponse, PathsDatum, StatusCodesDatum } from ' ChartData.types'
 
 const CHART_INTERVALS = [
   {
@@ -154,6 +129,8 @@ const PageLayout = () => {
               <div className="grid grid-cols-1 md:gap-4 md:grid-cols-2 lg:grid-cols-2 lg:gap-8">
                 <Panel key="database-chart">
                   <Panel.Content className="space-y-4">
+                    {/* 
+                    // @ts-ignore */}
                     <ChartHandler
                       label="Execution time"
                       defaultChartStyle="line"
@@ -177,6 +154,8 @@ const PageLayout = () => {
                 </Panel>
                 <Panel key="invocation-chart">
                   <Panel.Content className="space-y-4">
+                    {/* 
+                    // @ts-ignore */}
                     <ChartHandler
                       label="Invocations"
                       startDate={startDate}
@@ -198,6 +177,8 @@ const PageLayout = () => {
               </div>
               <Panel key="error-chart">
                 <Panel.Content className="space-y-4">
+                  {/* 
+                    // @ts-ignore */}
                   <ChartHandler
                     defaultChartStyle="line"
                     label="Error count"
@@ -228,25 +209,5 @@ const PageLayout = () => {
     </FunctionLayout>
   )
 }
-// export default ProjectUsage
-
-const PanelHeader = (props: any) => {
-  const Tag = props?.href ? Link : 'div'
-  return (
-    <Tag href={props.href}>
-      <div
-        className={
-          'flex items-center space-x-3 opacity-80 transition ' +
-          (props.href ? 'cursor-pointer hover:opacity-100 hover:text-gray-1200' : '')
-        }
-      >
-        <Typography.Text>{props.icon}</Typography.Text>
-        <span className="flex items-center space-x-1">
-          <h4 className="mb-0 text-lg">{props.title}</h4>
-        </span>
-      </div>
-    </Tag>
-  )
-}
 
 export default withAuth(observer(PageLayout))

studio/pages/project/[ref]/functions/[id]/logs-old.tsx

@@ -170,6 +170,8 @@ const FunctionsList = () => {
 
       <div className="col-span-3 text-sm text-scale-900 w-32">IP Address</div>
       <div className="col-span-7 text-sm text-scale-1200">
+        {/* 
+        // @ts-ignore */}
         <span className="">{LogsData[0].ip_address}</span>
       </div>
 

studio/pages/project/[ref]/functions/index.tsx

@@ -2,29 +2,16 @@ import { observer } from 'mobx-react-lite'
 import { useStore, withAuth } from 'hooks'
 
 import FunctionsLayout from './interfaces/FunctionsLayout'
-import {
-  Button,
-  IconBookOpen,
-  IconChevronRight,
-  IconClipboard,
-  IconCopy,
-  IconExternalLink,
-  IconGlobe,
-  IconSearch,
-  IconTerminal,
-  Input,
-  Loading,
-} from '@supabase/ui'
-import { useEffect, useState } from 'react'
+import { Button, IconBookOpen, IconSearch, IconTerminal, Input, Loading } from '@supabase/ui'
+import { useEffect } from 'react'
 import Table from 'components/to-be-cleaned/Table'
-import { memoryUsage } from 'process'
+
 import FunctionsListItem from './interfaces/FunctionsListItem'
 import { useRouter } from 'next/router'
 
 import { post } from 'lib/common/fetch'
 import { API_URL, PROJECT_STATUS } from 'lib/constants'
-import { useProjectFunctionsStore } from 'stores/projectFunctionsStore'
-import { toJS } from 'mobx'
+
 import CommandRender from './interfaces/CommandRender'
 import Link from 'next/link'
 

studio/pages/project/[ref]/functions/interfaces/FunctionsListItem.tsx

@@ -1,18 +1,10 @@
 import dayjs from 'dayjs'
 import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
-import {
-  Badge,
-  IconClipboard,
-  IconExternalLink,
-  IconGlobe,
-  Icon_function,
-  Typography,
-} from '@supabase/ui'
+import { IconClipboard, IconGlobe } from '@supabase/ui'
 import Table from 'components/to-be-cleaned/Table'
 
-import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
-import router, { useRouter } from 'next/router'
+import { useRouter } from 'next/router'
 import { useStore } from 'hooks'
 // import _functionDropdown from './_functionDropdown'
 

studio/pages/project/[ref]/functions/interfaces/FunctionsNav.tsx

@@ -1,6 +1,7 @@
 import { Tabs } from '@supabase/ui'
 import { useRouter } from 'next/router'
 
+// @ts-ignore
 const FunctionsNav = ({ item }) => {
   const router = useRouter()
   const activeRoute = router.pathname.split('/')[5]

studio/pages/project/[ref]/logs-explorer/sources.tsx

@@ -11,6 +11,7 @@ import CardButton from 'components/ui/CardButton'
 export const LogsExplorerPage: NextPage = () => {
   const router = useRouter()
   const { ref } = router.query
+  // @ts-ignore
   const sources = Object.values(LogsTableName).sort((a, b) => a - b)
   return (
     <LogsExplorerLayout>

studio/stores/RootStore.ts

@@ -29,6 +29,7 @@ export class RootStore implements IRootStore {
 
   constructor() {
     this.ui = new UiStore(this)
+    // @ts-ignore
     this.content = new ProjectContentStore(this, { projectRef: '' })
     this.functions = new ProjectFunctionsStore(this, { projectRef: '' })
     this.meta = new MetaStore(this, {
@@ -49,6 +50,7 @@ export class RootStore implements IRootStore {
       () => this.ui.selectedProject,
       (selectedProject) => {
         if (selectedProject) {
+          // @ts-ignore
           this.content = new ProjectContentStore(this, { projectRef: selectedProject.ref })
           this.functions = new ProjectFunctionsStore(this, { projectRef: selectedProject.ref })
           this.meta = new MetaStore(this, {
@@ -56,6 +58,7 @@ export class RootStore implements IRootStore {
             connectionString: selectedProject.connectionString ?? '',
           })
         } else {
+          // @ts-ignore
           this.content = new ProjectContentStore(this, { projectRef: '' })
           this.functions = new ProjectFunctionsStore(this, { projectRef: '' })
           this.meta = new MetaStore(this, {

studio/stores/content/ProjectContentStore.ts

@@ -134,6 +134,7 @@ export default class ProjectContentStore implements IProjectContentStore {
     }
   }
 
+  // @ts-ignore
   async create(payload: any) {
     try {
       const headers = {

studio/stores/functions/ProjectFunctionsStore.ts

@@ -32,6 +32,7 @@ export default class ProjectFunctionsStore implements IProjectFunctionsStore {
   }
 
   baseUrl: string
+  // @ts-ignore
   data: UserContentMap = []
 
   state = this.STATES.INITIAL