Skip to content

ESoCC: Create Submit to Community Library Side Panel #5262

@AlexVelezLl

Description

@AlexVelezLl

This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Requires #5216 to be merged.

Overview

As part of this issue, we will be building the side panel modal that editors will use to submit their channels for inclusion in the Community Library.

Currently, most of the Studio frontend codebase is built with Vuetify. However, for all these new features, we should prioritize using our Kolibri Design System (KDS) as much as possible (unless relevant shared components already exist). We also encourage the use of the Vue Composition API for new components, though using the Options API is acceptable if you find it more comfortable.

Technical requirements

Description Design specs
We will add a "Share" dropdown button to the channel edit toolbar, displaying three options: "Submit to the Community Library", "Invite collaborators", and "Share token". "Invite collaborators" and "Share token" will duplicate the existing interactions for sharing channel and getting token respectively. "Submit to the Community" Library will be an available option only if the user has canManage permissions. Image
The modal will display the included languages, included licenses, and included categories of the current published version. To get this data, we will load the published_data channel property, using the endpoint we implemented in #5169. Both countries and description inputs are required. Image
If the channel hasn't been published yet, show this warning message. Image
The "More details about the Community Library" will show the following description. Image
Show a snackbar once the submission has been created, letting the user undo the submission. Image

Notes:

  • We will be building this new functionality within the TreeViewBase.vue component, which is the one in charge of rendering the channel edit toolbar and related modals.
  • To display this side panel, we should use the SidePanelModal component.
  • The side panel modal component should be created within the contentcuration/frontend/channelEdit/components/sidePanels folder.
  • To display the countries input, we will use our CountryField component.
  • Any invalid/loading state will disable the Submit button.
  • All new strings should be created in the communityChannelsStrings file.

Acceptance criteria

  • A new "share" dropdown button is present in the channel edit toolbar with the described options.
  • The user can create a submission with the new submission side panel with the described validations.
  • A submission received confirmation modal will be shown after the user has successfully created the submission.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions