John Cowen e609defd70 ui: Allow text selection of clickable elements and their contents (#5770)
* ui: Allow text selection of clickable elements and their contents

This commit disables a click on mousedown be removing the `href`
attribute and moving it to a `data-href` attribute. On mouseup it will
only move it back if there is no selection. This means that an anchor
will only be followed on click _if_ there is no selection.

This fixes the fact that whenever you select some copy within a
clickable element it immediately throws you into the linked page when
you release your mouse.

Further notes:

We use the `isCollapsed` property here which 'seems' to be classed as
'experimental' in one place where I researched it:

https://developer.mozilla.org/en-US/docs/Web/API/Selection/isCollapsed

Although in others it makes no mention of this 'experimental' e.g:

- https://webplatform.github.io/docs/dom/Selection/isCollapsed/
- https://w3c.github.io/selection-api/#dom-selection-iscollapsed

I may have gone a little overboard in feature detection for this, but I
conscious of that fact that if `isCollapsed` doesn't exist at some point
in the future (something that seems unlikely). The code here will have
no effect on the UI. But I'd specifically like a second pair of eyes on
that.

* ui: Don't break right click, detects a secondary click on mousedown

* ui: Put anchor selection capability behind an ENV var
2019-09-04 08:34:58 +00:00
..
2019-06-26 11:43:30 -05:00
2018-05-10 19:52:53 +01:00
2018-05-10 19:52:53 +01:00
2018-05-10 19:52:53 +01:00
2018-06-12 11:24:35 +01:00
2018-05-10 19:52:53 +01:00
2018-05-10 19:52:53 +01:00
2018-05-10 19:52:53 +01:00
2019-06-26 11:43:30 -05:00
2019-01-03 22:21:19 -05:00

consul-ui

Prerequisites

You will need the following things properly installed on your computer.

Installation

  • git clone https://github.com/hashicorp/consul.git this repository
  • cd ui-v2
  • yarn install

Running / Development

The source code comes with a small server that runs enough of the consul API as a set of mocks/fixtures to be able to run the UI without having to run consul.

  • make start-api or yarn start:api (this starts a Consul API double running on http://localhost:3000)
  • make start or yarn start to start the ember app that connects to the above API double
  • Visit your app at http://localhost:4200.

To enable ACLs using the mock API, use Web Inspector to set a cookie as follows:

CONSUL_ACLS_ENABLE=1

This will enable the ACLs login page, to which you can login with any ACL token/secret.

You can also use a number of other cookie key/values to set various things whilst developing the UI, such as (but not limited to):

CONSUL_SERVICE_COUNT=1000
CONSUL_NODE_CODE=1000
// etc etc

See ./node_modules/@hashicorp/consul-api-double for more details.

Code Generators

Make use of the many generators for code, try ember help generate for more details

Running Tests

Please note: You do not need to run make start-api/yarn run start:api to run the tests, but the same mock consul API is used.

  • make test or yarn run test
  • make test-view or yarn run test:view to view the tests running in Chrome

Running Tests in Parallel

Alternatively, ember-exam can be used to split the tests across multiple browser instances for faster results. Most options are the same as ember test. To see a full list of options, run ember exam --help.

Note: The EMBER_EXAM_PARALLEL environment variable must be set to override the default parallel value of 1 browser instance in testem.js.

To quickly run the tests across 4 parallel browser instances:

yarn test-parallel

To run manually:

$ EMBER_EXAM_PARALLEL=true ember exam --split <num> --parallel

More ways to split tests can be found in the ember-exam README.md.