feat: replace ai-translations component with a plugin slot (#1186)

* feat: replace ai-translations component with a plugin slot

* feat: move ai-translations enabled check to plugin

Author: hajorg

package-lock.json

@@ -42,7 +42,6 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
-    "@edx/frontend-component-ai-translations": "^2.1.0",
     "@edx/frontend-component-footer": "^14.0.3",
     "@edx/frontend-component-header": "^5.3.3",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",

package.json

@@ -11,7 +11,7 @@ import {
   TransitionReplace,
 } from '@openedx/paragon';
 import { ChevronLeft, ChevronRight, Close } from '@openedx/paragon/icons';
-import AITranslationsComponent from '@edx/frontend-component-ai-translations';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import OrderTranscriptForm from './OrderTranscriptForm';
 import messages from './messages';
 import {
@@ -114,18 +114,19 @@ const TranscriptSettings = ({
             </TransitionReplace>
           </>
         )}
-        {(!transcriptType && isAiTranslationsEnabled) && (
-          <TransitionReplace>
-            <div data-testid="ai-translations-component">
-              <AITranslationsComponent
-                setIsAiTranslations={setIsAiTranslations}
-                closeTranscriptSettings={closeTranscriptSettings}
-                courseId={courseId}
-                key="ai-component"
-              />
-            </div>
-          </TransitionReplace>
-        )}
+        <TransitionReplace>
+          <div data-testid="translations-component">
+            <PluginSlot
+              id="additonal_translations_component_slot"
+              pluginProps={{
+                setIsAiTranslations,
+                closeTranscriptSettings,
+                courseId,
+                additionalProps: { transcriptType, isAiTranslationsEnabled },
+              }}
+            />
+          </div>
+        </TransitionReplace>
       </div>
     </Sheet>
   );

src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx

@@ -616,36 +616,7 @@ describe('TranscriptSettings', () => {
     });
   });
 
-  describe('Ai translations component fails', () => {
-    beforeEach(async () => {
-      initializeMockApp({
-        authenticatedUser: {
-          userId: 3,
-          username: 'abc123',
-          administrator: false,
-          roles: [],
-        },
-      });
-      store = initializeStore({
-        ...initialState,
-        videos: {
-          ...initialState.videos,
-          pageSettings: {
-            ...initialState.videos.pageSettings,
-          },
-        },
-      });
-      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-
-      renderComponent(defaultProps);
-    });
-
-    it('doesn\'t display AI translations component if not enabled', () => {
-      expect(screen.queryByTestId('ai-translations-component')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Ai translations component success', () => {
+  describe('Translations component success', () => {
     beforeEach(async () => {
       initializeMockApp({
         authenticatedUser: {
@@ -671,7 +642,7 @@ describe('TranscriptSettings', () => {
     });
 
     it('displays AI translations component if enabled', () => {
-      const component = screen.getByTestId('ai-translations-component');
+      const component = screen.getByTestId('translations-component');
       expect(component).toBeInTheDocument();
     });
   });