M1: Basic Component Copy-Paste Proof-of-Concept - Studio Prototype

[ormsbee]

A Studio prototype for component copy/paste will be built on edx.org.

• Discovery: Backend vs. Frontend (clipboard app on backend or do everything client-side) #7
• Discovery: How to reconcile mismatched content/settings–list all settings (look at XBlock validation API) #8
• Discovery: Handle inline discussion scenario (new discussion ID)–match behavior of Duplicate button #9
• Feature flag toggle to enable/disable the display of copy-paste UI #11
• Move existing Studio component actions into a menu #50
• Copy/paste: New backend app for storing copied components and associated data #51
• Consolidate the OLX block_serializers APIs (backend/dev-only task) #54
• Copy/paste: implement "Copy" menu in frontend #10
• Copy/paste: Implement "paste" button in the UI + backend #12
• Add preview information in the Paste button, such as course, title, and link #13
• Add validation check for mismatched Content Group settings in Components #14
• Add validation check for LTI config (if it doesn't already exist) #15
• Discovery: Alternatives to tCRIL sandbox for testing #22
• TODO: Surface compatibility warnings/errors that occur during paste (per wireframes)
• M0 & M1: Usability Testing of Studio Prototype #32

Should handle pasting both within the same course as well as across courses, but not using libraries yet.

M1 gets the very basic functionality out there in a way that’s testable by users, but is not really releasable to a production environment.

[ali-hugo]

@bradenmacdonald Here is a link to the design files in Figma. I will add the svg's of all the icons used to this ticket as well.

@jmakowski1123 I have made the last few UX changes that we discussed in our meeting last week. Would you mind taking one last look over the designs and confirming whether you'd like any changes before Braden implements the design? I think the only thing outstanding is the wording of the error/warning/info alerts.

[ali-hugo]

SVG Icons

• More Vert:
• Content Paste:
• Help:
• Error:
• Info:
• Warning:

[ali-hugo]

UX of alerts

The UX of the alerts is design to work like the edX registration form at this link. Notice how the screen scrolls up to display the alert at the top of the screen.

[jmakowski1123]

Thanks @ali-hugo ! Is this the final outstanding question you are referring to? If so, flagging @ormsbee on that one.

From my perspective, these look good to go! @bradenmacdonald @ormsbee I've updated the Technical Approach document, specifically the "Summary of New UI elements" section, so that it reflects all of the new required UI for the Studio prototype. Would appreciate an extra set of eyes on that, to make sure I didn't miss anything. Tracking that specific task here.

[bradenmacdonald]

Perfect, thanks for all these links and for the SVGs, @ali-hugo !

@ali-hugo would it be possible for you to show how the "Paste Component" button should look when nothing has been copied or what's in the clipboard is not suitable to paste as a component (e.g. in the future when a unit is copied, it can't be pasted as a component). Basically this question: https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3575611457?focusedCommentId=3584851970

I also had one question at https://www.figma.com/file/y2qfzidTxxfYK8ONgyT7KP?node-id=698:1155#370741457

[ali-hugo]

@jmakowski1123 Thanks for flagging Dave on that comment. I see he's already responded. Here is a list of the last few unresolved conversations:

• Would components ever show a loading state when pasting? (see comment)

• Is having some kind of "troubleshooting guide" pragmatic for MVP, or should this alert text rather just encourage the user to contact their system administrator? (see comment)

• Could the display of alerts / inline notifications be simplified for MVP? Braden's question (see comment)

@jmakowski1123 @bradenmacdonald @ormsbee Feel free to respond to these comments here or in Figma - whichever is easiest for you.

[ali-hugo]

@bradenmacdonald

@ali-hugo would it be possible for you to show how the "Paste Component" button should look when nothing has been copied or what's in the clipboard is not suitable to paste as a component

We decided to simply not display the paste button if a paste is not possible. There was quite a bit of back-and-forth about this but, in the end, we decided to try it out in user-testing and see how users react.