Merge pull request #167 from mdenet/feature/user-feedback-button

Added button for collecting user feedback.

README.md

@@ -57,3 +57,12 @@ The default test configurations provided by the activities server
 For activities that use backend tool functions the corresponding tool server must be available to process the requests.
 
 The Epsilon backend docker services for a  fully function configuration can be found [here](https://github.com/epsilonlabs/playground-docker).
+
+
+### Environment Variables
+This section documents the environment variables supported by the platform.
+
+| Name                    | Type | Description | Example | 
+| ---                     | ---  | ---         | --- | 
+| TOKEN_SERVER_URL       | Url | The url of the token server. Used for GitHub authentication enabling saving and private git repository access.  | https://tokenserver.mde-network.org  |
+| FEEDBACK_SURVEY_URL | Url |  The url that is used for the user feedback button.  | https://forms.office.com/?id=X  |

platform/Dockerfile

@@ -12,10 +12,13 @@ COPY package*.json ./
 
 COPY platform/ ./platform/
 
+# Refer to readme.md for a complete list of supported environment varibles
 ARG TOKEN_SERVER_URL=http://127.0.0.1:10000
 
 RUN npm ci --workspace=platform\
-        && npm run build --workspace=platform -- --env tokenServerUrl=${TOKEN_SERVER_URL}\
+        && npm run build --workspace=platform --\
+            --env tokenServerUrl=${TOKEN_SERVER_URL}\
+            --env feedbackSurveyUrl=${FEEDBACK_SURVEY_URL}\
         && npm run package --workspace=platform
 
 

platform/public/css/index.css

@@ -21,4 +21,20 @@
 .button-dark {
     background-color: darkslategrey;
     color: aliceblue;
-}
+}
+
+#feedback-button {
+    position: absolute !important;
+    z-index: 10000 !important;
+    padding: 12px;
+    border-radius: 20px;
+    box-shadow: 0 4px 8px 0 gray, 0 6px 20px 0 gray;
+    background-color: lightblue;
+    bottom: 5%;
+    left: 2%;
+    transition-duration: 0.4s;
+  }
+
+  #feedback-button:hover { 
+    background-color: #3498db;
+  }

platform/public/index.html

@@ -20,6 +20,13 @@
 
     <div id="preloader"><img src="images/preloader.gif" width="100px"></div>
 
+    <div id="feedback-button" style="display:none">
+        <!--feedback href set by env variable FEEDBACK_SURVEY_URL in dockerfile-->
+        <p><a id="feedback-url" target="_blank" rel="noopener noreferrer">
+            <img src="images/rate_review.svg" alt="Feedback" width="20" height="20">
+        </a></p>
+    </div>
+
     <div id="login" style="display:none">
         <h2>Login</h2>
         <p> 

platform/src/Playground.js

@@ -53,9 +53,13 @@ export var toolsManager;
 
 var urlParameters = new URLSearchParams(window.location.search);    
 
-
+if (FEEDBACK_SURVEY_URL){
+    PlaygroundUtility.setFeedbackButtonUrl(FEEDBACK_SURVEY_URL);
+    PlaygroundUtility.showFeedbackButton();
+}
 
 document.getElementById("btnnologin").onclick= () => {
+
     PlaygroundUtility.hideLogin();
 }
 

platform/src/PlaygroundUtility.js

@@ -15,6 +15,14 @@ class PlaygroundUtility {
         document.getElementById("login").style.display = "block";
     }
 
+    static showFeedbackButton(){
+        document.getElementById("feedback-button").style.display = "block";
+    }
+
+    static setFeedbackButtonUrl(url){
+        document.getElementById("feedback-url").href = url;
+    }
+
 }
 
 export { PlaygroundUtility };

platform/webpack.config.js

@@ -22,6 +22,7 @@ module.exports = (env) => {
     plugins: [
       new DefinePlugin({
         'TOKEN_SERVER_URL': JSON.stringify(env.tokenServerUrl),
+        'FEEDBACK_SURVEY_URL': JSON.stringify(env.feedbackSurveyUrl),
       }),
     ]
   };