Add versions listing for single string

lib/accent/auth/role_abilities.ex

@@ -30,6 +30,8 @@ defmodule Accent.RoleAbilities do
     show_document
     show_activity
     index_translation_activities
+    index_translation_related
+    index_translation_editions
     index_translation_comments_subscriptions
   )a
 

lib/accent/scopes/translation.ex

@@ -49,6 +49,29 @@ defmodule Accent.Scopes.Translation do
 
   def parse_order(query, _), do: from(query, order_by: [asc: :key])
 
+  def editions(query, translation) do
+    query =
+      from(
+        translations in query,
+        left_join: versions in assoc(translations, :version),
+        where: [revision_id: ^translation.revision_id],
+        order_by: [
+          {:desc_nulls_first, versions.inserted_at}
+        ]
+      )
+
+    if translation.version_id do
+      from(translations in query,
+        where:
+          (translations.source_translation_id == ^translation.source_translation_id or
+             translations.id == ^translation.source_translation_id) and
+            translations.id != ^translation.id
+      )
+    else
+      from(query, where: [source_translation_id: ^translation.id])
+    end
+  end
+
   @doc """
   ## Examples
 

lib/graphql/resolvers/translation.ex

@@ -141,6 +141,16 @@ defmodule Accent.GraphQL.Resolvers.Translation do
     {:ok, translations}
   end
 
+  @spec editions(Translation.t(), map(), struct()) :: {:ok, [Translation.t()]}
+  def editions(translation, _, _) do
+    translations =
+      Translation
+      |> TranslationScope.editions(translation)
+      |> Repo.all()
+
+    {:ok, translations}
+  end
+
   @spec master_translation(Translation.t(), map(), struct()) :: {:ok, Translation.t() | nil}
   def master_translation(translation, _, _) do
     translation

lib/graphql/types/translation.ex

@@ -96,10 +96,19 @@ defmodule Accent.GraphQL.Types.Translation do
       )
     end
 
+    field :editions, list_of(:translation) do
+      resolve(
+        translation_authorize(
+          :index_translation_editions,
+          &Accent.GraphQL.Resolvers.Translation.editions/3
+        )
+      )
+    end
+
     field :related_translations, list_of(:translation) do
       resolve(
         translation_authorize(
-          :index_translation_activities,
+          :index_translation_related,
           &Accent.GraphQL.Resolvers.Translation.related_translations/3
         )
       )

webapp/app/locales/en-us.json

@@ -148,6 +148,7 @@
       "input_placeholder_text": "Search for a string"
     },
     "conflicts_items": {
+      "translations_version_notice": "You are viewing strings to review for the version",
       "correct_all_button": "Mark all strings as reviewed for this language",
       "no_translations": "No strings to review for: {query}",
       "all_reviewed_title": "All reviewed",
@@ -427,8 +428,7 @@
       "jipt": {
         "title": "Just In Place Translations",
         "integration_help": "This steps will walk you throught the setup you need to have in your project to translate your strings in your browser, inside your project.",
-        "integration_link": "See official guides on how to integrate live editing in your website",
-        "script_title": "Add the script at the root of your app",
+        "integration_link": "See official guides on how to integrate live editing in your website ->",
         "add_language_title": "Add the pseudo language to your project",
         "add_language_image_1": "Here is a language like you already have in your project:",
         "add_language_image_2": "Here is the pseudo language named \"accent\" that act as a normal translation in your project:",
@@ -496,6 +496,20 @@
           "azure_storage_container_sas": "SAS URL",
           "url": "URL"
         },
+        "empty_description": {
+          "azure_storage_container": {
+            "title": "Azure Storage Container",
+            "text": "Upload your files in Azure Storage Container to serve them directly in your application"
+          },
+          "discord": {
+            "title": "Discord",
+            "text": "Post your project’s notifications in Discord"
+          },
+          "slack": {
+            "title": "Slack",
+            "text": "Post your project’s notifications in Slack"
+          }
+        },
         "token_how": "How?",
         "github_webhook_url_how": "How?",
         "github_webhook_accent_cli_1": "You need to have a valid <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/mirego/accent/tree/master/cli\">accent-cli</a> setup for the hook to work.",
@@ -890,6 +904,7 @@
       }
     },
     "translation_navigation": {
+      "editions_link_title": "Editions",
       "activities_link_title": "Activities",
       "comments_link_title": "{count, plural, =0 {Conversation} other {Conversation (#)}}",
       "edit_link_title": "Edit",
@@ -920,7 +935,14 @@
         "translated": "To translate"
       }
     },
+    "translation_editions_list": {
+      "no_translations": "Looks like no versions strings were added for your project.",
+      "no_versions": "Try to",
+      "no_versions_link": "create a new version →"
+    },
     "translations_list": {
+      "latest_version_label": "Latest",
+      "translations_version_notice": "You are viewing strings for the version",
       "comments_count": "{count, plural, =0 {No comments} =1 {1 comment} other {# comments}}",
       "save": "Save",
       "empty_text": "Empty text",

webapp/app/locales/fr-ca.json

@@ -164,6 +164,7 @@
       "input_placeholder_text": "Rechercher une chaîne"
     },
     "conflicts_items": {
+      "translations_version_notice": "Vous consultez les textes à réviser de la version",
       "correct_all_button": "Marquer toutes les chaînes comme révisées pour cette langue",
       "no_translations": "Aucune chaîne à examiner pour : {query}",
       "all_reviewed_title": "Tous revus",
@@ -443,8 +444,7 @@
       "jipt": {
         "title": "Traductions JIPT",
         "integration_help": "Cette étape vous guidera à travers la configuration dont vous avez besoin dans votre projet pour traduire vos chaînes dans votre navigateur, à l’intérieur de votre projet.",
-        "integration_link": "Voir les guides officiels sur la façon d’intégrer l’édition en direct dans votre site Web",
-        "script_title": "Ajoutez le script à la racine de votre application",
+        "integration_link": "Voir les guides officiels sur la façon d’intégrer l’édition en direct dans votre site Web ->",
         "add_language_title": "Ajoutez le pseudo langage à votre projet",
         "add_language_image_1": "Voici un langage comme vous en avez déjà dans votre projet :",
         "add_language_image_2": "Voici le pseudo langage nommé \"accent\" qui agit comme une traduction normale dans votre projet :",
@@ -512,6 +512,20 @@
           "azure_storage_container_sas": "SAS URL",
           "url": "URL"
         },
+        "empty_description": {
+          "azure_storage_container": {
+            "title": "Azure Storage Container",
+            "text": "Téléchargez vos fichiers dans Azure Storage Container pour les servir directement dans votre application"
+          },
+          "discord": {
+            "title": "Discord",
+            "text": "Publiez les notifications de votre projet dans Discord"
+          },
+          "slack": {
+            "title": "Slack",
+            "text": "Publiez les notifications de votre projet dans Slack"
+          }
+        },
         "token_how": "Comment?",
         "github_webhook_url_how": "Comment?",
         "github_webhook_accent_cli_1": "Vous devez avoir une configuration <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/mirego/accent/tree/master/cli\">accent-cli</a> valide pour le crochet au travail.",
@@ -663,15 +677,15 @@
       "error": "Version invalide",
       "cancel_button": "Annuler",
       "name_label": "Nom:",
-      "tag_label": "Étiqueter:",
+      "tag_label": "Étiquette:",
       "save_button": "Créer"
     },
     "version_update_form": {
       "title": "Version de mise à jour",
       "error": "Version invalide",
       "cancel_button": "Annuler",
       "name_label": "Nom:",
-      "tag_label": "Étiqueter:",
+      "tag_label": "Étiquette:",
       "save_button": "Mettre à jour"
     },
     "page_title": {
@@ -890,6 +904,7 @@
       }
     },
     "translation_navigation": {
+      "editions_link_title": "Éditions",
       "activities_link_title": "Activités",
       "comments_link_title": "{count, plural, =0 {Conversation} other {Conversation (#)}}",
       "edit_link_title": "Éditer",
@@ -920,8 +935,15 @@
         "translated": "À traduire"
       }
     },
+    "translation_editions_list": {
+      "no_translations": "Aucune autre version du texte n’existe dans votre projet",
+      "no_versions": "Essayez de",
+      "no_versions_link": "créer une nouvelle version →"
+    },
     "translations_list": {
+      "latest_version_label": "Dernière",
       "null_text": "Texte nul",
+      "translations_version_notice": "Vous consultez les textes de la version",
       "comments_count": "{count, plural, =0 {Aucun commentaire} =1 {1 commentaire} other {# commentaires}}",
       "save": "Sauver",
       "empty_text": "Texte vide",

webapp/app/pods/components/activity-item/styles.scss

@@ -388,21 +388,10 @@
 }
 
 .item-version-tag {
-  display: inline-flex;
-  align-items: baseline;
   margin-left: 6px;
   font-size: 11px;
   font-family: var(--font-monospace);
-  color: var(--color-primary);
-  text-decoration: none;
-  background: var(--background-tooltip);
-  padding: 1px 3px;
-  border-radius: var(--border-radius);
-
-  &:focus,
-  &:hover {
-    text-decoration: underline;
-  }
+  text-transform: none;
 }
 
 .item-iconContainer {

webapp/app/pods/components/activity-item/template.hbs

@@ -45,9 +45,11 @@
           {{/if}}
 
           {{#if this.showVersionInfo}}
-            <LinkTo @route='logged-in.project.versions.export' @models={{array @project.id @activity.version.id}} local-class='item-version-tag'>
-              {{@activity.version.tag}}
-            </LinkTo>
+            <AccBadge @link={{true}} @primary={{true}} local-class='item-version-tag'>
+              <LinkTo @route='logged-in.project.versions.export' @models={{array @project.id @activity.version.id}}>
+                {{@activity.version.tag}}
+              </LinkTo>
+            </AccBadge>
           {{/if}}
 
           {{#if this.showRevisionInfo}}

webapp/app/pods/components/conflicts-list/component.ts

@@ -4,6 +4,8 @@ interface Args {
   permissions: Record<string, true>;
   project: any;
   conflicts: any;
+  version: any;
+  versions: any[];
   query: any;
   onCorrect: (conflict: any, textInput: string) => Promise<void>;
   onCopyTranslation: (
@@ -13,4 +15,13 @@ interface Args {
   ) => void;
 }
 
-export default class ConflictsItems extends Component<Args> {}
+export default class ConflictsItems extends Component<Args> {
+  get currentVersion() {
+    if (!this.args.versions) return;
+    if (!this.args.version) return;
+
+    return this.args.versions.find(
+      (version) => version.id === this.args.version
+    );
+  }
+}

webapp/app/pods/components/conflicts-list/styles.scss

@@ -3,6 +3,29 @@
   margin-top: 20px;
 }
 
+.conflicts-items-version {
+  margin: 0 0 15px;
+  padding: 15px;
+  border-radius: var(--border-radius);
+  font-size: 12px;
+  background: hsl(
+    var(--color-blue-hue),
+    var(--color-blue-saturation),
+    var(--color-highlight-lighteness)
+  );
+  color: var(--color-blue);
+}
+
+.conflicts-items-version-tag {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 2px;
+  font-size: 11px;
+  font-family: var(--font-monospace);
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
 .all-reviewed {
   max-width: 400px;
   margin: 100px auto 20px;

webapp/app/pods/components/conflicts-list/template.hbs

@@ -1,4 +1,11 @@
 <ul local-class='conflicts-items'>
+  {{#if this.currentVersion}}
+    <div local-class='conflicts-items-version'>
+
+      {{t 'components.conflicts_items.translations_version_notice'}}
+      <span local-class='conflicts-items-version-tag'>{{this.currentVersion.tag}}</span>
+    </div>
+  {{/if}}
   {{#each @conflicts key='id' as |conflict index|}}
     <ConflictsList::Item
       @index={{index}}

webapp/app/pods/components/conflicts-page/template.hbs

@@ -22,6 +22,8 @@
     <LoadingContent @label={{t 'pods.project.conflicts.loading_content'}} />
   {{else}}
     <ConflictsList
+      @version={{@version}}
+      @versions={{@versions}}
       @permissions={{@permissions}}
       @project={{@project}}
       @revisions={{@revisions}}

webapp/app/pods/components/project-activity/styles.scss

@@ -11,19 +11,22 @@
 .activity-explanation {
   padding: 10px 12px;
   margin: 0 0 20px;
-  background: var(--color-blue);
   font-weight: 300;
   font-size: 13px;
-  color: #fff;
   border-radius: var(--border-radius);
+  background: hsl(
+    var(--color-blue-hue),
+    var(--color-blue-saturation),
+    var(--color-highlight-lighteness)
+  );
+  color: var(--color-blue);
 }
 
 .activity-explanation-label {
   display: block;
   margin-bottom: 4px;
   font-size: 12px;
   font-weight: 500;
-  color: #fff;
 }
 
 .activity-date {

webapp/app/pods/components/project-settings/integrations/component.ts

@@ -12,10 +12,20 @@ interface Args {
 
 export default class Integrations extends Component<Args> {
   @tracked
-  showCreateForm = this.args.project.integrations.length === 0;
+  showCreateForm = false;
+
+  @tracked
+  selectedServiceValue: string | null;
+
+  @tracked
+  showEmptyDescription = this.args.project.integrations.length === 0;
 
   @action
-  toggleCreateForm() {
+  toggleCreateForm(serviceValue: string | PointerEvent) {
+    this.selectedServiceValue =
+      typeof serviceValue == 'string' ? serviceValue : null;
+    this.showEmptyDescription =
+      this.showCreateForm && this.args.project.integrations.length === 0;
     this.showCreateForm = !this.showCreateForm;
   }