Merge lp:~alecu/ubuntuone-control-panel/more-devices-tab into lp:ubuntuone-control-panel

[Alejandro J. Cura]

Show connected computers and phones on the "devices" tab

Show connected computers and phones on the "devices" tab

[Alejandro J. Cura (alecu)]

We'll delay merging this branch till after the windows control panel has settled on a webservice client library (either twisted web client, or qt-net web client)

[Natalia Bidart (nataliabidart)]

This branch needs some refactoring that is reported in bug #798410 and bug #798413.

review: Approve

=== added file 'data/computer.png'
Binary files data/computer.png	1970-01-01 00:00:00 +0000 and data/computer.png	2011-06-02 20:04:32 +0000 differ
=== added file 'data/phone.png'
Binary files data/phone.png	1970-01-01 00:00:00 +0000 and data/phone.png	2011-06-02 20:04:32 +0000 differ
=== modified file 'data/qt/controlpanel.ui'
--- data/qt/controlpanel.ui	2011-06-02 04:03:02 +0000
+++ data/qt/controlpanel.ui	2011-06-02 20:04:32 +0000
@@ -162,9 +162,9 @@
       </widget>
      </item>
      <item>
-      <widget class="QPushButton" name="twitter_button">
+      <widget class="QToolButton" name="twitter_button">
        <property name="styleSheet">
-        <string notr="true"/>
+        <string notr="true">border: 0;</string>
        </property>
        <property name="text">
         <string/>
@@ -179,15 +179,12 @@
          <height>32</height>
         </size>
        </property>
-       <property name="flat">
-        <bool>true</bool>
-       </property>
       </widget>
      </item>
      <item>
-      <widget class="QPushButton" name="facebook_button">
+      <widget class="QToolButton" name="facebook_button">
        <property name="styleSheet">
-        <string notr="true"/>
+        <string notr="true">border: 0;</string>
        </property>
        <property name="text">
         <string/>
@@ -202,9 +199,6 @@
          <height>32</height>
         </size>
        </property>
-       <property name="flat">
-        <bool>true</bool>
-       </property>
       </widget>
      </item>
     </layout>

=== added file 'data/qt/device.ui'
--- data/qt/device.ui	1970-01-01 00:00:00 +0000
+++ data/qt/device.ui	2011-06-02 20:04:32 +0000
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ui version="4.0">
+ <class>Form</class>
+ <widget class="QWidget" name="Form">
+  <property name="geometry">
+   <rect>
+    <x>0</x>
+    <y>0</y>
+    <width>400</width>
+    <height>63</height>
+   </rect>
+  </property>
+  <property name="windowTitle">
+   <string>Form</string>
+  </property>
+  <layout class="QHBoxLayout" name="horizontalLayout">
+   <item>
+    <widget class="QLabel" name="device_icon_label">
+     <property name="pixmap">
+      <pixmap resource="images.qrc">:/computer.png</pixmap>
+     </property>
+    </widget>
+   </item>
+   <item>
+    <widget class="QLabel" name="device_name_label">
+     <property name="text">
+      <string>Another device</string>
+     </property>
+    </widget>
+   </item>
+   <item>
+    <spacer name="horizontalSpacer">
+     <property name="orientation">
+      <enum>Qt::Horizontal</enum>
+     </property>
+     <property name="sizeHint" stdset="0">
+      <size>
+       <width>217</width>
+       <height>20</height>
+      </size>
+     </property>
+    </spacer>
+   </item>
+  </layout>
+ </widget>
+ <resources>
+  <include location="images.qrc"/>
+ </resources>
+ <connections/>
+</ui>

=== modified file 'data/qt/devices.ui'
--- data/qt/devices.ui	2011-05-23 16:13:27 +0000
+++ data/qt/devices.ui	2011-06-02 20:04:32 +0000
@@ -42,105 +42,7 @@
        </rect>
       </property>
       <layout class="QGridLayout" name="gridLayout_2">
