fix: Fix all errored queries when self-hosting studio (#21815)

* Hide the logout button in selfhosted version.

* Don't call project-eligibility-query on selfhosted version.

* Add local api handlers for self-hosting version.

* Fix a missing monaco editor file in the self-hosting version.

* Deleted an obsolete api route.

* Import the right get function.

apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx

@@ -6,7 +6,7 @@ import { Command, FileText, FlaskConical, Search, Settings } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { MouseEvent, useState } from 'react'
+import { useState } from 'react'
 import {
   Button,
   DropdownMenu,
@@ -26,6 +26,7 @@ import {
 } from 'ui'
 
 import { useIsAPIDocsSidePanelEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
+import { useSignOut } from 'lib/auth'
 import { IS_PLATFORM } from 'lib/constants'
 import { detectOS } from 'lib/helpers'
 import { useProfile } from 'lib/profile'
@@ -39,7 +40,6 @@ import {
 } from './NavigationBar.utils'
 import { NavigationIconButton } from './NavigationIconButton'
 import NavigationIconLink from './NavigationIconLink'
-import { useSignOut } from 'lib/auth'
 
 export const ICON_SIZE = 20
 export const ICON_STROKE_WIDTH = 1.5
@@ -333,17 +333,21 @@ const NavigationBar = () => {
                     ))}
                 </DropdownMenuRadioGroup>
               </DropdownMenuGroup>
-              <DropdownMenuSeparator />
-              <DropdownMenuGroup>
-                <DropdownMenuItem
-                  onSelect={async () => {
-                    await signOut()
-                    await router.push('/sign-in')
-                  }}
-                >
-                  Log out
-                </DropdownMenuItem>
-              </DropdownMenuGroup>
+              {IS_PLATFORM && (
+                <>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem
+                      onSelect={async () => {
+                        await signOut()
+                        await router.push('/sign-in')
+                      }}
+                    >
+                      Log out
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                </>
+              )}
             </DropdownMenuContent>
           </DropdownMenu>
         </ul>

apps/studio/data/config/project-upgrade-eligibility-query.ts

@@ -1,10 +1,11 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 
+import { IS_PLATFORM } from 'common'
 import { get } from 'data/fetchers'
+import { useProjectByRef } from 'hooks'
+import { PROJECT_STATUS } from 'lib/constants/infrastructure'
 import type { ResponseError } from 'types'
 import { configKeys } from './keys'
-import { useProjectByRef } from 'hooks'
-import { PROJECT_STATUS } from 'lib/constants'
 
 export type ProjectUpgradeEligibilityVariables = { projectRef?: string }
 export type ProjectUpgradeEligibilityResponse = {
@@ -52,7 +53,8 @@ export const useProjectUpgradeEligibilityQuery = <TData = ProjectUpgradeEligibil
         enabled &&
         project !== undefined &&
         project.status !== PROJECT_STATUS.INACTIVE &&
-        typeof projectRef !== 'undefined',
+        typeof projectRef !== 'undefined' &&
+        IS_PLATFORM,
       ...options,
     }
   )

apps/studio/pages/api/constants.ts

@@ -1,3 +1,6 @@
+import { paths } from 'data/api'
+import { FilterKeys, MediaType, Success } from 'openapi-fetch'
+
 const PUBLIC_URL = new URL(process.env.SUPABASE_PUBLIC_URL || 'http://localhost:8000')
 
 // Use LOGFLARE_URL until analytics/v1/ routing is supported
@@ -17,3 +20,24 @@ export const DEFAULT_PROJECT = {
   region: 'local',
   inserted_at: '2021-08-02T06:40:40.646Z',
 }
+
+/**
+ * Used for extractResponse
+ */
+type FetchResponse<T> = {
+  data: T extends {
+    responses: any
+  }
+    ? NonNullable<FilterKeys<Success<T['responses']>, MediaType>>
+    : unknown
+  error?: never
+  response: Response
+}
+
+/**
+ * Utility type to extract the type from a API definition in data/api file.
+ */
+export type extractResponse<
+  path extends keyof paths,
+  method extends keyof paths[path],
+> = FetchResponse<paths[path][method]>['data']

