feat: add ai translations component to transcript settings (#722)

2023-12-05 22:22:46 +01:00
parent 1636226572
commit bebbc1535b
7 changed files with 172 additions and 51 deletions
--- a/.env
+++ b/.env
@@ -41,3 +41,4 @@ HOTJAR_APP_ID=''
 HOTJAR_VERSION=6
 HOTJAR_DEBUG=false
 INVITE_STUDENTS_EMAIL_TO=''
+AI_TRANSLATIONS_BASE_URL=''
--- a/.env.development
+++ b/.env.development
@@ -43,3 +43,4 @@ HOTJAR_APP_ID=''
 HOTJAR_VERSION=6
 HOTJAR_DEBUG=true
 INVITE_STUDENTS_EMAIL_TO="someone@domain.com"
+AI_TRANSLATIONS_BASE_URL='http://localhost:18760'
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
      "license": "AGPL-3.0",
      "dependencies": {
        "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+        "@edx/frontend-component-ai-translations-edx": "^1.3.0",
        "@edx/frontend-component-footer": "^12.3.0",
        "@edx/frontend-component-header": "^4.7.0",
        "@edx/frontend-enterprise-hotjar": "^2.0.0",
@@ -2540,6 +2541,42 @@
        "node": ">=8"
      }
    },
