Configure frozen fields post-action in web UI

This change is part of story #12189

We had to bump the version of `vue-test-utils` and `vue` due to a bug with
the `mount()` methods and nested components. You can find the reference
here on GitHub at vuejs/vue-test-utils#1054.

Change-Id: I8bd0538ebf7e0f434e8fa2554ec202ac3ede1376

Author: Erwyn

plugins/tracker/www/scripts/package-lock.json

@@ -26,12 +26,12 @@
     "pump": "^3.0.0",
     "readable-stream": "^2.3.6",
     "sprintf-js": "^1.1.1",
-    "vue": "^2.5.17",
+    "vue": "^2.5.18",
     "vue-gettext": "^2.1.0",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
-    "@vue/test-utils": "^1.0.0-beta.27",
+    "@vue/test-utils": "^1.0.0-beta.29",
     "angular-mocks": "^1.7.4",
     "gulp": "^3.9.1",
     "gulp-angular-gettext": "^2.2.0",

plugins/tracker/www/scripts/package.json

@@ -25,6 +25,9 @@ msgstr "Ajouter une action"
 msgid "Add another action"
 msgstr "Ajouter une nouvelle action"
 
+msgid "Advanced configuration is incompatible with this post-action"
+msgstr "La configuration avancée est incompatible avec cette post-action"
+
 msgid "An error occurred"
 msgstr "Une erreur est survenue"
 
@@ -74,6 +77,9 @@ msgstr "Modifier ou supprimer le champ"
 msgid "Change the value of a field"
 msgstr "Modifier la valeur d'un champ"
 
+msgid "Change the value of a field (incompatible)"
+msgstr "Modifier la valeur d'un champ (incompatible)"
+
 msgid "Choose a field"
 msgstr "Choisissez un champ"
 
@@ -128,9 +134,21 @@ msgstr "Champ"
 msgid "Field(s) that must not be empty"
 msgstr "Le(s) champs suivant(s) doivent obligatoirement avoir une valeur"
 
+msgid "Fields that will be set as read-only"
+msgstr "Champs qui seront passés en lecture seule"
+
 msgid "Floats"
 msgstr "Flottants"
 
+msgid "Freeze fields"
+msgstr "Figer des champs"
+
+msgid "Freeze fields (already used)"
+msgstr "Figer des champs (déjà utilisé)"
+
+msgid "Freeze fields (incompatible)"
+msgstr "Figer des champs (incompatible)"
+
 msgid "Fully deactivate the workflow"
 msgstr "Désactiver complètement le workflow"
 
@@ -139,7 +157,9 @@ msgstr "Groupes autorisés à effectuer la transition"
 
 msgid ""
 "If you have any post actions of type \"Frozen Fields\", they will be deleted."
-msgstr "Si vous avez configuré des post-actions de type \"Champs Figés\", elles seront supprimées."
+msgstr ""
+"Si vous avez configuré des post-actions de type \"Champs Figés\", elles "
+"seront supprimées."
 
 msgid ""
 "In order to configure transitions rules on this tracker, your first need to "
@@ -168,6 +188,9 @@ msgstr "Nouvelle valeur"
 msgid "No action is currently defined."
 msgstr "Aucune action n'est encore définie."
 
+msgid "Other actions"
+msgstr "Autres actions"
+
 msgid "Please choose"
 msgstr "Veuillez choisir"
 
@@ -237,6 +260,9 @@ msgid "Tuleap will automatically pass the following parameters to the job:"
 msgstr ""
 "Tuleap va automatiquement transmettre les paramètres suivants à la tâche :"
 
+msgid "Unique actions"
+msgstr "Actions uniques"
+
 msgid "Use advanced configuration"
 msgstr "Utiliser la configuration avancée"
 
@@ -250,6 +276,9 @@ msgstr ""
 msgid "Wait a minute..."
 msgstr "Attendez une minute..."
 
