Introduce app top bar (#7217)

Introduce app top bar

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

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>

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>

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>

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'