lowcoder-org · raheeliftikhar5 · Feb 3, 2025 · Jan 28, 2025 · Feb 3, 2025 · Feb 3, 2025
diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
@@ -82,35 +82,6 @@ export interface ThemeDetail {
   dataLoadingIndicator?: string;
 }
 
-export interface BrandingSettings {
-  logo: string | null;
-  squareLogo: string | null;
-  mainBrandingColor: string;
-  appHeaderColor: string;
-  adminSidebarColor: string;
-  adminSidebarFontColor: string;
-  adminSidebarActiveBgColor: string;
-  adminSidebarActiveFontColor: string;
-  editorSidebarColor: string;
-  editorSidebarFontColor: string;
-  editorSidebarActiveBgColor: string;
-  editorSidebarActiveFontColor: string;
-  font: string;
-  errorPageText: string;
-  errorPageImage: string | null;
-  signUpPageText: string;
-  signUpPageImage: string | null;
-  loggedOutPageText: string;
-  loggedOutPageImage: string | null;
-  standardDescription: string;
-  standardTitle: string;
-  showDocumentation: boolean;
-  documentationLink: string | null;
-  submitIssue: boolean;
-  whatsNew: boolean;
-  whatsNewLink: string | null;
-}
-
 export function getThemeDetailName(key: keyof ThemeDetail) {
   switch (key) {
     case "primary": return trans("themeDetail.primary");

diff --git a/client/packages/lowcoder/src/api/enterpriseApi.ts b/client/packages/lowcoder/src/api/enterpriseApi.ts
@@ -1,45 +1,110 @@
 import axios from 'axios';
 
+export interface FetchBrandingSettingPayload {
+  orgId?: string;
+}
+export interface BrandingSettings {
+  logo?: string | null;
+  squareLogo?: string | null;
+  mainBrandingColor?: string;
+  appHeaderColor?: string;
+  adminSidebarColor?: string;
+  adminSidebarFontColor?: string;
+  adminSidebarActiveBgColor?: string;
+  adminSidebarActiveFontColor?: string;
+  editorSidebarColor?: string;
+  editorSidebarFontColor?: string;
+  editorSidebarActiveBgColor?: string;
+  editorSidebarActiveFontColor?: string;
+  font?: string;
+  errorPageText?: string;
+  errorPageImage?: string | null;
+  signUpPageText?: string;
+  signUpPageImage?: string | null;
+  loggedOutPageText?: string;
+  loggedOutPageImage?: string | null;
+  standardDescription?: string;
+  standardTitle?: string;
+  showDocumentation?: boolean;
+  documentationLink?: string | null;
+  submitIssue?: boolean;
+  whatsNew?: boolean;
+  whatsNewLink?: string | null;
+}
+export interface BrandingConfig {
+  config_name?: string,
+  config_description?: string,
+  config_icon?: string,
+  config_set?: BrandingSettings,
+  org_id?: string,
+  user_id?: string,
+  id?: string,
+}
+
+export interface BrandingSettingResponse extends BrandingConfig {};
+
+export interface EnterpriseLicenseResponse {
+  eeActive: boolean;
+  remainingAPICalls: number;
+  eeLicenses: Array<{
+    uuid: string;
+    issuedTo: string;
+    apiCallsLimit: number;
+  }>;
+}
+
 // Existing functions
 export const getEnterpriseLicense = async () => {
-    const response = await axios.get('/api/plugins/enterprise/license');
-    return response.data;
+  const response = await axios.get('/api/plugins/enterprise/license');
+  return response.data;
 };
 
 export const getAuditLogs = async (params = {}) => {
-    const query = new URLSearchParams(params).toString();
-    const response = await axios.get(`/api/plugins/enterprise/audit-logs${query ? `?${query}` : ''}`);
-    return response.data;
+  const query = new URLSearchParams(params).toString();
+  const response = await axios.get(`/api/plugins/enterprise/audit-logs${query ? `?${query}` : ''}`);
+  return response.data;
 };
 
 export const getAuditLogStatistics = async (groupByParam : string) => {
-    const response = await axios.get(`/api/plugins/enterprise/audit-logs/statistics?groupByParam=${groupByParam}`);
-    return response.data;
+  const response = await axios.get(`/api/plugins/enterprise/audit-logs/statistics?groupByParam=${groupByParam}`);
+  return response.data;
 };
 
 export const getAppUsageLogs = async (params = {}) => {
-    const query = new URLSearchParams(params).toString();
-    const response = await axios.get(`/api/plugins/enterprise/app-usage-logs${query ? `?${query}` : ''}`);
-    return response.data;
+  const query = new URLSearchParams(params).toString();
+  const response = await axios.get(`/api/plugins/enterprise/app-usage-logs${query ? `?${query}` : ''}`);
+  return response.data;
 };
 
 export const getAppUsageStatistics = async (groupByParam : string) => {
-    const response = await axios.get(`/api/plugins/enterprise/app-usage-logs/statistics?groupByParam=${groupByParam}`);
-    return response.data;
+  const response = await axios.get(`/api/plugins/enterprise/app-usage-logs/statistics?groupByParam=${groupByParam}`);
+  return response.data;
 };
 
 
-export const getBranding = async () => {
-    const response = await axios.get('/api/plugins/enterprise/branding');
-    return response.data;
+export const getBranding = async (orgId: string = '') => {
+  const response = await axios.get('/api/plugins/enterprise/branding?orgId='+orgId);
+  const data = response.data;
+  if (Boolean(data.error)) {
+    return {};
+  }
+  return {
+    ...data,
+    config_set: JSON.parse(data.config_set),
+  };
 };
 
 export const createBranding = async (brandingData : any) => {
-    const response = await axios.post('/api/plugins/enterprise/branding', brandingData);
-    return response.data;
+  let response;
+  if (brandingData.id) {
+    response = await axios.put(`/api/plugins/enterprise/branding?brandId=${brandingData.id}`, brandingData);
+  } else {
+    response = await axios.post('/api/plugins/enterprise/branding', brandingData);
+  }
+  return response.data;
 };
 
 export const updateBranding = async (brandingData : any) => {
-    const response = await axios.put('/api/plugins/enterprise/branding', brandingData);
-    return response.data;
+  const response = await axios.put('/api/plugins/enterprise/branding', brandingData);
+  return response.data;
 };
diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
@@ -60,7 +60,8 @@ 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 { fetchCommonSettings } from "./redux/reduxActions/commonSettingsActions";
+import { fetchBrandingSetting } from "./redux/reduxActions/enterpriseActions";
+import { EnterpriseProvider } from "./util/context/EnterpriseContext";
 
 const LazyUserAuthComp = React.lazy(() => import("pages/userAuth"));
 const LazyInviteLanding = React.lazy(() => import("pages/common/inviteLanding"));
@@ -95,7 +96,7 @@ type AppIndexProps = {
   defaultHomePage: string | null | undefined;
   fetchHomeDataFinished: boolean;
   fetchConfig: (orgId?: string) => void;
-  fetchCommonSettings: (orgId: string) => void;
+  fetchBrandingSetting: (orgId?: string) => void;
   fetchHomeData: (currentUserAnonymous?: boolean | undefined) => void;
   fetchLowcoderCompVersions: () => void;
   getCurrentUser: () => void;
@@ -123,7 +124,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
       if (!this.props.currentUserAnonymous) {
         this.props.fetchHomeData(this.props.currentUserAnonymous);
         this.props.fetchLowcoderCompVersions();
-        this.props.fetchCommonSettings(this.props.currentOrgId!);
+        this.props.fetchBrandingSetting(this.props.currentOrgId);
       }
     }
   }
@@ -430,7 +431,7 @@ const mapDispatchToProps = (dispatch: any) => ({
   fetchHomeData: (currentUserAnonymous: boolean | undefined) => {
     dispatch(fetchHomeData({}));
   },
-  fetchCommonSettings: (orgId: string) => dispatch(fetchCommonSettings({ orgId })),
+  fetchBrandingSetting: (orgId?: string) => dispatch(fetchBrandingSetting({ orgId })),
   fetchLowcoderCompVersions: async () => {
     try {
       dispatch(setLowcoderCompsLoading(true));
@@ -458,7 +459,9 @@ export function bootstrap() {
   const root = createRoot(container!);
   root.render(
     <Provider store={reduxStore}>
+      <EnterpriseProvider>
         <AppIndexWithProps />
+      </EnterpriseProvider>
     </Provider>
   );
 }
diff --git a/client/packages/lowcoder/src/components/layout/Layout.tsx b/client/packages/lowcoder/src/components/layout/Layout.tsx
@@ -10,7 +10,6 @@ import { CNMainContent, CNSidebar } from "constants/styleSelectors";
 import { SideBarSection, SideBarSectionProps } from "./SideBarSection";
 import styled from "styled-components";
 import { useSelector } from "react-redux";
-import { getBrandingSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors";
 import { MenuOutlined } from "@ant-design/icons";
 import { Drawer, Button } from "antd";
 
@@ -58,7 +57,6 @@ const DrawerContentWrapper = styled.div`
 `;
 
 export function Layout(props: LayoutProps) {
-  const brandingSettings = useSelector(getBrandingSettings);
   const [drawerVisible, setDrawerVisible] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
 

diff --git a/client/packages/lowcoder/src/components/layout/SideBarSection.tsx b/client/packages/lowcoder/src/components/layout/SideBarSection.tsx
@@ -11,7 +11,7 @@ import { getUser } from "../../redux/selectors/usersSelectors";
 import { normalAppListSelector } from "../../redux/selectors/applicationSelector";
 import { useLocation } from "react-router-dom";
 import history from "../../util/history";
-import { getBrandingSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors";
+import { getBrandingSetting } from "@lowcoder-ee/redux/selectors/enterpriseSelectors";
 
 const defaultOnSelectedFn = (routePath: string, currentPath: string) => routePath === currentPath;
 
@@ -24,7 +24,8 @@ const Wrapper = styled.div`
 export const SideBarSection = (props: SideBarSectionProps) => {
   const user = useSelector<AppState, User>(getUser);
   const applications = useSelector<AppState, ApplicationMeta[]>(normalAppListSelector);
-  const brandingSettings = useSelector(getBrandingSettings);
+  const brandingSettings = useSelector(getBrandingSetting);
+  console.log('brandingSettings', brandingSettings);
   const currentPath = useLocation().pathname;
   const isShow = props.items
     .map((item) => (item.visible ? item.visible({ user: user, applications: applications }) : true))
@@ -47,8 +48,8 @@ export const SideBarSection = (props: SideBarSectionProps) => {
                   ? item.onSelected(item.routePath, currentPath)
                   : defaultOnSelectedFn(item.routePath, currentPath)
               }
-              selectedBgColor={brandingSettings?.adminSidebarActiveBgColor}
-              selectedFontColor={brandingSettings?.adminSidebarActiveFontColor}
+              selectedBgColor={brandingSettings?.config_set?.adminSidebarActiveBgColor}
+              selectedFontColor={brandingSettings?.config_set?.adminSidebarActiveFontColor}
               onClick={() => {
                 // Trigger item's onClick if defined
                 item.onClick

diff --git a/client/packages/lowcoder/src/constants/reduxActionConstants.ts b/client/packages/lowcoder/src/constants/reduxActionConstants.ts
@@ -173,6 +173,11 @@ export const ReduxActionTypes = {
   FETCH_ENTERPRISE_LICENSE : "FETCH_ENTERPRISE_LICENSE",
   SET_ENTERPRISE_LICENSE : "SET_ENTERPRISE_LICENSE",
 
+  /* Branding Setting */
+  FETCH_BRANDING_SETTING : "FETCH_BRANDING_SETTING",
+  SET_WORKSPACE_BRANDING_SETTING : "SET_WORKSPACE_BRANDING_SETTING",
+  SET_GLOBAL_BRANDING_SETTING : "SET_GLOBAL_BRANDING_SETTING",
+
   /* application snapshot */
   FETCH_APP_SNAPSHOTS: "FETCH_APP_SNAPSHOTS",
   FETCH_APP_SNAPSHOTS_SUCCESS: "FETCH_APP_SNAPSHOTS_SUCCESS",

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -2850,6 +2850,12 @@ export const en = {
 
   "branding": {
     "title": "Branding Settings",
+    "general": "General",
+    "selectWorkspace": "Select Workspace",
+    "brandingName": "Branding Name",
+    "brandingNamePlaceholder": "Enter branding name",
+    "brandingDescription": "Branding Description",
+    "brandingDescriptionPlaceholder": "Enter branding description",
     "logoSection": "Logos",
     "logo": "Logo",
     "logoHelp": "Upload your company's logo in SVG or PNG format.",

diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
@@ -149,7 +149,7 @@ export default function ApplicationHome() {
   return (
     <DivStyled>
       <LoadingBarHideTrigger />
-      <EnterpriseProvider>
+      {/* <EnterpriseProvider> */}
         <SimpleSubscriptionContextProvider>
           <Layout
             sections={[
@@ -285,7 +285,7 @@ export default function ApplicationHome() {
             ]}
           />
         </SimpleSubscriptionContextProvider>
-      </EnterpriseProvider>
+      {/* </EnterpriseProvider> */}
     </DivStyled>
   );
 }
diff --git a/client/packages/lowcoder/src/pages/common/header.tsx b/client/packages/lowcoder/src/pages/common/header.tsx
@@ -64,8 +64,8 @@ import Avatar from 'antd/es/avatar';
 import UserApi from "@lowcoder-ee/api/userApi";
 import { validateResponse } from "@lowcoder-ee/api/apiUtils";
 import ProfileImage from "./profileImage";
-import { getBrandingSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors";
 import { buildMaterialPreviewURL } from "@lowcoder-ee/util/materialUtils";
+import { getBrandingSetting } from "@lowcoder-ee/redux/selectors/enterpriseSelectors";
 
 const { Countdown } = Statistic;
 const { Text } = Typography;
@@ -380,7 +380,7 @@ export default function Header(props: HeaderProps) {
   const dispatch = useDispatch();
   const showAppSnapshot = useSelector(showAppSnapshotSelector);
   const {selectedSnapshot, isArchivedSnapshot} = useSelector(getSelectedAppSnapshot);
-  const brandingSettings = useSelector(getBrandingSettings);
+  const brandingSettings = useSelector(getBrandingSetting);
   const { appType } = useContext(ExternalEditorContext);
   const [editName, setEditName] = useState(false);
   const [editing, setEditing] = useState(false);
@@ -436,8 +436,8 @@ export default function Header(props: HeaderProps) {
     <>
       <StyledLink onClick={() => history.push(ALL_APPLICATIONS_URL)}>
         {/* {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 />} */}
-        { brandingSettings?.squareLogo
-          ? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.squareLogo)} />
+        { brandingSettings?.config_set?.squareLogo
+          ? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.config_set?.squareLogo)} />
           : <LogoHome />
         }
       </StyledLink>
@@ -685,7 +685,7 @@ export default function Header(props: HeaderProps) {
       headerMiddle={headerMiddle}
       headerEnd={headerEnd}
       style={{
-        backgroundColor: brandingSettings?.appHeaderColor
+        backgroundColor: brandingSettings?.config_set?.appHeaderColor
       }}
     />
   );
@@ -694,13 +694,13 @@ export default function Header(props: HeaderProps) {
 // header in manager page
 export function AppHeader() {
   const user = useSelector(getUser);
-  const brandingSettings = useSelector(getBrandingSettings);
+  const brandingSettings = useSelector(getBrandingSetting);
 
   const headerStart = (
     <StyledLink onClick={() => history.push(ALL_APPLICATIONS_URL)}>
       {/* {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 />} */}
-      { brandingSettings?.squareLogo
-        ? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.squareLogo)} />
+      { brandingSettings?.config_set?.squareLogo
+        ? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.config_set?.squareLogo)} />
         : <LogoHome />
       }
     </StyledLink>
@@ -711,7 +711,7 @@ export function AppHeader() {
       headerStart={headerStart}
       headerEnd={headerEnd}
       style={{
-        backgroundColor: brandingSettings?.appHeaderColor
+        backgroundColor: brandingSettings?.config_set?.appHeaderColor
       }}
     />
   );