Browse Source

fix: Remvoed old view action dropdown and integrated changes in test

pull/6888/head
Muhammed Mustafa 1 year ago
parent
commit
46d69f2b2e
  1. 7
      packages/nc-gui/components/smartsheet/Toolbar.vue
  2. 121
      packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
  3. 4
      packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
  4. 4
      tests/playwright/pages/Dashboard/common/Toolbar/index.ts

7
packages/nc-gui/components/smartsheet/Toolbar.vue

@ -51,13 +51,6 @@ const { allowCSVDownload } = useSharedView()
'w-full': isMobileMode, 'w-full': isMobileMode,
}" }"
/> />
<template v-if="!isMobileMode">
<LazySmartsheetToolbarViewActions
v-if="(isGrid || isGallery || isKanban || isMap) && !isPublic && isUIAllowed('dataInsert')"
:show-system-fields="false"
/>
</template>
</template> </template>
</div> </div>
</template> </template>

121
packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue

@ -218,7 +218,12 @@ watch(isDropdownOpen, () => {
<GeneralIcon icon="info" class="cursor-pointer" /> <GeneralIcon icon="info" class="cursor-pointer" />
</NcTooltip> </NcTooltip>
</div> </div>
<NcDropdown v-else v-model:visible="isDropdownOpen"> <NcDropdown
v-else
v-model:visible="isDropdownOpen"
class="!xs:pointer-events-none nc-actions-menu-btn"
overlay-class-name="nc-dropdown-actions-menu"
>
<div <div
class="truncate nc-active-view-title !hover:(bg-gray-100 text-gray-800) ml-0.25 pl-1 pr-0.25 rounded-md py-1 cursor-pointer" class="truncate nc-active-view-title !hover:(bg-gray-100 text-gray-800) ml-0.25 pl-1 pr-0.25 rounded-md py-1 cursor-pointer"
:class="{ :class="{
@ -240,7 +245,7 @@ watch(isDropdownOpen, () => {
<GeneralIcon icon="arrowDown" class="ml-1" /> <GeneralIcon icon="arrowDown" class="ml-1" />
</div> </div>
<template #overlay> <template #overlay>
<NcMenu class="min-w-84"> <NcMenu class="min-w-84" data-testid="toolbar-actions">
<NcTooltip> <NcTooltip>
<template #title> Click to copy View ID </template> <template #title> Click to copy View ID </template>
<div class="flex items-center justify-between py-2 px-2 cursor-pointer hover:bg-gray-100 group" @click="onViewIdCopy"> <div class="flex items-center justify-between py-2 px-2 cursor-pointer hover:bg-gray-100 group" @click="onViewIdCopy">
@ -264,74 +269,72 @@ watch(isDropdownOpen, () => {
<NcDivider /> <NcDivider />
</template> </template>
<NcMenuItem-group> <template v-if="isUIAllowed('csvTableImport') && !isPublicView && !isSqlView">
<template v-if="isUIAllowed('csvTableImport') && !isPublicView && !isSqlView"> <NcSubMenu key="upload">
<NcSubMenu key="upload">
<template #title>
<div v-e="['c:navdraw:preview-as']" class="nc-base-menu-item group">
<UploadIcon class="w-4 h-4" />
{{ $t('general.upload') }}
</div>
</template>
<template #expandIcon></template>
<div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">Upload Data</div>
<template v-for="(dialog, type) in quickImportDialogs">
<NcMenuItem v-if="isUIAllowed(`${type}TableImport`) && !isPublicView" :key="type" @click="onImportClick(dialog)">
<div v-e="[`a:upload:${type}`]" class="nc-base-menu-item" :class="{ disabled: isLocked }">
<component :is="iconMap.upload" />
{{ `${$t('general.upload')} ${type.toUpperCase()}` }}
</div>
</NcMenuItem>
</template>
</NcSubMenu>
</template>
<NcSubMenu key="download">
<template #title> <template #title>
<div v-e="['c:download']" class="nc-base-menu-item group"> <div v-e="['c:navdraw:preview-as']" class="nc-base-menu-item group">
<DownloadIcon class="w-4 h-4" /> <UploadIcon class="w-4 h-4" />
{{ $t('general.download') }} {{ $t('general.upload') }}
</div> </div>
</template> </template>
<template #expandIcon></template> <template #expandIcon></template>
<div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">Upload Data</div>
<LazySmartsheetToolbarExportSubActions /> <template v-for="(dialog, type) in quickImportDialogs">
<NcMenuItem v-if="isUIAllowed(`${type}TableImport`) && !isPublicView" :key="type" @click="onImportClick(dialog)">
<div v-e="[`a:upload:${type}`]" class="nc-base-menu-item" :class="{ disabled: isLocked }">
<component :is="iconMap.upload" />
{{ `${$t('general.upload')} ${type.toUpperCase()}` }}
</div>
</NcMenuItem>
</template>
</NcSubMenu> </NcSubMenu>
</template>
<NcSubMenu key="download">
<template #title>
<div v-e="['c:download']" class="nc-base-menu-item group">
<DownloadIcon class="w-4 h-4" />
{{ $t('general.download') }}
</div>
</template>
<NcDivider /> <template #expandIcon></template>
<NcSubMenu <LazySmartsheetToolbarExportSubActions />
v-if="isUIAllowed('viewCreateOrEdit')" </NcSubMenu>
key="lock-type"
class="scrollbar-thin-dull max-h-90vh overflow-auto !py-0" <NcDivider />
>
<template #title> <NcSubMenu
<div v-e="['c:navdraw:preview-as']" class="flex flex-row items-center gap-x-3"> v-if="isUIAllowed('viewCreateOrEdit')"
<div>View Settings</div> key="lock-type"
<div class="nc-base-menu-item flex !flex-shrink group !py-1 !px-1 rounded-md bg-brand-50"> class="scrollbar-thin-dull max-h-90vh overflow-auto !py-0"
<LazySmartsheetToolbarLockType >
hide-tick <template #title>
:type="lockType" <div v-e="['c:navdraw:preview-as']" class="flex flex-row items-center gap-x-3">
class="flex nc-view-actions-lock-type !text-brand-500 !flex-shrink" <div>View Settings</div>
/> <div class="nc-base-menu-item flex !flex-shrink group !py-1 !px-1 rounded-md bg-brand-50">
</div> <LazySmartsheetToolbarLockType
<div class="flex flex-grow"></div> hide-tick
:type="lockType"
class="flex nc-view-actions-lock-type !text-brand-500 !flex-shrink"
/>
</div> </div>
</template> <div class="flex flex-grow"></div>
</div>
</template>
<template #expandIcon></template> <template #expandIcon></template>
<div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">View Settings</div> <div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">View Settings</div>
<NcMenuItem class="nc-view-action-lock-subaction" @click="changeLockType(LockType.Collaborative)"> <NcMenuItem class="nc-view-action-lock-subaction" @click="changeLockType(LockType.Collaborative)">
<LazySmartsheetToolbarLockType :type="LockType.Collaborative" /> <LazySmartsheetToolbarLockType :type="LockType.Collaborative" />
</NcMenuItem> </NcMenuItem>
<NcMenuItem @click="changeLockType(LockType.Locked)"> <NcMenuItem @click="changeLockType(LockType.Locked)">
<LazySmartsheetToolbarLockType :type="LockType.Locked" /> <LazySmartsheetToolbarLockType :type="LockType.Locked" />
</NcMenuItem> </NcMenuItem>
</NcSubMenu> </NcSubMenu>
</NcMenuItem-group>
</NcMenu> </NcMenu>
</template> </template>
</NcDropdown> </NcDropdown>

4
packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue

@ -68,7 +68,7 @@ const openedBaseUrl = computed(() => {
</div> </div>
</NcTooltip> </NcTooltip>
</NuxtLink> </NuxtLink>
<div class="px-1.5 text-gray-500">/</div> <div class="px-1.75 text-gray-500">/</div>
</template> </template>
<template v-if="!(isMobileMode && !activeView?.is_default)"> <template v-if="!(isMobileMode && !activeView?.is_default)">
<LazyGeneralEmojiPicker v-if="isMobileMode" :emoji="activeTable?.meta?.icon" readonly size="xsmall"> <LazyGeneralEmojiPicker v-if="isMobileMode" :emoji="activeTable?.meta?.icon" readonly size="xsmall">
@ -121,7 +121,7 @@ const openedBaseUrl = computed(() => {
</div> </div>
</template> </template>
<div v-if="!isMobileMode" class="pl-1 text-gray-500">/</div> <div v-if="!isMobileMode" class="pl-1.25 text-gray-500">/</div>
<template v-if="!(isMobileMode && activeView?.is_default)"> <template v-if="!(isMobileMode && activeView?.is_default)">
<LazyGeneralEmojiPicker v-if="isMobileMode" :emoji="activeView?.meta?.icon" readonly size="xsmall"> <LazyGeneralEmojiPicker v-if="isMobileMode" :emoji="activeView?.meta?.icon" readonly size="xsmall">

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

@ -161,7 +161,7 @@ export class ToolbarPage extends BasePage {
} }
async clickDownload(type: string, verificationFile = 'expectedData.txt') { async clickDownload(type: string, verificationFile = 'expectedData.txt') {
await this.get().locator(`.nc-toolbar-btn.nc-actions-menu-btn`).click(); await this.get().locator(`.nc-actions-menu-btn`).click();
const [download] = await Promise.all([ const [download] = await Promise.all([
// Start waiting for the download // Start waiting for the download
@ -195,7 +195,7 @@ export class ToolbarPage extends BasePage {
} }
async verifyDownloadDisabled() { async verifyDownloadDisabled() {
await this.get().locator(`.nc-toolbar-btn.nc-actions-menu-btn`).waitFor({ state: 'hidden' }); await this.get().locator(`nc-actions-menu-btn`).waitFor({ state: 'hidden' });
} }
async clickAddEditStack() { async clickAddEditStack() {

Loading…
Cancel
Save