Fix Google Translate document entries translate and add form helper e…

…verywhere
mirego · Nov 8, 2023 · 2e9be8a · 2e9be8a
1 parent 468b9c8
commit 2e9be8a
Show file tree

Hide file tree

Showing 40 changed files with 345 additions and 87 deletions.
diff --git a/lib/machine_translations/machine_translations.ex b/lib/machine_translations/machine_translations.ex
@@ -29,11 +29,13 @@ defmodule Accent.MachineTranslations do
     entries
     |> Enum.map(&filter_long_value/1)
     |> Enum.chunk_every(@translation_chunk_size)
-    |> Enum.reduce_while([], fn values, acc ->
+    |> Enum.reduce_while([], fn chunked_entries, acc ->
+      values = Enum.map(chunked_entries, & &1.value)
+
       case Provider.translate(provider, values, source_language.slug, target_language.slug) do
         {:ok, translated_values} ->
           translated_entries =
-            entries
+            chunked_entries
             |> Enum.zip(translated_values)
             |> Enum.map(fn {entry, translated_text} ->
               case translated_text do
@@ -43,7 +45,7 @@ defmodule Accent.MachineTranslations do
               end
             end)
 
-          {:cont, translated_entries ++ acc}
+          {:cont, acc ++ translated_entries}
 
         error ->
           {:halt, error}
@@ -98,13 +100,14 @@ defmodule Accent.MachineTranslations do
 
   defp fetch_config(%{"config" => config}), do: config
 
-  defp filter_long_value(%{value: value}) when value in ["", nil], do: @untranslatable_placeholder
+  defp filter_long_value(%{value: value} = entry) when value in ["", nil],
+    do: %{entry | value: @untranslatable_placeholder}
 
   defp filter_long_value(entry) do
     if String.length(entry.value) > @untranslatable_string_length_limit do
-      @untranslatable_placeholder
+      %{entry | value: @untranslatable_placeholder}
     else
-      entry.value
+      entry
     end
   end
 end
diff --git a/lib/machine_translations/provider/google_translate.ex b/lib/machine_translations/provider/google_translate.ex
@@ -191,13 +191,17 @@ defmodule Accent.MachineTranslations.Provider.GoogleTranslate do
     end
 
     defp parse_auth_config(config) do
-      config = Jason.decode!(Map.fetch!(config, "key"))
-
-      case config do
+      case Jason.decode!(Map.fetch!(config, "key")) do
         %{"project_id" => project_id, "type" => "service_account"} = credentials ->
           {
             "https://translation.googleapis.com/v3/projects/#{project_id}",
-            {:service_account, credentials, [scopes: ["https://www.googleapis.com/auth/cloud-translation"]]}
+            {:service_account, credentials,
+             [
+               scopes: [
+                 "https://www.googleapis.com/auth/cloud-translation",
+                 "https://www.googleapis.com/auth/cloud-platform"
+               ]
+             ]}
           }
       end
     end

diff --git a/webapp/app/pods/components/conflicts-list/item/component.ts b/webapp/app/pods/components/conflicts-list/item/component.ts
@@ -122,12 +122,12 @@ export default class ConflictItem extends Component<Args> {
   }
 
   @action
-  onImprovingPrompt() {
+  onUpdatingText() {
     this.inputDisabled = true;
   }
 
   @action
-  onImprovePrompt(value: string) {
+  onUpdateText(value: string) {
     this.textInput = value;
     this.inputDisabled = false;
   }

diff --git a/webapp/app/pods/components/conflicts-list/item/styles.scss b/webapp/app/pods/components/conflicts-list/item/styles.scss
@@ -8,6 +8,13 @@
   padding: 10px;
   margin-bottom: 15px;
   border-radius: var(--border-radius);
+
+  &:hover {
+    .form-helpers {
+      pointer-events: all;
+      opacity: 1;
+    }
+  }
 }
 
 .revert-button {
@@ -279,6 +286,15 @@
   color: var(--color-black);
 }
 
+.form-helpers {
+  pointer-events: none;
+  opacity: 0;
+  position: relative;
+  z-index: 1;
+  transition: 0.2s ease-in-out;
+  transition-property: opacity;
+}
+
 .conflictedText-references-conflicted-label {
   display: flex;
   align-items: center;

diff --git a/webapp/app/pods/components/conflicts-list/item/template.hbs b/webapp/app/pods/components/conflicts-list/item/template.hbs
@@ -70,15 +70,19 @@
                       </AsyncButton>
                     {{/if}}
 
-                    {{#if (get @permissions 'use_prompt_improve_text')}}
-                      <ImprovePrompt
+                    <div local-class='form-helpers'>
+                      <TranslationEdit::Helpers
+                        @permissions={{@permissions}}
                         @project={{@project}}
+                        @revisions={{@revisions}}
                         @prompts={{@prompts}}
+                        @rtl={{this.revisionTextDirRtl}}
                         @text={{this.textInput}}
-                        @onUpdatingText={{fn this.onImprovingPrompt}}
-                        @onUpdateText={{fn this.onImprovePrompt}}
+                        @sourceLanguageSlug={{this.revisionSlug}}
+                        @onUpdatingText={{fn this.onUpdatingText}}
+                        @onUpdateText={{fn this.onUpdateText}}
                       />
-                    {{/if}}
+                    </div>
 
                     {{#if (get @permissions 'correct_translation')}}
                       <AsyncButton @onClick={{fn this.correct}} @loading={{this.loading}} class='button button--iconOnly button--filled button--green'>

diff --git a/webapp/app/pods/components/conflicts-list/template.hbs b/webapp/app/pods/components/conflicts-list/template.hbs
@@ -3,6 +3,7 @@
     <ConflictsList::Item
       @index={{index}}
       @permissions={{@permissions}}
+      @revisions={{@revisions}}
       @project={{@project}}
       @prompts={{@prompts}}
       @conflict={{conflict}}

diff --git a/webapp/app/pods/components/conflicts-page/template.hbs b/webapp/app/pods/components/conflicts-page/template.hbs
@@ -24,6 +24,7 @@
     <ConflictsList
       @permissions={{@permissions}}
       @project={{@project}}
+      @revisions={{@revisions}}
       @prompts={{@prompts}}
       @conflicts={{@translations.entries}}
       @query={{@query}}

diff --git a/webapp/app/pods/components/dashboard-revisions/styles.scss b/webapp/app/pods/components/dashboard-revisions/styles.scss
@@ -37,7 +37,7 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  margin: 30px auto 60px;
+  margin: 20px auto 40px;
 }
 
 .numberStat-reviewPercentage {

diff --git a/webapp/app/pods/components/documents-list/item/styles.scss b/webapp/app/pods/components/documents-list/item/styles.scss
@@ -105,20 +105,6 @@
   opacity: 0.4;
 }
 
-.item-subtitle {
-  display: inline-block;
-  margin-left: -4px;
-  font-size: 14px;
-  font-weight: normal;
-  color: var(--color-black);
-  opacity: 0.3;
-}
-
-.item-subtitle-label {
-  font-size: 13px;
-  font-weight: normal;
-}
-
 .textInput {
   @extend %textInput;
   padding: 5px 8px 4px;

diff --git a/webapp/app/pods/components/documents-list/item/template.hbs b/webapp/app/pods/components/documents-list/item/template.hbs
@@ -38,7 +38,6 @@
 
                 <LinkTo @route='logged-in.project.files.export' @models={{array @project.id @document.id}} local-class='item-document'>
                   {{@document.path}}
-                  <span local-class='item-subtitle'>.{{this.documentFormatItem.extension}}</span>
                 </LinkTo>
               {{/if}}
             </span>

diff --git a/webapp/app/pods/components/improve-prompt/styles.scss b/webapp/app/pods/components/improve-prompt/styles.scss
@@ -19,6 +19,8 @@
 button.button {
   padding-left: 10px;
   padding-right: 10px;
+  border-radius: var(--border-radius);
+
   &:focus,
   &:hover {
     transform: translate3d(0, 0, 0);
@@ -47,7 +49,6 @@ button.button {
   position: relative;
   display: flex;
   align-items: center;
-  background: var(--content-background);
 
   > .button {
     transition: opacity 0.2s ease-in-out;
@@ -70,7 +71,7 @@ button.button {
     .prompt-button-quick-access {
       opacity: 1;
       right: 36px;
-      padding: 0 5px;
+      padding: 0 7px;
       top: -1px;
       pointer-events: all;
     }

diff --git a/webapp/app/pods/components/improve-prompt/template.hbs b/webapp/app/pods/components/improve-prompt/template.hbs
@@ -2,12 +2,7 @@
   <div local-class='prompt-button' tabindex='0'>
     <div local-class='prompt-button-quick-access' data-rtl={{@rtl}}>
       {{#each this.quickAccessPrompts as |prompt|}}
-        <AsyncButton
-          title={{prompt.name}}
-          @onClick={{(perform this.submitTask prompt.id)}}
-          @loading={{this.improveTextTask.isPending}}
-          class='button button--iconOnly button--filled button--borderless button--white'
-        >
+        <AsyncButton title={{prompt.name}} @onClick={{(perform this.submitTask prompt.id)}} class='button button--iconOnly button--filled button--borderless button--white'>
           {{prompt.quickAccess}}
         </AsyncButton>
       {{/each}}

diff --git a/webapp/app/pods/components/inline-machine-translate/component.ts b/webapp/app/pods/components/inline-machine-translate/component.ts
@@ -0,0 +1,45 @@
+import Component from '@glimmer/component';
+import {inject as service} from '@ember/service';
+import {dropTask} from 'ember-concurrency-decorators';
+import {taskFor} from 'ember-concurrency-ts';
+import Apollo from 'accent-webapp/services/apollo';
+
+import projectTranslateTextQuery from 'accent-webapp/queries/translate-text-project';
+
+interface Args {
+  text: string;
+  sourceLanguageSlug: string;
+  project: {id: string};
+  onUpdatingText: () => void;
+  onUpdateText: (value: string) => void;
+}
+
+export default class ImprovePrompt extends Component<Args> {
+  @service('apollo')
+  apollo: Apollo;
+
+  get isSubmitting() {
+    return taskFor(this.submitTask).isRunning;
+  }
+
+  @dropTask
+  *submitTask(targetLanguageSlug: string) {
+    this.args.onUpdatingText();
+
+    const variables = {
+      projectId: this.args.project.id,
+      text: this.args.text,
+      sourceLanguageSlug: this.args.sourceLanguageSlug,
+      targetLanguageSlug,
+    };
+
+    const {data} = yield this.apollo.client.query({
+      query: projectTranslateTextQuery,
+      variables,
+    });
+
+    if (data.viewer.project.translatedText?.text) {
+      this.args.onUpdateText(data.viewer.project.translatedText?.text);
+    }
+  }
+}
diff --git a/webapp/app/pods/components/inline-machine-translate/styles.scss b/webapp/app/pods/components/inline-machine-translate/styles.scss
@@ -0,0 +1,74 @@
+.prompt-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  > .button {
+    transition: opacity 0.2s ease-in-out;
+    box-shadow: none;
+    opacity: 0.7;
+    border-radius: var(--border-radius);
+  }
+
+  > button:focus,
+  > button:hover {
+    transform: translate3d(0, 0, 0);
+  }
+
+  &:focus,
+  &:hover {
+    outline: none;
+
+    > .button {
+      opacity: 1;
+    }
+
+    .prompt-button-quick-access[data-rtl] {
+      left: 36px;
+      right: auto;
+    }
+
+    .prompt-button-quick-access {
+      opacity: 1;
+      right: 36px;
+      padding: 0 10px;
+      pointer-events: all;
+    }
+  }
+}
+
+.prompt-button-quick-access[data-rtl] {
+  left: 0;
+  right: auto;
+  justify-content: flex-start;
+}
+
+.prompt-button-quick-access {
+  background: var(--input-background);
+  opacity: 0;
+  pointer-events: none;
+  right: 0;
+  display: flex;
+  gap: 4px;
+  justify-content: flex-end;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  transition: all 0.2s ease-in-out;
+
+  > button {
+    font-size: 11px;
+    flex-shrink: 0;
+    font-weight: normal;
+  }
+
+  > button:focus,
+  > button:hover {
+    transform: translate3d(0, 0, 0);
+  }
+
+  > button :global(.label) {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
diff --git a/webapp/app/pods/components/inline-machine-translate/template.hbs b/webapp/app/pods/components/inline-machine-translate/template.hbs
@@ -0,0 +1,15 @@
+{{#if @languages}}
+  <div local-class='prompt-button' tabindex='0'>
+    <div local-class='prompt-button-quick-access' data-rtl={{@rtl}}>
+      {{#each @languages as |language|}}
+        <AsyncButton title={{language.name}} @onClick={{(perform this.submitTask language.slug)}} class='button button--iconOnly button--filled button--borderless button--white'>
+          {{language.slug}}
+        </AsyncButton>
+      {{/each}}
+    </div>
+
+    <button local-class='button' class='button button--iconOnly button--borderless button--filled button--white'>
+      {{inline-svg '/assets/language.svg' class='button-icon'}}
+    </button>
+  </div>
+{{/if}}