-       <item row="0" column="0">
-        <layout class="QGridLayout" name="devices_grid_layout">
-         <item row="0" column="0">
-          <widget class="QLabel" name="device_icon_label">
-           <property name="text">
-            <string>(laptop icon, big)</string>
-           </property>
-          </widget>
-         </item>
-         <item row="0" column="1">
-          <widget class="QLabel" name="device_name_label">
-           <property name="text">
-            <string>Nessita's laptop</string>
-           </property>
-          </widget>
-         </item>
-         <item row="0" column="2">
-          <widget class="QPushButton" name="delete_device_button">
-           <property name="text">
-            <string>Delete device</string>
-           </property>
-          </widget>
-         </item>
-         <item row="1" column="0" colspan="3">
-          <layout class="QHBoxLayout" name="horizontalLayout">
-           <item>
-            <widget class="QLabel" name="other_devices_label">
-             <property name="text">
-              <string>Other devices connected to my cloud</string>
-             </property>
-            </widget>
-           </item>
-           <item>
-            <spacer name="horizontalSpacer">
-             <property name="orientation">
-              <enum>Qt::Horizontal</enum>
-             </property>
-             <property name="sizeHint" stdset="0">
-              <size>
-               <width>40</width>
-               <height>20</height>
-              </size>
-             </property>
-            </spacer>
-           </item>
-           <item>
-            <widget class="QPushButton" name="manage_devices_button">
-             <property name="text">
-              <string>Go to the web page to manage your other devices</string>
-             </property>
-            </widget>
-           </item>
-          </layout>
-         </item>
-         <item row="2" column="0">
-          <widget class="QLabel" name="sample_icon_1">
-           <property name="text">
-            <string>(laptop icon, smaller)</string>
-           </property>
-          </widget>
-         </item>
-         <item row="2" column="1">
-          <widget class="QLabel" name="sample_name_1">
-           <property name="text">
-            <string>Nessita's other laptop</string>
-           </property>
-          </widget>
-         </item>
-         <item row="3" column="0">
-          <widget class="QLabel" name="sample_icon_2">
-           <property name="text">
-            <string>(smartphone icon)</string>
-           </property>
-          </widget>
-         </item>
-         <item row="3" column="1">
-          <widget class="QLabel" name="sample_name_2">
-           <property name="text">
-            <string>Samsung Nexus S</string>
-           </property>
-          </widget>
-         </item>
-         <item row="4" column="0">
-          <widget class="QLabel" name="sample_icon_3">
-           <property name="text">
-            <string>(smartphone icon)</string>
-           </property>
-          </widget>
-         </item>
-         <item row="4" column="1">
-          <widget class="QLabel" name="sample_name_3">
-           <property name="text">
-            <string>iPhone 3GS</string>
-           </property>
-          </widget>
-         </item>
-        </layout>
-       </item>
-       <item row="1" column="0">
+       <item row="8" column="0">
         <spacer name="verticalSpacer">
          <property name="orientation">
           <enum>Qt::Vertical</enum>
@@ -153,12 +55,86 @@
          </property>
         </spacer>
        </item>
+       <item row="6" column="0">
+        <layout class="QHBoxLayout" name="horizontalLayout">
+         <item>
+          <widget class="QLabel" name="other_devices_label">
+           <property name="text">
+            <string>Other devices connected to my cloud</string>
+           </property>
+          </widget>
+         </item>
+         <item>
+          <spacer name="horizontalSpacer">
+           <property name="orientation">
+            <enum>Qt::Horizontal</enum>
+           </property>
+           <property name="sizeHint" stdset="0">
+            <size>
+             <width>40</width>
+             <height>20</height>
+            </size>
+           </property>
+          </spacer>
+         </item>
+         <item>
+          <widget class="QPushButton" name="manage_devices_button">
+           <property name="text">
+            <string>Go to the web page to manage your other devices</string>
+           </property>
+          </widget>
+         </item>
+        </layout>
+       </item>
+       <item row="1" column="0">
+        <layout class="QHBoxLayout" name="horizontalLayout_2">
+         <item>
+          <widget class="QLabel" name="device_icon_label">
+           <property name="pixmap">
+            <pixmap resource="images.qrc">:/computer.png</pixmap>
+           </property>
+          </widget>
+         </item>
+         <item>
+          <widget class="QLabel" name="device_name_label">
+           <property name="text">
+            <string>This device</string>
+           </property>
+          </widget>
+         </item>
+         <item>
+          <spacer name="horizontalSpacer_2">
+           <property name="orientation">
+            <enum>Qt::Horizontal</enum>
+           </property>
+           <property name="sizeHint" stdset="0">
+            <size>
+             <width>40</width>
+             <height>20</height>
+            </size>
+           </property>
+          </spacer>
+         </item>
+         <item>
+          <widget class="QPushButton" name="delete_device_button">
+           <property name="text">
+            <string>Delete device</string>
+           </property>
+          </widget>
+         </item>
+        </layout>
+       </item>
+       <item row="7" column="0">
+        <layout class="QVBoxLayout" name="devices_list_verticallayout"/>
+       </item>
       </layout>
      </widget>
     </widget>
    </item>
   </layout>
  </widget>
