Merge branch 'develop' into feat/linear-backend

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -21,6 +21,11 @@
       </woot-tabs>
     </setting-intro-banner>
 
+    <inbox-reconnection-required
+      v-if="isReconnectionRequired"
+      class="mx-8 mt-5"
+    />
+
     <div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
       <settings-section
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"
@@ -287,7 +292,7 @@
         <label v-if="isAWebWidgetInbox">
           {{ $t('INBOX_MGMT.FEATURES.LABEL') }}
         </label>
-        <div v-if="isAWebWidgetInbox" class="pt-2 pb-4 flex gap-2">
+        <div v-if="isAWebWidgetInbox" class="flex gap-2 pt-2 pb-4">
           <input
             v-model="selectedFeatureFlags"
             type="checkbox"
@@ -298,7 +303,7 @@
             {{ $t('INBOX_MGMT.FEATURES.DISPLAY_FILE_PICKER') }}
           </label>
         </div>
-        <div v-if="isAWebWidgetInbox" class="pb-4 flex gap-2">
+        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
           <input
             v-model="selectedFeatureFlags"
             type="checkbox"
@@ -309,7 +314,7 @@
             {{ $t('INBOX_MGMT.FEATURES.DISPLAY_EMOJI_PICKER') }}
           </label>
         </div>
-        <div v-if="isAWebWidgetInbox" class="pb-4 flex gap-2">
+        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
           <input
             v-model="selectedFeatureFlags"
             type="checkbox"
@@ -320,7 +325,7 @@
             {{ $t('INBOX_MGMT.FEATURES.ALLOW_END_CONVERSATION') }}
           </label>
         </div>
-        <div v-if="isAWebWidgetInbox" class="pb-4 flex gap-2">
+        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
           <input
             v-model="selectedFeatureFlags"
             type="checkbox"
@@ -435,6 +440,7 @@ import WeeklyAvailability from './components/WeeklyAvailability.vue';
 import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
 import ConfigurationPage from './settingsPage/ConfigurationPage.vue';
 import CollaboratorsPage from './settingsPage/CollaboratorsPage.vue';
+import InboxReconnectionRequired from './components/InboxReconnectionRequired';
 import WidgetBuilder from './WidgetBuilder.vue';
 import BotConfiguration from './components/BotConfiguration.vue';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
