Nv 2679 reusable conditions component

[ainouzgali]

What change does this PR introduce?

WIP - Initial reusable conditions component
still needs refactoring and tests (all data-test-ids are still just copied)

Why was this change needed?

Other information (Screenshots)

[linear]

NV-2679 🎛️ Reusable Conditions component

What?

Create the reusable Conditions component that could be used across the app.

Notes:

1. The grouping functionality is out of scope for now
2. We should think if it should have form fields included or rather be controlled component
3. The header and the footer with "Cancel" and "Apply conditions" buttons is part of the sidebar, do not implement it in this component.

Why? (Context)

When: one of my 500+ tenants uses a unique configuration of the provider

I want to: set up a dynamic provider configuration for a node in the integration store

So I can: send notifications to the specific tenant and to all other tenants, using different provider configurations on behalf of the same node

Definition of Done

• Fields in row:
  • logical operators: And, Or
  • target: Tenant
  • field: Identifier, Name
  • operator: Equal, Does not equal, Contains, Does not contain, Is empty, Is not empty
  • value: string value
• The first condition row doesn't have a logical operator, instead displaying text When
• The consecutive rows will have logical operator as text, default And
  • on hover it changes to a dropdown with options: And, Or
  • changing logical operator value will change it to all rows (but not in the group)
• The tree dots menu actions (at the end of the condition row):
  • Duplicate
  • Turn into group
  • Delete
• General buttons
  • "Add condition" button - will add a new row of conditions at the bottom of all rows
  • "Add group" button - will add a new group at the bottom of all rows
• Conditions Group
  • nested groups are not supported
  • when created it will have by default one row
  • group has tree dots menu (at the end of group)
    • Duplicate
    • Delete
  • group row has tree dots menu (at the end of row)
    • Duplicate
    • Delete
  • "Add condition" button at the bottom - will create a new conditions row inside the group
• Should allow to configure the schema for the single condition field with prop
  • the schema says which fields are shown in the component
  • we would like to use this component in many places: integrations, step and variants (instead of filters)
• Validation errors:
  • error can be shown on the value field
  • error icon on the right side of the input field
    • tooltip on hover with error message

One condition - Integration store (Figma)

Multiple conditions - Integration store (Figma)

Add a group - Integration store (Figma)

Add a group - Integration store (Figma)

Turn into a group - Integration store (Figma)

Empty group - Integration store (Figma)

Empty group - Integration store (Figma)

Error: empty value - Integration store (Figma)

Error: empty value - Integration store (Figma)

[ainouzgali]

I will make this tooltip reusable and add it to the design system

[ainouzgali]

Note - @davidsoderberg and I agreed that we should merge this now into our feature branch so we can start to more fully test the whole feature e2e + to not delay the depending tasks.
I will open a new PR for the refactoring and cypress tests.
cc @LetItRock