From 57c558163b6f40e26c68ff87f4093b44ea0008db Mon Sep 17 00:00:00 2001
From: Avery Smith <avery@averysmith.pro>
Date: Tue, 25 Jun 2024 09:40:12 -0400
Subject: [PATCH 1/4] WCMS-20864: updated component query-row breakpoint layout
 for mobile and md

---
 src/components/QueryRow/index.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/QueryRow/index.tsx b/src/components/QueryRow/index.tsx
index c4b84bd8..945cd805 100644
--- a/src/components/QueryRow/index.tsx
+++ b/src/components/QueryRow/index.tsx
@@ -57,10 +57,10 @@ const QueryRow = ({ id, condition, index, update, remove, propertyOptions, schem
 
   return (
     <fieldset className="ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--between ds-u-align-items--center ds-u-border--0">
-      <div className="ds-l-col--12 ds-l-md-col--8 ds-u-display--flex ds-u-justify-content--between ds-u-padding-x--0">
+        Test A
         <Dropdown
           options={propertyOptions}
-          className="ds-l-col--8 ds-u-padding-left--0"
+          className="ds-l-md-col--5 ds-l-lg-col--4 ds-l-sm-col--8 ds-l-col--12 ds-u-padding--0 ds-u-md-padding-right--2 ds-u-margin-bottom--0 ds-u-md-margin-bottom--2"
           value={property}
           label="Column Name"
           name={`${condition.key}_property`}
@@ -68,14 +68,13 @@ const QueryRow = ({ id, condition, index, update, remove, propertyOptions, schem
         />
         <Dropdown
           options={buildOperatorOptions(schema[id].fields[property].mysql_type)}
-          className="ds-l-col--4 ds-u-padding-x--0"
+          className="ds-l-sm-col--3 ds-l-md-col--2 ds-l-col--12 ds-u-padding--0 ds-u-md-padding-right--2 ds-u-margin-bottom--0 ds-u-md-margin-bottom--2"
           value={operator}
           label="Operator"
           name={`${condition.key}_operator`}
           onChange={(e) => setOperator(e.target.value)}
         />
-      </div>
-      <div className="ds-l-col--12 ds-l-md-col--4 ds-u-padding-x--0 ds-u-md-padding-left--2 ds-u-display--flex ds-u-justify-content--between">
+      <div className="ds-l-col--12 ds-l-md-col--4 ds-u-padding-x--0 ds-u-md-padding-left--2 ds-u-display--flex ds-u-justify-content--between ds-u-md-margin-bottom--2">
         {schema[id].fields[property].mysql_type === 'date' ? (
           <div>
             <label

From 4d740ff4ac8c4bc40bfebb103ec516884284dd00 Mon Sep 17 00:00:00 2001
From: Avery Smith <avery@averysmith.pro>
Date: Tue, 25 Jun 2024 09:41:24 -0400
Subject: [PATCH 2/4] WCMS-20864: removed testing artifacts

---
 src/components/QueryRow/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/QueryRow/index.tsx b/src/components/QueryRow/index.tsx
index 945cd805..0b4856c7 100644
--- a/src/components/QueryRow/index.tsx
+++ b/src/components/QueryRow/index.tsx
@@ -57,7 +57,6 @@ const QueryRow = ({ id, condition, index, update, remove, propertyOptions, schem
 
   return (
     <fieldset className="ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--between ds-u-align-items--center ds-u-border--0">
-        Test A
         <Dropdown
           options={propertyOptions}
           className="ds-l-md-col--5 ds-l-lg-col--4 ds-l-sm-col--8 ds-l-col--12 ds-u-padding--0 ds-u-md-padding-right--2 ds-u-margin-bottom--0 ds-u-md-margin-bottom--2"

From 06c97e5d1ff11a41f64e555f577fbf7e83aed503 Mon Sep 17 00:00:00 2001
From: Avery Smith <avery@averysmith.pro>
Date: Wed, 26 Jun 2024 16:27:43 -0400
Subject: [PATCH 3/4] WCMS-20864: refactored component layout to exactly match
 filtered resource query row markup and logic

---
 src/components/QueryRow/index.tsx | 115 ++++++++++++++----------------
 1 file changed, 55 insertions(+), 60 deletions(-)

diff --git a/src/components/QueryRow/index.tsx b/src/components/QueryRow/index.tsx
index 0b4856c7..010dc1b8 100644
--- a/src/components/QueryRow/index.tsx
+++ b/src/components/QueryRow/index.tsx
@@ -56,67 +56,62 @@ const QueryRow = ({ id, condition, index, update, remove, propertyOptions, schem
   }, [value]);
 
   return (
-    <fieldset className="ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--between ds-u-align-items--center ds-u-border--0">
-        <Dropdown
-          options={propertyOptions}
-          className="ds-l-md-col--5 ds-l-lg-col--4 ds-l-sm-col--8 ds-l-col--12 ds-u-padding--0 ds-u-md-padding-right--2 ds-u-margin-bottom--0 ds-u-md-margin-bottom--2"
-          value={property}
-          label="Column Name"
-          name={`${condition.key}_property`}
-          onChange={(e) => setProperty(e.target.value)}
-        />
-        <Dropdown
-          options={buildOperatorOptions(schema[id].fields[property].mysql_type)}
-          className="ds-l-sm-col--3 ds-l-md-col--2 ds-l-col--12 ds-u-padding--0 ds-u-md-padding-right--2 ds-u-margin-bottom--0 ds-u-md-margin-bottom--2"
-          value={operator}
-          label="Operator"
-          name={`${condition.key}_operator`}
-          onChange={(e) => setOperator(e.target.value)}
-        />
-      <div className="ds-l-col--12 ds-l-md-col--4 ds-u-padding-x--0 ds-u-md-padding-left--2 ds-u-display--flex ds-u-justify-content--between ds-u-md-margin-bottom--2">
-        {schema[id].fields[property].mysql_type === 'date' ? (
-          <div>
-            <label
-              className="ds-c-label"
-              htmlFor={`${condition.key}_date_value`}
-              id={`${condition.key}_date_value-label`}
-            >
-              <span>Value</span>
-            </label>
-            <DatePicker
-              name={`${condition.key}_date_value`}
-              selected={convertUTCToLocalDate(startDate)}
-              onChange={(date : Date) => {
-                setStartDate(date);
-                setValue(date.toJSON().slice(0, 10));
-              }}
-              showMonthDropdown
-              showYearDropdown
-              dropdownMode="select"
-              className="ds-c-field"
-              withPortal
-            />
-          </div>
-        ) : (
-          <TextField
-            className="ds-l-col--11 ds-u-padding-x--0"
-            label="Value"
-            name={`${condition.key}_value`}
-            value={cleanText(value, operator)}
-            onChange={(e) => setValue(e.target.value)}
+    <fieldset className="ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--between ds-u-md-justify-content--end ds-u-align-items--center">
+      <Dropdown
+        options={propertyOptions}
+        value={property}
+        label="Property"
+        name={`${condition.key}_property`}
+        onChange={(e) => setProperty(e.target.value)}
+        className={"ds-l-md-col--5 ds-l-lg-col--4 ds-l-sm-col--8 ds-l-col--12 ds-u-padding--0 ds-u-md-padding-right--2 ds-u-margin-bottom--0 ds-u-md-margin-bottom--2"}
+      />
+      <Dropdown
+        options={buildOperatorOptions(schema[id].fields[property].mysql_type)}
+        value={operator}
+        label="Operator"
+        name={`${condition.key}_operator`}
+        onChange={(e) => setOperator(e.target.value)}
+        className={"ds-l-sm-col--3 ds-l-md-col--2 ds-l-col--12 ds-u-padding--0 ds-u-md-padding-right--2 ds-u-margin-bottom--0 ds-u-md-margin-bottom--2"}
+      />
+      {schema[id].fields[property].mysql_type === 'date' ? (
+        <div className="ds-l-md-col--5 ds-l-lg-col--4 ds-l-sm-col--8 ds-l-col--12 ds-u-padding--0 ds-u-sm-padding-right--2 ds-u-md-padding-right--0 ds-u-lg-padding-right--2 ds-u-margin-bottom--2">
+          <label
+            className="ds-c-label"
+            htmlFor={`${condition.key}_date_value`}
+            id={`${condition.key}_date_value-label`}
+          >
+            <span>Value</span>
+          </label>
+          <DatePicker
+            name={`${condition.key}_date_value`}
+            selected={convertUTCToLocalDate(startDate)}
+            onChange={(date) => {
+              date && setStartDate(date);
+              date && setValue(date.toJSON().slice(0, 10));
+            }}
+            showMonthDropdown
+            showYearDropdown
+            dropdownMode="select"
+            className={"ds-c-field"}
+            withPortal
           />
-        )}
-
-        <Button
-          variation="ghost"
-          size="small"
-          className="ds-u-margin-top--6 ds-u-padding-right--0"
-          aria-label="Delete filter"
-          onClick={() => remove(index)}
-        >
-          <span className="fas fa-trash"></span>
-        </Button>
-      </div>
+        </div>
+      ) : (
+        <TextField
+          label="Value"
+          name={`${condition.key}_value`}
+          value={cleanText(value, operator)}
+          onChange={(e) => setValue(e.target.value)}
+          className={"ds-l-md-col--5 ds-l-lg-col--4 ds-l-sm-col--8 ds-l-col--12 ds-u-padding--0 ds-u-sm-padding-right--2 ds-u-md-padding-right--0 ds-u-lg-padding-right--2 ds-u-margin-bottom--2"}
+        />
+      )}
+      <Button
+        className="ds-u-margin-top--2 ds-u-sm-margin-top--4 ds-u-lg-margin-top--4 ds-u-md-margin-top--2 ds-l-col--12 ds-l-md-col--4 ds-l-lg-col--2 ds-l-sm-col--4"
+        aria-label="Delete filter"
+        onClick={() => remove(index)}
+      >
+        Delete filter
+      </Button>
     </fieldset>
   );
 };

From a4503e81b14226cd345a2c9540a9865d5323d0f0 Mon Sep 17 00:00:00 2001
From: Avery Smith <avery@averysmith.pro>
Date: Wed, 26 Jun 2024 16:33:53 -0400
Subject: [PATCH 4/4] WCMS-20864: simplified guard clause

---
 src/components/QueryRow/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/QueryRow/index.tsx b/src/components/QueryRow/index.tsx
index 010dc1b8..b2e1ae75 100644
--- a/src/components/QueryRow/index.tsx
+++ b/src/components/QueryRow/index.tsx
@@ -86,8 +86,10 @@ const QueryRow = ({ id, condition, index, update, remove, propertyOptions, schem
             name={`${condition.key}_date_value`}
             selected={convertUTCToLocalDate(startDate)}
             onChange={(date) => {
-              date && setStartDate(date);
-              date && setValue(date.toJSON().slice(0, 10));
+              if(date) {
+                setStartDate(date);
+                setValue(date.toJSON().slice(0, 10));
+              }
             }}
             showMonthDropdown
             showYearDropdown