Section/subsection sync dialog

[sdaitzman]

Designs

Top Level Sync Dialog

Dialog of Child Blocks

Spec

Modal Header

1. The header is defined by the top-level library reused object: (ie: Section/ Subsection)
2. Header has text: "Preview Changes: " block type icon, and the title of the Section or Subsection
3. The header does not change when the user clicks into child/grandchild components

Diff Listings

1. The section/subsection sync dialog shows a 2-up view with before and after states.
2. {Section Title Here} is the title of the currently in-view block.
3. If user has clicked into a child component, the title shows breadcrumbs. Specs are defined below.
4. Before always shows the current local course state including local title changes
5. After always shows the resulting state if changes are accepted, including local title changes
6. Clicking on child component with changes navigates to a view of that component
7. Un-modified blocks (or blocks with only title/text overrides) are not clickable

Title/Breadcrumbs

1. If viewing the top-level syncable object, the title should just show the title of the block
2. If viewing a child component, there should be a back button with arrow that brings you one level up: for a subsection, navigates back to the Section, for a Unit, navigates back to the Subsection.
3. Breadcrumbs should show titles of each block above the currently viewed object. (note: top level object does not show up in bread crumbs, ie: if viewing a sync modal for a Section, breadcrumbs go up to Subsection)
4. Breadcrumb titles are clickable and navigates to the named block (ie: {subsection name} is a link, and when clicked should navigate up to that subsection)

Actions-> Results

1. Clicking "Accept Changes" should accept all changes to the top level block and all published changes to contained objects excluding text overrides and title overrides
2. Clicking "Ignore Changes" should show the currently implemented dialog:

3. Clicking "Ignore" on the dialog should behave as currently implemented: block should be removed the the library updates page until a new version is published from a library 4. Clicking the X button in the top right of the modal should result in no changes: top level block still shows a sync icon on the Outline page, and still appears in the library updates page

In Scope

1. Sync dialog shows current object before/after, allows navigating into lower-level containers that have changes.
2. User can choose whether to accept or ignore changes

Not in Scope

1. Partial syncs (accepting only specific changes)
2. Unlink action: this should be done from the course outline page overflow menu
3. Changes to "ignore" behavior and "Ignore Changes" confirmation dialog
4. Modal Diff sides for added, deleted blocks, and for Units. Those are in sub-issue Deleted, Added, Unit level Diffs #2411

Related Issues

• These improvements will likely be applied to the unit sync dialog as well: Sync changes from published unit #1634

AC Testing

Hi @navinkarkera, doing some testing still on this but wanted to put some notes while in progress. Some of these may be issues with sync, not necessarily the modal/ cards. I also am putting all notes here instead of splitting them to the child issues. Please let me know if you'd prefer these notes to be split into the sub-issues.

Modal design:

• Is it possible to add the icon for the structural block type in the header of the modal?
• Looks like the modal for syncing units is showing the incorrect icon:

Added/Deleted/Unit

• Deleted, Added, Unit level Diffs #2411 Not seeing the designs from this ticket. Is this still in progress? (User should be able to navigate into an added subsection to see what has been added as part of the new subsection)

Deletion
Deletion bugs addressed in #2562. Leaving here for reference:

• I'm seeing a few issues with deletion:
  Deleted component in a reused subsection

• add a subsection to a course with units and components. Delete one of the components as the only change.

• The sync modal is stuck in a loading state.

• Deleted component in a reused section

• add a section with subsections, units, components. Delete component as the only change. publish at the unit level.

• The section is now unable to be synced. The behavior is different at different times. It does not show up at all on library updates page, and sometimes it does but sync does not work.

I'm assuming rename issues are out of scope and addressed in the #2438 and #2439

[ChrisChV]

Note: we are in the process of updating these designs to account for some additional edge cases, but are including detail here to support planning and estimation. Please feel free to add comments, and we will update this with additional cases and variants as we add design definition here.

Hi @sdaitzman @edschema, only consulting if there have been no changes to the preliminary design?

[sdaitzman]

@ChrisChV thanks for checking in on this ticket. There are some small design updates/additional spec details, which I'll go ahead and add to this story.

Based on discussion with @bradenmacdonald, we may also end up with a simplified version of this sync dialog depending on scope remaining in this epic. I'll include a basic mockup of a simplified version for reference, and can update this ticket to switch it to the incremental simplified design with followup tickets for the full diff if that's where the product team lands. (CC @jmakowski1123)

[ChrisChV]

@ChrisChV thanks for checking in on this ticket. There are some small design updates/additional spec details, which I'll go ahead and add to this story.

Based on discussion with @bradenmacdonald, we may also end up with a simplified version of this sync dialog depending on scope remaining in this epic. I'll include a basic mockup of a simplified version for reference, and can update this ticket to switch it to the incremental simplified design with followup tickets for the full diff if that's where the product team lands. (CC @jmakowski1123)

Hi @edschema, is the simplified version of this design ready?

[edschema]

Hi @ChrisChV I believe we're moving ahead with the full version of the modal and shifting to simplified designs only if necessary. I just realized the above ticket is still pending more detail. I'll add more this evening.
Here is a sketch of a simplified version. At this point, it is still an early draft.
cc @bradenmacdonald @jmakowski1123

[ChrisChV]

Hi @edschema, I just stopped by to confirm if the full design is ready for development?