@edx/frontend-component-ai-translations-edx v1.7.1

frontend-component-ai-translations-edx

AI Translations UI components

Getting Started

• Clone repo into the src folder in edx directory locally
• Make sure you are running node 18 and run npm install
• Follow the readme to set course authoring app locally https://github.com/openedx/frontend-app-course-authoring(this should also include lms+cms). The comment in https://2u-internal.atlassian.net/browse/NOVA-89?focusedCommentId=738274 can also be used as a supplement.
• Right now, we don't have our package in the cloud/npm(this is a work in progress). To install frontend-component-ai-translations-edx in the course-authoring app, you need to make use of npm link.
  • Run npm link in the frontend-component-ai-translations-edx directory and run npm link @edx/frontend-component-ai-translations-edx in the frontend-app-course-authoring directory. This should install the @edx/frontend-component-ai-translations-edx package into node_modules.
  • To use the exported app component, you could import and add it around here https://github.com/openedx/frontend-app-course-authoring/blob/master/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx#L109. Although, there is work been done to achieve that.

• In the course authoring app, follow the guide to use your local verison of frontend-component-ai-translations-edx. The module.config.js in the frontend-app-course-authoring repo will be: ` module.exports = { /* Modules you want to use from local source code. Adding a module here means that when this app runs its build, it'll resolve the source from peer directories of this app.

  moduleName: the name you use to import code from the module.
  dir: The relative path to the module's source code.
  dist: The sub-directory of the source code where it puts its build artifact.  Often "dist".
  
  To use a module config:
  
  1. Copy module.config.js.example and remove the '.example' extension
  2. Uncomment modules below in the localModules array to load them from local source code.
  3. Remember to re-build the production builds of those local modules if they have one.
      See note below.
  */
  localModules: [
      /*********************************************************************************************
      IMPORTANT NOTE: If any of the below packages (like paragon or frontend-platform) have a build
      step that populates their 'dist' directories, you must manually run that step.  For paragon
      and frontend-platform, for instance, you need to run `npm run build` in the repo before
      module.config.js will work.
      **********************************************************************************************/
  
      // { moduleName: '@edx/brand', dir: '../brand-openedx' }, // replace with your brand checkout
      // { moduleName: '@edx/paragon/scss/core', dir: '../paragon', dist: 'scss/core' },
      // { moduleName: '@edx/paragon/icons', dir: '../paragon', dist: 'icons' },
      // { moduleName: '@edx/paragon', dir: '../paragon', dist: 'dist' },
      // { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'dist' },
      // NOTE: This is the relative path of the frontend-component-ai-translations-edx in the frontend-app-course-authoring container.
      { moduleName: '@edx/frontend-component-ai-translations-edx', dir: '../src/frontend-component-ai-translations-edx', dist: 'dist' },
  ],
  };

  `

Getting Started with Devstack

To use this feature fully in Devstack requires a number of different dependancies.

• Devstack running the correct set of containers
  • Run make dev.up.cms+lms+frontend-app-course-authoring in your devstack directory
• Correct set of waffle flags to enable the MFE component in the CMS/Studio videos page
  • see full guide
• Local video pipeline configuration
  • see full guide
• (optional) The ai-translations IDA running locally

In the course authoring app, follow the guide to use your local verison of frontend-lib-content-components. The module.config.js in the frontend-app-course-authoring repo will be:

module.exports = {
    /*
    Modules you want to use from local source code.  Adding a module here means that when this app
    runs its build, it'll resolve the source from peer directories of this app.

    moduleName: the name you use to import code from the module.
    dir: The relative path to the module's source code.
    dist: The sub-directory of the source code where it puts its build artifact.  Often "dist".

    To use a module config:

    1. Copy module.config.js.example and remove the '.example' extension
    2. Uncomment modules below in the localModules array to load them from local source code.
    3. Remember to re-build the production builds of those local modules if they have one.
        See note below.
    */
    localModules: [
        /*********************************************************************************************
        IMPORTANT NOTE: If any of the below packages (like paragon or frontend-platform) have a build
        step that populates their 'dist' directories, you must manually run that step.  For paragon
        and frontend-platform, for instance, you need to run `npm run build` in the repo before
        module.config.js will work.
        **********************************************************************************************/

        // { moduleName: '@edx/brand', dir: '../brand-openedx' }, // replace with your brand checkout
        // { moduleName: '@edx/paragon/scss/core', dir: '../paragon', dist: 'scss/core' },
        // { moduleName: '@edx/paragon/icons', dir: '../paragon', dist: 'icons' },
        // { moduleName: '@edx/paragon', dir: '../paragon', dist: 'dist' },
        // { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'dist' },
        // NOTE: This is the relative path of the frontend-component-ai-translations-edx in the frontend-app-course-authoring container.
        { moduleName: '@edx/frontend-component-ai-translations', dir: '../src/frontend-component-ai-translations-edx', dist: 'dist' },
    ],
};

Testing Package

We have had to handle issues where the published NPM package is not working but this repo, when configure in Devstack, works. This issue is related to the dependancies and combine with the Course-Authoring-MFE can break things.

To test the package locally the npm pack command can be used.