From 9366bdc696bf9b262b56526066c938f0e465ec3d Mon Sep 17 00:00:00 2001
From: Sara Bee <855595+doeg@users.noreply.github.com>
Date: Mon, 18 Jan 2021 14:24:55 -0500
Subject: [PATCH 1/4] Add NavRail component

Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com>
---
 web/vtadmin/src/components/App.module.scss    | 23 ++++-
 web/vtadmin/src/components/App.tsx            | 35 ++++---
 .../src/components/NavRail.module.scss        | 93 +++++++++++++++++++
 web/vtadmin/src/components/NavRail.tsx        | 91 ++++++++++++++++++
 .../components/routes/Error404.module.scss    | 26 ++++++
 .../src/components/routes/Error404.tsx        | 24 +++++
 web/vtadmin/src/index.css                     |  6 ++
 7 files changed, 280 insertions(+), 18 deletions(-)
 create mode 100644 web/vtadmin/src/components/NavRail.module.scss
 create mode 100644 web/vtadmin/src/components/NavRail.tsx
 create mode 100644 web/vtadmin/src/components/routes/Error404.module.scss
 create mode 100644 web/vtadmin/src/components/routes/Error404.tsx

diff --git a/web/vtadmin/src/components/App.module.scss b/web/vtadmin/src/components/App.module.scss
index 1842220604e..caa12c07e06 100644
--- a/web/vtadmin/src/components/App.module.scss
+++ b/web/vtadmin/src/components/App.module.scss
@@ -13,14 +13,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 .container {
-  margin: 0 auto;
-  max-width: 1200px;
-  padding: 24px;
+  display: grid;
+  grid-template-areas: 'nav content';
+  grid-template-rows: auto;
+  grid-template-columns: 240px auto;
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+  width: 100vw;
 }
 
 .logo {
   display: block;
   margin: 0 auto 48px auto;
 }
+
+.navContainer {
+  grid-area: nav;
+  height: 100vh;
+}
+
+.mainContainer {
+  grid-area: content;
+  overflow: auto;
+  padding: 24px;
+}
diff --git a/web/vtadmin/src/components/App.tsx b/web/vtadmin/src/components/App.tsx
index fd49f9cbbc0..f3ce702b369 100644
--- a/web/vtadmin/src/components/App.tsx
+++ b/web/vtadmin/src/components/App.tsx
@@ -14,32 +14,39 @@
  * limitations under the License.
  */
 import * as React from 'react';
