fix:desktop keep last workspace state (#4646)

Signed-off-by: jingyang <3161362058@qq.com>
labring · Apr 1, 2024 · 900d3fc · 900d3fc
1 parent 6b17b95
commit 900d3fc
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 106 deletions.
diff --git a/docs/website/src/pages/self-hosting/product/index.tsx b/docs/website/src/pages/self-hosting/product/index.tsx
@@ -42,8 +42,8 @@ export default function Product() {
         且维护成本极低，仅需半个人力
       </div>
       <div className="flex justify-center mt-14">
-        <Link
-          to={'https://license.sealos.io/'}
+        <div
+          onClick={() => window.open('https://license.sealos.io/')}
           className="rounded-md cursor-pointer hover:no-underline text-[#FFFFFFCC] hover:text-[#FFFFFFCC] bg-[#B7D8FF26] flex justify-center items-center font-semibold text-lg gap-2 py-3 px-4  lg:text-sm"
         >
           <svg
@@ -73,7 +73,7 @@ export default function Product() {
             </g>
           </svg>
           管理私有云
-        </Link>
+        </div>
       </div>
 
       <div className="flex mt-24 gap-9 flex-wrap">

diff --git a/frontend/desktop/src/components/account/index.tsx b/frontend/desktop/src/components/account/index.tsx
@@ -20,7 +20,7 @@ import {
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import useAppStore from '@/stores/app';
 import { ApiResp, Region } from '@/types';
 import { formatMoney } from '@/utils/format';
@@ -38,9 +38,7 @@ import { sessionConfig } from '@/utils/sessionConfig';
 
 const NsMenu = () => {
   const { t } = useTranslation();
-  const session = useSessionStore((s) => s.session);
-  const setToken = useSessionStore((s) => s.setToken);
-  const setSession = useSessionStore((s) => s.setSession);
+  const { session } = useSessionStore();
   const ns_uid = session?.user?.ns_uid || '';
   const router = useRouter();
   const mutation = useMutation({
@@ -120,6 +118,7 @@ const NsMenu = () => {
   );
 };
 export default function Account({ disclosure }: { disclosure: UseDisclosureReturn }) {
+  const [showId, setShowId] = useState(true);
   const { needPassword, rechargeEnabled } = useGlobalStore((state) => state.systemEnv);
   const router = useRouter();
   const { copyData } = useCopyData();
@@ -199,13 +198,20 @@ export default function Account({ disclosure }: { disclosure: UseDisclosureRetur
             {user?.name}
           </Text>
           <HStack mb="10px" gap="2px">
-            <Text color={'grayModern.500'} fontSize={'12px'}>
-              ID: {user?.userId || ''}
+            <Text
+              color={'grayModern.500'}
+              fontSize={'12px'}
+              cursor={'pointer'}
+              onClick={() => setShowId((s) => !s)}
+            >
+              {showId ? `ID: ${user?.userId}` : `NS: ${user?.nsid}`}
             </Text>
             <IconButton
               variant={'white-bg-icon'}
               p="4px"
-              onClick={() => copyData(user?.userId || '')}
+              onClick={() => {
+                if (user?.userId && user.nsid) copyData(showId ? user?.userId : user?.nsid);
+              }}
               icon={<CopyIcon boxSize={'12px'} color={'grayModern.500'} fill={'grayModern.500'} />}
               aria-label={'copy nsid'}
             />

diff --git a/frontend/desktop/src/components/region/RegionToggle.tsx b/frontend/desktop/src/components/region/RegionToggle.tsx
@@ -13,6 +13,7 @@ import { AccessTokenPayload } from '@/types/token';
 
 export default function RegionToggle() {
   const disclosure = useDisclosure();
+  const { setWorkSpaceId, session } = useSessionStore();
   const { t, i18n } = useTranslation();
   const { t: providerT } = useTranslation('cloudProviders');
   const router = useRouter();
@@ -29,6 +30,7 @@ export default function RegionToggle() {
   const curRegion = regionList.find((r) => r.uid === curRegionUid);
 
   const handleCick = async (region: Region) => {
+    setWorkSpaceId(session?.user?.ns_uid || '');
     const target = new URL(`https://${region.domain}/switchRegion`);
     const res = await request.get<any, ApiResp<{ token: string }>>('/api/auth/globalToken');
     const token = res?.data?.token;
@@ -39,107 +41,109 @@ export default function RegionToggle() {
 
   return (
     <>
-      <HStack h="36px" borderRadius={'12px'} position={'relative'}>
-        <HStack
-          borderRadius={'12px'}
-          p={'8px 12px'}
-          gap={'20px'}
-          background={'rgba(244, 246, 248, 0.7)'}
-          boxShadow={'0px 1px 2px rgba(0, 0, 0, 0.2)'}
-          fontSize={'14px'}
-          color={'#152539'}
-          fontWeight={'500'}
-          onClick={() => disclosure.onOpen()}
-        >
-          <Text>
-            {providerT(curRegion?.location || '')} {curRegion?.description?.serial}
-          </Text>
-          <ExchangeIcon />
-        </HStack>
-        {disclosure.isOpen ? (
-          <>
-            <Box
-              position={'fixed'}
-              inset={0}
-              zIndex={'998'}
-              onClick={() => disclosure.onClose()}
-            ></Box>
-            <Box position={'absolute'} inset={0} zIndex={'999'}>
+      {regionList?.length > 1 && (
+        <HStack h="36px" borderRadius={'12px'} position={'relative'}>
+          <HStack
+            borderRadius={'12px'}
+            p={'8px 12px'}
+            gap={'20px'}
+            background={'rgba(244, 246, 248, 0.7)'}
+            boxShadow={'0px 1px 2px rgba(0, 0, 0, 0.2)'}
+            fontSize={'14px'}
+            color={'#152539'}
+            fontWeight={'500'}
+            onClick={() => disclosure.onOpen()}
+          >
+            <Text>
+              {providerT(curRegion?.location || '')} {curRegion?.description?.serial}
+            </Text>
+            <ExchangeIcon />
+          </HStack>
+          {disclosure.isOpen ? (
+            <>
               <Box
-                bgColor={'red'}
-                bg="rgba(255, 255, 255, 0.8)"
-                boxShadow={'0px 1px 2px rgba(0, 0, 0, 0.2)'}
-                position={'absolute'}
-                top="48px"
-                right={0}
-                cursor={'initial'}
-                borderRadius={'8px'}
-                p="20px"
-                backdropFilter={'blur(150px)'}
-              >
-                <HStack gap={'12px'} alignItems={'stretch'}>
-                  {regionList.map((region) => {
-                    const cpuPrice = region?.description?.prices?.find((p) => p.name === 'CPU');
-                    return (
-                      <Box
-                        bgColor={'rgba(255, 255, 255, 0.75)'}
-                        borderRadius={'8px'}
-                        // minW={'165px'}
-                        // minH={'200px'}
-                        py={'12px'}
-                        key={region.uid}
-                        {...(region.uid === curRegionUid
-                          ? {
-                              border: '1.5px solid #219BF4'
-                            }
-                          : {
-                              async onClick() {
-                                await handleCick(region);
-                              },
-                              cursor: 'pointer',
-                              _hover: {
-                                bgColor: 'rgba(255, 255, 255, 0.5)'
+                position={'fixed'}
+                inset={0}
+                zIndex={'998'}
+                onClick={() => disclosure.onClose()}
+              ></Box>
+              <Box position={'absolute'} inset={0} zIndex={'999'}>
+                <Box
+                  bgColor={'red'}
+                  bg="rgba(255, 255, 255, 0.8)"
+                  boxShadow={'0px 1px 2px rgba(0, 0, 0, 0.2)'}
+                  position={'absolute'}
+                  top="48px"
+                  right={0}
+                  cursor={'initial'}
+                  borderRadius={'8px'}
+                  p="20px"
+                  backdropFilter={'blur(150px)'}
+                >
+                  <HStack gap={'12px'} alignItems={'stretch'}>
+                    {regionList.map((region) => {
+                      const cpuPrice = region?.description?.prices?.find((p) => p.name === 'CPU');
+                      return (
+                        <Box
+                          bgColor={'rgba(255, 255, 255, 0.75)'}
+                          borderRadius={'8px'}
+                          // minW={'165px'}
+                          // minH={'200px'}
+                          py={'12px'}
+                          key={region.uid}
+                          {...(region.uid === curRegionUid
+                            ? {
+                                border: '1.5px solid #219BF4'
                               }
-                            })}
-                        // aspectRatio={'16/20'}
-                      >
-                        <Box px={'16px'} fontSize={'14px'} fontWeight={'500'}>
-                          <Text color={'#152539'}>
-                            {providerT(region?.location)} {region?.description?.serial}
-                          </Text>
-                          {cpuPrice && (
-                            <Text color={'#0884DD'} whiteSpace={'nowrap'}>
-                              {cpuPrice?.name} {cpuPrice?.unit_price || 0} {t('Yuan')}/{t('Core')}/
-                              {t('Year')}
+                            : {
+                                async onClick() {
+                                  await handleCick(region);
+                                },
+                                cursor: 'pointer',
+                                _hover: {
+                                  bgColor: 'rgba(255, 255, 255, 0.5)'
+                                }
+                              })}
+                          // aspectRatio={'16/20'}
+                        >
+                          <Box px={'16px'} fontSize={'14px'} fontWeight={'500'}>
+                            <Text color={'#152539'}>
+                              {providerT(region?.location)} {region?.description?.serial}
                             </Text>
-                          )}
-                        </Box>
-                        <Divider color={'#0000000D'} my={'12px'} />
-                        <Box px={'16px'} fontSize={'11px'} fontWeight={'500'}>
-                          <HStack color={'#485264'} gap={'4px'} mb={'2px'}>
-                            <ProviderIcon boxSize={'12px'} />
-                            <Text>{providerT('Provider')}</Text>
-                          </HStack>
-                          <Text color={'#111824'} mb={'8px'}>
-                            {providerT(region?.description?.provider)}
-                          </Text>
-                          <HStack color={'#485264'} gap={'4px'} mb={'2px'}>
-                            <InfoIcon boxSize={'12px'} />
-                            <Text>{t('Description')}</Text>
-                          </HStack>
-                          <Text color={'#111824'} lineHeight={'20px'}>
-                            {region?.description?.description?.[i18n.language as 'zh' | 'en']}
-                          </Text>
+                            {cpuPrice && (
+                              <Text color={'#0884DD'} whiteSpace={'nowrap'}>
+                                {cpuPrice?.name} {cpuPrice?.unit_price || 0} {t('Yuan')}/{t('Core')}
+                                /{t('Year')}
+                              </Text>
+                            )}
+                          </Box>
+                          <Divider color={'#0000000D'} my={'12px'} />
+                          <Box px={'16px'} fontSize={'11px'} fontWeight={'500'}>
+                            <HStack color={'#485264'} gap={'4px'} mb={'2px'}>
+                              <ProviderIcon boxSize={'12px'} />
+                              <Text>{providerT('Provider')}</Text>
+                            </HStack>
+                            <Text color={'#111824'} mb={'8px'}>
+                              {providerT(region?.description?.provider)}
+                            </Text>
+                            <HStack color={'#485264'} gap={'4px'} mb={'2px'}>
+                              <InfoIcon boxSize={'12px'} />
+                              <Text>{t('Description')}</Text>
+                            </HStack>
+                            <Text color={'#111824'} lineHeight={'20px'}>
+                              {region?.description?.description?.[i18n.language as 'zh' | 'en']}
+                            </Text>
+                          </Box>
                         </Box>
-                      </Box>
-                    );
-                  })}
-                </HStack>
+                      );
+                    })}
+                  </HStack>
+                </Box>
               </Box>
-            </Box>
-          </>
-        ) : null}
-      </HStack>
+            </>
+          ) : null}
+        </HStack>
+      )}
     </>
   );
 }
diff --git a/frontend/desktop/src/pages/switchRegion.tsx b/frontend/desktop/src/pages/switchRegion.tsx
@@ -9,13 +9,28 @@ import { isString } from 'lodash';
 import { jwtDecode } from 'jwt-decode';
 import { AccessTokenPayload } from '@/types/token';
 import { sessionConfig } from '@/utils/sessionConfig';
+import { useMutation } from '@tanstack/react-query';
+import { nsListRequest, switchRequest } from '@/api/namespace';
 
 const Callback: NextPage = () => {
   const router = useRouter();
   const setSession = useSessionStore((s) => s.setSession);
   const setToken = useSessionStore((s) => s.setToken);
   const delSession = useSessionStore((s) => s.delSession);
   const curToken = useSessionStore((s) => s.token);
+  const { lastWorkSpaceId } = useSessionStore();
+
+  const mutation = useMutation({
+    mutationFn: switchRequest,
+    async onSuccess(data) {
+      if (data.code === 200 && !!data.data) {
+        await sessionConfig(data.data);
+      } else {
+        throw Error('session in invalid');
+      }
+    }
+  });
+
   useEffect(() => {
     if (!router.isReady) return;
     (async () => {
@@ -30,6 +45,15 @@ const Callback: NextPage = () => {
         const regionTokenRes = await getRegionToken();
         if (regionTokenRes?.data) {
           await sessionConfig(regionTokenRes.data);
+          const session = useSessionStore.getState().session;
+          if (session?.token && session?.user?.ns_uid) {
+            const nsList = await nsListRequest();
+            const namespaces = nsList?.data?.namespaces || [];
+            const existNamespace = namespaces.find((x) => x.uid === lastWorkSpaceId);
+            if (existNamespace && existNamespace.uid !== session.user.ns_uid) {
+              await mutation.mutateAsync(existNamespace.uid);
+            }
+          }
           await router.replace('/');
           return;
         } else {

diff --git a/frontend/desktop/src/stores/session.ts b/frontend/desktop/src/stores/session.ts
@@ -21,6 +21,8 @@ type SessionState = {
   setProvider: (provider?: OauthProvider) => void;
   setToken: (token: string) => void;
   setState: (state: string) => void;
+  lastWorkSpaceId: string;
+  setWorkSpaceId: (id: string) => void;
 };
 
 const useSessionStore = create<SessionState>()(
@@ -30,6 +32,7 @@ const useSessionStore = create<SessionState>()(
       provider: undefined,
       oauth_state: '',
       token: '',
+      lastWorkSpaceId: '',
       setSession: (ss: Session) => set({ session: ss }),
       setSessionProp: (key: keyof Session, value: any) => {
         set((state) => {
@@ -63,6 +66,9 @@ const useSessionStore = create<SessionState>()(
       },
       setToken: (token) => {
         set({ token });
+      },
+      setWorkSpaceId: (id) => {
+        set({ lastWorkSpaceId: id });
       }
     })),
     {