Adding Admin Area Icons

lowcoder-org · FalkWolsky · Mar 4, 2024 · Feb 19, 2024 · Feb 21, 2024 · Feb 22, 2024
commit 4f58b9620a645ae562cc44227b0c4fca9775ea5d
diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts
@@ -171,22 +171,6 @@ export { ReactComponent as videoPlayTriangle } from "./icon-video-play-triangle.
 export { ReactComponent as DrawerCompIcon } from "./icon-drawer.svg";
 export { ReactComponent as LeftMeetingIcon } from "./icon-left-comp-video.svg";
 export { ReactComponent as PlusIcon } from "./icon-plus.svg";
-export { ReactComponent as HomeIcon } from "./icon-application-home.svg";
-export { ReactComponent as HomeModuleIcon } from "./icon-application-module.svg";
-export { ReactComponent as HomeQueryLibraryIcon } from "./icon-application-query-library.svg";
-export { ReactComponent as HomeDataSourceIcon } from "./icon-application-datasource.svg";
-export { ReactComponent as RecyclerIcon } from "./icon-application-recycler.svg";
-export { ReactComponent as MarketplaceIcon } from "./icon-application-marketplace.svg";
-export { ReactComponent as LowcoderMarketplaceIcon } from "./icon-lowcoder-marketplace.svg";
-export { ReactComponent as HomeActiveIcon } from "./icon-application-home-active.svg";
-export { ReactComponent as HomeModuleActiveIcon } from "./icon-application-module-active.svg";
-export { ReactComponent as HomeQueryLibraryActiveIcon } from "./icon-application-query-library-active.svg";
-export { ReactComponent as HomeDataSourceActiveIcon } from "./icon-application-datasource-active.svg";
-export { ReactComponent as RecyclerActiveIcon } from "./icon-application-recycler-active.svg";
-export { ReactComponent as MarketplaceActiveIcon } from "./icon-application-marketplace-active.svg";
-export { ReactComponent as  LowcoderMarketplaceActiveIcon } from "./icon-lowcoder-marketplace-active.svg";
-export { ReactComponent as FavoritesIcon } from "./icon-application-favorites.svg";
-export { ReactComponent as HomeSettingIcon } from "./icon-application-setting.svg";
 export { ReactComponent as FolderIcon } from "./icon-application-folder.svg";
 export { ReactComponent as AllTypesIcon } from "./icon-application-all.svg";
 export { ReactComponent as InviteUserIcon } from "./icon-application-invite-user.svg";
@@ -314,6 +298,23 @@ export { ReactComponent as LeftShow } from "./remix/eye-off-line.svg";
 export { ReactComponent as LeftHide } from "./remix/eye-line.svg";
 export { ReactComponent as LeftLock } from "./remix/lock-line.svg";
 export { ReactComponent as LeftUnlock } from "./remix/lock-unlock-line.svg";
+export { ReactComponent as UserGroupIcon } from "./remix/group-line.svg";
+export { ReactComponent as UserIcon } from "./remix/user-line.svg";
+export { ReactComponent as UserAddIcon } from "./remix/user-add-line.svg";
+export { ReactComponent as UserDeleteIcon } from "./remix/user-unfollow-line.svg";
+export { ReactComponent as UserShieldIcon } from "./remix/shield-user-line.svg";
+export { ReactComponent as ThemeIcon } from "./remix/palette-line.svg";
+export { ReactComponent as AppsIcon } from "./remix/apps-2-line.svg";
+export { ReactComponent as WorkspacesIcon } from "./remix/hotel-line.svg";
+
+export { ReactComponent as HomeIcon } from "./remix/home-3-line.svg";
+export { ReactComponent as HomeModuleIcon } from "./remix/focus-mode.svg";
+export { ReactComponent as HomeQueryLibraryIcon } from "./remix/braces-line.svg";
+export { ReactComponent as HomeDataSourceIcon } from "./remix/database-2-line.svg";
+export { ReactComponent as RecyclerIcon } from "./remix/delete-bin-line.svg";
+export { ReactComponent as MarketplaceIcon } from "./icon-application-marketplace.svg";
+export { ReactComponent as FavoritesIcon } from "./icon-application-favorites.svg";
+export { ReactComponent as HomeSettingIcon } from "./remix/settings-4-line.svg";
 
 
 // new

