feat: Make app token "label" field available to users

packages/design-system/src/helpers/types.ts

@@ -46,10 +46,10 @@ export type FieldType = {
   headerType?: string
   type?: string
   callback?: any
-  alignH?: string
-  alignV?: string
-  width?: string
-  wrap?: string
+  alignH?: 'left' | 'center' | 'right'
+  alignV?: 'top' | 'middle' | 'bottom'
+  width?: 'auto' | 'shrink' | 'expand'
+  wrap?: 'break' | 'nowrap' | 'truncate'
   thClass?: string
   tdClass?: string
   sortable?: boolean

packages/web-runtime/src/components/Account/AppTokens.vue

@@ -30,6 +30,11 @@
     />
     <div v-else>
       <oc-table :data="visibleAppTokens" :fields="tableFields">
+        <template #label="{ item }">
+          <div class="oc-width-1-1 oc-text-truncate">
+            <span v-text="item.label || '-'" />
+          </div>
+        </template>
         <template #creationDate="{ item }">
           <div class="oc-width-1-1 oc-text-truncate">
             <span v-text="formatDateFromISO(item.created_date, currentLanguage)" />
@@ -150,6 +155,13 @@ const visibleAppTokens = computed(() => {
 
 const tableFields = computed(() => {
   return [
+    {
+      name: 'label',
+      type: 'slot',
+      wrap: 'truncate',
+      width: 'expand',
+      title: $gettext('Note')
+    },
     {
       name: 'creationDate',
       type: 'slot',
@@ -166,6 +178,7 @@ const tableFields = computed(() => {
       name: 'actions',
       type: 'slot',
       alignH: 'right',
+      width: 'shrink',
       title: $gettext('Actions')
     }
   ]

packages/web-runtime/src/components/Modals/AppTokenModal.vue

@@ -1,7 +1,13 @@
 <template>
   <div v-if="!createdToken">
+    <oc-text-input
+      v-model="tokenLabel"
+      :label="$gettext('Note')"
+      :error-message="tokenLabelErrorMessage"
+    />
     <oc-datepicker
       :label="$gettext('Expiration date')"
+      class="oc-mt-s"
       type="date"
       :min-date="minDate"
       @date-changed="onDateChanged"
@@ -15,7 +21,7 @@
         {{ $gettext('Cancel') }}
       </oc-button>
       <oc-button
-        :disabled="confirmDisabled"
+        :disabled="isConfirmDisabled"
         class="oc-modal-body-actions-confirm oc-ml-s"
         appearance="filled"
         @click="createAppToken"
@@ -65,7 +71,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, unref } from 'vue'
+import { computed, ref, unref, watch } from 'vue'
 import { DateTime } from 'luxon'
 import { formatDateFromDateTime, Modal, useClientService } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
@@ -79,21 +85,32 @@ const { $gettext, current: currentLanguage } = useGettext()
 const { httpAuthenticated: client } = useClientService()
 const { copy, copied } = useClipboard({ legacy: true, copiedDuring: 1500 })
 
-const expiryDate = ref<DateTime>()
-const confirmDisabled = ref(true)
-const createdToken = ref('')
+const tokenLabel = ref<string>('')
+const tokenLabelErrorMessage = ref<string>('')
+watch(tokenLabel, (newValue) => {
+  tokenLabelErrorMessage.value = newValue.length ? '' : $gettext('The note is required')
+})
 
+const expiryDate = ref<DateTime>()
 const minDate = computed(() => DateTime.now())
-
 const onDateChanged = ({ date, error }: { date: DateTime; error: boolean }) => {
-  confirmDisabled.value = error || !date
-  expiryDate.value = date
+  expiryDate.value = error ? undefined : date
 }
 
+const isConfirmDisabled = computed<boolean>(() => {
+  return !unref(tokenLabel) || !unref(expiryDate)
+})
+const createdToken = ref('')
 const createAppToken = async () => {
+  if (unref(isConfirmDisabled)) {
+    return
+  }
   try {
+    const label = unref(tokenLabel)
     const expiry = `${unref(expiryDate).diff(DateTime.now(), 'hours').hours}h`
-    const { data } = await client.post<AppToken>('/auth-app/tokens', null, { params: { expiry } })
+    const { data } = await client.post<AppToken>('/auth-app/tokens', null, {
+      params: { label, expiry }
+    })
     createdToken.value = data.token
   } catch (error) {
     console.error(error)

packages/web-runtime/tests/unit/components/Modals/AppTokenModal.spec.ts

@@ -7,39 +7,54 @@ import {
 } from '@opencloud-eu/web-test-helpers'
 import { mockDeep } from 'vitest-mock-extended'
 import { ClientService } from '@opencloud-eu/web-pkg'
-import { OcButton, OcDatepicker } from '@opencloud-eu/design-system/components'
+import { OcButton, OcDatepicker, OcTextInput } from '@opencloud-eu/design-system/components'
 import { DateTime } from 'luxon'
+import { VueWrapper } from '@vue/test-utils'
 
 const copyMock = vi.fn()
 vi.mock('@vueuse/core', () => ({
   useClipboard: vi.fn(() => ({ copy: copyMock, copied: false }))
 }))
 
 describe('AppTokenModal component', () => {
+  it('should display an input for the label', () => {
+    const { wrapper } = getWrapper()
+    expect(wrapper.find('oc-text-input-stub').exists()).toBeTruthy()
+  })
   it('should display an input for the expiration date', () => {
     const { wrapper } = getWrapper()
     expect(wrapper.find('oc-datepicker-stub').exists()).toBeTruthy()
   })
   describe('confirm button', () => {
-    it('should be disabled when no date has been entered', () => {
+    it('should be disabled when no data has been entered', () => {
       const { wrapper } = getWrapper()
       const btn = wrapper.findComponent<typeof OcButton>('.oc-modal-body-actions-confirm')
       expect(btn.props('disabled')).toBeTruthy()
     })
-    it('should not be disabled when a date has been entered', async () => {
+    it('should be disabled when only a note has been entered', async () => {
       const { wrapper } = getWrapper()
-      wrapper
-        .findComponent<typeof OcDatepicker>('oc-datepicker-stub')
-        .vm.$emit('dateChanged', { date: DateTime.now(), error: null })
+      emitNoteInput(wrapper, 'someNote')
+      const btn = wrapper.findComponent<typeof OcButton>('.oc-modal-body-actions-confirm')
+      expect(btn.props('disabled')).toBeTruthy()
+    })
+    it('should be disabled when only a date has been entered', async () => {
+      const { wrapper } = getWrapper()
+      emitDateInput(wrapper, DateTime.now())
+      const btn = wrapper.findComponent<typeof OcButton>('.oc-modal-body-actions-confirm')
+      expect(btn.props('disabled')).toBeTruthy()
+    })
+    it('should not be disabled when a note and date has been entered', async () => {
+      const { wrapper } = getWrapper()
+      emitNoteInput(wrapper, 'someNote')
+      emitDateInput(wrapper, DateTime.now())
       const btn = wrapper.findComponent<typeof OcButton>('.oc-modal-body-actions-confirm')
       await wrapper.vm.$nextTick()
       expect(btn.props('disabled')).toBeFalsy()
     })
     it('should create a token on submit', async () => {
       const { wrapper, mocks } = getWrapper()
-      wrapper
-        .findComponent<typeof OcDatepicker>('oc-datepicker-stub')
-        .vm.$emit('dateChanged', { date: DateTime.now(), error: null })
+      emitNoteInput(wrapper, 'someNote')
+      emitDateInput(wrapper, DateTime.now())
       const btn = wrapper.findComponent<typeof OcButton>('.oc-modal-body-actions-confirm')
       await wrapper.vm.$nextTick()
       await btn.trigger('click')
@@ -48,19 +63,17 @@ describe('AppTokenModal component', () => {
   })
   it('should display the created token', async () => {
     const { wrapper } = getWrapper()
-    wrapper
-      .findComponent<typeof OcDatepicker>('oc-datepicker-stub')
-      .vm.$emit('dateChanged', { date: DateTime.now(), error: null })
+    emitNoteInput(wrapper, 'someNote')
+    emitDateInput(wrapper, DateTime.now())
     const btn = wrapper.findComponent<typeof OcButton>('.oc-modal-body-actions-confirm')
     await wrapper.vm.$nextTick()
     await btn.trigger('click')
     expect(wrapper.find('.created-token').exists()).toBeTruthy()
   })
   it('the created token can be copied', async () => {
     const { wrapper } = getWrapper()
-    wrapper
-      .findComponent<typeof OcDatepicker>('oc-datepicker-stub')
-      .vm.$emit('dateChanged', { date: DateTime.now(), error: null })
+    emitNoteInput(wrapper, 'someNote')
+    emitDateInput(wrapper, DateTime.now())
     const btn = wrapper.findComponent<typeof OcButton>('.oc-modal-body-actions-confirm')
     await wrapper.vm.$nextTick()
     await btn.trigger('click')
@@ -69,6 +82,17 @@ describe('AppTokenModal component', () => {
   })
 })
 
+const emitNoteInput = (wrapper: VueWrapper<typeof AppTokenModal.vm>, note: string) => {
+  wrapper
+    .findComponent<typeof OcTextInput>('oc-text-input-stub')
+    .vm.$emit('update:modelValue', note)
+}
+const emitDateInput = (wrapper: VueWrapper<typeof AppTokenModal.vm>, date: DateTime) => {
+  wrapper
+    .findComponent<typeof OcDatepicker>('oc-datepicker-stub')
+    .vm.$emit('dateChanged', { date, error: null })
+}
+
 const getWrapper = () => {
   const clientService = mockDeep<ClientService>()
   clientService.httpAuthenticated.post.mockResolvedValue(mockAxiosResolve({ token: 'token' }))