Create a new page to display case-attributes and their descriptions

* wqflask/wqflask/metadata_edits.py: Import
"gn3.db.sample_data.get_case_attributes".
(show_case_attribute_columns): New function/ end-point to show
case-attributes.
* wqflask/tests/integration/wqflask/test_metadata_edits.py: New
integration tests for the above.
* wqflask/tests/integration/wqflask/__init__.py: New file.
* wqflask/wqflask/templates/case_attributes.html: New template file to
display the above.

4 files changed, 97 insertions, 0 deletions

diff --git a/wqflask/tests/integration/wqflask/__init__.py b/wqflask/tests/integration/wqflask/__init__.py
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/wqflask/tests/integration/wqflask/__init__.py
diff --git a/wqflask/tests/integration/wqflask/test_metadata_edits.py b/wqflask/tests/integration/wqflask/test_metadata_edits.py
new file mode 100644
index 00000000..4b9e017d
--- /dev/null
+++ b/wqflask/tests/integration/wqflask/test_metadata_edits.py
@@ -0,0 +1,41 @@
+"""Tests for wqflask/wqflask/metadata_edits.py"""
+import unittest
+from unittest import mock
+
+from wqflask import app
+
+
+class MetadataEditsTest(unittest.TestCase):
+    """Test Cases for MetadataEdits"""
+
+    def setUp(self):
+        self.app = app.test_client()
+        self.app_context = app.app_context()
+        self.app_context.push()
+
+    def tearDown(self):
+        self.app_context.pop()
+
+    @mock.patch("wqflask.metadata_edits.get_case_attributes")
+    def test_show_case_attributes(self, mock_case_attrs):
+        """Test that case attributes are displayed correctly"""
+        mock_case_attrs.return_value = {
+            "Condition (1)": "",
+            "Tissue": "",
+            "Age": "Cum sociis natoque penatibus et magnis dis",
+            "Condition (4)": "Description A",
+            "Condition (5)": "Description B",
+        }
+        response = self.app.get(
+            "/datasets/case-attributes", follow_redirects=True
+        ).data.decode()
+        self.assertIn(
+            "<td>Condition (1)</td><td>No description</td>", response
+        )
+        self.assertIn("<td>Tissue</td><td>No description</td>", response)
+        self.assertIn(
+            "<td>Age</td><td>Cum sociis natoque penatibus et magnis dis</td>",
+            response,
+        )
+        self.assertIn("<td>Condition (4)</td><td>Description A</td>", response)
+        self.assertIn("<td>Condition (5)</td><td>Description B</td>", response)
diff --git a/wqflask/wqflask/metadata_edits.py b/wqflask/wqflask/metadata_edits.py
index 86f9ccad..89e582d1 100644
--- a/wqflask/wqflask/metadata_edits.py
+++ b/wqflask/wqflask/metadata_edits.py
@@ -46,6 +46,7 @@ from gn3.db.sample_data import delete_sample_data
 from gn3.db.sample_data import get_trait_csv_sample_data
 from gn3.db.sample_data import insert_sample_data
 from gn3.db.sample_data import update_sample_data
+from gn3.db.sample_data import get_case_attributes
 
 
 metadata_edit = Blueprint('metadata_edit', __name__)
@@ -552,3 +553,14 @@ def approve_data(resource_id: str, file_name: str):
         flash(("Automatically rejecting this file since no "
                "changes could be applied."), "warning")
     return redirect(url_for('metadata_edit.list_diffs'))
+
+
+@metadata_edit.route("/case-attributes")
+def show_case_attribute_columns():
+    case_attributes = get_case_attributes()
+    for key, val in case_attributes.items():
+        if not val:
+            case_attributes[key] = "No description"
+    return render_template(
+        "case_attributes.html", case_attributes=case_attributes
+    )
diff --git a/wqflask/wqflask/templates/case_attributes.html b/wqflask/wqflask/templates/case_attributes.html
new file mode 100644
index 00000000..73184f7d
--- /dev/null
+++ b/wqflask/wqflask/templates/case_attributes.html
@@ -0,0 +1,44 @@
+{% extends "base.html" %}
+{% block title %}Trait Submission{% endblock %}
+
+{% block css %}
+<link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" />
+{% endblock %}
+
+{% block content %}
+<!-- Start of body -->
+<div class="container">
+    <h2>Case Attributes Reference Table</h2>
+    <div class="row">
+        <div class="col-md-8">
+            <table class="table-responsive table-hover table-striped cell-border">
+                <thead>
+                    <th scope="col">Header</th>
+                    <th scope="col">Description</th>
+                </thead>
+                <tbody>
+                    {% for key, value in case_attributes.items() %}
+                    <tr>
+                        <td>{{ key }}</td><td>{{ value }}</td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+{%endblock%}
+
+{% block js %}
+<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.js') }}"></script>
+<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.min.js') }}"></script>
+<script language="javascript" type="text/javascript">
+ gn_server_url = "{{ gn_server_url }}";
+
+ $(document).ready( function() {
+     $('#table-additions').dataTable();
+     $('#table-modifications').dataTable();
+     $('#table-deletions').dataTable();
+ });
+</script>
+{% endblock %}