Nc fix/UI misc changes (#9354)

* fix(nc-gui): barcode & rollup cell icon stroke issue

* fix(nc-gui): update single select icon

* fix(nc-gui): update `id:` => `FIELD ID:`

* fix(nc-gui): description icon alignment

* fix(nc-gui): field copy id hover effect

* fix(nc-gui): update mfe test case

* fix(nc-gui): update duration icon

* fix(nc-gui): udpate year icon

packages/nc-gui/assets/nc-icons/cell-duration.svg

@@ -1,7 +1,7 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.9503 20C15.8163 20 18.9503 16.866 18.9503 13C18.9503 9.13401 15.8163 6 11.9503 6C8.08432 6 4.95032 9.13401 4.95032 13C4.95032 16.866 8.08432 20 11.9503 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11.9503 10V13L13.4503 14.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 3L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M19.2929 7.12129C19.6834 6.73077 19.6834 6.0976 19.2929 5.70708C18.9024 5.31655 18.2692 5.31655 17.8787 5.70708L19.2929 7.12129ZM17.8787 5.70708L15.8787 7.70708L17.2929 9.12129L19.2929 7.12129L17.8787 5.70708Z" fill="currentColor"/>
-<path d="M13.5 3H10.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M12 21C16.1421 21 19.5 17.6421 19.5 13.5C19.5 9.35786 16.1421 6 12 6C7.85786 6 4.5 9.35786 4.5 13.5C4.5 17.6421 7.85786 21 12 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M11.9503 10V13.5L13.4503 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 3L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M19.2929 7.12129C19.6834 6.73077 19.6834 6.0976 19.2929 5.70708C18.9024 5.31655 18.2692 5.31655 17.8787 5.70708L19.2929 7.12129ZM17.8787 5.70708L15.8787 7.70708L17.2929 9.12129L19.2929 7.12129L17.8787 5.70708Z" fill="currentColor"/>
+  <path d="M13.5 3H10.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

packages/nc-gui/assets/nc-icons/cell-select.svg

@@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="3" y="3" width="18" height="18" rx="9" stroke="currentColor" stroke-width="2"/>
-<rect x="7" y="7" width="10" height="10" rx="5" fill="currentColor" stroke="currentColor" stroke-width="2"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <rect x="3" y="3" width="18" height="18" rx="9" stroke="currentColor" stroke-width="2"/>
+  <path d="M7.5 10.5L12 15L16.5 10.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

packages/nc-gui/assets/nc-icons/cell-year.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M16 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3 10H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 12.75L12 15.75M12 15.75V18.75M12 15.75L15 12.75" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>

packages/nc-gui/components/smartsheet/details/Fields.vue

@@ -1203,15 +1203,19 @@ watch(
                               <template #title>{{ $t('msg.clickToCopyFieldId') }}</template>
 
                               <div
-                                class="flex flex-row px-3 py-2 w-46 justify-between items-center group hover:bg-gray-100 cursor-pointer"
+                                class="flex flex-row gap-2 w-[calc(100%_-_12px)] p-2 mx-1.5 rounded-md justify-between items-center group hover:bg-gray-100 cursor-pointer"
                                 data-testid="nc-field-item-action-copy-id"
                                 @click="onClickCopyFieldUrl(field)"
                               >
-                                <div class="flex flex-row items-baseline gap-x-1 font-bold text-xs">
-                                  <div class="text-gray-600">{{ $t('labels.idColon') }}</div>
-                                  <div class="flex flex-row text-gray-600 text-xs" data-testid="nc-field-item-id">
-                                    {{ field.id }}
-                                  </div>
+                                <div
+                                  class="flex flex-row text-gray-500 text-xs items-baseline gap-x-1 font-bold"
+                                  data-testid="nc-field-item-id"
+                                >
+                                  {{
+                                    $t('labels.idColon', {
+                                      fieldId: field.id,
+                                    })
+                                  }}
                                 </div>
                                 <NcButton size="xsmall" type="secondary" class="!group-hover:bg-gray-100">
                                   <GeneralIcon v-if="isFieldIdCopied" icon="check" />
@@ -1384,15 +1388,19 @@ watch(
                             <template #title>{{ $t('msg.clickToCopyFieldId') }}</template>
 
                             <div
-                              class="flex flex-row px-3 py-2 w-46 justify-between items-center group hover:bg-gray-100 cursor-pointer"
+                              class="flex flex-row gap-2 w-[calc(100%_-_12px)] p-2 mx-1.5 rounded-md justify-between items-center group hover:bg-gray-100 cursor-pointer"
                               data-testid="nc-field-item-action-copy-id"
                               @click="onClickCopyFieldUrl(displayColumn)"
                             >
-                              <div class="flex flex-row items-baseline gap-x-1 font-bold text-xs">
-                                <div class="text-gray-600">{{ $t('labels.idColon') }}</div>
-                                <div class="flex flex-row text-gray-600 text-xs">
-                                  {{ displayColumn.id }}
-                                </div>
+                              <div
+                                class="flex flex-row text-gray-500 text-xs items-baseline gap-x-1 font-bold"
+                                data-testid="nc-field-item-id"
+                              >
+                                {{
+                                  $t('labels.idColon', {
+                                    fieldId: displayColumn.id,
+                                  })
+                                }}
                               </div>
                               <NcButton size="xsmall" type="secondary" class="!group-hover:bg-gray-100">
                                 <GeneralIcon v-if="isFieldIdCopied" icon="check" />

packages/nc-gui/components/smartsheet/header/Cell.vue

@@ -192,11 +192,11 @@ const onClick = (e: Event) => {
         }"
       />
     </div>
-    <NcTooltip v-if="column.description?.length && hideMenu">
+    <NcTooltip v-if="column.description?.length && hideMenu" class="flex">
       <template #title>
         {{ column.description }}
       </template>
-      <GeneralIcon icon="info" class="group-hover:opacity-100 !w-3.5 !h-3.5 !text-gray-500" />
+      <GeneralIcon icon="info" class="group-hover:opacity-100 !w-3.5 !h-3.5 !text-gray-500 flex-none" />
     </NcTooltip>
 
     <template v-if="!hideMenu">

packages/nc-gui/components/smartsheet/header/CellIcon.ts

@@ -25,7 +25,7 @@ const renderIcon = (column: ColumnType, abstractType: any) => {
   } else if (isEmail(column)) {
     return iconMap.cellEmail
   } else if (isYear(column, abstractType)) {
-    return iconMap.cellDate
+    return iconMap.cellYear
   } else if (isTime(column, abstractType)) {
     return iconMap.cellTime
   } else if (isRating(column)) {

packages/nc-gui/components/smartsheet/header/Menu.vue

@@ -429,11 +429,11 @@ const onClickCopyFieldUrl = async (field: ColumnType) => {
   >
     <div class="flex gap-0.5 items-center" @dblclick.stop>
       <div v-if="isExpandedForm" class="h-[1px]">&nbsp;</div>
-      <NcTooltip v-if="column.description?.length && !isExpandedForm">
+      <NcTooltip v-if="column.description?.length && !isExpandedForm" class="flex">
         <template #title>
           {{ column.description }}
         </template>
-        <GeneralIcon icon="info" class="group-hover:opacity-100 !w-3.5 !h-3.5 !text-gray-500" />
+        <GeneralIcon icon="info" class="group-hover:opacity-100 !w-3.5 !h-3.5 !text-gray-500 flex-none" />
       </NcTooltip>
 
       <NcTooltip class="flex items-center">
@@ -460,32 +460,35 @@ const onClickCopyFieldUrl = async (field: ColumnType) => {
           'min-w-[256px]': isExpandedForm,
         }"
       >
-        <NcMenuItem class="!h-9.5 nc-copy-field" @click="onClickCopyFieldUrl(column)">
-          <NcTooltip
-            :attrs="{
-              class: 'w-full',
-            }"
-            placement="top"
-          >
-            <template #title>{{ $t('msg.clickToCopyFieldId') }}</template>
+        <NcTooltip
+          :attrs="{
+            class: 'w-full',
+          }"
+          placement="top"
+        >
+          <template #title>{{ $t('msg.clickToCopyFieldId') }}</template>
 
-            <div
-              class="flex flex-row justify-between items-center w-full group hover:bg-gray-100 cursor-pointer"
-              data-testid="nc-field-item-action-copy-id"
-            >
-              <div class="flex flex-row text-gray-500 text-xs items-baseline gap-x-1 font-bold text-xs">
-                <div class="whitespace-nowrap">{{ $t('labels.idColon') }}</div>
-                <div class="flex flex-row truncate">
-                  {{ column.id }}
-                </div>
+          <div
+            class="nc-copy-field flex flex-row justify-between items-center w-[calc(100%_-_12px)] p-2 mx-1.5 rounded-md hover:bg-gray-100 cursor-pointer group"
+            data-testid="nc-field-item-action-copy-id"
+            @click.stop="onClickCopyFieldUrl(column)"
+          >
+            <div class="w-full flex flex-row justify-between items-center gap-x-2 font-bold text-xs">
+              <div class="flex flex-row text-gray-500 text-xs items-baseline gap-x-1 font-bold">
+                {{
+                  $t('labels.idColon', {
+                    fieldId: column.id,
+                  })
+                }}
               </div>
-              <NcButton size="xsmall" type="text" class="!group-hover:bg-gray-100">
-                <GeneralIcon v-if="isFieldIdCopied" icon="check" />
-                <GeneralIcon v-else icon="copy" />
+              <NcButton size="xsmall" type="secondary" class="!group-hover:bg-gray-100">
+                <GeneralIcon v-if="isFieldIdCopied" icon="check" class="h-4 w-4" />
+                <GeneralIcon v-else icon="copy" class="h-4 w-4" />
               </NcButton>
             </div>
-          </NcTooltip>
-        </NcMenuItem>
+          </div>
+        </NcTooltip>
+
         <a-divider class="!my-0" />
         <GeneralSourceRestrictionTooltip message="Field properties cannot be edited." :enabled="!isColumnEditAllowed">
           <NcMenuItem

packages/nc-gui/lang/en.json

@@ -758,7 +758,7 @@
     "icon": "Icon",
     "max": "Max",
     "enableRichText": "Enable rich text",
-    "idColon": "Id:",
+    "idColon": "FIELD ID: {fieldId}",
     "copiedRecordURL": "Copied Record URL",
     "copyRecordURL": "Copy Record URL",
     "duplicateRecord": "Duplicate record",

packages/nc-gui/utils/columnUtils.ts

@@ -56,7 +56,7 @@ const uiTypes = [
   },
   {
     name: UITypes.Year,
-    icon: iconMap.cellDate,
+    icon: iconMap.cellYear,
   },
   {
     name: UITypes.Time,

packages/nc-gui/utils/iconUtils.ts

@@ -156,6 +156,7 @@ import NcWorkspace from '~icons/nc-icons/workspace'
 import NcCellBarcode from '~icons/nc-icons/cell-barcode'
 import NcCellCheckbox from '~icons/nc-icons/cell-checkbox'
 import NcCellDate from '~icons/nc-icons/cell-date'
+import NcCellYear from '~icons/nc-icons/cell-year'
 import NcCellEmail from '~icons/nc-icons/cell-email'
 import NcCellFormula from '~icons/nc-icons/cell-formula'
 import NcCellCurrency from '~icons/nc-icons/cell-currency'
@@ -718,9 +719,10 @@ export const iconMap = {
   controlPanel: NcControlPanel,
   home: NcHome,
   home1: NcHome1,
-  cellBarcode: NcCellBarcode,
+  cellBarcode: h(NcCellBarcode, { stroke: 'transparent' }),
   cellCheckbox: NcCellCheckbox,
   cellDate: NcCellDate,
+  cellYear: NcCellYear,
   cellEmail: NcCellEmail,
   cellFormula: NcCellFormula,
   cellCurrency: NcCellCurrency,
@@ -739,7 +741,7 @@ export const iconMap = {
   cellPhone: NcCellPhone,
   cellQrCode: NcCellQrCode,
   cellRating: NcCellRating,
-  cellRollup: NcCellRollup,
+  cellRollup: h(NcCellRollup, { stroke: 'transparent' }),
   cellSingleSelect: NcCellSingleSelect,
   cellText: NcCellText,
   cellTime: NcCellTime,

tests/playwright/pages/Dashboard/Details/FieldsPage.ts

@@ -356,6 +356,7 @@ export class FieldsPage extends BasePage {
     const fieldId = await fieldActionDropdown.getByTestId('nc-field-item-id').textContent();
     await field.getByTestId('nc-field-item-action-button').click();
     await fieldActionDropdown.waitFor({ state: 'hidden' });
-    return fieldId;
+
+    return fieldId.split(':')[1]?.trim() || '';
   }
 }