From 355aa8fbb2e7e7ff8a7b0c5f2aebdc76d3300946 Mon Sep 17 00:00:00 2001
From: Jan <jackermann@owncloud.com>
Date: Wed, 6 Jul 2022 10:14:56 +0200
Subject: [PATCH] Introduce app top bar (#7217)

Introduce app top bar
---
 .../enhancement-add-app-top-bar-component     |   6 +
 packages/web-app-pdf-viewer/src/App.vue       |  18 +--
 packages/web-app-text-editor/src/App.vue      | 114 +++++++++---------
 packages/web-app-text-editor/src/AppBar.vue   |  57 ---------
 packages/web-pkg/src/components/AppTopBar.vue |  37 ++++++
 .../acceptance/pageObjects/textEditorPage.js  |  16 ++-
 6 files changed, 117 insertions(+), 131 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-add-app-top-bar-component
 delete mode 100644 packages/web-app-text-editor/src/AppBar.vue
 create mode 100644 packages/web-pkg/src/components/AppTopBar.vue

diff --git a/changelog/unreleased/enhancement-add-app-top-bar-component b/changelog/unreleased/enhancement-add-app-top-bar-component
new file mode 100644
index 00000000000..7f5e0263cb6
--- /dev/null
+++ 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
index 4fd303e62f9..831cd91b393 100644
--- a/packages/web-app-pdf-viewer/src/App.vue
+++ b/packages/web-app-pdf-viewer/src/App.vue
@@ -3,12 +3,7 @@
     <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>
@@ -16,6 +11,7 @@
 <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
index e9174772fef..d676daf8ace 100644
--- 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
deleted file mode 100644
index b224c13029d..00000000000
--- a/packages/web-app-text-editor/src/AppBar.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div id="text-editor-app-bar" class="oc-app-bar oc-width-1-1 oc-my-s">
-    <oc-grid flex gutter="small">
-      <div class="oc-width-auto">
-        <oc-button
-          id="text-editor-controls-save"
-          :disabled="isReadOnly || !isDirty"
-          @click="$emit('save')"
-        >
-          <oc-icon name="save" />
-        </oc-button>
-        <oc-spinner v-if="isLoading" :aria-label="$gettext('Loading editor content')" />
-      </div>
-      <div class="oc-width-expand oc-text-center">
-        <span id="text-editor-file-path">{{ activeFilePath }}</span>
-      </div>
-      <div class="oc-width-auto oc-text-right">
-        <oc-button id="text-editor-controls-close" @click="$emit('closeApp')">
-          <oc-icon name="close" />
-        </oc-button>
-      </div>
-    </oc-grid>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    currentFileContext: {
-      type: Object,
-      required: true
-    },
-    isDirty: {
-      type: Boolean,
-      required: true
-    },
-    isLoading: {
-      type: Boolean,
-      required: true
-    },
-    isReadOnly: {
-      type: Boolean,
-      required: true
-    }
-  },
-  computed: {
-    activeFilePath() {
-      let path = this.currentFileContext.path
-
-      if (path.startsWith('/files/') || path.startsWith('/spaces/')) {
-        path = path.split('/').splice(3).join('/')
-      }
-
-      return path.replace(/^(\/|\\)+/, '')
-    }
-  }
-}
-</script>
diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
new file mode 100644
index 00000000000..7d747158332
--- /dev/null
+++ 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
index fb7488d089b..b4da1b1bd7a 100644
--- 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'