🐛(frontend) use feature flags for LTI video/webinar buttons

wilbrdt · wilbrdt · commit 50b0ecca7435 · 2025-06-12T12:10:53.000+02:00
The existing feature flags were not used when displaying buttons for creating a
new Marsha video or webinar. Adding them.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Fixed
 
+- Use feature flags to control visibility of LTI video/webinar buttons
 - Fix storage location field for existing files stored on AWS S3:
   - markdown images
   - deposited files
diff --git a/src/backend/marsha/e2e/test_lti.py b/src/backend/marsha/e2e/test_lti.py
@@ -99,7 +99,7 @@ def _preview_video(live_server, page, video_uploaded=False):
     page.click('#lti_resource_page input[type="submit"]')
 
     if not video_uploaded:
-        page.wait_for_selector("text=What are you willing to do ?")
+        page.wait_for_selector("text=What would you like to do?")
     return page, video
 
 
@@ -716,7 +716,7 @@ def test_lti_nav_video(page: Page, live_server: LiveServer):
     """
     page, _ = _preview_video(live_server, page, video_uploaded=True)
 
-    page.wait_for_selector("text=What are you willing to do ?", state="detached")
+    page.wait_for_selector("text=What would you like to do?", state="detached")
     assert page.is_enabled('button:has-text("Play Video")')
 
 
@@ -730,7 +730,7 @@ def test_lti_nav_no_video(page: Page, live_server: LiveServer):
     """
     page, _ = _preview_video(live_server, page)
 
-    page.wait_for_selector("text=What are you willing to do ?")
+    page.wait_for_selector("text=What would you like to do?")
     page.wait_for_selector("text=Preview", state="detached")
 
 
