fix menu stretch in long confirmation messages

[mhsh312]

Fix cBioPortal/cbioportal#10737

Describe changes proposed in this pull request:

• Fixed the Confirmation message widening the add chart menu
• Added max-width css property to SuccessBanner
• Passed the containerWidth prop to SuccessBanner (similarly how it has been passed to GeneLevelSelection)
• Updated ISuccessBannerProps accordingly

Because the menu does not have an explicit width and just adjusts according to its children, setting max-width of SuccessBanner to 100% or inherit would not work. So, I passed the current containerWidth to SuccessBanner so that it can have a numerical limit to its width.

If no test is included it should explicitly be mentioned in the PR why there is no test.

It is a simple CSS fix so no extra tests are needed.

Checks

• Has tests or has a separate issue that describes the types of test that should be created. If no test is included it should explicitly be mentioned in the PR why there is no test.
• The commit log is comprehensible. It follows 7 rules of great commit messages. For most PRs a single commit should suffice, in some cases multiple topical commits can be useful. During review it is ok to see tiny commits (e.g. Fix reviewer comments), but right before the code gets merged to master or rc branch, any such commits should be squashed since they are useless to the other developers. Definitely avoid merge commits, use rebase instead.
• Is this PR adding logic based on one or more clinical attributes? If yes, please make sure validation for this attribute is also present in the data validation / data loading layers (in backend repo) and documented in File-Formats Clinical data section!

Any screenshots or GIFs?

Notify reviewers

@alisman

[netlify]

✅ Deploy Preview for cbioportalfrontend ready!

Name	Link
🔨 Latest commit	c3e1750
🔍 Latest deploy log	https://app.netlify.com/sites/cbioportalfrontend/deploys/661d7277c6dd0d0008d110ca
😎 Deploy Preview	https://deploy-preview-4892--cbioportalfrontend.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[alisman]

Thank you @mhsh312 !

[alisman]

@mhsh312 There are some broken e2e tests. Let me know if you have time to figure out what's up or need some help.
https://app.circleci.com/pipelines/github/cBioPortal/cbioportal-frontend/12986/workflows/225289fc-d3ad-40dc-89bf-cb11c23b5cbd/jobs/158792
The instructions for running them are in the README

[mhsh312]

@alisman to be honest, I read the failed tests and I have no idea why this happened. Why did a css change break an API test? I could understand this test maybe because it is written to perceive the UI a certain way and it is not finding it but absolutely no idea about the other two. The modified component SuccessBanner also isn't used anywhere else except in the component mentioned in this issue.
Sorry, completely lost on this one.

If you know what the issue is please let me know as I would like to know as well.

Edit: I tried wrapping the component into a div with max-width instead of modifying the actual component but that doesn't pass the test either.

[mhsh312]

@alisman it turns out that when I run this test even without the changes I made, check_api_sync.sh test still breaks. So I think that is an issue with some other code unrelated to my change.

[alisman]

Yeah, you don't have to worry about check sync test. It's the remote end-to-end-test job that we need to fix: https://app.circleci.com/pipelines/github/cBioPortal/cbioportal-frontend/12986/workflows/225289fc-d3ad-40dc-89bf-cb11c23b5cbd/jobs/158792 If you look here, you'll see it's having trouble clicking on something. [image: image.png]

…

On Mon, Apr 15, 2024 at 3:01 PM mhsh312 ***@***.***> wrote: @alisman <https://github.com/alisman> it turns out that when I run this test even without the changes I made, check_api_sync.sh test still breaks. So I think that is an issue with some other code unrelated to my change. — Reply to this email directly, view it on GitHub <#4892 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABNRGKT2LDRLFRAGPWAAPLY5QPZBAVCNFSM6AAAAABGEUAFZ6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANJXGYYDKOBVGY> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[mhsh312]

https://app.circleci.com/pipelines/github/cBioPortal/cbioportal-frontend/12986/workflows/225289fc-d3ad-40dc-89bf-cb11c23b5cbd/jobs/158792

this test passed after I wrapped the SuccessBanner component instead of modifying it in this commit.

Check here:
https://app.circleci.com/pipelines/github/cBioPortal/cbioportal-frontend/12993/workflows/e5e7afaf-9b13-47df-bc7d-5b379d9eb436/jobs/158840

As for the localDB test, i think it fails because now the size of the menu changes in vertical height, so the test needs to be updated.

[onursumer]

Looks good to me! Not sure if the failing local db tests are related.