chore: show correct app version in info

packages/console/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyteorg/console",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Flyteconsole main app module",
   "main": "./dist/index.js",
   "module": "./lib/index.js",

packages/console/src/components/Navigation/DefaultAppBarContent.tsx

@@ -1,9 +1,9 @@
+import * as React from 'react';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import classnames from 'classnames';
 import { AppInfo, VersionInfo } from '@flyteorg/components';
 import { FlyteLogo } from '@flyteorg/ui-atoms';
 import { useCommonStyles } from 'components/common/styles';
-import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { Routes } from 'routes/routes';
 import { FeatureFlag, useFeatureFlag } from 'basics/FeatureFlags';
@@ -15,8 +15,6 @@ import { OnlyMine } from './OnlyMine';
 import { FlyteNavItem } from './utils';
 import t, { patternKey } from './strings';
 
-const { version: platformVersion } = require('../../../package.json');
-
 const useStyles = makeStyles((theme: Theme) => ({
   spacer: {
     flexGrow: 1,
@@ -33,19 +31,37 @@ interface DefaultAppBarProps {
 
 /** Renders the default content for the app bar, which is the logo and help links */
 export const DefaultAppBarContent = (props: DefaultAppBarProps) => {
+  const [platformVersion, setPlatformVersion] = React.useState('');
+  const [consoleVersion, setConsoleVersion] = React.useState('');
   const commonStyles = useCommonStyles();
   const styles = useStyles();
 
   const isFlagEnabled = useFeatureFlag(FeatureFlag.OnlyMine);
   const { adminVersion } = useAdminVersion();
   const isGAEnabled = env.ENABLE_GA === 'true' && env.GA_TRACKING_ID !== '';
 
+  React.useEffect(() => {
+    try {
+      const { version } = require('../../../../../website/package.json');
+      const { version: packageVersion } = require('../../../package.json');
+
+      setPlatformVersion(version);
+      setConsoleVersion(packageVersion);
+    } catch {
+      /* no-op */
+    }
+  }, []);
   const versions: VersionInfo[] = [
     {
       name: t('versionConsoleUi'),
       version: platformVersion,
       url: `https://github.com/flyteorg/flyteconsole/releases/tag/v${platformVersion}`,
     },
+    {
+      name: t('versionConsolePackage'),
+      version: consoleVersion,
+      url: `https://github.com/flyteorg/flyteconsole/tree/master/packages/console`,
+    },
     {
       name: t('versionAdmin'),
       version: adminVersion,
@@ -81,3 +97,5 @@ export const DefaultAppBarContent = (props: DefaultAppBarProps) => {
     </>
   );
 };
+
+export default DefaultAppBarContent;

packages/console/src/components/Navigation/NavBar.tsx

@@ -1,28 +1,30 @@
+import * as React from 'react';
+import { Suspense, lazy } from 'react';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import { navBarContentId } from 'common/constants';
-import { COLOR_SPECTRUM } from 'components/Theme/colorSpectrum';
-import { whiteColor } from 'components/Theme/constants';
 import { FlyteNavigation } from '@flyteorg/common';
-import * as React from 'react';
-import { DefaultAppBarContent } from './DefaultAppBarContent';
 import { getFlyteNavigationData } from './utils';
 
 export interface NavBarProps {
   useCustomContent?: boolean;
   navigationData?: FlyteNavigation;
 }
 
+const DefaultAppBarContent = lazy(() => import('./DefaultAppBarContent'));
+
 /** Contains all content in the top navbar of the application. */
 export const NavBar = (props: NavBarProps) => {
   const navData = props.navigationData ?? getFlyteNavigationData();
   const content = props.useCustomContent ? (
     <div id={navBarContentId} />
   ) : (
-    <DefaultAppBarContent
-      items={navData?.items ?? []}
-      console={navData?.console}
-    />
+    <Suspense fallback={null}>
+      <DefaultAppBarContent
+        items={navData?.items ?? []}
+        console={navData?.console}
+      />
+    </Suspense>
   );
 
   return (
@@ -40,3 +42,5 @@ export const NavBar = (props: NavBarProps) => {
     </AppBar>
   );
 };
+
+export default NavBar;

packages/console/src/components/Navigation/strings.ts

@@ -3,6 +3,7 @@ import { createLocalizedString } from '@flyteorg/locale';
 const str = {
   login: 'Login',
   versionConsoleUi: 'UI Version',
+  versionConsolePackage: 'Package Version',
   versionAdmin: 'Admin Version',
   versionGoogleAnalytics: 'Google Analytics',
   gaActive_: 'Active',

website/package.json

@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@flyteorg/common": "^0.0.3",
-    "@flyteorg/console": "^0.0.11",
+    "@flyteorg/console": "^0.0.12",
     "long": "^4.0.0",
     "protobufjs": "~6.11.3",
     "react-ga4": "^1.4.1",

yarn.lock

@@ -1995,7 +1995,7 @@ __metadata:
   resolution: "@flyteconsole/client-app@workspace:website"
   dependencies:
     "@flyteorg/common": ^0.0.3
-    "@flyteorg/console": ^0.0.11
+    "@flyteorg/console": ^0.0.12
     "@types/long": ^3.0.32
     long: ^4.0.0
     protobufjs: ~6.11.3
@@ -2034,7 +2034,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@flyteorg/console@^0.0.11, @flyteorg/console@workspace:packages/console":
+"@flyteorg/console@^0.0.12, @flyteorg/console@workspace:packages/console":
   version: 0.0.0-use.local
   resolution: "@flyteorg/console@workspace:packages/console"
   dependencies: