UX Fix: Prevent undesired text selection with DAG title selection in Chrome

[ryanahamilton]

Prevent undesired text selection (in Chrome browser) when DAG title is double-click selected.

Simply utilizes user-select: none; CSS on the label to prevent its selection.

Behavior before:

Behavior after:

---

Make sure to mark the boxes below before creating PR: [x]

• Description above provides context of the change
• Unit tests coverage for changes (not needed for documentation changes)
• Target Github ISSUE in description if exists
• Commits follow "How to write a good git commit message"
• Relevant documentation is updated including usage instructions.
• I will engage committers as explained in Contribution Workflow Example.

---

In case of fundamental code change, Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in UPDATING.md.
Read the Pull Request Guidelines for more information.

[ashb]

I guess that means that the schedule is now not selectable at all? Hmmm. Stupid Chrome making us make decisions.

[ryanahamilton]

@ashb yeah, it's a trade-off. The schedule link is still clickable/functional. The DAG title certainly seems like the more likely element for a user to want to select.

[ashb]

Is it worth doing user-select:none; -moz-user-select: auto so it stays working in FF, since this is a chrome only bug?

[ryanahamilton]

@ashb that's a good idea… I tend to avoid vendor prefixes when possible, but in this case we'd be utilizing it to undo a hack. The user-select: none doesn't affect Safari, so the behavior is already as desired there. Will update.

[loociano]

An alternative fix that does not use user-select:none; -moz-user-select: auto; would be to remove the <div> that wraps the headings used for DAG name and schedule.

Before:

<div>
  <h3> ...DAG name code... </h3>
  <h4> ...Schedule code... </h4>
<div>
<div class="clearfix"></div>

After:

<h3> ...DAG name code... </h3>
<h4> ...Schedule code... </h4>
<div class="clearfix"></div>

[ashb]

@loociano PR welcome 😁

[loociano]

I was first wondering why this issue is still occurring a year later.
Despite #8912 being listed in 1.10.11, @ryanahamilton's fix is not included in the release code (not even in 1.10.15). Am I missing something?

[ashb]

@loociano 1663760 is the commit that is included in 1.10.11

[loociano]

@loociano 1663760 is the commit that is included in 1.10.11

My bad, I was looking into airflow/www/templates/airflow/dag.html, however the fix is in airflow/www_rbac/templates/airflow/dag.html

@ashb do you know the difference between www and www_rbac? Should the fix be included in both?

[ashb]

In 1.10, www is the classic/deprecated UI, and hasn't been recieving fixes for a while (since ~1.10.6), www_rbac is what becomes the www in 2.0, and can be enabled on 1.10 releases by setting rbac = True in the airflow.cfg