GithubHelp home page GithubHelp logo

mashal-m / frontend-app-library-authoring Goto Github PK

View Code? Open in Web Editor NEW

This project forked from openedx-unsupported/frontend-app-library-authoring

0.0 0.0 0.0 3.68 MB

Work-in-progress micro-frontend experience for Open edX Blockstore-based content libraries.

License: GNU Affero General Public License v3.0

JavaScript 96.58% Python 1.29% Makefile 0.44% HTML 0.77% SCSS 0.92%

frontend-app-library-authoring's Introduction

Build Status Codecov license

frontend-app-library-authoring

Please tag @edx/fedx-team on any PRs or issues. Thanks.

Introduction

This is the Library Authoring micro-frontend, currently under joint development by edX and OpenCraft under the auspices of BD-14.

It is being built to provide an updated library authoring experience, with improved tools for both randomized content blocks and the ability to directly reference library content blocks in existing courses. This experience is to be powered by the new blockstore storage engine.

Note

A content library is a collection of learning components (XBlocks) designed for re-use in other contexts. Components in a content library can be integrated into a course, used as a problem bank for randomized exams, and/or shown to learners directly for ร  la carte learning.

Tutor Devstack Installation

See the included Tutor plugin's README for the simple steps to use this with a Tutor devstack.

Devstack Installation

Follw these steps to provision, run, and enable an instance of the Library Authoring MFE for local development via the official Open edX devstack.

  1. To start, clone the devstack repository as a child of an arbitrary ~/workspace/ directory.

    mkdir -p ~/workspace/
    cd ~/workspace/
    git clone https://github.com/openedx/devstack.git
    
  2. Configure default services and setup devstack

    Note: If you are planning on running frontend-app-library-authoring locally outside of docker, skip this step to avoid address conflicts.

    Create a devstack/options.local.mk file with the following contents:

    DEFAULT_SERVICES ?= \
    credentials+discovery+ecommerce+edx_notes_api+forum+frontend-app-publisher+frontend-app-gradebook+lms+studio+frontend-app-library-authoring
    

    This adds frontend-app-library-authoring to the list of services the devstack will provision and enable automatically.

    During the devstack setup process, running make dev.clone will automatically clone this repository as a the sibling to the ~/workspace/devstack/ directory.

    Once devstack provisioning is complete, check that this MFE's container is running by executing the following from inside ~/workspace/devstack:

    make dev.ps | grep library-authoring
    

    You should see the container with status "Up", exposing port 3001:

    edx.devstack.frontend-app-library-authoring   docker-entrypoint.sh bash  ...   Up       0.0.0.0:3001->3001/tcp
    
  3. Proceed with the setup of the devstack as described in the README's Getting Started section.

  4. Now set up blockstore for this devstack exactly as described in its README's Using with Docker Devstack section.

    This will setup the blockstore container, configure the LMS and the CMS to accept requests from it (and vice-versa), create a "Devstack Content Collection" in blockstore, and finally create a sample "DeveloperInc" organization in the LMS that can be used to create content.

    There's no need to log in to blockstore in your web browser directly, so feel free to skip the last step.

  5. In a Studio shell, enable the ENABLE_LIBRARY_AUTHORING_MICROFRONTEND feature flag:

    make studio-shell
    vim /edx/etc/studio.yml
    ---
    FEATURES:
        ENABLE_LIBRARY_AUTHORING_MICROFRONTEND: true
    

    Exit the shell and restart Studio so changes take effect:

    make studio-restart
    
  6. On a browser, go to http://localhost:18010/admin/waffle/flag/, log in as an admin (such as the sample user edx) and create a studio.library_authoring_mfe waffle flag, and enabling it for everyone.

    This will make it so that clicking on the Libraries tab in Studio will take you to the Library Authoring MFE as a logged-in user.

    ./docs/images/screenshot_mfe.png
  7. Once at the Library Authoring page, to create a blockstore-based library click on the "New Library" button on the top right-hand corner, filling in Title, Organization, and ID, and making sure to select the "Complex (beta)" type. (In contrast, creating a "Legacy" library would have it backed by modulestore.)

    ./docs/images/screenshot_creating.png
  8. Finally, adding components is done by selecting the desired type under the "Add New Component" heading at the bottom of the list of existing ones. You can edit them by clicking on the corresponding "Edit" button, once they're visible in the list.

    ./docs/images/screenshot_adding_components.png

Project Structure

The source for this project is organized into nested submodules according to the ADR Feature-based Application Organization.

Build Process Notes

Production Build

The production build is created with npm run build.

Internationalization

Please see edx/frontend-platform's i18n module for documentation on internationalization. The documentation explains how to use it, and the How To has more detail.

Known Issues

  • [SE-3989] There is a fatal blockstore integration test failure that is likely triggering search bugs, related to edx/edx-search#104.
  • Some component types, such as text (HTML), videos and CAPA problems, can be added to libraries but cannot be edited using Studio's visual authoring tools. The issue manifests itself as either an error message when clicking the "Edit" tab of such a block (particularly with the HTML block) or malformed rendering (for the video block). This is a limitation of Studio, not this MFE, and work is under way to address the issue accordingly. (It is still possible to edit a block with OLX, however.)
  • The current component editing flow is a direct port of ramshackle with only minor improvements. It is pending an UX audit and internationalization, among other things.
  • Users with view only access are able to see the 'User Access' menu item, despite the fact it will just kick them back to the detail view.
  • The library isn't always updated between when it is changed in the edit view/create view and when you return to the authoring view. So sometimes you may need to refresh after changing a library to get the right authoring view.
  • The in-library search box loses focus after each letter is typed.
  • Styling needs love: to speed up development, we we originally relied on the old edX theme as provided by Paragon to match Studio's look. That was removed on [email protected], so many components are now visually broken. We need to go back to the (literal, in this case) drawing board.
  • We should take frontend-app-learning's lead as far as test tooling is concerned (remove enzyme, use axios-mock-adapter, etc). This should help avoid the handful of non-fatal console errors that appear when running tests.
  • Test coverage can, and should, be improved.

Development Roadmap

The following is a list of current short-term development targets, in (rough) descending order of priority:

  • [Studio enhancement] Implement embeddable visual editors for the HTML, video, and problem blocks
  • [Studio enhancement] An improved "source from library" workflow that will let course authors include library content in existing courseware.
  • [MFE enhancement] Iteration and refinement of the library authoring/publishing flow.
  • [MFE bugfix] Fixing the Known Issues that are not explicitly listed in this Roadmap.

frontend-app-library-authoring's People

Contributors

edx-requirements-bot avatar dependabot[bot] avatar kelketek avatar kdmccormick avatar ihor-romaniuk avatar uvgengen avatar bradenmacdonald avatar feanil avatar gabor-boros avatar jawayria avatar sarina avatar abdullahwaheed avatar nedbat avatar jristau1984 avatar brian-smith-tcril avatar bilalqamar95 avatar arbrandes avatar adamstankiewicz avatar girish946 avatar mamankhan99 avatar mashal-m avatar timmc-edx avatar usamasadiq avatar connorhaugh avatar kenclary avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.