chore: upgrade check

src/layouts/index.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 
-import { userAtom } from '@/atoms/user';
+import { GPUStackVersionAtom, UpdateCheckAtom, userAtom } from '@/atoms/user';
 import ShortCuts, {
   modalConfig as ShortCutsConfig
 } from '@/components/short-cuts';
@@ -88,6 +88,8 @@ const mapRoutes = (routes: IRoute[], role: string) => {
 
 export default (props: any) => {
   const [userInfo] = useAtom(userAtom);
+  const [version] = useAtom(GPUStackVersionAtom);
+  const [updateCheck] = useAtom(UpdateCheckAtom);
   const location = useLocation();
   const navigate = useNavigate();
   const intl = useIntl();
@@ -115,6 +117,7 @@ export default (props: any) => {
   const showVersion = () => {
     Modal.info({
       ...modalConfig,
+      width: 460,
       content: <VersionInfo intl={intl} />
     });
   };
@@ -169,6 +172,14 @@ export default (props: any) => {
     [location.pathname]
   );
 
+  const showUpgrade = useMemo(() => {
+    return (
+      initialState?.currentUser?.is_admin &&
+      updateCheck.latest_version &&
+      updateCheck.latest_version !== version?.version
+    );
+  }, [updateCheck, version, initialState]);
+
   const renderMenuHeader = useCallback(
     (logo, title) => {
       return (
@@ -206,12 +217,13 @@ export default (props: any) => {
         setInitialState,
         intl,
         siderWidth: layoutProps.siderWidth,
-        collapsed: layoutProps.collapsed
+        collapsed: layoutProps.collapsed,
+        showUpgrade
       });
 
       return dom;
     },
-    [intl]
+    [intl, version, updateCheck]
   );
 
   return (

src/layouts/rightRender.tsx

@@ -26,7 +26,7 @@ export const getRightRenderContent = (opts: {
   siderWidth: number;
   intl: any;
 }) => {
-  const { intl, collapsed, siderWidth } = opts;
+  const { intl, collapsed, siderWidth, showUpgrade } = opts;
 
   const allLocals = getAllLocales();
   if (opts.runtimeConfig.rightRender) {
@@ -109,14 +109,28 @@ export const getRightRenderContent = (opts: {
     mode: 'vertical',
     expandIcon: false,
     // inlineCollapsed: collapsed,
-    triggerSubMenuAction: 'hover',
+    triggerSubMenuAction: 'click',
     items: [
       {
         key: 'help',
         icon: <QuestionCircleOutlined />,
         label: (
-          <span className="sub-title">
-            {intl?.formatMessage?.({ id: 'common.button.help' })}
+          <span className="sub-title ">
+            <span className="flex-center">
+              <span>{intl?.formatMessage?.({ id: 'common.button.help' })}</span>
+              {showUpgrade && (
+                <span
+                  className="m-l-5"
+                  style={{
+                    display: 'flex',
+                    width: 8,
+                    height: 8,
+                    borderRadius: 4,
+                    backgroundColor: 'var(--ant-orange-5)'
+                  }}
+                ></span>
+              )}
+            </span>
           </span>
         ),
         children: helpList.map((item) => ({
@@ -125,7 +139,16 @@ export const getRightRenderContent = (opts: {
             <span className="flex flex-center">
               {item.icon}
               {item.key === 'version' ? (
-                <a className="m-l-8">{item.label}</a>
+                <>
+                  <a className="m-l-8">{item.label}</a>
+                  {showUpgrade && (
+                    <span className="new-icon">
+                      <span className="text">
+                        {intl.formatMessage({ id: 'common.text.new' })}
+                      </span>
+                    </span>
+                  )}
+                </>
               ) : (
                 <a
                   className="m-l-8"