- <resources/>
+ <resources>
+  <include location="images.qrc"/>
+ </resources>
  <connections/>
 </ui>

=== modified file 'data/qt/images.qrc'
--- data/qt/images.qrc	2011-05-26 22:18:04 +0000
+++ data/qt/images.qrc	2011-06-02 20:04:32 +0000
@@ -1,5 +1,7 @@
 <RCC>
   <qresource prefix="/">
+    <file>../computer.png</file>
+    <file>../phone.png</file>
     <file>../twitter.png</file>
     <file>../facebook.png</file>
   </qresource>

=== modified file 'ubuntuone/controlpanel/gui/qt/controlpanel.py'
--- ubuntuone/controlpanel/gui/qt/controlpanel.py	2011-06-02 13:14:51 +0000
+++ ubuntuone/controlpanel/gui/qt/controlpanel.py	2011-06-02 20:04:32 +0000
@@ -25,6 +25,26 @@
 from ubuntuone.controlpanel.logger import setup_logging, log_call
 from ubuntuone.controlpanel.gui.qt.ui import controlpanel_ui
 
+SAMPLE_DEVICES_INFO = [
+    {
+        "type": "Computer",
+        "name": "toshiba laptop",
+        "is_local": True,
+        "configurable": False,
+    },
+    {
+        "type": "Computer",
+        "name": "desktop i5",
+        "is_local": False,
+        "configurable": False,
+    },
+    {
+        "type": "Phone",
+        "name": "nokia 1100",
+        "is_local": False,
+        "configurable": False,
+    },
+]
 
 logger = setup_logging('qt.controlpanel')
 
@@ -42,12 +62,26 @@
 
         logger.debug('%s: started.', self.__class__.__name__)
         self.get_account_info()
+        self.get_devices_info()
 
     def get_account_info(self):
         """Get and update the account info from the webservice."""
         d = self.backend.account_info()
         d.addCallback(self.got_account_info)
 
+    def get_devices_info(self):
+        """Get and update the list of devices."""
+        # TODO: get the info from the backend
+        # this should be changed when have a working dbus replacement on win32
+        #d = self.backend.devices_info()
+        #d.addCallback(self.got_devices_info)
+        self.got_devices_info(SAMPLE_DEVICES_INFO)
+
+    @log_call(logger.debug)
+    def got_devices_info(self, devices_info):
+        """Set the account info in all tabs."""
+        self.ui.devices_tab.update_devices_info(devices_info)
+
     @log_call(logger.debug)
     def got_account_info(self, account_info):
         """Set the account info in all tabs."""

