feat: update internal video languages#6791
Conversation
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (12)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the ## Walkthrough
This change introduces support for selecting and applying a video language variant during the journey AI translation and duplication flows. It adds an optional `videoLanguageId` field to relevant GraphQL schemas, updates backend mutation logic, enhances UI components to allow separate journey and video language selection, and implements a new hook to determine common video variant languages across journey videos.
## Changes
| Files/Areas | Change Summary |
|--------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `apis/api-gateway/schema.graphql`, `apis/api-journeys-modern/schema.graphql` | Added optional field `videoLanguageId: ID` to `JourneyAiTranslateInput` input type. |
| `apis/api-journeys-modern/src/schema/journeyAiTranslate/journeyAiTranslate.ts` | Extended mutation to accept `videoLanguageId` and update all internal video blocks' language variant if provided. |
| `libs/journeys/ui/src/libs/useJourneyAiTranslateMutation/useJourneyAiTranslateMutation.ts` | Updated GraphQL mutation to include optional `videoLanguageId` variable in input. |
| `libs/journeys/ui/src/libs/useJourneyDuplicateAndTranslate/useJourneyDuplicateAndTranslate.ts` | Added `selectedVideoLanguage` to props and mutation variables for translation. |
| `libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/` (all files) | Introduced new hook (`useCommonVideoVariantLanguages`), queries, tests, and mocks to determine common video variant languages across a journey's internal videos. |
| `libs/journeys/ui/src/components/CopyToTeamDialog/CopyToTeamDialog.tsx` | Enhanced dialog to support video language selection, updated form state, props, validation, and UI to include a second language autocomplete for video language. |
| `apps/journeys-admin/src/components/JourneyList/JourneyCard/JourneyCardMenu/TranslateJourneyDialog/TranslateJourneyDialog.tsx` | Enhanced dialog to support selecting both journey and video languages; integrated new hook and updated translation handler. |
| `apps/journeys-admin/src/components/Team/CopyToTeamMenuItem/CopyToTeamMenuItem.tsx` | Enhanced to support video language selection in duplication flow; updated handler and dialog props. |
| `apps/journeys-admin/src/components/JourneyList/JourneyCard/JourneyCardMenu/TranslateJourneyDialog/TranslateJourneyDialog.spec.tsx`,<br>`apps/journeys-admin/src/components/Team/CopyToTeamMenuItem/CopyToTeamMenuItem.spec.tsx` | Updated tests to handle video language selection, added mocks for video languages, and verified UI/logic for both language selectors. |
| `libs/journeys/ui/src/libs/useLanguagesQuery/useLanguagesQuery.ts`,<br>`libs/journeys/ui/src/libs/useLanguagesQuery/useLanguagesQuery.spec.tsx`,<br>`libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/HeaderAndLanguageFilter.tsx`,<br>`apps/journeys-admin/src/components/Editor/Toolbar/Items/TemplateSettingsItem/TemplateSettingsDialog/MetadataTabPanel/MetadataTabPanel.tsx`,<br>`apps/journeys-admin/src/components/Editor/Toolbar/JourneyDetails/JourneyDetailsDialog/JourneyDetailsDialog.tsx`,<br>`apps/videos-admin/src/app/(dashboard)/videos/[videoId]/audio/add/page.tsx`,<br>`apps/videos-admin/src/components/FormLanguageSelect/FormLanguageSelect.tsx` | Changed usage of `useLanguagesQuery` to accept a full options object (including `variables`), updated all call sites and related tests accordingly. |
| `libs/journeys/ui/src/libs/useJourneyAiTranslateMutation/supportedLanguages.ts` | Updated documentation comment to mention usage in new video variant language hook. |
| `libs/locales/en/apps-journeys-admin.json`, `libs/locales/en/libs-journeys-ui.json` | Added and renamed localization keys for "Select Journey Language" and "Select Video Language" used in UI components. |
| `libs/journeys/ui/src/components/TemplateView/CreateJourneyButton/CreateJourneyButton.tsx` | Updated `handleCreateJourney` to accept optional `selectedVideoLanguage` parameter for duplication and translation. |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant User
participant UI (Dialog)
participant useCommonVideoVariantLanguages
participant Backend (API)
participant DB
User->>UI (Dialog): Open Translate or Duplicate Dialog
UI (Dialog)->>useCommonVideoVariantLanguages: Fetch common video languages for journey
useCommonVideoVariantLanguages->>Backend (API): Query journey's internal videos
Backend (API)->>DB: Get journey blocks
DB-->>Backend (API): Return video blocks
Backend (API)-->>useCommonVideoVariantLanguages: Return video block data
useCommonVideoVariantLanguages->>Backend (API): Query video variant languages for videos
Backend (API)->>DB: Get video variant languages
DB-->>Backend (API): Return language variants
Backend (API)-->>useCommonVideoVariantLanguages: Return variant languages
useCommonVideoVariantLanguages->>UI (Dialog): Provide common languages
User->>UI (Dialog): Select journey and video language, submit
UI (Dialog)->>Backend (API): Call mutation with journeyLanguageId and videoLanguageId
Backend (API)->>DB: Update journey translation and video block language variants
DB-->>Backend (API): Confirm updates
Backend (API)-->>UI (Dialog): Return success
UI (Dialog)-->>User: Show confirmationPossibly related PRs
Suggested reviewers
|
|
The latest updates on your projects.
|
|
The latest updates on your projects.
|
|
The latest updates on your projects.
|
|
The latest updates on your projects.
|
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
apis/api-journeys-modern/src/schema/journeyAiTranslate/journeyAiTranslate.ts (1)
167-179: Well-implemented video language update logic.The implementation correctly:
- Uses conditional execution only when
videoLanguageIdis provided- Efficiently updates multiple blocks with
updateMany- Properly filters by journey, block type, and source
- Follows the existing code patterns in the file
Consider adding validation to ensure the
videoLanguageIdexists before the update operation, though this might be handled at the GraphQL schema level.+ // Validate that the video language exists + if (input.videoLanguageId) { + const videoLanguage = await prisma.language.findUnique({ + where: { id: input.videoLanguageId } + }) + if (!videoLanguage) { + throw new GraphQLError('Video language not found', { + extensions: { code: 'NOT_FOUND' } + }) + } + } + // Update video blocks' videoVariantLanguageId if videoLanguageId is provided if (input.videoLanguageId) {libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/useCommonVideoVariantLanguages.mock.ts (2)
15-73: Languages Mock Coverage
ThelanguagesMockaccurately simulates theGET_LANGUAGESquery and its response shape. For closer fidelity to Apollo’s cache normalization, consider adding a__typename: 'Language'property on each language entry in the array.
134-198: Video Variant Languages Mock
ThevideosVariantLanguagesMockcovers both overlapping and unique language sets across multiple videos. To mirror typical GraphQL responses and avoid potential cache mismatches, you may want to include__typenameon the top-levelvideos, eachvariant, each item invariants, and the nestedlanguageobjects.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (6)
apps/journeys-admin/__generated__/GetJourneyInternalVideos.tsis excluded by!**/__generated__/**apps/journeys-admin/__generated__/GetVideosVariantLanguages.tsis excluded by!**/__generated__/**apps/journeys-admin/__generated__/JourneyAiTranslateCreate.tsis excluded by!**/__generated__/**libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/__generated__/GetJourneyInternalVideos.tsis excluded by!**/__generated__/**libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/__generated__/GetVideosVariantLanguages.tsis excluded by!**/__generated__/**libs/journeys/ui/src/libs/useJourneyAiTranslateMutation/__generated__/JourneyAiTranslateCreate.tsis excluded by!**/__generated__/**
📒 Files selected for processing (22)
apis/api-gateway/schema.graphql(1 hunks)apis/api-journeys-modern/schema.graphql(1 hunks)apis/api-journeys-modern/src/schema/journeyAiTranslate/journeyAiTranslate.ts(3 hunks)apps/journeys-admin/src/components/Editor/Toolbar/Items/TemplateSettingsItem/TemplateSettingsDialog/MetadataTabPanel/MetadataTabPanel.tsx(1 hunks)apps/journeys-admin/src/components/Editor/Toolbar/JourneyDetails/JourneyDetailsDialog/JourneyDetailsDialog.tsx(1 hunks)apps/journeys-admin/src/components/JourneyList/JourneyCard/JourneyCardMenu/TranslateJourneyDialog/TranslateJourneyDialog.spec.tsx(6 hunks)apps/journeys-admin/src/components/JourneyList/JourneyCard/JourneyCardMenu/TranslateJourneyDialog/TranslateJourneyDialog.tsx(6 hunks)apps/journeys-admin/src/components/Team/CopyToTeamMenuItem/CopyToTeamMenuItem.spec.tsx(8 hunks)apps/journeys-admin/src/components/Team/CopyToTeamMenuItem/CopyToTeamMenuItem.tsx(4 hunks)apps/videos-admin/src/app/(dashboard)/videos/[videoId]/audio/add/page.tsx(1 hunks)apps/videos-admin/src/components/FormLanguageSelect/FormLanguageSelect.tsx(1 hunks)libs/journeys/ui/src/components/CopyToTeamDialog/CopyToTeamDialog.tsx(6 hunks)libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/HeaderAndLanguageFilter.tsx(1 hunks)libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/index.ts(1 hunks)libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/useCommonVideoVariantLanguages.mock.ts(1 hunks)libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/useCommonVideoVariantLanguages.spec.tsx(1 hunks)libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/useCommonVideoVariantLanguages.ts(1 hunks)libs/journeys/ui/src/libs/useJourneyAiTranslateMutation/supportedLanguages.ts(1 hunks)libs/journeys/ui/src/libs/useJourneyAiTranslateMutation/useJourneyAiTranslateMutation.ts(2 hunks)libs/journeys/ui/src/libs/useJourneyDuplicateAndTranslate/useJourneyDuplicateAndTranslate.ts(3 hunks)libs/journeys/ui/src/libs/useLanguagesQuery/useLanguagesQuery.spec.tsx(2 hunks)libs/journeys/ui/src/libs/useLanguagesQuery/useLanguagesQuery.ts(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (7)
apps/journeys-admin/src/components/Editor/Toolbar/Items/TemplateSettingsItem/TemplateSettingsDialog/MetadataTabPanel/MetadataTabPanel.tsx (1)
libs/journeys/ui/src/libs/useLanguagesQuery/useLanguagesQuery.ts (1)
useLanguagesQuery(21-29)
apps/journeys-admin/src/components/Editor/Toolbar/JourneyDetails/JourneyDetailsDialog/JourneyDetailsDialog.tsx (1)
libs/journeys/ui/src/libs/useLanguagesQuery/useLanguagesQuery.ts (1)
useLanguagesQuery(21-29)
apps/videos-admin/src/components/FormLanguageSelect/FormLanguageSelect.tsx (1)
libs/journeys/ui/src/libs/useLanguagesQuery/useLanguagesQuery.ts (1)
useLanguagesQuery(21-29)
libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/useCommonVideoVariantLanguages.spec.tsx (2)
libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/useCommonVideoVariantLanguages.ts (1)
useCommonVideoVariantLanguages(49-119)libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/useCommonVideoVariantLanguages.mock.ts (6)
journey(9-13)journeyInternalVideosMock(76-110)videosVariantLanguagesMock(134-198)languagesMock(15-74)journeyInternalWithoutVideosMock(112-132)videosVariantLanguagesWithoutVideosMock(200-212)
libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/useCommonVideoVariantLanguages.ts (4)
libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/__generated__/GetJourneyInternalVideos.ts (2)
GetJourneyInternalVideos(47-49)GetJourneyInternalVideosVariables(51-53)libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/__generated__/GetVideosVariantLanguages.ts (2)
GetVideosVariantLanguages(32-34)GetVideosVariantLanguagesVariables(36-38)libs/journeys/ui/src/libs/useJourneyAiTranslateMutation/supportedLanguages.ts (1)
SUPPORTED_LANGUAGE_IDS(15-62)libs/journeys/ui/src/libs/useLanguagesQuery/useLanguagesQuery.ts (1)
useLanguagesQuery(21-29)
apps/journeys-admin/src/components/JourneyList/JourneyCard/JourneyCardMenu/TranslateJourneyDialog/TranslateJourneyDialog.spec.tsx (2)
libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/useCommonVideoVariantLanguages.mock.ts (2)
journeyInternalVideosMock(76-110)videosVariantLanguagesMock(134-198)apps/journeys-admin/src/components/JourneyList/JourneyCard/JourneyCardMenu/TranslateJourneyDialog/TranslateJourneyDialog.tsx (1)
TranslateJourneyDialog(48-177)
apps/journeys-admin/src/components/Team/CopyToTeamMenuItem/CopyToTeamMenuItem.spec.tsx (1)
libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/useCommonVideoVariantLanguages.mock.ts (2)
journeyInternalVideosMock(76-110)videosVariantLanguagesMock(134-198)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Deploy Preview and Test (journeys-admin, 6791/merge, pull_request, 22)
🔇 Additional comments (73)
apis/api-gateway/schema.graphql (1)
4309-4315: Add optionalvideoLanguageIdto JourneyAiTranslateInput
The new optional fieldvideoLanguageId: IDenables specifying a video language variant in the AI translation mutation. Please verify that the downstream service (API_JOURNEYS_MODERN)’s schema, resolver logic, and generated client types/codegen are updated to accept and propagate this field.apis/api-journeys-modern/schema.graphql (1)
58-58: LGTM! Well-designed schema extension.The addition of the optional
videoLanguageIdfield follows good GraphQL practices by maintaining backward compatibility while enabling the new video language selection functionality. The field type and naming convention are consistent with the existingtextLanguageIdfield.apps/videos-admin/src/components/FormLanguageSelect/FormLanguageSelect.tsx (1)
25-29: LGTM! Good alignment with Apollo Client patterns.The change to wrap query variables in a
variablesobject aligns the hook with standard Apollo Client conventions and makes it more flexible for accepting additional query options. This is consistent with the updateduseLanguagesQueryhook signature shown in the relevant code snippets.apps/journeys-admin/src/components/Editor/Toolbar/JourneyDetails/JourneyDetailsDialog/JourneyDetailsDialog.tsx (1)
53-57: LGTM! Consistent with the hook signature update.This change follows the same pattern as other files in the PR, updating the
useLanguagesQuerycall to wrap variables in avariablesobject. This maintains consistency with the updated hook signature and Apollo Client conventions.apps/videos-admin/src/app/(dashboard)/videos/[videoId]/audio/add/page.tsx (1)
73-77: LGTM! Correct API migration for useLanguagesQuery hook.The change properly wraps the
languageIdparameter in avariablesobject to align with the updateduseLanguagesQueryhook signature that now accepts a fullQueryHookOptionsobject instead of variables directly.apps/journeys-admin/src/components/Editor/Toolbar/Items/TemplateSettingsItem/TemplateSettingsDialog/MetadataTabPanel/MetadataTabPanel.tsx (1)
21-25: LGTM! Consistent API migration implementation.The change correctly updates the
useLanguagesQuerycall to wrap thelanguageIdin avariablesobject, maintaining consistency with the hook signature changes across the codebase.libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/HeaderAndLanguageFilter.tsx (1)
172-203: LGTM! Comprehensive API migration for complex query parameters.The change correctly wraps both the
languageIdandwhereclause parameters in avariablesobject. The extensive language filtering logic is preserved while conforming to the updateduseLanguagesQueryhook signature.libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/index.ts (1)
1-5: LGTM! Clean export pattern for new video variant language functionality.The file follows standard practices by providing centralized re-exports for the video variant language hooks and queries, making them easily accessible throughout the application.
libs/journeys/ui/src/libs/useLanguagesQuery/useLanguagesQuery.spec.tsx (1)
66-68: LGTM! Test correctly updated for new hook signature.The test cases have been properly updated to wrap query parameters inside a
variablesobject, which aligns with the hook signature change mentioned in the AI summary. The mock request variables are also correctly updated to match this structure.Also applies to: 106-110
libs/journeys/ui/src/libs/useJourneyDuplicateAndTranslate/useJourneyDuplicateAndTranslate.ts (3)
25-25: LGTM! Proper extension of interface.The addition of the optional
selectedVideoLanguageparameter follows the existing pattern and uses the already definedJourneyLanguagetype.
56-56: LGTM! Function signature correctly updated.The function signature properly includes the new optional parameter, maintaining backward compatibility.
92-92: LGTM! Safe parameter passing with optional chaining.The use of optional chaining (
selectedVideoLanguage?.id) ensures safe access to the ID property and prevents runtime errors when the parameter is undefined.apis/api-journeys-modern/src/schema/journeyAiTranslate/journeyAiTranslate.ts (2)
6-6: LGTM! Appropriate import for video block filtering.The import of
VideoBlockSourceenum is needed for the new functionality to filter internal video blocks.
28-28: LGTM! Proper addition of optional field.The
videoLanguageIdfield is correctly defined as optional, maintaining backward compatibility with existing API usage.libs/journeys/ui/src/libs/useJourneyAiTranslateMutation/useJourneyAiTranslateMutation.ts (2)
15-15: LGTM! Proper addition of optional mutation parameter.The
videoLanguageIdparameter is correctly defined as optional with the appropriate GraphQL type.
24-24: LGTM! Correct parameter forwarding to input object.The parameter is properly passed through to the mutation input object, completing the GraphQL schema extension.
libs/journeys/ui/src/libs/useLanguagesQuery/useLanguagesQuery.ts (3)
1-1: LGTM: Proper import addition for enhanced hook API.The import of
QueryHookOptionsis correctly added to support the enhanced hook signature.
22-22: LGTM: Enhanced hook API provides better flexibility.The parameter change from
variablestooptionsallows passing the full range of Apollo Client query options, not just variables. This is a beneficial API enhancement that maintains backward compatibility.
25-25: LGTM: Correct implementation of options spreading.The change to spread the entire
optionsobject instead of justvariablesproperly implements the enhanced API while maintaining all Apollo Client query functionality.libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/useCommonVideoVariantLanguages.spec.tsx (5)
1-12: LGTM: Proper test setup with appropriate imports.The imports are well-organized and include all necessary testing utilities and mocks for comprehensive testing of the hook.
15-38: LGTM: Well-structured test for common languages scenario.The test properly verifies the hook's initial loading state and final resolved data with appropriate mocking and async handling.
40-71: LGTM: Comprehensive assertion of resolved data structure.The test thoroughly validates the expected data structure returned by the hook, ensuring correct language information including names, slugs, and primary/secondary name variants.
73-98: LGTM: Proper handling of edge case with no videos.This test case correctly verifies the hook's behavior when a journey contains no videos, ensuring it returns undefined for common languages after loading completes.
100-107: LGTM: Appropriate handling of undefined journey parameter.The test correctly verifies that when no journey is provided, the hook immediately returns a non-loading state with undefined common languages.
apps/journeys-admin/src/components/Team/CopyToTeamMenuItem/CopyToTeamMenuItem.spec.tsx (7)
17-21: LGTM: Proper imports for video language support.The addition of video-related mocks from the
useCommonVideoVariantLanguagesmodule correctly supports the new video language selection feature.
84-86: LGTM: Updated translate mock for French language support.The mock correctly uses French language ID (
496) and corresponding French language name, aligning with the new video language feature requirements.
93-95: LGTM: Consistent French localization in mock data.The mock response properly includes French title and description, maintaining consistency with the language selection changes.
114-114: LGTM: Journey ID consistency improvement.The change from
'journeyId'to'journey-id'maintains consistency with the mock data and other parts of the codebase.
194-211: LGTM: Enhanced language mock data with French support.The addition of French language data to the mock correctly supports the dual language selection feature and maintains proper language name structure with primary/secondary variants.
311-314: LGTM: Proper addition of video-related mocks.The inclusion of
journeyInternalVideosMock,videosVariantLanguagesMock, andcommonLanguagesMockcorrectly supports the video language selection functionality in the translation test.
367-390: LGTM: Comprehensive dual language selection testing.The test properly simulates user interaction with both journey and video language selectors, ensuring both language selections are functional and properly integrated.
apps/journeys-admin/src/components/JourneyList/JourneyCard/JourneyCardMenu/TranslateJourneyDialog/TranslateJourneyDialog.spec.tsx (8)
11-15: LGTM: Proper imports for video language testing support.The addition of video-related mocks from the
useCommonVideoVariantLanguagesmodule correctly enables testing of the dual language selection feature.
113-114: LGTM: Enhanced mutation mock with video language support.The addition of
videoLanguageId: '496'to thejourneyAiTranslateCreateMockcorrectly reflects the new GraphQL mutation signature that supports video language translation.
141-143: LGTM: Good testing practice with mock cleanup.The
beforeEachhook properly clears all mocks before each test, ensuring test isolation and preventing test interference.
147-154: LGTM: Comprehensive mock setup for rendering tests.The updated mock provider correctly includes all necessary mocks for video language functionality, ensuring proper component rendering and data loading.
162-163: LGTM: Verification of dual language selection UI elements.The test correctly verifies that both "Select Journey Language" and "Select Video Language" labels are present, confirming the UI supports the new dual language selection feature.
172-179: LGTM: Consistent mock setup in cancel test.The cancel test properly includes the video language mocks, maintaining consistency across all test scenarios.
195-197: LGTM: Video language mocks inclusion in translation test.The translation test correctly includes all video language related mocks, enabling proper testing of the complete translation workflow.
215-237: LGTM: Comprehensive dual language selection simulation.The test thoroughly simulates user interaction with both journey and video language selectors, ensuring the complete translation workflow is properly tested including both language selections.
apps/journeys-admin/src/components/JourneyList/JourneyCard/JourneyCardMenu/TranslateJourneyDialog/TranslateJourneyDialog.tsx (6)
11-11: LGTM: Clean import of the new hook.The import of
useCommonVideoVariantLanguagesfollows the established import pattern and is appropriately placed with other journey-related imports.
59-61: LGTM: Proper hook integration.The hook is correctly called with the journey data and follows the established pattern of destructuring the returned values with meaningful names.
96-98: LGTM: Appropriate state management.The
selectedVideoLanguagestate is properly initialized as optional and follows the same pattern asselectedLanguage.
106-107: LGTM: Consistent state reset logic.The dialog close handler correctly resets both language selections, maintaining consistency with the component's behavior.
122-122: LGTM: Clean integration with mutation.The
selectedVideoLanguageis properly passed to theduplicateAndTranslatefunction, maintaining the optional nature of video language selection.
139-174: LGTM: Well-structured UI with good accessibility.The two-tier language selection UI is well-implemented:
- Clear separation between journey and video language selection
- Consistent styling and props across both autocomplete components
- Appropriate labels distinguishing the two selectors
- Proper loading state handling for each language source
The Stack layout with spacing provides good visual hierarchy.
libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/useCommonVideoVariantLanguages.ts (9)
1-15: LGTM: Clean imports and type definitions.The imports are well-organized and all necessary dependencies are included. The generated type imports follow the established pattern.
16-31: LGTM: Well-structured GraphQL query.The
GET_JOURNEY_INTERNAL_VIDEOSquery efficiently fetches only the necessary fields for video blocks, including the criticalvideoIdandvideoVariantLanguageIdfields.
33-47: LGTM: Comprehensive video variants query.The
GET_VIDEOS_VARIANT_LANGUAGESquery correctly fetches variant language information for multiple videos in a single request, which is efficient.
49-59: LGTM: Proper query setup with appropriate skip condition.The first query is correctly configured with proper error handling through the skip condition when journey is null.
61-73: LGTM: Efficient video ID extraction with memoization.The
useMemooptimization prevents unnecessary re-computation of video IDs. The logic correctly filters for VideoBlock types and extracts valid video IDs.
75-84: LGTM: Proper dependent query with comprehensive skip conditions.The second query correctly depends on the video IDs from the first query and has appropriate skip conditions to prevent unnecessary requests.
86-97: LGTM: Correct intersection logic for common languages.The reduce function correctly finds languages common to all videos by:
- Starting with the first video's languages
- Filtering subsequent videos to only include common languages
This ensures only languages supported across ALL videos are returned.
105-113: LGTM: Efficient final query with proper skip condition.The final
useLanguagesQuerycall correctly uses the intersection result and skips when no common languages are found, preventing unnecessary API calls.
115-119: LGTM: Comprehensive loading state and clean return.The combined loading state correctly reflects all three async operations, and the return object provides a clean interface for consumers.
apps/journeys-admin/src/components/Team/CopyToTeamMenuItem/CopyToTeamMenuItem.tsx (4)
8-8: LGTM: Consistent hook import.The import follows the established pattern and is correctly placed with other journey-related imports.
52-53: LGTM: Proper hook integration.The hook is correctly called with journey data and follows the same destructuring pattern used elsewhere in the codebase.
71-71: LGTM: Clean function signature extension.The
handleDuplicateJourneyfunction signature is properly extended to include the optionalselectedVideoLanguageparameter, and it's correctly passed through to theduplicateAndTranslatefunction.Also applies to: 79-79
111-112: LGTM: Proper prop passing to dialog component.The video languages and loading state are correctly passed to the
CopyToTeamDialogcomponent, maintaining the separation of concerns between data fetching and UI presentation.libs/journeys/ui/src/components/CopyToTeamDialog/CopyToTeamDialog.tsx (10)
16-19: LGTM: Clean import restructuring.The import has been properly restructured to include the
Languagetype alongsideLanguageAutocomplete, improving type safety.
28-32: LGTM: Consistent interface definition.The
JourneyLanguageinterface is properly defined and matches the pattern used in other components.
39-42: LGTM: Well-structured prop interface updates.The new video language props are properly typed and optional, maintaining backward compatibility while providing the necessary data for the new functionality.
Also applies to: 47-47
55-55: LGTM: Consistent form values extension.The
videoLanguageSelectfield is properly added to the form values interface as an optional field, matching the pattern oflanguageSelect.
67-72: LGTM: Comprehensive prop documentation.The JSDoc comments have been properly updated to document the new video language props and the extended submit action signature.
80-81: LGTM: Clean parameter destructuring.The new video language props are properly destructured in the component parameters.
92-97: LGTM: Improved query variable structure.The
useLanguagesQuerycall has been properly restructured to use avariablesobject, which is a better practice and aligns with the Apollo Client conventions.
107-107: LGTM: Proper form submission update.The
submitActioncall correctly includes the video language selection, maintaining the optional nature of this parameter.
145-145: LGTM: Appropriate validation schema extension.The validation schema properly includes
videoLanguageSelectas an optional nullable field, which is correct since video language selection should remain optional.Also applies to: 153-153
270-311: LGTM: Well-implemented dual language selection UI.The UI implementation effectively provides separate language selection for journey and video:
- Clear visual separation using Stack layout
- Consistent styling between both autocomplete components
- Appropriate labels distinguishing journey vs video language
- Proper loading state handling for each language source
- Correct data binding for each form field
The implementation maintains good UX by keeping both selectors within the same conditional block.
libs/journeys/ui/src/libs/useCommonVideoVariantLanguages/useCommonVideoVariantLanguages.mock.ts (5)
1-7: Import Statements Structure
The imports are correctly organized and reference the appropriate modules forJourney,GET_LANGUAGES,GET_JOURNEY_INTERNAL_VIDEOS, andGET_VIDEOS_VARIANT_LANGUAGES.
9-13: Mock Journey Object
The minimaljourneymock aligns with theJourneyFieldstype and provides__typename,id, andtitle. Casting viaas unknown as Journeyis acceptable for mock contexts.
76-110: Internal Videos Journey Mock
journeyInternalVideosMockcorrectly reflects a journey containing bothVideoBlockand non-video (TypographyBlock) entries. The use of__typenameand the required fields (videoId,videoVariantLanguageId,source) is spot on.
112-132: Journey with No Internal Videos
journeyInternalWithoutVideosMockcleanly handles the case where a journey has no video blocks, returning only typography blocks as expected.
200-212: Empty Videos Variant Mock
videosVariantLanguagesWithoutVideosMockcorrectly simulates querying with an emptyidsarray, returning an emptyvideoslist.
…ai-translate-no-qa
…e-no-qa' into edmondshen/nes-62-auto-update-arclight-video-langauge
|
|
|
This pull request has been marked stale due to 28 days without activity. It will be closed in 14 days unless updated. |
|
This pull request was automatically closed after remaining stale for 14 days. |
This PR adds the option to be able to update the video language of all internal arclight videos when translating.
Summary by CodeRabbit
New Features
Enhancements
Bug Fixes
Tests
Documentation