Merge branch 'master' into rpenido/fal-4291/course-outline-sidebar-and-navbar

Author: rpenido

docs/how_tos/override-external-urls.rst

@@ -0,0 +1,80 @@
+Override External URLs
+======================
+
+What is getExternalLinkUrl?
+---------------------------
+
+The `getExternalLinkUrl` function is a utility from `@edx/frontend-platform` that allows for centralized management of external URLs. It enables the override of external links through configuration, making it possible to customize external references without modifying the source code directly.
+
+URLs wrapped with getExternalLinkUrl
+------------------------------------
+Use cases:
+
+1. **Accessibility Page** (`src/accessibility-page/AccessibilityPage.jsx`)
+   - `COMMUNITY_ACCESSIBILITY_LINK` - Points to community accessibility resources: https://www.edx.org/accessibility
+
+2. **Course Outline** (if applicable)
+   - Documentation links
+   - Help resources
+
+3. **Other pages** (search for `getExternalLinkUrl` usage across the codebase)
+   - Help documentation
+   - External tool integrations
+
+Following external URLs are wrapped with `getExternalLinkUrl` in the authoring application:
+
+- 'https://www.edx.org/accessibility'
+- 'https://docs.openedx.org/en/latest/educators/concepts/exercise_tools/about_multi_select.html'
+- 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/exercise_tools/add_multi_select.html'
+- 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/exercise_tools/add_dropdown.html'
+- 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/exercise_tools/manage_numerical_input_problem.html'
+- 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/exercise_tools/add_text_input.html'
+- 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/social_sharing.html'
+- 'https://docs.openedx.org/en/latest/educators/references/course_development/exercise_tools/guide_problem_types.html#advanced-problem-types'
+- 'https://docs.openedx.org/en/latest/educators/references/course_development/parent_child_components.html'
+- 'https://openai.com/api-data-privacy'
+- 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/create_new_library.html'
+- 'https://bigbluebutton.org/privacy-policy/'
+- 'https://creativecommons.org/about'
+
+Note: as new external URLs are added to the codebase, more URLs will be wrapped with `getExternalLinkUrl` and this list may not always be up to date.
+
+How to Override External URLs
+-----------------------------
+
+To override external URLs, you can use the frontend platform's configuration system.
+This object should be added to the config object defined in the env.config.[js,jsx,ts,tsx], and must be named externalLinkUrlOverrides.
+
+1. **Environment Configuration**
+   Add the URL overrides to your environment configuration:
+
+   .. code-block:: javascript
+
+      const config = {
+        // Other config options...
+        externalLinkUrlOverrides: {
+          'https://www.edx.org/accessibility': 'https://your-custom-domain.com/accessibility',
+          // Add other URL overrides here
+        }
+      };
+
+Examples
+--------
+
+**Original URL:** Default community accessibility link
+**Override:** Your institution's accessibility policy page
+
+.. code-block:: javascript
+
+   // In your app configuration
+   getExternalLinkUrl('https://www.edx.org/accessibility')
+   // Returns: 'https://your-custom-domain.com/accessibility'
+   // Instead of the default Open edX community link
+
+Benefits
+--------
+
+- **Customization**: Institutions can point to their own resources
+- **Maintainability**: URLs can be changed without code modifications  
+- **Consistency**: Centralized URL management across the application
+- **Flexibility**: Different environments can have different external links

package-lock.json

@@ -63,7 +63,7 @@
     "@openedx/frontend-plugin-framework": "^1.7.0",
     "@openedx/paragon": "^23.5.0",
     "@redux-devtools/extension": "^3.3.0",
-    "@reduxjs/toolkit": "2.11.1",
+    "@reduxjs/toolkit": "2.11.2",
     "@tanstack/react-query": "5.90.12",
     "@tinymce/tinymce-react": "^6.0.0",
     "classnames": "2.5.1",

