chore: Upgrade to Rails 7 (#6719)

fixes: #6736

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-on-clickaway="onCloseAgentList" class="bulk-action__agents">
-    <div class="triangle" :style="cssVars">
+    <div class="triangle">
       <svg height="12" viewBox="0 0 24 12" width="24">
         <path
           d="M20 12l-8-8-12 12"
@@ -104,14 +104,13 @@ import { mapGetters } from 'vuex';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import Spinner from 'shared/components/Spinner';
 import { mixin as clickaway } from 'vue-clickaway';
-import bulkActionsMixin from 'dashboard/mixins/bulkActionsMixin.js';
 
 export default {
   components: {
     Thumbnail,
     Spinner,
   },
-  mixins: [clickaway, bulkActionsMixin],
+  mixins: [clickaway],
   props: {
     selectedInboxes: {
       type: Array,
@@ -240,7 +239,7 @@ export default {
     display: block;
     z-index: var(--z-index-one);
     position: absolute;
-    top: calc(var(--space-slab) * -1);
+    top: var(--space-minus-slab);
     right: var(--triangle-position);
     text-align: left;
   }

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue

@@ -58,7 +58,7 @@
       <transition name="popover-animation">
         <label-actions
           v-if="showLabelActions"
-          triangle-position="8.5"
+          class="label-actions-box"
           @assign="assignLabels"
           @close="showLabelActions = false"
         />
@@ -66,12 +66,12 @@
       <transition name="popover-animation">
         <update-actions
           v-if="showUpdateActions"
+          class="update-actions-box"
           :selected-inboxes="selectedInboxes"
           :conversation-count="conversations.length"
           :show-resolve="!showResolvedAction"
           :show-reopen="!showOpenAction"
           :show-snooze="!showSnoozedAction"
-          triangle-position="5.6"
           @update="updateConversations"
           @close="showUpdateActions = false"
         />
@@ -79,9 +79,9 @@
       <transition name="popover-animation">
         <agent-selector
           v-if="showAgentsList"
+          class="agent-actions-box"
           :selected-inboxes="selectedInboxes"
           :conversation-count="conversations.length"
-          triangle-position="2.8"
           @select="submit"
           @close="showAgentsList = false"
         />
@@ -89,7 +89,7 @@
       <transition name="popover-animation">
         <team-actions
           v-if="showTeamsList"
-          triangle-position="0.2"
+          class="team-actions-box"
           @assign-team="assignTeam"
           @close="showTeamsList = false"
         />
@@ -247,4 +247,17 @@ export default {
   opacity: 0;
   transform: scale(0.95);
 }
+
+.label-actions-box {
+  --triangle-position: 8.5rem;
+}
+.update-actions-box {
+  --triangle-position: 5.6rem;
+}
+.agent-actions-box {
+  --triangle-position: 2.8rem;
+}
+.team-actions-box {
+  --triangle-position: 0.2rem;
+}
 </style>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-on-clickaway="onClose" class="labels-container">
-    <div class="triangle" :style="cssVars">
+    <div class="triangle">
       <svg height="12" viewBox="0 0 24 12" width="24">
         <path
           d="M20 12l-8-8-12 12"
@@ -75,10 +75,9 @@
 <script>
 import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
-import bulkActionsMixin from 'dashboard/mixins/bulkActionsMixin.js';
 
 export default {
-  mixins: [clickaway, bulkActionsMixin],
+  mixins: [clickaway],
   data() {
     return {
       query: '',
@@ -207,7 +206,7 @@ export default {
     position: absolute;
     right: var(--triangle-position);
     text-align: left;
-    top: calc(var(--space-slab) * -1);
+    top: var(--space-minus-slab);
     z-index: var(--z-index-one);
   }
 }

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-on-clickaway="onClose" class="bulk-action__teams">
-    <div class="triangle" :style="cssVars">
+    <div class="triangle">
       <svg height="12" viewBox="0 0 24 12" width="24">
         <path
           d="M20 12l-8-8-12 12"
@@ -59,9 +59,8 @@
 <script>
 import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
-import bulkActionsMixin from 'dashboard/mixins/bulkActionsMixin.js';
 export default {
-  mixins: [clickaway, bulkActionsMixin],
+  mixins: [clickaway],
   data() {
     return {
       query: '',
@@ -141,7 +140,7 @@ export default {
     display: block;
     z-index: var(--z-index-one);
     position: absolute;
-    top: calc(var(--space-slab) * -1);
+    top: var(--space-minus-slab);
     right: var(--triangle-position);
     text-align: left;
   }

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-on-clickaway="onClose" class="actions-container">
-    <div class="triangle" :style="cssVars">
+    <div class="triangle">
       <svg height="12" viewBox="0 0 24 12" width="24">
         <path
           d="M20 12l-8-8-12 12"
@@ -45,14 +45,13 @@
 import { mixin as clickaway } from 'vue-clickaway';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-import bulkActionsMixin from 'dashboard/mixins/bulkActionsMixin.js';
 
 export default {
   components: {
     WootDropdownItem,
     WootDropdownMenu,
   },
-  mixins: [clickaway, bulkActionsMixin],
+  mixins: [clickaway],
   props: {
     selectedInboxes: {
       type: Array,
@@ -156,7 +155,7 @@ export default {
     position: absolute;
     right: var(--triangle-position);
     text-align: left;
-    top: calc(var(--space-slab) * -1);
+    top: var(--space-minus-slab);
     z-index: var(--z-index-one);
   }
 }