fix: code-review

Author: Raubzeug

src/containers/App/App.js

@@ -17,6 +17,8 @@ registerLanguages();
 class App extends React.Component {
     static propTypes = {
         isAuthenticated: PropTypes.bool,
+        singleClusterMode: PropTypes.bool,
+        clusterName: PropTypes.string,
         children: PropTypes.node,
     };
 
@@ -40,9 +42,10 @@ class App extends React.Component {
     }
 
     renderContentWithNavigation() {
+        const {singleClusterMode, clusterName} = this.props;
         return (
             <AsideNavigation>
-                <Content singleClusterMode={this.props.singleClusterMode} />
+                <Content singleClusterMode={singleClusterMode} clusterName={clusterName} />
                 <div id="fullscreen-root"></div>
             </AsideNavigation>
         );
@@ -58,6 +61,7 @@ function mapStateToProps(state) {
         isAuthenticated: state.authentication.isAuthenticated,
         internalUser: state.authentication.user,
         singleClusterMode: state.singleClusterMode,
+        clusterName: state.cluster.data?.Name,
     };
 }
 

src/containers/App/Content.js

@@ -59,7 +59,7 @@ export function Content(props) {
     };
     return (
         <React.Fragment>
-            {!isClustersPage && <Header />}
+            {!isClustersPage && <Header clusterName={props.clusterName} />}
             <main className={b('main')}>{renderRoute()}</main>
             <ReduxTooltip />
             <AppIcons />
@@ -70,6 +70,7 @@ export function Content(props) {
 Content.propTypes = {
     singleClusterMode: PropTypes.bool,
     children: PropTypes.node,
+    clusterName: PropTypes.string,
 };
 
 function ContentWrapper(props) {

src/containers/Header/Header.tsx

@@ -26,16 +26,16 @@ function ClusterName({name}: {name: string}) {
     );
 }
 
-function Header() {
+interface HeaderProps {
+    clusterName: string
+}
+
+function Header({clusterName}: HeaderProps) {
     const dispatch = useDispatch();
     const {data: host}: {data: {ClusterName?: string}} = useSelector((state: any) => state.host);
     const {singleClusterMode, header}: {singleClusterMode: boolean; header: HeaderItemType[]} =
         useSelector((state: any) => state);
 
-    const clusterName: string = useSelector(
-        (state: any) => state.cluster.data?.Name || state.clusterInfo?.title,
-    );
-
     const location = useLocation();
     const history = useHistory();