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:
Jorg Are
2024-08-05 13:46:50 +01:00
committed by GitHub
parent 680b5ff160
commit 9efb583cdc
4 changed files with 16 additions and 122 deletions

77
package-lock.json generated
View File

@@ -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",

View File

@@ -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",

View File

@@ -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>
);

View File

@@ -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();
});
});