chore: updated styling for configuration files

[amehta265]

• Closes On focus, outline is only highlighting header on 'Rename existing specs' step #21847

User facing changelog

• In order to improve styling consistency on the Cypress app, we need to ensure that panels on migration and configuration have consistent border outlining. (Check On focus, outline is only highlighting header on 'Rename existing specs' step #21847 for styling differences between migration and configuration file panels)
• According to both Figma and the design system components, only the header should have the border. This PR addresses this by ensuring that only the headers on "configuration files" accordions have that styling and not the entire panel.

Additional details

• Why was this change necessary? So panels on different screens e.g. migration and configuration have similar styling for consistency.
• FileRow.vue (Which renders the panels on the configuration) uses Collapsible.vue. Since Collapsible.vue is a reusable component that is leveraged by other components e.g. SettingCard, GeneratorSuccess e.t.c., adding any new styles to Collapsible for the purpose of re-designing FileRow would also adversely impact the other components that use Collapsible as unwanted styles would be applied to those components as well. In order to prevent this, I have added an optional prop in Collapsible, which when set to true would apply changes to the Collapsible component. The other components would not pass in this prop and therefore will not receive any unwanted styling changes.
• In order for the header section of the panel be highlighted we need to independently control styles for the header and the bottom section of the panel. This is only possible by updating styles on Collapsible.vue.

Steps to test

• No new tests have been added because only the UI/ styling for the configuration page has changed. All the functionality of the component has stayed the same.
• However, in order to look at the updated UI, you can:

1. Run yarn dev from the root folder (cypress)
2. Add the launchpad as a project on the Cypress UI
3. Go to e2e testing and run the project-setup.cy.ts spec file. Check the 'opens correctly in unconfigured project with --e2e' test to see the updated look of the config files.
4. Change to Component Testing and run the FileRow.cy.ts spec file. Check the 'renders each status, the expected files, and expected styles' to see the updated look on different types of config files.

How has the user experience changed?

Before:

After:

PR Tasks

• [na] Have tests been added/updated?
• [na] Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
• [na] Has a PR for user-facing changes been opened in cypress-documentation?
• [na] 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.

[marktnoonan]

Works well, much more clear, Percy looks good 👍

[mike-plummer]

Worth capturing a new Percy screenshot in the test for Collapsible to cover the true/false case on fileRow? Or are the changes not going to be evident in Percy?

[mike-plummer]

Worth capturing a new Percy screenshot in the test for Collapsible to cover the true/false case on fileRow? Or are the changes not going to be evident in Percy?

Per Ankit, Percy isn't quite sensitive enough to pick up the visual differences for the focus changes. Moving ahead without new snapshots

[cypress]

---

Test summary

40019 • 0 • 3346 • 0 • 4

---

Run details

Project	cypress
Status	Passed
Commit	0264959
Started	Sep 12, 2022 9:10 PM
Ended	Sep 12, 2022 9:26 PM
Duration	15:51 💡
OS	Linux Debian - 11.3
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Flakiness

	config_env.cy.ts		2
1	cy.origin- Cypress.config() > serializable > overwrites different values in secondary, even if the Cypress.config() value does not exist in the primary
2	cy.origin- Cypress.config() > serializable > overwrites different values in secondary, even if the Cypress.config() value does not exist in the primary
	commands/cookies.cy.ts		1
1	cy.origin cookies > client side > .getCookie(), .getCookies(), and .setCookie()
	commands/querying_shadow.cy.ts		1
1	cy.origin shadow dom > .shadow()

---

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