home.html is rendering

- Converted Icon and SidenavItem into macros
- Setting a mock user on g.current_user

atst/app.py

@@ -42,6 +42,12 @@ def make_flask_callbacks(app):
         g.dev = os.getenv("TORNADO_ENV", "dev") == "dev"
         g.matchesPath = lambda href: re.match('^'+href, request.url)
         g.modalOpen = request.args.get("modal", False)
+        g.current_user = {
+            "id": "cce17030-4109-4719-b958-ed109dbb87c8",
+            "first_name": "Amanda",
+            "last_name": "Adamson",
+            "atat_role": "default"
+        }
 
         # TODO: Make me a macro
         def modal(self, body):

templates/components.html

@@ -0,0 +1,32 @@
+{% macro Icon(name, classes="") -%}
+    {% autoescape false %}
+        <span class="icon icon--{{name}} {{classes}}" aria-hidden="true">{{ svg }}</span>
+    {% endautoescape %}
+{%- endmacro %}
+
+{% macro SidenavItem(label, href, active=False, icon=None, subnav=None) -%}
+    <li>
+    <a class="sidenav__link {% if active %}sidenav__link--active{% endif %}" href="{{href}}" title="{{label}}">
+        {% if icon %}
+        {{ Icon(icon, classes="sidenav__link-icon") }}
+        {% endif %}
+
+        <span class="sidenav__link-label">{{label}}</span>
+    </a>
+
+    {% if subnav and active %}
+        <ul>
+        {% for item in subnav %}
+        <li>
+            <a class="sidenav__link {% if item["active"] %}sidenav__link--active{% endif %}" href="{{item["href"]}}" title="{{item["label"]}}">
+            {% if "icon" in item %}
+                {{ Icon(item["icon"], classes="sidenav__link-icon") }}
+            {% endif %}
+            <span class="sidenav__link-label">{{item["label"]}}</span>
+            </a>
+        </li>
+        {% endfor %}
+        </ul>
+    {% endif %}
+    </li>
+{%- endmacro %}

templates/navigation/global_navigation.html.to

@@ -1,24 +1,25 @@
+{% from "components.html" import SidenavItem %}
 <div class="global-navigation sidenav global-navigation__context--{{context}}">
   <ul>
-    {% if dev() %}
-      {% module SidenavItem("Styleguide",
+    {% if g.dev %}
+      {{ SidenavItem("Styleguide",
         href="/styleguide",
         icon="visible",
-        active=matchesPath('/styleguide'),
+        active=g.matchesPath('/styleguide'),
         subnav=[
-          {"label":"Subnav 1", "href":"/styleguide?subnav1", "icon": "plus", "active": matchesPath('/styleguide?subnav1')},
-          {"label":"Subnav 2", "href":"/styleguide?subnav2", "active": matchesPath('/styleguide?subnav2')},
-        ]) %}
-    {% end %}
+          {"label":"Subnav 1", "href":"/styleguide?subnav1", "icon": "plus", "active": g.matchesPath('/styleguide?subnav1')},
+          {"label":"Subnav 2", "href":"/styleguide?subnav2", "active": g.matchesPath('/styleguide?subnav2')},
+        ]) }}
+    {% endif %}
 
-    {% module SidenavItem("Requests",
+    {{ SidenavItem("Requests",
       href="/requests",
       icon="document",
-      active=matchesPath('/requests'),
+      active=g.matchesPath('/requests'),
       subnav=[
-        {"label":"New Request", "href":"/requests/new", "icon": "plus", "active": matchesPath('/requests/new')},
+        {"label":"New Request", "href":"/requests/new", "icon": "plus", "active": g.matchesPath('/requests/new')},
       ]
-      ) %}
-    {% module SidenavItem("Workspaces", href="/workspaces", icon="cloud", active=matchesPath('/workspaces')) %}
+      ) }}
+    {{ SidenavItem("Workspaces", href="/workspaces", icon="cloud", active=g.matchesPath('/workspaces')) }}
   </ul>
 </div>

templates/navigation/topbar.html.to

@@ -1,18 +1,19 @@
+{% from "components.html" import Icon %}
 <header class="topbar">
   <nav class="topbar__navigation">
     <a href="/home" class="topbar__link topbar__link--shield" title="JEDI Home">
-      {% module Icon('shield', classes='topbar__link-icon') %}
+      {{ Icon('shield', classes='topbar__link-icon') }}
     </a>
 
     <div class="topbar__context topbar__context--{{context}}">
       <a href="/" class="topbar__link">
         <span class="topbar__link-label">{{ "Workspace 123456" if context == 'workspace' else "JEDI" }}</span>
-        {% module Icon('caret_down', classes='topbar__link-icon icon--tiny') %}
+        {{ Icon('caret_down', classes='topbar__link-icon icon--tiny') }}
       </a>
 
       <a href="/" class="topbar__link">
-        <span class="topbar__link-label">{{ current_user["first_name"] + " " + current_user["last_name"] }}</span>
-        {% module Icon('avatar', classes='topbar__link-icon') %}
+        <span class="topbar__link-label">{{ g.current_user.first_name + " " + g.current_user.last_name }}</span>
+        {{ Icon('avatar', classes='topbar__link-icon') }}
       </a>
     </div>
   </nav>