Show DataHub version in UI (#298)

#298

datahub/server/app/server.py

@@ -3,10 +3,10 @@
 
 from app import auth
 from app.datasource import register, abort_request
-
 from app.flask_app import flask_app, limiter
 from const.path import WEBAPP_PATH
 
+
 import datasources
 import datasources_socketio
 

datahub/server/datasources/user.py

@@ -1,14 +1,18 @@
 from flask import abort
-from app.auth import get_login_config
 from flask_login import current_user
-from app.db import DBSession
-from const.datasources import RESOURCE_NOT_FOUND_STATUS_CODE
+
+from app.auth import get_login_config
 from app.auth import logout as auth_logout
 from app.datasource import register, api_assert
+from app.db import DBSession
+from const.datasources import RESOURCE_NOT_FOUND_STATUS_CODE
+
+from lib.notify.all_notifiers import ALL_NOTIFIERS
+from lib.utils.version import get_version
+
 from logic import user as logic
 from logic import environment as environment_logic
 from logic import admin as admin_logic
-from lib.notify.all_notifiers import ALL_NOTIFIERS
 
 
 @register("/user/login_method/", methods=["GET"], require_auth=False)
@@ -108,3 +112,9 @@ def handle_create_api_access_tokens():
 @register("/user/notifiers/", methods=["GET"])
 def get_all_query_result_notifier():
     return ALL_NOTIFIERS
+
+
+@register("/version/", methods=["GET"])
+def get_datahub_version():
+    """This gets the current version of datahub from package.json (source of truth)"""
+    return get_version()

datahub/server/lib/utils/version.py

@@ -0,0 +1,14 @@
+import os
+from const.path import PROJECT_ROOT_PATH
+from lib.utils.json import safe_loads
+
+__version = None
+
+
+def get_version():
+    global __version
+    if __version is None:
+        with open(os.path.join(PROJECT_ROOT_PATH, "./package.json")) as f:
+            package_config = safe_loads(f.read(), default_value={})
+            __version = package_config.get("version", None)
+    return __version

datahub/webapp/__tests__/ui/__snapshots__/KeyboardKey.test.js.snap

@@ -8,7 +8,7 @@ exports[`matches enzyme snapshots matches snapshot 1`] = `
 
 exports[`matches test renderer snapshot serializes the styles 1`] = `
 <span
-  className="sc-bdVaJa KeyboardKey mr4 jhrFHl"
+  className="sc-bdVaJa KeyboardKey mr4 cIEmNq"
 >
   test
 </span>

datahub/webapp/__tests__/ui/__snapshots__/Menu.test.js.snap

@@ -49,7 +49,7 @@ exports[`matches test renderer snapshot serializes the styles 1`] = `
     className="sc-bwzfXH MenuItem uTxCW"
   >
     <div
-      className="sc-ifAKCX MenuItemPing kIfKgp"
+      className="sc-ifAKCX MenuItemPing cLYKhy"
     />
   </span>
   <div

datahub/webapp/components/InfoMenuButton/DataHubVersion.tsx

@@ -0,0 +1,17 @@
+import React, { useEffect } from 'react';
+import { useGlobalState } from 'hooks/redux/useGlobalState';
+import ds from 'lib/datasource';
+
+export const DataHubVersion: React.FC = () => {
+    const [version, setVersion] = useGlobalState('datahubVersion', null);
+
+    useEffect(() => {
+        if (version == null) {
+            ds.fetch<string>(`/version/`).then(({ data }) => {
+                setVersion(data);
+            });
+        }
+    }, []);
+
+    return <span>{version}</span>;
+};

datahub/webapp/components/InfoMenuButton/InfoMenuButton.tsx

@@ -7,7 +7,14 @@ import { ChangeLogValue, CHANGE_LOG_KEY } from 'lib/local-store/const';
 
 import { IconButton } from 'ui/Button/IconButton';
 import { Popover } from 'ui/Popover/Popover';
-import { MenuDivider, Menu, MenuItem, MenuItemPing } from 'ui/Menu/Menu';
+import {
+    MenuDivider,
+    Menu,
+    MenuItem,
+    MenuItemPing,
+    MenuInfoItem,
+} from 'ui/Menu/Menu';
+import { DataHubVersion } from './DataHubVersion';
 
 export const InfoMenuButton: React.FunctionComponent = () => {
     const [showPanel, setShowPanel] = React.useState(false);
@@ -32,19 +39,21 @@ export const InfoMenuButton: React.FunctionComponent = () => {
     const getPanelDOM = () => {
         const panelContent = (
             <Menu>
+                <MenuInfoItem>
+                    DataHub v<DataHubVersion />
+                </MenuInfoItem>
+                <MenuDivider />
                 <MenuItem
                     onClick={() => {
                         navigateWithinEnv('/changelog/', {
                             isModal: true,
                         });
                         setNotification(false);
                     }}
-                    ping={notification}
                 >
                     Change Logs
                     {notification ? <MenuItemPing /> : null}
                 </MenuItem>
-                <MenuDivider />
                 <MenuItem
                     onClick={() =>
                         navigateWithinEnv('/info/shortcut/', {
@@ -54,7 +63,6 @@ export const InfoMenuButton: React.FunctionComponent = () => {
                 >
                     Shortcuts
                 </MenuItem>
-                <MenuDivider />
                 <MenuItem
                     onClick={() =>
                         navigateWithinEnv('/info/faq/', {
@@ -64,7 +72,6 @@ export const InfoMenuButton: React.FunctionComponent = () => {
                 >
                     FAQs
                 </MenuItem>
-                <MenuDivider />
                 <MenuItem
                     onClick={() =>
                         navigateWithinEnv('/info/tour/', {

datahub/webapp/components/UserMenu/UserMenu.tsx

@@ -14,9 +14,10 @@ import { Link } from 'ui/Link/Link';
 import { MenuInfoItem, Menu, MenuDivider, MenuItem } from 'ui/Menu/Menu';
 import { Modal } from 'ui/Modal/Modal';
 import { Popover, PopoverLayout } from 'ui/Popover/Popover';
-import './UserMenu.scss';
 import { ToggleSwitch } from 'ui/ToggleSwitch/ToggleSwitch';
 
+import './UserMenu.scss';
+
 interface IProps {
     tooltipPos?: TooltipDirection;
     popoverLayout?: PopoverLayout;

datahub/webapp/ui/KeyboardKey/KeyboardKey.tsx

@@ -5,6 +5,7 @@ import React, { useMemo } from 'react';
 const StyledKeyboardKey = styled.span.attrs<{}>({
     className: 'KeyboardKey mr4',
 })`
+    cursor: default;
     border: var(--border);
     border-radius: var(--border-radius);
     background-color: var(--bg-color);

datahub/webapp/ui/Menu/Menu.tsx

@@ -30,7 +30,7 @@ export const MenuDivider = styled.div.attrs<{}>({
 export const MenuItemPing = styled.div.attrs<{}>({
     className: 'MenuItemPing',
 })`
-    cursor: default;
+    pointer-events: none;
     border-radius: 100px;
     background-color: var(--color-accent-bg);
     width: 8px;