### Apache Airflow version

2.2.0

### Operating System

Debian buster

### Versions of Apache Airflow Providers

_No response_

### Deployment

Astronomer

### Deployment details

astro dev start

### What happened

When I have tried to duplicate a connection first time it has created a connection with hello_copy1 and duplicating the same connection second time giving me an error of 
```Connection hello_copy2 can't be added. Integrity error, probably unique constraint.```




### What you expected to happen

It should create a connection with name hello_copy3 or the error message should be more user friendly.

### How to reproduce

https://github.com/apache/airflow/pull/15574#issuecomment-912438705

### Anything else

Suggested Error 
```
Connection hello_copy2 can't be added because it already exists.
```
or
Change the number logic in _copyN so the new name will be always unique.


### Are you willing to submit PR?

- [ ] Yes I am willing to submit a PR!

### Code of Conduct

- [X] I agree to follow this project's [Code of Conduct](https://github.com/apache/airflow/blob/main/CODE_OF_CONDUCT.md)

airflow/www/views.py
dr_state = dr.state
    
    if not dr_state and drs:
        dr = drs[0]
        date_time = dr.execution_date
        dr_state = dr.state
    return {
        'dttm': date_time,
        'base_date': base_date,
        'num_runs': num_runs,
        'execution_date': date_time.isoformat(),
        'dr_choices': dr_choices,
        'dr_state': dr_state,
    }
def task_group_to_dict(task_group):
    """
    Create a nested dict representation of this TaskGroup and its children used to construct
    the Graph.
    """
    if isinstance(task_group, BaseOperator):
        return {
            'id': task_group.task_id,
            'value': {
                'label': task_group.label,
                'labelStyle': f"fill:{task_group.ui_fgcolor};",
                'style': f"fill:{task_group.ui_color};",
                'rx': 5,
                'ry': 5,
            },
        }