switch workspace routes and templates to Flask and Jinja

templates/base_workspace.html

@@ -1,4 +1,4 @@
-{% extends "base.html.to" %}
+{% extends "base.html" %}
 
 {% block content %}
 
@@ -8,8 +8,8 @@
     </div>
 
     <div class='col col--grow'>
-      {% block workspace_content %}{% end %}
+      {% block workspace_content %}{% endblock %}
     </div>
   </div>
 
-{% end %}
+{% endblock %}

templates/components.html

@@ -30,3 +30,15 @@
     {% endif %}
     </li>
 {%- endmacro %}
+
+{% macro EmptyState(self, message, actionLabel, actionHref, icon=None) -%}
+<div class='empty-state'>
+  <p>{{ message }}</p>
+
+  {% if icon %}
+    {{ Icon(icon) }}
+  {% endif %}
+
+  <a href='{{ actionHref }}' class='usa-button usa-button-big'>{{ actionLabel }}</a>
+</div>
+{%- endmacro %}

templates/navigation/workspace_navigation.html.to

@@ -1,42 +1,44 @@
+{% from "components.html" import SidenavItem %}
+
 <nav class='sidenav workspace-navigation'>
   <ul>
-    {% module SidenavItem(
+    {{ SidenavItem(
       "Projects",
-      href=reverse_url('workspace_projects', '123456'),
-      active=matchesPath('\/workspaces\/[A-Za-z0-9]*\/projects'),
+      href=url_for("workspaces.workspace_projects", workspace_id="123456"),
+      active=g.matchesPath('\/workspaces\/[A-Za-z0-9]*\/projects'),
       subnav=[
         {
           "label": "Add New Project",
           "href":"/",
-          "active": matchesPath('workspaces/projects/new'),
+          "active": g.matchesPath('workspaces/projects/new'),
           "icon": "plus"
         }
       ]
-    )%}
+    )}}
 
-    {% module SidenavItem(
+    {{ SidenavItem(
       "Members",
-      href=reverse_url('workspace_members', '123456'),
-      active=matchesPath('\/workspaces\/[A-Za-z0-9]*\/members'),
+      href="/workspaces/{}/members".format('123456'),
+      active=g.matchesPath('\/workspaces\/[A-Za-z0-9]*\/members'),
       subnav=[
         {
           "label": "Add New Member",
           "href": "",
-          "active": matchesPath('/workspaces/members/new'),
+          "active": g.matchesPath('/workspaces/members/new'),
           "icon": "plus"
         },
         {
           "label": "Editing Member",
           "href": "",
-          "active": matchesPath('/workspaces/123456/members/789/edit')
+          "active": g.matchesPath('/workspaces/123456/members/789/edit')
         }
       ]
-    )%}
+    )}}
 
-    {% module SidenavItem(
+    {{ SidenavItem(
       "Funding & Reports",
-      href=reverse_url('workspace_projects', '123456'),
-      active=matchesPath('\/workspaces\/[A-Za-z0-9]*\/reports')
-    )%}
+      href=url_for("workspaces.workspace_projects", workspace_id="123456"),
+      active=g.matchesPath('\/workspaces\/[A-Za-z0-9]*\/reports')
+    )}}
   </ul>
 </nav>

templates/workspace_members.html

@@ -1,15 +1,17 @@
-{% extends "base_workspace.html.to" %}
+{% from "components.html" import EmptyState %}
+
+{% extends "base_workspace.html" %}
 
 {% block workspace_content %}
 
 {% if not members %}
 
-  {% module EmptyState(
+  {{ EmptyState(
     'There are currently no members in this Workspace.',
     actionLabel='Invite a new Member',
     actionHref='/members/new',
     icon='avatar'
-  )%}
+  )}}
 
 
 {% else %}
@@ -59,17 +61,17 @@
         {% for m in members %}
         <tr>
           <td><a href="/workspaces/123456/members/789/edit" class="icon-link icon-link--large">{{ m['first_name'] }} {{ m['last_name'] }}</a></td>
-          <td class='table-cell--shrink'>{% if m['num_projects'] == '0' %} <span class="label label--info">No Project Access</span> {% end %}</td>
+          <td class='table-cell--shrink'>{% if m['num_projects'] == '0' %} <span class="label label--info">No Project Access</span> {% endif %}</td>
           <td>{{ m['status'] }}</a></td>
           <td>{{ m['workspace_role'] }}</a></td>
         </tr>
-        {% end %}
+        {% endfor %}
       </tbody>
     </table>
   </div>
 
-{% end %}
+{% endif %}
 
 
-{% end %}
+{% endblock %}
 

templates/workspace_projects.html

@@ -1,13 +1,15 @@
-{% extends "base_workspace.html.to" %}
+{% from "components.html" import Icon %}
+
+{% extends "base_workspace.html" %}
 
 {% block workspace_content %}
 
 {% for project in projects %}
   <div class='block-list project-list-item'>
     <header class='block-list__header'>
-      <h2 class='block-list__title'>{{ project['name'] }} ({{ len(project['environments'])}} environments)</h2>
+      <h2 class='block-list__title'>{{ project['name'] }} ({{ project['environments']|length }} environments)</h2>
       <a class='icon-link' href='/workspaces/123456/projects/789/edit'>
-        {% module Icon('edit') %}
+        {{ Icon('edit') }}
         <span>edit</span>
       </a>
     </header>
@@ -15,7 +17,7 @@
       {% for environment in project['environments'] %}
         <li class='block-list__item project-list-item__environment'>
           <a href='/' target='_blank' rel='noopener noreferrer' class='project-list-item__environment__link'>
-            {% module Icon('link') %}
+            {{ Icon('link') }}
             <span>{{ environment["name"]}}</span>
           </a>
 
@@ -24,10 +26,10 @@
             <span>members</span>
           </div>
         </li>
-      {% end %}
+      {% endfor %}
     </ul>
   </div>
-{% end %}
+{% endfor %}
 
-{% end %}
+{% endblock %}
 

templates/workspaces.html

@@ -1,4 +1,4 @@
-{% extends "base.html.to" %}
+{% extends "base.html" %}
 
 {% block content %}
 <div class='col'>
@@ -23,9 +23,9 @@
           <span class="label">{{ w['user_count'] }}</span><span class='h6'>Users</span>
         </td>
       </tr>
-    {% end %}
+    {% endfor %}
     </tbody>
   </table>
 </div>
-{% end %}
+{% endblock %}