=== added file 'ubuntuone/controlpanel/gui/qt/device.py'
--- ubuntuone/controlpanel/gui/qt/device.py	1970-01-01 00:00:00 +0000
+++ ubuntuone/controlpanel/gui/qt/device.py	2011-06-02 20:04:32 +0000
@@ -0,0 +1,58 @@
+# -*- coding: utf-8 -*-
+
+# Author: Alejandro J. Cura <[e-mail]>
+#
+# Copyright 2011 Canonical Ltd.
+#
+# This program is free software: you can redistribute it and/or modify it
+# under the terms of the GNU General Public License version 3, as published
+# by the Free Software Foundation.
+#
+# This program is distributed in the hope that it will be useful, but
+# WITHOUT ANY WARRANTY; without even the implied warranties of
+# MERCHANTABILITY, SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR
+# PURPOSE.  See the GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License along
+# with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+"""The user interface for the control panel for Ubuntu One."""
+
+from PyQt4 import QtGui
+
+from ubuntuone.controlpanel.gui.qt.ui import device_ui
+
+COMPUTER_ICON = "computer"
+PHONE_ICON = "phone"
+DEFAULT_ICON = COMPUTER_ICON
+
+COMPUTER_TYPE = "Computer"
+PHONE_TYPE = "Phone"
+
+DEVICE_TYPE_TO_ICON_MAP = {
+    COMPUTER_TYPE: COMPUTER_ICON,
+    PHONE_TYPE: PHONE_ICON,
+}
+
+
+def icon_name_from_type(device_type):
+    """Get the icon name for the device."""
+    icon_name = DEVICE_TYPE_TO_ICON_MAP.get(device_type, DEFAULT_ICON)
+    return ":/%s.png" % icon_name
+
+
+class DeviceWidget(QtGui.QWidget):
+    """The widget for each device in the control panel."""
+
+    def __init__(self, *args):
+        """Initialize the UI of the widget."""
+        QtGui.QWidget.__init__(self, *args)
+        self.ui = device_ui.Ui_Form()
+        self.ui.setupUi(self)
+
+    def update_device_info(self, device_info):
+        """Update the device info."""
+        self.ui.device_name_label.setText(device_info["name"])
+        pixmap_name = icon_name_from_type(device_info["type"])
+        pixmap = QtGui.QPixmap(pixmap_name)
+        self.ui.device_icon_label.setPixmap(pixmap)

=== modified file 'ubuntuone/controlpanel/gui/qt/devices.py'
--- ubuntuone/controlpanel/gui/qt/devices.py	2011-05-24 14:20:18 +0000
+++ ubuntuone/controlpanel/gui/qt/devices.py	2011-06-02 20:04:32 +0000
@@ -21,6 +21,7 @@
 from PyQt4 import QtGui
 
 from ubuntuone.controlpanel.gui.qt.ui import devices_ui
+from ubuntuone.controlpanel.gui.qt.device import DeviceWidget
 
 
 class DevicesPanel(QtGui.QWidget):
@@ -31,3 +32,25 @@
         QtGui.QWidget.__init__(self, *args)
         self.ui = devices_ui.Ui_Form()
         self.ui.setupUi(self)
+
+    def update_local_device(self, device_info):
+        """Update the info for the local device."""
+        self.ui.device_name_label.setText(device_info["name"])
+
+    def create_remote_device(self, device_info):
+        """Add a remote device to the list."""
+        device_widget = DeviceWidget()
+        device_widget.update_device_info(device_info)
+        self.ui.devices_list_verticallayout.addWidget(device_widget)
+
+    def update_device_info(self, device_info):
+        """Update one device."""
+        if device_info["is_local"]:
+            self.update_local_device(device_info)
+        else:
+            self.create_remote_device(device_info)
+
+    def update_devices_info(self, devices_info):
+        """Update the list of devices in this panel."""
+        for device_info in devices_info:
+            self.update_device_info(device_info)

=== modified file 'ubuntuone/controlpanel/gui/qt/tests/__init__.py'
--- ubuntuone/controlpanel/gui/qt/tests/__init__.py	2011-06-02 04:03:02 +0000
+++ ubuntuone/controlpanel/gui/qt/tests/__init__.py	2011-06-02 20:04:32 +0000
@@ -34,6 +34,31 @@
     "email": SAMPLE_EMAIL,
     "type": SAMPLE_PLAN,
 }
