add form for editing workspace name

atst/forms/workspace.py

@@ -5,4 +5,4 @@ from .forms import ValidatedForm
 
 
 class WorkspaceForm(ValidatedForm):
-    name = StringField("Workspace Name", validators=[Length(min=4, max=50)])
+    name = StringField("Workspace Name", validators=[Length(min=4, max=50, message="Workspace names must be at least 4 and not more than 50 characters")])

atst/routes/workspaces.py

@@ -51,6 +51,19 @@ def workspaces():
     return render_template("workspaces/index.html", page=5, workspaces=workspaces)
 
 
+@bp.route("/workspaces/<workspace_id>/edit")
+def workspace(workspace_id):
+    workspace = Workspaces.get_for_update_information(g.current_user, workspace_id)
+    form = WorkspaceForm(data={"name": workspace.name})
+    return render_template("workspaces/edit.html", form=form, workspace=workspace)
+
+
+@bp.route("/workspaces/<workspace_id>/projects")
+def workspace_projects(workspace_id):
+    workspace = Workspaces.get(g.current_user, workspace_id)
+    return render_template("workspaces/projects/index.html", workspace=workspace)
+
+
 @bp.route("/workspaces/<workspace_id>/edit", methods=["POST"])
 def edit_workspace(workspace_id):
     workspace = Workspaces.get_for_update_information(g.current_user, workspace_id)
@@ -61,14 +74,7 @@ def edit_workspace(workspace_id):
             url_for("workspaces.workspace_projects", workspace_id=workspace.id)
         )
     else:
-        # return render_template("workspaces/edit.html", form=form, workspace=workspace)
+        return render_template("workspaces/edit.html", form=form, workspace=workspace)
-        pass
-
-
-@bp.route("/workspaces/<workspace_id>/projects")
-def workspace_projects(workspace_id):
-    workspace = Workspaces.get(g.current_user, workspace_id)
-    return render_template("workspaces/projects/index.html", workspace=workspace)
 
 
 @bp.route("/workspaces/<workspace_id>")

js/lib/input_validations.js

@@ -78,5 +78,11 @@ export default {
     match: /[0-9]{2}\w?$/,
     unmask: [],
     validationError: 'Please enter a valid BA Code. Note that it should be two digits, followed by a letter.'
-  }
+  },
+  workspaceName: {
+    mask: false,
+    match: /^.{4,50}$/,
+    unmask: [],
+    validationError: 'Workspace names must be at least 4 and not more than 50 characters'
+  },
 }

styles/elements/_inputs.scss

@@ -194,6 +194,7 @@
   &--validation {
 
     &--anything,
+    &--workspaceName,
     &--email {
       input {
         max-width: 30em;

templates/navigation/workspace_navigation.html

@@ -2,6 +2,13 @@
 
 <nav class='sidenav workspace-navigation'>
   <ul>
+    {{ SidenavItem(
+      "Edit Workspace",
+      href=url_for("workspaces.workspace", workspace_id=workspace.id),
+      active=request.url_rule.rule.startswith('/workspaces/<workspace_id>/edit'),
+      subnav=None
+    ) }}
+
     {{ SidenavItem(
       "Projects",
       href=url_for("workspaces.workspace_projects", workspace_id=workspace.id),

templates/workspaces/edit.html

@@ -0,0 +1,43 @@
+{% extends "workspaces/base.html" %}
+
+{% from "components/icon.html" import Icon %}
+{% from "components/alert.html" import Alert %}
+{% from "components/text_input.html" import TextInput %}
+
+
+{% block workspace_content %}
+
+{% if form.errors %}
+  {{ Alert('There were some errors',
+    message="<p>Please see below.</p>",
+    level='error'
+  ) }}
+{% endif %}
+
+<form method="POST" action="{{ url_for('workspaces.edit_workspace', workspace_id=workspace.id) }}" autocomplete="false">
+  {{ form.csrf_token }}
+
+  <div class="panel">
+
+    <div class="panel__heading">
+      <h1>Edit Workspace</h1>
+    </div>
+
+    <div class="panel__content">
+      {{ TextInput(form.name, validation="workspaceName") }}
+    </div>
+  </div>
+
+
+  <div class='action-group'>
+    <button type="submit" class="usa-button usa-button-big usa-button-primary" tabindex="0">Submit</button>
+    <a href='{{ url_for("workspaces.workspace_projects", workspace_id=workspace.id) }}' class='action-group__action icon-link'>
+      {{ Icon('x') }}
+      <span>Cancel</span>
+    </a>
+  </div>
+
+
+</form>
+
+{% endblock %}