Updating home namespace list, enhancing the UI.

Signed-off-by: Pedro Ignacio <[email protected]>

Author: pedroignacio13

src/components/ServiceMapApp/WelcomeScreen.scss

@@ -1,13 +1,18 @@
 @use 'sass:color';
 
 .wrapper {
+  display: flex;
+  justify-content: center;
   flex-grow: 1;
   width: 100%;
   overflow: auto;
 }
 
 .content {
-  margin: 124px;
+  margin-top: 130px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .logo {
@@ -24,7 +29,7 @@
 }
 
 .description {
-  margin: 25px 0 0;
+  margin: 25px 0 20px;
   font-size: 14px;
   line-height: 20px;
   font-weight: 500;

src/components/ServiceMapApp/WelcomeScreen.tsx

@@ -1,8 +1,9 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { Spinner } from '@blueprintjs/core';
 import { observer } from 'mobx-react';
 
 import { NamespaceDescriptor } from '~/domain/namespaces';
+import { NamespaceSelectorDropdown } from '../TopBar/NamespaceSelectorDropdown';
 
 import css from './WelcomeScreen.scss';
 import hubbleLogo from '~/assets/images/hubble-logo.png';
@@ -22,11 +23,11 @@ export const WelcomeScreen = observer(function WelcomeScreen(props: Props) {
         <h1 className={css.title}>Welcome!</h1>
         <p className={css.description}>To begin select one of the namespaces:</p>
         {someNamespacesLoaded ? (
-          <ul className={css.namespacesList}>
-            {props.namespaces.map(ns => (
-              <NamespaceItem key={ns.namespace} namespace={ns} onClick={props.onNamespaceChange} />
-            ))}
-          </ul>
+          <NamespaceSelectorDropdown
+            namespaces={props.namespaces}
+            currentNamespace={null}
+            onChange={props.onNamespaceChange}
+          />
         ) : (
           <div className={css.spinnerWrapper}>
             <Spinner size={48} intent="primary" />
@@ -36,26 +37,3 @@ export const WelcomeScreen = observer(function WelcomeScreen(props: Props) {
     </div>
   );
 });
-
-interface NamespaceItemProps {
-  namespace: NamespaceDescriptor;
-  onClick: (ns: NamespaceDescriptor) => void;
-}
-
-const NamespaceItem = observer(function NamespaceItem(props: NamespaceItemProps) {
-  const onClick = useCallback(
-    (event: React.MouseEvent<HTMLAnchorElement>) => {
-      event.preventDefault();
-      props.onClick(props.namespace);
-    },
-    [props.onClick],
-  );
-
-  return (
-    <li>
-      <a href={`/${props.namespace.namespace}`} onClick={onClick}>
-        {props.namespace.namespace}
-      </a>
-    </li>
-  );
-});

src/components/TopBar/index.tsx

@@ -62,11 +62,13 @@ export const TopBar = observer(function TopBar(props: Props) {
   return (
     <div className={css.topbar}>
       <div className={css.left}>
-        <NamespaceSelectorDropdown
-          namespaces={props.namespaces}
-          currentNamespace={props.currentNamespace}
-          onChange={props.onNamespaceChange}
-        />
+        {props.currentNamespace === null ? null : (
+          <NamespaceSelectorDropdown
+            namespaces={props.namespaces}
+            currentNamespace={props.currentNamespace}
+            onChange={props.onNamespaceChange}
+          />
+        )}
         {props.currentNamespace && RenderedFilters}
       </div>
       <div className={css.right}>