Skip to content

Commit 133f944

Browse files
raheeliftikhar5raheeliftikhar5
authored
Merge pull request #1494 from lowcoder-org/branding_updates
Branding updates
2 parents 9f53a3f + ed70cfe commit 133f944

File tree

23 files changed

+378
-1485
lines changed

23 files changed

+378
-1485
lines changed

‎client/packages/lowcoder/src/api/commonSettingApi.ts

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -82,35 +82,6 @@ export interface ThemeDetail {
8282
dataLoadingIndicator?: string;
8383
}
8484

85-
export interface BrandingSettings {
86-
logo: string | null;
87-
squareLogo: string | null;
88-
mainBrandingColor: string;
89-
appHeaderColor: string;
90-
adminSidebarColor: string;
91-
adminSidebarFontColor: string;
92-
adminSidebarActiveBgColor: string;
93-
adminSidebarActiveFontColor: string;
94-
editorSidebarColor: string;
95-
editorSidebarFontColor: string;
96-
editorSidebarActiveBgColor: string;
97-
editorSidebarActiveFontColor: string;
98-
font: string;
99-
errorPageText: string;
100-
errorPageImage: string | null;
101-
signUpPageText: string;
102-
signUpPageImage: string | null;
103-
loggedOutPageText: string;
104-
loggedOutPageImage: string | null;
105-
standardDescription: string;
106-
standardTitle: string;
107-
showDocumentation: boolean;
108-
documentationLink: string | null;
109-
submitIssue: boolean;
110-
whatsNew: boolean;
111-
whatsNewLink: string | null;
112-
}
113-
11485
export function getThemeDetailName(key: keyof ThemeDetail) {
11586
switch (key) {
11687
case "primary": return trans("themeDetail.primary");

‎client/packages/lowcoder/src/api/enterpriseApi.ts

Lines changed: 84 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,110 @@
11
import axios from 'axios';
22

3+
export interface FetchBrandingSettingPayload {
4+
orgId?: string;
5+
}
6+
export interface BrandingSettings {
7+
logo?: string | null;
8+
squareLogo?: string | null;
9+
mainBrandingColor?: string;
10+
appHeaderColor?: string;
11+
adminSidebarColor?: string;
12+
adminSidebarFontColor?: string;
13+
adminSidebarActiveBgColor?: string;
14+
adminSidebarActiveFontColor?: string;
15+
editorSidebarColor?: string;
16+
editorSidebarFontColor?: string;
17+
editorSidebarActiveBgColor?: string;
18+
editorSidebarActiveFontColor?: string;
19+
font?: string;
20+
errorPageText?: string;
21+
errorPageImage?: string | null;
22+
signUpPageText?: string;
23+
signUpPageImage?: string | null;
24+
loggedOutPageText?: string;
25+
loggedOutPageImage?: string | null;
26+
standardDescription?: string;
27+
standardTitle?: string;
28+
showDocumentation?: boolean;
29+
documentationLink?: string | null;
30+
submitIssue?: boolean;
31+
whatsNew?: boolean;
32+
whatsNewLink?: string | null;
33+
}
34+
export interface BrandingConfig {
35+
config_name?: string,
36+
config_description?: string,
37+
config_icon?: string,
38+
config_set?: BrandingSettings,
39+
org_id?: string,
40+
user_id?: string,
41+
id?: string,
42+
}
43+
44+
export interface BrandingSettingResponse extends BrandingConfig {};
45+
46+
export interface EnterpriseLicenseResponse {
47+
eeActive: boolean;
48+
remainingAPICalls: number;
49+
eeLicenses: Array<{
50+
uuid: string;
51+
issuedTo: string;
52+
apiCallsLimit: number;
53+
}>;
54+
}
55+
356
// Existing functions
457
export const getEnterpriseLicense = async () => {
5-
const response = await axios.get('/api/plugins/enterprise/license');
6-
return response.data;
58+
const response = await axios.get('/api/plugins/enterprise/license');
59+
return response.data;
760
};
861

962
export const getAuditLogs = async (params = {}) => {
10-
const query = new URLSearchParams(params).toString();
11-
const response = await axios.get(`/api/plugins/enterprise/audit-logs${query ? `?${query}` : ''}`);
12-
return response.data;
63+
const query = new URLSearchParams(params).toString();
64+
const response = await axios.get(`/api/plugins/enterprise/audit-logs${query ? `?${query}` : ''}`);
65+
return response.data;
1366
};
1467

1568
export const getAuditLogStatistics = async (groupByParam : string) => {
16-
const response = await axios.get(`/api/plugins/enterprise/audit-logs/statistics?groupByParam=${groupByParam}`);
17-
return response.data;
69+
const response = await axios.get(`/api/plugins/enterprise/audit-logs/statistics?groupByParam=${groupByParam}`);
70+
return response.data;
1871
};
1972

2073
export const getAppUsageLogs = async (params = {}) => {
21-
const query = new URLSearchParams(params).toString();
22-
const response = await axios.get(`/api/plugins/enterprise/app-usage-logs${query ? `?${query}` : ''}`);
23-
return response.data;
74+
const query = new URLSearchParams(params).toString();
75+
const response = await axios.get(`/api/plugins/enterprise/app-usage-logs${query ? `?${query}` : ''}`);
76+
return response.data;
2477
};
2578

2679
export const getAppUsageStatistics = async (groupByParam : string) => {
27-
const response = await axios.get(`/api/plugins/enterprise/app-usage-logs/statistics?groupByParam=${groupByParam}`);
28-
return response.data;
80+
const response = await axios.get(`/api/plugins/enterprise/app-usage-logs/statistics?groupByParam=${groupByParam}`);
81+
return response.data;
2982
};
3083

3184

32-
export const getBranding = async () => {
33-
const response = await axios.get('/api/plugins/enterprise/branding');
34-
return response.data;
85+
export const getBranding = async (orgId: string = '') => {
86+
const response = await axios.get('/api/plugins/enterprise/branding?orgId='+orgId);
87+
const data = response.data;
88+
if (Boolean(data.error)) {
89+
return {};
90+
}
91+
return {
92+
...data,
93+
config_set: JSON.parse(data.config_set),
94+
};
3595
};
3696

3797
export const createBranding = async (brandingData : any) => {
38-
const response = await axios.post('/api/plugins/enterprise/branding', brandingData);
39-
return response.data;
98+
let response;
99+
if (brandingData.id) {
100+
response = await axios.put(`/api/plugins/enterprise/branding?brandId=${brandingData.id}`, brandingData);
101+
} else {
102+
response = await axios.post('/api/plugins/enterprise/branding', brandingData);
103+
}
104+
return response.data;
40105
};
41106

42107
export const updateBranding = async (brandingData : any) => {
43-
const response = await axios.put('/api/plugins/enterprise/branding', brandingData);
44-
return response.data;
108+
const response = await axios.put('/api/plugins/enterprise/branding', brandingData);
109+
return response.data;
45110
};

‎client/packages/lowcoder/src/app.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,8 @@ import GlobalInstances from 'components/GlobalInstances';
6060
import { fetchHomeData, fetchServerSettingsAction } from "./redux/reduxActions/applicationActions";
6161
import { getNpmPackageMeta } from "./comps/utils/remote";
6262
import { packageMetaReadyAction, setLowcoderCompsLoading } from "./redux/reduxActions/npmPluginActions";
63-
import { fetchCommonSettings } from "./redux/reduxActions/commonSettingsActions";
63+
import { fetchBrandingSetting } from "./redux/reduxActions/enterpriseActions";
64+
import { EnterpriseProvider } from "./util/context/EnterpriseContext";
6465

6566
const LazyUserAuthComp = React.lazy(() => import("pages/userAuth"));
6667
const LazyInviteLanding = React.lazy(() => import("pages/common/inviteLanding"));
@@ -95,7 +96,7 @@ type AppIndexProps = {
9596
defaultHomePage: string | null | undefined;
9697
fetchHomeDataFinished: boolean;
9798
fetchConfig: (orgId?: string) => void;
98-
fetchCommonSettings: (orgId: string) => void;
99+
fetchBrandingSetting: (orgId?: string) => void;
99100
fetchHomeData: (currentUserAnonymous?: boolean | undefined) => void;
100101
fetchLowcoderCompVersions: () => void;
101102
getCurrentUser: () => void;
@@ -123,7 +124,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
123124
if (!this.props.currentUserAnonymous) {
124125
this.props.fetchHomeData(this.props.currentUserAnonymous);
125126
this.props.fetchLowcoderCompVersions();
126-
this.props.fetchCommonSettings(this.props.currentOrgId!);
127+
this.props.fetchBrandingSetting(this.props.currentOrgId);
127128
}
128129
}
129130
}
@@ -430,7 +431,7 @@ const mapDispatchToProps = (dispatch: any) => ({
430431
fetchHomeData: (currentUserAnonymous: boolean | undefined) => {
431432
dispatch(fetchHomeData({}));
432433
},
433-
fetchCommonSettings: (orgId: string) => dispatch(fetchCommonSettings({ orgId })),
434+
fetchBrandingSetting: (orgId?: string) => dispatch(fetchBrandingSetting({ orgId })),
434435
fetchLowcoderCompVersions: async () => {
435436
try {
436437
dispatch(setLowcoderCompsLoading(true));
@@ -458,7 +459,9 @@ export function bootstrap() {
458459
const root = createRoot(container!);
459460
root.render(
460461
<Provider store={reduxStore}>
462+
<EnterpriseProvider>
461463
<AppIndexWithProps />
464+
</EnterpriseProvider>
462465
</Provider>
463466
);
464467
}

‎client/packages/lowcoder/src/components/layout/Layout.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { CNMainContent, CNSidebar } from "constants/styleSelectors";
1010
import { SideBarSection, SideBarSectionProps } from "./SideBarSection";
1111
import styled from "styled-components";
1212
import { useSelector } from "react-redux";
13-
import { getBrandingSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors";
1413
import { MenuOutlined } from "@ant-design/icons";
1514
import { Drawer, Button } from "antd";
1615

@@ -58,7 +57,6 @@ const DrawerContentWrapper = styled.div`
5857
`;
5958

6059
export function Layout(props: LayoutProps) {
61-
const brandingSettings = useSelector(getBrandingSettings);
6260
const [drawerVisible, setDrawerVisible] = useState(false);
6361
const [isMobile, setIsMobile] = useState(false);
6462

‎client/packages/lowcoder/src/components/layout/SideBarSection.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { getUser } from "../../redux/selectors/usersSelectors";
1111
import { normalAppListSelector } from "../../redux/selectors/applicationSelector";
1212
import { useLocation } from "react-router-dom";
1313
import history from "../../util/history";
14-
import { getBrandingSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors";
14+
import { getBrandingSetting } from "@lowcoder-ee/redux/selectors/enterpriseSelectors";
1515

1616
const defaultOnSelectedFn = (routePath: string, currentPath: string) => routePath === currentPath;
1717

@@ -24,7 +24,8 @@ const Wrapper = styled.div`
2424
export const SideBarSection = (props: SideBarSectionProps) => {
2525
const user = useSelector<AppState, User>(getUser);
2626
const applications = useSelector<AppState, ApplicationMeta[]>(normalAppListSelector);
27-
const brandingSettings = useSelector(getBrandingSettings);
27+
const brandingSettings = useSelector(getBrandingSetting);
28+
console.log('brandingSettings', brandingSettings);
2829
const currentPath = useLocation().pathname;
2930
const isShow = props.items
3031
.map((item) => (item.visible ? item.visible({ user: user, applications: applications }) : true))
@@ -47,8 +48,8 @@ export const SideBarSection = (props: SideBarSectionProps) => {
4748
? item.onSelected(item.routePath, currentPath)
4849
: defaultOnSelectedFn(item.routePath, currentPath)
4950
}
50-
selectedBgColor={brandingSettings?.adminSidebarActiveBgColor}
51-
selectedFontColor={brandingSettings?.adminSidebarActiveFontColor}
51+
selectedBgColor={brandingSettings?.config_set?.adminSidebarActiveBgColor}
52+
selectedFontColor={brandingSettings?.config_set?.adminSidebarActiveFontColor}
5253
onClick={() => {
5354
// Trigger item's onClick if defined
5455
item.onClick

‎client/packages/lowcoder/src/constants/reduxActionConstants.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,11 @@ export const ReduxActionTypes = {
173173
FETCH_ENTERPRISE_LICENSE : "FETCH_ENTERPRISE_LICENSE",
174174
SET_ENTERPRISE_LICENSE : "SET_ENTERPRISE_LICENSE",
175175

176+
/* Branding Setting */
177+
FETCH_BRANDING_SETTING : "FETCH_BRANDING_SETTING",
178+
SET_WORKSPACE_BRANDING_SETTING : "SET_WORKSPACE_BRANDING_SETTING",
179+
SET_GLOBAL_BRANDING_SETTING : "SET_GLOBAL_BRANDING_SETTING",
180+
176181
/* application snapshot */
177182
FETCH_APP_SNAPSHOTS: "FETCH_APP_SNAPSHOTS",
178183
FETCH_APP_SNAPSHOTS_SUCCESS: "FETCH_APP_SNAPSHOTS_SUCCESS",

‎client/packages/lowcoder/src/i18n/locales/en.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2855,6 +2855,12 @@ export const en = {
28552855

28562856
"branding": {
28572857
"title": "Branding Settings",
2858+
"general": "General",
2859+
"selectWorkspace": "Select Workspace",
2860+
"brandingName": "Branding Name",
2861+
"brandingNamePlaceholder": "Enter branding name",
2862+
"brandingDescription": "Branding Description",
2863+
"brandingDescriptionPlaceholder": "Enter branding description",
28582864
"logoSection": "Logos",
28592865
"logo": "Logo",
28602866
"logoHelp": "Upload your company's logo in SVG or PNG format.",

‎client/packages/lowcoder/src/pages/ApplicationV2/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export default function ApplicationHome() {
149149
return (
150150
<DivStyled>
151151
<LoadingBarHideTrigger />
152-
<EnterpriseProvider>
152+
{/* <EnterpriseProvider> */}
153153
<SimpleSubscriptionContextProvider>
154154
<Layout
155155
sections={[
@@ -285,7 +285,7 @@ export default function ApplicationHome() {
285285
]}
286286
/>
287287
</SimpleSubscriptionContextProvider>
288-
</EnterpriseProvider>
288+
{/* </EnterpriseProvider> */}
289289
</DivStyled>
290290
);
291291
}

‎client/packages/lowcoder/src/pages/common/header.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@ import Avatar from 'antd/es/avatar';
6464
import UserApi from "@lowcoder-ee/api/userApi";
6565
import { validateResponse } from "@lowcoder-ee/api/apiUtils";
6666
import ProfileImage from "./profileImage";
67-
import { getBrandingSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors";
6867
import { buildMaterialPreviewURL } from "@lowcoder-ee/util/materialUtils";
68+
import { getBrandingSetting } from "@lowcoder-ee/redux/selectors/enterpriseSelectors";
6969

7070
const { Countdown } = Statistic;
7171
const { Text } = Typography;
@@ -380,7 +380,7 @@ export default function Header(props: HeaderProps) {
380380
const dispatch = useDispatch();
381381
const showAppSnapshot = useSelector(showAppSnapshotSelector);
382382
const {selectedSnapshot, isArchivedSnapshot} = useSelector(getSelectedAppSnapshot);
383-
const brandingSettings = useSelector(getBrandingSettings);
383+
const brandingSettings = useSelector(getBrandingSetting);
384384
const { appType } = useContext(ExternalEditorContext);
385385
const [editName, setEditName] = useState(false);
386386
const [editing, setEditing] = useState(false);
@@ -436,8 +436,8 @@ export default function Header(props: HeaderProps) {
436436
<>
437437
<StyledLink onClick={() => history.push(ALL_APPLICATIONS_URL)}>
438438
{/* {REACT_APP_LOWCODER_SHOW_BRAND === 'true' ? REACT_APP_LOWCODER_CUSTOM_LOGO_SQUARE !== "" ? <img src={REACT_APP_LOWCODER_CUSTOM_LOGO_SQUARE } height={24} width={24} alt="logo" /> :<LogoIcon /> : <LogoHome />} */}
439-
{ brandingSettings?.squareLogo
440-
? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.squareLogo)} />
439+
{ brandingSettings?.config_set?.squareLogo
440+
? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.config_set?.squareLogo)} />
441441
: <LogoHome />
442442
}
443443
</StyledLink>
@@ -685,7 +685,7 @@ export default function Header(props: HeaderProps) {
685685
headerMiddle={headerMiddle}
686686
headerEnd={headerEnd}
687687
style={{
688-
backgroundColor: brandingSettings?.appHeaderColor
688+
backgroundColor: brandingSettings?.config_set?.appHeaderColor
689689
}}
690690
/>
691691
);
@@ -694,13 +694,13 @@ export default function Header(props: HeaderProps) {
694694
// header in manager page
695695
export function AppHeader() {
696696
const user = useSelector(getUser);
697-
const brandingSettings = useSelector(getBrandingSettings);
697+
const brandingSettings = useSelector(getBrandingSetting);
698698

699699
const headerStart = (
700700
<StyledLink onClick={() => history.push(ALL_APPLICATIONS_URL)}>
701701
{/* {REACT_APP_LOWCODER_SHOW_BRAND === 'true' ? REACT_APP_LOWCODER_CUSTOM_LOGO !== "" ? <img src={REACT_APP_LOWCODER_CUSTOM_LOGO} height={28} alt="logo" /> :<LogoWithName branding={!user.orgDev} /> : <LogoHome />} */}
702-
{ brandingSettings?.squareLogo
703-
? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.squareLogo)} />
702+
{ brandingSettings?.config_set?.squareLogo
703+
? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.config_set?.squareLogo)} />
704704
: <LogoHome />
705705
}
706706
</StyledLink>
@@ -711,7 +711,7 @@ export function AppHeader() {
711711
headerStart={headerStart}
712712
headerEnd={headerEnd}
713713
style={{
714-
backgroundColor: brandingSettings?.appHeaderColor
714+
backgroundColor: brandingSettings?.config_set?.appHeaderColor
715715
}}
716716
/>
717717
);

0 commit comments

Comments
 (0)