Repository: supabase/supabase
File: apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx (TypeScript)

Code before:
                  />
                ) : (
                  <Listbox
                    size="small"
                    name="schema"
                    label="Select a schema to enable the extension for"
                  >
                    <Listbox.Option
                      key="custom"
                      id="custom"
                      label={`Create a new schema "${extension.name}"`}
                      value="custom"
                      addOnBefore={() => <Plus size={16} strokeWidth={1.5} />}
                    >
                      Create a new schema "{extension.name}"
                    </Listbox.Option>
                    <Modal.Separator />
                    {schemas
                      ?.filter(
                        (schema) =>
                          !protectedSchemas.some(
                            (protectedSchema) => protectedSchema.name === schema.name
                          )
                      )
                      .map((schema) => {
                        return (
                          <Listbox.Option
                            key={schema.id}
                            id={schema.name}
                            label={schema.name}
                            value={schema.name}
                            addOnBefore={() => <Database size={16} strokeWidth={1.5} />}
                          >
                            {schema.name}
                          </Listbox.Option>
                        )
                      })}
                  </Listbox>
                )}
              </Modal.Content>

              {values.schema === 'custom' && (
                <Modal.Content>
                  <Input id="name" name="name" label="Schema name" />
                </Modal.Content>
              )}

              {extension.name === 'pg_cron' && project?.cloud_provider === 'FLY' && (
                <Modal.Content>
                  <Alert_Shadcn_ variant="warning">
                    <WarningIcon />

Review comment (refactor):
I’ve made a reusable function `getSchemaDescriptionText` because an inline ternary is hard to read and not extensible for when we (should) add more recommended schemas in the future.

Code after:
                    <DocsButton abbrev={false} className="mt-2" href={`${DOCS_URL}`} />
                  </Admonition>
                )}

                {fetchingSchemaInfo || isSchemasLoading ? (
                  <div className="space-y-2">
                    <ShimmeringLoader />
                    <div className="w-3/4">
                      <ShimmeringLoader />
                    </div>
                  </div>
                ) : defaultSchema ? (
                  <Input
                    disabled
                    id="schema"
                    name="schema"
                    value={defaultSchema}
                    label="Select a schema to enable the extension for"
                    descriptionText={getSchemaDescriptionText(extension.name, defaultSchema)}
                  />
                ) : (
                  <Listbox
                    size="small"
                    name="schema"
                    label="Select a schema to enable the extension for"
                    descriptionText={getSchemaDescriptionText(extension.name, null)}
                  >
                    <Listbox.Option
                      key="custom"
                      id="custom"
                      label={`Create a new schema "${extension.name}"`}
                      value="custom"
                      addOnBefore={() => <Plus size={16} strokeWidth={1.5} />}
                    >
                      Create a new schema "{extension.name}"
                    </Listbox.Option>
                    <Modal.Separator />
                    {schemas
                      ?.filter(
                        (schema) =>
                          !protectedSchemas.some(
                            (protectedSchema) => protectedSchema.name === schema.name
                          )
                      )
                      .map((schema) => {
                        return (
                          <Listbox.Option
                            key={schema.id}
                            id={schema.name}
                            label={schema.name}
                            value={schema.name}