+msgid "You can only have this post-action once."
+msgstr "Vous ne pouvez avoir cette post-action qu'une seule fois."
+
 msgid ""
 "You're about to switch to advanced configuration mode.\n"
 "                Each transition will be configurable independently.\n"
@@ -271,6 +300,9 @@ msgstr ""
 "Merci de bien vouloir vérifier les configurations mises en place pour chaque "
 "état."
 
+msgid "Your tracker doesn't seem to have available writable fields"
+msgstr "Votre tracker ne semble pas avoir de champs inscriptibles disponibles."
+
 msgid "Your tracker doesn't seem to have integer, float or date fields."
 msgstr "Votre tracker ne semble pas avoir de champs entier, flottant ou date."
 

plugins/tracker/www/scripts/workflow-transitions/po/fr.po

@@ -31,11 +31,13 @@ import "./components/TransitionMatrixContent.spec.js";
 import "./components/TransitionRulesEnforcementWarning.spec.js";
 import "./components/BaseTrackerWorkflowTransitions.spec.js";
 import "./components/TransitionDeleter.spec.js";
+import "./components/TransitionModal/PostAction/PostAction.spec.js";
 import "./components/TransitionModal/PostAction/RunJobAction.spec.js";
 import "./components/TransitionModal/PostAction/IntInput.spec.js";
 import "./components/TransitionModal/PostAction/DateInput.spec.js";
 import "./components/TransitionModal/PostAction/SetValueAction.spec.js";
 import "./components/TransitionModal/PostAction/FloatInput.spec.js";
+import "./components/TransitionModal/PostAction/FrozenFieldsAction.spec.js";
 import "./components/TransitionModal/FilledPreConditionsSection.spec.js";
 import "./components/TransitionModal/PostActionsSection.spec.js";
 import "./components/FirstConfiguration/FirstConfigurationSections.spec.js";

plugins/tracker/www/scripts/workflow-transitions/src/app.spec.js

