2020-12-10 17:51:22 +00:00
|
|
|
import {
|
|
|
|
attribute,
|
|
|
|
create,
|
|
|
|
clickable,
|
|
|
|
collection,
|
|
|
|
hasClass,
|
ui: Change global search to use fuzzy search API (#10412)
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
2021-04-28 18:31:05 +00:00
|
|
|
isHidden,
|
2020-12-10 17:51:22 +00:00
|
|
|
isPresent,
|
2021-12-08 00:51:17 +00:00
|
|
|
property,
|
2020-12-10 17:51:22 +00:00
|
|
|
text,
|
|
|
|
} from 'ember-cli-page-object';
|
2018-08-10 18:20:44 +00:00
|
|
|
|
|
|
|
export default create({
|
|
|
|
navbar: {
|
|
|
|
scope: '[data-test-global-header]',
|
|
|
|
|
|
|
|
regionSwitcher: {
|
2021-03-26 13:55:12 +00:00
|
|
|
scope: '[data-test-region-switcher-parent]',
|
2018-08-10 18:20:44 +00:00
|
|
|
isPresent: isPresent(),
|
|
|
|
open: clickable('.ember-power-select-trigger'),
|
|
|
|
options: collection('.ember-power-select-option', {
|
|
|
|
label: text(),
|
|
|
|
}),
|
|
|
|
},
|
2020-06-19 18:05:28 +00:00
|
|
|
|
|
|
|
search: {
|
2021-03-26 13:55:12 +00:00
|
|
|
scope: '[data-test-search-parent]',
|
2020-06-19 18:05:28 +00:00
|
|
|
|
|
|
|
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'),
|
|
|
|
|
ui: Change global search to use fuzzy search API (#10412)
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
2021-04-28 18:31:05 +00:00
|
|
|
options: collection('.ember-power-select-option'),
|
|
|
|
}),
|
2020-06-25 20:26:52 +00:00
|
|
|
|
ui: Change global search to use fuzzy search API (#10412)
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
2021-04-28 18:31:05 +00:00
|
|
|
noOptionsShown: isHidden('.ember-power-select-options', {
|
|
|
|
testContainer: '.ember-basic-dropdown-content',
|
|
|
|
resetScope: true,
|
2020-06-19 18:05:28 +00:00
|
|
|
}),
|
|
|
|
|
|
|
|
field: {
|
|
|
|
scope: '.ember-power-select-search input',
|
|
|
|
testContainer: 'html',
|
|
|
|
resetScope: true,
|
|
|
|
},
|
|
|
|
},
|
2021-12-08 00:51:17 +00:00
|
|
|
|
|
|
|
end: {
|
|
|
|
scope: '.navbar-end',
|
|
|
|
|
|
|
|
consulLink: {
|
|
|
|
scope: '[data-test-header-consul-link]',
|
|
|
|
text: text(),
|
|
|
|
link: property('href'),
|
|
|
|
},
|
|
|
|
|
|
|
|
vaultLink: {
|
|
|
|
scope: '[data-test-header-vault-link]',
|
|
|
|
text: text(),
|
|
|
|
link: property('href'),
|
|
|
|
},
|
|
|
|
},
|
2018-08-10 18:20:44 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
gutter: {
|
|
|
|
scope: '[data-test-gutter-menu]',
|
|
|
|
visitJobs: clickable('[data-test-gutter-link="jobs"]'),
|
2020-10-29 12:46:42 +00:00
|
|
|
|
|
|
|
optimize: {
|
|
|
|
scope: '[data-test-gutter-link="optimize"]',
|
|
|
|
},
|
|
|
|
|
2022-05-17 18:52:14 +00:00
|
|
|
variables: {
|
|
|
|
scope: '[data-test-gutter-link="variables"]',
|
|
|
|
},
|
|
|
|
|
2018-08-10 18:20:44 +00:00
|
|
|
visitClients: clickable('[data-test-gutter-link="clients"]'),
|
|
|
|
visitServers: clickable('[data-test-gutter-link="servers"]'),
|
2020-05-08 04:38:19 +00:00
|
|
|
visitStorage: clickable('[data-test-gutter-link="storage"]'),
|
2018-08-10 18:20:44 +00:00
|
|
|
},
|
2020-12-10 17:51:22 +00:00
|
|
|
|
|
|
|
breadcrumbs: collection('[data-test-breadcrumb]', {
|
|
|
|
id: attribute('data-test-breadcrumb'),
|
|
|
|
text: text(),
|
|
|
|
visit: clickable(),
|
|
|
|
}),
|
|
|
|
|
|
|
|
breadcrumbFor(id) {
|
2021-12-28 14:45:20 +00:00
|
|
|
return this.breadcrumbs.toArray().find((crumb) => crumb.id === id);
|
2020-12-10 17:51:22 +00:00
|
|
|
},
|
2021-04-01 18:21:30 +00:00
|
|
|
|
|
|
|
error: {
|
|
|
|
isPresent: isPresent('[data-test-error]'),
|
|
|
|
title: text('[data-test-error-title]'),
|
|
|
|
message: text('[data-test-error-message]'),
|
|
|
|
},
|
2021-04-20 13:33:16 +00:00
|
|
|
|
|
|
|
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]'),
|
|
|
|
},
|
2022-08-17 16:59:33 +00:00
|
|
|
|
|
|
|
keyboard: {
|
|
|
|
modalShown: isPresent('.keyboard-shortcuts'),
|
|
|
|
},
|
2018-08-10 18:20:44 +00:00
|
|
|
});
|