Fix Server URL field to be editable

[Aryan1718]

Describe your changes

Fixes inability to edit the "Server URL" field.

Write your issue number after "Fixes "

Fixes #3100

Please ensure all items are checked off before requesting a review. "Checked off" means you need to add an "x" character between brackets so they turn into checkmarks.

• I deployed the application locally.
• I have performed a self-review and testing of my code.
• I have included the issue # in the PR.
• I have added i18n support to visible strings (instead of <div>Add</div>, use):

const { t } = useTranslation();
<div>{t('add')}</div>

• I have not included any files that are not related to my pull request, including package-lock and package-json if dependencies have not changed
• I didn't use any hardcoded values (otherwise it will not scale, and will make it difficult to maintain consistency across the application).
• I made sure font sizes, color choices etc are all referenced from the theme. I don't have any hardcoded dimensions.
• My PR is granular and targeted to one specific feature.
• I ran npm run format in server and client directories, which automatically formats your code.
• I took a screenshot or a video and attached to this PR if there is a UI change.

[ajhollid]

Thanks for your contribution thusfar!

A couple of changes needed on the frontend, noted in review.

There is a bigger issue on the server side, which isn't caused by your PR but will require changes to your PR once resolved, so we may as well do it all here.

await editMonitorBodyValidation.validateAsync(req.body);
const editedMonitor = await this.monitorService.editMonitor({ teamId, monitorId, body: req.body });

The body is validated, but then the original unvalidated body is passed to the monitor service.

We should pass the validated body along:

const validatedBody = await editMonitorBodyValidation.validateAsync(req.body);
const editedMonitor = await this.monitorService.editMonitor({ teamId, monitorId, body: validatedBody });

And that will require updating the validation schema to allow the URL field, which is not currently allowed.

The reason the PR works currently is that the body is effectively not validated; if we did validate it properly, it would fail to update the URL as the value would be stripped.

We should be good to go after that 👍

[ajhollid]

You can remove the showUrl condition, that is not used on the the config page.

[ajhollid]

This causes the alert to show and then hide when the page loads, as the watchedUrl does not equal the existingMonitor.url initially but does once loaded.

[ajhollid]

Pleaes put this string under pages.createMonitor.form.general.url.alert in en.json