From 41092e932aa41e3479604680928fbcea1995f37b Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Thu, 29 Apr 2021 15:02:04 +0200
Subject: [PATCH] ui: Fix the cluster version in create node and about page

We couldn't retrieve the cluster version is because we call the
fetchClusterAction before we are authenticated to k8s api.

Solution: since we use the `cluster version` only in create node page
and about page, it makes sense to fetch the data only in those two
pages.
---
 ui/src/containers/About.js          | 10 ++++++++--
 ui/src/containers/Layout.js         |  8 +-------
 ui/src/containers/NodeCreateForm.js |  2 ++
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/ui/src/containers/About.js b/ui/src/containers/About.js
index f1c0f7d076..42a928eeb6 100644
--- a/ui/src/containers/About.js
+++ b/ui/src/containers/About.js
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import { fetchClusterVersionAction } from '../ducks/app/nodes';
 import { intl } from '../translations/IntlGlobalProvider';
 
 const Title = styled.h3`
@@ -18,6 +19,11 @@ const AboutContainer = styled.div`
 
 const About = (props) => {
   const clusterVersion = useSelector((state) => state.app.nodes.clusterVersion);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(fetchClusterVersionAction());
+  }, [dispatch]);
+
   return (
     <AboutContainer>
       <Title>{intl.translate('product_name')}</Title>
diff --git a/ui/src/containers/Layout.js b/ui/src/containers/Layout.js
index d1dcf01df4..62bba0bbfc 100644
--- a/ui/src/containers/Layout.js
+++ b/ui/src/containers/Layout.js
@@ -1,5 +1,5 @@
 //@flow
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
 import { matchPath, RouteProps, Route, Redirect } from 'react-router';
@@ -15,7 +15,6 @@ import { intl } from '../translations/IntlGlobalProvider';
 import { toggleSideBarAction } from '../ducks/app/layout';
 import { removeNotificationAction } from '../ducks/app/notifications';
 import CreateVolume from './CreateVolume';
-import { fetchClusterVersionAction } from '../ducks/app/nodes';
 import { useTypedSelector } from '../hooks';
 import { Navbar } from '../components/Navbar';
 import { Suspense } from 'react';
@@ -45,10 +44,6 @@ const Layout = () => {
   const history = useHistory();
   const location = useLocation();
 
-  useEffect(() => {
-    dispatch(fetchClusterVersionAction());
-  }, [dispatch]);
-
   const doesRouteMatch = useCallback(
     (path: RouteProps) => {
       const location = history.location;
@@ -82,7 +77,6 @@ const Layout = () => {
         }),
         'data-cy': 'sidebar_item_dashboard',
       },
-      // TODO: Will move to the global navbar
       {
         label: intl.translate('nodes'),
         icon: <i className="fas fa-server" />,
diff --git a/ui/src/containers/NodeCreateForm.js b/ui/src/containers/NodeCreateForm.js
index 15ad61d278..1669ea105e 100644
--- a/ui/src/containers/NodeCreateForm.js
+++ b/ui/src/containers/NodeCreateForm.js
@@ -10,6 +10,7 @@ import isEmpty from 'lodash.isempty';
 import {
   createNodeAction,
   clearCreateNodeErrorAction,
+  fetchClusterVersionAction,
 } from '../ducks/app/nodes';
 import { intl } from '../translations/IntlGlobalProvider';
 import {
@@ -135,6 +136,7 @@ const NodeCreateForm = () => {
   const history = useHistory();
 
   useEffect(() => {
+    dispatch(fetchClusterVersionAction());
     return () => {
       dispatch(clearCreateNodeErrorAction());
     };