Feature - iconscout intergration

client/packages/lowcoder/package.json

@@ -24,6 +24,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "latest",
+    "@lottiefiles/dotlottie-react": "^0.13.0",
     "@manaflair/redux-batch": "^1.0.0",
     "@rjsf/antd": "^5.21.2",
     "@rjsf/core": "^5.21.2",

client/packages/lowcoder/src/api/iconFlowApi.ts

@@ -0,0 +1,163 @@
+import Api from "api/api";
+import axios, { AxiosInstance, AxiosPromise, AxiosRequestConfig } from "axios";
+import { calculateFlowCode }  from "./apiUtils";
+
+export interface SearchParams {
+  query: string;
+  asset: string;
+  per_page: number;
+  page: 1;
+  sort: string;
+  formats?: string;
+  price?: string;
+}
+
+export type ResponseType = {
+  response: any;
+};
+
+const lcHeaders = {
+  "Lowcoder-Token": calculateFlowCode(),
+  "Content-Type": "application/json"
+};
+
+let axiosIns: AxiosInstance | null = null;
+
+const getAxiosInstance = (clientSecret?: string) => {
+  if (axiosIns && !clientSecret) {
+    return axiosIns;
+  }
+
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+  };
+
+  const apiRequestConfig: AxiosRequestConfig = {
+    baseURL: "https://api-service.lowcoder.cloud/api/flow",
+    headers,
+  };
+
+  axiosIns = axios.create(apiRequestConfig);
+  return axiosIns;
+}
+
+class IconFlowApi extends Api {
+
+  static async secureRequest(body: any, timeout: number = 6000): Promise<any> {
+    let response;
+    const axiosInstance = getAxiosInstance();
+
+    // Create a cancel token and set timeout for cancellation
+    const source = axios.CancelToken.source();
+    const timeoutId = setTimeout(() => {
+      source.cancel("Request timed out.");
+    }, timeout);
+
+    // Request configuration with cancel token
+    const requestConfig: AxiosRequestConfig = {
+      method: "POST",
+      withCredentials: true,
+      data: body,
+      cancelToken: source.token, // Add cancel token
+    };
+
+    try {
+      response = await axiosInstance.request(requestConfig);
+    } catch (error) {
+      if (axios.isCancel(error)) {
+        // Retry once after timeout cancellation
+        try {
+          // Reset the cancel token and retry
+          const retrySource = axios.CancelToken.source();
+          const retryTimeoutId = setTimeout(() => {
+            retrySource.cancel("Retry request timed out.");
+          }, 20000);
+
+          response = await axiosInstance.request({
+            ...requestConfig,
+            cancelToken: retrySource.token,
+          });
+
+          clearTimeout(retryTimeoutId);
+        } catch (retryError) {
+          console.warn("Error at Secure Flow Request. Retry failed:", retryError);
+          throw retryError;
+        }
+      } else {
+        console.warn("Error at Secure Flow Request:", error);
+        throw error;
+      }
+    } finally {
+      clearTimeout(timeoutId); // Clear the initial timeout
+    }
+
+    return response;
+  }
+
+}
+
+export const searchAssets = async (searchParameters : SearchParams) => {
+  const apiBody = {
+    path: "webhook/scout/search-asset",
+    data: searchParameters,
+    method: "post",
+    headers: lcHeaders
+  };
+  try {
+    const result = await IconFlowApi.secureRequest(apiBody);
+    return result?.data?.response?.items?.total > 0 ? result.data.response.items as any : null;
+  } catch (error) {
+    console.error("Error searching Design Assets:", error);
+    throw error;
+  }
+};
+
+export const getAssetLinks = async (uuid: string, params: Record<string, string>) => {
+  const apiBody = {
+    path: "webhook/scout/get-asset-links",
+    data: {"uuid" : uuid, "params" : params},
+    method: "post",
+    headers: lcHeaders
+  };
+  try {
+    const result = await IconFlowApi.secureRequest(apiBody);
+
+    return result?.data?.response?.download?.url.length > 0 ? result.data.response.download as any : null;
+  } catch (error) {
+    console.error("Error searching Design Assets:", error);
+    throw error;
+  }
+};
+
+
+/*
+
+static async search(params: SearchParams): Promise<any> {
+    let response;
+    try {
+      response = await getAxiosInstance().request({
+        url: '/v3/search',
+        method: "GET",
+        withCredentials: false,
+        params: {
+          ...params,
+        },
+      });
+    } catch (error) {
+      console.error(error);
+    }
+    return response?.data.response.items;
+  }
+
+  static async download(uuid: string, params: Record<string, string>): Promise<any> {
+    const response = await getAxiosInstance(clientSecret).request({
+      url: `/v3/items/${uuid}/api-download?format=${params.format}`,
+      method: "POST",
+      withCredentials: false,
+    });
+    return response?.data.response.download;
+  }
+
+*/ 
+
+export default IconFlowApi;

client/packages/lowcoder/src/api/iconscoutApi.ts

@@ -0,0 +1,15 @@
+import Api from "api/api";
+import axios from "axios";
+
+export type ResponseType = {
+  response: any;
+};
+
+class IconScoutApi extends Api {
+  static async downloadAsset(url: string): Promise<any> {
+    const response = await axios.get(url, {responseType: 'blob'})
+    return response?.data;
+  }
+}
+
+export default IconScoutApi;

