From f5d409b2b7b2a6dc64d59cd5e40b1b98fcdbcb25 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 7 Feb 2024 20:21:19 +0000
Subject: [PATCH] fix(nc-gui): Wrong chevron Icon in grouping UI

---
 .../nc-gui/assets/nc-icons/chevron-down.svg    |  3 +++
 packages/nc-gui/components/cell/RichText.vue   |  5 +++--
 packages/nc-gui/components/cell/TextArea.vue   |  2 +-
 .../components/smartsheet/grid/GroupBy.vue     | 18 ++++--------------
 packages/nc-gui/utils/iconUtils.ts             |  2 ++
 5 files changed, 13 insertions(+), 17 deletions(-)
 create mode 100644 packages/nc-gui/assets/nc-icons/chevron-down.svg

diff --git a/packages/nc-gui/assets/nc-icons/chevron-down.svg b/packages/nc-gui/assets/nc-icons/chevron-down.svg
new file mode 100644
index 0000000000..0b0d8c8e04
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/chevron-down.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue
index 7a66bd44cd..955d9296dc 100644
--- a/packages/nc-gui/components/cell/RichText.vue
+++ b/packages/nc-gui/components/cell/RichText.vue
@@ -8,7 +8,7 @@ import { generateJSON } from '@tiptap/html'
 import Underline from '@tiptap/extension-underline'
 import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item'
 import { Link } from '@/helpers/dbTiptapExtensions/links'
-import { IsExpandedFormOpenInj, ReadonlyInj, RowHeightInj, IsFormInj } from '#imports'
+import { IsExpandedFormOpenInj, IsFormInj, ReadonlyInj, RowHeightInj } from '#imports'
 
 const props = defineProps<{
   value?: string | null
@@ -201,7 +201,8 @@ watch(editorDom, () => {
         'mt-2.5 flex-grow': fullMode,
         'nc-scrollbar-md': !fullMode || (!fullMode && isExpandedFormOpen),
         'flex-grow': isExpandedFormOpen,
-        [`!overflow-hidden children:line-clamp-${rowHeight}`]: !fullMode && readOnly && rowHeight && !isExpandedFormOpen && !isForm,
+        [`!overflow-hidden children:line-clamp-${rowHeight}`]:
+          !fullMode && readOnly && rowHeight && !isExpandedFormOpen && !isForm,
       }"
     />
   </div>
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 8d8f2dc091..606fe8c549 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -271,7 +271,7 @@ watch(inputWrapperRef, () => {
         v-if="!isVisible"
         placement="bottom"
         class="!absolute right-0 hidden nc-text-area-expand-btn group-hover:block z-3"
-        :class=" isExpandedFormOpen || isForm ? 'top-1' : 'bottom-1'"
+        :class="isExpandedFormOpen || isForm ? 'top-1' : 'bottom-1'"
       >
         <template #title>{{ $t('title.expand') }}</template>
         <NcButton type="secondary" size="xsmall" data-testid="attachment-cell-file-picker-button" @click.stop="onExpand">
diff --git a/packages/nc-gui/components/smartsheet/grid/GroupBy.vue b/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
index 0e30a42b1a..32ffaab35e 100644
--- a/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
+++ b/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
@@ -241,20 +241,10 @@ const shouldRenderCell = (column) =>
                 <div class="flex !sticky left-[15px]">
                   <div class="flex items-center">
                     <span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow">
-                      <svg
-                        focusable="false"
-                        data-icon="right"
-                        width="1em"
-                        height="1em"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        viewBox="64 64 896 896"
-                        :style="`${activeGroups.includes(i) ? 'transform: rotate(90deg)' : ''}`"
-                      >
-                        <path
-                          d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                        ></path>
-                      </svg>
+                      <GeneralIcon
+                        icon="chevronDown"
+                        :style="`${activeGroups.includes(i) ? 'transform: rotate(360deg)' : 'transform: rotate(270deg)'}`"
+                      ></GeneralIcon>
                     </span>
                   </div>
                   <div class="flex items-center">
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 8b364b5b1f..85020c37ed 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -111,6 +111,7 @@ import NcNotification from '~icons/material-symbols/notifications-outline'
 import NcCommentHere from '~icons/nc-icons/comment-here'
 import NcAddDataSource from '~icons/nc-icons/add-data-source'
 import NcDatabaseIcon from '~icons/nc-icons/database'
+import NcChevronDown from '~icons/nc-icons/chevron-down'
 
 // keep it for reference
 // todo: remove it after all icons are migrated
@@ -462,6 +463,7 @@ export const iconMap = {
   commentHere: NcCommentHere,
   fileImage: FileImageIcon,
   paste: h('span', { class: 'material-symbols' }, 'content_paste'),
+  chevronDown: NcChevronDown,
 }
 
 export const getMdiIcon = (type: string): any => {