feat: DEV-1372: Add visibleWhen choice-unselected option (#489)

* feat: DEV-1372: Add visibleWhen choice-unselected option

* test: DEV-1372: Add tests for  visibleWhen choice-unselected option

* test: DEV-1372: Fix required test

Author: Gondragos

e2e/tests/nested.test.js

@@ -146,3 +146,54 @@ Scenario("Check good nested Choice for Text", async function({ I, AtLabels, AtSi
   assert.deepEqual(result[2].value.labels, ["Person"]);
   assert.deepEqual(result[3].value.choices, ["Female"]);
 });
+
+Scenario("Check removing unexpected results based on visibleWhen parameter", async function({ I, LabelStudio }) {
+  const params = {
+    config: `<View>
+  <Text name="text" value="$reviewText" valueType="text" />
+  <Choices name="sentiment" toName="text" showInLine="true">
+    <Choice value="Positive" />
+    <Choice value="Negative" />
+    <Choice value="Neutral" />
+  </Choices>
+  <Choices
+    name="rate" toName="text" choice="single" showInLine="true"
+    visibleWhen="choice-unselected"
+    whenTagName="sentiment"
+    whenChoiceValue="Neutral"
+  >
+    <Choice value="One" />
+    <Choice value="Two" />
+    <Choice value="Three" />
+    <Choice value="Four" />
+    <Choice value="Five" />
+  </Choices>
+</View>`,
+    data: { reviewText },
+  };
+
+  I.amOnPage("/");
+  LabelStudio.setFeatureFlags({
+    ff_front_dev_1372_visible_when_choice_unselected_11022022_short: true,
+  });
+  LabelStudio.init(params);
+
+  I.see("Neutral");
+  I.see("Five");
+  // Choose rate
+  I.click("Five");
+  // Then hide it by choosing value from the visibleWhen="choice-unselected" dependency
+  I.click("Neutral");
+  let result = await I.executeScript(serialize);
+
+  // The hidden choose should not make a result
+  assert.equal(result.length, 1);
+  assert.deepEqual(result[0].value, { choices: ["Neutral"] });
+
+  // Check that it still works in case of no hidding
+  I.click("Positive");
+  result = await I.executeScript(serialize);
+  assert.equal(result.length, 2);
+  assert.deepEqual(result[0].value, { choices: ["Five"] });
+  assert.deepEqual(result[1].value, { choices: ["Positive"] });
+});

e2e/tests/required.test.js

@@ -4,7 +4,8 @@ const { initLabelStudio } = require("./helpers");
 
 Feature("Test required param");
 
-const config = `
+const createConfig = ({ visibleWhen = "choice-selected" } = {}) => {
+  return `
   <View>
     <Text name="text" value="$text"></Text>
     <Choices name="validation-label" required="true" toName="text">
@@ -16,7 +17,7 @@ const config = `
       <Choice value="Me neither" alias="neither"></Choice>
     </Choices>
     <Choices name="easter-egg" required="true" toName="text"
-      visibleWhen="choice-selected"
+      visibleWhen="${visibleWhen}"
       whenTagName="second"
       whenChoiceValue="Me neither"
     >
@@ -25,6 +26,8 @@ const config = `
     </Choices>
   </View>
 `;
+};
+
 
 const complex = `
   <View>
@@ -85,7 +88,7 @@ const result = {
 const annotations = [{ id: "1", result: [result] }];
 
 Scenario("Check required param", async function({ I }) {
-  const params = { config, data: { text } };
+  const params = { config: createConfig(), data: { text } };
 
   const waitForError = name => {
     I.waitForText("OK");
@@ -204,3 +207,57 @@ Scenario("Check required param in complex config", async function({ I }) {
   I.dontSee("Submit");
   I.see("Update");
 });
+
+Scenario("Check required param with visibleWhen='choice-unselected'", async function({ I, LabelStudio }) {
+  const params = { config: createConfig({ visibleWhen: 'choice-unselected' }), data: { text } };
+  const waitForError = name => {
+    I.waitForText("OK");
+    I.see("Warning");
+    I.see('Checkbox "' + name + '" is required');
+    I.seeElement(".ant-modal");
+    I.click("OK");
+    I.waitToHide(".ant-modal");
+  };
+
+  I.amOnPage("/");
+  LabelStudio.setFeatureFlags({
+    ff_front_dev_1372_visible_when_choice_unselected_11022022_short: true,
+  });
+  LabelStudio.init(params);
+
+  // Add new Annotation to be able to submit it
+  I.click('[aria-label="Annotations List Toggle"]');
+  I.click('[aria-label="Create Annotation"]');
+
+  // Select one from each choices groups, except the one with visibleWhen condition
+  I.click("Valid");
+  I.click("Don't select me");
+
+  // We should get error, cause "easter-egg" is visible and required
+  I.click("Submit");
+  waitForError("easter-egg");
+
+  // Select the "Me neither" option to make the "easter-egg" block not required
+  I.click("Me neither");
+  I.click("Submit");
+  // Annotation is submitted, so now we can only update it
+  I.dontSee("Submit");
+  I.see("Update");
+
+  // Reset to check another scenario
+  LabelStudio.init(params);
+  // LabelStudio is reloaded, there are no new annotation from prev steps
+  I.dontSee("New annotation");
+  I.click('[aria-label="Annotations List Toggle"]');
+  I.click('[aria-label="Create Annotation"]');
+
+  // Select all required options we have
+  I.click("Valid");
+  I.click("Don't select me");
+  I.click("Secret level");
+
+  I.click("Submit");
+  // Annotation is submitted, so now we can only update it
+  I.dontSee("Submit");
+  I.see("Update");
+});

e2e/tests/shortcuts.test.js

@@ -200,5 +200,5 @@ Data(configParams).Scenario("Should work with existent regions.", async ({ I, La
   // If we got an expected result then we didn't lost focus.
   AtSidebar.seeRegions(1);
   AtSidebar.see("-A + B!");
-}).tag("@this");
+});
 

src/mixins/Visibility.js

@@ -1,4 +1,5 @@
 import { getParent, types } from "mobx-state-tree";
+import { FF_DEV_1372, isFF } from "../utils/feature-flags";
 
 /*
  * Per Region Mixin
@@ -59,6 +60,10 @@ const VisibilityMixin = types
           "no-region-selected": () => !self.annotation.highlightedNode,
         };
 
+        if (isFF(FF_DEV_1372)) {
+          fns["choice-unselected"] = params => !fns["choice-selected"](params);
+        }
+        
         if (Object.keys(fns).includes(self.visiblewhen)) {
           const res = fns[self.visiblewhen]({
             tagName: self.whentagname,

src/regions/Result.js

@@ -3,6 +3,7 @@ import { guidGenerator } from "../core/Helpers";
 import Registry from "../core/Registry";
 import { AnnotationMixin } from "../mixins/AnnotationMixin";
 import { isDefined } from "../utils/utilities";
+import { FF_DEV_1372, isFF } from "../utils/feature-flags";
 
 const Result = types
   .model("Result", {
@@ -143,7 +144,7 @@ const Result = types
         if (label && !self.area.hasLabel(label)) return false;
       }
 
-      if (control.visiblewhen === "choice-selected") {
+      const isChoiceSelected = () => {
         const tagName = control.whentagname;
         const choiceValues = control.whenchoicevalue ? control.whenchoicevalue.split(",") : null;
         const results = self.annotation.results.filter(r => r.type === "choices" && r !== self);
@@ -162,6 +163,13 @@ const Result = types
           // if no given choice value is selected in any choice result
           if (choiceValues && !choiceValues.some(v => results.some(r => r.mainValue.includes(v)))) return false;
         }
+        return true;
+      };
+
+      if (control.visiblewhen === "choice-selected") {
+        return isChoiceSelected();
+      } else if (isFF(FF_DEV_1372) && control.visiblewhen === "choice-unselected") {
+        return !isChoiceSelected();
       }
 
       return true;

src/utils/feature-flags.js

@@ -20,6 +20,9 @@ export const FF_DEV_1536 = "ff_front_dev_1536_taxonomy_user_labels_150222_long";
 // Show or not dialog for rejection
 export const FF_DEV_1593 = "ff_front_1593_rejection_comment_040222_short";
 
+// Add visibleWhen="choice-unselected" option
+export const FF_DEV_1372 = "ff_front_dev_1372_visible_when_choice_unselected_11022022_short";
+
 // Add an interactivity flag to the results to make some predictions' results be able to be automatically added to newly created annotations.
 export const FF_DEV_1621 = "ff_front_dev_1621_interactive_mode_150222_short";