[FEAT]: #1488 Add JS Query in Query Library

Author: iamfaran

client/packages/lowcoder/src/components/ResCreatePanel.tsx

@@ -25,6 +25,7 @@ import { getUser } from "../redux/selectors/usersSelectors";
 import DataSourceIcon from "./DataSourceIcon";
 import { genRandomKey } from "comps/utils/idGenerator";
 import { isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
+import { JS_CODE_ID } from "constants/datasourceConstants";
 
 const Wrapper = styled.div<{ $placement: PageType }>`
   width: 100%;
@@ -145,6 +146,7 @@ const ResButton = (props: {
       type: BottomResTypeEnum.Query,
       extra: {
         compType: "js",
+        dataSourceId: JS_CODE_ID,
       },
     },
     libraryQuery: {
@@ -320,6 +322,17 @@ export function ResCreatePanel(props: ResCreateModalProps) {
                 </div>
               </>
             )}
+                      
+            {placement === "queryLibrary" && (
+              <>
+                <div className="section-title">{trans("code")}</div>
+                <div className="section">
+                  <DataSourceListWrapper $placement={placement}>
+                    <ResButton size={buttonSize} identifier={"js"} onSelect={onSelect} />
+                  </DataSourceListWrapper>
+                </div>
+              </>
+            )}
 
             <div className="section-title">{trans("query.datasource")}</div>
             <div className="section">

client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx

@@ -5,6 +5,7 @@ import { isCompWithPropertyView } from "comps/utils/propertyUtils";
 import {
   QUICK_GRAPHQL_ID,
   QUICK_REST_API_ID,
+  JS_CODE_ID
 } from "constants/datasourceConstants";
 import { PageType } from "constants/pageConstants";
 import { trans } from "i18n";
@@ -795,7 +796,8 @@ function useDatasourceStatus(datasourceId: string, datasourceType: ResourceType)
       datasourceType === "libraryQuery" ||
       datasourceType === "alasql" ||
       datasourceId === QUICK_REST_API_ID ||
-      datasourceId === QUICK_GRAPHQL_ID
+      datasourceId === QUICK_GRAPHQL_ID || 
+      datasourceId === JS_CODE_ID
     ) {
       return "";
     }

client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx

@@ -15,6 +15,7 @@ import { DatasourceType, ResourceType } from "@lowcoder-ee/constants/queryConsta
 import {
   QUICK_GRAPHQL_ID,
   QUICK_REST_API_ID,
+  JS_CODE_ID
 } from "constants/datasourceConstants";
 import {
   apiPluginsForQueryLibrary,
@@ -78,7 +79,7 @@ interface ResourceOptionValue {
 }
 
 const JSOptionValue: ResourceOptionValue = {
-  id: "",
+  id: JS_CODE_ID,
   type: "js",
 };
 
@@ -156,6 +157,7 @@ export const ResourceDropdown = (props: ResourceDropdownProps) => {
           const optionValue: ResourceOptionValue = JSON.parse(value);
           const datasourceId = optionValue.id;
           const datasourceType = optionValue.type;
+
           if (!datasourceType) {
             messageInstance.error("datasource invalid");
             return;
@@ -293,19 +295,20 @@ export const ResourceDropdown = (props: ResourceDropdownProps) => {
           </SelectOptionContains>
         </SelectOption>
 
-        {context?.placement !== "queryLibrary" && (
-          <>
-            <SelectOption
-              key={JSON.stringify(JSOptionValue)}
-              label={trans("query.executeJSCode")}
-              value={JSON.stringify(JSOptionValue)}
-            >
-              <SelectOptionContains>
-                {getBottomResIcon("js")}
-                <SelectOptionLabel>{trans("query.executeJSCode")} </SelectOptionLabel>
-              </SelectOptionContains>
-            </SelectOption>
+        {/* Always show JS option regardless of placement */}
+          <SelectOption
+            key={JSON.stringify(JSOptionValue)}
+            label={trans("query.executeJSCode")}
+            value={JSON.stringify(JSOptionValue)}
+          >
+            <SelectOptionContains>
+              {getBottomResIcon("js")}
+              <SelectOptionLabel>{trans("query.executeJSCode")} </SelectOptionLabel>
+            </SelectOptionContains>
+          </SelectOption>
 
+          {/* Only show Library Query option when not in Query Library */}
+          {context?.placement !== "queryLibrary" && (
             <SelectOption
               key={JSON.stringify(LibraryQueryOptionValue)}
               label={trans("query.importFromQueryLibrary")}
@@ -316,8 +319,7 @@ export const ResourceDropdown = (props: ResourceDropdownProps) => {
                 <SelectOptionLabel>{trans("query.importFromQueryLibrary")} </SelectOptionLabel>
               </SelectOptionContains>
             </SelectOption>
-          </>
-        )}
+          )}
       </CustomSelect>
     </SelectWrapper>
   );

client/packages/lowcoder/src/constants/datasourceConstants.ts

@@ -43,4 +43,5 @@ export interface Datasource {
 
 export const QUICK_REST_API_ID = "#QUICK_REST_API";
 export const QUICK_GRAPHQL_ID = "#QUICK_GRAPHQL";
+export const JS_CODE_ID = "#JS_CODE";
 export const OLD_LOWCODER_DATASOURCE: Partial<DatasourceType>[] = [];