Repository: supabase/supabase
File: apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx (TypeScript)

Code before:
                    className="h-[34px] mt-6"
                    icon={<MinusCircle />}
                    onClick={() => (fields.length > 1 ? remove(index) : form.reset(defaultValues))}
                  />
                </div>
              ))}

              <Button
                type="default"
                onClick={() => {
                  const formValues = form.getValues('secrets')
                  const isEmptyForm = formValues.every((field) => !field.name && !field.value)
                  if (isEmptyForm) {
                    fields.forEach((_, index) => remove(index))
                    append({ name: '', value: '' })
                  } else {
                    append({ name: '', value: '' })
                  }
                }}
              >
                Add another
              </Button>
            </CardContent>
            <CardFooter className="justify-between space-x-2">
              <p className="text-sm text-foreground-light">
                Insert or update multiple secrets at once by pasting key–value pairs.
              </p>

              <Button type="primary" htmlType="submit" disabled={isCreating} loading={isCreating}>
                {isCreating ? 'Saving...' : fields.length > 1 ? 'Bulk save' : 'Save'}
              </Button>
            </CardFooter>
          </Card>
        </form>
      </Form_Shadcn_>
      <DuplicateSecretWarningModal
        visible={!!duplicateSecretName}
        onCancel={handleCancelDuplicate}
        onConfirm={handleConfirmDuplicate}
        isCreating={isCreating}
        secretName={duplicateSecretName}
      />
    </>
  )
}

export default AddNewSecretForm


Review comment (suggestion):
Two very small bits of feedback:
- You can leave off the period (`.`) since it’s just a few words
- Use the `-` character, not `–` character between `key-value` as the latter is for a number range. More info [here](https://practicaltypography.com/hyphens-and-dashes.html)

Code after:
                    className="h-[34px] mt-6"
                    icon={<MinusCircle />}
                    onClick={() => (fields.length > 1 ? remove(index) : form.reset(defaultValues))}
                  />
                </div>
              ))}

              <Button
                type="default"
                onClick={() => {
                  const formValues = form.getValues('secrets')
                  const isEmptyForm = formValues.every((field) => !field.name && !field.value)
                  if (isEmptyForm) {
                    fields.forEach((_, index) => remove(index))
                    append({ name: '', value: '' })
                  } else {
                    append({ name: '', value: '' })
                  }
                }}
              >
                Add another
              </Button>
            </CardContent>
            <CardFooter className="justify-between space-x-2">
              <p className="text-sm text-foreground-lighter">
                Insert or update multiple secrets at once by pasting key-value pairs
              </p>

              <Button type="primary" htmlType="submit" disabled={isCreating} loading={isCreating}>
                {isCreating ? 'Saving...' : fields.length > 1 ? 'Bulk save' : 'Save'}
              </Button>
            </CardFooter>
          </Card>
        </form>
      </Form_Shadcn_>
      <DuplicateSecretWarningModal
        visible={!!duplicateSecretName}
        onCancel={handleCancelDuplicate}
        onConfirm={handleConfirmDuplicate}
        isCreating={isCreating}
        secretName={duplicateSecretName}
      />
    </>
  )
}

export default AddNewSecretForm