Merge pull request #1597 from owncloud/accounts-ui-table-update

Update accounts ui to use new table-component
owncloud · Feb 17, 2021 · a0f87c3 · a0f87c3
2 parents bb1af75 + 4173ad5
commit a0f87c3
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 40 deletions.
diff --git a/accounts/go.sum b/accounts/go.sum
@@ -996,6 +996,7 @@ github.com/oklog/run v1.1.0/go.mod h1:sVPdnTZT1zYwAJeCMu2Th4T21pA3FPOQRfWjQlk7DV
 github.com/oklog/ulid v1.3.1/go.mod h1:CirwcVhetQ6Lv90oh/F+FBtV6XMibvdAFo93nm5qn4U=
 github.com/oleiade/reflections v1.0.0 h1:0ir4pc6v8/PJ0yw5AEtMddfXpWBXg9cnG7SgSoJuCgY=
 github.com/oleiade/reflections v1.0.0/go.mod h1:RbATFBbKYkVdqmSFtx13Bb/tVhR0lgOBXunWTZKeL4w=
+github.com/oleiade/reflections v1.0.1/go.mod h1:rdFxbxq4QXVZWj0F+e9jqjDkc7dbp97vkRixKo2JR60=
 github.com/olekukonko/tablewriter v0.0.1/go.mod h1:vsDQFd/mU46D+Z4whnwzcISnGGzXWMclvtLoiIKAKIo=
 github.com/olekukonko/tablewriter v0.0.4 h1:vHD/YYe1Wolo78koG299f7V/VAS08c6IpCLn+Ejf/w8=
 github.com/olekukonko/tablewriter v0.0.4/go.mod h1:zq6QwlOf5SlnkVbMSr5EoBv3636FWnp+qbPhuoO21uA=
@@ -1067,8 +1068,10 @@ github.com/ovh/go-ovh v0.0.0-20181109152953-ba5adb4cf014/go.mod h1:joRatxRJaZBsY
 github.com/owncloud/flaex v0.0.0-20200411150708-dce59891a203 h1:sXVTQ94GWeiBhlgN0kSbcyXQNmwzPuuhWyObxgTu/xE=
 github.com/owncloud/flaex v0.0.0-20200411150708-dce59891a203/go.mod h1:jip86t4OVURJTf8CM/0e2qcji/Y4NG3l2lR8kex4JWw=
 github.com/owncloud/ocis/accounts v0.5.3-0.20201103104733-ff2c41028d9b/go.mod h1:IX7T4MJ1U8Y4z9dfDW1J2jq1nv/SHCM7n2zt1fmBHI8=
+github.com/owncloud/ocis/accounts v0.5.3-0.20210216094451-dc73176dc62d/go.mod h1:OnkGCXo0/ka3o2gwb1jj4pml9X2p769deD0lL66QmrQ=
 github.com/owncloud/ocis/storage v0.0.0-20201015120921-38358ba4d4df h1:PhRLD+WTGIfQ1T4MqBabp6/1Q8H/iwxjlygh6xzao0A=
 github.com/owncloud/ocis/storage v0.0.0-20201015120921-38358ba4d4df/go.mod h1:s9kJvxtBlHEi5qc1TuPAdz2bprk9yGFe+FSOeC76Pbs=
+github.com/owncloud/ocis/storage v0.0.0-20210216094451-dc73176dc62d/go.mod h1:TWGerkBpvDDr1b2A+Szv0xcaiIlBe7Nkv1hHDuAewao=
 github.com/oxtoacart/bpool v0.0.0-20190530202638-03653db5a59c h1:rp5dCmg/yLR3mgFuSOe4oEnDDmGLROTvMragMUXpTQw=
 github.com/oxtoacart/bpool v0.0.0-20190530202638-03653db5a59c/go.mod h1:X07ZCGwUbLaax7L0S3Tw4hpejzu63ZrrQiUe6W0hcy0=
 github.com/parnurzeal/gorequest v0.2.15/go.mod h1:3Kh2QUMJoqw3icWAecsyzkpY7UzRfDhbRdTjtNwNiUE=

diff --git a/accounts/pkg/assets/embed.go b/accounts/pkg/assets/embed.go
diff --git a/accounts/ui/components/accounts/AccountsList.vue b/accounts/ui/components/accounts/AccountsList.vue
@@ -1,33 +1,33 @@
 <template>
   <div>
-    <oc-table middle divider>
-      <oc-table-group>
-        <oc-table-row class="fix-table-header">
-          <oc-table-cell shrink type="head" class="uk-text-center">
+    <oc-table-simple id="accounts-user-list">
+      <oc-thead>
+        <oc-tr class="fix-table-header">
+          <oc-th shrink type="head" align-h="center">
             <oc-checkbox
               class="oc-ml-s"
               :value="areAllAccountsSelected"
               @input="toggleSelectionAll"
               :label="$gettext('Select all users')"
               hide-label
             />
-          </oc-table-cell>
-          <oc-table-cell shrink type="head" />
-          <oc-table-cell type="head" v-text="$gettext('Username')" />
-          <oc-table-cell type="head" v-text="$gettext('Display name')" />
-          <oc-table-cell type="head" v-text="$gettext('Email')" />
-          <oc-table-cell type="head" v-text="$gettext('Role')" />
-          <oc-table-cell shrink type="head" v-text="$gettext('Activated')" />
-        </oc-table-row>
-      </oc-table-group>
-      <oc-table-group>
+          </oc-th>
+          <oc-th shrink type="head" />
+          <oc-th type="head" v-text="$gettext('Username')" />
+          <oc-th type="head" v-text="$gettext('Display name')" />
+          <oc-th type="head" v-text="$gettext('Email')" />
+          <oc-th type="head" v-text="$gettext('Role')" />
+          <oc-th shrink type="head" v-text="$gettext('Activated')" alignH="center"/>
+        </oc-tr>
+      </oc-thead>
+      <oc-tbody>
         <accounts-list-row
           v-for="account in accounts"
           :key="`account-list-row-${account.id}`"
           :account="account"
         />