-import { BrowserRouter as Router, Link, Redirect, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
 
 import style from './App.module.scss';
-import logo from '../img/vitess-icon-color.svg';
 import { Tablets } from './routes/Tablets';
 import { Debug } from './routes/Debug';
+import { NavRail } from './NavRail';
+import { Error404 } from './routes/Error404';
 
 export const App = () => {
     return (
         <Router>
             <div className={style.container}>
-                <Link to="/">
-                    <img className={style.logo} src={logo} alt="logo" height={40} />
-                </Link>
+                <div className={style.navContainer}>
+                    <NavRail />
+                </div>
 
-                <Switch>
-                    <Route path="/tablets">
-                        <Tablets />
-                    </Route>
+                <div className={style.mainContainer}>
+                    <Switch>
+                        <Route path="/tablets">
+                            <Tablets />
+                        </Route>
 
-                    <Route path="/debug">
-                        <Debug />
-                    </Route>
+                        <Route path="/debug">
+                            <Debug />
+                        </Route>
 
-                    <Redirect exact from="/" to="/tablets" />
-                </Switch>
+                        <Redirect exact from="/" to="/tablets" />
+
+                        <Route>
+                            <Error404 />
+                        </Route>
+                    </Switch>
+                </div>
             </div>
         </Router>
     );
diff --git a/web/vtadmin/src/components/NavRail.module.scss b/web/vtadmin/src/components/NavRail.module.scss
new file mode 100644
index 00000000000..782b4e42d04
--- /dev/null
+++ b/web/vtadmin/src/components/NavRail.module.scss
@@ -0,0 +1,93 @@
+/**
+ * Copyright 2021 The Vitess Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+  background: var(--grey75);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100vh;
+  overflow-y: auto;
+}
+
+.logoContainer {
+  display: block;
+  padding: 24px;
+  text-align: center;
+}
+
+.footerContainer {
+  margin: auto 0 24px 0;
+}
+
+.navLinks {
+  margin: 24px 0 32px 0;
+}
+
+.navList {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  &::after {
+    content: '';
+    background-color: var(--grey400);
+    display: block;
+    height: 1px;
+    margin: 20px 24px;
+    max-width: 100%;
+  }
+}
+
+.navList:last-child::after,
+.footerContainer .navList::after {
+  content: none;
+}
+
+a.navLink {
+  border-left: solid 4px transparent;
+  color: var(--textColorPrimary);
+  display: flex;
+  flex-wrap: nowrap;
+  font-weight: 500;
+  padding: 12px 24px 12px 20px;
+  text-decoration: none;
+
+  &.navLinkActive {
+    border-color: var(--colorPrimary);
+    color: var(--colorPrimary);
+  }
+
+  &:hover {
+    background: var(--grey200);
+    color: var(--colorPrimary);
+  }
+}
+
+.badge {
+  background-color: var(--grey200);
+  border-radius: 20px;
+  color: var(--textColorSecondary);
+  display: inline-block;
+  font-size: var(--fontSizeSmall);
+  margin-left: auto;
+  padding: 2px 10px;
+}
+
+a.navLinkActive .badge,
+a.navLink:hover .badge {
+  background-color: rgba(61, 90, 254, 0.1);
+  color: var(--colorPrimary);
+}
diff --git a/web/vtadmin/src/components/NavRail.tsx b/web/vtadmin/src/components/NavRail.tsx
new file mode 100644
index 00000000000..5333bcaa451
--- /dev/null
+++ b/web/vtadmin/src/components/NavRail.tsx
@@ -0,0 +1,91 @@
+/**
+ * Copyright 2021 The Vitess Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as React from 'react';
+import { Link, NavLink } from 'react-router-dom';
+
+import style from './NavRail.module.scss';
+import logo from '../img/vitess-icon-color.svg';
+import { useTablets } from '../hooks/api';
+
+export const NavRail = () => {
+    const { data: tabletData } = useTablets();
+
+    return (
+        <div className={style.container}>
+            <Link className={style.logoContainer} to="/">
+                <img alt="Vitess logo" className={style.logo} src={logo} height={40}></img>
+            </Link>
+
+            <div className={style.navLinks}>
+                <ul className={style.navList}>
+                    <li>
+                        <NavRailLink text="Dashboard" to="/dashboard" count={0} />
+                    </li>
+                    <li>
+                        <NavRailLink text="Workflows" to="/workflows" count={0} />
+                    </li>
+                </ul>
+
+                <ul className={style.navList}>
+                    <li>
+                        <NavRailLink text="Clusters" to="/clusters" count={0} />
+                    </li>
+                    <li>
+                        <NavRailLink text="Gates" to="/gates" count={0} />
+                    </li>
+                    <li>
+                        <NavRailLink text="Keyspaces" to="/keyspaces" count={0} />
+                    </li>
+                    <li>
+                        <NavRailLink text="Schemas" to="/schemas" count={0} />
+                    </li>
+                    <li>
+                        <NavRailLink text="Tablets" to="/tablets" count={(tabletData || []).length} />
+                    </li>
+                </ul>
+
+                <ul className={style.navList}>
+                    <li>
+                        <NavRailLink text="VTExplain" to="/vtexplain" />
+                    </li>
+                    <li>
+                        <NavRailLink text="Settings" to="/settings" />
+                    </li>
+                </ul>
+            </div>
+
+            <div className={style.footerContainer}>
+                <ul className={style.navList}>
+                    <li>
+                        <NavRailLink text="Debug" to="/debug" />
+                    </li>
+                    <li>
+                        <NavRailLink text="Shortcuts" to="/shortcuts" />
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+const NavRailLink = ({ count, text, to }: { count?: number; text: string; to: string }) => {
+    return (
+        <NavLink activeClassName={style.navLinkActive} className={style.navLink} to={to}>
+            <span>{text}</span>
+            {typeof count === 'number' && <div className={style.badge}>{count}</div>}
+        </NavLink>
+    );
+};
diff --git a/web/vtadmin/src/components/routes/Error404.module.scss b/web/vtadmin/src/components/routes/Error404.module.scss
new file mode 100644
index 00000000000..4422a6ca735
--- /dev/null
+++ b/web/vtadmin/src/components/routes/Error404.module.scss
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2021 The Vitess Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  justify-content: center;
+
+  h1 {
+    margin-top: -40vh;
+  }
+}
diff --git a/web/vtadmin/src/components/routes/Error404.tsx b/web/vtadmin/src/components/routes/Error404.tsx
new file mode 100644
index 00000000000..97c806f3c47
--- /dev/null
+++ b/web/vtadmin/src/components/routes/Error404.tsx
@@ -0,0 +1,24 @@
+/**
+ * Copyright 2021 The Vitess Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import style from './Error404.module.scss';
+
+export const Error404 = () => {
+    return (
+        <div className={style.container}>
+            <h1>☹️ 404 ☹️</h1>
+        </div>
+    );
+};
diff --git a/web/vtadmin/src/index.css b/web/vtadmin/src/index.css
index e569c705fba..cfd0a2c97de 100644
--- a/web/vtadmin/src/index.css
+++ b/web/vtadmin/src/index.css
@@ -83,6 +83,9 @@
 
   /* Layout variables, set to light theme by default */
   --backgroundPrimary: var(--background_light);
+  --colorPrimary: var(--colorPrimary_light);
+  --colorPrimary50: var(--colorPrimary50_light);
+  --colorPrimary200: var(--colorPrimary200_light);
   --tableBorderColor: var(--grey400);
   --textColorPrimary: var(--textColorPrimary_light);
   --textColorSecondary: var(--textColorSecondary_light);
@@ -92,6 +95,9 @@
 /* Dark theme */
 [data-vtadmin-theme="dark"] {
   --backgroundPrimary: var(--background_dark);
+  --colorPrimary: var(--colorPrimary_dark);
+  --colorPrimary50: var(--colorPrimary50_dark);
+  --colorPrimary200: var(--colorPrimary200_dark);
   --tableBorderColor: var(--grey800);
   --textColorPrimary: var(--textColorPrimary_dark);
   --textColorSecondary: var(--textColorSecondary_dark);

From 8c641aa36cae47f79e87522d74de209e3b569f51 Mon Sep 17 00:00:00 2001
From: Sara Bee <855595+doeg@users.noreply.github.com>
Date: Mon, 18 Jan 2021 14:52:31 -0500
Subject: [PATCH 2/4] =?UTF-8?q?Dark=20mode=20=F0=9F=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com>
---
 .../src/components/NavRail.module.scss        | 20 ++++---
 web/vtadmin/src/index.css                     | 54 ++++++++-----------
 2 files changed, 35 insertions(+), 39 deletions(-)

diff --git a/web/vtadmin/src/components/NavRail.module.scss b/web/vtadmin/src/components/NavRail.module.scss
index 782b4e42d04..1a7ff8f0380 100644
--- a/web/vtadmin/src/components/NavRail.module.scss
+++ b/web/vtadmin/src/components/NavRail.module.scss
@@ -13,8 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+$navRailHoverTransition: background-color 0.1s ease-in-out;
+
 .container {
-  background: var(--grey75);
+  background: var(--backgroundSecondary);
+  border: solid 1px var(--backgroundSecondaryHighlight);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -43,7 +47,7 @@
 
   &::after {
     content: '';
-    background-color: var(--grey400);
+    background-color: var(--colorScaffolding);
     display: block;
     height: 1px;
     margin: 20px 24px;
@@ -64,6 +68,7 @@ a.navLink {
   font-weight: 500;
   padding: 12px 24px 12px 20px;
   text-decoration: none;
+  transition: $navRailHoverTransition;
 
   &.navLinkActive {
     border-color: var(--colorPrimary);
@@ -71,23 +76,24 @@ a.navLink {
   }
 
   &:hover {
-    background: var(--grey200);
+    background: var(--backgroundSecondaryHighlight);
     color: var(--colorPrimary);
   }
 }
 
 .badge {
-  background-color: var(--grey200);
+  background-color: var(--backgroundSecondaryHighlight);
   border-radius: 20px;
   color: var(--textColorSecondary);
   display: inline-block;
-  font-size: var(--fontSizeSmall);
+  font-size: 1.2rem;
   margin-left: auto;
-  padding: 2px 10px;
+  padding: 2px 8px;
+  transition: $navRailHoverTransition;
 }
 
 a.navLinkActive .badge,
 a.navLink:hover .badge {
-  background-color: rgba(61, 90, 254, 0.1);
+  background-color: var(--backgroundPrimaryHighlight);
   color: var(--colorPrimary);
 }
diff --git a/web/vtadmin/src/index.css b/web/vtadmin/src/index.css
index cfd0a2c97de..c8314423509 100644
--- a/web/vtadmin/src/index.css
+++ b/web/vtadmin/src/index.css
@@ -35,24 +35,6 @@
   --colorError50: #ff6659;
   --colorError200: #9a0007;
 
-  /* Light theme colour palette */
-  --background_light: #fff;
-  --colorPrimary_light: #3d5afe;
-  --colorPrimary50_light: #8187ff;
-  --colorPrimary200_light: #0031ca;
-  --textColorPrimary_light: #17171b;
-  --textColorSecondary_light: #718096;
-  --textColorDisabled_light: #cbd5e0;
-
-  /* Dark theme colour palette */
-  --background_dark: #17171b;
-  --colorPrimary_dark: #8187ff;
-  --colorPrimary50_dark: #b6b7ff;
-  --colorPrimary200_dark: #4a5acb;
-  --textColorPrimary_dark: #fff;
-  --textColorSecondary_dark: #cbd5e0;
-  --textColorDisabled_dark: #2d3748;
-
   /* Fonts */
   --fontFamilyPrimary:
     'NotoSans',
@@ -82,26 +64,34 @@
   --lineHeightHeading: 1.36;
 
   /* Layout variables, set to light theme by default */
-  --backgroundPrimary: var(--background_light);
-  --colorPrimary: var(--colorPrimary_light);
-  --colorPrimary50: var(--colorPrimary50_light);
-  --colorPrimary200: var(--colorPrimary200_light);
+  --backgroundPrimary: #fff;
+  --backgroundPrimaryHighlight: rgba(61, 90, 254, 0.1);
+  --backgroundSecondary: var(--grey75);
+  --backgroundSecondaryHighlight: var(--grey200);
+  --colorPrimary: #3d5afe;
+  --colorPrimary50: #8187ff;
+  --colorPrimary200: #0031ca;
+  --colorScaffolding: var(--grey400);
   --tableBorderColor: var(--grey400);
-  --textColorPrimary: var(--textColorPrimary_light);
-  --textColorSecondary: var(--textColorSecondary_light);
-  --textColorDisabled: var(--textColorDisabled_light);
+  --textColorPrimary: #17171b;
+  --textColorSecondary: #718096;
+  --textColorDisabled: #cbd5e0;
 }
 
 /* Dark theme */
 [data-vtadmin-theme="dark"] {
-  --backgroundPrimary: var(--background_dark);
-  --colorPrimary: var(--colorPrimary_dark);
-  --colorPrimary50: var(--colorPrimary50_dark);
-  --colorPrimary200: var(--colorPrimary200_dark);
+  --backgroundPrimary: #17171b;
+  --backgroundPrimaryHighlight: rgba(129, 135, 255, 0.2);
+  --backgroundSecondary: var(--grey900);
+  --backgroundSecondaryHighlight: var(--grey800);
+  --colorPrimary: #8187ff;
+  --colorPrimary50: #b6b7ff;
+  --colorPrimary200: #4a5acb;
+  --colorScaffolding: var(--grey600);
   --tableBorderColor: var(--grey800);
-  --textColorPrimary: var(--textColorPrimary_dark);
-  --textColorSecondary: var(--textColorSecondary_dark);
-  --textColorDisabled: var(--textColorDisabled_dark);
+  --textColorPrimary: #fff;
+  --textColorSecondary: #cbd5e0;
+  --textColorDisabled: #2d3748;
 }
 
 html {

From 4c13f433dba4c7681c8512165b2cb4249f618be6 Mon Sep 17 00:00:00 2001
From: Sara Bee <855595+doeg@users.noreply.github.com>
Date: Mon, 18 Jan 2021 15:02:05 -0500
Subject: [PATCH 3/4] Nits :goat:

Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com>
---
 web/vtadmin/src/components/App.module.scss     | 5 -----
 web/vtadmin/src/components/NavRail.module.scss | 2 +-
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/web/vtadmin/src/components/App.module.scss b/web/vtadmin/src/components/App.module.scss
index caa12c07e06..6ec6b99321a 100644
--- a/web/vtadmin/src/components/App.module.scss
+++ b/web/vtadmin/src/components/App.module.scss
@@ -24,11 +24,6 @@
   width: 100vw;
 }
 
-.logo {
-  display: block;
-  margin: 0 auto 48px auto;
-}
-
 .navContainer {
   grid-area: nav;
   height: 100vh;
diff --git a/web/vtadmin/src/components/NavRail.module.scss b/web/vtadmin/src/components/NavRail.module.scss
index 1a7ff8f0380..30fa3a06a72 100644
--- a/web/vtadmin/src/components/NavRail.module.scss
+++ b/web/vtadmin/src/components/NavRail.module.scss
@@ -18,7 +18,7 @@ $navRailHoverTransition: background-color 0.1s ease-in-out;
 
 .container {
   background: var(--backgroundSecondary);
-  border: solid 1px var(--backgroundSecondaryHighlight);
+  border-right: solid 1px var(--backgroundSecondaryHighlight);
   display: flex;
   flex-direction: column;
   justify-content: space-between;

From 746f45ac02fc9f6bdbb989a644faee32e54c2b08 Mon Sep 17 00:00:00 2001
From: Sara Bee <855595+doeg@users.noreply.github.com>
Date: Mon, 18 Jan 2021 15:31:34 -0500
Subject: [PATCH 4/4] Simplify layout on Error404 component

Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com>
---
 web/vtadmin/src/components/routes/Error404.module.scss | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/web/vtadmin/src/components/routes/Error404.module.scss b/web/vtadmin/src/components/routes/Error404.module.scss
index 4422a6ca735..afc8ad5b754 100644
--- a/web/vtadmin/src/components/routes/Error404.module.scss
+++ b/web/vtadmin/src/components/routes/Error404.module.scss
@@ -17,10 +17,7 @@
   align-items: center;
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 40vh;
   justify-content: center;
-
-  h1 {
-    margin-top: -40vh;
-  }
+  margin-top: 20vh;
 }