fix(nc-gui): playwright & telemetry

packages/nc-gui/components/smartsheet/calendar/SideMenu.vue

@@ -346,6 +346,7 @@ onUnmounted(() => {
       >
         <NcButton
           v-if="isUIAllowed('dataEdit') && props.visible"
+          v-e="['c:calendar:calendar-new-record-btn']"
           class="!absolute right-5 !border-brand-500 bottom-5 !h-12 !w-12"
           type="secondary"
           @click="emit('new-record', { row: {} })"

packages/nc-gui/components/smartsheet/calendar/index.vue

@@ -153,7 +153,13 @@ const headerText = computed(() => {
         <div class="flex justify-start gap-3 items-center">
           <NcTooltip>
             <template #title> Previous </template>
-            <NcButton data-testid="nc-calendar-prev-btn" size="small" type="secondary" @click="paginateCalendarView('prev')">
+            <NcButton
+              v-e="`['c:calendar:calendar-${activeCalendarView}-prev-btn']`"
+              data-testid="nc-calendar-prev-btn"
+              size="small"
+              type="secondary"
+              @click="paginateCalendarView('prev')"
+            >
               <component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
             </NcButton>
           </NcTooltip>
@@ -197,12 +203,19 @@ const headerText = computed(() => {
           </NcDropdown>
           <NcTooltip>
             <template #title> Next </template>
-            <NcButton data-testid="nc-calendar-next-btn" size="small" type="secondary" @click="paginateCalendarView('next')">
+            <NcButton
+              v-e="`['c:calendar:calendar-${activeCalendarView}-next-btn']`"
+              data-testid="nc-calendar-next-btn"
+              size="small"
+              type="secondary"
+              @click="paginateCalendarView('next')"
+            >
               <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
             </NcButton>
           </NcTooltip>
           <NcButton
             v-if="!isMobileMode"
+            v-e="`['c:calendar:calendar-${activeCalendarView}-today-btn']`"
             data-testid="nc-calendar-today-btn"
             size="small"
             type="secondary"
@@ -225,6 +238,7 @@ const headerText = computed(() => {
           <template #title> Toggle Sidebar </template>
           <NcButton
             v-if="!isMobileMode"
+            v-e="`['c:calendar:calendar-${activeCalendarView}-toggle-sidebar']`"
             data-testid="nc-calendar-side-bar-btn"
             size="small"
             type="secondary"

packages/nc-gui/components/smartsheet/toolbar/CalendarMode.vue

@@ -44,6 +44,7 @@ watch(activeCalendarView, () => {
     <div
       v-for="mode in ['day', 'week', 'month', 'year']"
       :key="mode"
+      v-e="`['c:calendar:change-calendar-range-${mode}']`"
       :class="{ active: activeCalendarView === mode }"
       :data-testid="`nc-calendar-view-mode-${mode}`"
       class="tab"
@@ -60,7 +61,12 @@ watch(activeCalendarView, () => {
       </NcButton>
       <template #overlay>
         <NcMenu>
-          <NcMenuItem v-for="mode in ['day', 'week', 'month', 'year']" :key="mode" @click="changeCalendarView(mode)">
+          <NcMenuItem
+            v-for="mode in ['day', 'week', 'month', 'year']"
+            :key="mode"
+            v-e="`['c:calendar:change-calendar-range-${mode}']`"
+            @click="changeCalendarView(mode)"
+          >
             {{ $t(`objects.${mode}`) }}
           </NcMenuItem>
         </NcMenu>

packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue

@@ -110,7 +110,12 @@ const removeRange = async (id: number) => {
 <template>
   <NcDropdown v-if="!IsPublic" v-model:visible="calendarRangeDropdown" :trigger="['click']" class="!xs:hidden">
     <div class="nc-calendar-btn">
-      <a-button v-e="['c:calendar:change-calendar-range']" :disabled="isLocked" class="nc-calendar-range-btn nc-toolbar-btn">
+      <a-button
+        v-e="['c:calendar:change-calendar-range']"
+        :disabled="isLocked"
+        class="nc-toolbar-btn"
+        data-testid="nc-calendar-range-btn"
+      >
         <div class="flex items-center gap-2">
           <component :is="iconMap.calendar" class="h-4 w-4" />
           <span class="text-capitalize !text-sm font-medium">
@@ -120,7 +125,7 @@ const removeRange = async (id: number) => {
       </a-button>
     </div>
     <template #overlay>
-      <div v-if="calendarRangeDropdown" class="w-full p-6 w-[35rem]" @click.stop>
+      <div v-if="calendarRangeDropdown" class="w-full p-6 w-[35rem]" data-testid="nc-calendar-range-menu" @click.stop>
         <div v-for="(range, id) in _calendar_ranges" :key="id" class="flex w-full gap-2 mb-2 items-center">
           <span>
             {{ $t('labels.organiseBy') }}

tests/playwright/pages/Dashboard/common/Toolbar/CalendarRange.ts

@@ -0,0 +1,20 @@
+import BasePage from '../../../Base';
+import { ToolbarPage } from './index';
+
+export class ToolbarCalendarRangePage extends BasePage {
+  readonly toolbar: ToolbarPage;
+
+  constructor(toolbar: ToolbarPage) {
+    super(toolbar.rootPage);
+    this.toolbar = toolbar;
+  }
+
+  async get() {
+    return this.rootPage.getByTestId('nc-calendar-range-menu');
+  }
+
+  async click({ title }: { title: string }) {
+    await this.get().locator(`.nc-kanban-grouping-field-select`).click();
+    await this.rootPage.locator('.ant-select-dropdown:visible').locator(`div[title="${title}"]`).click();
+  }
+}

tests/playwright/pages/Dashboard/common/Toolbar/CalendarViewMode.ts

@@ -8,12 +8,11 @@ export class ToolbarCalendarViewModePage extends BasePage {
     super(toolbar.rootPage);
     this.toolbar = toolbar;
   }
-
   get() {
     return this.rootPage.getByTestId('nc-calendar-view-mode');
   }
 
-  changeCalendarView({ title }: { title: string }) {
+  async changeCalendarView({ title }: { title: string }) {
     await this.get().getByTestId(`nc-calendar-view-mode-${title}`).click();
   }
 }

tests/playwright/pages/Dashboard/common/Toolbar/index.ts

@@ -17,7 +17,7 @@ import { RowHeight } from './RowHeight';
 import { MapPage } from '../../Map';
 import { getTextExcludeIconText } from '../../../../tests/utils/general';
 import { ToolbarGroupByPage } from './Groupby';
-import { ToolbarCalendarViewModePage } from './CalendarViewModel';
+import { ToolbarCalendarViewModePage } from './CalendarViewMode';
 
 export class ToolbarPage extends BasePage {
   readonly parent: GridPage | GalleryPage | FormPage | KanbanPage | MapPage;