client/packages/lowcoder/src/api/subscriptionApi.ts

@@ -1,11 +1,6 @@
 import Api from "api/api";
 import axios, { AxiosInstance, AxiosRequestConfig, CancelToken } from "axios";
-import { useDispatch, useSelector } from "react-redux";
-import { useEffect, useState} from "react";
 import { calculateFlowCode }  from "./apiUtils";
-import { fetchGroupsAction, fetchOrgUsersAction } from "redux/reduxActions/orgActions";
-import { getOrgUsers } from "redux/selectors/orgSelectors";
-import { AppState } from "@lowcoder-ee/redux/reducers";
 import type {
   LowcoderNewCustomer,
   LowcoderSearchCustomer,

client/packages/lowcoder/src/comps/comps/iconComp.tsx

@@ -30,6 +30,8 @@ import {
 } from "../controls/eventHandlerControl";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { AssetType, IconscoutControl } from "@lowcoder-ee/comps/controls/iconscoutControl";
+import { dropdownControl } from "../controls/dropdownControl";
 
 const Container = styled.div<{
   $style: IconStyleType | undefined;
@@ -61,10 +63,17 @@ const Container = styled.div<{
 
 const EventOptions = [clickEvent] as const;
 
+const ModeOptions = [
+  { label: "Standard", value: "standard" },
+  { label: "Asset Library", value: "asset-library" },
+] as const;
+
 const childrenMap = {
   style: styleControl(IconStyle,'style'),
   animationStyle: styleControl(AnimationStyle,'animationStyle'),
+  sourceMode: dropdownControl(ModeOptions, "standard"),
   icon: withDefault(IconControl, "/icon:antd/homefilled"),
+  iconScoutAsset: IconscoutControl(AssetType.ICON),
   autoHeight: withDefault(AutoHeightControl, "auto"),
   iconSize: withDefault(NumberControl, 20),
   onEvent: eventHandlerControl(EventOptions),
@@ -103,7 +112,10 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
           }}
           onClick={() => props.onEvent("click")}
         >
-          {props.icon}
+          { props.sourceMode === 'standard'
+            ? props.icon
+            : <img src={props.iconScoutAsset.value} />
+          }
         </Container>
       )}
     >
@@ -117,11 +129,17 @@ let IconBasicComp = (function () {
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
-          {children.icon.propertyView({
+          { children.sourceMode.propertyView({
+            label: "",
+            radioButton: true
+          })}
+          {children.sourceMode.getView() === 'standard' && children.icon.propertyView({
             label: trans("iconComp.icon"),
             IconType: "All",
           })}
-
+          {children.sourceMode.getView() === 'asset-library' && children.iconScoutAsset.propertyView({
+            label: trans("button.icon"),
+          })}
         </Section> 
 
         {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (

client/packages/lowcoder/src/comps/comps/imageComp.tsx

@@ -12,7 +12,7 @@ import {
   withExposingConfigs,
 } from "../generators/withExposing";
 import { RecordConstructorToView } from "lowcoder-core";
-import { useEffect, useRef, useState } from "react";
+import { ReactElement, useEffect, useRef, useState } from "react";
 import _ from "lodash";
 import ReactResizeDetector from "react-resize-detector";
 import { styleControl } from "comps/controls/styleControl";
@@ -35,6 +35,8 @@ import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { StringControl } from "../controls/codeControl";
 import { PositionControl } from "comps/controls/dropdownControl";
+import { dropdownControl } from "../controls/dropdownControl";
+import { AssetType, IconscoutControl } from "../controls/iconscoutControl";
 
 const Container = styled.div<{ 
   $style: ImageStyleType | undefined, 
@@ -111,6 +113,10 @@ const getStyle = (style: ImageStyleType) => {
 };
 
 const EventOptions = [clickEvent] as const;
+const ModeOptions = [
+  { label: "URL", value: "standard" },
+  { label: "Asset Library", value: "asset-library" },
+] as const;
 
 const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
   const imgRef = useRef<HTMLDivElement>(null);
@@ -194,7 +200,11 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
             }
           >
             <AntImage
-              src={props.src.value}
+              src={
+                props.sourceMode === 'asset-library'
+                ? props.iconScoutAsset?.value
+                : props.src.value
+              }
               referrerPolicy="same-origin"
               draggable={false}
               preview={props.supportPreview ? {src: props.previewSrc || props.src.value } : false}
@@ -210,7 +220,9 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
 };
 
 const childrenMap = {
+  sourceMode: dropdownControl(ModeOptions, "standard"),
   src: withDefault(StringStateControl, "https://temp.im/350x400"),
+  iconScoutAsset: IconscoutControl(AssetType.ILLUSTRATION),
   onEvent: eventHandlerControl(EventOptions),
   style: styleControl(ImageStyle , 'style'),
   animationStyle: styleControl(AnimationStyle , 'animationStyle'),
@@ -234,7 +246,14 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
     return (
       <>
         <Section name={sectionNames.basic}>
-          {children.src.propertyView({
+          { children.sourceMode.propertyView({
+            label: "",
+            radioButton: true
+          })}
+          {children.sourceMode.getView() === 'standard' && children.src.propertyView({
+            label: trans("image.src"),
+          })}
+          {children.sourceMode.getView() === 'asset-library' && children.iconScoutAsset.propertyView({
             label: trans("image.src"),
           })}
         </Section>