apps/studio/pages/api/integrations/[slug].ts

@@ -0,0 +1,24 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+
+import apiWrapper from 'lib/api/apiWrapper'
+import { extractResponse } from 'pages/api/constants'
+
+export default (req: NextApiRequest, res: NextApiResponse) => apiWrapper(req, res, handler)
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { method } = req
+
+  switch (method) {
+    case 'GET':
+      return handleGet(req, res)
+    default:
+      res.setHeader('Allow', ['GET'])
+      res.status(405).json({ data: null, error: { message: `Method ${method} Not Allowed` } })
+  }
+}
+
+type ResponseData = extractResponse<'/platform/integrations/{slug}', 'get'>
+
+const handleGet = async (req: NextApiRequest, res: NextApiResponse<ResponseData>) => {
+  return res.status(200).json([])
+}

apps/studio/pages/api/integrations/github/authorization.ts

@@ -0,0 +1,24 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+
+import apiWrapper from 'lib/api/apiWrapper'
+import { extractResponse } from 'pages/api/constants'
+
+export default (req: NextApiRequest, res: NextApiResponse) => apiWrapper(req, res, handler)
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { method } = req
+
+  switch (method) {
+    case 'GET':
+      return handleGet(req, res)
+    default:
+      res.setHeader('Allow', ['GET'])
+      res.status(405).json({ data: null, error: { message: `Method ${method} Not Allowed` } })
+  }
+}
+
+type ResponseData = extractResponse<'/platform/integrations/github/authorization', 'get'>
+
+const handleGet = async (req: NextApiRequest, res: NextApiResponse<ResponseData>) => {
+  return res.status(200).json(null as any)
+}

apps/studio/pages/api/integrations/github/connections.ts

@@ -0,0 +1,24 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+
+import apiWrapper from 'lib/api/apiWrapper'
+import { extractResponse } from 'pages/api/constants'
+
+export default (req: NextApiRequest, res: NextApiResponse) => apiWrapper(req, res, handler)
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { method } = req
+
+  switch (method) {
+    case 'GET':
+      return handleGet(req, res)
+    default:
+      res.setHeader('Allow', ['GET'])
+      res.status(405).json({ data: null, error: { message: `Method ${method} Not Allowed` } })
+  }
+}
+
+type ResponseData = extractResponse<'/platform/integrations/github/connections', 'get'>
+
+const handleGet = async (req: NextApiRequest, res: NextApiResponse<ResponseData>) => {
+  return res.status(200).json({ connections: [] })
+}

apps/studio/pages/api/integrations/github/repositories.ts

@@ -0,0 +1,24 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+
+import apiWrapper from 'lib/api/apiWrapper'
+import { extractResponse } from 'pages/api/constants'
+
+export default (req: NextApiRequest, res: NextApiResponse) => apiWrapper(req, res, handler)
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { method } = req
+
+  switch (method) {
+    case 'GET':
+      return handleGet(req, res)
+    default:
+      res.setHeader('Allow', ['GET'])
+      res.status(405).json({ data: null, error: { message: `Method ${method} Not Allowed` } })
+  }
+}
+
+type ResponseData = extractResponse<'/platform/integrations/github/repositories', 'get'>
+
+const handleGet = async (req: NextApiRequest, res: NextApiResponse<ResponseData>) => {
+  return res.status(200).json({ repositories: [] } as never)
+}

apps/studio/pages/api/organizations/[slug]/billing/subscription.ts

