ISSUE #5486 - Incorrect pin colour until you click into the new ticket

[Amantini1997]

This fixes #5486

Description

The order of ticket properties was affecting the conditional colour of pins.
Using useWatch was not enough as that relied on the "registered" fields. Calling "useForm.reset" was unregistering and reregistering the fields, and useWatch was not catching the value upon registration

Test cases

Setup

Create a template that includes pins with conditional (configurable) colour and make sure to have some of them rendered before the conditional property, and some after. A valid template, for instance, could include the following:

• default pin (which colour depends on property "Pin condition")
• "Pin condition" property (which is part of the properties module)
• another conditional pin (defined after "Pin Condition")

(If you already have it, you may use the template "Pins With color (custom property)". Otherwise, feel free to use the following template:

{
  "code": "CO2",
  "name": "Pins With color (custom property) [duplicate]",
  "config": {
    "pin": {
      "icon": "DEFAULT",
      "color": {
        "property": {
          "name": "Pin Condition"
        },
        "mapping": [
          {
            "default": [
              124,
              124,
              124
            ]
          },
          {
            "value": "Low",
            "color": [
              0,
              255,
              0
            ]
          },
          {
            "value": "Medium",
            "color": [
              255,
              255,
              0
            ]
          },
          {
            "value": "High",
            "color": [
              255,
              0,
              0
            ]
          }
        ]
      }
    }
  },
  "properties": [
    {
      "name": "Pin Condition",
      "type": "oneOf",
      "values": [
        "None",
        "Low",
        "Medium",
        "High"
      ],
      "default": "None"
    },
    {
      "type": "coords",
      "icon": "DEFAULT",
      "color": {
        "property": {
          "name": "Pin Condition"
        },
        "mapping": [
          {
            "default": [
              124,
              124,
              124
            ]
          },
          {
            "value": "Low",
            "color": [
              0,
              255,
              0
            ]
          },
          {
            "value": "Medium",
            "color": [
              255,
              255,
              0
            ]
          },
          {
            "value": "High",
            "color": [
              255,
              0,
              0
            ]
          }
        ]
      },
      "name": "Conditional Pin"
    }
  ],
  "modules": [
    {
      "properties": [
        {
          "type": "coords",
          "icon": "DEFAULT",
          "color": {
            "property": {
              "name": "Pin Condition"
            },
            "mapping": [
              {
                "default": [
                  124,
                  124,
                  124
                ]
              },
              {
                "value": "Low",
                "color": [
                  0,
                  255,
                  0
                ]
              },
              {
                "value": "Medium",
                "color": [
                  255,
                  255,
                  0
                ]
              },
              {
                "value": "High",
                "color": [
                  255,
                  0,
                  0
                ]
              }
            ]
          },
          "name": "Conditional Pin"
        }
      ],
      "name": "Additional pins"
    }
  ]
}

Next create 2 tickets (A and B) and set the pin condition value to something such that the conditional pins will display a colour which is not the default one (in the template provided above, the gray colour is the default one)

test cases

• Test1
• open up the viewer
• open the tickets card
• open up ticket A

The conditional pins should all display the right colour, as per the conditional pin property

• Test 2
• open up the viewer
• open the tickets card
• open up ticket A
• refresh the page

The conditional pins should all display the right colour, as per the conditional pin property

• Test 3
• open up the viewer
• open the tickets card
• open up ticket A
• (using the arrows located on the card header) reach ticket B;
• (again using those arrows) reach ticket A

The conditional pins should all display the right colour, as per the conditional pin property, both in ticket A and ticket B, at all time

[carmenfan]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 2 pipeline(s).