chore: Provide basic repo structure and ensure that stories, tests, v…

…scode setup properly (#458)

* chore: separate AppInfo
* chore: vscode properly understands @flyteconsole
* chore: add basics/locale entry
* test: add storybooks and tests
* test: fix istanbul test-coverage issue by binding babel versions

Signed-off-by: Nastya Rusina <[email protected]>

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

@@ -1,11 +1,17 @@
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import classnames from 'classnames';
-import { FlyteLogo } from 'components/common/FlyteLogo';
+import { AppInfo, VersionInfo } from '@flyteconsole/components';
+import { FlyteLogo } from '@flyteconsole/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 { useAdminVersion } from 'components/hooks/useVersion';
+import { env } from 'common/env';
 import { UserInformation } from './UserInformation';
+import t, { patternKey } from './strings';
+
+const { version: platformVersion } = require('../../../package.json');
 
 const useStyles = makeStyles((theme: Theme) => ({
   spacer: {
@@ -20,13 +26,34 @@ const useStyles = makeStyles((theme: Theme) => ({
 export const DefaultAppBarContent: React.FC = () => {
   const commonStyles = useCommonStyles();
   const styles = useStyles();
+  const { adminVersion } = useAdminVersion();
+
+  const versions: VersionInfo[] = [
+    {
+      name: t('versionConsoleUi'),
+      version: platformVersion,
+      url: `https://github.com/flyteorg/flyteconsole/releases/tag/v${platformVersion}`,
+    },
+    {
+      name: t('versionAdmin'),
+      version: adminVersion,
+      url: `https://github.com/flyteorg/flyteadmin/releases/tag/v${adminVersion}`,
+    },
+    {
+      name: t('versionGoogleAnalytics'),
+      version: t(patternKey('gaDisable', env.DISABLE_GA)),
+      url: 'https://github.com/flyteorg/flyteconsole#google-analytics',
+    },
+  ];
+
   return (
     <>
       <Link className={classnames(commonStyles.linkUnstyled)} to={Routes.SelectProject.path}>
-        <FlyteLogo size={32} variant="dark" />
+        <FlyteLogo size={32} />
       </Link>
       <div className={styles.spacer} />
       <UserInformation />
+      <AppInfo versions={versions} documentationUrl="https://docs.flyte.org/en/latest/" />
     </>
   );
 };

packages/zapp/console/src/components/Navigation/UserInformation.tsx

@@ -1,10 +1,10 @@
+import * as React from 'react';
 import Link from '@material-ui/core/Link';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { WaitForData } from 'components/common/WaitForData';
 import { useUserProfile } from 'components/hooks/useUserProfile';
 import { getLoginUrl } from 'models/AdminEntity/utils';
-import * as React from 'react';
-import { VersionDisplayModal } from './VersionDisplayModal';
+import t from './strings';
 
 const useStyles = makeStyles((theme: Theme) => ({
   container: {
@@ -14,23 +14,18 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const LoginLink: React.FC = () => (
   <Link href={getLoginUrl()} color="inherit">
-    Login
+    {t('login')}
   </Link>
 );
 
 /** Displays user info if logged in, or a login link otherwise. */
 export const UserInformation: React.FC<{}> = () => {
+  const style = useStyles();
   const profile = useUserProfile();
-  const [showVersionInfo, setShowVersionInfo] = React.useState(false);
 
-  let modalContent: JSX.Element | null = null;
-  if (showVersionInfo) {
-    const onClose = () => setShowVersionInfo(false);
-    modalContent = <VersionDisplayModal onClose={onClose} />;
-  }
   return (
     <WaitForData spinnerVariant="none" {...profile}>
-      <div className={useStyles().container}>
+      <div className={style.container}>
         {!profile.value ? (
           <LoginLink />
         ) : !profile.value.preferredUsername || profile.value.preferredUsername === '' ? (
@@ -39,27 +34,6 @@ export const UserInformation: React.FC<{}> = () => {
           profile.value.preferredUsername
         )}
       </div>
-      <div
-        onClick={() => setShowVersionInfo(true)}
-        style={{
-          cursor: 'pointer',
-          display: 'flex',
-          marginLeft: '5px',
-        }}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          fill="currentColor"
-          className="bi bi-info-circle"
-          viewBox="0 0 16 16"
-        >
-          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
-          <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
-        </svg>
-      </div>
-      {modalContent}
     </WaitForData>
   );
 };

yarn.lock

@@ -370,9 +370,15 @@
     "@babel/types" "^7.16.8"
 
 "@babel/helpers@^7.16.7":
+<<<<<<< HEAD
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.9.tgz#b2af120821bfbe44f9907b1826e168e819375a1a"
   integrity sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q==
+=======
+  version "7.17.2"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.2.tgz#23f0a0746c8e287773ccd27c14be428891f63417"
+  integrity sha512-0Qu7RLR1dILozr/6M0xgj+DFPmi6Bnulgm9M8BVa9ZCWxDqlSnqt3cf8IDPB5m45sVXUZ0kuQAgUrdSFFH79fQ==
+>>>>>>> chore: Provide basic repo structure and ensure that stories, tests, vscode setup properly (#458)
   dependencies:
     "@babel/template" "^7.16.7"
     "@babel/traverse" "^7.17.9"
@@ -1312,6 +1318,7 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+<<<<<<< HEAD
 "@babel/traverse@^7.16.10", "@babel/traverse@^7.17.9":
   version "7.17.10"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.10.tgz#1ee1a5ac39f4eac844e6cf855b35520e5eb6f8b5"
@@ -1328,6 +1335,8 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+=======
+>>>>>>> chore: Provide basic repo structure and ensure that stories, tests, vscode setup properly (#458)
 "@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.11.0", "@babel/types@^7.12.5", "@babel/types@^7.12.7", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.12.7"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.7.tgz#6039ff1e242640a29452c9ae572162ec9a8f5d13"
@@ -2156,6 +2165,7 @@
     "@babel/runtime" "^7.7.2"
     regenerator-runtime "^0.13.3"
 
+<<<<<<< HEAD
 "@jridgewell/gen-mapping@^0.1.0":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
@@ -2174,6 +2184,8 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz#b6461fb0c2964356c469e115f504c95ad97ab88c"
   integrity sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==
 
+=======
+>>>>>>> chore: Provide basic repo structure and ensure that stories, tests, vscode setup properly (#458)
 "@leichtgewicht/ip-codec@^2.0.1":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz#0300943770e04231041a51bd39f0439b5c7ab4f0"