@@ -453,6 +459,7 @@ export default {
     WeeklyAvailability,
     WidgetBuilder,
     SenderNameExamplePreview,
+    InboxReconnectionRequired,
   },
   mixins: [alertMixin, configMixin, inboxMixin],
   data() {
@@ -614,6 +621,9 @@ export default {
         return true;
       return false;
     },
+    isReconnectionRequired() {
+      return false;
+    },
   },
   watch: {
     $route(to) {

app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue

@@ -0,0 +1,19 @@
+<script setup>
+defineProps({
+  actionUrl: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="flex items-center gap-2 px-4 py-3 text-sm text-white bg-red-500 rounded-md dark:bg-red-800/30 dark:text-red-50 min-h-10"
+  >
+    <fluent-icon icon="error-circle" class="text-white dark:text-red-50" />
+    <slot>
+      <span v-html="$t('INBOX_MGMT.RECONNECTION_REQUIRED', { actionUrl })" />
+    </slot>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue

@@ -1,6 +1,6 @@
 <script setup>
-import FilterButton from './FilterButton.vue';
-import FilterListDropdown from './FilterListDropdown.vue';
+import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
+import FilterListDropdown from 'dashboard/components/ui/Dropdown/DropdownList.vue';
 
 const props = defineProps({
   name: {

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue

@@ -1,8 +1,8 @@
 <script setup>
-import FilterButton from './FilterButton.vue';
-import FilterListDropdown from './FilterListDropdown.vue';
-import FilterListItemButton from './FilterListItemButton.vue';
-import FilterDropdownEmptyState from './FilterDropdownEmptyState.vue';
+import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
+import FilterListDropdown from 'dashboard/components/ui/Dropdown/DropdownList.vue';
+import FilterListItemButton from 'dashboard/components/ui/Dropdown/DropdownListItemButton.vue';
+import FilterDropdownEmptyState from 'dashboard/components/ui/Dropdown/DropdownEmptyState.vue';
 
 import { ref } from 'vue';
 

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterButton.vue

@@ -1,47 +0,0 @@
-<script setup>
-defineProps({
-  buttonText: {
-    type: String,
-    default: '',
-  },
-  rightIcon: {
-    type: String,
-    default: '',
-  },
-  leftIcon: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-<template>
-  <button
-    class="inline-flex relative items-center p-1.5 w-fit h-8 gap-1.5 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
-    @click="$emit('click')"
-  >
-    <slot name="leftIcon">
-      <fluent-icon
-        v-if="leftIcon"
-        :icon="leftIcon"
-        size="18"
-        class="flex-shrink-0 text-slate-900 dark:text-slate-50"
-      />
-    </slot>
-    <span
-      v-if="buttonText"
-      class="text-sm font-medium truncate text-slate-900 dark:text-slate-50"
-    >
-      {{ buttonText }}
-    </span>
-    <slot name="rightIcon">
-      <fluent-icon
-        v-if="rightIcon"
-        :icon="rightIcon"
-        size="18"
-        class="flex-shrink-0 text-slate-900 dark:text-slate-50"
-      />
-    </slot>
-
-    <slot name="dropdown" />
-  </button>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterDropdownEmptyState.vue

@@ -1,15 +0,0 @@
-<script setup>
-defineProps({
-  message: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-<template>
-  <div
-    class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
-  >
-    {{ message }}
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterDropdownSearch.vue

@@ -1,47 +0,0 @@
-<script setup>
-defineProps({
-  inputValue: {
-    type: String,
-    default: '',
-  },
-  inputPlaceholder: {
-    type: String,
-    default: '',
-  },
-  showClearFilter: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
-<template>
-  <div
-    class="flex items-center justify-between h-10 min-h-[40px] sticky top-0 bg-white z-10 dark:bg-slate-800 gap-2 px-3 border-b rounded-t-xl border-slate-50 dark:border-slate-700"
-  >
-    <div class="flex items-center w-full gap-2">
-      <fluent-icon
-        icon="search"
-        size="18"
-        class="text-slate-400 dark:text-slate-400"
-      />
-      <input
-        type="text"
-        class="w-full mb-0 text-sm bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-75 reset-base"
-        :placeholder="inputPlaceholder"
-        :value="inputValue"
-        @input="$emit('input', $event.target.value)"
-      />
-    </div>
-    <!-- Clear filter button -->
-    <woot-button
-      v-if="!inputValue && showClearFilter"
-      size="small"
-      variant="clear"
-      color-scheme="primary"
-      class="!px-1 !py-1.5"
-      @click="$emit('click')"
-    >
-      {{ $t('REPORT.FILTER_ACTIONS.CLEAR_FILTER') }}
-    </woot-button>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListDropdown.vue

@@ -1,80 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { picoSearch } from '@scmmishra/pico-search';
-import FilterListItemButton from './FilterListItemButton.vue';
-import FilterDropdownSearch from './FilterDropdownSearch.vue';
-import FilterDropdownEmptyState from './FilterDropdownEmptyState.vue';
-
-const props = defineProps({
-  listItems: {
-    type: Array,
-    default: () => [],
-  },
-  enableSearch: {
-    type: Boolean,
-    default: false,
-  },
-  inputPlaceholder: {
-    type: String,
-    default: '',
-  },
-  activeFilterId: {
-    type: Number,
-    default: null,
-  },
-  showClearFilter: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const searchTerm = ref('');
-
-const onSearch = value => {
-  searchTerm.value = value;
-};
-
-const filteredListItems = computed(() => {
-  if (!searchTerm.value) return props.listItems;
-  return picoSearch(props.listItems, searchTerm.value, ['name']);
-});
-
-const isDropdownListEmpty = computed(() => {
-  return !filteredListItems.value.length;
-});
-
-const isFilterActive = id => {
-  if (!props.activeFilterId) return false;
-  return id === props.activeFilterId;
-};
-</script>
-<template>
-  <div
-    class="absolute z-20 w-40 bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-50 dark:border-slate-700/50 max-h-[400px]"
-    @click.stop
-  >
-    <slot name="search">
-      <filter-dropdown-search
-        v-if="enableSearch && listItems.length"
-        :input-value="searchTerm"
-        :input-placeholder="inputPlaceholder"
-        :show-clear-filter="showClearFilter"
-        @input="onSearch"
-        @click="$emit('removeFilter')"
-      />
-    </slot>
-    <slot name="listItem">
-      <filter-dropdown-empty-state
-        v-if="isDropdownListEmpty"
-        :message="$t('REPORT.FILTER_ACTIONS.EMPTY_LIST')"
-      />
-      <filter-list-item-button
-        v-for="item in filteredListItems"
-        :key="item.id"
-        :is-active="isFilterActive(item.id)"
-        :button-text="item.name"
-        @click="$emit('click', item)"
-      />
-    </slot>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListItemButton.vue

@@ -1,36 +0,0 @@
-<script setup>
-defineProps({
-  buttonText: {
-    type: String,
-    default: '',
-  },
-  isActive: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
-<template>
-  <button
-    class="relative inline-flex items-center justify-start w-full p-3 border-0 rounded-none first:rounded-t-xl last:rounded-b-xl h-11 hover:bg-slate-50 dark:hover:bg-slate-700 active:bg-slate-75 dark:active:bg-slate-800"
-    @click.stop="$emit('click')"
-    @mouseenter="$emit('mouseenter')"
-    @mouseleave="$emit('mouseleave')"
-    @focus="$emit('focus')"
-  >
-    <div class="inline-flex items-center gap-3 overflow-hidden">
-      <span
-        class="text-sm font-medium truncate text-slate-900 dark:text-slate-50"
-      >
-        {{ buttonText }}
-      </span>
-      <fluent-icon
-        v-if="isActive"
-        icon="checkmark"
-        size="18"
-        class="flex-shrink-0 text-slate-900 dark:text-slate-50"
-      />
-    </div>
-    <slot name="dropdown" />
-  </button>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue

@@ -63,7 +63,7 @@ import {
   getActiveFilter,
   getFilterType,
 } from './helpers/SLAFilterHelpers';
-import FilterButton from '../Filters/v3/FilterButton.vue';
+import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
 import ActiveFilterChip from '../Filters/v3/ActiveFilterChip.vue';
 import AddFilterChip from '../Filters/v3/AddFilterChip.vue';