Introduce app top bar (#7217)

Introduce app top bar
owncloud · Jul 6, 2022 · 355aa8f · 355aa8f
1 parent da9cde0
commit 355aa8f
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 131 deletions.
diff --git a/changelog/unreleased/enhancement-add-app-top-bar-component b/changelog/unreleased/enhancement-add-app-top-bar-component
@@ -0,0 +1,6 @@
+Enhancement: Add app top bar component
+
+We've added a app top bar component for consistency,
+which will be used by the apps: preview, text-editor and pdf-viewer.
+
+https://github.com/owncloud/web/pull/7217
diff --git a/packages/web-app-pdf-viewer/src/App.vue b/packages/web-app-pdf-viewer/src/App.vue
@@ -3,19 +3,15 @@
     <loading-screen v-if="loading" />
     <error-screen v-else-if="loadingError" />
     <div v-else class="oc-height-1-1">
-      <div class="oc-flex oc-p-s pdf-viewer-tool-bar">
-        <oc-resource :resource="resource" />
-        <oc-button id="text-editor-controls-close" size="small" @click="closeApp">
-          <oc-icon name="close" size="small" />
-        </oc-button>
-      </div>
+      <app-top-bar :resource="resource" @close="closeApp" />
       <object class="pdf-viewer oc-width-1-1" :data="blobUrl" type="application/pdf" />
     </div>
   </main>
 </template>
 <script>
 import { mapGetters } from 'vuex'
 import { useAppDefaults } from 'web-pkg/src/composables'
+import AppTopBar from 'web-pkg/src/components/AppTopBar.vue'
 import ErrorScreen from './components/ErrorScreen.vue'
 import LoadingScreen from './components/LoadingScreen.vue'
 import { buildResource } from 'files/src/helpers/resources'
@@ -24,7 +20,8 @@ export default {
   name: 'PDFViewer',
   components: {
     ErrorScreen,
-    LoadingScreen
+    LoadingScreen,
+    AppTopBar
   },
   setup() {
     return {
@@ -76,11 +73,6 @@ export default {
   margin: 0;
   padding: 0;
   overflow: hidden;
-  height: calc(100% - 50px);
-}
-
-.pdf-viewer-tool-bar {
-  align-items: center;
-  justify-content: space-between;
+  height: calc(100% - 52px);
 }
 </style>
diff --git a/packages/web-app-text-editor/src/App.vue b/packages/web-app-text-editor/src/App.vue
@@ -1,14 +1,21 @@
 <template>
-  <main id="text-editor" class="oc-px-l oc-py-m oc-height-1-1">
-    <app-bar
-      :current-file-context="currentFileContext"
-      :is-loading="isLoading"
-      :is-dirty="isDirty"
-      :is-read-only="isReadOnly"
-      @closeApp="closeApp"
-      @save="save"
-    />
-    <div class="oc-flex editor-wrapper-height">
+  <main id="text-editor" class="oc-height-1-1">
+    <div v-if="isLoading" class="oc-text-center">
+      <oc-spinner :aria-label="$gettext('Loading editor content')" />
+    </div>
+    <app-top-bar v-else :resource="resource" @close="closeApp">
+      <template #right>
+        <oc-button
+          id="text-editor-controls-save"
+          :aria-label="$gettext('Save')"
+          :disabled="isReadOnly || !isDirty"
+          @click="save"
+        >
+          <oc-icon name="save" size="small" />
+        </oc-button>
+      </template>
+    </app-top-bar>
+    <div class="oc-flex editor-wrapper-height oc-px-s oc-pt-rm oc-pb-s">
       <div :class="showPreview ? 'oc-width-1-2' : 'oc-width-1-1'" class="oc-height-1-1">
         <oc-textarea
           id="text-editor-input"
@@ -36,12 +43,13 @@ import { computed, onMounted, onBeforeUnmount, ref, unref } from '@vue/compositi
 import { mapActions } from 'vuex'
 import { DavPermission, DavProperty } from 'web-pkg/src/constants'
 import { useAppDefaults } from 'web-pkg/src/composables'
-import AppBar from './AppBar.vue'
+import AppTopBar from 'web-pkg/src/components/AppTopBar.vue'
+import { buildResource } from 'files/src/helpers/resources'
 
 export default {
   name: 'TextEditor',
   components: {
-    AppBar
+    AppTopBar
   },
   beforeRouteLeave(_to, _from, next) {
     if (this.isDirty) {
@@ -71,65 +79,58 @@ export default {
     const defaults = useAppDefaults({
       applicationId: 'text-editor'
     })
-    const { applicationConfig, currentFileContext } = defaults
+    const { applicationConfig, currentFileContext, getFileInfo, getFileContents, putFileContents } =
+      defaults
     const serverContent = ref()
     const currentContent = ref()
     const currentETag = ref()
     const isReadOnly = ref(true)
+    const resource = ref()
 
     const loadFileTask = useTask(function* () {
       const filePath = unref(currentFileContext).path
 
-      unref(defaults)
-        .getFileInfo(filePath, [DavProperty.Permissions])
-        .then((response) => {
-          isReadOnly.value = ![DavPermission.Updateable, DavPermission.FileUpdateable].some(
-            (p) => response.fileInfo[DavProperty.Permissions].indexOf(p) > -1
-          )
-        })
+      const fileInfoResponse = yield getFileInfo(filePath, [DavProperty.Permissions])
+      isReadOnly.value = ![DavPermission.Updateable, DavPermission.FileUpdateable].some(
+        (p) => fileInfoResponse.fileInfo[DavProperty.Permissions].indexOf(p) > -1
+      )
+      resource.value = buildResource(fileInfoResponse)
 
-      return yield unref(defaults)
-        .getFileContents(filePath)
-        .then((response) => {
-          serverContent.value = currentContent.value = response.body
-          currentETag.value = response.headers['OC-ETag']
-          return response
-        })
+      const fileContentsResponse = yield getFileContents(filePath)
+      serverContent.value = currentContent.value = fileContentsResponse.body
+      currentETag.value = fileContentsResponse.headers['OC-ETag']
     }).restartable()
+    loadFileTask.perform()
 
     const saveFileTask = useTask(function* () {
       const filePath = unref(currentFileContext).path
       const newContent = unref(currentContent)
 
-      return yield unref(defaults)
-        .putFileContents(filePath, newContent, {
+      try {
+        const putFileContentsResponse = yield putFileContents(filePath, newContent, {
           previousEntityTag: unref(currentETag)
         })
-        .then(
-          (response) => {
-            serverContent.value = newContent
-            currentETag.value = response['OC-ETag']
-          },
-          (error) => {
-            switch (error.statusCode) {
-              case 412:
-                this.errorPopup(
-                  this.$gettext(
-                    'This file was updated outside this window. Please refresh the page (all changes will be lost).'
-                  )
-                )
-                break
-              case 500:
-                this.errorPopup(this.$gettext('Error when contacting the server'))
-                break
-              case 401:
-                this.errorPopup(this.$gettext("You're not authorized to save this file"))
-                break
-              default:
-                this.errorPopup(error.message || error)
-            }
-          }
-        )
+        serverContent.value = newContent
+        currentETag.value = putFileContentsResponse['OC-ETag']
+      } catch (e) {
+        switch (e.statusCode) {
+          case 412:
+            this.errorPopup(
+              this.$gettext(
+                'This file was updated outside this window. Please refresh the page (all changes will be lost).'
+              )
+            )
+            break
+          case 500:
+            this.errorPopup(this.$gettext('Error when contacting the server'))
+            break
+          case 401:
+            this.errorPopup(this.$gettext("You're not authorized to save this file"))
+            break
+          default:
+            this.errorPopup(e.message || e)
+        }
+      }
     }).restartable()
 
     const renderedMarkdown = computed(() => {
@@ -160,8 +161,6 @@ export default {
     })
 
     onMounted(() => {
-      loadFileTask.perform()
-
       // Enable ctrl/cmd + s
       document.addEventListener('keydown', handleSKey, false)
       // Ensure reload is not possible if there are changes
@@ -206,6 +205,7 @@ export default {
       currentContent,
       renderedMarkdown,
       config,
+      resource,
 
       // methods
       save,
@@ -236,6 +236,6 @@ export default {
   height: 100%;
 }
 .editor-wrapper-height {
-  height: calc(100% - 42px);
+  height: calc(100% - 52px);
 }
 </style>
diff --git a/packages/web-app-text-editor/src/AppBar.vue b/packages/web-app-text-editor/src/AppBar.vue
diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="oc-flex oc-p-s app-top-bar">
+    <oc-resource id="app-top-bar-resource" :is-thumbnail-displayed="false" :resource="resource" />
+    <div>
+      <slot name="right"></slot>
+      <oc-button
+        id="app-top-bar-close"
+        :aria-label="$gettext('Close')"
+        size="small"
+        @click="$emit('close')"
+      >
+        <oc-icon name="close" size="small" />
+      </oc-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/runtime-core'
+
+export default defineComponent({
+  name: 'AppTopBar',
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.app-top-bar {
+  align-items: center;
+  justify-content: space-between;
+}
+</style>
diff --git a/tests/acceptance/pageObjects/textEditorPage.js b/tests/acceptance/pageObjects/textEditorPage.js
@@ -29,8 +29,16 @@ module.exports = {
       })
       return content
     },
-    getFileName: function () {
-      return this.getInnerText('@fileName')
+    getFileName: async function () {
+      let fileName = ''
+      await this.waitForElementVisible('@fileName').getAttribute(
+        '@fileName',
+        'data-test-resource-name',
+        (result) => {
+          fileName = result.value
+        }
+      )
+      return fileName
     },
     getContentFromEditor: function () {
       return this.getInputValue('@editorTextarea')
@@ -84,10 +92,10 @@ module.exports = {
       selector: '#text-editor-controls-save'
     },
     closeButton: {
-      selector: '#text-editor-controls-close'
+      selector: '#app-top-bar-close'
     },
     fileName: {
-      selector: '#text-editor-file-path'
+      selector: '.oc-resource-name'
     },
     previewPanel: {
       selector: '#text-editor-preview'