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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy