add reset button for VariableExpressionParameterEditor (#1140)

finos · May 6, 2022 · d59c216 · d59c216
1 parent 7431693
commit d59c216
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/.changeset/dry-colts-cry.md b/.changeset/dry-colts-cry.md
@@ -0,0 +1,3 @@
+---
+"@finos/legend-query": patch
+---
diff --git a/packages/legend-query/src/components/QueryBuilderValueSpecificationEditor.tsx b/packages/legend-query/src/components/QueryBuilderValueSpecificationEditor.tsx
@@ -132,7 +132,7 @@ const VariableExpressionParameterEditor = observer(
     className?: string | undefined;
     resetValue: () => void;
   }) => {
-    const { valueSpecification, className } = props;
+    const { valueSpecification, className, resetValue } = props;
     const varName = valueSpecification.name;
     return (
       <div
@@ -153,6 +153,13 @@ const VariableExpressionParameterEditor = observer(
               <InfoCircleIcon />
             </div>
           </QueryBuilderParameterInfoTooltip>
+          <button
+            className="query-builder-value-spec-editor__parameter__reset-btn"
+            title="Reset"
+            onClick={resetValue}
+          >
+            <RefreshIcon />
+          </button>
         </div>
       </div>
     );

diff --git a/packages/legend-query/style/_query-builder.scss b/packages/legend-query/style/_query-builder.scss
@@ -761,6 +761,16 @@
       height: 2rem;
       width: 2rem;
     }
+
+    &__reset-btn {
+      @include flexVCenter;
+
+      height: 2rem;
+      width: 2rem;
+      font-size: 2rem;
+      color: var(--color-light-grey-300);
+      font-weight: 700;
+    }
   }
 
   &__input {