FUI - Fixed multiple bugs (#2757)

Author: jsorohova

src/components/operations/operation-details/react/runtime/OperationConsoleGql.tsx

@@ -280,14 +280,16 @@ export const OperationConsoleGql = ({
     const sendRequest = async () => {
         setSendingRequest(true);
 
-        try {
-            JSON.parse(queryVariables);
-        }
-        catch (error) {
-            setSelectedTab(ConsoleTab.response);
-            setRequestError('Invalid "Query variables" JSON format.');
-            setSendingRequest(false);
-            return;
+        if (queryVariables.length > 0) {
+            try {
+                JSON.parse(queryVariables);
+            }
+            catch (error) {
+                setSelectedTab(ConsoleTab.response);
+                setRequestError('Invalid "Query variables" JSON format.');
+                setSendingRequest(false);
+                return;
+            }
         }
 
         const payload = JSON.stringify({
@@ -406,6 +408,7 @@ export const OperationConsoleGql = ({
                                 && <Input
                                         value={(child as GraphQLInputTreeNode).inputValue()}
                                         onChange={(_, data) => (child as GraphQLInputTreeNode).changeInputValue(data.value)}
+                                        autoComplete="off"
                                     />
 
                         : <></>
@@ -482,7 +485,7 @@ export const OperationConsoleGql = ({
                                     }
                                 </Accordion>
                             </Stack.Item>
-                            <Stack.Item grow>
+                            <Stack.Item grow className={"gql-query"}>
                                 <Stack>
                                     <Stack.Item className={"gql-query-editor"}>
                                         <Editor

src/components/operations/operation-details/react/runtime/OperationDetails.tsx

@@ -342,7 +342,7 @@ export const OperationDetails = ({
                             </div>
                         </div>
                         {enableConsole && <button className="button" onClick={() => setIsConsoleOpen(true)}>Try this operation</button>}
-                        {request &&
+                        {request && request.isMeaningful() &&
                             <div className={"operation-request"}>
                                 <h4 className={"operation-subtitle1"}>Request</h4>
                                 {request.description && <MarkdownProcessor markdownToDisplay={request.description} />}

src/components/operations/operation-list/react/runtime/OperationList.tsx

@@ -194,8 +194,10 @@ export const OperationList = ({
         <Stack
             key={operation.id}
             horizontal
-            className={`operation ${operation.name === selectedOperationName && `is-selected-operation`}`}
+            className={`operation ${operation.name === selectedOperationName ? `is-selected-operation` : ""}`}
             onClick={() => selectOperation(operation)}
+            onKeyDown={e => e.key === "Enter" && selectOperation(operation)}
+            tabIndex={0}
         >
             {operation.name === selectedOperationName
                 ? <>

src/themes/designer/styles/toolboxes.scss

@@ -121,15 +121,9 @@ h2 {
 
         &.toolbox-btn-is-active {
             position: relative;
-
-            &:before {
-                @include fit();
-                position: absolute;
-                background-color: $toolbox-btn-active-bg;
-                border: 1px solid $toolbox-btn-active-border;
-                border-radius: $toolbox-border-radius - 5px;
-                content: "";
-            }
+            background-color: $toolbox-btn-active-bg;
+            border: 1px solid $toolbox-btn-active-border;
+            border-radius: $toolbox-border-radius - 5px;
         }
 
         &.pull-down {

src/themes/website/styles/widgets/fui/operation-details.scss

@@ -226,6 +226,10 @@ fui-operation-details {
     .ws-connect-button {
         margin-bottom: 2rem;
     }
+
+    .fui-Field__validationMessageIcon {
+        vertical-align: 1px;
+    }
 }
 
 .console-gql-drawer {
@@ -244,18 +248,30 @@ fui-operation-details {
     .gql-search {
         width: 100%;
         margin-bottom: 1.5rem;
+
+        input {
+            // These styles are needed to remove the search icon used for default search input
+            background: none;
+            padding-left: 5px !important;
+        }
     }
 
     .gql-explorer {
         width: 350px;
         padding: 2rem 1.5rem 2rem 0;
         border-right: 1px solid #E6E6E6;
+        overflow: auto;
+        max-height: calc(100vh - 150px);
 
         .level0-node-label {
             text-transform: capitalize;
         }
     }
 
+    .gql-query {
+        width: calc(100% - 350px);
+    }
+
     .gql-query-editor {
         padding-top: 2rem;
         border-bottom: 1px solid #E6E6E6;

src/themes/website/styles/widgets/fui/operation-list.scss

@@ -37,6 +37,11 @@ fui-operation-list {
         margin-bottom: .5rem;
         border-left: 5px solid transparent;
 
+        &:hover {
+            background-color: #F5F5F5;
+            border-radius: .25rem;
+        }
+
         &.is-selected-operation {
             background-color: #EBEBEB;
             border-left-color: #0F6CBD;