[BULL-1947] Move nodes down when expanding one, add unexpanding

Merge Request Checklist

Review

• Make sure the pipeline has passed. You may have to check the mirrored repo in code.il2.dso.mil to see the pipelines.
• Make sure that there are no errors in the development console.
• Make sure everything in the the ticket is addressed and that the acceptance criteria (if applicable) is met.
• Make sure all components and images match the design file or instruction given (if applicable).
• Make sure to take out any unused code.
• Make sure that common mistakes are not present in the code base. (See list under Common Mistakes below).
• Make sure the page is responsive (see the list for Responsiveness below for checklist).
• Check if any other issues may need to be checked (some examples can be found under Other items to look out for)

Common Mistakes

• Make sure all words are spelled correctly (if applicable).
• Make sure the right images are used (if applicable).
• Do not use any inline styles in the HTML component in files.
• Make sure everything is aligned correctly.
• Please avoid making global variables.
• Make sure error handling is in appropriate places.
• Remove all test code within the working sections when ready to push to master.

Responsiveness

For all below check the following breakpoints for Vue apps

Devices	Code	Screen sizes
Extra Small	xs	< 600px
Small	sm	600px > < 960px
Medium	md	960px > < 1264px
Large	lg	1264px > < 1904px
Extra Large	xl	> 1904px

• Check for bad word breaks within each breakpoint.
• Check to see if components are misaligned or have bad spacing, padding, or margin.
• Check to see if components overflow to either side of the viewport.
• Check if there are any weird visual glitches at different breakpoints.

Other items to look out for

• Make sure new API calls use the correct HTTP verb and when working with JSON make sure it is validated.
• With GETs, make sure that text/html return type is avoided and application/json is used when dealing with json data.
• Avoid transmission of confidential data in URL parameters and unnecessary parameters.
• Make sure all API calls are within a try catch block with appropriate error handling.
• If dealing with forms, make sure the form has input validation.
• Avoid logging confidential information.
• Make sure no-cache is on confidential web pages.
• Make sure rel="noopener noreferrer" is on any link that opens to a new tab.
• For browser performance, use .webp images instead of .png, .jpg, .jpeg, etc.

Developer responsibilities with Cypress tests

• Make sure any new download buttons (that don't use DownloadButton.vue) have the attribute data-cy="download".
• Make sure new pages / paths within router.js are added to the links.js test suite.
• Add a new test case within downloads.js if you're adding the first download button to any page.
• Reuse existing custom commands if they serve the purpose of your test.
• Create a new custom command for any duplicate code / test that can be globally reused.
• Create a local function for duplicate code that can be reused within your test spec.

Old MR was !219 (closed)

still has ui issues with the expand/collapse button.

This seems to be a machine issue. I decided to delete the circles to solve this. Only + - will show.

pls use the same icon in the instructional text vs the interactive section.

still some wonky lines

The varying aesthetics of the lines after Lint are inherent to using rules rather than hard-coding pixel locations. If this is unacceptable, we may want to switch to displaying HTML dialogs like with the tools buttons. Any other suggestions appreciated! (I fixed the outer dashed lines.)

The previous iteration of the line rules may look a little cleaner in this case:

added 1 commit

• 81d47409 - [BULL-1947] Visual fixes per code review

Compare with previous version

Out of curiosity, why was the old code removed and redone from scratch?

It was hard to maintain and inflexible. Specifically, for this story, the design only calculated layouts when expanding elements in one column (the original trufflehog column, which had many more elements than the others), so it needed complete reworking to move trufflehog to the first column, which then became similar in size to the original.

added 3 commits

• c7144757 - [BULL-1947] Visual fix for lines after Lint
• 0c5c44f9 - [BULL-1947] Visual fixes for lines per code review
• d2f64eab - [BULL-1947] Improve tools icon clickability

Compare with previous version

added 1 commit

• 6df6a335 - [BULL-1947] Visual fixes from team code review

Compare with previous version

So far, unable to prevent cursor change over lines. Colors of the two large blocks (left and right) need to be updated to account for added transparency. Made some adjustments, but colors do not seem right, need to be calculated.

added 1 commit

• aa5576ca - [BULL-1947] Try to adjust colors for transparency

Compare with previous version

added 1 commit

• 23495104 - [BULL-1947] Text extended outside box for Build

Compare with previous version

closed

mentioned in merge request !237 (merged)