diff --git a/.env b/.env index 33da6f0904..661e68023d 100644 --- a/.env +++ b/.env @@ -28,6 +28,7 @@ ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN='' ENABLE_POST_REGISTRATION_RECOMMENDATIONS='' MARKETING_EMAILS_OPT_IN='' SHOW_CONFIGURABLE_EDX_FIELDS='' +ENABLE_IMAGE_LAYOUT='' # ***** Zendesk related keys ***** ZENDESK_KEY='' ZENDESK_LOGO_URL='' diff --git a/README.rst b/README.rst index 20f8d50c10..f69126247f 100644 --- a/README.rst +++ b/README.rst @@ -115,6 +115,10 @@ The authentication micro-frontend also requires the following additional variabl - Name of MFE, this will be used by the API to get runtime configurations for the specific micro frontend. For a frontend repo `frontend-app-appName`, use `appName` as APP_ID. - ``authn`` | ``''`` + * - ``ENABLE_IMAGE_LAYOUT`` + - Enables the image layout feature within the authn. When set to True, this feature allows the inclusion of images in the base container layout. For more details on configuring this feature, please refer to the `Modifying base container `_. + - ``true`` | ``''`` (empty strings are falsy) + edX-specific Environment Variables ================================== diff --git a/docs/how_tos/modifying_base_container.rst b/docs/how_tos/modifying_base_container.rst new file mode 100644 index 0000000000..cb6e851d9b --- /dev/null +++ b/docs/how_tos/modifying_base_container.rst @@ -0,0 +1,39 @@ +======================================== +Modifying the Base Container in Authn +======================================== + +The base container in Authn serves as the fundamental layout structure for rendering different components based on configurations. This document outlines the process for modifying the base container to accommodate changes or customize layouts as needed. + +Understanding Base Container Versions +-------------------------------------- + +The base container supports two main versions: + +- **Default Layout:** The default layout is the standard layout used when specific configurations do not dictate otherwise. +.. image:: ../images/default_layout.png +- **Image Layout:** The image layout is an alternative layout option that can be enabled based on configurations. +.. image:: ../images/image_layout.png + +Enabling the Image Layout +--------------------------- + +To activate the image layout feature, navigate to your .env file and update the configurations: + +**Update Configuration** + +Locate the ``ENABLE_IMAGE_LAYOUT`` parameter and set its value to ``true``. Additionally, ensure that the Image configuration settings are provided. Your overall configurations should resemble the following: + + + .. code-block:: + + # ***** Image Layout Configuration ***** + ENABLE_IMAGE_LAYOUT = True # Set to True to enable image layout feature + + # ***** Base Container Images ***** + BANNER_IMAGE_LARGE='' # Path to the large banner image + BANNER_IMAGE_MEDIUM='' # Path to the medium-sized banner image + BANNER_IMAGE_SMALL='' # Path to the small banner image + BANNER_IMAGE_EXTRA_SMALL='' # Path to the extra-small banner image + + +This allows for the customization and adaptation of the base container layout according to specific requirements. \ No newline at end of file diff --git a/docs/images/default_layout.png b/docs/images/default_layout.png new file mode 100644 index 0000000000..480e408082 Binary files /dev/null and b/docs/images/default_layout.png differ diff --git a/docs/images/image_layout.png b/docs/images/image_layout.png new file mode 100644 index 0000000000..c424d2d08c Binary files /dev/null and b/docs/images/image_layout.png differ diff --git a/src/base-container/index.jsx b/src/base-container/index.jsx index 4351dd87cb..cb5ee084af 100644 --- a/src/base-container/index.jsx +++ b/src/base-container/index.jsx @@ -1,5 +1,6 @@ import React, { useEffect, useState } from 'react'; +import { getConfig } from '@edx/frontend-platform'; import { breakpoints } from '@openedx/paragon'; import classNames from 'classnames'; import PropTypes from 'prop-types'; @@ -14,6 +15,7 @@ import { DEFAULT_LAYOUT, IMAGE_LAYOUT } from './data/constants'; const BaseContainer = ({ children, showWelcomeBanner, username }) => { const [baseContainerVersion, setBaseContainerVersion] = useState(DEFAULT_LAYOUT); + const enableImageLayout = getConfig().ENABLE_IMAGE_LAYOUT; useEffect(() => { const initRebrandExperiment = () => { @@ -30,7 +32,7 @@ const BaseContainer = ({ children, showWelcomeBanner, username }) => { initRebrandExperiment(); }, []); - if (baseContainerVersion === IMAGE_LAYOUT) { + if (baseContainerVersion === IMAGE_LAYOUT || enableImageLayout) { return (
diff --git a/src/base-container/tests/BaseContainer.test.jsx b/src/base-container/tests/BaseContainer.test.jsx index b00826f91e..293bc07bcc 100644 --- a/src/base-container/tests/BaseContainer.test.jsx +++ b/src/base-container/tests/BaseContainer.test.jsx @@ -1,5 +1,6 @@ import React from 'react'; +import { mergeConfig } from '@edx/frontend-platform'; import { IntlProvider } from '@edx/frontend-platform/i18n'; import { render } from '@testing-library/react'; import { Context as ResponsiveContext } from 'react-responsive'; @@ -40,4 +41,19 @@ describe('Base component tests', () => { expect(container.querySelector('.banner__image')).toBeDefined(); }); + + it('renders Image layout when ENABLE_IMAGE_LAYOUT configuration is enabled', () => { + mergeConfig({ + ENABLE_IMAGE_LAYOUT: true, + }); + + const { container } = render( + + + , + LargeScreen, + ); + + expect(container.querySelector('.banner__image')).toBeDefined(); + }); }); diff --git a/src/config/index.js b/src/config/index.js index 73560c5dcf..fa3613aa88 100644 --- a/src/config/index.js +++ b/src/config/index.js @@ -10,6 +10,7 @@ const configuration = { MARKETING_EMAILS_OPT_IN: process.env.MARKETING_EMAILS_OPT_IN || '', SHOW_CONFIGURABLE_EDX_FIELDS: process.env.SHOW_CONFIGURABLE_EDX_FIELDS || false, SHOW_REGISTRATION_LINKS: process.env.SHOW_REGISTRATION_LINKS !== 'false', + ENABLE_IMAGE_LAYOUT: process.env.ENABLE_IMAGE_LAYOUT || false, // Links ACTIVATION_EMAIL_SUPPORT_LINK: process.env.ACTIVATION_EMAIL_SUPPORT_LINK || null, AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: process.env.AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK || null,