feat: tenant management team mode frontend support

Author: scottsut

frontend/src/app/constants.ts

@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+export enum TenantManagementMode {
+  Team = 'TEAM',
+  Platform = 'PLATFORM',
+}
+
 export enum ControllerFacadeTypes {
   DropdownList = 'dropdownList',
   RadioGroup = 'radioGroup',

frontend/src/app/pages/LoginPage/LoginForm.tsx

@@ -37,9 +37,11 @@ import {
 import { getToken } from 'utils/auth';
 
 export function LoginForm({
+  registerEnable = true,
   modal = false,
   onLogin,
 }: {
+  registerEnable?: boolean;
   modal?: boolean;
   onLogin?: (value) => void;
 }) {
@@ -139,7 +141,9 @@ export function LoginForm({
               <LinkButton to="/forgetPassword">
                 {t('forgotPassword')}
               </LinkButton>
-              <LinkButton to="/register">{t('register')}</LinkButton>
+              {registerEnable && (
+                <LinkButton to="/register">{t('register')}</LinkButton>
+              )}
             </Links>
           )}
 
@@ -168,7 +172,7 @@ const LinkButton = styled(Link)`
   flex: 1;
   line-height: ${LINE_HEIGHT_ICON_LG};
 
-  &:last-of-type {
+  &:nth-child(2) {
     text-align: right;
   }
 `;

frontend/src/app/pages/LoginPage/index.tsx

@@ -18,7 +18,7 @@
 
 import { Brand } from 'app/components/Brand';
 import { Version } from 'app/components/Version';
-import { selectVersion } from 'app/slice/selectors';
+import { selectSystemInfo } from 'app/slice/selectors';
 import { login } from 'app/slice/thunks';
 import React, { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -27,9 +27,9 @@ import styled from 'styled-components/macro';
 import { LoginForm } from './LoginForm';
 
 export function LoginPage() {
-  const version = useSelector(selectVersion);
   const dispatch = useDispatch();
   const history = useHistory();
+  const systemInfo = useSelector(selectSystemInfo);
 
   const onLogin = useCallback(
     values => {
@@ -47,8 +47,11 @@ export function LoginPage() {
   return (
     <Wrapper>
       <Brand />
-      <LoginForm onLogin={onLogin} />
-      <Version version={version} />
+      <LoginForm
+        registerEnable={systemInfo?.registerEnable}
+        onLogin={onLogin}
+      />
+      <Version version={systemInfo?.version} />
     </Wrapper>
   );
 }

frontend/src/app/pages/MainPage/Navbar/index.tsx

@@ -32,6 +32,7 @@ import {
 import { List, Menu, Tooltip } from 'antd';
 import logo from 'app/assets/images/logo.svg';
 import { Avatar, MenuListItem, Popup } from 'app/components';
+import { TenantManagementMode } from 'app/constants';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
 import {
   selectCurrentOrganization,
@@ -40,7 +41,7 @@ import {
   selectOrgId,
 } from 'app/pages/MainPage/slice/selectors';
 import { getOrganizations } from 'app/pages/MainPage/slice/thunks';
-import { selectLoggedInUser } from 'app/slice/selectors';
+import { selectLoggedInUser, selectSystemInfo } from 'app/slice/selectors';
 import { logout } from 'app/slice/thunks';
 import { downloadFile } from 'app/utils/fetch';
 import { BASE_RESOURCE_URL } from 'globalConstants';
@@ -83,6 +84,7 @@ export function Navbar() {
   const [modifyPasswordVisible, setModifyPasswordVisible] = useState(false);
   const dispatch = useDispatch();
   const history = useHistory();
+  const systemInfo = useSelector(selectSystemInfo);
   const orgId = useSelector(selectOrgId);
   const currentOrganization = useSelector(selectCurrentOrganization);
   const loggedInUser = useSelector(selectLoggedInUser);
@@ -289,22 +291,25 @@ export function Navbar() {
               }
             }}
           />
-          <Popup
-            content={<OrganizationList />}
-            trigger={['click']}
-            placement="rightBottom"
-            onVisibleChange={organizationListVisibleChange}
-          >
-            <li>
-              <Tooltip title={t('nav.organization.title')} placement="right">
-                <Avatar
-                  src={`${BASE_RESOURCE_URL}${currentOrganization?.avatar}`}
-                >
-                  <BankFilled />
-                </Avatar>
-              </Tooltip>
-            </li>
-          </Popup>
+          {systemInfo?.tenantManagementMode ===
+            TenantManagementMode.Platform && (
+            <Popup
+              content={<OrganizationList />}
+              trigger={['click']}
+              placement="rightBottom"
+              onVisibleChange={organizationListVisibleChange}
+            >
+              <li>
+                <Tooltip title={t('nav.organization.title')} placement="right">
+                  <Avatar
+                    src={`${BASE_RESOURCE_URL}${currentOrganization?.avatar}`}
+                  >
+                    <BankFilled />
+                  </Avatar>
+                </Tooltip>
+              </li>
+            </Popup>
+          )}
           <Popup
             content={
               <Menu

frontend/src/app/pages/MainPage/pages/MemberPage/Sidebar/MemberList.tsx

@@ -19,8 +19,10 @@
 import { LoadingOutlined, UserAddOutlined } from '@ant-design/icons';
 import { List, Modal } from 'antd';
 import { Avatar, ListItem, ListTitle } from 'app/components';
+import { TenantManagementMode } from 'app/constants';
 import { useDebouncedSearch } from 'app/hooks/useDebouncedSearch';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
+import { selectSystemInfo } from 'app/slice/selectors';
 import {
   memo,
   ReactElement,
@@ -46,6 +48,7 @@ export const MemberList = memo(() => {
   const [inviteFormVisible, setInviteFormVisible] = useState(false);
   const dispatch = useDispatch();
   const history = useHistory();
+  const systemInfo = useSelector(selectSystemInfo);
   const orgId = useSelector(selectOrgId);
   const list = useSelector(selectMembers);
   const listLoading = useSelector(selectMemberListLoading);
@@ -128,19 +131,30 @@ export const MemberList = memo(() => {
     [history, orgId],
   );
 
+  const toAdd = useCallback(() => {
+    toDetail('add')();
+  }, [toDetail]);
+
   const titleProps = useMemo(
     () => ({
       key: 'list',
       subTitle: t('memberTitle'),
       search: true,
-      add: {
-        items: [{ key: 'invite', text: t('inviteMember') }],
-        icon: <UserAddOutlined />,
-        callback: showInviteForm,
-      },
+      add:
+        systemInfo?.tenantManagementMode === TenantManagementMode.Platform
+          ? {
+              items: [{ key: 'invite', text: t('inviteMember') }],
+              icon: <UserAddOutlined />,
+              callback: showInviteForm,
+            }
+          : {
+              items: [{ key: 'add', text: t('addMember') }],
+              icon: <UserAddOutlined />,
+              callback: toAdd,
+            },
       onSearch: debouncedSearch,
     }),
-    [showInviteForm, debouncedSearch, t],
+    [systemInfo, showInviteForm, toAdd, debouncedSearch, t],
   );
   return (
     <Wrapper>