simplify properties filter ui (#2713)

* simplify properties filter ui

* format

Author: CollinBeczak

src/components/TaskPropertyQueryBuilder/Messages.js

@@ -19,6 +19,31 @@ export default defineMessages({
     defaultMessage: "Add Value",
   },
 
+  addRuleButton: {
+    id: "TaskPropertyQueryBuilder.controls.addRule",
+    defaultMessage: "Add Rule",
+  },
+
+  removeRuleButton: {
+    id: "TaskPropertyQueryBuilder.controls.removeRule",
+    defaultMessage: "Remove Rule",
+  },
+
+  conditionLabel: {
+    id: "TaskPropertyQueryBuilder.controls.conditionLabel",
+    defaultMessage: "Match rules using",
+  },
+
+  addFilterButton: {
+    id: "TaskPropertyQueryBuilder.controls.addFilter",
+    defaultMessage: "Add Filter",
+  },
+
+  removeFilterButton: {
+    id: "TaskPropertyQueryBuilder.controls.removeFilter",
+    defaultMessage: "Remove Filter",
+  },
+
   noneOption: {
     id: "Challenge.basemap.none",
     defaultMessage: "None",
@@ -78,9 +103,4 @@ export default defineMessages({
     id: "TaskPropertyQueryBuilder.error.missingStyleName",
     defaultMessage: "You must choose a style name.",
   },
-
-  commaSeparateValues: {
-    id: "TaskPropertyQueryBuilder.commaSeparateValues.label",
-    defaultMessage: "Comma separate values",
-  },
 });

src/components/TaskPropertyQueryBuilder/TaskPropertiesSchema.jsx

@@ -50,37 +50,19 @@ export const jsSchema = (intl, taskPropertyKeys) => {
         type: "object",
         properties: {
           valueType: {
-            title: "Property Type ",
+            title: "",
             type: "string",
-            enum: ["string", "number", "compound rule"],
+            enum: ["string", "number"],
             enumNames: [
               intl.formatMessage(messages.stringType),
               intl.formatMessage(messages.numberType),
-              intl.formatMessage(messages.compoundRuleType),
             ],
           },
         },
         dependencies: {
           // Show operators appropriate to value type
           valueType: {
             oneOf: [
-              {
-                // nested rules
-                properties: {
-                  valueType: {
-                    enum: ["compound rule"],
-                  },
-                  left: { $ref: "#/definitions/tagRule" },
-                  condition: {
-                    title: " ", // empty title
-                    type: "string",
-                    enum: _values(TaskPropertyOperationType),
-                    enumNames: operationTypeMessages,
-                    default: _values(TaskPropertyOperationType)[0],
-                  },
-                  right: { $ref: "#/definitions/tagRule" },
-                },
-              },
               {
                 // string values
                 properties: {
@@ -152,28 +134,23 @@ export const jsSchema = (intl, taskPropertyKeys) => {
               },
             ],
           },
-          value: {
-            oneOf: [
-              {
-                properties: {
-                  value: {
-                    minItems: 2,
-                  },
-                },
-              },
-              {
-                properties: {
-                  value: {
-                    maxItems: 1,
-                  },
-                  commaSeparate: {
-                    title: intl.formatMessage(messages.commaSeparateValues),
-                    type: "boolean",
-                    default: false,
-                  },
-                },
-              },
-            ],
+        },
+      },
+      ruleGroup: {
+        title: " ", // empty title for compact UI
+        type: "object",
+        properties: {
+          condition: {
+            title: intl.formatMessage(messages.conditionLabel),
+            type: "string",
+            enum: _values(TaskPropertyOperationType),
+            enumNames: operationTypeMessages,
+            default: _values(TaskPropertyOperationType)[0],
+          },
+          rules: {
+            title: "",
+            type: "array",
+            items: { $ref: "#/definitions/tagRule" },
           },
         },
       },
@@ -183,7 +160,7 @@ export const jsSchema = (intl, taskPropertyKeys) => {
         title: "",
         type: "object",
         properties: {
-          rootRule: { $ref: "#/definitions/tagRule" },
+          rootRule: { $ref: "#/definitions/ruleGroup" },
         },
       },
     },
@@ -198,11 +175,7 @@ export const jsSchema = (intl, taskPropertyKeys) => {
  *
  * @private
  */
-function buildUISchema(deepness, taskPropertyKeys) {
-  if (deepness === 0) {
-    return {};
-  }
-
+function buildUISchema(taskPropertyKeys) {
   let keyType = {
     classNames: "inline-selector mr-inline",
     "ui:widget": "select",
@@ -218,15 +191,9 @@ function buildUISchema(deepness, taskPropertyKeys) {
   }
 
   return {
-    classNames:
-      "property-rule mr-border-2 mr-border-white-10 mr-pt-2 mr-pb-3 mr-m-1 mr-pl-4 mr-flex",
+    classNames: "property-rule-content mr-pt-1 mr-pb-0 mr-pl-1 mr-flex",
     valueType: {
-      classNames: "mr-text-green mr-w-48",
-      "ui:widget": "select",
-      "ui:options": { inline: true, label: true },
-    },
-    condition: {
-      classNames: "mr-ml-4 mr-w-24",
+      classNames: "mr-text-green mr-w-40",
       "ui:widget": "select",
       "ui:options": { inline: true, label: false },
     },
@@ -240,12 +207,6 @@ function buildUISchema(deepness, taskPropertyKeys) {
       classNames: "inline-selector mr-inline",
       "ui:options": { inline: true, label: false, orderable: false },
     },
-    commaSeparate: {
-      classNames: "inline-selector mr-inline",
-      "ui:options": { inline: true },
-    },
-    left: buildUISchema(deepness - 1),
-    right: buildUISchema(deepness - 1),
   };
 }
 
@@ -259,11 +220,11 @@ export function ArrayFieldTemplate(props) {
         <div key={index}>
           <div className="mr-flex">
             {element.children}
-            {props.items.length > 1 && (
+            {props.items.length > 1 && props.schema?.title === "Value" && (
               <Fragment>
                 <button
                   type="button"
-                  className="mr-text-red-light mr-pb-4 mr-pl-2"
+                  className="mr-text-red-light mr-pb-4"
                   onClick={(event) => element.onDropIndexClick(index)(event)}
                 >
                   <SvgSymbol
@@ -278,7 +239,18 @@ export function ArrayFieldTemplate(props) {
               </Fragment>
             )}
           </div>
-          {props.canAdd && props.items.length === index + 1 && (
+          {props.schema?.title !== "Value" && element.hasRemove && (
+            <div className="mr-border-b mr-border-grey mr-pb-2">
+              <button
+                type="button"
+                className="mr-text-red-light"
+                onClick={(event) => element.onDropIndexClick(index)(event)}
+              >
+                <FormattedMessage {...messages.removeRuleButton} />
+              </button>
+            </div>
+          )}
+          {props.schema?.title === "Value" && props.canAdd && props.items.length === index + 1 && (
             <button
               type="button"
               className="mr-text-green-lighter mr-mt-1"
@@ -289,6 +261,13 @@ export function ArrayFieldTemplate(props) {
           )}
         </div>
       ))}
+      {props.schema?.title !== "Value" && props.canAdd && (
+        <div className="mr-mt-2">
+          <button type="button" className="mr-text-green-lighter" onClick={props.onAddClick}>
+            <FormattedMessage {...messages.addRuleButton} />
+          </button>
+        </div>
+      )}
     </div>
   );
 }
@@ -305,6 +284,17 @@ export function ArrayFieldTemplate(props) {
  */
 export const uiSchema = (intl, taskPropertyKeys) => ({
   propertyRules: {
-    rootRule: buildUISchema(7, taskPropertyKeys),
+    rootRule: {
+      classNames: "property-rule-group mr-m-1 ",
+      condition: {
+        classNames: "mr-ml-1 mr-w-48",
+        "ui:widget": "select",
+        "ui:options": { inline: true, label: true, labelText: "__conditionLabel__" },
+      },
+      rules: {
+        classNames: "mr-mt-2",
+        items: buildUISchema(taskPropertyKeys),
+      },
+    },
   },
 });

src/components/TaskPropertyQueryBuilder/TaskPropertiesSchema.scss

@@ -1,3 +1,30 @@
+.property-rule {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  margin: 0.25rem;
+  border-radius: 0.25rem;
+  background-color: rgba(22, 34, 46, 0.75);
+}
+.property-rule-content {
+  padding: 0.5rem 0.75rem 0.25rem 0.75rem;
+}
+
+.property-rule .rule-body {
+  display: grid;
+  grid-template-columns: 180px 1fr 1fr 1fr;
+  grid-column-gap: 0.75rem;
+  align-items: center;
+}
+
+.property-rule .rule-footer {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 0.25rem;
+}
+
+.property-rule .remove-rule-link {
+  color: #ff6b6b; /* red-light */
+  font-size: 0.875rem;
+}
 .task-properties-form {
   label.control-label {
     margin-right: 5px;