+    "node_modules/@edx/frontend-component-ai-translations-edx": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-ai-translations-edx/-/frontend-component-ai-translations-edx-1.3.0.tgz",
+      "integrity": "sha512-QMq8k3+EErv/29G8EJuMdpG1+uj9K5unoRP2VrjPoOOrDsK2lCdC8de7hKz2/2lmHzkdF5IOBbKtCQuC+VwxpA==",
+      "dependencies": {
+        "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+        "@edx/frontend-platform": "5.6.1",
+        "@edx/paragon": "21.5.6",
+        "babel-polyfill": "6.26.0",
+        "prop-types": "^15.5.10",
+        "react-responsive": "8.2.0"
+      },
+      "peerDependencies": {
+        "@edx/frontend-platform": "^4.0.0 || ^5.0.0 || ^6.0.0",
+        "prop-types": "^15.5.10",
+        "react": "^16.14.0 || ^17.0.0",
+        "react-dom": "^16.14.0 || ^17.0.0"
+      }
+    },
+    "node_modules/@edx/frontend-component-ai-translations-edx/node_modules/react-responsive": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.2.0.tgz",
+      "integrity": "sha512-iagCqVrw4QSjhxKp3I/YK6+ODkWY6G+YPElvdYKiUUbywwh9Ds0M7r26Fj2/7dWFFbOpcGnJE6uE7aMck8j5Qg==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.3.0",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
    "node_modules/@edx/frontend-component-footer": {
      "version": "12.5.1",
      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-12.5.1.tgz",
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
  },
  "dependencies": {
    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/frontend-component-ai-translations-edx": "^1.3.0",
    "@edx/frontend-component-footer": "^12.3.0",
    "@edx/frontend-component-header": "^4.7.0",
    "@edx/frontend-enterprise-hotjar": "^2.0.0",
--- a/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx
+++ b/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx
@@ -11,6 +11,7 @@ import {
  TransitionReplace,
 } from '@edx/paragon';
 import { ChevronLeft, ChevronRight, Close } from '@edx/paragon/icons';
+import AITranslationsComponent from '@edx/frontend-component-ai-translations-edx';
 import OrderTranscriptForm from './OrderTranscriptForm';
 import messages from './messages';
 import {
@@ -31,9 +32,11 @@ const TranscriptSettings = ({
    activeTranscriptPreferences,
    transcriptCredentials,
    videoTranscriptSettings,
+    isAiTranslationsEnabled,
  } = pageSettings;
  const { transcriptionPlans } = videoTranscriptSettings || {};
  const [transcriptType, setTranscriptType] = useState(activeTranscriptPreferences?.provider);
+  const [isAiTranslations, setIsAiTranslations] = useState(false);

  const handleOrderTranscripts = (data, provider) => {
    const noCredentials = isEmpty(transcriptCredentials) || data.apiKey;
@@ -54,59 +57,73 @@ const TranscriptSettings = ({
      show={isTranscriptSettingsOpen}
      onClose={closeTranscriptSettings}
    >
-      <div style={{ width: '225px' }}>
-        <ActionRow>
+      <div>
+        {!isAiTranslations && (
+          <>
+            <ActionRow>
+              <TransitionReplace>
+                {transcriptType ? (
+                  <IconButton
+                    key="back-button"
+                    size="sm"
+                    iconAs={Icon}
+                    src={ChevronLeft}
+                    onClick={() => setTranscriptType(null)}
+                    alt="back button to main transcript settings view"
+                  />
+                ) : (
+                  <div key="title" className="h3">
+                    <FormattedMessage {...messages.transcriptSettingsTitle} />
+                  </div>
+                )}
+              </TransitionReplace>
+              <ActionRow.Spacer />
+              <IconButton size="sm" iconAs={Icon} src={Close} onClick={closeTranscriptSettings} alt="close settings" />
+            </ActionRow>
+            <TransitionReplace>
+              {transcriptType ? (
+                <div key="transcript-settings">
+                  <OrderTranscriptForm
+                    {...{
+                      setTranscriptType,
+                      transcriptType,
+                      activeTranscriptPreferences,
+                      transcriptCredentials,
+                      closeTranscriptSettings,
+                      handleOrderTranscripts,
+                      transcriptionPlans,
+                      errorMessages,
+                      transcriptStatus,
+                    }}
+                  />
+                </div>
+              ) : (
+                <div key="transcript-type-selection" className="mt-3">
+                  <Collapsible.Advanced
+                    onOpen={() => setTranscriptType('order')}
+                  >
+                    <Collapsible.Trigger
+                      className="row m-0 justify-content-between align-items-center"
+                    >
+                      <FormattedMessage {...messages.orderTranscriptsTitle} />
+                      <Icon src={ChevronRight} />
+                    </Collapsible.Trigger>
+                  </Collapsible.Advanced>
+                </div>
+              )}
+            </TransitionReplace>
+          </>
+        )}
+        {(!transcriptType && isAiTranslationsEnabled) && (
          <TransitionReplace>
-            {transcriptType ? (
-              <IconButton
-                key="back-button"
-                size="sm"
-                iconAs={Icon}
-                src={ChevronLeft}
-                onClick={() => setTranscriptType(null)}
-                alt="back button to main transcript settings view"
-              />
-            ) : (
-              <div key="title" className="h3">
-                <FormattedMessage {...messages.transcriptSettingsTitle} />
-              </div>
-            )}
+            <AITranslationsComponent
+              setIsAiTranslations={setIsAiTranslations}
+              closeTranscriptSettings={closeTranscriptSettings}
+              courseId={courseId}
+              key="ai-component"
+            />
          </TransitionReplace>
-          <ActionRow.Spacer />
-          <IconButton size="sm" iconAs={Icon} src={Close} onClick={closeTranscriptSettings} alt="close settings" />
-        </ActionRow>
-        <TransitionReplace>
-          {transcriptType ? (
-            <div key="transcript-settings">
-              <OrderTranscriptForm
-                {...{
-                  setTranscriptType,
-                  transcriptType,
-                  activeTranscriptPreferences,
-                  transcriptCredentials,
-                  closeTranscriptSettings,
-                  handleOrderTranscripts,
-                  transcriptionPlans,
-                  errorMessages,
-                  transcriptStatus,
-                }}
-              />
-            </div>
-          ) : (
-            <div key="transcript-type-selection" className="mt-3">
-              <Collapsible.Advanced
-                onOpen={() => setTranscriptType('order')}
-              >
-                <Collapsible.Trigger
-                  className="row m-0 justify-content-between align-items-center"
-                >
-                  <FormattedMessage {...messages.orderTranscriptsTitle} />
-                  <Icon src={ChevronRight} />
-                </Collapsible.Trigger>
-              </Collapsible.Advanced>
-            </div>
-          )}
-        </TransitionReplace>
+        )}
      </div>
    </Sheet>
  );
--- a/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.scss
+++ b/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.scss
@@ -2,3 +2,7 @@
 .pgn__selectable_box[disabled] {
  opacity: .5;
 }
+
+.pgn__sheet-component.right {
+  min-width: 352px;
+}
--- a/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.test.jsx
+++ b/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.test.jsx
@@ -657,4 +657,64 @@ 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.queryByText('/Get free translations/')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Ai translations component success', () => {
+    beforeEach(async () => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: false,
+          roles: [],
+        },
+      });
+      store = initializeStore({
+        ...initialState,
+        videos: {
+          ...initialState.videos,
+          pageSettings: {
+            ...initialState.videos.pageSettings,
+            isAiTranslationsEnabled: true,
+          },
+        },
+      });
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+
+      renderComponent(defaultProps);
+    });
+
+    it('displays AI translations component if enabled', () => {
+      const component = screen.getByText(/Get free translations/);
+      expect(component).toBeVisible();
+    });
+  });
 });