Custom domain UI revamp

[davinotdavid]

What changed?

• Refactored the CustomDomainForm component into more focused / granular components for better future maintainability:
  • CustomDomainAddStep and CustomDomainVerifyStep only take care of their respective steps
  • DnsRecordsTable only cares about the table itself
  • utils.ts has all the non-component-specific functions used throughout the components
• The DnsRecordsTable now uses grid and subgrid for better / easier layouts
• Removed the critical status handling in favor of keeping them all as warning, per Design request
• Added a header showcasing which domain is the one you are seeing the records of
• Added copy buttons when there are values to be copied
• Added Conflicting Records / All Records tabs to filter through the table
• Added info tooltips for conflicting records with personalized tooltips per record type / action

Why?

Even though we recently updated the Custom Domain UI, it was a temporary measure to unblock the Flight 2. There were still more design updates that the Design team wanted to do that we didn't have time to address so now that we've got a more polished version of it, we should implement it!

Limitations and Notes

• We are missing the support article to be added in the MX record tooltips. There's already a Notion ticket requesting it and it has to be updated soon. Currently this is hard-coded to point to the support website homepage.

• There's no place yet to showcase error in case the clipboard is not available for copying the button. We are only doing a console.error for now but this will probably change in the near future. There's a TODO in the code for that!

• This design is a step towards the north star of custom domains but not the definitive version yet. The Design team is currently evaluating if/when they will get time to do further work around this.

Applicable Issues

Related with #944

Screenshots

View DNS records only (no verification yet)

Failed (various conflicting records, all records tab)

Failed (various conflicting records, conflicting records tab)

Verified (check marks on the left, no tabs are displayed and no action column)

[markstos]

Overall, it looks like the spec. Nice!

• The Edit/Remove/Add labels look like they might be buttons rather than tags, but the
  "i" tooltip next to them may be sufficient to clarify.

• For the SRV "Edit" case, it's not clear from the tooltip what edit is required. This was
  clearer before when we showed both the ideal and conflicting rows.

• When testing with the "noshmind" domain, I got an "Edit" error for
  "_caldavs._tcp.noshmind.com.", but when I compare that to the recommended DNS record, I don't
  see what the difference is. This appears to be a possible backend bug, as the backend is
  reporting a conflict. . OK, I believe I understand this issue, because it's also
  happening with the MX record. When thre's a conflicting row, like an extra MX record at the
  same priority or a extra, conflicting SRV record, then we are displaying "Edit" next to correct
  rows that don't need an edit, they only need the conflicting record removed. In terms of UX,
  I believe the correct rows should NOT have the "Edit" label next to them.

• Perhaps we should clarify what "All Records" means. We are not fetching all the DNS records for their zone.
  (And for technical records, we can't). A better name is "Records to Add"

• I thought we were going to do "Yellow for Warning (Optional)" and Red for Required (like before)
  But when tested with superduperfakefakefake.com, even the missing MX record was marked in
  yellow, not red.

• See also the related issue about considering the missing DKIM CNAMES as errors that we are trying
  to land: #947 That other PR will likely
  land first, so maybe there is nothing to do here.

[solangevalverde]

Perhaps we should clarify what "All Records" means. We are not fetching all the DNS records for their zone.
(And for technical records, we can't). A better name is "Records to Add"

As I mentioned on the zeplin file, the design has decided for the time being we will avoid differentiating warning and conflict as even non critical conflicts can in the long run create conflict for users. If due to landing mergers and potential deadlines, #947 can land first and then this ticket should be edited to fix the multi-color conflict rows.

Incoming changes from design: copy from the tooltips as well as copy on the tags so they don't seem like actionable objects but a task needed to be done without the tag being interacted with. I will comment here once Zeplin has been updated with the copy change.

[davinotdavid]

Moving to draft per latest conversations with Design about this: #944 (comment)