Namespaces selector redesign (G-Research#531)

jgiannuzzi · Nov 3, 2023 · 5065943 · 5065943
1 parent 322a96c
commit 5065943
Showing 1 changed file with 29 additions and 8 deletions.
diff --git a/pkg/ui/chooser/embed/index.html b/pkg/ui/chooser/embed/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>FastTrackML</title>
     <link rel="stylesheet" href="/static/chooser/css/simple.min.css">
+    <link rel="stylesheet" href="/static/aim/assets/icomoon/icomoonIcons.css">
     <link rel="icon" type="image/x-icon" href="/static/chooser/favicon.ico">
     <style>
         :root {
@@ -29,10 +30,23 @@
         }
 
         #namespaces-list { 
-             overflow:auto;
-             height:20%;
-             list-style-type: none;
+            overflow:auto;
+            height:30%;
+            list-style-type: none;
+            border: 1px solid var(--border);
+            border-radius: 5px;
+            padding: 1rem;
          }
+
+        #current-namespace {
+            text-align: center;
+            margin-right: 25px;
+        }   
+
+        #current-icon {
+            margin-right: 5px;
+        }
+
     </style>
 </head>
 
@@ -47,7 +61,6 @@
 
     <!-- We load the UI with JS to avoid issues when an URL with embedded credentials is used -->
     <main>
-        <p >Selected Namespace: {{.CurrentNamespace.Description}}</p>
         <p>Which UI do you want to use?</p>
         <div class="ui">
             <article>
@@ -63,12 +76,20 @@
                 <p>This is the modern Aim UI, much faster than MLFlow.</p>
             </article>
         </div>
-
+        <p>Selected namespace: <b><u>{{.CurrentNamespace.Description}}</u></b></p>
+
         <ul id="namespaces-list">
             {{ range .Namespaces }}
-            <li>
-                <a href="#" onclick="window.location = window.location.origin + {{if eq .Code "default"}}'/'{{else}}'/ns/{{.Code}}/'{{end}}">{{.Description}}</a>    
-            </li>
+                {{ if ne .Code $.CurrentNamespace.Code }}
+                    <li>
+                        <a href="#" onclick="window.location = window.location.origin + {{if eq .Code "default"}}'/'{{else}}'/ns/{{.Code}}/'{{end}}">{{.Description}}</a> 
+                    </li>
+                {{ else }}
+                    <li class="selected-namespace">
+                        <i id="current-icon" class="Icon__container icon-long-arrow-right"></i>
+                        <b id="current-namespace">{{$.CurrentNamespace.Description}}</b>
+                    </li>
+                {{ end }}
             {{ end }}
         </ul>