styles(desktop):modify namespace styles (labring#3997)

bxy4543 · Oct 13, 2023 · e6dec19 · e6dec19
1 parent 639d01e
commit e6dec19
Show file tree

Hide file tree

Showing 15 changed files with 210 additions and 159 deletions.
diff --git a/frontend/desktop/public/locales/en/common.json b/frontend/desktop/public/locales/en/common.json
@@ -56,6 +56,7 @@
   "Dissolve Team": "Dissovle Team",
   "Invaild Name of Team": "Dissovle Team",
   "Manage Team": "Manage Team",
+  "Default Team": "Default",
   "private team ID of user": "private team ID of user",
   "Invite Member": "Invite Member",
   "Handle": "Handle",

diff --git a/frontend/desktop/public/locales/zh/common.json b/frontend/desktop/public/locales/zh/common.json
@@ -50,6 +50,7 @@
   "Dissolve Team": "解散",
   "Invaild Name of Team": "不合法的团队名称",
   "Manage Team": "管理团队",
+  "Default Team": "默认",
   "private team ID of user": "用户的 private team 的团队ID",
   "Invite Member": "邀请成员",
   "Handle": "操作",

diff --git a/frontend/desktop/src/__tests__/api/e2e/namespace/create.test.ts b/frontend/desktop/src/__tests__/api/e2e/namespace/create.test.ts
@@ -63,9 +63,19 @@ describe('Login create', () => {
     ['team5', 4],
     ['team6', 5]
   ])(
-    'limit 5 team',
+    'limit 4 team',
     async (teamName: string, idx: number) => {
+      if (idx === 0) {
+        const res = await _passwordLoginRequest(request)({
+          user: 'createTest5',
+          password: 'testtest'
+        });
+        expect(res.data?.user).toBeDefined();
+        session = res.data!;
+        setAuth(session);
+      }
       const res = await createRequest({ teamName });
+      console.log('curIdx', idx, 'code', res.code);
       if (idx > 3) expect(res.code).toBe(403);
       else expect(res.code).toBe(200);
     },

diff --git a/frontend/desktop/src/components/account/index.tsx b/frontend/desktop/src/components/account/index.tsx
@@ -12,30 +12,29 @@ import {
   PopoverTrigger,
   Popover,
   PopoverContent,
-  PopoverBody,
-  PopoverHeader
+  PopoverBody
 } from '@chakra-ui/react';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
-import { useContext, useMemo } from 'react';
+import { useContext, useEffect, useMemo } from 'react';
 import Iconfont from '../iconfont';
 import useAppStore from '@/stores/app';
 
-import { ApiResp, Session } from '@/types';
+import { ApiResp } from '@/types';
 import { formatMoney } from '@/utils/format';
 import { RechargeEnabledContext } from '@/pages';
 import TeamCenter from '@/components/team/TeamCenter';
 import NsList from '@/components/team/NsList';
-import CreateTeam from '../team/CreateTeam';
-import { NamespaceDto } from '@/types/team';
-import { switchRequest } from '@/api/namespace';
+import { nsListRequest, switchRequest } from '@/api/namespace';
+import RightIcon from '../icons/RightArrow';
+import { NSType } from '@/types/team';
 
 const NsMenu = () => {
   const { t } = useTranslation();
   const session = useSessionStore((s) => s.session);
   const setSession = useSessionStore((s) => s.setSession);
-  const { ns_uid } = session.user;
+  const { ns_uid, k8s_username } = session.user;
   const router = useRouter();
   const mutation = useMutation({
     mutationFn: switchRequest,
@@ -46,25 +45,49 @@ const NsMenu = () => {
       }
     }
   });
-  const switchTeam = async ({ uid }: NamespaceDto) => {
+  const switchTeam = async ({ uid }: { uid: string }) => {
     if (ns_uid !== uid) mutation.mutate(uid);
   };
+  const { data } = useQuery({
+    queryKey: ['teamList', 'teamGroup'],
+    queryFn: nsListRequest
+  });
+  const namespaces = data?.data?.namespaces || [];
+  const namespace = namespaces.find((x) => x.uid === ns_uid);
+  const defaultNamespace = namespaces.find((x) => x.nstype === NSType.Private);
+  if (!namespace && defaultNamespace && namespaces.length > 0) {
+    // 被删了
+    switchTeam({ uid: defaultNamespace.uid });
+  }
   return (
     <Popover placement="left">
       <PopoverTrigger>
         {
-          // !todo  颜色可以改变
-          <Box pl="12px" cursor={'pointer'}>
-            <Image
-              pr="4px"
-              borderRight={'1px'}
-              borderColor={'#BDC1C5'}
-              color={'#fff'}
-              mr="10px"
-              src="/images/allVector.svg"
-              w="16px"
-              h="16px"
-            />
+          <Box
+            px="16px"
+            cursor={'pointer'}
+            py="10px"
+            bgColor={'rgba(255, 255, 255, 0.6)'}
+            borderRadius={'8px'}
+            width={'full'}
+          >
+            <Text color="#7B838B" fontSize={'11px'} p="4px">
+              {t('Team')}
+            </Text>
+            <Flex
+              justify={'space-between'}
+              align={'center'}
+              _hover={{
+                bgColor: 'rgba(0, 0, 0, 0.03)'
+              }}
+              transition={'0.3s'}
+              p="4px"
+            >
+              <Text fontSize="14px" fontWeight={'500'} color={'#363C42'}>
+                {namespace?.nstype === NSType.Private ? t('Default Team') : namespace?.teamName}
+              </Text>
+              <RightIcon w="16px" h="16px" />
+            </Flex>
           </Box>
         }
       </PopoverTrigger>
@@ -75,21 +98,12 @@ const NsMenu = () => {
         w="250px"
         background="linear-gradient(270deg, #F1F1F1 0%, #EEE 43.75%, #ECECEC 100%)"
       >
-        <PopoverHeader p="0">
-          <Flex w="100%" align={'center'}>
-            <Text fontSize="16px" fontWeight={'600'} py="8px" pl="4px" color={'#363C42'}>
-              {t('Team')}
-            </Text>
-            <TeamCenter />
-            <CreateTeam />
-          </Flex>
-        </PopoverHeader>
         <PopoverBody px="0" pb="0" pt="4px">
           <NsList
             displayPoint={true}
             selected_ns_uid={ns_uid}
             click={switchTeam}
-            nullNs={switchTeam}
+            namespaces={namespaces}
           />
         </PopoverBody>
       </PopoverContent>
@@ -157,27 +171,10 @@ export default function Index({ disclosure }: { disclosure: UseDisclosureReturn
             fallbackSrc="/images/sealos.svg"
             alt="user avator"
           />
-          <Text color={'#24282C'} fontSize={'20px'} fontWeight={600}>
+          <Text color={'#24282C'} fontSize={'20px'} fontWeight={600} mb="22px">
             {user?.name}
           </Text>
-          <Flex
-            alignItems={'center'}
-            mt="8px"
-            bg={'rgba(255, 255, 255, 0.50)'}
-            py="6px"
-            color="#5A646E"
-            borderRadius={'50px'}
-            border="1.5px solid rgba(0,0,0,0)"
-            _hover={{
-              borderColor: '#36ADEF'
-            }}
-          >
-            <NsMenu />
-            <Text fontSize={'12px'}>{nsid}</Text>
-            <Box mr="12px" onClick={() => copyData(nsid)} ml="8px" cursor={'pointer'}>
-              <Iconfont iconName="icon-copy2" width={14} height={14} color="#7B838B"></Iconfont>
-            </Box>
-          </Flex>
+          <NsMenu />
           <Stack
             direction={'column'}
             width={'100%'}
@@ -186,6 +183,10 @@ export default function Index({ disclosure }: { disclosure: UseDisclosureReturn
             borderRadius={'8px'}
             gap={'0px'}
           >
+            <Flex alignItems={'center'} borderBottom={'1px solid #0000001A'} p="16px">
+              <Text>{t('Manage Team')}</Text>
+              <TeamCenter mr="0" />
+            </Flex>
             <Flex alignItems={'center'} borderBottom={'1px solid #0000001A'} p="16px">
               <Text>
                 {t('Balance')}: {formatMoney(balance).toFixed(2)}
@@ -203,6 +204,11 @@ export default function Index({ disclosure }: { disclosure: UseDisclosureReturn
                     });
                     disclosure.onClose();
                   }}
+                  _hover={{
+                    bgColor: 'rgba(0, 0, 0, 0.03)'
+                  }}
+                  transition={'0.3s'}
+                  p="4px"
                   color={'#219BF4'}
                   fontWeight="500"
                   fontSize="12px"
@@ -214,15 +220,32 @@ export default function Index({ disclosure }: { disclosure: UseDisclosureReturn
             {
               <Flex alignItems={'center'} py="16px">
                 <Text ml="16px">kubeconfig</Text>
-                <Box ml="auto" onClick={() => download('kubeconfig.yaml', kubeconfig)}>
+                <Box
+                  _hover={{
+                    bgColor: 'rgba(0, 0, 0, 0.03)'
+                  }}
+                  transition={'0.3s'}
+                  p="4px"
+                  ml="auto"
+                  onClick={() => download('kubeconfig.yaml', kubeconfig)}
+                >
                   <Iconfont
                     iconName="icon-download"
                     width={16}
                     height={16}
                     color="#219BF4"
                   ></Iconfont>
                 </Box>
-                <Box ml="8px" mr="20px" onClick={() => copyData(kubeconfig)} cursor={'pointer'}>
+                <Box
+                  _hover={{
+                    bgColor: 'rgba(0, 0, 0, 0.03)'
+                  }}
+                  p="4px"
+                  ml="8px"
+                  mr="20px"
+                  onClick={() => copyData(kubeconfig)}
+                  cursor={'pointer'}
+                >
                   <Iconfont iconName="icon-copy2" width={16} height={16} color="#219BF4"></Iconfont>
                 </Box>
               </Flex>

diff --git a/frontend/desktop/src/components/icons/RightArrow.tsx b/frontend/desktop/src/components/icons/RightArrow.tsx
@@ -0,0 +1,19 @@
+import { Icon, IconProps } from '@chakra-ui/react';
+
+export default function RightIcon(props: IconProps) {
+  return (
+    <Icon
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M4.7666 14.075C4.59993 13.9083 4.5166 13.711 4.5166 13.483C4.5166 13.2554 4.59993 13.0583 4.7666 12.8917L9.64994 8.00832L4.74993 3.10832C4.59438 2.95277 4.5166 2.75832 4.5166 2.52499C4.5166 2.29165 4.59993 2.09165 4.7666 1.92499C4.93327 1.75832 5.1306 1.67499 5.3586 1.67499C5.58616 1.67499 5.78327 1.75832 5.94993 1.92499L11.5499 7.54165C11.6166 7.60832 11.6639 7.68054 11.6919 7.75832C11.7195 7.8361 11.7333 7.91943 11.7333 8.00832C11.7333 8.09721 11.7195 8.18054 11.6919 8.25832C11.6639 8.3361 11.6166 8.40832 11.5499 8.47499L5.93327 14.0917C5.77771 14.2472 5.58616 14.325 5.3586 14.325C5.1306 14.325 4.93327 14.2417 4.7666 14.075Z"
+        fill="#219BF4"
+      />
+    </Icon>
+  );
+}
diff --git a/frontend/desktop/src/components/team/NsList.tsx b/frontend/desktop/src/components/team/NsList.tsx
@@ -1,39 +1,25 @@
 import { useCopyData } from '@/hooks/useCopyData';
-import request from '@/services/request';
 import { Box, Flex, Text } from '@chakra-ui/react';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import Iconfont from '../iconfont';
-import { ApiResp } from '@/types';
 import InviteMember from './InviteMember';
-import { NSType, NamespaceDto, UserRole } from '@/types/team';
+import { NSType, NamespaceDto } from '@/types/team';
+import { useTranslation } from 'react-i18next';
 const NsList = ({
   click,
   selected_ns_uid,
-  nullNs,
+  namespaces,
   displayPoint = false,
   ...boxprop
 }: {
   displayPoint: boolean;
   click?: (ns: NamespaceDto) => void;
   selected_ns_uid: string;
-  nullNs?: (privateNamespace: NamespaceDto) => void;
+  namespaces: NamespaceDto[];
 } & Parameters<typeof Box>[0]) => {
   const queryClient = useQueryClient();
-  const { data } = useQuery({
-    queryKey: ['teamList', 'teamGroup'],
-    queryFn: () =>
-      request<any, ApiResp<{ namespaces: (NamespaceDto & { role: UserRole })[] }>>(
-        '/api/auth/namespace/list'
-      )
-  });
   const { copyData } = useCopyData();
-  const namespaces = data?.data?.namespaces || [];
-  const namespace = namespaces.find((x) => x.uid === selected_ns_uid);
-  const privateNamespace = namespaces.find((x) => x.nstype === NSType.Private);
-  if (!namespace && namespaces.length > 0 && privateNamespace) {
-    // 被删了
-    nullNs && nullNs(privateNamespace);
-  }
+  const { t } = useTranslation();
   return (
     <Box {...boxprop}>
       {namespaces.length > 0 &&
@@ -83,34 +69,9 @@ const NsList = ({
                   : {})}
                 textTransform={'capitalize'}
               >
-                {ns.teamName}
+                {ns.nstype === NSType.Private ? t('Default Team') : ns.teamName}
               </Text>
             </Flex>
-            <Flex
-              ml="auto"
-              className="namespace-option"
-              display={ns.uid === selected_ns_uid ? 'flex' : 'none'}
-              position={'absolute'}
-              right={'0'}
-            >
-              {ns.nstype === NSType.Team && (
-                <InviteMember ownRole={ns.role} mr="6px" ns_uid={ns.uid} />
-              )}
-              <Flex
-                onClick={() => copyData(ns.id)}
-                justify={'center'}
-                alignItems={'center'}
-                cursor={'pointer'}
-                mr="6px"
-                w="24px"
-                h="24px"
-                _hover={{
-                  bgColor: 'rgba(0, 0, 0, 0.03)'
-                }}
-              >
-                <Iconfont iconName="icon-copy2" width={18} height={18} color="#7B838B"></Iconfont>
-              </Flex>
-            </Flex>
           </Flex>
         ))}
     </Box>