Initial implementation of the accordion XBlock

.github/workflows/ci-frontend.yml

@@ -0,0 +1,36 @@
+name: Frontend CI
+
+on:
+  push:
+    branches:
+    - main
+  pull_request:
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./frontend
+    strategy:
+      matrix:
+        npm_script:
+        - lint
+        - coverage
+        - check-build
+    steps:
+    - uses: actions/checkout@v4
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+    - uses: actions/setup-node@v4
+      with:
+        node-version: ${{ env.NODE_VER }}
+    - run: npm ci
+    - run: npm run ${{ matrix.npm_script }}
+    - name: upload coverage
+      uses: codecov/codecov-action@v4
+      if: matrix.npm_script == 'coverage'
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: false
+        flags: frontend

.github/workflows/ci.yml

@@ -15,15 +15,17 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-20.04]
-        python-version: ['3.8']
-        toxenv: [quality, docs, django32, django40]
+        toxenv: [quality, docs, py38-django32, py311-django42, py312-django42]
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: setup python
-      uses: actions/setup-python@v2
+      uses: actions/setup-python@v5
       with:
-        python-version: ${{ matrix.python-version }}
+        python-version: |
+          3.8
+          3.11
+          3.12
 
     - name: Install pip
       run: pip install -r requirements/pip.txt
@@ -37,9 +39,9 @@ jobs:
       run: tox
 
     - name: Run coverage
-      if: matrix.python-version == '3.8' && matrix.toxenv == 'django32'
+      if: matrix.toxenv == 'py38-django32'
       uses: codecov/codecov-action@v4
       with:
         token: ${{ secrets.CODECOV_TOKEN }}
-        flags: unittests
-        fail_ci_if_error: true
+        flags: python
+        fail_ci_if_error: false

.gitignore

@@ -31,6 +31,7 @@ pip-log.txt
 .tox
 coverage.xml
 htmlcov/
+coverage/
 
 # Virtual environments
 /venv/

Dockerfile

@@ -2,7 +2,7 @@ FROM openedx/xblock-sdk
 RUN mkdir -p /usr/local/src/xblock-accordion
 VOLUME ["/usr/local/src/xblock-accordion"]
 RUN apt-get update && apt-get install -y gettext
-RUN echo "pip install -r /usr/local/src/xblock-accordion/requirements.txt" >> /usr/local/src/xblock-sdk/install_and_run_xblock.sh
+RUN echo "pip install -r /usr/local/src/xblock-accordion/requirements/dev.txt" >> /usr/local/src/xblock-sdk/install_and_run_xblock.sh
 RUN echo "pip install -e /usr/local/src/xblock-accordion" >> /usr/local/src/xblock-sdk/install_and_run_xblock.sh
 RUN echo "cd /usr/local/src/xblock-accordion && make compile_translations && cd /usr/local/src/xblock-sdk" >> /usr/local/src/xblock-sdk/install_and_run_xblock.sh
 RUN echo "exec python /usr/local/src/xblock-sdk/manage.py \"\$@\"" >> /usr/local/src/xblock-sdk/install_and_run_xblock.sh

Makefile

@@ -49,7 +49,7 @@ dev.build:
 	docker build -t $(REPO_NAME)-dev $(CURDIR)
 
 dev.run: dev.clean dev.build ## Clean, build and run test image
-	docker run -p 8000:8000 -v $(CURDIR):/usr/local/src/$(REPO_NAME) --name $(REPO_NAME)-dev $(REPO_NAME)-dev
+	docker run -p 8200:8000 -v $(CURDIR):/usr/local/src/$(REPO_NAME) --name $(REPO_NAME)-dev $(REPO_NAME)-dev
 
 ## Localization targets
 

README.rst

@@ -10,142 +10,31 @@ This XBlock comes with a Docker test environment ready to build, based on the xb
 
 The XBlock SDK Workbench, including this XBlock, will be available on the list of XBlocks at http://localhost:8000
 
