6d037633da
This updates the UI to use the new fuzzy search API. It’s a drop-in replacement so the / shortcut to jump to search is preserved, and results can be cycled through and chosen via arrow keys and the enter key. It doesn’t use everything returned by the API: * deployments and evaluations: these match by id, doesn’t seem like people would know those or benefit from quick navigation to them * namespaces: doesn’t seem useful as they currently function * scaling policies * tasks: the response doesn’t include an allocation id, which means they can’t be navigated to in the UI without an additional query * CSI volumes: aren’t actually returned by the API Since there’s no API to check the server configuration and know whether the feature has been disabled, this adds another query in route:application#beforeModel that acts as feature detection: if the attempt to query fails (500), the global search field is hidden. Upon having added another query on load, I realised that beforeModel was being triggered any time service:router#transitionTo was being called, which happens upon navigating to a search result, for instance, because of refreshModel being present on the region query parameter. This PR adds a check for transition.queryParamsOnly and skips rerunning the onload queries (token permissions check, license check, fuzzy search feature detection). Implementation notes: * there are changes to unrelated tests to ignore the on-load feature detection query * some lifecycle-related guards against undefined were required to address failures when navigating to an allocation * the minimum search length of 2 characters is hard-coded as there’s currently no way to determine min_term_length in the UI
56 lines
1.2 KiB
SCSS
56 lines
1.2 KiB
SCSS
.global-search-dropdown {
|
|
background: transparent;
|
|
border: 0;
|
|
position: fixed;
|
|
|
|
.ember-power-select-search {
|
|
margin-left: $icon-dimensions;
|
|
border: 0;
|
|
}
|
|
|
|
input,
|
|
input:focus {
|
|
background: transparent;
|
|
border: 0;
|
|
outline: 0;
|
|
}
|
|
|
|
// Prevent Safari from disrupting styling, adapted from http://geek.michaelgrace.org/2011/06/webkit-search-input-styling/
|
|
input[type='search'] {
|
|
-webkit-appearance: textfield;
|
|
}
|
|
|
|
input::-webkit-search-decoration,
|
|
input::-webkit-search-cancel-button {
|
|
display: none;
|
|
}
|
|
|
|
.ember-power-select-options {
|
|
background: white;
|
|
padding: 0.35rem;
|
|
|
|
&[role='listbox'] {
|
|
border: 1px solid $grey-blue;
|
|
box-shadow: 0 6px 8px -2px rgba($black, 0.05), 0 8px 4px -4px rgba($black, 0.1);
|
|
}
|
|
|
|
.ember-power-select-option {
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: $radius;
|
|
|
|
&[aria-current='true'] {
|
|
background: transparentize($blue, 0.8);
|
|
color: $blue;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ember-power-select-group-name {
|
|
text-transform: uppercase;
|
|
display: inline;
|
|
color: darken($grey-blue, 20%);
|
|
font-size: $size-7;
|
|
font-weight: $weight-semibold;
|
|
}
|
|
}
|