Merge pull request #1938 from owncloud/release-web-3.0.0

Release web 3.0.0
owncloud · Apr 21, 2021 · 7ff08a5 · 7ff08a5
2 parents a95cf43 + 38863a4
commit 7ff08a5
Show file tree

Hide file tree

Showing 17 changed files with 398 additions and 435 deletions.
diff --git a/.drone.env b/.drone.env
@@ -3,5 +3,5 @@ CORE_COMMITID=0fd7346bfb7de34ed9c9b6ca22bf1f90ac50eb1d
 CORE_BRANCH=master
 
 # The test runner source for UI tests
-WEB_COMMITID=b7b084cd06278c5f02cdf67fe8665959d0c5c13d
+WEB_COMMITID=8062d6324081a3cfaafd0a4ad780cfbd905e5c94
 WEB_BRANCH=master
diff --git a/.drone.star b/.drone.star
@@ -563,7 +563,7 @@ def uiTestPipeline(ctx, suiteName, storage = 'owncloud', accounts_hash_difficult
           'BACKEND_HOST': 'https://ocis-server:9200',
           'RUN_ON_OCIS': 'true',
           'OCIS_REVA_DATA_ROOT': '/srv/app/tmp/ocis/owncloud/data',
-          'OCIS_SKELETON_DIR': '/srv/app/testing/data/webUISkeleton',
+          'TESTING_DATA_DIR': '/srv/app/testing/data',
           'WEB_UI_CONFIG': '/drone/src/tests/config/drone/ocis-config.json',
           'TEST_TAGS': 'not @skipOnOCIS and not @skip and not @notToImplementOnOCIS',
           'LOCAL_UPLOAD_DIR': '/uploads',

diff --git a/accounts/package.json b/accounts/package.json
@@ -8,7 +8,7 @@
   "author": "ownCloud GmbH <devops@owncloud.com>",
   "repository": "https://github.com/owncloud/ocis-accounts.git",
   "bugs": {
-    "url": "https://github.com/owncloud/ocis/accounts/issues",
+    "url": "https://github.com/owncloud/ocis/issues",
     "email": "support@owncloud.com"
   },
   "scripts": {
@@ -76,7 +76,7 @@
     "not dead"
   ],
   "peerDependencies": {
-    "owncloud-design-system": "^1.7.0"
+    "owncloud-design-system": "^6.0.1"
   },
   "dependencies": {
     "validator": "^13.1.1"

diff --git a/accounts/ui/components/App.vue b/accounts/ui/components/App.vue
@@ -1,7 +1,10 @@
 <template>
   <div>
-    <div class="uk-flex uk-flex-column uk-height-1-1" id="accounts-app">
+    <main class="uk-flex uk-flex-column uk-height-1-1" id="accounts-app">
       <template v-if="isInitialized">
+        <h1 class="oc-invisible-sr">
+          <translate>Accounts</translate>
+        </h1>
         <div class="oc-app-bar">
           <accounts-batch-actions
             v-if="isAnyAccountSelected"
@@ -23,7 +26,7 @@
         </oc-alert>
       </template>
       <oc-loader id="accounts-list-loader" v-else />
-    </div>
+    </main>
   </div>
 </template>
 
@@ -55,17 +58,3 @@ export default {
   }
 }
 </script>
-
-<style>
-/* TODO: After https://github.com/owncloud/owncloud-design-system/pull/418 gets merged
-there won't be an extra span and this won't be needed anymore */
-.accounts-selection-actions-btn > span {
-  display: flex;
-  align-items: center;
-}
-
-/* TODO: Adjust in ODS */
-.oc-dropdown-menu {
-  width: 150px;
-}
-</style>
diff --git a/accounts/ui/components/accounts/AccountsBatchActions.vue b/accounts/ui/components/accounts/AccountsBatchActions.vue
@@ -3,20 +3,20 @@
     <span v-text="selectionInfoText" />
     <span>|</span>
     <div>
-      <oc-button v-text="$gettext('Clear selection')" variation="raw" @click="RESET_ACCOUNTS_SELECTION" />
+      <oc-button v-text="$gettext('Clear selection')" appearance="raw" @click="RESET_ACCOUNTS_SELECTION" />
     </div>
     <oc-grid gutter="small" id="accounts-batch-actions">
       <div v-for="action in actions" :key="action.label">
-        <oc-alert v-if="isConfirmationInProgress[action.id]" :variation="action.confirmation.variation || 'default'" noClose class="uk-flex uk-flex-middle tmp-alert-fixes">
+        <div v-if="isConfirmationInProgress[action.id]" :variation="action.confirmation.variation || 'primary'" noClose class="uk-flex uk-flex-middle tmp-alert-fixes">
           <span>{{ action.confirmation.message }}</span>
-          <oc-button size="small" :id="action.confirmation.cancel.id" @click="action.confirmation.cancel.handler" :variation="action.confirmation.cancel.variation || 'default'">
+          <oc-button :id="action.confirmation.cancel.id" @click="action.confirmation.cancel.handler" :variation="action.confirmation.cancel.variation || 'passive'">
             {{ action.confirmation.cancel.label }}
           </oc-button>
-          <oc-button size="small" :id="action.confirmation.confirm.id" @click="action.confirmation.confirm.handler" :variation="action.confirmation.confirm.variation || 'default'">
+          <oc-button :id="action.confirmation.confirm.id" @click="action.confirmation.confirm.handler" :variation="action.confirmation.confirm.variation || 'primary'">
             {{ action.confirmation.confirm.label }}
           </oc-button>
-        </oc-alert>
-        <oc-button v-else :id="action.id" @click="action.handler" :variation="action.variation || 'default'" :icon="action.icon">
+        </div>
+        <oc-button v-else :id="action.id" @click="action.handler" :variation="action.variation || 'primary'" :icon="action.icon">
           {{ action.label }}
         </oc-button>
       </div>
@@ -78,6 +78,7 @@ export default {
         id: idDeleteAction,
         label: this.$gettext('Delete'),
         icon: 'delete',
+        variation: 'danger',
         handler: () => this.showConfirmationRequest(idDeleteAction),
         confirmation: {
           variation: 'danger',
@@ -89,7 +90,6 @@ export default {
           cancel: {
             id: 'accounts-batch-action-delete-cancel',
             label: this.$gettext('Cancel'),
-            variation: 'secondary',
             handler: () => this.hideConfirmationRequest(idDeleteAction)
           },
           confirm: {
@@ -119,13 +119,9 @@ export default {
 
 <style lang="scss" scoped>
 .tmp-alert-fixes {
-  padding: 4px 11px 5px !important;
-  border-radius: 3px !important;
-  background-color: #fff !important;
-  border: 1px solid rgb(224, 0, 0) !important;
   color: rgb(224, 0, 0) !important;
 
-  font-size: 1.1rem !important;
+  font-size: 1.125rem !important;
   font-weight: 600 !important;
   line-height: 1.4 !important;
 }

diff --git a/accounts/ui/components/accounts/AccountsCreate.vue b/accounts/ui/components/accounts/AccountsCreate.vue
@@ -1,50 +1,45 @@
 <template>
   <div>
     <oc-grid v-if="isFormInProgress" gutter="small">
-      <label>
-        <oc-text-input
-          id="accounts-new-account-input-username"
-          type="text"
-          v-model="formData.username"
-          :error-message="formValidation.usernameError"
-          :placeholder="$gettext('Username')"
-          :disabled="isRequestInProgress"
-          @keydown.enter="createAccount"
-        />
-      </label>
-      <label>
-        <oc-text-input
-          id="accounts-new-account-input-email"
-          type="email"
-          v-model="formData.email"
-          :error-message="formValidation.emailError"
-          :placeholder="$gettext('Email')"
-          :disabled="isRequestInProgress"
-          @keydown.enter="createAccount"
-        />
-      </label>
-      <label>
-        <oc-text-input
-          id="accounts-new-account-input-password"
-          type="password"
-          v-model="formData.password"
-          :error-message="formValidation.passwordError"
-          :placeholder="$gettext('Password')"
-          :disabled="isRequestInProgress"
-          @keydown.enter="createAccount"
-        />
-      </label>
-      <div>
+      <oc-text-input
+        id="accounts-new-account-input-username"
+        type="text"
+        v-model="formData.username"
+        :error-message="formValidation.usernameError"
+        :label="$gettext('Username')"
+        :disabled="isRequestInProgress"
+        @keydown.enter="createAccount"
+      />
+      <oc-text-input
+        id="accounts-new-account-input-email"
+        type="email"
+        v-model="formData.email"
+        :error-message="formValidation.emailError"
+        :label="$gettext('Email')"
+        :disabled="isRequestInProgress"
+        @keydown.enter="createAccount"
+      />
+      <oc-text-input
+        id="accounts-new-account-input-password"
+        type="password"
+        v-model="formData.password"
+        :error-message="formValidation.passwordError"
+        :label="$gettext('Password')"
+        :disabled="isRequestInProgress"
+        @keydown.enter="createAccount"
+      />
+      <div class="uk-flex">
         <oc-button
+          class="oc-mr-s oc-mb-s"
           v-text="$gettext('Cancel')"
           @click="cancelForm"
           :disabled="isRequestInProgress"
         />
-      </div>
-      <div>
         <oc-button
           id="accounts-new-account-button-confirm"
+          class="oc-mr-s oc-mb-s"
           variation="primary"
+          appearance="filled"
           :disabled="isRequestInProgress"
           @click="createAccount"
           gap-size="small"
@@ -66,6 +61,7 @@
           id="accounts-new-account-trigger"
           key="create-accounts-button"
           variation="primary"
+          appearance="filled"
           gap-size="small"
           @click="setFormInProgress(true)"
         >
@@ -194,9 +190,3 @@ export default {
   align-items: center;
 }
 </style>
-<style scoped>
-.border-ods-tmp-fix {
-  /* TODO: somehow the primary button receives a 2px border-width. remove it until we fix it in ODS. */
-  border-width: 0 !important;
-}
-</style>
diff --git a/accounts/ui/components/accounts/AccountsList.vue b/accounts/ui/components/accounts/AccountsList.vue
@@ -2,7 +2,7 @@
   <div>
     <oc-table-simple id="accounts-user-list">
       <oc-thead>
-        <oc-tr class="fix-table-header">
+        <oc-tr>
           <oc-th shrink type="head" align-h="center">
             <oc-checkbox
               class="oc-ml-s"
@@ -58,9 +58,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.fix-table-header > th {
-  text-transform: none;
-}
-</style>
diff --git a/accounts/ui/components/accounts/AccountsListRow.vue b/accounts/ui/components/accounts/AccountsListRow.vue
@@ -18,7 +18,7 @@
     <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">
+      <oc-button :id="`accounts-roles-select-trigger-${account.id}`" class="accounts-roles-select-trigger" appearance="outline">
         <span class="uk-flex uk-flex-middle accounts-roles-current-role">
           {{ currentRole ? currentRole.displayName : $gettext('Select role') }}
           <oc-icon name="expand_more" aria-hidden="true" />

diff --git a/accounts/ui/tests/acceptance/pageobjects/accountsPage.js b/accounts/ui/tests/acceptance/pageobjects/accountsPage.js
@@ -119,7 +119,7 @@ module.exports = {
       locateStrategy: 'xpath'
     },
     roleInRolesDropdown: {
-      selector: '//label[contains(@class, "accounts-roles-dropdown-role")]/span[normalize-space()="%s"]',
+      selector: '//span[contains(@class, "accounts-roles-dropdown-role")]/label[normalize-space()="%s"]',
       locateStrategy: 'xpath'
     },
     rolesDropdownTrigger: {

diff --git a/changelog/unreleased/enhancement-update-ods-in-accounts-settings b/changelog/unreleased/enhancement-update-ods-in-accounts-settings
@@ -0,0 +1,7 @@
+Enhancement: Update ODS in accounts & settings extension
+
+The accounts and settings extensions were updated to reflect the 
+latest changes in the ownCloud design system. In addition, a couple of 
+quick wins in terms of accessibility are included.
+
+https://github.com/owncloud/ocis/pull/1934
diff --git a/changelog/unreleased/update-web-3.0.0.md b/changelog/unreleased/update-web-3.0.0.md
@@ -0,0 +1,8 @@
+Change: Update ownCloud Web to v3.0.0
+
+Tags: web
+
+We updated ownCloud Web to v3.0.0. Please refer to the changelog (linked) for details on the web release.
+
+https://github.com/owncloud/ocis/pull/1938
+https://github.com/owncloud/web/releases/tag/v3.0.0
diff --git a/settings/package.json b/settings/package.json
@@ -74,7 +74,7 @@
     "not dead"
   ],
   "peerDependencies": {
-    "owncloud-design-system": "^1.7.0"
+    "owncloud-design-system": "^6.0.1"
   },
   "dependencies": {
     "lodash": "^4.17.15",

diff --git a/settings/ui/components/SettingsApp.vue b/settings/ui/components/SettingsApp.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-p">
-    <div class="uk-flex uk-flex-column" id="settings-app">
+    <main class="uk-flex uk-flex-column" id="settings-app">
       <template v-if="initialized">
         <oc-alert v-if="extensions.length === 0" variation="primary" no-close>
           <p class="uk-flex uk-flex-middle">
@@ -34,7 +34,7 @@
         </template>
       </template>
       <oc-loader v-else />
-    </div>
+    </main>
   </div>
 </template>
 

diff --git a/settings/ui/components/SettingsBundle.vue b/settings/ui/components/SettingsBundle.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="uk-width-1-1 uk-width-2-3@m uk-width-1-2@l uk-width-1-3@xl">
-    <div class="oc-text-bold oc-mb-s">
+    <h2 class="oc-mb-s">
       <translate>{{ bundle.displayName }}</translate>
-    </div>
+    </h2>
     <oc-grid gutter="small">
       <template>
         <div class="uk-width-1-1" v-for="setting in bundle.settings" :key="setting.id">