From 205d42e978f38362decd75e4d661f090bfdadcbd Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Date: Thu, 16 Jun 2022 11:02:32 +0530
Subject: [PATCH] fix: Bulk actions agent loading (#4874)

---
 .../conversationBulkActions/AgentSelector.vue          | 10 +++++++---
 .../conversationBulkActions/LabelActions.vue           | 10 +++++-----
 app/javascript/shared/assets/stylesheets/spacing.scss  |  3 ++-
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
index acf23d716..f7777e357 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
@@ -22,7 +22,10 @@
       />
     </div>
     <div class="container">
-      <div v-if="uiFlags.isUpdating" class="agent__list-loading">
+      <div
+        v-if="assignableAgentsUiFlags.isFetching"
+        class="agent__list-loading"
+      >
         <spinner />
         <p>{{ $t('BULK_ACTION.AGENT_LIST_LOADING') }}</p>
       </div>
@@ -171,7 +174,7 @@ export default {
   transform-origin: top right;
   width: auto;
   z-index: var(--z-index-twenty);
-
+  min-width: var(--space-giga);
   .header {
     padding: var(--space-one);
 
@@ -182,7 +185,7 @@ export default {
   }
 
   .container {
-    max-height: 24rem;
+    max-height: var(--space-giga);
     overflow-y: auto;
     .agent__list-container {
       height: 100%;
@@ -264,5 +267,6 @@ ul {
   align-items: center;
   justify-content: center;
   flex-direction: column;
+  padding: var(--space-two);
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
index eb93586e3..70f74199b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
@@ -110,7 +110,7 @@ export default {
 .labels-list {
   display: flex;
   flex-direction: column;
-  max-height: 24rem;
+  max-height: var(--space-giga);
   min-height: auto;
 
   .labels-list__header {
@@ -157,8 +157,8 @@ export default {
   border-radius: var(--border-radius-large);
   border: 1px solid var(--s-50);
   box-shadow: var(--shadow-dropdown-pane);
-  max-width: 24rem;
-  min-width: 24rem;
+  max-width: var(--space-giga);
+  min-width: var(--space-giga);
   position: absolute;
   right: 4.5rem;
   top: var(--space-larger);
@@ -176,7 +176,7 @@ export default {
   }
 
   .container {
-    max-height: 24rem;
+    max-height: var(--space-giga);
     overflow-y: auto;
 
     .label__list-container {
@@ -204,7 +204,7 @@ export default {
   .triangle {
     display: block;
     position: absolute;
-    right: 2rem;
+    right: var(--space-two);
     text-align: left;
     top: calc(var(--space-slab) * -1);
     z-index: var(--z-index-one);
diff --git a/app/javascript/shared/assets/stylesheets/spacing.scss b/app/javascript/shared/assets/stylesheets/spacing.scss
index 9ce5fecb0..c556c65b8 100644
--- a/app/javascript/shared/assets/stylesheets/spacing.scss
+++ b/app/javascript/shared/assets/stylesheets/spacing.scss
@@ -15,7 +15,8 @@
   --space-larger: 4.8rem;
   --space-jumbo: 6.4rem;
   --space-mega: 10rem;
-
+  --space-giga: 24rem;
+  
   --space-minus-micro: -0.2rem;
   --space-minus-smaller: -0.4rem;
   --space-minus-small: -0.8rem;