Merge pull request #774 from MifdhaM/lan-1050-comment-warning-change

LAN 1050 fixes - In comment component oxd alert component was used in…
orangehrm · Apr 9, 2024 · beffa8d · beffa8d
2 parents c240cf0 + 38968e6
commit beffa8d
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 34 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,3 +1,5 @@
+2024-04-09 - 2b3e650eecb38e9f3ea731e84f167d7c950a641a - Comments/Comment.vue - Hardcoded delete warning is replaced by oxd-alert warning
+
 2024-03-21 - 8319dbeeb35e6aa50fb955ea075ebea5ba30bf43 - ListTable/ListTable.vue - Table header truncate improvments
 
 2024-03-18 - 0ed25f1c3db3b364dc31874362c6455af008be80 - directives/focus-first-element - Focus first directive prevent scroll on focus

diff --git a/components/src/core/components/Comments/Comment.vue b/components/src/core/components/Comments/Comment.vue
@@ -144,34 +144,15 @@
         </div>
       </div>
     </div>
-    <div
-      v-if="deleteMode"
-      ref="commentDeleteWrapper"
-      class="
-        oxd-comment-inline-delete
-        d-flex
-        align-center
-        justify-between
-        oxd-mt-5 oxd-p-5
-      "
-      :class="{stacked: stackConfirmationElements}"
-    >
-      <div class="comment-inline-delete-content-wrapper d-flex align-center">
-        <oxd-text type="subtitle-2">
-          {{ commentDeleteConfirmationMsg }}
-        </oxd-text>
-      </div>
-      <div
-        class="
-          comment-inline-delete-actions-wrapper
-          d-flex
-          align-center
-          oxd-ml-3
-        "
+    <div v-if="deleteMode" ref="commentDeleteWrapper">
+      <oxd-alert
+        :message="$vt(commentDeleteConfirmationMsg)"
+        :type="'error'"
+        :show="deleteMode"
+        :compact="stackConfirmationElements"
       >
         <oxd-button
           :label="$vt(cancelDeleteButtonData.label)"
-          :iconName="cancelDeleteButtonData.iconName"
           :iconSize="cancelDeleteButtonData.size"
           :displayType="cancelDeleteButtonData.displayType"
           :style="cancelDeleteButtonData.style"
@@ -181,7 +162,6 @@
         />
         <oxd-button
           :label="$vt(confirmDeleteButtonData.label)"
-          :iconName="confirmDeleteButtonData.iconName"
           :iconSize="confirmDeleteButtonData.size"
           :displayType="confirmDeleteButtonData.displayType"
           :style="confirmDeleteButtonData.style"
@@ -190,7 +170,7 @@
           class="oxd-ml-3"
           @click="confirmDeleteButtonData.click"
         />
-      </div>
+      </oxd-alert>
     </div>
   </div>
 </template>
@@ -205,6 +185,7 @@ import ProfilePic from '@orangehrm/oxd/core/components/ProfilePic/ProfilePic.vue
 import CommentBox from '@orangehrm/oxd/core/components/Comments/CommentBox.vue';
 import IconButton from '@orangehrm/oxd/core/components/Button/Icon.vue';
 import oxdButton from '@orangehrm/oxd/core/components/Button/Button.vue';
+import oxdAlert from '@orangehrm/oxd/core/components/Alert/Alert.vue';
 import useTranslate from '../../../composables/useTranslate';
 
 export default defineComponent({
@@ -220,6 +201,7 @@ export default defineComponent({
     'oxd-comment-box': CommentBox,
     'oxd-text': oxdText,
     'oxd-button': oxdButton,
+    'oxd-alert': oxdAlert,
   },
 
   props: {
@@ -420,7 +402,6 @@ export default defineComponent({
     const confirmDeleteButtonData = computed(() => {
       const initialObject = {
         label: 'Yes, Delete',
-        iconName: 'oxd-trash',
         size: 'medium',
         displayType: 'danger',
         style: null,
@@ -438,8 +419,7 @@ export default defineComponent({
 
     const cancelDeleteButtonData = computed(() => {
       const initialObject = {
-        label: 'Cancel',
-        iconName: null,
+        label: 'No, Cancel',
         size: 'medium',
         displayType: 'ghost-danger',
         style: null,

diff --git a/components/src/core/components/Comments/__tests__/comment.spec.ts b/components/src/core/components/Comments/__tests__/comment.spec.ts
@@ -28,14 +28,14 @@ describe('Comment.vue', () => {
         enableAvatar: false,
         okButton: {
           label: 'Yes, Delete',
-          iconName: 'oxd-trash',
+          iconName: null,
           size: 'medium',
           displayType: 'warn',
           style: null,
           class: null,
         },
         cancelButton: {
-          label: 'Cancel',
+          label: 'No, Cancel',
           iconName: null,
           size: 'medium',
           displayType: 'ghost-warn',
@@ -119,6 +119,24 @@ describe('Comment.vue', () => {
     expect(wrapper.find('.oxd-comment-group-name-chip').exists()).toBeTruthy();
   });
 
+  it('With error alert type', async () => {
+    const wrapper = mount(Comment, {
+      props: {
+        comment: comment,
+        allowToEdit: false,
+        allowToDelete: true,
+        enableAvatar: false,
+        stackConfirmationElements: false,
+      },
+    });
+    await wrapper.vm.$nextTick();
+    const deleteButton = wrapper.find('[data-test="deleteIcon"]');
+    deleteButton.trigger('click');
+    await wrapper.vm.$nextTick();
+    const errorAlert = wrapper.find('.oxd-alert-content--error');
+    expect(errorAlert.exists()).toBeTruthy();
+  });
+
   it('Delete confimation message and action buttons are stacked', async () => {
     const wrapper = mount(Comment, {
       props: {
@@ -133,8 +151,7 @@ describe('Comment.vue', () => {
     const deleteButton = wrapper.find('[data-test="deleteIcon"]');
     deleteButton.trigger('click');
     await wrapper.vm.$nextTick();
-    const inlineDeleteBar = wrapper.find('.oxd-comment-inline-delete');
+    const inlineDeleteBar = wrapper.find('.oxd-alert-content--compact');
     expect(inlineDeleteBar.exists()).toBeTruthy();
-    expect(inlineDeleteBar.classes()).toContain('stacked');
   });
 });