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>
This commit is contained in:
Sumit Kumar 2021-03-01 23:28:07 +05:30 committed by GitHub
parent 0b08edf5cc
commit 7d2effae18
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 6 deletions

View File

@ -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) => {

View File

@ -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" />