feat: use separate redis for sidekiq

app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue

@@ -3,14 +3,14 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 
-import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import Modal from '../../../../components/Modal.vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 
 export default {
   name: 'AddCanned',
   components: {
-    WootSubmitButton,
+    NextButton,
     Modal,
     WootMessageEditor,
   },
@@ -118,18 +118,23 @@ export default {
           </div>
         </div>
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <WootSubmitButton
+          <NextButton
+            faded
+            slate
+            type="reset"
+            :label="$t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT')"
+            @click.prevent="onClose"
+          />
+          <NextButton
+            type="submit"
+            :label="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
             :disabled="
               v$.content.$invalid ||
               v$.shortCode.$invalid ||
               addCanned.showLoading
             "
-            :button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
-            :loading="addCanned.showLoading"
+            :is-loading="addCanned.showLoading"
           />
-          <button class="button clear" @click.prevent="onClose">
-            {{ $t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
-          </button>
         </div>
       </form>
     </div>

app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue

@@ -4,12 +4,12 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import Modal from '../../../../components/Modal.vue';
 
 export default {
   components: {
-    WootSubmitButton,
+    NextButton,
     Modal,
     WootMessageEditor,
   },
@@ -122,18 +122,23 @@ export default {
           </div>
         </div>
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <WootSubmitButton
+          <NextButton
+            faded
+            slate
+            type="reset"
+            :label="$t('CANNED_MGMT.EDIT.CANCEL_BUTTON_TEXT')"
+            @click.prevent="onClose"
+          />
+          <NextButton
+            type="submit"
+            :label="$t('CANNED_MGMT.EDIT.FORM.SUBMIT')"
             :disabled="
               v$.content.$invalid ||
               v$.shortCode.$invalid ||
               editCanned.showLoading
             "
-            :button-text="$t('CANNED_MGMT.EDIT.FORM.SUBMIT')"
-            :loading="editCanned.showLoading"
+            :is-loading="editCanned.showLoading"
           />
-          <button class="button clear" @click.prevent="onClose">
-            {{ $t('CANNED_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
-          </button>
         </div>
       </form>
     </div>

app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue

@@ -7,6 +7,8 @@ import { computed, onMounted, ref, defineOptions } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
 
+import Button from 'dashboard/components-next/button/Button.vue';
+
 defineOptions({
   name: 'CannedResponseSettings',
 });
@@ -124,13 +126,11 @@ const tableHeaders = computed(() => {
       feature-name="canned_responses"
     >
       <template #actions>
-        <woot-button
-          class="button nice rounded-md"
-          icon="add-circle"
+        <Button
+          icon="i-lucide-circle-plus"
+          :label="$t('CANNED_MGMT.HEADER_BTN_TXT')"
           @click="openAddPopup"
-        >
-          {{ $t('CANNED_MGMT.HEADER_BTN_TXT') }}
-        </woot-button>
+        />
       </template>
     </BaseSettingsHeader>
 
@@ -188,21 +188,20 @@ const tableHeaders = computed(() => {
               {{ cannedItem.content }}
             </td>
             <td class="py-4 flex justify-end gap-1">
-              <woot-button
+              <Button
                 v-tooltip.top="$t('CANNED_MGMT.EDIT.BUTTON_TEXT')"
-                variant="smooth"
-                size="tiny"
-                color-scheme="secondary"
-                icon="edit"
+                icon="i-lucide-pen"
+                slate
+                xs
+                faded
                 @click="openEditPopup(cannedItem)"
               />
-              <woot-button
+              <Button
                 v-tooltip.top="$t('CANNED_MGMT.DELETE.BUTTON_TEXT')"
-                variant="smooth"
-                color-scheme="alert"
-                size="tiny"
-                icon="dismiss-circle"
-                class-names="grey-btn"
+                icon="i-lucide-trash-2"
+                xs
+                ruby
+                faded
                 :is-loading="loading[cannedItem.id]"
                 @click="openDeletePopup(cannedItem, index)"
               />

app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue

@@ -5,6 +5,7 @@ import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import CustomRoleModal from './component/CustomRoleModal.vue';
 import CustomRoleTableBody from './component/CustomRoleTableBody.vue';
 import CustomRolePaywall from './component/CustomRolePaywall.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
@@ -134,14 +135,12 @@ const confirmDeletion = () => {
         feature-name="canned_responses"
       >
         <template #actions>
-          <woot-button
-            class="rounded-md button nice"
-            icon="add-circle"
+          <Button
+            icon="i-lucide-circle-plus"
+            :label="$t('CUSTOM_ROLE.HEADER_BTN_TXT')"
             :disabled="isBehindAPaywall"
             @click="openAddModal"
-          >
-            {{ $t('CUSTOM_ROLE.HEADER_BTN_TXT') }}
-          </woot-button>
+          />
         </template>
       </BaseSettingsHeader>
     </template>

app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue

@@ -12,7 +12,7 @@ import {
   CONVERSATION_PARTICIPATING_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
 
-import WootSubmitButton from 'dashboard/components/buttons/FormSubmitButton.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   mode: {
@@ -160,13 +160,12 @@ const isSubmitDisabled = computed(
     />
     <form class="flex flex-col w-full" @submit.prevent="handleCustomRole">
       <div class="w-full">
-        <label>
+        <label :class="{ error: v$.name.$error }">
           {{ $t('CUSTOM_ROLE.FORM.NAME.LABEL') }}
           <input
             ref="nameInput"
             v-model.trim="name"
             type="text"
-            :class="{ error: v$.name.$error }"
             :placeholder="$t('CUSTOM_ROLE.FORM.NAME.PLACEHOLDER')"
             @blur="v$.name.$touch"
           />
@@ -174,13 +173,12 @@ const isSubmitDisabled = computed(
       </div>
 
       <div class="w-full">
-        <label>
+        <label :class="{ error: v$.description.$error }">
           {{ $t('CUSTOM_ROLE.FORM.DESCRIPTION.LABEL') }}
 
           <textarea
             v-model="description"
             :rows="3"
-            :class="{ error: v$.description.$error }"
             :placeholder="$t('CUSTOM_ROLE.FORM.DESCRIPTION.PLACEHOLDER')"
             @blur="v$.description.$touch"
           />
@@ -213,14 +211,19 @@ const isSubmitDisabled = computed(
       </div>
 
       <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <WootSubmitButton
+        <Button
+          faded
+          slate
+          type="reset"
+          :label="$t('CUSTOM_ROLE.FORM.CANCEL_BUTTON_TEXT')"
+          @click.prevent="emit('close')"
+        />
+        <Button
+          type="submit"
+          :label="submitButtonText"
           :disabled="isSubmitDisabled"
-          :button-text="submitButtonText"
-          :loading="addCustomRole.showLoading"
+          :is-loading="addCustomRole.showLoading"
         />
-        <button class="button clear" @click.prevent="emit('close')">
-          {{ $t('CUSTOM_ROLE.FORM.CANCEL_BUTTON_TEXT') }}
-        </button>
       </div>
     </form>
   </div>

app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue

@@ -2,6 +2,8 @@
 import { useI18n } from 'vue-i18n';
 import { getI18nKey } from 'dashboard/routes/dashboard/settings/helper/settingsHelper';
 
+import Button from 'dashboard/components-next/button/Button.vue';
+
 defineProps({
   roles: {
     type: Array,
@@ -44,22 +46,20 @@ const getFormattedPermissions = role => {
         {{ getFormattedPermissions(customRole) }}
       </td>
       <td class="flex justify-end gap-1 py-4">
-        <woot-button
+        <Button
           v-tooltip.top="$t('CUSTOM_ROLE.EDIT.BUTTON_TEXT')"
-          variant="smooth"
-          size="tiny"
-          color-scheme="secondary"
-          class-names="grey-btn"
-          icon="edit"
+          icon="i-lucide-pen"
+          slate
+          xs
+          faded
           @click="emit('edit', customRole)"
         />
-        <woot-button
+        <Button
           v-tooltip.top="$t('CUSTOM_ROLE.DELETE.BUTTON_TEXT')"
-          variant="smooth"
-          color-scheme="alert"
-          size="tiny"
-          icon="dismiss-circle"
-          class-names="grey-btn"
+          icon="i-lucide-trash-2"
+          xs
+          ruby
+          faded
           :is-loading="loading[customRole.id]"
           @click="emit('delete', customRole)"
         />

app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue

@@ -3,11 +3,13 @@ import { mapGetters } from 'vuex';
 import { convertSecondsToTimeUnit } from '@chatwoot/utils';
 import validations from './validations';
 import SlaTimeInput from './SlaTimeInput.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
     SlaTimeInput,
+    NextButton,
   },
   props: {
     selectedResponse: {
@@ -205,19 +207,19 @@ export default {
       </div>
 
       <div class="flex items-center justify-end w-full gap-2 mt-8">
-        <woot-button
-          class="px-4 rounded-xl button clear outline-woot-200/50 outline"
+        <NextButton
+          faded
+          slate
+          type="reset"
+          :label="$t('SLA.FORM.CANCEL')"
           @click.prevent="onClose"
-        >
-          {{ $t('SLA.FORM.CANCEL') }}
-        </woot-button>
-        <woot-button
-          :is-disabled="isSubmitDisabled"
-          class="px-4 rounded-xl"
+        />
+        <NextButton
+          type="submit"
+          :label="submitLabel"
+          :disabled="isSubmitDisabled"
           :is-loading="uiFlags.isUpdating"
-        >
-          {{ submitLabel }}
-        </woot-button>
+        />
       </div>
     </form>
   </div>

app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue

@@ -1,4 +1,5 @@
 <script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
 import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
 
 defineProps({
@@ -19,14 +20,11 @@ defineEmits(['add']);
     feature-name="sla"
   >
     <template v-if="showActions" #actions>
-      <woot-button
-        color-scheme="primary"
-        icon="plus-sign"
-        class="rounded-md"
+      <Button
+        :label="$t('SLA.ADD_ACTION')"
+        icon="i-lucide-circle-plus"
         @click="$emit('add')"
-      >
-        {{ $t('SLA.ADD_ACTION') }}
-      </woot-button>
+      />
     </template>
   </BaseSettingsHeader>
 </template>

app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue

@@ -2,6 +2,7 @@
 import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
 import SLAResponseTime from './SLAResponseTime.vue';
 import SLABusinessHoursLabel from './SLABusinessHoursLabel.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 defineProps({
   slaName: {
@@ -56,13 +57,12 @@ const emit = defineEmits(['delete']);
       </div>
     </template>
     <template #actions>
-      <woot-button
+      <Button
         v-tooltip.top="$t('SLA.FORM.DELETE')"
-        variant="smooth"
-        color-scheme="alert"
-        size="tiny"
-        icon="delete"
-        class-names="grey-btn"
+        faded
+        ruby
+        xs
+        icon="i-lucide-trash-2"
         :is-loading="isLoading"
         @click="emit('delete')"
       />

config/initializers/sidekiq.rb

@@ -3,11 +3,11 @@ require Rails.root.join('lib/redis/config')
 schedule_file = 'config/schedule.yml'
 
 Sidekiq.configure_client do |config|
-  config.redis = Redis::Config.app
+  config.redis = Redis::Config.sidekiq
 end
 
 Sidekiq.configure_server do |config|
-  config.redis = Redis::Config.app
+  config.redis = Redis::Config.sidekiq
 
   # skip the default start stop logging
   if Rails.env.production?

lib/redis/config.rb

@@ -5,10 +5,18 @@ module Redis::Config
       config
     end
 
+    def sidekiq
+      sidekiq_config
+    end
+
     def config
       @config ||= sentinel? ? sentinel_config : base_config
     end
 
+    def sidekiq_config
+      @sidekiq_config ||= sentinel? ? sentinel_config : base_sidekiq_config
+    end
+
     def base_config
       {
         url: ENV.fetch('REDIS_URL', 'redis://127.0.0.1:6379'),
@@ -19,6 +27,16 @@ module Redis::Config
       }
     end
 
+    def base_sidekiq_config
+      {
+        url: ENV.fetch('SIDEKIQ_REDIS_URL', ENV.fetch('REDIS_URL', 'redis://127.0.0.1:6379')),
+        password: ENV.fetch('SIDEKIQ_REDIS_PASSWORD', ENV.fetch('REDIS_PASSWORD', nil)).presence,
+        ssl_params: { verify_mode: Chatwoot.redis_ssl_verify_mode },
+        reconnect_attempts: 2,
+        timeout: 1
+      }
+    end
+
     def sentinel?
       ENV.fetch('REDIS_SENTINELS', nil).presence
     end