Server: Visual bug when group name/id is similar to an id style sheet name

[addy90]

Steps to reproduce

1. Name (for example in LDAP) a group like "nextcloud" and wait until it is synchronized to Nextcloud
2. Go to "User" settings page and look groups navigation from the left side
3. "nextcloud" group is having 100% height compared to all other group items. All other items look fine.

Maybe it is necessary to have "ldapExpertUUIDGroupAttr" set to "cn" before so that the group UUID is taken from the "cn" of the ldap group. I have this! See LDAP config below.

The problem is within

There the "nextcloud" list item has the id "nextcloud".

Unfortunately, this id is specified as css style here:
https://github.com/nextcloud/server/blob/master/core/css/header.scss#L59

The id is set within the users view:
https://github.com/nextcloud/server/blob/ddeedf375bb086b4c83308a2913168f49407ee3d/apps/settings/src/views/Users.vue

This means, the group name has the side effect that it loads a style sheet for an list item where it was not designed for. This should also work for other ids from the header.scss style-sheet. There are sure some group names that crash the view completely... With console inspector (F12), it is easy to try out other ids with live editing like "header" or "settings", which all looks not as expected, though I am not sure if somebody names the groups like this. But this side-effect surely is not intended.

Expected behaviour

Actual behaviour

Server configuration

Operating system: Ubuntu 18.04.4

Web server: Apache 2

Database: MariaDB

PHP version: 7.2

Nextcloud version: 18.0.5

Updated from an older Nextcloud/ownCloud or fresh install: updated from 18.0.4

Where did you install Nextcloud from: updater.phar

Are you using an external user-backend, if yes which one: LDAP

LDAP configuration (delete this part if not used)

LDAP config

+-------------------------------+-------------------------------------------------------------------------------------------+
| Configuration                 |                                                                                           |
+-------------------------------+-------------------------------------------------------------------------------------------+
| hasMemberOfFilterSupport      | 1                                                                                         |
| homeFolderNamingRule          |                                                                                           |
| lastJpegPhotoLookup           | 0                                                                                         |
| ldapAgentName                 | cn=admin,dc=xxxxx,dc=xx                                                                   |
| ldapAgentPassword             | ***                                                                                       |
| ldapAttributesForGroupSearch  |                                                                                           |
| ldapAttributesForUserSearch   |                                                                                           |
| ldapBackupHost                |                                                                                           |
| ldapBackupPort                |                                                                                           |
| ldapBase                      | dc=xxxxx,dc=xx                                                                            |
| ldapBaseGroups                | ou=groups,dc=xxxxx,dc=xx                                                                  |
| ldapBaseUsers                 | ou=people,dc=xxxxx,dc=xx                                                                  |
| ldapCacheTTL                  | 60                                                                                        |
| ldapConfigurationActive       | 1                                                                                         |
| ldapDefaultPPolicyDN          |                                                                                           |
| ldapDynamicGroupMemberURL     |                                                                                           |
| ldapEmailAttribute            | mail                                                                                      |
| ldapExperiencedAdmin          | 0                                                                                         |
| ldapExpertUUIDGroupAttr       | cn                                                                                        |
| ldapExpertUUIDUserAttr        | uid                                                                                       |
| ldapExpertUsernameAttr        |                                                                                           |
| ldapExtStorageHomeAttribute   |                                                                                           |
| ldapGidNumber                 | gidNumber                                                                                 |
| ldapGroupDisplayName          | cn                                                                                        |
| ldapGroupFilter               | (&(|(objectclass=groupOfNames)))                                                          |
| ldapGroupFilterGroups         |                                                                                           |
| ldapGroupFilterMode           | 0                                                                                         |
| ldapGroupFilterObjectclass    | groupOfNames                                                                              |
| ldapGroupMemberAssocAttr      | member                                                                                    |
| ldapHost                      | ldaps://ldap.xxxxx.xx                                                                     |
| ldapIgnoreNamingRules         |                                                                                           |
| ldapLoginFilter               | (&(&(|(objectclass=inetOrgPerson)))(uid=%uid))                                            |
| ldapLoginFilterAttributes     |                                                                                           |
| ldapLoginFilterEmail          | 0                                                                                         |
| ldapLoginFilterMode           | 0                                                                                         |
| ldapLoginFilterUsername       | 1                                                                                         |
| ldapNestedGroups              | 0                                                                                         |
| ldapOverrideMainServer        |                                                                                           |
| ldapPagingSize                | 500                                                                                       |
| ldapPort                      | 636                                                                                       |
| ldapQuotaAttribute            |                                                                                           |
| ldapQuotaDefault              |                                                                                           |
| ldapTLS                       | 0                                                                                         |
| ldapUserAvatarRule            | default                                                                                   |
| ldapUserDisplayName           | displayname                                                                               |
| ldapUserDisplayName2          |                                                                                           |
| ldapUserFilter                | (&(|(objectclass=inetOrgPerson))(|(memberof=cn=nextcloud,ou=groups,dc=xxxxx,dc=xx)))      |
| ldapUserFilterGroups          | nextcloud                                                                                 |
| ldapUserFilterMode            | 0                                                                                         |
| ldapUserFilterObjectclass     | inetOrgPerson                                                                             |
| ldapUuidGroupAttribute        | auto                                                                                      |
| ldapUuidUserAttribute         | auto                                                                                      |
| turnOffCertCheck              | 0                                                                                         |
| turnOnPasswordChange          | 1                                                                                         |
| useMemberOfToDetectMembership | 1                                                                                         |
+-------------------------------+-------------------------------------------------------------------------------------------+