-Translating
-*************
-
-Internationalization (i18n) is when a program is made aware of multiple languages.
-Localization (l10n) is adapting a program to local language and cultural habits.
-
-Use the locale directory to provide internationalized strings for your XBlock project.
-For more information on how to enable translations, visit the
-`Open edX XBlock tutorial on Internationalization <https://edx.readthedocs.org/projects/xblock-tutorial/en/latest/edx_platform/edx_lms.html>`_.
-
-This cookiecutter template uses `django-statici18n <https://django-statici18n.readthedocs.io/en/latest/>`_
-to provide translations to static javascript using ``gettext``.
-
-The included Makefile contains targets for extracting, compiling and validating translatable strings.
-The general steps to provide multilingual messages for a Python program (or an XBlock) are:
-
-1. Mark translatable strings.
-2. Run i18n tools to create raw message catalogs.
-3. Create language specific translations for each message in the catalogs.
-4. Use ``gettext`` to translate strings.
-
-1. Mark translatable strings
-=============================
-
-Mark translatable strings in python::
-
-
-    from django.utils.translation import ugettext as _
-
-    # Translators: This comment will appear in the `.po` file.
-    message = _("This will be marked.")
-
-See `edx-developer-guide <https://edx.readthedocs.io/projects/edx-developer-guide/en/latest/internationalization/i18n.html#python-source-code>`__
-for more information.
-
-You can also use ``gettext`` to mark strings in javascript::
-
-
-    // Translators: This comment will appear in the `.po` file.
-    var message = gettext("Custom message.");
-
-See `edx-developer-guide <https://edx.readthedocs.io/projects/edx-developer-guide/en/latest/internationalization/i18n.html#javascript-files>`__
-for more information.
-
-2. Run i18n tools to create Raw message catalogs
-=================================================
-
-This cookiecutter template offers multiple make targets which are shortcuts to
-use `edx-i18n-tools <https://github.com/openedx/i18n-tools>`_.
-
-After marking strings as translatable we have to create the raw message catalogs.
-These catalogs are created in ``.po`` files. For more information see
-`GNU PO file documentation <https://www.gnu.org/software/gettext/manual/html_node/PO-Files.html>`_.
-These catalogs can be created by running::
-
-
-    $ make extract_translations
-
-The previous command will create the necessary ``.po`` files under
-``xblock-accordion/accordion/conf/locale/en/LC_MESSAGES/text.po``.
-The ``text.po`` file is created from the ``django-partial.po`` file created by
-``django-admin makemessages`` (`makemessages documentation <https://docs.djangoproject.com/en/3.2/topics/i18n/translation/#message-files>`_),
-this is why you will not see a ``django-partial.po`` file.
-
-3. Create language specific translations
-==============================================
-
-3.1 Add translated strings
----------------------------
-
-After creating the raw message catalogs, all translations should be filled out by the translator.
-One or more translators must edit the entries created in the message catalog, i.e. the ``.po`` file(s).
-The format of each entry is as follows::
-
-    #  translator-comments
-    A. extracted-comments
-    #: reference…
-    #, flag…
-    #| msgid previous-untranslated-string
-    msgid 'untranslated message'
-    msgstr 'mensaje traducido (translated message)'
-
-For more information see
-`GNU PO file documentation <https://www.gnu.org/software/gettext/manual/html_node/PO-Files.html>`_.
-
-To use translations from transifex use the follow Make target to pull translations::
-
-    $ make pull_translations
-
-See `config instructions <https://github.com/openedx/i18n-tools#transifex-commands>`_ for information on how to set up your
-transifex credentials.
-
-See `transifex documentation <https://docs.transifex.com/integrations/django>`_ for more details about integrating
-django with transiflex.
-
-3.2 Compile translations
--------------------------
-
-Once translations are in place, use the following Make target to compile the translation catalogs ``.po`` into
-``.mo`` message files::
-
-    $ make compile_translations
-
-The previous command will compile ``.po`` files using
-``django-admin compilemessages`` (`compilemessages documentation <https://docs.djangoproject.com/en/3.2/topics/i18n/translation/#compiling-message-files>`_).
-After compiling the ``.po`` file(s), ``django-statici18n`` is used to create language specific catalogs. See
-``django-statici18n`` `documentation <https://django-statici18n.readthedocs.io/en/latest/>`_ for more information.
-
-To upload translations to transiflex use the follow Make target::
-
-    $ make push_translations
-
-See `config instructions <https://github.com/openedx/i18n-tools#transifex-commands>`_ for information on how to set up your
-transifex credentials.
+Testing frontend
+****************
 
-See `transifex documentation <https://docs.transifex.com/integrations/django>`_ for more details about integrating
-django with transiflex.
+The frontend code in the XBlock can be tested without the backend running for quicker iteration on the UI.
+To do this, just run ``npm run dev`` in the `frontend` folder. This will start a dev server with just the
+frontend component. You can open the URL in the terminal and browse to the student or studio components.
 
- **Note:** The ``dev.run`` make target will automatically compile any translations.
+Installation
+************
 
- **Note:** To check if the source translation files (``.po``) are up-to-date run::
+You can install the XBlock with the following command:
 
-     $ make detect_changed_source_translations
+.. code-block:: bash
 
-4. Use ``gettext`` to translate strings
-========================================
+    pip install xblock-accordion@git+https://github.com/open-craft/xblock-accordion.git
 
-Django will automatically use ``gettext`` and the compiled translations to translate strings.
+If using tutor, you can add `xblock-accordion@git+https://github.com/open-craft/xblock-accordion.git` to
+`OPENEDX_EXTRA_PIP_REQUIREMENTS` to have the xblock installed on deployment.
 
-Troubleshooting
-****************
 
-If there are any errors compiling ``.po`` files run the following command to validate your ``.po`` files::
+Usage
+*****
 
-    $ make validate
+To use the XBlock in a course, you need to ensure that you have "accordion" in the
+**Advanced Modules List** in the Advanced settings page of the course.
 
-See `django's i18n troubleshooting documentation
-<https://docs.djangoproject.com/en/3.2/topics/i18n/translation/#troubleshooting-gettext-incorrectly-detects-python-format-in-strings-with-percent-signs>`_
-for more information.
+Once added there you will be able to add an Accordion block from the **Advanced Modules**
+section of blocks.

accordion/__init__.py

@@ -4,4 +4,4 @@
 
 from .accordion import AccordionXBlock
 
-__version__ = '0.1.0'
+__version__ = "1.0.0"