🐛 Custom domain UX "bug" (?): if you add custom domain but don't configure site will be broken

[Daniellappv]

To investigate the following potential bug flagged by @Datopian-Shreyas:

The below points are based on the following scenario:

• I added a custom domain and did not configure it and when i click on visit, it took me to site site cannot be reached. To get back to default I had to remove the custom domain field and save it.
  • Better not to change link to visit site until the custom domain works or configured properly.
  • It will be good to have a button which will switch back to default domain after adding custom domain.

In addition to that, @luccasmmg added the following issues re custom domains:

1. I think this should not be an alert instead an actual modal that matches the rest of the dashboard design:

2. I also feel like there should be a way to clear this custom domain, i typed one out just to see how it works but now i cant leave it blank anymore, later i realized that you can just remove everything and save the changes, but still, i dont really get why there is a X icon next to the input if not to clear everything:

[gradedSystem]

@Daniellappv is this related to the datahub cause it seems like it relates to datahub-next directory

[olayway]

I totally agree with the above suggestions!

[gradedSystem]

Pitch for Addressing Custom Domain Issues in Dashboard

Problem

When users add a custom domain without configuring it, they are redirected to a "site cannot be reached" page. This can cause confusion and frustration, as users must manually remove the custom domain and save changes to revert to the default domain. Additionally, the current user interface for managing custom domains is lacking the functionality of clearing the input

Story: For example: a small business owner, adds a custom domain to the dashboard to give website a professional look. But he forgets to configure the domain properly, when owner visits a site he doesn't know where to click and how to return back to the default domain, so adding a button would be a great feature

Appetite

I aim to solve this in one week of time, considering I am very new to the frontend world.

Solution

1. Prevent Redirection to Non-Functional Domains: Implement a validation check to ensure the custom domain is properly configured before allowing users to visit the site. If the domain is not configured, the visit link will display an appropriate message or be disabled (I am not sure how to address this one since I am still learning about backend development and HTTP/HTTPS and DNS basics).

2. Revert Button: Introduce a button that allows users to revert to the default domain with a single click. This button could be placed near the custom domain input field

3. Enhanced UI/UX for Custom Domain Input: Replace the current alert with a modal that aligns with the dashboard design. The modal will provide clear information and actions related to custom domain management.

4. Improved Clearing Functionality: Ensure the "X" icon next to the custom domain input field clears the input field and saves the changes correctly. This functionality will be intuitive and clearly communicated to users (I have tested this one, and it seems like it takes the response of the Configuration from DomainStatus and if not configured properly then it adds an icon here is the line of code).

Annotated Sketches

1. Modal Design: A mockup of the new modal design, showing how it integrates with the dashboard.
2. Revert Button Placement: Illustration of the revert button next to the custom domain input field.
3. Clear Input Functionality: Diagram showing the behavior of the "X" icon and the resulting action.

Rabbit Holes

• Partial Configuration: Users who partially configures the website might face certain problems in configuring the domain, so I think it would be great to add some explanation or add it to the documentation

cc @Daniellappv @olayway

[olayway]

I added a custom domain and did not configure it and when i click on visit, it took me to site site cannot be reached. To get back to default I had to remove the custom domain field and save it. Better not to change link to visit site until the custom domain works or configured properly.

I don't think this is a bug or a bad UX to be honest. We already check if the configuration is valid using Vercel's API, and I don't think we can have a better check than they do. And if the domain isn't configured properly you'll get this information:

Of course, I know there are some issues with domain configuration that won't be caught by this check, but that's up to the user to figure this out. And I think everyone would check if their custom domain works immediately after setting it. It's just a reasonable thing to do.

[olayway]

This can cause confusion and frustration, as users must manually remove the custom domain and save changes to revert to the default domain.

I wouldn't say the reason why the user could get frustrated is because of having to remove the custom domain, but rather because they can't figure out why it's not working ;) It's rather normal behaviour I would say that you need to revert some configuration manually if it doesn't work.

[olayway]

Implement a validation check to ensure the custom domain is properly configured before allowing users to visit the site.

As I've mentioned above, we already have a validation check, using Vercel's API. And assume it's pretty well implemented and tested.

If the domain is not configured, the visit link will display an appropriate message or be disabled.

I don't think this is needed. Consider there 2 scenarios:

1. You add your custom domain and you immediately get the error messages below from Vercel API saying that it's not configured correctly. In this case it's obvious that you're not going to be able to visit the site and trying to do so doesn't make any sense. You should try to fix your custom domain config and if you fail to do this, remove it.
2. You add your custom domain and it seems it's configured correctly, i.e. you don't get an error. But when you try to visit the site it seems it doesn't work (e.g. you get "Too many redirects" or some other error). Again, this is another bug you need to tackle yourself or if you fail, remove the custom domain.

And I'm not sure what's the purpose of disabling the "Visit" link for the site creator.

[olayway]

Revert Button: Introduce a button that allows users to revert to the default domain with a single click. This button could be placed near the custom domain input field

I guess we could have it, yes. I'd just add "Remove" button next to "Save changes"

[olayway]

Replace the current alert with a modal that aligns with the dashboard design. The modal will provide clear information and actions related to custom domain management.

I think we can get rid of the modal entirely.

[olayway]

Improved Clearing Functionality: Ensure the "X" icon next to the custom domain input field clears the input field and saves the changes correctly.

I think "Remove" button would be more than enough.

[gradedSystem]

Suggested workaround

Just to reiterate following steps should be implemented correct?

1. Adding “Remove” button next to the save changes button
2. Removing alert modal completely
3. “X” next to the input would remove the field in an input and saves the changes

cc @olayway

[olayway]

@gradedSystem Why would we need 3. if we had 1. ?

[gradedSystem]

@olayway so I would just remove the "X" near the input field `` correct?

[olayway]

@gradedSystem No, this X is just an indicator that the domain configuration is incorrect. Here is how it looks like when it's correct:

[olayway]

To be honest I don't think it's worth adding the "Remove" button too... 😅 I'd just remove the modal and leave the rest as is for now.

[rufuspollock]

I don't think this is a bug or a bad UX to be honest. We already check if the configuration is valid using Vercel's API, and I don't think we can have a better check than they do. And if the domain isn't configured properly you'll get this information:

BTW i would 👍👍 @olayway original analysis which is this is was a WONTFIX as not really a bug or a real UX problem.

[olayway]

FIXED