Client configuration

Browser: Firefox 76.0.1

Operating system: Ubuntu 18.04

Browser log

Browser log

JQMIGRATE: Migrate is installed, version 1.4.1 jquery-migrate.min.js:2:551
Diese Seite verwendet die nicht standardisierte Eigenschaft "zoom". Stattdessen sollte calc() in den entsprechenden Eigenschaftswerten oder "transform" zusammen mit "transform-origin: 0 0" verwendet werden. addStylesClient.js:220:17
Proxying an event bus of version 1.1.2 with 0.2.1 ProxyBus.js:65:14
Handlebars is deprecated: please ship your own, this will be removed in Nextcloud 20 globals.js:66:15
Notifications permissions granted App.vue:242
New search handler registered search.js:67:12
JQMIGRATE: Migrate is installed, version 1.4.1 jquery-migrate.min.js:2:551
Proxying an event bus of version 1.1.2 with 0.2.1 ProxyBus.js:65:14
Handlebars is deprecated: please ship your own, this will be removed in Nextcloud 20 globals.js:66:15
Notifications permissions granted App.vue:242
Diese Seite verwendet die nicht standardisierte Eigenschaft "zoom". Stattdessen sollte calc() in den entsprechenden Eigenschaftswerten oder "transform" zusammen mit "transform-origin: 0 0" verwendet werden. addStylesClient.js:220:17
New search handler registered search.js:67:12

[kesselb]

cc @nextcloud/designers

[juliushaertl]

Only happening on Nextcloud 18, since there we still use the nextcloud-vue 0.13 package:

https://github.com/nextcloud/nextcloud-vue/blob/v0.13.0/src/components/AppNavigationItem/AppNavigationItem.vue#L24

We probably can just prefix https://github.com/nextcloud/server/blob/stable18/apps/settings/src/views/Users.vue#L253 with something unique

[TomerPacific]

Hi @juliushaertl , I'd like to help out with this issue.

[juliushaertl]

Great, feel free to open a pull request and let me know if you have any questions.

[TomerPacific]

@juliushaertl , I'm trying to understand how to simulate or recreate this scenario on my machine. I have gone over the contribution guidelines and the development environment, but I do not understand what setup I need to do on my local machine (Windows).

Any help (or pointing to the right direction) will be greatly appreciated.

This issue can be taken by anyone else, I am not able to set up a development environment.