Improve Machine auto translate dialog UI #5423

surveyjs · May 2, 2024 · ee8408f · ee8408f
1 parent 9dfcc42
commit ee8408f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 14 deletions.
diff --git a/packages/survey-creator-core/src/components/tabs/translation.ts b/packages/survey-creator-core/src/components/tabs/translation.ts
@@ -1392,8 +1392,9 @@ export class TranslationEditor {
  this.fillFromLocales();
  const action = this.translation.stringsSurvey.navigationBar.getActionById("svc-translation-fromlocale");
  if(!!action) {
- action.visible = this.fromLocales.length > 0;
+ action.enabled = this.fromLocales.length > 0;
  }
+ this.updateMatricesColumns();
  }
  public get translation(): Translation { return this.translationValue; }
  public showDialog(): void {
@@ -1490,12 +1491,14 @@ export class TranslationEditor {
  matrix.columns.splice(colIndex, 0, column);
  }
  if(updateHeader) {
- matrix.showHeader = matrix.columns.length > 2;
- if(matrix.showHeader) {
-  const cols = matrix.columns;
-  cols[0].title = this.translation.getLocaleName("");
+ matrix.showHeader = true;
+ const cols = matrix.columns;
+ cols[0].title = this.translation.getLocaleName("");
+ if(cols.length > 2) {
  cols[1].title = this.getHeaderTitle("translationSource", cols[1].name);
  cols[2].title = this.getHeaderTitle("translationTarget", cols[2].name);
+ } else {
+ cols[1].title = this.getHeaderTitle("translationTarget", cols[1].name);
  }
  }
  }
@@ -1512,19 +1515,24 @@ export class TranslationEditor {
  private setupNavigationButtons(survey: SurveyModel): void {
  const actions = survey.navigationBar.actions;
  actions.splice(0, actions.length);
+ survey.addNavigationItem(this.createLocaleFromAction());
+ const actionCss = "svc-action-bar-item--right sv-action-bar-item--secondary";
  if (this.options.getHasMachineTranslation()) {
- survey.addNavigationItem(this.createLocaleFromAction());
  survey.addNavigationItem(new Action({
  id: "svc-translation-machine",
  iconName: "icon-language",
- css: "svc-translation-machine",
+ css: actionCss,
  locTitleName: "ed.translateUsigAI",
  component: "sv-action-bar-item",
  action: () => { this.doMachineTranslation(); }
  }));
  }
- survey.addNavigationItem(createImportCSVAction(() => { this.translation.importFromCSVFileDOM(); }, false, true));
- survey.addNavigationItem(createExportCSVAction(() => { this.translation.exportToCSVFileUI(); }, true));
+ const importAction = createImportCSVAction(() => { this.translation.importFromCSVFileDOM(); }, false, true);
+ importAction.css = actionCss;
+ const exportAction = createExportCSVAction(() => { this.translation.exportToCSVFileUI(); }, true);
+ exportAction.css = actionCss;
+ survey.addNavigationItem(importAction);
+ survey.addNavigationItem(exportAction);
  survey.showNavigationButtons = "top";
  }
  private createStringsToTranslate(): Array<TranslationItem> {

diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts
@@ -56,6 +56,14 @@ require("./components/creator.scss");
 require("./components/string-editor.scss");
 require("./creator-theme/creator.scss");
 
+class SurveyTranslationStringsModel extends SurveyModel {
+ protected createNavigationBar(): ActionContainer {
+ const res = new AdaptiveActionContainer();
+ res.setItems(this.createNavigationActions());
+ return res;
+ }
+}
+
 export interface IKeyboardShortcut {
  name?: string;
  affectedTab?: string;
@@ -2066,6 +2074,9 @@ export class SurveyCreatorModel extends Base
  return !!res ? res : "internal-use";
  }
  protected createSurveyCore(json: any = {}, reason: string): SurveyModel {
+ if(reason === "translation_strings") {
+ return new SurveyTranslationStringsModel(json);
+ }
  return new SurveyModel(json);
  }
  private _stateValue: string;

diff --git a/packages/survey-creator-core/tests/tabs/translation-editor.tests.ts b/packages/survey-creator-core/tests/tabs/translation-editor.tests.ts
@@ -194,8 +194,10 @@ test("Implement machine translation for Creator", () => {
  tabTranslation.activate();
  let editor = tabTranslation.model.createTranslationEditor("fr");
  let actions = editor.translation.stringsSurvey.navigationBar.actions;
- expect(actions).toHaveLength(2);
- expect(actions[0].id).toBe("svc-translation-import");
+ expect(actions).toHaveLength(3);
+ expect(actions[0].id).toBe("svc-translation-fromlocale");
+ expect(actions[0].enabled).toBeFalsy();
+ expect(actions[1].id).toBe("svc-translation-import");
  creator.onMachineTranslate.add((sender, options) => {
  options.callback(["Title fr", "Desc fr"]);
  });
@@ -204,7 +206,7 @@ test("Implement machine translation for Creator", () => {
  actions = editor.translation.stringsSurvey.navigationBar.actions;
  expect(actions).toHaveLength(4);
  expect(actions[0].id).toBe("svc-translation-fromlocale");
- expect(actions[0].visible).toBeFalsy();
+ expect(actions[0].enabled).toBeFalsy();
  expect(actions[1].id).toBe("svc-translation-machine");
  actions[1].action();
  editor.apply();
@@ -288,7 +290,7 @@ test("Machine translation from non default locale - UI", () => {
  expect(editor.translation.root.allLocItems).toHaveLength(3);
  expect(editor.translation.getVisibleLocales()).toHaveLength(1);
  let matrix = <QuestionMatrixDropdownModel>editor.translation.stringsSurvey.getAllQuestions()[0];
- expect(matrix.showHeader).toBeFalsy();
+ expect(matrix.showHeader).toBeTruthy();
  expect(matrix.columns).toHaveLength(2);
  expect(matrix.columns[1].name).toBe("es");
 
@@ -317,7 +319,7 @@ test("Machine translation from non default locale - UI", () => {
  editor.setFromLocale("");
  expect(editor.translation.getVisibleLocales()).toHaveLength(1);
  matrix = <QuestionMatrixDropdownModel>editor.translation.stringsSurvey.getAllQuestions()[0];
- expect(matrix.showHeader).toBeFalsy();
+ expect(matrix.showHeader).toBeTruthy();
  expect(matrix.columns).toHaveLength(2);
  expect(matrix.columns[1].name).toBe("es");
 });