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
98 lines
2.5 KiB
JavaScript
98 lines
2.5 KiB
JavaScript
import {
|
|
attribute,
|
|
create,
|
|
clickable,
|
|
collection,
|
|
hasClass,
|
|
isHidden,
|
|
isPresent,
|
|
text,
|
|
} from 'ember-cli-page-object';
|
|
|
|
export default create({
|
|
navbar: {
|
|
scope: '[data-test-global-header]',
|
|
|
|
regionSwitcher: {
|
|
scope: '[data-test-region-switcher-parent]',
|
|
isPresent: isPresent(),
|
|
open: clickable('.ember-power-select-trigger'),
|
|
options: collection('.ember-power-select-option', {
|
|
label: text(),
|
|
}),
|
|
},
|
|
|
|
search: {
|
|
scope: '[data-test-search-parent]',
|
|
|
|
click: clickable('.ember-power-select-trigger'),
|
|
|
|
groups: collection('.ember-power-select-group', {
|
|
testContainer: '.ember-power-select-options',
|
|
resetScope: true,
|
|
name: text('.ember-power-select-group-name'),
|
|
|
|
options: collection('.ember-power-select-option'),
|
|
}),
|
|
|
|
noOptionsShown: isHidden('.ember-power-select-options', {
|
|
testContainer: '.ember-basic-dropdown-content',
|
|
resetScope: true,
|
|
}),
|
|
|
|
field: {
|
|
scope: '.ember-power-select-search input',
|
|
testContainer: 'html',
|
|
resetScope: true,
|
|
},
|
|
},
|
|
},
|
|
|
|
gutter: {
|
|
scope: '[data-test-gutter-menu]',
|
|
namespaceSwitcher: {
|
|
scope: '[data-test-namespace-switcher-parent]',
|
|
isPresent: isPresent(),
|
|
open: clickable('.ember-power-select-trigger'),
|
|
options: collection('.ember-power-select-option', {
|
|
label: text(),
|
|
}),
|
|
},
|
|
visitJobs: clickable('[data-test-gutter-link="jobs"]'),
|
|
|
|
optimize: {
|
|
scope: '[data-test-gutter-link="optimize"]',
|
|
},
|
|
|
|
visitClients: clickable('[data-test-gutter-link="clients"]'),
|
|
visitServers: clickable('[data-test-gutter-link="servers"]'),
|
|
visitStorage: clickable('[data-test-gutter-link="storage"]'),
|
|
},
|
|
|
|
breadcrumbs: collection('[data-test-breadcrumb]', {
|
|
id: attribute('data-test-breadcrumb'),
|
|
text: text(),
|
|
visit: clickable(),
|
|
}),
|
|
|
|
breadcrumbFor(id) {
|
|
return this.breadcrumbs.toArray().find(crumb => crumb.id === id);
|
|
},
|
|
|
|
error: {
|
|
isPresent: isPresent('[data-test-error]'),
|
|
title: text('[data-test-error-title]'),
|
|
message: text('[data-test-error-message]'),
|
|
},
|
|
|
|
inlineError: {
|
|
isShown: isPresent('[data-test-inline-error]'),
|
|
title: text('[data-test-inline-error-title]'),
|
|
message: text('[data-test-inline-error-body]'),
|
|
dismiss: clickable('[data-test-inline-error-close]'),
|
|
|
|
isDanger: hasClass('is-danger', '[data-test-inline-error]'),
|
|
isWarning: hasClass('is-warning', '[data-test-inline-error]'),
|
|
},
|
|
});
|