From 3fbc5b7c10c3cde383515c6bffe1823e48b8acb3 Mon Sep 17 00:00:00 2001
From: Alexey Rodionov <fluorescent.hallucinogen@gmail.com>
Date: Thu, 23 Apr 2020 20:37:06 +0300
Subject: [PATCH] [UX] Place arguments into round brackets

---
 src/Explorer.js | 42 +++++++++++++++++++++++-------------------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/Explorer.js b/src/Explorer.js
index 1c7f0df..f82dea1 100644
--- a/src/Explorer.js
+++ b/src/Explorer.js
@@ -1883,25 +1883,29 @@ class FieldView extends React.PureComponent<
           )}
         </span>
         {selection && args.length ? (
-          <div
-            style={{marginLeft: 16}}
-            className="graphiql-explorer-graphql-arguments">
-            {args.map(arg => (
-              <ArgView
-                key={arg.name}
-                parentField={field}
-                arg={arg}
-                selection={selection}
-                modifyArguments={this._setArguments}
-                getDefaultScalarArgValue={this.props.getDefaultScalarArgValue}
-                makeDefaultArg={this.props.makeDefaultArg}
-                onRunOperation={this.props.onRunOperation}
-                styleConfig={this.props.styleConfig}
-                onCommit={this.props.onCommit}
-                definition={this.props.definition}
-              />
-            ))}
-          </div>
+          <React.Fragment>
+            <div style={{display: 'inline', marginLeft: '3px'}}>{'('}</div>
+            <div
+              style={{marginLeft: 16}}
+              className="graphiql-explorer-graphql-arguments">
+              {args.map(arg => (
+                <ArgView
+                  key={arg.name}
+                  parentField={field}
+                  arg={arg}
+                  selection={selection}
+                  modifyArguments={this._setArguments}
+                  getDefaultScalarArgValue={this.props.getDefaultScalarArgValue}
+                  makeDefaultArg={this.props.makeDefaultArg}
+                  onRunOperation={this.props.onRunOperation}
+                  styleConfig={this.props.styleConfig}
+                  onCommit={this.props.onCommit}
+                  definition={this.props.definition}
+                />
+              ))}
+            </div>
+            <div>{')'}</div>
+          </React.Fragment>
         ) : null}
       </div>
     );