Skip to content

Commit

Permalink
Fix published translations not being displayed in translations tab (o…
Browse files Browse the repository at this point in the history 
…ppia#20898)

* Fix acceptance test

* Revert accidental commit

* Revert problematic changes

* Revert problematic changes

* Fix

* Fix mobile view issue for acceptance tests
  • Loading branch information
@Vir-8
Vir-8 authored Sep 1, 2024
1 parent 4cd5cca commit 5915419
Show file tree
Hide file tree
Showing 3 changed files with 202 additions and 17 deletions.
23 changes: 23 additions & 0 deletions ...xploration-editor-page/translation-tab/state-translation/state-translation.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -435,6 +435,29 @@ <h3 tabindex="0">Content</h3>
width: -o-calc(100% / 4);
width: calc(100% / 4);
}

@media screen and (max-width: 768px) {
.oppia-state-translation-page {
margin-left: auto;
}
.oppia-translation-tabs {
flex-wrap: wrap;
height: 100px;
}

.oppia-translation-tabs li {
height: 50px;
}

.oppia-audio-recording-bar {
flex-wrap: wrap;
}

.oppia-slider-section {
margin-bottom: 5px;
}
}

.oppia-active-translation-tab div {
background-color: white;
border-bottom: 0;
Expand Down
99 changes: 99 additions & 0 deletions ...ion-editor-page/translation-tab/translator-overview/translator-overview.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import {WindowRef} from 'services/contextual/window-ref.service';
import {ContextService} from 'services/context.service';
import {EntityTranslationsService} from 'services/entity-translations.services';
import {ChangeListService} from '../../services/change-list.service';
import {EntityTranslation} from 'domain/translation/EntityTranslationObjectFactory';
import {TranslatedContent} from 'domain/exploration/TranslatedContentObjectFactory';
import {EntityVoiceoversService} from 'services/entity-voiceovers.services';
Expand Down Expand Up @@ -98,6 +99,7 @@ describe('Translator Overview component', () => {
let routerService: RouterService;
let entityTranslationsService: EntityTranslationsService;
let entityVoiceoversService: EntityVoiceoversService;
let changeListService: ChangeListService;
let windowRef: WindowRef;
let entityTranslation: EntityTranslation;
let voiceoverBackendApiService: VoiceoverBackendApiService;
Expand Down Expand Up @@ -150,6 +152,7 @@ describe('Translator Overview component', () => {
entityTranslationsService = TestBed.inject(EntityTranslationsService);
entityVoiceoversService = TestBed.inject(EntityVoiceoversService);
voiceoverBackendApiService = TestBed.inject(VoiceoverBackendApiService);
changeListService = TestBed.inject(ChangeListService);
windowRef = TestBed.inject(WindowRef);
localStorageService = TestBed.inject(LocalStorageService);
voiceoverPlayerService = TestBed.inject(VoiceoverPlayerService);
Expand Down Expand Up @@ -234,6 +237,102 @@ describe('Translator Overview component', () => {
.and.returnValue(Promise.resolve(entityTranslation));
});

it('should update entity translations with edit translation changes', fakeAsync(() => {
expect(
entityTranslationsService.getHtmlTranslations('hi', ['content1'])
).toEqual(['translated content']);

spyOn(changeListService, 'getTranslationChangeList').and.returnValue([
{
cmd: 'edit_translation',
content_id: 'content1',
language_code: 'hi',
translation: {
content_value: 'new translation',
content_format: 'html',
needs_update: false,
},
},
]);

spyOn(
translationLanguageService,
'getActiveLanguageCode'
).and.returnValue(undefined as unknown as string);

component.ngOnInit();
tick();

expect(
entityTranslationsService.getHtmlTranslations('hi', ['content1'])
).toEqual(['new translation']);
}));

it('should handle mark needs update translation changes', fakeAsync(() => {
let translatedContent = entityTranslation.getWrittenTranslation(
'content1'
) as TranslatedContent;
expect(translatedContent.needsUpdate).toBeFalse();

spyOn(changeListService, 'getTranslationChangeList').and.returnValue([
{
cmd: 'mark_translations_needs_update',
content_id: 'content1',
},
]);

component.ngOnInit();
tick();

translatedContent = entityTranslation.getWrittenTranslation(
'content1'
) as TranslatedContent;
expect(translatedContent.needsUpdate).toBeTrue();
}));

it('should handle mark needs update translation changes for language', fakeAsync(() => {
let translatedContent = entityTranslation.getWrittenTranslation(
'content1'
) as TranslatedContent;
expect(translatedContent.needsUpdate).toBeFalse();

spyOn(changeListService, 'getTranslationChangeList').and.returnValue([
{
cmd: 'mark_translation_needs_update_for_language',
content_id: 'content1',
language_code: 'hi',
},
]);
spyOn(
translationLanguageService,
'getActiveLanguageCode'
).and.returnValue(undefined as unknown as string);

component.ngOnInit();
tick();

translatedContent = entityTranslation.getWrittenTranslation(
'content1'
) as TranslatedContent;
expect(translatedContent.needsUpdate).toBeTrue();
}));

it('should update entity translations with remove translation changes', fakeAsync(() => {
expect(entityTranslation.hasWrittenTranslation('content1')).toBeTrue();

spyOn(changeListService, 'getTranslationChangeList').and.returnValue([
{
cmd: 'remove_translations',
content_id: 'content1',
},
]);

component.ngOnInit();
tick();

expect(entityTranslation.hasWrittenTranslation('content1')).toBeFalse();
}));

it(
'should set language code to previously selected one when there is no' +
'active language code selected',
Expand Down
97 changes: 80 additions & 17 deletions ...loration-editor-page/translation-tab/translator-overview/translator-overview.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,19 @@ import {TranslationStatusService} from '../services/translation-status.service';
import {TranslationTabActiveModeService} from '../services/translation-tab-active-mode.service';
import {ExplorationEditorPageConstants} from 'pages/exploration-editor-page/exploration-editor-page.constants';
import {ContextService} from 'services/context.service';
import {EntityTranslationsService} from 'services/entity-translations.services';
import {LoaderService} from 'services/loader.service';
import {ChangeListService} from 'pages/exploration-editor-page/services/change-list.service';
import {EntityTranslation} from 'domain/translation/EntityTranslationObjectFactory';
import {TranslatedContent} from 'domain/exploration/TranslatedContentObjectFactory';
import {PlatformFeatureService} from 'services/platform-feature.service';
import {
ExplorationChangeEditTranslation,
ExplorationChangeMarkTranslationsNeedsUpdate,
ExplorationChangeMarkTranslationNeedsUpdateForLanguage,
ExplorationChangeRemoveTranslations,
ExplorationTranslationChange,
} from 'domain/exploration/exploration-draft.model';
import {EntityVoiceoversService} from 'services/entity-voiceovers.services';
import {
LanguageAccentMasterList,
Expand Down Expand Up @@ -72,7 +83,9 @@ export class TranslatorOverviewComponent implements OnInit {

constructor(
private contextService: ContextService,
private entityTranslationsService: EntityTranslationsService,
private entityVoiceoversService: EntityVoiceoversService,
private changeListService: ChangeListService,
private explorationLanguageCodeService: ExplorationLanguageCodeService,
private focusManagerService: FocusManagerService,
private graphDataService: GraphDataService,
Expand Down Expand Up @@ -172,14 +185,21 @@ export class TranslatorOverviewComponent implements OnInit {
}

this.loaderService.showLoadingScreen('Loading');
this.translationLanguageService.setActiveLanguageCode(this.languageCode);
this.translationStatusService.refresh();
this.windowRef.nativeWindow.localStorage.setItem(
this.LAST_SELECTED_TRANSLATION_LANGUAGE,
this.languageCode
);
this.routerService.onCenterGraph.emit();
this.loaderService.hideLoadingScreen();
this.entityTranslationsService
.getEntityTranslationsAsync(this.languageCode)
.then(entityTranslations => {
this.updateTranslationWithChangeList(entityTranslations);
this.translationLanguageService.setActiveLanguageCode(
this.languageCode
);
this.translationStatusService.refresh();
this.windowRef.nativeWindow.localStorage.setItem(
this.LAST_SELECTED_TRANSLATION_LANGUAGE,
this.languageCode
);
this.routerService.onCenterGraph.emit();
this.loaderService.hideLoadingScreen();
});

this.entityVoiceoversService.setLanguageCode(this.languageCode);
this.localStorageService.setLastSelectedLanguageAccentCode('');
Expand Down Expand Up @@ -208,6 +228,42 @@ export class TranslatorOverviewComponent implements OnInit {
}
}

updateTranslationWithChangeList(entityTranslation: EntityTranslation): void {
this.changeListService.getTranslationChangeList().forEach(changeDict => {
changeDict = changeDict as ExplorationTranslationChange;
switch (changeDict.cmd) {
case 'edit_translation':
changeDict = changeDict as ExplorationChangeEditTranslation;
if (this.languageCode === changeDict.language_code) {
entityTranslation.updateTranslation(
changeDict.content_id,
TranslatedContent.createFromBackendDict(changeDict.translation)
);
}
break;
case 'remove_translations':
changeDict = changeDict as ExplorationChangeRemoveTranslations;
entityTranslation.removeTranslation(changeDict.content_id);
break;
case 'mark_translations_needs_update':
changeDict =
changeDict as ExplorationChangeMarkTranslationsNeedsUpdate;
entityTranslation.markTranslationAsNeedingUpdate(
changeDict.content_id
);
break;
case 'mark_translation_needs_update_for_language':
changeDict =
changeDict as ExplorationChangeMarkTranslationNeedsUpdateForLanguage;
if (this.languageCode === changeDict.language_code) {
entityTranslation.markTranslationAsNeedingUpdate(
changeDict.content_id
);
}
}
});
}

ngOnInit(): void {
this.LAST_SELECTED_TRANSLATION_LANGUAGE = 'last_selected_translation_lang';
let lastSelectedTranslationLanguage =
Expand All @@ -234,15 +290,22 @@ export class TranslatorOverviewComponent implements OnInit {
: ExplorationEditorPageConstants.DEFAULT_AUDIO_LANGUAGE;
}

this.translationLanguageService.setActiveLanguageCode(this.languageCode);
// We need to refresh the status service once the active language is
// set.
this.translationStatusService.refresh();
this.routerService.onCenterGraph.emit();

this.inTranslationMode = false;
this.inVoiceoverMode = false;
this.refreshDirectiveScope();
this.entityTranslationsService
.getEntityTranslationsAsync(this.languageCode)
.then(entityTranslation => {
this.updateTranslationWithChangeList(entityTranslation);
this.translationLanguageService.setActiveLanguageCode(
this.languageCode
);
// We need to refresh the status service once the active language is
// set.
this.translationStatusService.refresh();
this.routerService.onCenterGraph.emit();

this.inTranslationMode = false;
this.inVoiceoverMode = false;
this.refreshDirectiveScope();
});
this.entityVoiceoversService.setLanguageCode(this.languageCode);

this.voiceoverBackendApiService
Expand Down

0 comments on commit 5915419

Please sign in to comment.