@@ -0,0 +1,46 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+
+import apiWrapper from 'lib/api/apiWrapper'
+import { extractResponse } from 'pages/api/constants'
+
+export default (req: NextApiRequest, res: NextApiResponse) => apiWrapper(req, res, handler)
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { method } = req
+
+  switch (method) {
+    case 'GET':
+      return handleGet(req, res)
+    default:
+      res.setHeader('Allow', ['GET'])
+      res.status(405).json({ data: null, error: { message: `Method ${method} Not Allowed` } })
+  }
+}
+
+type ResponseData = extractResponse<'/platform/organizations/{slug}/billing/subscription', 'get'>
+
+const handleGet = async (req: NextApiRequest, res: NextApiResponse<ResponseData>) => {
+  const response: ResponseData = {
+    billing_cycle_anchor: 0,
+    current_period_end: 0,
+    current_period_start: 0,
+    next_invoice_at: 0,
+    usage_billing_enabled: false,
+    plan: {
+      id: 'enterprise',
+      name: '',
+      price: 0,
+    },
+    addons: [],
+    project_addons: [],
+    usage_fees: [],
+    payment_method_type: '',
+    billing_via_partner: false,
+    billing_partner: 'fly',
+    scheduled_plan_change: null,
+    customer_balance: 0,
+    nano_enabled: false,
+  }
+
+  return res.status(200).json(response)
+}

apps/studio/pages/api/projects/[ref]/billing/addons.ts

@@ -0,0 +1,30 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+
+import apiWrapper from 'lib/api/apiWrapper'
+import { extractResponse } from 'pages/api/constants'
+
+export default (req: NextApiRequest, res: NextApiResponse) => apiWrapper(req, res, handler)
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { method } = req
+
+  switch (method) {
+    case 'GET':
+      return handleGet(req, res)
+    default:
+      res.setHeader('Allow', ['GET'])
+      res.status(405).json({ data: null, error: { message: `Method ${method} Not Allowed` } })
+  }
+}
+
+type ResponseData = extractResponse<'/platform/projects/{ref}/billing/addons', 'get'>
+
+const handleGet = async (req: NextApiRequest, res: NextApiResponse<ResponseData>) => {
+  const response: ResponseData = {
+    ref: '',
+    selected_addons: [],
+    available_addons: [],
+  }
+
+  return res.status(200).json(response)
+}

apps/studio/pages/api/projects/[ref]/databases.ts

@@ -0,0 +1,24 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+
+import apiWrapper from 'lib/api/apiWrapper'
+import { extractResponse } from 'pages/api/constants'
+
+export default (req: NextApiRequest, res: NextApiResponse) => apiWrapper(req, res, handler)
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { method } = req
+
+  switch (method) {
+    case 'GET':
+      return handleGet(req, res)
+    default:
+      res.setHeader('Allow', ['GET'])
+      res.status(405).json({ data: null, error: { message: `Method ${method} Not Allowed` } })
+  }
+}
+
+type ResponseData = extractResponse<'/platform/projects/{ref}/databases', 'get'>
+
+const handleGet = async (req: NextApiRequest, res: NextApiResponse<ResponseData>) => {
+  return res.status(200).json([])
+}

apps/studio/pages/api/stripe/subscription.ts

@@ -1,36 +0,0 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import apiWrapper from 'lib/api/apiWrapper'
-
-export default (req: NextApiRequest, res: NextApiResponse) => apiWrapper(req, res, handler)
-
-async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const { method } = req
-
-  switch (method) {
-    case 'POST':
-      return handlePost(req, res)
-    default:
-      res.setHeader('Allow', ['POST'])
-      res.status(405).json({ data: null, error: { message: `Method ${method} Not Allowed` } })
-  }
-}
-
-const handlePost = async (req: NextApiRequest, res: NextApiResponse) => {
-  // Platform specific endpoint
-  const response = {
-    data: {
-      tier: {
-        name: 'Self Hosted',
-        prod_id: '',
-        unit_amount: 0,
-      },
-      addons: [],
-      billing: {
-        billing_cycle_anchor: undefined,
-        current_period_end: undefined,
-        current_period_start: undefined,
-      },
-    },
-  }
-  return res.status(200).json(response)
-}

apps/studio/public/monaco-editor/base/worker/workerMain.js

@@ -62,7 +62,7 @@
       'vs/editor/common/tokenizationRegistry',
       'vs/editor/common/languages',
       'vs/editor/common/services/editorBaseApi',
-      'vs/nls!vs/base/common/worker/simpleWorker',
+      'vs/nls!monaco-editor/base/common/worker/simpleWorker',
       'vs/base/common/worker/simpleWorker',
       'vs/editor/common/services/editorSimpleWorker',
     ],