Added a DiscussionsSection.vue in AnalysisView components, updated th…

…e analysis model to return an injected discussion object, and updating the styling of the buttons to match figma more closely

frontend/src/components/AnalysisView/DiscussionSection.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="rosalution-section-container">
+        <input type="checkbox" v-bind:id="section_toggle" />
+        <div class="rosalution-section-header">
+            <h2 class="rosalution-section-header-text">Discussion</h2>
+            <span class="rosalution-section-center" data-test="header-datasets"/>
+            <button class="primary-button new-discussion-button">New Discussion</button>
+            <label class="collapsable-icon" v-bind:for="section_toggle">
+                <font-awesome-icon icon="chevron-down" size="lg"/>
+            </label>
+        </div>
+        <div class="rosalution-section-seperator"></div>
+        <div class="section-content">
+            Content
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "",
+    props: {
+        header: {
+            type: String,
+        },
+    },
+    data() {
+        return
+    }
+}
+
+</script>
+
+<style scoped>
+
+.new-discussion-button {
+    margin-bottom: 10px;
+    margin-right: 10px
+}
+
+.collapsable-icon {
+    color: var(--rosalution-grey-200);
+    cursor: pointer;
+}
+
+input[type="checkbox"] {
+    display: none;
+}
+
+</style>

frontend/src/models/analyses.js

@@ -22,6 +22,21 @@ export default {
     const baseUrl = '/rosalution/api/';
     const urlQuery = 'analysis/' + analysisName;
     const body = await Requests.get(baseUrl + urlQuery);
+
+    body["discussions"] = [{
+      "postId": "",
+      "client_id": "",
+      "datetimestamp": "",
+      "content": "",
+      "attachments": [],
+      "replies": [{
+        "client_id": "",
+        "datetimestamp": "",
+        "content": "",
+        "attachments": []
+      }]
+    }]
+
     return body;
   },
 

frontend/src/styles/rosalution.css

@@ -27,8 +27,10 @@ html {
   color: var(--rosalution-purple-300);
   font-weight: 700;
   font-size: 1.125rem;
-  height: 1.75rem;
-  width: 7rem;
+  padding-top: 0.6875rem;
+  padding-bottom: 0.6875rem;
+  padding-left: 1.75rem;
+  padding-right: 1.75rem;
   border: none;
   border-radius: var(--button-border-radius);
   cursor: pointer;
@@ -49,8 +51,10 @@ html {
   font-family: "Proxima Nova", sans-serif;
   font-weight: 700;
   font-size: 1.125rem;
-  height: 1.75rem;
-  width: 7rem;
+  padding-top: 0.6875rem;
+  padding-bottom: 0.6875rem;
+  padding-left: 1.75rem;
+  padding-right: 1.75rem;
   border-color: var(--rosalution-black);
   border-radius: var(--button-border-radius);
   border-style: solid;
@@ -107,7 +111,7 @@ html {
 
 .rosalution-section-header {
   display: flex;
-  align-items: flex-end;
+  align-items: center;
 }
 
 .rosalution-header-right-icons {

frontend/src/views/AnalysisView.vue

@@ -37,6 +37,9 @@
         @update-image="this.updateSectionImage"
         @update:content-row="this.onAnalysisContentUpdated"
       />
+      <DiscussionSection
+        id="Discussion_Section"
+      />
       <SupplementalFormList
         id="Supporting_Evidence"
         :attachments="this.attachments"
@@ -68,6 +71,7 @@ import NotificationDialog from '@/components/Dialogs/NotificationDialog.vue';
 import Toast from '@/components/Dialogs/Toast.vue';
 import SupplementalFormList from '@/components/AnalysisView/SupplementalFormList.vue';
 import SaveModal from '@/components/AnalysisView/SaveModal.vue';
+import DiscussionSection from '../components/AnalysisView/DiscussionSection.vue';
 
 import inputDialog from '@/inputDialog.js';
 import notificationDialog from '@/notificationDialog.js';
@@ -87,6 +91,7 @@ export default {
     Toast,
     SupplementalFormList,
     SaveModal,
+    DiscussionSection
   },
   props: ['analysis_name'],
   data: function() {