supabase/apps/studio/components/interfaces/ProjectCreation/InternalOnlyConfiguration.tsx

import { useParams } from 'common'
import { useRef } from 'react'
import { UseFormReturn } from 'react-hook-form'
import { type CloudProvider } from 'shared-data'
import { FormControl, FormField, Input, useWatch } from 'ui'
import { CollapsibleCardSection } from 'ui-patterns/CollapsibleCardSection'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'

import { CloudProviderSelector } from './CloudProviderSelector'
import { PostgresVersionSelector } from './PostgresVersionSelector'
import { CreateProjectForm } from './ProjectCreation.schema'
import Panel from '@/components/ui/Panel'

interface InternalOnlyConfigurationProps {
  form: UseFormReturn<CreateProjectForm>
}

export const InternalOnlyConfiguration = ({ form }: InternalOnlyConfigurationProps) => {
  const { slug } = useParams()
  const showNonProdFields = process.env.NEXT_PUBLIC_ENVIRONMENT !== 'prod'
  const highAvailability = useWatch({ control: form.control, name: 'highAvailability' })
  // Held here (outside the collapsible content) so the selector's last valid
  // selection survives the section being collapsed and reopened.
  const lastValidPostgresVersionSelection = useRef('')

  return (
    <Panel.Content>
      <CollapsibleCardSection
        title="Internal-only Configuration"
        description="These settings are only visible to internal staff"
      >
        <div className="flex flex-col gap-y-6">
          <div className="flex flex-col gap-y-4">
            <FormField
              control={form.control}
              name="postgresVersionSelection"
              render={({ field }) => (
                <PostgresVersionSelector
                  field={field}
                  form={form}
                  cloudProvider={form.getValues('cloudProvider') as CloudProvider}
                  organizationSlug={slug}
                  dbRegion={form.getValues('dbRegion')}
                  disabled={highAvailability}
                  lastValidSelectionRef={lastValidPostgresVersionSelection}
                />
              )}
            />
          </div>

          {showNonProdFields && (
            <div>
              <p className="text-xs text-foreground-lighter mb-6">
                The settings below are only applicable for local/staging projects
              </p>
              <div className="flex flex-col gap-y-4">
                <CloudProviderSelector form={form} />

                {!highAvailability && (
                  <FormField
                    control={form.control}
                    name="postgresVersion"
                    render={({ field }) => (
                      <FormItemLayout
                        label="Custom Postgres version"
                        layout="horizontal"
                        description="Specify a custom version of Postgres (defaults to the latest)."
                      >
                        <FormControl>
                          <Input placeholder="e.g 17.6.1.104" {...field} autoComplete="off" />
                        </FormControl>
                      </FormItemLayout>
                    )}
                  />
                )}

                <FormField
                  control={form.control}
                  name="instanceType"
                  render={({ field }) => (
                    <FormItemLayout
                      label="Custom instance type"
                      layout="horizontal"
                      description="Specify a custom instance type."
                    >
                      <FormControl>
                        <Input placeholder="e.g t3.nano" {...field} autoComplete="off" />
                      </FormControl>
                    </FormItemLayout>
                  )}
                />
              </div>
            </div>
          )}
        </div>
      </CollapsibleCardSection>
    </Panel.Content>
  )
}