From 4079f5a01b0f1a392abf9cd45658940cc227d8fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20Pr=C3=A9vost?= Date: Thu, 28 Mar 2024 21:04:26 -0400 Subject: [PATCH] Add fix message replacement in translation form and lint page --- .../controllers/export_controller_test.exs | 3 +- .../export_jipt_controller_test.exs | 3 +- .../lint-translations-page/component.ts | 28 ++++++++++++ .../lint-translations-page/item/component.ts | 9 ++++ .../app/styles/components/async-button.scss | 7 +++ .../components/lint-translations-page.scss | 11 +++-- .../lint-translations-page/item.scss | 24 ++++++++++ .../components/translation-edit/form.scss | 9 ++++ webapp/app/styles/html-components/button.scss | 12 +++++ .../components/lint-translations-page.hbs | 4 +- .../lint-translations-page/item.hbs | 44 +++++++++++++++---- .../components/translation-edit/form.hbs | 4 +- webapp/public/assets/arrow-right.svg | 12 +++++ webapp/public/assets/arrow-up.svg | 12 +++++ webapp/public/assets/check-circle.svg | 13 ++++++ webapp/public/assets/check-square.svg | 13 ++++++ 16 files changed, 192 insertions(+), 16 deletions(-) create mode 100644 webapp/public/assets/arrow-right.svg create mode 100644 webapp/public/assets/arrow-up.svg create mode 100644 webapp/public/assets/check-circle.svg create mode 100644 webapp/public/assets/check-square.svg diff --git a/test/web/controllers/export_controller_test.exs b/test/web/controllers/export_controller_test.exs index 5931549a..96364a20 100644 --- a/test/web/controllers/export_controller_test.exs +++ b/test/web/controllers/export_controller_test.exs @@ -4,7 +4,6 @@ defmodule AccentTest.ExportController do alias Accent.Document alias Accent.Language alias Accent.Project - alias Accent.Repo alias Accent.Revision alias Accent.Translation alias Accent.User @@ -308,6 +307,8 @@ defmodule AccentTest.ExportController do end if Langue.Formatter.Rails.enabled?() do + alias Accent.Repo + test "export with language overrides", %{conn: conn, project: project, revision: revision} do revision = Repo.update!(Ecto.Changeset.change(revision, %{slug: "testtest"})) document = Factory.insert(Document, project_id: project.id, path: "test2", format: "rails_yml") diff --git a/test/web/controllers/export_jipt_controller_test.exs b/test/web/controllers/export_jipt_controller_test.exs index a1a52510..2303c222 100644 --- a/test/web/controllers/export_jipt_controller_test.exs +++ b/test/web/controllers/export_jipt_controller_test.exs @@ -4,7 +4,6 @@ defmodule AccentTest.ExportJIPTController do alias Accent.Document alias Accent.Language alias Accent.Project - alias Accent.Repo alias Accent.Revision alias Accent.Translation alias Accent.User @@ -125,6 +124,8 @@ defmodule AccentTest.ExportJIPTController do end if Langue.Formatter.Rails.enabled?() do + alias Accent.Repo + test "export with language overrides", %{conn: conn, project: project, revision: revision, language: language} do revision = Repo.update!(Ecto.Changeset.change(revision, %{slug: "testtest"})) document = Factory.insert(Document, project_id: project.id, path: "test2", format: "rails_yml") diff --git a/webapp/app/components/lint-translations-page/component.ts b/webapp/app/components/lint-translations-page/component.ts index 7a237634..68f91595 100644 --- a/webapp/app/components/lint-translations-page/component.ts +++ b/webapp/app/components/lint-translations-page/component.ts @@ -1,4 +1,9 @@ +import {inject as service} from '@ember/service'; +import {tracked} from '@glimmer/tracking'; import Component from '@glimmer/component'; +import {restartableTask} from 'ember-concurrency'; +import translationUpdateQuery from 'accent-webapp/queries/update-translation'; +import Apollo from 'accent-webapp/services/apollo'; interface Args { project: any; @@ -12,6 +17,12 @@ interface Stat { } export default class LintTranslationsPage extends Component { + @service('apollo') + apollo: Apollo; + + @tracked + fixLintMessageRunningTranslationId: string | null = null; + get lintTranslationsStatsCount() { return this.lintTranslationsStats.reduce( (total, stat) => stat.count + total, @@ -37,4 +48,21 @@ export default class LintTranslationsPage extends Component { count })) as Stat[]; } + + fixLintMessageTask = restartableTask( + async (translation: {id: string}, message: any) => { + this.fixLintMessageRunningTranslationId = translation.id; + + await this.apollo.client.mutate({ + mutation: translationUpdateQuery, + refetchQueries: ['Lint'], + variables: { + text: message.replacement.value, + translationId: translation.id + } + }); + + this.fixLintMessageRunningTranslationId = null; + } + ); } diff --git a/webapp/app/components/lint-translations-page/item/component.ts b/webapp/app/components/lint-translations-page/item/component.ts index 6ba3f2fd..545cf6ee 100644 --- a/webapp/app/components/lint-translations-page/item/component.ts +++ b/webapp/app/components/lint-translations-page/item/component.ts @@ -4,6 +4,7 @@ import parsedKeyProperty from 'accent-webapp/computed-macros/parsed-key'; interface Args { lintTranslation: any; project: any; + fix?: (lintTranslation: any, message: any) => void; } const escape = document.createElement('textarea'); @@ -15,6 +16,14 @@ const escapeHTML = (html: string): string => { export default class LintTranslationsPageItem extends Component { translationKey = parsedKeyProperty(this.args.lintTranslation.translation.key); + get allReplacable() { + return this.args.lintTranslation.messages.every( + (message: {replacement: object | null}) => { + return Boolean(message.replacement); + } + ); + } + get messages() { const mapSet = new Set(); return this.args.lintTranslation.messages.flatMap((message: any) => { diff --git a/webapp/app/styles/components/async-button.scss b/webapp/app/styles/components/async-button.scss index 8941d323..2b4e2cec 100644 --- a/webapp/app/styles/components/async-button.scss +++ b/webapp/app/styles/components/async-button.scss @@ -26,6 +26,13 @@ } } + &:global(.button--iconOnly) { + .label { + padding-left: 5px; + padding-right: 5px; + } + } + &:global(.button--small) { &.button--loading { .loading { diff --git a/webapp/app/styles/components/lint-translations-page.scss b/webapp/app/styles/components/lint-translations-page.scss index a7b86be5..a79c0a65 100644 --- a/webapp/app/styles/components/lint-translations-page.scss +++ b/webapp/app/styles/components/lint-translations-page.scss @@ -23,6 +23,12 @@ .item { margin-bottom: 20px; + transition: 0.2s ease-in-out; + transition-property: opacity; +} + +.item--fixing { + opacity: 0.5; } .icon-warning { @@ -46,10 +52,9 @@ .stats-item { display: inline-flex; gap: 4px; - padding: 2px 12px; + padding: 4px 12px; border-radius: 30px; - border: 1px solid var(--background-light-highlight); - background: var(--background-light); + background: var(--background-light-highlight); color: var(--text-color-normal); font-size: 12px; cursor: default; diff --git a/webapp/app/styles/components/lint-translations-page/item.scss b/webapp/app/styles/components/lint-translations-page/item.scss index 63c1687b..261e14bf 100644 --- a/webapp/app/styles/components/lint-translations-page/item.scss +++ b/webapp/app/styles/components/lint-translations-page/item.scss @@ -13,11 +13,26 @@ flex-direction: column; } +.messages-item { + display: flex; + gap: 4px; + align-items: center; +} + .description { color: var(--color-error); font-size: 12px; } +.button-fix { + width: max-content; + + &:focus, + &:hover { + --button-text-hover-color: var(--color-green); + } +} + .item-language { font-size: 11px; font-weight: bold; @@ -94,6 +109,15 @@ } } +.item-diff-text { + font-size: 13px; + color: var(--text-color-normal); + + > div { + display: inline; + } +} + .item-text { strong { color: var(--color-green); diff --git a/webapp/app/styles/components/translation-edit/form.scss b/webapp/app/styles/components/translation-edit/form.scss index df7e8681..66962adf 100644 --- a/webapp/app/styles/components/translation-edit/form.scss +++ b/webapp/app/styles/components/translation-edit/form.scss @@ -187,3 +187,12 @@ margin-right: 6px; stroke: var(--color-black); } + +.lint-messages { + transition: 0.2s ease-in-out; + transition-property: opacity; +} + +.lint-messages--loading { + opacity: 0.5; +} diff --git a/webapp/app/styles/html-components/button.scss b/webapp/app/styles/html-components/button.scss index 97d8a4d1..ad7c3b0f 100644 --- a/webapp/app/styles/html-components/button.scss +++ b/webapp/app/styles/html-components/button.scss @@ -76,6 +76,18 @@ } } +.button--blue { + --button-text-color: var(--color-blue); +} + +.button--green { + --button-text-color: var(--color-green); +} + +.button--grey { + --button-text-color: var(--color-grey); +} + .button--grey, .button--success, .button--black, diff --git a/webapp/app/templates/components/lint-translations-page.hbs b/webapp/app/templates/components/lint-translations-page.hbs index e41722bb..f1263429 100644 --- a/webapp/app/templates/components/lint-translations-page.hbs +++ b/webapp/app/templates/components/lint-translations-page.hbs @@ -15,8 +15,8 @@ {{#each @lintTranslations key='id' as |lintTranslation|}} -
- +
+
{{/each}}
diff --git a/webapp/app/templates/components/lint-translations-page/item.hbs b/webapp/app/templates/components/lint-translations-page/item.hbs index 88d52aa6..dfcc9493 100644 --- a/webapp/app/templates/components/lint-translations-page/item.hbs +++ b/webapp/app/templates/components/lint-translations-page/item.hbs @@ -2,13 +2,15 @@
    {{#each this.messages as |message|}} - - {{#if message.message}} - {{message.message}} - {{else}} - {{t (concat 'components.translation_edit.lint_message.checks.' message.check)}} - {{/if}} - +
  • + + {{#if message.message}} + {{message.message}} + {{else}} + {{t (concat 'components.translation_edit.lint_message.checks.' message.check)}} + {{/if}} + +
    • {{/each}}
@@ -29,6 +31,32 @@
{{/if}} -
{{{this.annotatedText}}}
+ {{#if this.allReplacable}} +
    + {{#each this.messages as |message|}} + {{#if message.replacement}} +
  • +
    + {{string-diff message.replacement.value message.text}} +
    + + {{#if @changeText}} + + {{/if}} + + {{#if @fixText}} + + {{/if}} +
    • + {{/if}} + {{/each}} +
+ {{else}} +
{{{this.annotatedText}}}
+ {{/if}} {{/if}} \ No newline at end of file diff --git a/webapp/app/templates/components/translation-edit/form.hbs b/webapp/app/templates/components/translation-edit/form.hbs index 52d3bc61..db911803 100644 --- a/webapp/app/templates/components/translation-edit/form.hbs +++ b/webapp/app/templates/components/translation-edit/form.hbs @@ -115,5 +115,7 @@ {{/if}} - +
+ +
\ No newline at end of file diff --git a/webapp/public/assets/arrow-right.svg b/webapp/public/assets/arrow-right.svg new file mode 100644 index 00000000..86c6add8 --- /dev/null +++ b/webapp/public/assets/arrow-right.svg @@ -0,0 +1,12 @@ + + + diff --git a/webapp/public/assets/arrow-up.svg b/webapp/public/assets/arrow-up.svg new file mode 100644 index 00000000..00b3f5ca --- /dev/null +++ b/webapp/public/assets/arrow-up.svg @@ -0,0 +1,12 @@ + + + diff --git a/webapp/public/assets/check-circle.svg b/webapp/public/assets/check-circle.svg new file mode 100644 index 00000000..5088715d --- /dev/null +++ b/webapp/public/assets/check-circle.svg @@ -0,0 +1,13 @@ + + + + diff --git a/webapp/public/assets/check-square.svg b/webapp/public/assets/check-square.svg new file mode 100644 index 00000000..8ed1d488 --- /dev/null +++ b/webapp/public/assets/check-square.svg @@ -0,0 +1,13 @@ + + + +