Merge pull request #9523 from owncloud/backport-x-request-id

Backport x-request-id to 7.1 stable
owncloud · Aug 2, 2023 · 657b913 · 657b913
2 parents 95d8b8b + bce11d2
commit 657b913
Show file tree

Hide file tree

Showing 105 changed files with 962 additions and 437 deletions.
diff --git a/changelog/enhancement-error-notifications-include-x-request-id b/changelog/enhancement-error-notifications-include-x-request-id
@@ -0,0 +1,11 @@
+Enhancement: Error notifications include x-request-id
+
+We've added a details box for the notifications, that pop up if an operation (e.g upload, download, add a share) fails.
+This box contains the x-request-id and may help to debug the error on the server side.
+
+https://github.com/owncloud/web/pull/9482
+https://github.com/owncloud/web/pull/9474
+https://github.com/owncloud/web/pull/9466
+https://github.com/owncloud/web/pull/9448
+https://github.com/owncloud/web/pull/9426
+https://github.com/owncloud/web/issues/9449
diff --git a/changelog/unreleased/enhancement-add-error-log-to-upload-dialog b/changelog/unreleased/enhancement-add-error-log-to-upload-dialog
@@ -0,0 +1,9 @@
+Enhancement: Add error log to upload dialog
+
+We've added a error log to the upload dialog, so if an upload fails the user can copy the log and might hand
+it over to their admin.
+
+https://github.com/owncloud/web/pull/9436
+https://github.com/owncloud/web/pull/9426
+https://github.com/owncloud/web/issues/9430
+
diff --git a/.../changelog/unreleased/enhancement-add-dismiss-button-to-oc-notification-message-component b/.../changelog/unreleased/enhancement-add-dismiss-button-to-oc-notification-message-component
@@ -0,0 +1,8 @@
+Enhancement: Add dismiss button to OcNotificationsMessage component
+
+We've added added dismiss button to the OcNotificationsMessage component,
+which closes the open notification immediately.
+
+https://github.com/owncloud/web/pull/9421
+https://github.com/owncloud/web/issues/9420
+
diff --git a/packages/design-system/changelog/unreleased/enhancement-add-oc-error-log-component b/packages/design-system/changelog/unreleased/enhancement-add-oc-error-log-component
@@ -0,0 +1,8 @@
+Enhancement: Add OcErrorLog component
+
+We've added the new OcErrorLog component and integrated it into the OcNotificationMessage component,
+to display an error log and allow the user to copy it's content if the OcNotificationMessage
+is used to show errors.
+
+https://github.com/owncloud/web/pull/9426
+
diff --git a/packages/design-system/src/components/OcErrorLog/OcErrorLog.vue b/packages/design-system/src/components/OcErrorLog/OcErrorLog.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="oc-error-log">
+    <oc-textarea
+      class="oc-error-log-textarea oc-mt-s oc-text-small"
+      :label="contentLabel"
+      :model-value="content"
+      rows="4"
+      readonly
+    />
+    <div class="oc-flex oc-flex-between oc-mt-s">
+      <div class="oc-flex">
+        <div v-if="showCopied" class="oc-flex oc-flex-middle">
+          <oc-icon variation="success" name="checkbox-circle" />
+          <p class="oc-error-log-content-copied oc-ml-s oc-my-rm" v-text="$gettext('Copied')" />
+        </div>
+      </div>
+      <oc-button
+        size="small"
+        variation="primary"
+        appearance="filled"
+        @click="copyContentToClipboard"
+        v-text="$gettext('Copy')"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue'
+
+import { useGettext } from 'vue3-gettext'
+
+export default defineComponent({
+  name: 'OcErrorLog',
+  status: 'ready',
+  release: '2.0.0',
+
+  props: {
+    /**
+     * Content to be displayed
+     */
+    content: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const { $gettext } = useGettext()
+    const showCopied = ref(false)
+
+    const contentLabel = computed(() => {
+      return $gettext(
+        'Copy the following information and pass them to technical support to troubleshoot the problem:'
+      )
+    })
+
+    const copyContentToClipboard = () => {
+      navigator.clipboard.writeText(props.content)
+      showCopied.value = true
+      setTimeout(() => (showCopied.value = false), 500)
+    }
+
+    return {
+      contentLabel,
+      showCopied,
+      copyContentToClipboard
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.oc-error-log {
+  &-textarea {
+    resize: none;
+
+    label {
+      color: var(--oc-color-text-muted);
+    }
+  }
+
+  &-content-copied {
+    color: var(--oc-color-swatch-success-default);
+  }
+}
+</style>
+
+<docs>
+Component to display error log.
+```js
+<oc-error-log>
+  <oc-error-log content="X-REQUEST-ID: 123456789" />
+</oc-error-log>
+```
+</docs>
diff --git a/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.spec.ts b/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.spec.ts
@@ -1,5 +1,5 @@
 import OcNotificationMessage from './OcNotificationMessage.vue'
-import { shallowMount } from 'web-test-helpers'
+import { defaultPlugins, mount } from 'web-test-helpers'
 jest.useFakeTimers()
 
 describe('OcNotificationMessage', () => {
@@ -68,6 +68,26 @@ describe('OcNotificationMessage', () => {
     })
   })
 
+  describe('errorLogContent prop', () => {
+    it('should render OcErrorLogComponent, if errorLogContent is provided', async () => {
+      const wrapper = getWrapper({ errorLogContent: 'X-REQUEST-ID: 1234' })
+      const errorLogToggleButtonEl = wrapper.find(selectors.errorLogToggleButton)
+
+      expect(errorLogToggleButtonEl.exists()).toBeTruthy()
+      await errorLogToggleButtonEl.trigger('click')
+
+      const errorLogEl = wrapper.find(selectors.errorLog)
+      expect(errorLogEl.exists()).toBeTruthy()
+    })
+
+    it('should not render OcErrorLogComponent, if errorLogContent is not provided', () => {
+      const wrapper = getWrapper()
+      const errorLogToggleButtonEl = wrapper.find(selectors.errorLogToggleButton)
+
+      expect(errorLogToggleButtonEl.exists()).toBeFalsy()
+    })
+  })
+
   it('should emit close after set timout', () => {
     const wrapper = getWrapper({ timeout: 1 })
 
@@ -79,14 +99,22 @@ describe('OcNotificationMessage', () => {
   const selectors = {
     messageTitle: '.oc-notification-message-title',
     messageContent: '.oc-notification-message-content',
-    messageWrapper: '.oc-notification-message div'
+    messageWrapper: '.oc-notification-message div',
+    errorLog: '.oc-error-log',
+    errorLogToggleButton: '.oc-notification-message-error-log-toggle-button'
   }
 
   function getWrapper(props = {}) {
-    return shallowMount(OcNotificationMessage, {
+    return mount(OcNotificationMessage, {
       props: {
         ...props,
         title: 'Test passed'
+      },
+      global: {
+        stubs: {
+          'oc-icon': true
+        },
+        plugins: defaultPlugins()
       }
     })
   }

diff --git a/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue b/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
@@ -4,24 +4,43 @@
     :class="classes"
   >
     <div class="oc-flex oc-flex-wrap oc-flex-middle oc-flex-1" :role="role" :aria-live="ariaLive">
-      <div class="oc-flex oc-flex-middle">
-        <oc-icon :variation="iconVariation" name="information" fill-type="line" class="oc-mr-s" />
-        <div class="oc-notification-message-title">
-          {{ title }}
+      <div class="oc-flex oc-flex-middle oc-flex-between oc-width-1-1">
+        <div class="oc-flex oc-flex-middle">
+          <oc-icon :variation="iconVariation" name="information" fill-type="line" class="oc-mr-s" />
+          <div class="oc-notification-message-title">
+            {{ title }}
+          </div>
         </div>
+        <oc-button appearance="raw" @click="close" :aria-label="$gettext('Close')"
+          ><oc-icon name="close"
+        /></oc-button>
       </div>
-      <div
-        v-if="message"
-        class="oc-text-muted oc-width-1-1 oc-notification-message-content oc-mt-s oc-pl-s oc-ml-l"
-      >
-        {{ message }}
+      <div v-if="message || errorLogContent" class="oc-flex oc-flex-between oc-width-1-1 oc-mt-s">
+        <span
+          v-if="message"
+          class="oc-notification-message-content oc-text-muted oc-mr-s"
+          v-text="message"
+        />
+        <oc-button
+          v-if="errorLogContent"
+          class="oc-notification-message-error-log-toggle-button"
+          gap-size="none"
+          appearance="raw"
+          @click="showErrorLog = !showErrorLog"
+        >
+          <span v-text="$gettext('Details')"></span>
+          <oc-icon :name="showErrorLog ? 'arrow-up-s' : 'arrow-down-s'" />
+        </oc-button>
       </div>
+      <oc-error-log v-if="showErrorLog" class="oc-mt-m" :content="errorLogContent" />
     </div>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
+import OcButton from '../OcButton/OcButton.vue'
+import OcErrorLog from '../OcErrorLog/OcErrorLog.vue'
 
 /**
  * Notifications are used to inform users about errors, warnings and as confirmations for their actions.
@@ -31,7 +50,9 @@ export default defineComponent({
   status: 'ready',
   release: '1.0.0',
   components: {
-    OcIcon
+    OcErrorLog,
+    OcIcon,
+    OcButton
   },
   props: {
     /**
@@ -60,11 +81,18 @@ export default defineComponent({
      */
     message: {
       type: String,
-      required: false,
-      default: null
+      required: false
+    },
+    /**
+     * The error log content that will be displayed in notification
+     */
+    errorLogContent: {
+      type: String,
+      required: false
     },
     /**
      * Number of seconds the message shows. It will disappear after this time.
+     * If set to 0, message won't disappear automatically.
      */
     timeout: {
       type: Number,
@@ -74,6 +102,13 @@ export default defineComponent({
     }
   },
   emits: ['close'],
+  setup: function () {
+    const showErrorLog = ref(false)
+
+    return {
+      showErrorLog
+    }
+  },
   computed: {
     classes() {
       return `oc-notification-message-${this.status}`
@@ -95,9 +130,11 @@ export default defineComponent({
     /**
      * Notification will be destroyed if timeout is set
      */
-    setTimeout(() => {
-      this.close()
-    }, this.timeout * 1000)
+    if (this.timeout !== 0) {
+      setTimeout(() => {
+        this.close()
+      }, this.timeout * 1000)
+    }
   },
   methods: {
     close() {
@@ -114,14 +151,17 @@ export default defineComponent({
 <style lang="scss">
 .oc-notification-message {
   background-color: var(--oc-color-background-default) !important;
-  cursor: pointer;
   margin-top: var(--oc-space-small);
   position: relative;
   word-break: break-word;
 
   &-title {
     font-size: 1.15rem;
   }
+
+  &-error-log-toggle-button {
+    word-break: keep-all;
+  }
 }
 </style>
 

diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
@@ -55,3 +55,4 @@ export { default as OcTag } from './OcTag/OcTag.vue'
 export { default as OcTextarea } from './OcTextarea/OcTextarea.vue'
 export { default as OcTextInput } from './OcTextInput/OcTextInput.vue'
 export { default as OcTile } from './OcTile/OcTile.vue'
+export { default as OcErrorLog } from './OcErrorLog/OcErrorLog.vue'
diff --git a/...ages/web-app-admin-settings/src/composables/actions/general/useGeneralActionsResetLogo.ts b/...ages/web-app-admin-settings/src/composables/actions/general/useGeneralActionsResetLogo.ts
@@ -23,9 +23,9 @@ export const useGeneralActionsResetLogo = ({ store }: { store?: Store<any> }) =>
       }, 1000)
     } catch (e) {
       console.error(e)
-      store.dispatch('showMessage', {
+      store.dispatch('showErrorMessage', {
         title: $gettext('Failed to reset logo'),
-        status: 'danger'
+        error: e
       })
     }
   }

diff --git a/...ges/web-app-admin-settings/src/composables/actions/general/useGeneralActionsUploadLogo.ts b/...ges/web-app-admin-settings/src/composables/actions/general/useGeneralActionsUploadLogo.ts
@@ -26,9 +26,8 @@ export const useGeneralActionsUploadLogo = ({
     }
 
     if (!supportedLogoMimeTypes.includes(file.type)) {
-      return store.dispatch('showMessage', {
-        title: $gettext('The file type is unsupported'),
-        status: 'danger'
+      return store.dispatch('showErrorMessage', {
+        title: $gettext('The file type is unsupported')
       })
     }
 
@@ -49,9 +48,9 @@ export const useGeneralActionsUploadLogo = ({
       }, 1000)
     } catch (e) {
       console.error(e)
-      store.dispatch('showMessage', {
+      store.dispatch('showErrorMessage', {
         title: $gettext('Failed to upload logo'),
-        status: 'danger'
+        error: e
       })
     }
   }