Application label refactor

frontend/tests/tests/user/test_application_label.js

@@ -42,26 +42,26 @@ QUnit.test("application name", function(assert) {
   });
 });
 
-QUnit.test("rendering stop button", function (assert) {
+QUnit.test("rendering quit button", function (assert) {
   let done = assert.async();
 
   assert.equal(
     appLabel.$el.querySelector('li > a > span').innerHTML,
     model.appList[0].appData.image.ui_name
   );
 
-  // Test stop button disabled
+  // Test quit button disabled
   assert.ok(
-    appLabel.$el.querySelector('#stop-button').classList.contains('disabled-entry')
+    appLabel.$el.querySelector('#quit-button').classList.contains('disabled-entry')
   );
 
   // Select running application
   model.selectedIndex = 1;
 
-  // Test stop button enabled
+  // Test quit button enabled
   Vue.nextTick(function() {
     assert.notOk(
-      appLabel.$el.querySelector('#stop-button').classList.contains('disabled-entry')
+      appLabel.$el.querySelector('#quit-button').classList.contains('disabled-entry')
     );
 
     done();
@@ -113,9 +113,9 @@ QUnit.test("rendering share button", function (assert) {
   // Select running application
   model.selectedIndex = 1;
 
-  // Test share button disabled (Because clipboard save is not supported in test environment)
+  // Test share button enabled
   Vue.nextTick(function() {
-    assert.ok(
+    assert.notOk(
       appLabel.$el.querySelector('#share-button').classList.contains('disabled-entry')
     );
 

frontend/user/vue-components/ApplicationLabel.vue

@@ -12,32 +12,58 @@
         <li>
           <ul class="menu">
 
-            <!-- Stop button -->
+            <!-- Share button -->
             <li>
               <a href="#"
-              id="stop-button"
+              id="share-button"
               :class="{ 'disabled-entry': !currentApp.isRunning() }"
-              @click="stopApplication()">
-                <i class="fa fa-times text-danger"></i>
-                Stop Application
+              @click="shareDialog.visible = true">
+                <i class="fa fa-clipboard text-light-blue"></i>
+                Share session
               </a>
             </li>
 
-            <!-- Share button -->
+            <!-- Quit button -->
             <li>
               <a href="#"
-              id="share-button"
-              :class="{ 'disabled-entry': !(currentApp.isRunning() && clipboardSupported) }"
-              :data-clipboard-text="sharedUrl">
-                <i class="fa fa-clipboard text-light-blue"></i>
-                Share (copy url to clipboard)
+              id="quit-button"
+              :class="{ 'disabled-entry': !currentApp.isRunning() }"
+              @click="quitDialog.visible = true">
+                <i class="fa fa-times text-danger"></i>
+                Quit
               </a>
             </li>
 
             <!-- Put other settings here -->
           </ul>
         </li>
       </ul>
+
+      <!-- Modal dialog for the share button -->
+      <modal-dialog v-if="shareDialog.visible">
+        <div class="modal-header"><h4>Share Session</h4></div>
+        <div class="modal-body">
+          <div class="input-group">
+            <input id="shared-url" type="text" class="form-control" :value="sharedUrl + '/'"></input>
+            <span class="input-group-btn">
+              <button id="cp-clipboard-button" class="btn btn-primary" data-clipboard-target="#shared-url" data-toggle="tooltip" title="Copy to clipboard">
+                <i class="fa fa-clipboard"></i>
+              </button>
+            </span>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" @click="shareDialog.visible = false">Close</button>
+        </div>
+      </modal-dialog>
+
+      <!-- Modal dialog for the quit button -->
+      <confirm-dialog
+      v-if="quitDialog.visible"
+      :okCallback="() => {quitDialog.visible = false; stopApplication();}"
+      :closeCallback="() => {quitDialog.visible = false;}">
+          <div>Are you sure you want to quit <b>{{ currentApp.appData.image | appName }}</b> ? (irreversible)</div>
+      </confirm-dialog>
     </li>
   </ul>
 </template>
@@ -52,13 +78,11 @@
 
   module.exports = Vue.extend({
     data: function() {
-      return { clipboardSupported: Clipboard.isSupported() };
+      return { shareDialog: {visible: false}, quitDialog: {visible: false} };
     },
 
     mounted: function() {
-      if(this.clipboardSupported) {
-        new Clipboard('#share-button');
-      }
+      new Clipboard('#cp-clipboard-button');
     },
 
     computed: {

selenium_tests/UserDriverTest.py

@@ -28,12 +28,13 @@ def open_application_settings(self):
         """
         self.click_first_element_located(By.ID, "application-settings")
 
-    def stop_application(self):
-        """ Click on the stop button. It assumes that the application settings
-        menu is opened and that the application is running. This will stop the
+    def quit_application(self):
+        """ Click on the quit button. It assumes that the application settings
+        menu is opened and that the application is running. This will quit the
         currently selected application.
         """
-        self.click_first_element_located(By.ID, "stop-button")
+        self.click_first_element_located(By.ID, "quit-button")
+        self.click_modal_footer_button("Ok")
 
     def start_application(self):
         """ Click on the start button. It assumes that the currently selected
@@ -62,17 +63,16 @@ def running_container(self, index=0):
         application is stopped at the end.
         """
         self.wait_until_application_list_loaded()
-
         self.select_application(index)
         self.start_application()
-
+        self.wait_until_application_running()
         try:
             yield
         finally:
             self.select_application(index)
             self.wait_until_application_running()
             self.open_application_settings()
-            self.stop_application()
+            self.quit_application()
             self.wait_until_application_stopped()
 
     def tearDown(self):

selenium_tests/test_share_application.py

@@ -0,0 +1,40 @@
+# -*- coding: utf-8 -*-
+from selenium_tests.UserDriverTest import UserDriverTest
+from selenium.webdriver.common.by import By
+from selenium.webdriver.common.keys import Keys
+
+
+class TestShareApplication(UserDriverTest):
+    def test_share_modal(self):
+        with self.running_container():
+            self.open_application_settings()
+
+            self.click_first_element_located(By.ID, "share-button")
+
+            self.click_modal_footer_button("Close")
+
+    def test_share_button(self):
+        with self.running_container():
+            self.open_application_settings()
+
+            self.click_first_element_located(By.ID, "share-button")
+
+            self.click_first_element_located(By.ID, "cp-clipboard-button")
+
+            # Now the share url should be in the clipboard
+            input_element = self.driver.find_element_by_id("shared-url")
+
+            # Clear the input element and paste what is in the clipboard in
+            # order to retrieve it (lacking better way to retrieve the clipboard
+            # value)
+            input_element.clear()
+            input_element.send_keys(Keys.CONTROL, 'v')
+            clipboard_value = input_element.get_attribute("value")
+
+            # Go to the shared url
+            self.driver.get(clipboard_value)
+            self.wait_until_presence_of_element_located(By.ID, "noVNC_screen")
+
+            # Go back to simphony-remote
+            self.driver.back()
+            self.wait_until_application_list_loaded()

selenium_tests/test_start_stop_container.py

@@ -12,7 +12,7 @@ def test_start_stop_container(self):
         self.wait_until_application_running()
 
         self.open_application_settings()
-        self.stop_application()
+        self.quit_application()
         self.wait_until_application_stopped()
 
     def test_focus(self):