@@ -0,0 +1,89 @@
+/*
+ * Copyright (c) Enalean, 2019 - Present. All Rights Reserved.
+ *
+ *  This file is a part of Tuleap.
+ *
+ *  Tuleap is free software; you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 2 of the License, or
+ *  (at your option) any later version.
+ *
+ *  Tuleap is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with Tuleap. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { mount } from "@vue/test-utils";
+
+import FrozenFieldsAction from "./FrozenFieldsAction.vue";
+import localVue from "../../../support/local-vue.js";
+import { createStoreMock } from "../../../support/store-wrapper.spec-helper.js";
+import { create } from "../../../support/factories.js";
+
+describe("FrozenFieldsAction", () => {
+    let store;
+    const date_field_id = 43;
+    const date_field = create("field", { field_id: date_field_id, type: "date" });
+    const int_field_id = 44;
+    const int_field = create("field", { field_id: int_field_id, type: "int" });
+    const float_field_id = 45;
+    const float_field = create("field", { field_id: float_field_id, type: "float" });
+    const status_field_id = 46;
+    const status_field = create("field", { field_id: status_field_id, type: "sb" });
+    let wrapper;
+
+    beforeEach(() => {
+        const current_tracker = {
+            fields: [date_field, int_field, float_field, status_field]
+        };
+
+        const store_options = {
+            state: {
+                transitionModal: {
+                    current_transition: create("transition"),
+                    is_modal_save_running: false
+                },
+                current_tracker: current_tracker
+            },
+            getters: {
+                "transitionModal/set_value_action_fields": [date_field, int_field, float_field],
+                "transitionModal/post_actions": [],
+                current_workflow_field: status_field,
+                is_workflow_advanced: false
+            }
+        };
+
+        store = createStoreMock(store_options);
+
+        wrapper = mount(FrozenFieldsAction, {
+            stubs: ["multi-select"],
+            mocks: { $store: store },
+            propsData: { post_action: create("post_action", "presented") },
+            localVue
+        });
+    });
+
+    afterEach(() => store.reset());
+
+    it("disables the option when no fields are available", () => {
+        store.state.current_tracker = null;
+
+        expect(wrapper.find("[data-test=freeze_fields]").attributes().disabled).toBeTruthy();
+    });
+
+    it("disables the option when post-action is already used", () => {
+        store.getters["transitionModal/post_actions"] = [
+            create("post_action", { type: "frozen_fields" })
+        ];
+
+        expect(wrapper.find("[data-test=freeze_fields").attributes().disabled).toBeTruthy();
+    });
+
+    it("should not show the status field as available", () => {
+        expect(wrapper.find(`[data-test=field_${status_field_id}]`).exists()).toBeFalsy();
+    });
+});

plugins/tracker/www/scripts/workflow-transitions/src/components/TransitionModal/PostAction/FrozenFieldsAction.spec.js

@@ -0,0 +1,99 @@
+<!--
+  - Copyright (c) Enalean, 2019 - Present. All Rights Reserved.
+  -
+  - This file is a part of Tuleap.
+  -
+  - Tuleap is free software; you can redistribute it and/or modify
+  - it under the terms of the GNU General Public License as published by
+  - the Free Software Foundation; either version 2 of the License, or
+  - (at your option) any later version.
+  -
+  - Tuleap is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU General Public License for more details.
+  -
+  - You should have received a copy of the GNU General Public License
+  - along with Tuleap. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+    <post-action v-bind:post_action="post_action">
+        <div class="tracker-workflow-transition-modal-action-details-element tlp-form-element">
+            <label for="workflow-transition-modal-frozen-fields" class="tlp-label">
+                <translate>Fields that will be set as read-only</translate> <i class="fa fa-asterisk"></i>
+            </label>
+            <multi-select
+                id="workflow-transition-modal-frozen-fields"
+                class="tlp-select"
+                required
+                v-bind:configuration="{
+                    width: '100%',
+                    placeholder: frozen_field_select_placeholder
+                }"
+                v-model="frozen_field_ids"
+                v-bind:disabled="is_modal_save_running"
+            >
+                <option
+                    v-for="field in writable_fields"
+                    v-bind:key="field.field_id"
+                    v-bind:value="field.field_id"
+                    v-bind:data-test="`field_${field.field_id}`"
+                >
+                    {{ field.label }}
+                </option>
+            </multi-select>
+        </div>
+    </post-action>
+</template>
+<script>
+import PostAction from "./PostAction.vue";
+import { mapState, mapGetters } from "vuex";
+import MultiSelect from "../MultiSelect.vue";
+import { READ_ONLY_FIELDS, STRUCTURAL_FIELDS } from "../../../../../constants/fields-constants.js";
+import { compare } from "../../../support/string.js";
+
+const fields_blacklist = [...STRUCTURAL_FIELDS, ...READ_ONLY_FIELDS];
+
+export default {
+    name: "FrozenFieldsAction",
+    components: { PostAction, MultiSelect },
+    props: {
+        post_action: {
+            type: Object,
+            mandatory: true
+        }
+    },
+    computed: {
+        ...mapState(["current_tracker"]),
+        ...mapState("transitionModal", ["current_transition", "is_modal_save_running"]),
+        ...mapGetters(["current_workflow_field"]),
+        ...mapState({
+            writable_fields(state) {
+                if (state.current_tracker === null) {
+                    return [];
+                }
+                return state.current_tracker.fields
+                    .filter(field => !fields_blacklist.includes(field.type))
+                    .filter(field => !(field.field_id === this.current_workflow_field.field_id))
+                    .sort((field1, field2) => compare(field1.label, field2.label));
+            }
+        }),
+        frozen_field_select_placeholder() {
+            return this.$gettext("Choose a field");
+        },
+        frozen_field_ids: {
+            get() {
+                return this.post_action.field_ids;
+            },
+            set(field_ids) {
+                this.$store.commit("transitionModal/updateFrozenFieldsPostActionFieldIds", {
+                    post_action: this.post_action,
+                    field_ids
+                });
+            }
+        }
+    }
+};
+</script>