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
This commit is contained in:
77
package-lock.json
generated
77
package-lock.json
generated
@@ -14,7 +14,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",
|
||||
@@ -2377,82 +2376,6 @@
|
||||
"eslint-plugin-react-hooks": "^1.7.0 || ^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@edx/frontend-component-ai-translations": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@edx/frontend-component-ai-translations/-/frontend-component-ai-translations-2.1.0.tgz",
|
||||
"integrity": "sha512-odH8QxBYtanMMoPXiNYljcI4jTWi80NTYGJXm18M3OvIdQ4sL415KheBk73Za0ZVFHFzOs7zpFO9ZU0UgcXFVQ==",
|
||||
"dependencies": {
|
||||
"babel-polyfill": "6.26.0",
|
||||
"prop-types": "^15.5.10",
|
||||
"react": "^16.9.0 || ^17.0.0",
|
||||
"react-dom": "^16.9.0 || ^17.0.0",
|
||||
"react-responsive": "8.2.0",
|
||||
"react-router-dom": "6.16.0",
|
||||
"ts-jest": "^29.1.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@edx/frontend-platform": "^7.0.0 || ^8.0.0",
|
||||
"@openedx/paragon": "^21.5.7 || ^22.0.0",
|
||||
"prop-types": "^15.5.10",
|
||||
"react": "^16.9.0 || ^17.0.0",
|
||||
"react-dom": "^16.9.0 || ^17.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@edx/frontend-component-ai-translations/node_modules/@remix-run/router": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz",
|
||||
"integrity": "sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA==",
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@edx/frontend-component-ai-translations/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-ai-translations/node_modules/react-router-dom": {
|
||||
"version": "6.16.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.16.0.tgz",
|
||||
"integrity": "sha512-aTfBLv3mk/gaKLxgRDUPbPw+s4Y/O+ma3rEN1u8EgEpLpPe6gNjIsWt9rxushMHHMb7mSwxRGdGlGdvmFsyPIg==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.9.0",
|
||||
"react-router": "6.16.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8",
|
||||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/@edx/frontend-component-ai-translations/node_modules/react-router-dom/node_modules/react-router": {
|
||||
"version": "6.16.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz",
|
||||
"integrity": "sha512-VT4Mmc4jj5YyjpOi5jOf0I+TYzGpvzERy4ckNSvSh2RArv8LLoCxlsZ2D+tc7zgjxcY34oTz2hZaeX5RVprKqA==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.9.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/@edx/frontend-component-footer": {
|
||||
"version": "14.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-14.0.5.tgz",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user