fix: content-type case check

- do a toLowerCase() before running a check for "content-type" in headers
- truncate api endpoint for provider templates

app/client/src/constants/ApiEditorConstants.ts

@@ -25,6 +25,7 @@ export const DEFAULT_API_ACTION: Partial<RestAction> = {
 
 export const API_CONSTANT = "API";
 export const DEFAULT_PROVIDER_OPTION = "Business Software";
+export const CONTENT_TYPE = "content-type";
 export const POST_BODY_FORMATS = [
   "application/json",
   "application/x-www-form-urlencoded",

app/client/src/pages/Editor/APIEditor/Form.tsx

@@ -9,6 +9,7 @@ import {
 import {
   HTTP_METHOD_OPTIONS,
   HTTP_METHODS,
+  CONTENT_TYPE,
 } from "constants/ApiEditorConstants";
 import styled from "styled-components";
 import PostBodyData from "./PostBodyData";
@@ -285,7 +286,7 @@ export default connect(state => {
   let contentType;
   if (actionConfigurationHeaders) {
     contentType = actionConfigurationHeaders.find(
-      (header: any) => header.key === "content-type",
+      (header: any) => header.key.toLowerCase() === CONTENT_TYPE,
     );
   }
 

app/client/src/pages/Editor/APIEditor/PostBodyData.tsx

@@ -6,6 +6,7 @@ import Select from "react-select";
 import {
   POST_BODY_FORMAT_OPTIONS,
   POST_BODY_FORMATS,
+  CONTENT_TYPE,
 } from "constants/ApiEditorConstants";
 import { API_EDITOR_FORM_NAME } from "constants/forms";
 import FormLabel from "components/editorComponents/FormLabel";
@@ -79,7 +80,7 @@ const PostBodyData = (props: Props) => {
 
             const elementsIndex = actionConfigurationHeaders.findIndex(
               (element: { key: string; value: string }) =>
-                element.key === "content-type",
+                element.key.toLowerCase() === CONTENT_TYPE,
             );
 
             if (elementsIndex >= 0 && displayFormatObject) {
@@ -166,7 +167,9 @@ export default connect((state: AppState) => {
   const headers = selector(state, "actionConfiguration.headers");
   let contentType;
   if (headers) {
-    contentType = headers.find((header: any) => header.key === "content-type");
+    contentType = headers.find(
+      (header: any) => header.key.toLowerCase() === CONTENT_TYPE,
+    );
   }
 
   return {

app/client/src/pages/Editor/APIEditor/ProviderTemplates.tsx

@@ -35,7 +35,7 @@ import Spinner from "components/editorComponents/Spinner";
 import { getInitialsAndColorCode } from "utils/AppsmithUtils";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 
-const TEMPLATES_TOP_SECTION_HEIGHT = "125px";
+const TEMPLATES_TOP_SECTION_HEIGHT = "83px";
 
 const SearchContainer = styled.div`
   display: flex;
@@ -190,6 +190,11 @@ const URLContainer = styled.div`
     line-height: 24px;
     padding-top: 10px !important;
     padding-left: 11px;
+    display: flex;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 98%;
   }
   .endpoint {
     padding-left: 11px;
@@ -306,7 +311,7 @@ class ProviderTemplates extends React.Component<ProviderTemplatesProps> {
     return (
       <TemplateDetailPage>
         <ProviderInfoTopSection>
-          <SearchContainer>
+          {/* <SearchContainer>
             <SearchBar
               icon="search"
               input={{
@@ -314,7 +319,7 @@ class ProviderTemplates extends React.Component<ProviderTemplatesProps> {
               }}
               placeholder="Search"
             />
-          </SearchContainer>
+          </SearchContainer> */}
 
           <Icon
             icon="chevron-left"
@@ -408,7 +413,12 @@ class ProviderTemplates extends React.Component<ProviderTemplatesProps> {
                                 .httpMethod
                             }
                           </strong>{" "}
-                          <span className="endpoint">
+                          <span
+                            className="endpoint"
+                            title={
+                              template.templateData.actionConfiguration.path
+                            }
+                          >
                             {template.templateData.actionConfiguration.path}
                           </span>
                         </p>

app/client/src/sagas/ApiPaneSagas.ts

@@ -16,6 +16,7 @@ import {
   POST_BODY_FORMAT_OPTIONS,
   REST_PLUGIN_PACKAGE_NAME,
   POST_BODY_FORMATS,
+  CONTENT_TYPE,
 } from "constants/ApiEditorConstants";
 import history from "utils/history";
 import {
@@ -206,7 +207,7 @@ function* changeApiSaga(actionPayload: ReduxAction<{ id: string }>) {
     const headers = data.actionConfiguration.headers;
     if (headers) {
       contentType = headers.find(
-        (header: any) => header.key === "content-type",
+        (header: any) => header.key.toLowerCase() === CONTENT_TYPE,
       );
     }
 
@@ -335,7 +336,7 @@ function* updateFormFields(
 
       if (actionConfigurationHeaders) {
         contentType = actionConfigurationHeaders.find(
-          (header: any) => header.key === "content-type",
+          (header: any) => header.key.toLowerCase() === CONTENT_TYPE,
         );
       }
 
@@ -344,7 +345,7 @@ function* updateFormFields(
           change(API_EDITOR_FORM_NAME, "actionConfiguration.headers", [
             ...actionConfigurationHeaders,
             {
-              key: "content-type",
+              key: "Content-Type",
               value: POST_BODY_FORMAT_OPTIONS[0].value,
             },
           ]),
@@ -362,7 +363,7 @@ function* updateFormFields(
 
     if (actionConfigurationHeaders) {
       const contentType = actionConfigurationHeaders.find(
-        (header: any) => header.key === "content-type",
+        (header: any) => header.key.toLowerCase() === CONTENT_TYPE,
       );
 
       if (contentType && POST_BODY_FORMATS.includes(contentType.value)) {

app/client/src/transformers/RestActionTransformer.ts

@@ -41,8 +41,11 @@ export const transformRestAction = (data: any): any => {
     if (POST_BODY_FORMATS.includes(contentType)) {
       formatIndex = POST_BODY_FORMATS.indexOf(contentType);
     }
+    let body = "";
 
-    let body = action.actionConfiguration.body[formatIndex] || undefined;
+    if (action.actionConfiguration.body) {
+      body = action.actionConfiguration.body[formatIndex] || undefined;
+    }
     if (!_.isString(body)) body = JSON.stringify(body);
     action = {
       ...action,