Repository: supabase/supabase
File: apps/studio/components/interfaces/ProjectCreation/ComputeSizeSelector.tsx (TypeScript)

Code before:
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { sizes } from './ProjectCreation.constants'
import { CreateProjectForm } from './ProjectCreation.schema'

interface ComputeSizeSelectorProps {
  form: UseFormReturn<CreateProjectForm>
}

export const ComputeSizeSelector = ({ form }: ComputeSizeSelectorProps) => {
  return (
    <Panel.Content>
      <FormField_Shadcn_
        control={form.control}
        name="instanceSize"
        render={({ field }) => (
          <FormItemLayout
            layout="horizontal"
            label="Compute size"
            description={
              <>
                <p>
                  The size for your dedicated database. You can change this later. Learn more about{' '}
                  <InlineLink
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-inherit hover:text-foreground transition-colors"
                    href={`${DOCS_URL}/guides/platform/compute-add-ons`}
                  >
                    compute add-ons
                  </InlineLink>{' '}
                  and{' '}
                  <InlineLink
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-inherit hover:text-foreground transition-colors"
                    href={`${DOCS_URL}/guides/platform/manage-your-usage/compute`}
                  >
                    compute billing
                  </InlineLink>
                  .
                </p>
              </>
            }
          >
            <Select_Shadcn_ value={field.value} onValueChange={(value) => field.onChange(value)}>
              <SelectTrigger_Shadcn_ className="[&>span>div>div>[data-field=instance-details]]:hidden">
                <SelectValue_Shadcn_ placeholder="Select a compute size" />
              </SelectTrigger_Shadcn_>
              <SelectContent_Shadcn_>
                <SelectGroup_Shadcn_>
                  {sizes

Review comment (suggestion):
The `target` and `rel` tags are all set on the component itself, and are therefore duplicative here.

_(I’m pretty sure it was me who added it in the first place...)_

Code after:
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { sizes } from './ProjectCreation.constants'
import { CreateProjectForm } from './ProjectCreation.schema'

interface ComputeSizeSelectorProps {
  form: UseFormReturn<CreateProjectForm>
}

export const ComputeSizeSelector = ({ form }: ComputeSizeSelectorProps) => {
  return (
    <Panel.Content>
      <FormField_Shadcn_
        control={form.control}
        name="instanceSize"
        render={({ field }) => (
          <FormItemLayout
            layout="horizontal"
            label="Compute size"
            description={
              <>
                <p>
                  The size for your dedicated database. You can change this later. Learn more about{' '}
                  <InlineLink href={`${DOCS_URL}/guides/platform/compute-add-ons`}>
                    compute add-ons
                  </InlineLink>{' '}
                  and{' '}
                  <InlineLink href={`${DOCS_URL}/guides/platform/manage-your-usage/compute`}>
                    compute billing
                  </InlineLink>
                  .
                </p>
              </>
            }
          >
            <Select_Shadcn_ value={field.value} onValueChange={(value) => field.onChange(value)}>
              <SelectTrigger_Shadcn_ className="[&>span>div>div>[data-field=instance-details]]:hidden">
                <SelectValue_Shadcn_ placeholder="Select a compute size" />
              </SelectTrigger_Shadcn_>
              <SelectContent_Shadcn_>
                <SelectGroup_Shadcn_>
                  {sizes
                    .filter((option) =>
                      instanceSizeSpecs[option].cloud_providers.includes(
                        form.getValues('cloudProvider') as CloudProvider
                      )
                    )
                    .map((option) => {
                      return (
                        <SelectItem_Shadcn_ key={option} value={option}>
                          <div className="flex flex-row gap-4 items-center">
                            <div className="w-14 flex items-center">