+
+SAMPLE_COMPUTER_INFO = {
+    "type": "Computer",
+    "name": "desktop i5",
+    "is_local": False,
+    "configurable": False,
+}
+
+SAMPLE_PHONE_INFO = {
+    "type": "Phone",
+    "name": "nokia 1100",
+    "is_local": False,
+    "configurable": False,
+}
+
+SAMPLE_DEVICES_INFO = [
+    {
+        "type": "Computer",
+        "name": "toshiba laptop",
+        "is_local": True,
+        "configurable": False,
+    },
+    SAMPLE_COMPUTER_INFO,
+    SAMPLE_PHONE_INFO,
+]
 NO_OP = lambda *args: None
 
 

=== modified file 'ubuntuone/controlpanel/gui/qt/tests/test_controlpanel.py'
--- ubuntuone/controlpanel/gui/qt/tests/test_controlpanel.py	2011-06-02 13:14:51 +0000
+++ ubuntuone/controlpanel/gui/qt/tests/test_controlpanel.py	2011-06-02 20:04:32 +0000
@@ -20,7 +20,7 @@
 
 from ubuntuone.controlpanel.gui.qt import controlpanel as gui
 from ubuntuone.controlpanel.gui.qt.tests import (BaseTestCase, NO_OP,
-                                                 SAMPLE_ACCOUNT_INFO)
+        SAMPLE_ACCOUNT_INFO, SAMPLE_DEVICES_INFO)
 
 
 class ControlPanelTestCase(BaseTestCase):
@@ -33,6 +33,7 @@
     def setUp(self):
         """Initialize this test instance."""
         self.patch(gui.ControlPanel, "get_account_info", NO_OP)
+        self.patch(gui.ControlPanel, "get_devices_info", NO_OP)
         super(ControlPanelTestCase, self).setUp()
 
     def test_backend(self):
@@ -55,3 +56,11 @@
         self.ui.got_account_info(SAMPLE_ACCOUNT_INFO)
         expected = ((SAMPLE_ACCOUNT_INFO,), {})
         self.assertEqual(self._called, expected)
+
+    def test_got_devices_info_updates_devices(self):
+        """Test the got_device_info method."""
+        self.patch(self.ui.ui.devices_tab, "update_devices_info",
+                   self._set_called)
+        self.ui.got_devices_info(SAMPLE_DEVICES_INFO)
+        expected = ((SAMPLE_DEVICES_INFO,), {})
+        self.assertEqual(self._called, expected)

