[User Story]: Display Parent Element Description in Child Element Interface

[kallewesterling]

Role

As an assurance case editor

Desired Feature

I want to view the description of a parent element when I am adding or editing a child element

Benefit

So that I can easily reference the parent's details to ensure that my contributions are consistent and appropriately aligned with the parent's claims and objectives

Acceptance Criteria

GIVEN I am editing an assurance case, AND I am about to add or edit a child element (Strategy, Context, Property Claim, or Evidence), WHEN I initiate the process to add or edit the child element, THEN I should automatically see the description of the corresponding parent element displayed in a clearly visible area of the interface.

GIVEN the parent element's description is displayed, WHEN I read the description while adding or editing a child element, THEN the description should remain visible and legible to assist me in formulating the child element's details.

GIVEN I am using the feature to add or edit child elements, WHEN I navigate through different parent elements, THEN the displayed description should update dynamically to match the currently selected parent element.

Dependencies

• [x] Frontend implementation to dynamically display the parent description in the child element editing interface.

Technical Notes

• Implement a non-intrusive but clearly visible section in the side panel, that would display the parent description
• Consider accessibility standards to ensure that all users, including those with disabilities, can access and benefit from this feature

It could be added above "Create new claim" in the screenshot below:

Definition of Done

• [X] The feature fulfills all acceptance criteria.
• [X] The code is reviewed and meets team coding standards.
• [X] All unit, integration, and end-to-end tests are passed.
• [X] The feature meets accessibility standards set for the project.
• [X] The code passes the CI/CD pipeline quality controls (style and linting).
• [X] The feature is merged into the main branch.
• [X] The feature is deployed and functional in the QA environment.
• [X] The feature was demonstrated to the team and accepted by the product owner.

[RichGriff]

So now in each elements edit sheet we can see their parents description. I have also added in a eye icon for toggling the description just in case the user doesn't want to see it.

[RichGriff]

In staging - @chrisdburr please review.

[chrisdburr]

Thanks, @RichGriff. I like the eye icon.

One small request: could we show the parent's identifier as well (e.g. S1, P2)?

I like how this is formatted in the search query (e.g. as a smaller gray font).

And, a question:

Do you think there is a better layout for the sidebar that we could switch to? For instance, I'm wondering if the parent's description should be below the description of the target element. I'm wondering about information hierarchy. So, what's the most salient information for our users to see.

[RichGriff]

In staging - please review

[chrisdburr]

I'm still unsure about the way this information is presented.

I think it needs to be separated visually from the rest of the information, perhaps using something like a callout:

[!NOTE] Description of the parent element. Parent Identifier.

I like how the Material for MKDocs SSG does them: https://squidfunk.github.io/mkdocs-material/reference/admonitions/#supported-types

If using collapsible blocks, we could switch to a simple arrow/chevron icon and keep the default state as hidden.

[chrisdburr]

I can't change the way GitHub renders callouts, but if you think this is a good way to go, @RichGriff I would suggest the following:

ℹ️ Parent Element Description {Description of the parent element.} {Parent element identifier}

[chrisdburr]

Will come back to this after @RichGriff has had a play around with alternate UI options.

[chrisdburr]

@RichGriff, any more thoughts on alternate UI options?