From 7d2effae18b2f477de53dacb5b1ffe5b3eda9007 Mon Sep 17 00:00:00 2001
From: Sumit Kumar <sumit@appsmith.com>
Date: Mon, 1 Mar 2021 23:28:07 +0530
Subject: [PATCH] Modify hint statement for 'import from curl' form (#3285)

- Move to hint statement out of query box and put if above it - between the label and the query box - so that user's don't confuse it as a typed in statement.

Co-authored-by: Arpit Mohan <mohanarpit@users.noreply.github.com>
---
 .../ServerSideTests/ApiFlow/CurlImportFlow_spec.js    |  5 -----
 .../src/pages/Editor/APIEditor/CurlImportForm.tsx     | 11 ++++++++++-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ApiFlow/CurlImportFlow_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ApiFlow/CurlImportFlow_spec.js
index 04d28fa803..9ea0d1bad9 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ApiFlow/CurlImportFlow_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ApiFlow/CurlImportFlow_spec.js
@@ -6,11 +6,6 @@ describe("Test curl import flow", function() {
     localStorage.setItem("ApiPaneV2", "ApiPaneV2");
     cy.NavigateToApiEditor();
     cy.get(ApiEditor.curlImage).click({ force: true });
-    cy.get("textarea").should(
-      "have.attr",
-      "placeholder",
-      "curl -X GET https://mock-api.appsmith.com/users",
-    );
     cy.get("textarea").type("curl -X GET https://mock-api.appsmith.com/users");
     cy.importCurl();
     cy.get("@curlImport").then((response) => {
diff --git a/app/client/src/pages/Editor/APIEditor/CurlImportForm.tsx b/app/client/src/pages/Editor/APIEditor/CurlImportForm.tsx
index f8b02b7bfb..be0ae5ebb8 100644
--- a/app/client/src/pages/Editor/APIEditor/CurlImportForm.tsx
+++ b/app/client/src/pages/Editor/APIEditor/CurlImportForm.tsx
@@ -96,6 +96,11 @@ const Header = styled.div`
   }
 `;
 
+const CurlLabel = styled.div`
+  font-size: 12px;
+  color: ${Colors.SLATE_GRAY};
+`;
+
 interface ReduxStateProps {
   actions: ActionDataState;
   initialValues: Record<string, unknown>;
@@ -133,12 +138,16 @@ class CurlImportForm extends React.Component<Props> {
             </span>
             <CurlContainer>
               <label className="inputLabel">{"Paste CURL Code Here"}</label>
+              <CurlLabel>
+                {
+                  "Hint: Try typing in the following curl command and then click on the 'Import' button: curl -X GET https://mock-api.appsmith.com/users"
+                }
+              </CurlLabel>
               <CurlImportFormContainer>
                 <Field
                   name="curl"
                   component="textarea"
                   className="textAreaStyles"
-                  placeholder="curl -X GET https://mock-api.appsmith.com/users"
                 />
                 <Field type="hidden" name="pageId" component="input" />
                 <Field type="hidden" name="name" component="input" />