[change] Switch to new nav menu openwisp#472

Closes openwisp#472

openwisp_controller/config/apps.py

@@ -10,6 +10,7 @@
 from swapper import get_model_name, load_model
 
 from openwisp_utils.admin_theme import register_dashboard_chart
+from openwisp_utils.admin_theme.menu import register_menu_group
 
 from . import settings as app_settings
 from .signals import config_modified, device_group_changed, device_name_changed
@@ -27,11 +28,11 @@ class ConfigConfig(AppConfig):
     def ready(self, *args, **kwargs):
         self.__setmodels__()
         self.connect_signals()
-        self.add_default_menu_items()
         self.register_notification_types()
         self.add_ignore_notification_widget()
         self.enable_cache_invalidation()
         self.register_dashboard_charts()
+        self.register_menu_groups()
         self.notification_cache_update()
 
     def __setmodels__(self):
@@ -84,19 +85,49 @@ def connect_signals(self):
             dispatch_uid='cert_update_invalidate_checksum_cache',
         )
 
-    def add_default_menu_items(self):
-        menu_setting = 'OPENWISP_DEFAULT_ADMIN_MENU_ITEMS'
-        items = [
-            {'model': get_model_name('config', 'Device')},
-            {'model': get_model_name('config', 'Template')},
-            {'model': get_model_name('config', 'Vpn')},
-            {'model': get_model_name('config', 'DeviceGroup')},
-        ]
-        if not hasattr(settings, menu_setting):
-            setattr(settings, menu_setting, items)
-        else:
-            current_menu = getattr(settings, menu_setting)
-            current_menu += items
+    def register_menu_groups(self):
+        register_menu_group(
+            position=30,
+            config={
+                'label': 'Configurations',
+                'items': {
+                    1: {
+                        'label': 'Templates',
+                        'model': get_model_name('config', 'Template'),
+                        'name': 'changelist',
+                        'icon': 'ow-template',
+                    },
+                    2: {
+                        'label': 'VPN Servers',
+                        'model': get_model_name('config', 'Vpn'),
+                        'name': 'changelist',
+                        'icon': 'ow-vpn',
+                    },
+                    3: {
+                        'label': 'Access Credentials',
+                        'model': get_model_name('connection', 'Credentials'),
+                        'name': 'changelist',
+                        'icon': 'ow-access-credential',
+                    },
+                    4: {
+                        'label': 'Device Groups',
+                        'model': get_model_name('config', 'DeviceGroup'),
+                        'name': 'changelist',
+                        'icon': 'ow-device-group',
+                    },
+                },
+                'icon': 'ow-config',
+            },
+        )
+        register_menu_group(
+            position=20,
+            config={
+                'label': 'Devices',
+                'model': get_model_name('config', 'Device'),
+                'name': 'changelist',
+                'icon': 'ow-device',
+            },
+        )
 
     def register_notification_types(self):
         register_notification_type(

openwisp_controller/config/static/config/css/admin.css

@@ -161,11 +161,21 @@ input.readonly {
   height: auto;
   min-height: auto;
 }
+#container .sortedm2m-container { margin-right: 0 }
 #container .sortedm2m-container .help {
   margin-bottom: 20px;
   color: #333;
   font-weight: bold;
 }
+#main ul.sortedm2m li { padding: 3px 0 }
+#main ul.sortedm2m li input {
+  margin-right: 2px;
+}
+.field-templates .add-related {
+  position: relative;
+  bottom: -7px;
+  left: -3px;
+}
 #template_form #id_tags {
   width: 261px;
 }
@@ -202,6 +212,7 @@ div.inline-group.tab-content
 .change-form #device_form div.inline-group.tab-content > .tabular {
   margin-top: -1em;
 }
