consul/ui/packages/consul-ui/app/components
John Cowen 35a92e856b
ui: Make it hard to not URLEncode DataSource srcs/URIs (#11117)
Our DataSource came in very iteratively, when we first started using it we specifically tried not to use it for things that would require portions of the @src="" attribute to be URL encoded (so things like service names couldn't be used, but dc etc would be fine). We then gradually added an easy way to url encode the @src="" attributes with a uri helper and began to use the DataSource component more and more. This meant that some DataSource usage continued to be used without our uri helper.

Recently we hit #10901 which was a direct result of us not encoding @src values/URIs (I didn't realise this was one of the places that required URL encoding) and not going back over things to finish things off once we had implemented our uri helper, resulting in ~half of the codebase using it and ~half of it not.

Now that almost all of the UI uses our DataSource component, this PR makes it even harder to not use the uri helper, by wrapping the string that it requires in a private URI class/object, that is then expected/asserted within the DataSource component/service. This means that as a result of this PR you cannot pass a plain string to the DataSource component without seeing an error in your JS console, which in turn means you have to use the uri helper, and it's very very hard to not URL encode any dynamic/user provided values, which otherwise could lead to bugs/errors similar to the one mentioned above.

The error that you see when you don't use the uri helper is currently a 'soft' dev time only error, but like our other functionality that produces a soft error when you mistakenly pass an undefined value to a uri, at some point soon we will make these hard failing "do not do this" errors.

Both of these 'soft error' DX features have been used this to great effect to implement our Admin Partition feature and these kind of things will minimize the amount of these types of bugs moving forwards in a preventative rather than curative manner. Hopefully these are the some of the kinds of things that get added to our codebase that prevent a multitude of problems and therefore are often never noticed/appreciated.

Additionally here we moved the remaining non-uri using DataSources to use uri (that were now super easy to find), and also fixed up a place where I noticed (due to the soft errors) where we were sometimes passing undefined values to a uri call.

The work here also led me to find another couple of non-important 'bugs' that I've PRed already separately, one of which is yet to be merged (#11105), hence the currently failing tests here. I'll rebase that once that PR is in and the tests here should then pass 🤞

Lastly, I didn't go the whole hog here to make DataSink also be this strict with its uri usage, there is a tiny bit more work on DataSink as a result of recently work, so I may (or may not) make DataSink equally as strict as part of that work in a separate PR.
2021-09-30 15:54:46 +01:00
..
action
anchors
anonymous
app
app-error
app-view
aria-menu
auth-dialog ui: Make it hard to not URLEncode DataSource srcs/URIs (#11117) 2021-09-30 15:54:46 +01:00
auth-form
auth-modal
auth-profile
badge
brand-loader
breadcrumbs
buttons
card
certificate
checkbox-group
child-selector
code-editor
collapsible-notices
composite-row
confirmation-alert
confirmation-dialog
consul
copy-button
csv-list
data-collection
data-form
data-loader
data-sink
data-source ui: Make it hard to not URLEncode DataSource srcs/URIs (#11117) 2021-09-30 15:54:46 +01:00
data-writer
debug/navigation
definition-table
delete-confirmation
display-toggle
dom-recycling-table
empty-state ui: Make it hard to not URLEncode DataSource srcs/URIs (#11117) 2021-09-30 15:54:46 +01:00
error-state
event-source
expanded-single-select
filter-bar
flash-message
form-component
form-elements
form-group
freetext-filter
hashicorp-consul ui: Make it hard to not URLEncode DataSource srcs/URIs (#11117) 2021-09-30 15:54:46 +01:00
horizontal-kv-list
icon-definition
informed-action
inline-alert
inline-code
jwt-source
list-collection
list-row
main-header-horizontal
main-nav-horizontal
main-nav-vertical
menu-panel
modal-dialog
modal-layer
more-popover-menu
notice
notification
oidc-select
outlet
overlay
pill
policy-form
policy-selector ui: Make it hard to not URLEncode DataSource srcs/URIs (#11117) 2021-09-30 15:54:46 +01:00
popover-menu
popover-select
power-select
progress
radio-card
radio-group
ref
role-form
role-selector
route
search-bar
secret-button
skip-links
sliding-toggle
state
state-chart
tab-nav
table
tabular-collection
tabular-details
tabular-dl
tag-list
toggle-button
token-list
token-source ui: Make it hard to not URLEncode DataSource srcs/URIs (#11117) 2021-09-30 15:54:46 +01:00
tooltip
tooltip-panel
topology-metrics