diff --git a/src/frontend/apps/lti_site/components/LTIRoutes/index.spec.tsx b/src/frontend/apps/lti_site/components/LTIRoutes/index.spec.tsx
@@ -6,6 +6,7 @@ import {
   uploadState,
   useAppConfig,
   useCurrentResourceContext,
+  useFlags,
 } from 'lib-components';
 import {
   ltiInstructorTokenMockFactory,
@@ -70,6 +71,14 @@ jest.mock('components/SelectContent', () => ({
 
 jest.setTimeout(15000);
 
+useFlags.getState().setFlags({
+  video: true,
+  document: true,
+  webinar: true,
+  classroom: true,
+  deposit: true,
+});
+
 describe('<LTIRoutes />', () => {
   beforeEach(() => {
     mockedUseAppConfig.mockReturnValue({
diff --git a/src/frontend/apps/lti_site/components/VideoWizard/index.spec.tsx b/src/frontend/apps/lti_site/components/VideoWizard/index.spec.tsx
@@ -6,6 +6,7 @@ import {
   builderDashboardRoute,
   liveState,
   modelName,
+  useFlags,
 } from 'lib-components';
 import { videoMockFactory } from 'lib-components/tests';
 import { render } from 'lib-tests';
@@ -34,6 +35,14 @@ jest.mock('lib-components', () => ({
   }),
 }));
 
+useFlags.getState().setFlags({
+  video: true,
+  document: true,
+  webinar: true,
+  classroom: true,
+  deposit: true,
+});
+
 describe('<VideoWizard />', () => {
   beforeEach(() => {
     jest.resetAllMocks();
@@ -60,9 +69,9 @@ describe('<VideoWizard />', () => {
     });
 
     await screen.findByText(
-      'You can choose between creating a video and uploading one, or creating a live, that you will be able to schedule if needed.',
+      'You can choose how you want to share your content using the options below.',
     );
-    screen.getByText('What are you willing to do ?');
+    screen.getByText('What would you like to do?');
     const createVODButton = screen.getByRole('button', {
       name: 'Create a video',
     });
@@ -102,9 +111,9 @@ describe('<VideoWizard />', () => {
     });
 
     await screen.findByText(
-      'You can choose between creating a video and uploading one, or creating a live, that you will be able to schedule if needed.',
+      'You can choose how you want to share your content using the options below.',
     );
-    screen.getByText('What are you willing to do ?');
+    screen.getByText('What would you like to do?');
     screen.getByRole('button', { name: 'Create a video' });
     const configureLiveButton = screen.getByRole('button', {
       name: 'Start a live',
@@ -114,4 +123,33 @@ describe('<VideoWizard />', () => {
 
     expect(await screen.findByText('live dashboard')).toBeInTheDocument();
   });
+  it('renders VideoWizard with the CreateVODButton only', async () => {
+    useFlags.getState().setFlags({
+      webinar: false,
+    });
+    render(<VideoWizard />, {
+      routerOptions: {
+        componentPath: `/${VIDEO_WIZARD_ROUTE.all}`,
+        history: [builderVideoWizzardRoute()],
+      },
+    });
+    await screen.findByText(
+      'You can choose how you want to share your content using the options below.',
+    );
+    screen.getByText('What would you like to do?');
+    screen.getByRole('button', {
+      name: 'Create a video',
+    });
+    expect(
+      screen.queryByRole('button', { name: 'Start a live' }),
+    ).not.toBeInTheDocument();
+  });
+});
+
+useFlags.getState().setFlags({
+  video: true,
+  document: true,
+  webinar: true,
+  classroom: true,
+  deposit: true,
 });
diff --git a/src/frontend/apps/lti_site/components/VideoWizard/index.tsx b/src/frontend/apps/lti_site/components/VideoWizard/index.tsx
@@ -8,8 +8,10 @@ import {
   WizardLayout,
   builderDashboardRoute,
   builderFullScreenErrorRoute,
+  flags,
   modelName,
   useAppConfig,
+  useFlags,
   useResponsive,
   withLink,
 } from 'lib-components';
@@ -25,14 +27,14 @@ import {
 
 const messages = defineMessages({
   chooseActionTitle: {
-    defaultMessage: 'What are you willing to do ?',
+    defaultMessage: 'What would you like to do?',
     description: 'Title asking what actions the user wants to do.',
     id: 'component.VideoWizard.chooseActionTitle',
   },
   descriptionText: {
     defaultMessage:
-      'You can choose between creating a video and uploading one, or creating a live, that you will be able to schedule if needed.',
-    description: 'A paragraph presenting the actions below.',
+      'You can choose how you want to share your content using the options below.',
+    description: 'A generic paragraph presenting the available actions.',
     id: 'component.VideoWizard.descriptionText',
   },
   createVideoButtonLabel: {
@@ -49,6 +51,7 @@ const VideoWizard = () => {
   const navigate = useNavigate();
   const { breakpoint, isSmallerBreakpoint } = useResponsive();
   const { video } = useAppConfig();
+  const isFlagEnabled = useFlags((state) => state.isFlagEnabled);
 
   if (!video) {
     return (
@@ -96,28 +99,35 @@ const VideoWizard = () => {
                   {intl.formatMessage(messages.descriptionText)}
                 </Text>
 
-                <CreateVODButton
-                  aria-label={intl.formatMessage(
-                    messages.createVideoButtonLabel,
-                  )}
-                  fullWidth
-                  title={intl.formatMessage(messages.createVideoButtonLabel)}
-                  to={builderVideoWizzardRoute(VideoWizzardSubPage.createVideo)}
-                >
-                  {intl.formatMessage(messages.createVideoButtonLabel)}
-                </CreateVODButton>
-
-                <ConfigureLiveButton
-                  video={video}
-                  RenderOnSuccess={
-                    <Navigate to={builderDashboardRoute(modelName.VIDEOS)} />
-                  }
-                  RenderOnError={
-                    <Navigate
-                      to={builderFullScreenErrorRoute(ErrorComponents.liveInit)}
-                    />
-                  }
-                />
+                {isFlagEnabled(flags.VIDEO) && (
+                  <CreateVODButton
+                    aria-label={intl.formatMessage(
+                      messages.createVideoButtonLabel,
+                    )}
+                    fullWidth
+                    title={intl.formatMessage(messages.createVideoButtonLabel)}
+                    to={builderVideoWizzardRoute(
+                      VideoWizzardSubPage.createVideo,
+                    )}
+                  >
+                    {intl.formatMessage(messages.createVideoButtonLabel)}
+                  </CreateVODButton>
+                )}
+                {isFlagEnabled(flags.WEBINAR) && (
+                  <ConfigureLiveButton
+                    video={video}
+                    RenderOnSuccess={
+                      <Navigate to={builderDashboardRoute(modelName.VIDEOS)} />
+                    }
+                    RenderOnError={
+                      <Navigate
+                        to={builderFullScreenErrorRoute(
+                          ErrorComponents.liveInit,
+                        )}
+                      />
+                    }
+                  />
+                )}
               </Box>
             </WhiteCard>
           }