+#main .tab-content .inline-related > h3 { background: transparent }
 ul.tabs {
   margin: 0;
   padding: 0;
@@ -216,22 +227,24 @@ ul.tabs a,
 ul.tabs a:hover,
 ul.tabs a:focus {
   display: inline-block;
-  padding: 10px 15px;
+  padding: 13px 16px;
   color: #333;
-  background: #e6e6e6;
+  background: rgba(0, 0, 0, 0.06);
   border-radius: 3px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
-  font-size: 13px;
+  font-size: 15px;
 }
 ul.tabs a:hover,
 ul.tabs a:focus {
   color: #000;
-  background: #cdcdcd;
+  background: rgba(0, 0, 0, 0.15);
 }
-ul.tabs a.current {
-  background: #f8f8f8;
-  color: #666;
+ul.tabs a.current,
+ul.tabs a.current:hover,
+ul.tabs a.current:focus {
+  background: #fff;
+  color: #000;
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-bottom: 0 none;
   border-color: rgba(0, 0, 0, 0.25);
@@ -253,6 +266,7 @@ div.tabs-divider {
   padding: 17em 0;
   font-size: 16px;
 }
+.form-row.field-system_context .readonly { padding: 0 }
 .form-row.field-system_context pre {
   margin: 0;
   padding: 0;
@@ -287,6 +301,15 @@ button.show-sc{
   display: block;
   margin-top: 10px;
 }
+.form-row.field-location .related-lookup { text-indent: 0 }
+.form-row .related-lookup,
+#main .form-row.field-location .item-label {
+  position: relative;
+  bottom: -6px
+}
+#main .form-row.field-location .item-label {
+  bottom: -7px
+}
 
 @media (max-width: 767px) {
   ul.tabs li {

openwisp_controller/config/static/config/css/lib/advanced-mode.css

@@ -732,12 +732,14 @@ div.jsoneditor-menu a:hover {
 div.jsoneditor-menu a.jsoneditor-exit {
   position: absolute;
   right: 0;
-  top: 0;
-  padding: 10px;
+  top: 0px;
+  padding: 0 12px;
   font-size: 13px;
-  background-color: #fff;
+  background-color: rgba(255, 255, 255, 0.8);
   color: #000;
-  margin-bottom: 1px;
+  height: 33px;
+  line-height: 33px;
+  border-radius: 3px;
 }
 div.jsoneditor-menu a.jsoneditor-exit img{ margin: -2px 1px 0 0 }
 table.jsoneditor-search input,
@@ -852,6 +854,9 @@ table.jsoneditor-search button.jsoneditor-previous:hover {
   padding: 0;
   font-size: 13px;
 }
+#main .property-selector .form-row {
+  padding: 5px 0 6px 10px !important;
+}
 @media (max-width: 768px){
   .jsoneditor-menu #netjsonconfig-hint-advancedmode{
     display: none;

openwisp_controller/config/static/config/css/lib/jsonschema-ui.css

@@ -14,6 +14,7 @@ input.deletelink:focus{ background: #a41515 }
 .jsoneditor-wrapper div.jsoneditor input.deletelink,
 .form-row .json-editor-btn-edit{
   margin-left: 10px;
+  margin-right: 5px;
   padding: 6px 12px;
 }
 a.json-editor-btn-edit{
@@ -23,7 +24,7 @@ a.json-editor-btn-edit{
 }
 
 .form-row .json-editor-btn-edit{ margin-bottom: 10px !important }
-.jsoneditor-wrapper div.jsoneditor .form-row{ padding: 15px 15px 15px 0 }
+#main .jsoneditor-wrapper div.jsoneditor .form-row{ padding: 15px 15px 15px 0 }
 .jsoneditor-wrapper div.jsoneditor label{ margin-left: 20px }
 .jsoneditor-wrapper div.jsoneditor .form-row:last-child{ border-bottom-width: 0 }
 .jsoneditor-wrapper div.jsoneditor .inline-group{
@@ -244,15 +245,13 @@ div[data-schematype="object"] > .inline-related > .grid-container > div >
 .jsoneditor-wrapper div.jsoneditor div.form-row > .help{
   margin-left: 181px;
   margin-top: 4px;
-  font-size: 13px;
   color: #888;
 }
 .jsoneditor-wrapper div.jsoneditor .inline-group > .help,
 .jsoneditor-wrapper div.jsoneditor .grid-column > .help{
   padding: 20px 15px 20px 18px;
   margin: 0;
   border-bottom: 1px solid #eee;
-  font-size: 13px;
 }
 
 .jsoneditor-wrapper div.jsoneditor .modal label{ width: auto }
@@ -275,12 +274,13 @@ div[data-schematype="object"] > .inline-related > .grid-container > div >
 div.jsoneditor > div > h3.controls{
   background: transparent !important;
 }
-div.jsoneditor .inline-related h3 {
+#main div.jsoneditor .inline-related h3 {
   color: #666 !important;
   background-color: #f8f8f8 !important;
   border-top: 1px solid #eee !important;
   border-bottom: 1px solid #eee !important;
-  font-size: 13px !important;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 #config-0.inline-related{ position: static }

openwisp_controller/config/tests/test_admin.py

@@ -1251,3 +1251,24 @@ def test_organization_filter(self):
         response = self.client.get(f'{url}{query}')
         self.assertContains(response, 'Org1 APs')
         self.assertNotContains(response, 'Org2 APs')
+
+    def test_admin_menu_groups(self):
+        # Test menu group (openwisp-utils menu group) for Device Group, Template
+        # and Vpn models
+        self.client.force_login(self._get_admin())
+        models = ['devicegroup', 'template', 'vpn']
+        response = self.client.get(reverse('admin:index'))
+        for model in models:
+            with self.subTest(f'test_admin_group_for_{model}_model'):
+                url = reverse(f'admin:{self.app_label}_{model}_changelist')
+                self.assertContains(response, f'<a class="mg-link" href="{url}">')
+        with self.subTest('test_configuration_group_is_registered'):
+            self.assertContains(
+                response,
+                '<div class="mg-dropdown-label">Configurations </div>',
+                html=True,
+            )
+        # Test Device is registered as menu item
+        with self.subTest('test_device_is_registered_as_menu_item'):
+            url = reverse(f'admin:{self.app_label}_device_changelist')
+            self.assertContains(response, f'<a class="menu-item" href="{url}">')

openwisp_controller/config/tests/test_notifications.py

@@ -68,6 +68,7 @@ def test_device_registered(self):
 
     @patch('openwisp_notifications.types.NOTIFICATION_TYPES', {})
     @patch('openwisp_utils.admin_theme.dashboard.DASHBOARD_CHARTS', {})
+    @patch('openwisp_utils.admin_theme.menu.MENU', {})
     def test_default_notification_type_already_unregistered(self):
         # Simulates if 'default notification type is already unregistered
         # by some other module

openwisp_controller/config/tests/test_selenium.py

@@ -101,7 +101,10 @@ def test_create_new_device(self):
         self.assertEqual(required_template_element.is_selected(), True)
         self.assertEqual(default_template_element.is_enabled(), True)
         self.assertEqual(default_template_element.is_selected(), True)
-
+        # Hide user tools because it covers the save button
+        self.web_driver.execute_script(
+            'document.querySelector("#ow-user-tools").style.display="none"'
+        )
         self.web_driver.find_element_by_name('_save').click()
         self.assertEqual(
             self.web_driver.find_elements_by_class_name('success')[0].text,
@@ -242,7 +245,7 @@ def test_template_context_variables(self):
         except TimeoutException:
             self.fail('Timed out wating for configuration variabled to get loaded')
         self.web_driver.find_element_by_xpath(
-            '//*[@id="container"]/div[2]/a[3]'
+            '//*[@id="main-content"]/div[2]/a[3]'
         ).click()
         try:
             WebDriverWait(self.web_driver, 2).until(EC.alert_is_present())

openwisp_controller/connection/static/connection/css/command-inline.css

@@ -29,41 +29,12 @@ li.commands {
   transition: background-color 3s ease;
 }
 
-/* Styles for Command button dropdown */
-.ow-device-command-option-container{
-  position: absolute;
-  margin-top: 35px;
-  display: flex;
-  flex-direction: column;
-  z-index: 99;
-  background-color: #efefef;
-  border: 2px solid #464646;
-  border-radius: 5px;
-  box-shadow: 0px 0px 5px 0px black;
-  color: #333333;
-}
-.ow-command-btn{
-  font-size: 12px;
-  padding: 8px 10px;
-  border: 0.2em solid rgba(0, 0, 0, 0.05);
-  font-weight: normal;
-  cursor: pointer;
-}
-.ow-command-btn:hover,
-.ow-command-btn:focus,
-.ow-command-btn:active {
-  background-color: #515151;
-  color: #fff;
-  outline: 0 none;
-}
-
-
 /* Styles for Command execute form overaly */
 #command_set-group,
 #ow-command-confirm-dialog-wrapper {
   position: absolute;
   top: 0px;
-  z-index: 100;
+  z-index: 9999;
   height: 100%;
   width: 100%;
   left: 0px;
@@ -195,7 +166,7 @@ li.commands {
   }
 }
 
-@media screen and (max-width: 640px){
+@media screen and (max-width: 768px){
   .object-tools {
     display: flex;
     flex-direction: column;

openwisp_controller/connection/static/connection/js/commands.js

@@ -52,16 +52,16 @@ function initCommandDropdown($) {
 
         Object.keys(schema).forEach(function (el) {
             owCommandBtns +=
-                `<button class="ow-command-btn" data-command="${el}">${schema[el].title}</button>`;
+                `<button class="ow-command-btn option" data-command="${el}">${schema[el].title}</button>`;
         });
         widgetElement = `
             <li>
                 <a href="#" id="send-command">${gettext('Send Command')}</a>
-                <div class="ow-device-command-option-container ow-hide">
+                <div class="ow-device-command-option-container option-container ow-hide">
                     ${owCommandBtns}
                 </div>
             </li>`;
-        $('.object-tools li+li').before(widgetElement);
+        $(widgetElement).insertBefore($('.object-tools li+li')[0]);
     });
 
     // Only show "Send command" button when a device has credentials present

openwisp_controller/connection/tests/test_admin.py

@@ -120,6 +120,16 @@ def test_credentials_jsonschema_view(self):
         ssh_schema = json.dumps(Ssh.schema)
         self.assertIn(ssh_schema, response.content.decode('utf8'))
 
+    def test_admin_menu_groups(self):
+        # Test menu group (openwisp-utils menu group) for Credentials model
+        self.client.force_login(self._get_admin())
+        models = ['credentials']
+        response = self.client.get(reverse('admin:index'))
+        for model in models:
+            with self.subTest(f'test_admin_group_for_{model}_model'):
+                url = reverse(f'admin:{self.app_label}_{model}_changelist')
+                self.assertContains(response, f'<a class="mg-link" href="{url}">')
+
 
 class TestCommandInlines(TestAdminMixin, CreateConnectionsMixin, TestCase):
     config_app_label = 'config'