fix: truncate text adding ellipsis after certain length

[Manuel-Suarez-Abascal]

After the changes:

• Closes issue-21755

User facing changelog

It truncates the browser name in the UI after a determined length(16) in order to avoid layout issues when the browser name is too long.

Additional details

N/A

Steps to test

• Install Firefox Developer Edition browser.
• Launch Cypress.

How has the user experience changed?

An ellipsis will be added if the browser name is too long. Ellipsis will be added if the browser name is more than 16 characters.

PR Tasks

• Have tests been added/updated?
• Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
• Has a PR for user-facing changes been opened in cypress-documentation?
• Have API changes been updated in the type definitions?

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
3 out of 4 committers have signed the CLA.

✅ Manuel-Suarez-Abascal
✅ emilyrohrbough
✅ lmiller1990
❌ Manuel Abascal

---

Manuel Abascal seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[marktnoonan]

Thanks for the PR @Manuel-Suarez-Abascal! This strikes me as something that needs a review from our design team before we make the change. The linked issue is quite vague "maybe can truncate...". It probably should not have been labelled a "good first issue" since it's not a clearly defined task.

My initial concern is that the full browser name may sometimes be important & we should probably live with wrapping, or if we don't, we should offer a tooltip with full text. Users can define custom browsers and may give them all kinds of names that might be useful to see.

If we go with truncating, my suggestion would be that we should not do it with JavaScript but use the truncate utility class from Tailwind.

That said, it looks to me like one of the problems reported in the issue has already been solved differently - the dropdown no longer has the weird centering/wrapping that was in that screenshot, it looks like this, which seems fine:

@elevatebart would you mind giving some feedback on whether there's more to do here? Should we close that old issue, or do the truncating -- or do you and team have some other design guidance?

[elevatebart]

Thank you @Manuel-Suarez-Abascal

Good PR indeed. On a rather hard issue.
I think doing the truncation using text-overflow: ellipsis is a better idea.

<div class="ellipsis overflow-hidden whitespace-nowrap" />

[elevatebart]

Also, don't forget to rebase this Branch with only commits signed with GitHub.

[elevatebart]

Please use CSS to truncate the browser name.

[Manuel-Suarez-Abascal]

@elevatebart thanks, it seems that I complicated things for no reason. I have addressed the PR comments. That being said, I use the truncate class from Tailwind as per the docs here. Do you want to use this instead? class="ellipsis overflow-hidden whitespace-nowrap"

Also, don't forget to rebase this Branch with only commits signed with GitHub.

I am not sure what you mean about this. Hopefully, I complied with this requirement 😬

[elevatebart]

Thank you @Manuel-Suarez-Abascal, I like this new fix.

By rebasing your branch with only signed commit I was trying to get rid of the Red Cross here.

This unsigned commit prevents us from merging your PR.

[elevatebart]

I believe also that the initial problem mentioned in the ticket was fixed another way.

@marktnoonan could you confirm that so that @Manuel-Suarez-Abascal does not have to needlessly rebase his PR?

[marktnoonan]

Hi @elevatebart , sorry for my delay here. I was referring to this:

That said, it looks to me like one of the problems reported in the issue has already been solved differently - the dropdown no longer has the weird centering/wrapping that was in that screenshot, it looks like this, which seems fine:

I don't personally think we still need this ticket as I would prefer the full browser name to be shown, but I'll defer to you on the design.

There are two things:

1. Truncate in Launchpad cards so they look the same size always
2. Truncate in dropdown menu (this is the one where that bad centering is already fixed & it's just about menu width)

I suggest we leave the drop down alone since there is no bad overflow, and that we only truncate in the launchpad. If it turns out in the future we need the full browser name back, we can have it back easily.

@Manuel-Suarez-Abascal if you can modify this to only make the change in OpenBrowserList.vue I will approve. Although as Bart said we will need to make sure all commits are associated with your github user that signed the CLA: #24831 (comment). It appears you have 2 users.

If it's simpler feel free to make a fresh PR with your one-line change and tag me there.

[Manuel-Suarez-Abascal]

Hi @elevatebart , sorry for my delay here. I was referring to this:

That said, it looks to me like one of the problems reported in the issue has already been solved differently - the dropdown no longer has the weird centering/wrapping that was in that screenshot, it looks like this, which seems fine:

I don't personally think we still need this ticket as I would prefer the full browser name to be shown, but I'll defer to you on the design.

There are two things:

1. Truncate in Launchpad cards so they look the same size always
2. Truncate in dropdown menu (this is the one where that bad centering is already fixed & it's just about menu width)

I suggest we leave the drop down alone since there is no bad overflow, and that we only truncate in the launchpad. If it turns out in the future we need the full browser name back, we can have it back easily.

@Manuel-Suarez-Abascal if you can modify this to only make the change in OpenBrowserList.vue I will approve. Although as Bart said we will need to make sure all commits are associated with your github user that signed the CLA: #24831 (comment). It appears you have 2 users.

If it's simpler feel free to make a fresh PR with your one-line change and tag me there.

@marktnoonan I have addressed the PR comments. However, I am not sure how to fix the issue of the CLA signature. If I open another branch/PR I am sure I will have the same issue. I got another PR opened & it's the same 😞

[lmiller1990]

Looks good, let me try kick off CI.

[Manuel-Suarez-Abascal]

@lmiller1990 I have been trying to fix this, but I haven't been lucky. I will give it a shot in the next few days again.

[lmiller1990]

No problem. You should be able to revert and re-commit and force push, that should be enough to get the CLA to pass. Let me know if you need any more assistance.

[Manuel-Suarez-Abascal]

No problem. You should be able to revert and re-commit and force push, that should be enough to get the CLA to pass. Let me know if you need any more assistance.

Sorry, guys. I am not able to fix it. I have spent more time trying to fix this CLA thingy than contributing to the code 🤣 if we cannot move forward with it. I might just close the PR & reopen another in the future. Let me know what's best.

[cypress]

---

Test summary

26393 • 0 • 1179 • 0 • 35

---

Run details

Project	cypress
Status	Passed
Commit	1531508
Started	Dec 26, 2022 12:22 AM
Ended	Dec 26, 2022 12:41 AM
Duration	19:02 💡
OS	Linux Debian -
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Flakiness

	create-from-component.cy.ts		2
1	... > runs generated spec
2	... > runs generated spec
	commands/net_stubbing.cy.ts		3
1	network stubbing > intercepting request > can delay and throttle a StaticResponse
2	network stubbing > intercepting request > can delay and throttle a StaticResponse
3	network stubbing > intercepting request > can delay and throttle a StaticResponse
This comment includes only the first 5 flaky tests. See all 35 flaky tests in the Cypress Dashboard.

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[lmiller1990]

Hi @Manuel-Suarez-Abascal

I think this issue is the CLA is not signed for another account you have, or you committed without a git user set, or something to that meaning.

The easiest way to fix this would be

1. checkout a new branch from cypress/develop
2. apply your change (only 1 file)
3. do a force push to your current branch

That'll wipe out all those old commits that haven't signed the CLA. Then we can merge this.

[Manuel-Suarez-Abascal]

@lmiller1990 I have closed this PR & reopened another with the same changes to get rid of the CLA issue here. It seems it has solved the issue.

[Manuel-Suarez-Abascal]

Closed in favor of: #25270