package.json

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { getConfig } from '@edx/frontend-platform';
+import { getConfig, getExternalLinkUrl } from '@edx/frontend-platform';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Form, Hyperlink } from '@openedx/paragon';
 import PropTypes from 'prop-types';
@@ -93,7 +93,7 @@ const BbbSettings = ({
               <span data-testid="free-plan-message">
                 {intl.formatMessage(messages.freePlanMessage)}
                 <Hyperlink
-                  destination="https://bigbluebutton.org/privacy-policy/"
+                  destination={getExternalLinkUrl('https://bigbluebutton.org/privacy-policy/')}
                   target="_blank"
                   rel="noopener noreferrer"
                   showLaunchIcon

plugins/course-apps/live/BBBSettings.jsx

@@ -1,4 +1,5 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { getExternalLinkUrl } from '@edx/frontend-platform';
 import {
   ActionRow,
   Alert,
@@ -276,7 +277,7 @@ const SettingsModal = ({
     <div className="py-1">
       <Hyperlink
         className="text-primary-500"
-        destination="https://openai.com/api-data-privacy"
+        destination={getExternalLinkUrl('https://openai.com/api-data-privacy')}
         target="_blank"
         rel="noreferrer noopener"
       >

plugins/course-apps/xpert_unit_summary/settings-modal/SettingsModal.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { getExternalLinkUrl } from '@edx/frontend-platform';
 import { Helmet } from 'react-helmet';
 import { Container } from '@openedx/paragon';
 import { StudioFooterSlot } from '@edx/frontend-component-footer';
@@ -23,9 +24,12 @@ const AccessibilityPage = () => {
         </title>
       </Helmet>
       <Header isHiddenMainMenu />
-      <Container size="xl" classNamae="px-4">
+      <Container size="xl" className="px-4">
         <AccessibilityBody
-          {...{ email: ACCESSIBILITY_EMAIL, communityAccessibilityLink: COMMUNITY_ACCESSIBILITY_LINK }}
+          {...{
+            email: ACCESSIBILITY_EMAIL,
+            communityAccessibilityLink: getExternalLinkUrl(COMMUNITY_ACCESSIBILITY_LINK),
+          }}
         />
         <AccessibilityForm accessibilityEmail={ACCESSIBILITY_EMAIL} />
       </Container>

src/accessibility-page/AccessibilityPage.jsx

@@ -2191,7 +2191,7 @@ describe('<CourseUnit />', () => {
 
       const currentSectionName = courseSectionVerticalMock.xblock_info.ancestor_info.ancestors[1].display_name;
       const currentSubSectionName = courseSectionVerticalMock.xblock_info.ancestor_info.ancestors[1].display_name;
-      const helpLinkUrl = 'https://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_components.html#components-that-contain-other-components';
+      const helpLinkUrl = 'https://docs.openedx.org/en/latest/educators/references/course_development/parent_child_components.html';
 
       await waitFor(() => {
         const unitHeaderTitle = screen.getByTestId('unit-header-title');

src/course-unit/CourseUnit.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Card, Hyperlink, Stack } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { getExternalLinkUrl } from '@edx/frontend-platform';
 
 import messages from './messages';
 
@@ -44,7 +45,7 @@ const SplitTestSidebarInfo = () => {
         <hr className="course-split-test-sidebar-devider my-4" />
         <Hyperlink
           showLaunchIcon={false}
-          destination="https://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_components.html#components-that-contain-other-components"
+          destination={getExternalLinkUrl('https://docs.openedx.org/en/latest/educators/references/course_development/parent_child_components.html')}
           className="btn btn-outline-primary btn-sm"
           target="_blank"
         >

src/course-unit/sidebar/SplitTestSidebarInfo.tsx

@@ -19,6 +19,7 @@ import * as hooks from './hooks';
 import { ProblemTypeKeys } from '../../../../../data/constants/problem';
 import ExpandableTextArea from '../../../../../sharedComponents/ExpandableTextArea';
 import { answerRangeFormatRegex } from '../../../data/OLXParser';
+import { useValidateInputBlock } from '../../../data/apiHooks';
 
 const AnswerOption = ({
   answer,
@@ -32,7 +33,6 @@ const AnswerOption = ({
   const isLibrary = useSelector(selectors.app.isLibrary);
   const learningContextId = useSelector(selectors.app.learningContextId);
   const blockId = useSelector(selectors.app.blockId);
-
   const removeAnswer = hooks.removeAnswer({ answer, dispatch });
   const setAnswer = hooks.setAnswer({ answer, hasSingleAnswer, dispatch });
   const setAnswerTitle = hooks.setAnswerTitle({
@@ -44,6 +44,7 @@ const AnswerOption = ({
   const setSelectedFeedback = hooks.setSelectedFeedback({ answer, hasSingleAnswer, dispatch });
   const setUnselectedFeedback = hooks.setUnselectedFeedback({ answer, hasSingleAnswer, dispatch });
   const { isFeedbackVisible, toggleFeedback } = hooks.useFeedback(answer);
+  const { data = { isValid: true }, mutate } = useValidateInputBlock();
 
   const staticRootUrl = isLibrary
     ? `${getConfig().STUDIO_BASE_URL}/library_assets/blocks/${blockId}/`
@@ -69,17 +70,31 @@ const AnswerOption = ({
         />
       );
     }
+
     if (problemType !== ProblemTypeKeys.NUMERIC || !answer.isAnswerRange) {
       return (
-        <Form.Control
-          as="textarea"
-          className="answer-option-textarea text-gray-500 small"
-          autoResize
-          rows={1}
-          value={answer.title}
-          onChange={setAnswerTitle}
-          placeholder={intl.formatMessage(messages.answerTextboxPlaceholder)}
-        />
+        <Form.Group isInvalid={!data?.isValid ?? true}>
+          <Form.Control
+            as="textarea"
+            className="answer-option-textarea text-gray-500 small"
+            autoResize
+            rows={1}
+            value={answer.title}
+            onChange={(e) => {
+              setAnswerTitle(e);
+              if (problemType === ProblemTypeKeys.NUMERIC) {
+                mutate(e.target.value);
+              }
+            }}
+            placeholder={intl.formatMessage(messages.answerTextboxPlaceholder)}
+
+          />
+          {(!data?.isValid ?? true) && (
+          <Form.Control.Feedback type="invalid">
+            <FormattedMessage {...messages.answerNumericErrorText} />
+          </Form.Control.Feedback>
+          )}
+        </Form.Group>
       );
     }
     // Return Answer Range View

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx

@@ -3,6 +3,7 @@ import { render, screen, initializeMocks } from '@src/testUtils';
 import { selectors } from '@src/editors/data/redux';
 import AnswerOption from './AnswerOption';
 import * as hooks from './hooks';
+import * as reactQueryHooks from '../../../data/apiHooks';
 
 const { problem } = selectors;
 
@@ -101,4 +102,16 @@ describe('AnswerOption', () => {
     expect(screen.getByText(answerRange.title)).toBeInTheDocument();
     expect(screen.getByRole('textbox')).toBeInTheDocument();
   });
+
+  test('shows numeric error feedback when data.isValid is false', () => {
+    // Mock useValidateInputBlock to simulate invalid state
+    // @ts-ignore-next-line
+    jest.spyOn(reactQueryHooks, 'useValidateInputBlock').mockReturnValue({ data: { isValid: false } });
+    jest.spyOn(problem, 'problemType').mockReturnValue('numericalresponse');
+    const myProps = { ...props, answer: { ...answerWithOnlyFeedback, isAnswerRange: false } };
+    render(<AnswerOption {...myProps} />);
+    expect(
+      screen.getByText('Error: This input type only supports numeric answers. Did you mean to make a Text input or Math expression input problem?'),
+    ).toBeInTheDocument();
+  });
 });