=== added file 'ubuntuone/controlpanel/gui/qt/tests/test_device.py'
--- ubuntuone/controlpanel/gui/qt/tests/test_device.py	1970-01-01 00:00:00 +0000
+++ ubuntuone/controlpanel/gui/qt/tests/test_device.py	2011-06-02 20:04:32 +0000
@@ -0,0 +1,81 @@
+# -*- coding: utf-8 -*-
+
+# Author: Alejandro J. Cura <[e-mail]>
+#
+# Copyright 2011 Canonical Ltd.
+#
+# This program is free software: you can redistribute it and/or modify it
+# under the terms of the GNU General Public License version 3, as published
+# by the Free Software Foundation.
+#
+# This program is distributed in the hope that it will be useful, but
+# WITHOUT ANY WARRANTY; without even the implied warranties of
+# MERCHANTABILITY, SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR
+# PURPOSE.  See the GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License along
+# with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+"""Tests for each device widget."""
+
+from PyQt4 import QtGui, QtCore
+
+from ubuntuone.controlpanel.gui.qt import device as gui
+from ubuntuone.controlpanel.gui.qt.tests import (BaseTestCase,
+    SAMPLE_COMPUTER_INFO, SAMPLE_PHONE_INFO)
+
+
+class DeviceWidgetTestCase(BaseTestCase):
+    """Test the qt control panel."""
+
+    innerclass_ui = gui.device_ui
+    innerclass_name = "Ui_Form"
+    class_ui = gui.DeviceWidget
+
+    def test_update_device_info(self):
+        """The widget is updated with the info."""
+        info = SAMPLE_COMPUTER_INFO
+        expected_name = info["name"]
+        self.ui.update_device_info(info)
+        self.assertEqual(self.ui.ui.device_name_label.text(), expected_name)
+
+    # pylint: disable=C0103
+    def assertIconMatchesType(self, device_type, base_icon_name):
+        """A given device type yields the right icon."""
+        icon_name = ":/%s.png" % base_icon_name
+        self.assertEqual(gui.icon_name_from_type(device_type), icon_name)
+
+    def test_icon_name_from_type(self):
+        """Get the right icon name for a device type."""
+        self.assertIconMatchesType(gui.COMPUTER_TYPE, gui.COMPUTER_ICON)
+        self.assertIconMatchesType(gui.PHONE_TYPE, gui.PHONE_ICON)
+        self.assertIconMatchesType("other random type", gui.COMPUTER_ICON)
+
+    def get_pixmap_data(self, pixmap):
+        """Get the raw data of a QPixmap."""
+        byte_array = QtCore.QByteArray()
+        array_buffer = QtCore.QBuffer(byte_array)
+        pixmap.save(array_buffer, "PNG")
+        return byte_array
+
+    def assertEqualPixmaps(self, pixmap1, pixmap2):
+        """Compare two Qt pixmaps."""
+        d1 = self.get_pixmap_data(pixmap1)
+        d2 = self.get_pixmap_data(pixmap2)
+        self.assertEqual(d1, d2)
+
+    def _test_update_device_info_sets_right_icon(self, info):
+        """The widget is updated with the right icon."""
+        self.ui.update_device_info(info)
+        pixmap_name = gui.icon_name_from_type(info["type"])
+        expected_pixmap = QtGui.QPixmap(pixmap_name)
+        label_pixmap = self.ui.ui.device_icon_label.pixmap()
+        self.assertEqualPixmaps(label_pixmap, expected_pixmap)
+
+    def test_update_device_info_sets_computer_icon(self):
+        """The computer icon is set."""
+        self._test_update_device_info_sets_right_icon(SAMPLE_COMPUTER_INFO)
+
+    def test_update_device_info_sets_phone_icon(self):
+        """The phone icon is set."""
+        self._test_update_device_info_sets_right_icon(SAMPLE_PHONE_INFO)

=== added file 'ubuntuone/controlpanel/gui/qt/tests/test_devices.py'
--- ubuntuone/controlpanel/gui/qt/tests/test_devices.py	1970-01-01 00:00:00 +0000
+++ ubuntuone/controlpanel/gui/qt/tests/test_devices.py	2011-06-02 20:04:32 +0000
@@ -0,0 +1,40 @@
+# -*- coding: utf-8 -*-
+
+# Author: Alejandro J. Cura <[e-mail]>
+#
+# Copyright 2011 Canonical Ltd.
+#
+# This program is free software: you can redistribute it and/or modify it
+# under the terms of the GNU General Public License version 3, as published
+# by the Free Software Foundation.
+#
+# This program is distributed in the hope that it will be useful, but
+# WITHOUT ANY WARRANTY; without even the implied warranties of
+# MERCHANTABILITY, SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR
+# PURPOSE.  See the GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License along
+# with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+"""Tests for the devices tab."""
+
+from ubuntuone.controlpanel.gui.qt import devices as gui
+from ubuntuone.controlpanel.gui.qt.tests import (BaseTestCase,
+    SAMPLE_DEVICES_INFO)
+
+
+class DevicesPanelTestCase(BaseTestCase):
+    """Test the qt control panel."""
+
+    innerclass_ui = gui.devices_ui
+    innerclass_name = "Ui_Form"
+    class_ui = gui.DevicesPanel
+
+    def test_update_devices_info(self):
+        """The widget is updated with the info."""
+        container = self.ui.ui.devices_list_verticallayout
+        self.assertEqual(container.count(), 0)
+        self.ui.update_devices_info(SAMPLE_DEVICES_INFO)
+        expected_name = SAMPLE_DEVICES_INFO[0]["name"]
+        self.assertEqual(self.ui.ui.device_name_label.text(), expected_name)
+        self.assertEqual(container.count(), len(SAMPLE_DEVICES_INFO) - 1)