Get version using restAPI

package/kedro_viz/api/rest/responses/version.py

@@ -0,0 +1,39 @@
+"""`kedro_viz.api.rest.responses.version` contains response classes
+and utility functions for the `/version` REST endpoint"""
+
+from kedro_viz import __version__
+from pydantic import BaseModel, ConfigDict
+from kedro_viz.api.rest.responses.base import BaseAPIResponse
+
+class VersionAPIResponse(BaseAPIResponse):
+    """
+    VersionAPIResponse is a subclass of BaseAPIResponse that represents the response structure for version API.
+
+    Attributes:
+        installed (str): The installed version of the Kedro Viz package.
+        isOutdated (bool): Whether the installed version is outdated.
+        latest (str): The latest available version of the Kedro Viz package.
+    """
+
+    installed: str
+    isOutdated: bool
+    latest: str
+    model_config = ConfigDict(
+        json_schema_extra={
+            "installed": __version__,
+            "isOutdated": False,  
+            "latest": "0.5.0" # how do i check the latest version?
+        }
+    )
+
+def get_version_response():
+    """API response for `/api/version`."""
+    installed_version = __version__
+    latest_version = "0.5.0"  # how do i check the latest version?
+    is_outdated = installed_version != latest_version 
+
+    return VersionAPIResponse(
+        installed=installed_version,
+        isOutdated=is_outdated,
+        latest=latest_version
+    )

package/kedro_viz/api/rest/router.py

@@ -19,6 +19,10 @@
     GraphAPIResponse,
     get_pipeline_response,
 )
+from kedro_viz.api.rest.responses.version import (
+    VersionAPIResponse,
+    get_version_response,
+)
 
 logger = logging.getLogger(__name__)
 
@@ -49,6 +53,14 @@ async def get_single_node_metadata(node_id: str):
 async def get_single_pipeline_data(registered_pipeline_id: str):
     return get_pipeline_response(registered_pipeline_id)
 
+@router.get(
+    "/version",
+    response_model=VersionAPIResponse,
+)
+
+asyn def get_version():
+    return get_version_response()
+
 
 @router.post("/deploy")
 async def deploy_kedro_viz(input_values: DeployerConfiguration):

src/components/wrapper/wrapper.js

@@ -7,6 +7,7 @@ import { useApolloQuery } from '../../apollo/utils';
 import { client } from '../../apollo/config';
 import { GraphQLProvider } from '../provider/provider';
 import { GET_VERSIONS } from '../../apollo/queries';
+import { getVersion } from '../../utils';
 
 import FeatureHints from '../feature-hints';
 import GlobalToolbar from '../global-toolbar';
@@ -29,11 +30,30 @@ export const Wrapper = ({ displayGlobalNavigation, theme }) => {
   const [latestVersion, setLatestVersion] = useState(null);
 
   useEffect(() => {
-    if (versionData) {
-      setIsOutdated(versionData.version.isOutdated);
-      setLatestVersion(versionData.version.latest);
+    async function checkKedroVizVersion() {
+      try {
+        debugger;
+        const request = await getVersion();
+        const response = await request.json();
+
+        if (request.ok) {
+          setIsOutdated(response.isOutdated);
+          setLatestVersion(response.latest);
+        }
+      } catch (error) {
+        console.error('Error fetching Kedro-Viz version:', error);
+      }
     }
-  }, [versionData]);
+
+    checkKedroVizVersion();
+  }, []);
+
+  // useEffect(() => {
+  //   if (versionData) {
+  //     setIsOutdated(versionData.version.isOutdated);
+  //     setLatestVersion(versionData.version.latest);
+  //   }
+  // }, [versionData]);
 
   return (
     <div

src/utils/index.js

@@ -248,6 +248,16 @@ export async function deployViz(inputValues) {
   return request;
 }
 
+export async function getVersion() {
+  const request = await fetch(`api/version`, {
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+    },
+  });
+  return request;
+}
+
 const nodeTypeMapObj = {
   nodes: 'task',
   task: 'nodes',