-      </oc-table-group>
-    </oc-table>
+      </oc-tbody>
+    </oc-table-simple>
   </div>
 </template>
 

diff --git a/accounts/ui/components/accounts/AccountsListRow.vue b/accounts/ui/components/accounts/AccountsListRow.vue
@@ -1,6 +1,6 @@
 <template>
-  <oc-table-row>
-    <oc-table-cell>
+  <oc-tr>
+    <oc-td align-h="center">
       <oc-checkbox
         class="oc-ml-s"
         size="large"
@@ -10,14 +10,14 @@
         :label="selectAccountLabel"
         hide-label
       />
-    </oc-table-cell>
-    <oc-table-cell>
+    </oc-td>
+    <oc-td>
       <avatar :user-name="account.displayName || account.onPremisesSamAccountName" :userid="account.id" :width="35" />
-    </oc-table-cell>
-    <oc-table-cell v-text="account.onPremisesSamAccountName" />
-    <oc-table-cell v-text="account.displayName || '-'" />
-    <oc-table-cell v-text="account.mail" />
-    <oc-table-cell>
+    </oc-td>
+    <oc-td v-text="account.onPremisesSamAccountName" />
+    <oc-td v-text="account.displayName || '-'" />
+    <oc-td v-text="account.mail" />
+    <oc-td>
       <oc-button :id="`accounts-roles-select-trigger-${account.id}`" class="accounts-roles-select-trigger" variation="raw">
         <span class="uk-flex uk-flex-middle accounts-roles-current-role">
           {{ currentRole ? currentRole.displayName : $gettext('Select role') }}
@@ -43,8 +43,8 @@
           </li>
         </ul>
       </oc-drop>
-    </oc-table-cell>
-    <oc-table-cell class="uk-text-center">
+    </oc-td>
+    <oc-td align-h="center">
       <oc-icon
         v-if="account.accountEnabled"
         key="account-icon-enabled"
@@ -61,8 +61,8 @@
         :aria-label="$gettext('Account is blocked')"
         class="accounts-status-indicator-disabled"
       />
-    </oc-table-cell>
-  </oc-table-row>
+    </oc-td>
+  </oc-tr>
 </template>
 
 <script>

diff --git a/accounts/ui/components/accounts/Avatar.vue b/accounts/ui/components/accounts/Avatar.vue
@@ -67,9 +67,9 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['getToken']),
+    ...mapGetters(['getToken', 'configuration']),
     enabled: function () {
-      return this.$root.config.enableAvatars || true
+      return this.configuration.enableAvatars || true
     }
   },
   watch: {
@@ -97,7 +97,7 @@ export default {
         return
       }
       const headers = new Headers()
-      const instance = this.$root.config.server || window.location.origin
+      const instance = this.configuration.server || window.location.origin
       const url = instance + '/remote.php/dav/avatars/' + this.userid + '/128.png'
       headers.append('Authorization', 'Bearer ' + this.getToken)
       headers.append('X-Requested-With', 'XMLHttpRequest')

diff --git a/accounts/ui/tests/acceptance/pageobjects/accountsPage.js b/accounts/ui/tests/acceptance/pageobjects/accountsPage.js
@@ -104,15 +104,14 @@ module.exports = {
       selector: '#accounts-app'
     },
     accountsListTable: {
-      selector: "//table[@class='uk-table uk-table-middle uk-table-divider']",
-      locateStrategy: 'xpath'
+      selector: '#accounts-user-list'
     },
     userInAccountsList: {
-      selector: '//table//td[text()="%s"]',
+      selector: '//table[@id="accounts-user-list"]//td[text()="%s"]',
       locateStrategy: 'xpath'
     },
     rowByUsername: {
-      selector: '//table//td[text()="%s"]/ancestor::tr',
+      selector: '//table[@id="accounts-user-list"]//td[text()="%s"]/ancestor::tr',
       locateStrategy: 'xpath'
     },
     currentRole: {

diff --git a/accounts/ui/tests/run-acceptance-test.sh b/accounts/ui/tests/run-acceptance-test.sh
@@ -29,7 +29,7 @@ trap clean_up SIGHUP SIGINT SIGTERM
 if [ -z "$TEST_INFRA_DIRECTORY" ]
 then
 	cleanup=true
-	testFolder=$(< /dev/urandom tr -dc 'a-zA-Z0-9' | fold -w 32 | head -n 1)
+	testFolder=$(< /dev/urandom LC_CTYPE=C tr -dc 'a-zA-Z0-9' | fold -w 32 | head -n 1)
 	printf "creating folder $testFolder for Test infrastructure setup\n\n"
 	export TEST_INFRA_DIRECTORY=$testFolder
 fi

diff --git a/changelog/unreleased/accounts-table.md b/changelog/unreleased/accounts-table.md
@@ -0,0 +1,8 @@
+Enhancement: Make use of new design-system oc-table
+
+Tags: ui, accounts
+
+The design-system table component has changed the way it's used.
+We updated accounts-ui to use the new 'oc-table-simple' component.  
+
+https://github.com/owncloud/ocis/pull/1597