Merge pull request #16155 from supabase/fix/paper-cuts

fix: Minor Studio papercuts

studio/components/interfaces/BillingV2/Billing.constants.ts

@@ -10,7 +10,7 @@ export const CANCELLATION_REASONS = [
   'Dashboard is too complicated',
   'Postgres is too complicated',
   'Problem not solved',
-  'Bug issues',
+  'Too many bugs/issues',
   'I decided to use something else',
   'My work has finished/discontinued',
   'I’m migrating to/starting a new project',

studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx

@@ -21,7 +21,7 @@ const EdgeFunctionsListItem: FC<Props> = ({ function: item }) => {
   const { project } = useProjectContext()
   // get the .co or .net TLD from the restUrl
   const restUrl = project?.restUrl
-  const restUrlTld = new URL(restUrl as string).hostname.split('.').pop()
+  const restUrlTld = restUrl !== undefined ? new URL(restUrl as string).hostname.split('.').pop() : 'co'
   const functionUrl = `https://${ref}.supabase.${restUrlTld}/functions/v1/${item.slug}`
 
   return (

studio/components/interfaces/Organization/BillingSettingsV2/BillingSettings.constants.ts

@@ -8,7 +8,7 @@ export const CANCELLATION_REASONS = [
   'Dashboard is too complicated',
   'Postgres is too complicated',
   'Problem not solved',
-  'Bug issues',
+  'Too many bugs/issues',
   'I decided to use something else',
   'My work has finished/discontinued',
   'I’m migrating to/starting a new project',

studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.constants.ts

@@ -31,6 +31,11 @@ const defaultTextBasedValues: Suggestion[] = [
 // using meta-store's extensions to generate this partially on top of vanilla expressions
 export const typeExpressionSuggestions: Dictionary<Suggestion[]> = {
   uuid: [
+    {
+      name: 'auth.uid()',
+      value: 'auth.uid()',
+      description: "Returns the user's ID when rows are added or updated through the API",
+    },
     {
       name: 'gen_random_uuid()',
       value: 'gen_random_uuid()',

studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx

@@ -1,16 +1,16 @@
-import React, { FC, useEffect, useState } from 'react'
-import { get, find, isEmpty, sortBy } from 'lodash'
+import type { PostgresColumn, PostgresSchema, PostgresTable } from '@supabase/postgres-meta'
 import { Dictionary } from 'components/grid'
-import { SidePanel, Input, Listbox, IconHelpCircle, IconDatabase, Toggle } from 'ui'
-import type { PostgresTable, PostgresColumn, PostgresSchema } from '@supabase/postgres-meta'
+import { find, get, isEmpty, sortBy } from 'lodash'
+import { FC, useEffect, useState } from 'react'
+import { IconDatabase, IconHelpCircle, Input, Listbox, SidePanel } from 'ui'
 
-import { useStore } from 'hooks'
-import ActionBar from '../ActionBar'
-import { ForeignKey } from './ForeignKeySelector.types'
-import { ColumnField } from '../SidePanelEditor.types'
 import InformationBox from 'components/ui/InformationBox'
 import { FOREIGN_KEY_DELETION_ACTION } from 'data/database/database-query-constants'
+import { useStore } from 'hooks'
+import ActionBar from '../ActionBar'
+import { ColumnField } from '../SidePanelEditor.types'
 import { FOREIGN_KEY_DELETION_OPTIONS } from './ForeignKeySelector.constants'
+import { ForeignKey } from './ForeignKeySelector.types'
 import { generateDeletionActionDescription } from './ForeignKeySelector.utils'
 
 interface Props {
@@ -98,10 +98,13 @@ const ForeignKeySelector: FC<Props> = ({ column, visible = false, closePanel, sa
     }
     const table = find(tables, { id: tableId })
     if (table) {
+      const primaryColumn = table.primary_keys[0].name
+      const firstColumn = table.columns?.length ? table.columns[0].name : undefined
+
       setSelectedForeignKey({
         schema: table.schema,
         table: table.name,
-        column: table.columns?.length ? table.columns[0].name : undefined,
+        column: primaryColumn ?? firstColumn,
         deletionAction: FOREIGN_KEY_DELETION_ACTION.NO_ACTION,
       })
     }

studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.constants.ts

@@ -24,7 +24,7 @@ export const DEFAULT_COLUMNS: ColumnField[] = [
     defaultValue: 'now()',
     check: null,
     foreignKey: undefined,
-    isNullable: true,
+    isNullable: false,
     isUnique: false,
     isArray: false,
     isPrimaryKey: false,

studio/components/layouts/AppLayout/SettingsButton.tsx

@@ -11,7 +11,7 @@ const SettingsButton = () => {
     <Tooltip.Root delayDuration={0}>
       <Link href={slug ? `/org/${slug}/general` : '/'} passHref>
         <Tooltip.Trigger type="button" asChild className="px-1">
-          <a>
+          <a id="organization-settings">
             <IconSettings size={18} strokeWidth={1.5} className="text-scale-1100" />
           </a>
         </Tooltip.Trigger>

studio/components/layouts/AppLayout/UserSettingsDropdown.tsx

@@ -35,8 +35,13 @@ const UserSettingsDropdown = () => {
 
   return (
     <DropdownMenu_Shadcn_ open={open} onOpenChange={() => setOpen(!open)} modal={false}>
-      <DropdownMenuTrigger_Shadcn_ className="flex items-center justify-center border font-bold rounded-full h-7 w-7 text-scale-1100 bg-surface-100">
-        {profile?.first_name ? profile?.first_name?.[0] : <IconUser size={14} strokeWidth={2} />}
+      <DropdownMenuTrigger_Shadcn_ asChild>
+        <button
+          id="user-settings-dropdown"
+          className="flex items-center justify-center border font-bold rounded-full h-7 w-7 text-scale-1100 bg-surface-100"
+        >
+          {profile?.first_name ? profile?.first_name?.[0] : <IconUser size={14} strokeWidth={2} />}
+        </button>
       </DropdownMenuTrigger_Shadcn_>
       <DropdownMenuContent_Shadcn_ align="end" className="w-60">
         <DropdownMenuGroup_Shadcn_>

studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx

@@ -33,6 +33,7 @@ const HelpPopover = ({ alt = false }: HelpPopoverProps) => {
           <Tooltip.Trigger asChild>
             <div className="relative flex items-center">
               <Button
+                id="help-popover-button"
                 type={alt ? 'text' : 'default'}
                 className={alt ? 'px-1' : ''}
                 icon={

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

@@ -44,7 +44,7 @@ const PageLayout: NextPageWithLayout = () => {
         body={
           <>
             {functions.length > 0 &&
-              functions.map((item: any) => <EdgeFunctionsListItem key={item.id} function={item} />)}
+              functions.map((item) => <EdgeFunctionsListItem key={item.id} function={item} />)}
           </>
         }
       />