Fix/api editor enhancement (#5095)

* Keep datasource tab open when there are datasources configured in API editor

* Save headers when users save an action as datasource

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

@@ -432,7 +432,9 @@ function ImportedHeaders(props: { headers: any }) {
 
 function ApiEditorForm(props: Props) {
   const [selectedIndex, setSelectedIndex] = useState(0);
-  const [showDatasources, toggleDatasources] = useState(false);
+  const [showDatasources, toggleDatasources] = useState(
+    !!props.datasources.length,
+  );
   const [
     apiBindHelpSectionVisible,
     setApiBindHelpSectionVisible,

app/client/src/sagas/DatasourcesSagas.ts

@@ -76,6 +76,7 @@ import { APPSMITH_TOKEN_STORAGE_KEY } from "pages/Editor/SaaSEditor/constants";
 import { checkAndGetPluginFormConfigsSaga } from "sagas/PluginSagas";
 import { PluginType } from "entities/Action";
 import LOG_TYPE from "entities/AppsmithConsole/logtype";
+import { isDynamicValue } from "utils/DynamicBindingUtils";
 
 function* fetchDatasourcesSaga() {
   try {
@@ -573,7 +574,21 @@ function* storeAsDatasourceSaga() {
   const pageId = yield select(getCurrentPageId);
   let datasource = _.get(values, "datasource");
   datasource = _.omit(datasource, ["name"]);
-
+  const originalHeaders = _.get(values, "actionConfiguration.headers", []);
+  const [datasourceHeaders, actionHeaders] = _.partition(
+    originalHeaders,
+    ({ key, value }: { key: string; value: string }) => {
+      return !(isDynamicValue(key) || isDynamicValue(value));
+    },
+  );
+  yield put(
+    setActionProperty({
+      actionId: values.id,
+      propertyName: "actionConfiguration.headers",
+      value: actionHeaders,
+    }),
+  );
+  _.set(datasource, "datasourceConfiguration.headers", datasourceHeaders);
   history.push(DATA_SOURCES_EDITOR_URL(applicationId, pageId));
 
   yield put(createDatasourceFromForm(datasource));