[pull] master from supabase:master

apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx

@@ -1,16 +1,16 @@
+import { IS_PLATFORM } from 'common'
+import { useParams } from 'common/hooks'
 import dayjs from 'dayjs'
 import { Check, Copy } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-
-import { IS_PLATFORM } from 'common'
-import { useParams } from 'common/hooks'
-import { useProjectSettingsV2Query } from 'data/config/project-settings-v2-query'
-import { useCustomDomainsQuery } from 'data/custom-domains/custom-domains-query'
-import type { EdgeFunctionsResponse } from 'data/edge-functions/edge-functions-query'
-import { cn, copyToClipboard, TableCell, TableRow } from 'ui'
+import { TableCell, TableRow, copyToClipboard } from 'ui'
 import { TimestampInfo } from 'ui-patterns'
-import { createNavigationHandler } from 'lib/navigation'
+
+import { useProjectSettingsV2Query } from '@/data/config/project-settings-v2-query'
+import { useCustomDomainsQuery } from '@/data/custom-domains/custom-domains-query'
+import type { EdgeFunctionsResponse } from '@/data/edge-functions/edge-functions-query'
+import { createNavigationHandler } from '@/lib/navigation'
 
 interface EdgeFunctionsListItemProps {
   function: EdgeFunctionsResponse
@@ -31,9 +31,10 @@ export const EdgeFunctionsListItem = ({ function: item }: EdgeFunctionsListItemP
       ? `https://${customDomainData.customDomain.hostname}/functions/v1/${item.slug}`
       : `${protocol}://${endpoint}/functions/v1/${item.slug}`
 
-  const handleNavigation = IS_PLATFORM
-    ? createNavigationHandler(`/project/${ref}/functions/${item.slug}`, router)
-    : undefined
+  const handleNavigation = createNavigationHandler(
+    `/project/${ref}/functions/${item.slug}${IS_PLATFORM ? '' : `/details`}`,
+    router
+  )
 
   return (
     <TableRow
@@ -42,7 +43,7 @@ export const EdgeFunctionsListItem = ({ function: item }: EdgeFunctionsListItemP
       onAuxClick={handleNavigation}
       onKeyDown={handleNavigation}
       tabIndex={0}
-      className={cn({ 'cursor-pointer inset-focus': IS_PLATFORM })}
+      className="cursor-pointer inset-focus"
     >
       <TableCell>
         <p className="text-sm text-foreground whitespace-nowrap py-2">{item.name}</p>

apps/studio/components/interfaces/Functions/FunctionsEmptyState.tsx

@@ -360,16 +360,15 @@ curl --request POST 'http://localhost:54321/functions/v1/hello-world' \\
 
 export const FunctionsSecretsEmptyStateLocal = () => {
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Managing secrets and environment variables locally</CardTitle>
-      </CardHeader>
-      <CardContent className="p-0 grid grid-cols-[repeat(auto-fit,minmax(240px,1fr))] divide-y md:divide-y-0 md:divide-x divide-default items-stretch">
-        <div className="p-8">
-          <div className="flex items-center gap-2">
-            <Lock size={20} />
-            <h4 className="text-base text-foreground">Managing secrets</h4>
+    <>
+      <Card>
+        <CardHeader className="flex-row items-center justify-between">
+          Local development & CLI
+          <div className="flex items-center gap-x-2">
+            <DocsButton href={`${DOCS_URL}/guides/functions/secrets#using-the-cli`} />
           </div>
+        </CardHeader>
+        <CardContent>
           <div className="text-sm text-foreground-light mt-1 mb-4 max-w-3xl">
             <p>
               Local secrets and environment variables can be loaded in either of the following two
@@ -386,9 +385,50 @@ export const FunctionsSecretsEmptyStateLocal = () => {
               </li>
             </ul>
           </div>
-          <DocsButton href={`${DOCS_URL}/guides/functions/secrets#using-the-cli`} />
-        </div>
-      </CardContent>
-    </Card>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex-row items-center justify-between">
+          Self-Hosted Supabase
+          <div className="flex items-center gap-x-2">
+            <DocsButton href={`${DOCS_URL}/guides/self-hosting/docker#configuring-services`} />
+          </div>
+        </CardHeader>
+        <CardContent>
+          <p className="prose [&>code]:text-xs space-x-1 text-sm max-w-full">
+            <span>Change settings in</span>
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://github.com/supabase/supabase/blob/master/docker/.env.example"
+            >
+              .env file
+            </a>
+            <span>and</span>
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://github.com/supabase/supabase/blob/master/docker/docker-compose.yml"
+            >
+              docker-compose.yml
+            </a>
+            <span>at</span>
+            <code>functions</code>
+            <span>service</span>
+          </p>
+          <p className="prose [&>code]:text-xs space-x-1 text-sm max-w-full">
+            <span>Secrets can also be loaded at runtime by injecting them into</span>
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://github.com/supabase/supabase/blob/8bb82bb3a5aee631e8e6e6e0c8a5f6e97fb8f898/docker/volumes/functions/main/index.ts#L74"
+            >
+              main/index.ts file
+            </a>
+          </p>
+        </CardContent>
+      </Card>
+    </>
   )
 }

apps/studio/components/interfaces/Support/SupportForm.schema.ts

@@ -1,11 +1,10 @@
+import { PLAN_REQUEST_EMPTY_PLACEHOLDER } from 'components/ui/UpgradePlanButton'
 import { z } from 'zod'
 
-import { isFeatureEnabled } from 'common'
-import { PLAN_REQUEST_EMPTY_PLACEHOLDER } from 'components/ui/UpgradePlanButton'
 import { CATEGORY_OPTIONS, type ExtendedSupportCategories } from './Support.constants'
 
-const createFormSchema = (showClientLibraries: boolean) => {
-  const baseSchema = z.object({
+export const SupportFormSchema = z
+  .object({
     organizationSlug: z.string().min(1, 'Please select an organization'),
     projectRef: z.string().min(1, 'Please select a project'),
     category: z.enum(
@@ -15,53 +14,22 @@ const createFormSchema = (showClientLibraries: boolean) => {
       ]
     ),
     severity: z.string(),
-    library: z.string(),
+    library: z.string().optional(),
     subject: z.string().min(1, 'Please add a subject heading'),
     message: z.string().min(1, "Please add a message about the issue that you're facing"),
     affectedServices: z.string(),
     allowSupportAccess: z.boolean(),
     attachDashboardLogs: z.boolean(),
     dashboardSentryIssueId: z.string().optional(),
   })
+  .refine(
+    (data) => {
+      return !data.message.includes(PLAN_REQUEST_EMPTY_PLACEHOLDER)
+    },
+    {
+      message: `Please let us know which plan you'd like to upgrade to for your organization`,
+      path: ['message'],
+    }
+  )
 
-  if (showClientLibraries) {
-    return baseSchema
-      .refine(
-        (data) => {
-          return !(data.category === 'Problem' && data.library === '')
-        },
-        {
-          message: "Please select the library that you're facing issues with",
-          path: ['library'],
-        }
-      )
-      .refine(
-        (data) => {
-          return !data.message.includes(PLAN_REQUEST_EMPTY_PLACEHOLDER)
-        },
-        {
-          message: `Please let us know which plan you'd like to upgrade to for your organization`,
-          path: ['message'],
-        }
-      )
-  }
-
-  // When showClientLibraries is false, make library optional and remove the refine validation
-  return baseSchema
-    .extend({
-      library: z.string().optional(),
-    })
-    .refine(
-      (data) => {
-        return !data.message.includes(PLAN_REQUEST_EMPTY_PLACEHOLDER)
-      },
-      {
-        message: `Please let us know which plan you'd like to upgrade to for your organization`,
-        path: ['message'],
-      }
-    )
-}
-
-const showClientLibraries = isFeatureEnabled('support:show_client_libraries')
-export const SupportFormSchema = createFormSchema(showClientLibraries)
 export type SupportFormValues = z.infer<typeof SupportFormSchema>

apps/studio/components/interfaces/Support/SupportFormV2.tsx

@@ -8,6 +8,7 @@ import { type OrganizationPlanID } from 'data/organizations/organization-query'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useGenerateAttachmentURLsMutation } from 'data/support/generate-attachment-urls-mutation'
 import { useDeploymentCommitQuery } from 'data/utils/deployment-commit-query'
+import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { detectBrowser } from 'lib/helpers'
 import { useProfile } from 'lib/profile'
 import { type Dispatch, type MouseEventHandler } from 'react'
@@ -77,6 +78,7 @@ export const SupportFormV2 = ({ form, initialError, state, dispatch }: SupportFo
   const { data: organizations } = useOrganizationsQuery()
   const subscriptionPlanId = getOrgSubscriptionPlan(organizations, selectedOrgSlug)
   const simplifiedSupportForm = useIsSimplifiedForm(organizationSlug, subscriptionPlanId)
+  const showClientLibraries = useIsFeatureEnabled('support:show_client_libraries')
 
   const attachmentUpload = useAttachmentUpload()
   const { mutateAsync: uploadDashboardLogFn } = useGenerateAttachmentURLsMutation()
@@ -105,6 +107,21 @@ export const SupportFormV2 = ({ form, initialError, state, dispatch }: SupportFo
   })
 
   const onSubmit: SubmitHandler<SupportFormValues> = async (formValues) => {
+    // Library is required when selecting "APIs and Client Libraries" category,
+    // but only when the library selector is visible (not in simplified form)
+    if (
+      !simplifiedSupportForm &&
+      showClientLibraries &&
+      formValues.category === SupportCategories.PROBLEM &&
+      !formValues.library
+    ) {
+      form.setError('library', {
+        type: 'manual',
+        message: "Please select the library that you're facing issues with",
+      })
+      return
+    }
+
     dispatch({ type: 'SUBMIT' })
 
     const { attachDashboardLogs: formAttachDashboardLogs, ...values } = formValues