Skip to content

Feature - iconscout intergration #1547

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Apr 19, 2025
Merged
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
0639f1b
integrate iconscout in icon button and image comp
raheeliftikhar5 Jul 2, 2024
6879f3b
integrate iconscout with jsonLottie comp
raheeliftikhar5 Jul 3, 2024
65111f9
added dotlottie option in lottie comp
raheeliftikhar5 Feb 20, 2025
9dfe557
download asset from icon-scout and save as base64 string
raheeliftikhar5 Feb 24, 2025
7ee4135
updated naming for iconScoutAsset
raheeliftikhar5 Feb 24, 2025
fdc8050
updated naming for iconScoutAsset
raheeliftikhar5 Feb 24, 2025
b29b1dd
used dotLottie player for different modes
raheeliftikhar5 Feb 24, 2025
09d7e9d
added option in IconComp to select icons from IconScout
raheeliftikhar5 Feb 24, 2025
60e4561
fixed asset selection popup
raheeliftikhar5 Feb 25, 2025
5a73042
show free/premium assets + redirect to subscription page on clicking …
raheeliftikhar5 Feb 25, 2025
6dea7b9
show loading when user select's an icon to download
raheeliftikhar5 Feb 25, 2025
aff1582
added autoHeight and aspectRatio options in json lottie
raheeliftikhar5 Feb 25, 2025
0dc69c6
fixed selected icon preview in controlButton
raheeliftikhar5 Feb 26, 2025
6886a0e
added fit/align controls in json lottie comp
raheeliftikhar5 Feb 26, 2025
a29d735
Changing to Flow API
Feb 26, 2025
516d9d2
Search and AssetURL APis changed to Flow Endpoint
Feb 26, 2025
4b50843
added events + exposed play/pause/stop methods with json lottie comp
raheeliftikhar5 Feb 27, 2025
99f5725
allow media pack subscribers to use icon scout assets
raheeliftikhar5 Apr 18, 2025
9aaa4be
Merge branch 'dev' into feature-iconscout-intergration
FalkWolsky Apr 19, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions client/packages/lowcoder/package.json
Original file line number Diff line number Diff line change
@@ -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",
163 changes: 163 additions & 0 deletions client/packages/lowcoder/src/api/iconFlowApi.ts
Original file line number Diff line number Diff line change
@@ -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;
15 changes: 15 additions & 0 deletions client/packages/lowcoder/src/api/iconscoutApi.ts
Original file line number Diff line number Diff line change
@@ -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;
5 changes: 0 additions & 5 deletions client/packages/lowcoder/src/api/subscriptionApi.ts
Original file line number Diff line number Diff line change
@@ -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,
57 changes: 30 additions & 27 deletions client/packages/lowcoder/src/app.tsx
Original file line number Diff line number Diff line change
@@ -60,6 +60,7 @@ import GlobalInstances from 'components/GlobalInstances';
import { fetchHomeData, fetchServerSettingsAction } from "./redux/reduxActions/applicationActions";
import { getNpmPackageMeta } from "./comps/utils/remote";
import { packageMetaReadyAction, setLowcoderCompsLoading } from "./redux/reduxActions/npmPluginActions";
import { SimpleSubscriptionContextProvider } from "./util/context/SimpleSubscriptionContext";

const LazyUserAuthComp = React.lazy(() => import("pages/userAuth"));
const LazyInviteLanding = React.lazy(() => import("pages/common/inviteLanding"));
@@ -310,33 +311,35 @@ class AppIndex extends React.Component<AppIndexProps, any> {
component={LazyPublicAppEditor}
/>

<LazyRoute
fallback="layout"
path={APP_EDITOR_URL}
component={LazyAppEditor}
/>
<LazyRoute
fallback="layout"
path={[
USER_PROFILE_URL,
NEWS_URL,
ORG_HOME_URL,
ALL_APPLICATIONS_URL,
DATASOURCE_CREATE_URL,
DATASOURCE_EDIT_URL,
DATASOURCE_URL,
SUPPORT_URL,
QUERY_LIBRARY_URL,
FOLDERS_URL,
FOLDER_URL,
TRASH_URL,
SETTING_URL,
MARKETPLACE_URL,
ADMIN_APP_URL
]}
// component={ApplicationListPage}
component={LazyApplicationHome}
/>
<SimpleSubscriptionContextProvider>
<LazyRoute
fallback="layout"
path={APP_EDITOR_URL}
component={LazyAppEditor}
/>
<LazyRoute
fallback="layout"
path={[
USER_PROFILE_URL,
NEWS_URL,
ORG_HOME_URL,
ALL_APPLICATIONS_URL,
DATASOURCE_CREATE_URL,
DATASOURCE_EDIT_URL,
DATASOURCE_URL,
SUPPORT_URL,
QUERY_LIBRARY_URL,
FOLDERS_URL,
FOLDER_URL,
TRASH_URL,
SETTING_URL,
MARKETPLACE_URL,
ADMIN_APP_URL
]}
// component={ApplicationListPage}
component={LazyApplicationHome}
/>
</SimpleSubscriptionContextProvider>
<LazyRoute exact path={ADMIN_AUTH_URL} component={LazyUserAuthComp} />
<LazyRoute path={USER_AUTH_URL} component={LazyUserAuthComp} />
<LazyRoute
24 changes: 21 additions & 3 deletions client/packages/lowcoder/src/comps/comps/iconComp.tsx
Original file line number Diff line number Diff line change
@@ -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) && (
25 changes: 22 additions & 3 deletions client/packages/lowcoder/src/comps/comps/imageComp.tsx
Original file line number Diff line number Diff line change
@@ -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>
Loading
Oops, something went wrong.
Loading
Oops, something went wrong.