diff --git a/client/packages/lowcoder/src/components/layout/SubSideBar.tsx b/client/packages/lowcoder/src/components/layout/SubSideBar.tsx
@@ -2,8 +2,8 @@ import { PropsWithChildren } from "react";
 import styled from "styled-components";
 
 const Wrapper = styled.div`
-  min-width: 232px;
-  width: 232px;
+  min-width: 280px;
+  width: 280px;
   height: 100%;
   background: #ffffff;
   border-right: 1px solid #f0f0f0;
@@ -17,6 +17,7 @@ const Wrapper = styled.div`
     color: #222222;
     margin: 0 0 20px 20px;
   }
+
   .ant-menu-inline .ant-menu-item {
     margin: 4px 0;
     padding: 10px 20px !important;

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1581,7 +1581,7 @@ export const en = {
     "advanced": "Advanced",
     "lab": "Lab",
     "branding": "Branding",
-    "oauthProviders": "OAuth Providers",
+    "oauthProviders": "User Authentication",
     "appUsage": "App Usage Logs",
     "environments": "Environments",
     "premium": "Premium"
@@ -2621,7 +2621,7 @@ export const en = {
     "table": table,
   },
   "idSource": {
-    "title": "OAuth Providers",
+    "title": "User Authentication Provider",
     "form": "Email",
     "pay": "Premium",
     "enable": "Enable",

diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -1496,7 +1496,7 @@ settings: {
     advanced: "高级",
     lab: "实验室",
     branding: "品牌",
-    oauthProviders: "OAuth 提供商",
+    oauthProviders: "User Authentication",
     appUsage: "应用程序使用日志",
     environments: "环境",
     premium: "高级版",
@@ -2560,7 +2560,7 @@ componentDocExtra: {
     table: table,
 },
 idSource: {
-    title: "OAuth 提供商",
+    title: "用户认证提供商", 
     form: "电子邮件",
     pay: "高级",
     enable: "启用",

diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
@@ -5,7 +5,6 @@ import {
   FOLDER_URL_PREFIX,
   FOLDERS_URL,
   MARKETPLACE_URL,
-  MARKETPLACE_URL_BY_TYPE,
   MODULE_APPLICATIONS_URL,
   QUERY_LIBRARY_URL,
   SETTING,
@@ -17,25 +16,17 @@ import {
   EditPopover,
   EllipsisTextCss,
   FolderIcon,
-  HomeActiveIcon,
-  HomeDataSourceActiveIcon,
   HomeDataSourceIcon,
   HomeIcon,
-  HomeModuleActiveIcon,
   HomeModuleIcon,
-  HomeQueryLibraryActiveIcon,
   HomeQueryLibraryIcon,
-  HomeSettingsActiveIcon,
-  HomeSettingsIcon,
+  HomeSettingIcon,
   InviteUserIcon,
   PlusIcon,
   PointIcon,
-  RecyclerActiveIcon,
   RecyclerIcon,
   MarketplaceIcon,
-  MarketplaceActiveIcon,
-  LowcoderMarketplaceActiveIcon,
-  LowcoderMarketplaceIcon,
+  AppsIcon
 } from "lowcoder-design";
 import React, { useEffect, useState } from "react";
 import { fetchAllApplications, fetchHomeData } from "redux/reduxActions/applicationActions";
@@ -345,48 +336,28 @@ export default function ApplicationHome() {
                 text: <TabLabel>{trans("home.allApplications")}</TabLabel>,
                 routePath: ALL_APPLICATIONS_URL,
                 routeComp: HomeView,
-                icon: ({ selected, ...otherProps }) =>
-                  selected ? <HomeActiveIcon {...otherProps} /> : <HomeIcon {...otherProps} />,
+                icon: ({ selected, ...otherProps }) => selected ? <AppsIcon {...otherProps} width={"24px"}/> : <AppsIcon {...otherProps} width={"24px"}/>,
               },
               {
                 text: <TabLabel>{trans("home.allModules")}</TabLabel>,
                 routePath: MODULE_APPLICATIONS_URL,
                 routeComp: ModuleView,
-                icon: ({ selected, ...otherProps }) =>
-                  selected ? (
-                    <HomeModuleActiveIcon {...otherProps} />
-                  ) : (
-                    <HomeModuleIcon {...otherProps} />
-                  ),
+                icon: ({ selected, ...otherProps }) => selected ? <HomeModuleIcon {...otherProps} width={"24px"}/> : <HomeModuleIcon {...otherProps} width={"24px"}/>,
                 visible: ({ user }) => user.orgDev,
               },
               {
-                text: (
-                  <TabLabel>
-                    {trans("home.marketplace")}
-                  </TabLabel>
-                ),
+                text: <TabLabel>{trans("home.marketplace")}</TabLabel>,
                 routePath: MARKETPLACE_URL,
                 routePathExact: false,
                 routeComp: MarketplaceView,
-                icon: ({ selected, ...otherProps }) =>
-                  selected ? (
-                    <MarketplaceActiveIcon {...otherProps} />
-                  ) : (
-                    <MarketplaceIcon {...otherProps} />
-                  ),
+                icon: ({ selected, ...otherProps }) => selected ? <MarketplaceIcon {...otherProps} width={"24px"}/> : <MarketplaceIcon {...otherProps} width={"24px"}/>,
                 visible: ({ user }) => user.orgDev,
               },
               {
                 text: <TabLabel>{trans("home.trash")}</TabLabel>,
                 routePath: TRASH_URL,
                 routeComp: TrashView,
-                icon: ({ selected, ...otherProps }) =>
-                  selected ? (
-                    <RecyclerActiveIcon {...otherProps} />
-                  ) : (
-                    <RecyclerIcon {...otherProps} />
-                  ),
+                icon: ({ selected, ...otherProps }) => selected ? <RecyclerIcon {...otherProps} width={"24px"}/> : <RecyclerIcon {...otherProps} width={"24px"}/>,
                 visible: ({ user }) => user.orgDev,
               },
             ],
@@ -414,25 +385,15 @@ export default function ApplicationHome() {
                 text: <TabLabel>{trans("home.queryLibrary")}</TabLabel>,
                 routePath: QUERY_LIBRARY_URL,
                 routeComp: QueryLibraryEditor,
-                icon: ({ selected, ...otherProps }) =>
-                  selected ? (
-                    <HomeQueryLibraryActiveIcon {...otherProps} />
-                  ) : (
-                    <HomeQueryLibraryIcon {...otherProps} />
-                  ),
+                icon: ({ selected, ...otherProps }) => selected ? <HomeQueryLibraryIcon {...otherProps} width={"24px"}/> : <HomeQueryLibraryIcon {...otherProps} width={"24px"}/>,
                 visible: ({ user }) => user.orgDev,
               },
               {
                 text: <TabLabel>{trans("home.datasource")}</TabLabel>,
                 routePath: DATASOURCE_URL,
                 routePathExact: false,
                 routeComp: DatasourceHome,
-                icon: ({ selected, ...otherProps }) =>
-                  selected ? (
-                    <HomeDataSourceActiveIcon {...otherProps} />
-                  ) : (
-                    <HomeDataSourceIcon {...otherProps} />
-                  ),
+                icon: ({ selected, ...otherProps }) => selected ? <HomeDataSourceIcon {...otherProps} width={"24px"}/> : <HomeDataSourceIcon {...otherProps} width={"24px"}/>,
                 visible: ({ user }) => user.orgDev,
                 onSelected: (_, currentPath) => currentPath.split("/")[1] === "datasource",
               },
@@ -441,12 +402,7 @@ export default function ApplicationHome() {
                 routePath: SETTING,
                 routePathExact: false,
                 routeComp: Setting,
-                icon: ({ selected, ...otherProps }) =>
-                  selected ? (
-                    <HomeSettingsActiveIcon {...otherProps} />
-                  ) : (
-                    <HomeSettingsIcon {...otherProps} />
-                  ),
+                icon: ({ selected, ...otherProps }) => selected ? <HomeSettingIcon {...otherProps} width={"24px"}/> : <HomeSettingIcon {...otherProps} width={"24px"}/>,
                 visible: ({ user }) => user.orgDev,
                 onSelected: (_, currentPath) => currentPath.split("/")[1] === "setting",
               },

diff --git a/client/packages/lowcoder/src/pages/setting/settingHome.tsx b/client/packages/lowcoder/src/pages/setting/settingHome.tsx
@@ -8,7 +8,14 @@ import AuditSetting from "@lowcoder-ee/pages/setting/audit";
 import { isEE, isEnterpriseMode, isSelfDomain, showAuditLog } from "util/envUtils";
 import { TwoColumnSettingPageContent } from "./styled";
 import SubSideBar from "components/layout/SubSideBar";
-import { Menu } from "lowcoder-design";
+import { 
+  Menu,
+  UserGroupIcon,
+  UserShieldIcon,
+  LeftSettingIcon,
+  ThemeIcon,
+  WorkspacesIcon
+ } from "lowcoder-design";
 import { useSelector } from "react-redux";
 import { getUser } from "redux/selectors/usersSelectors";
 import history from "util/history";
@@ -37,25 +44,35 @@ export function SettingHome() {
   const selectKey = useParams<{ setting: string }>().setting || SettingPageEnum.UserGroups;
 
   const items = [
-    {
-      key: SettingPageEnum.UserGroups,
-      label: trans("settings.userGroups"),
-    },
     {
       key: SettingPageEnum.Organization,
       label: trans("settings.organization"),
+      icon: <WorkspacesIcon width={"20px"}/>,
+    },
+    {
+      key: SettingPageEnum.OAuthProvider,
+      label: (trans("settings.oauthProviders")),
+      disabled: !currentOrgAdmin(user),
+      icon: <UserShieldIcon width={"20px"}/>,
+    },
+    {
+      key: SettingPageEnum.UserGroups,
+      label: trans("settings.userGroups"),
+      icon: <UserGroupIcon width={"20px"}/>,
     },
     {
       key: SettingPageEnum.Theme,
       label: trans("settings.theme"),
+      icon: <ThemeIcon width={"20px"}/>,
     },
     {
-      key: SettingPageEnum.OAuthProvider,
-      label: (
-         <span className="text">{trans("settings.oauthProviders")}</span>
-      ),
-      disabled: !currentOrgAdmin(user),
+      key: SettingPageEnum.Advanced,
+      label: trans("settings.advanced"),
+      icon: <LeftSettingIcon width={"20px"}/>,
     },
+
+    // Premium features
+
     {
       key: SettingPageEnum.Environments,
       label: (
@@ -107,16 +124,13 @@ export function SettingHome() {
         !enableCustomBrand(config) ||
         (!isSelfDomain(config) && !isEnterpriseMode(config)),
     },
-    {
-      key: SettingPageEnum.Advanced,
-      label: trans("settings.advanced"),
-    },
   ];
 
   return (
     <TwoColumnSettingPageContent>
       <SubSideBar title={trans("settings.title")}>
-        <Menu
+        <Menu 
+          style={{ border: "none" }}
           mode="inline"
           selectedKeys={[selectKey]}
           onClick={(value) => {