[6820] Pinia Task 4 - ux-drawers

frontend/src/App.vue

@@ -62,7 +62,8 @@
 </template>
 
 <script>
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapActions, mapState as mapVuexState } from 'vuex'
 
 import Loading from './components/Loading.vue'
 import Offline from './components/Offline.vue'
@@ -77,6 +78,8 @@ import PasswordExpired from './pages/PasswordExpired.vue'
 import TermsAndConditions from './pages/TermsAndConditions.vue'
 import UnverifiedEmail from './pages/UnverifiedEmail.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default {
     name: 'App',
     components: {
@@ -94,9 +97,8 @@ export default {
         'ff-layout-plain': FFLayoutPlain
     },
     computed: {
-        ...mapState('account', ['pending', 'user', 'team', 'offline', 'settings']),
-        ...mapState('ux/drawers', ['leftDrawer']),
-        ...mapGetters('ux/drawers', ['hiddenLeftDrawer']),
+        ...mapState(useUxDrawersStore, ['hiddenLeftDrawer']),
+        ...mapVuexState('account', ['pending', 'user', 'team', 'offline', 'settings']),
         loginRequired () {
             return this.$route.meta.requiresLogin !== false
         },

frontend/src/components/ExpertButton.vue

@@ -13,19 +13,21 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapActions } from 'vuex'
+
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default {
     name: 'ExpertButton',
     components: {},
     computed: {
-        ...mapState('ux/drawers', ['rightDrawer']),
+        ...mapState(useUxDrawersStore, ['rightDrawer']),
         isExpertDrawerOpen () {
             return this.rightDrawer.state && this.rightDrawer.component?.name === 'ExpertDrawer'
         }
     },
     methods: {
-        ...mapActions('ux/drawers', ['closeRightDrawer']),
         ...mapActions('product/expert', ['openAssistantDrawer']),
         onClick () {
             this.openAssistantDrawer()

frontend/src/components/NotificationsButton.vue

@@ -9,16 +9,19 @@
 
 <script>
 import { MailIcon } from '@heroicons/vue/outline'
+import { mapActions, mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { mapGetters } from 'vuex'
 
 import NotificationsDrawer from './drawers/notifications/NotificationsDrawer.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default {
     name: 'NotificationsButton',
     components: { MailIcon },
     computed: {
-        ...mapState('ux/drawers', ['rightDrawer']),
+        ...mapState(useUxDrawersStore, ['rightDrawer']),
         ...mapGetters('account', ['hasNotifications']),
         ...mapGetters('account', ['unreadNotificationsCount']),
         notificationsCount: function () {
@@ -30,7 +33,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions('ux/drawers', ['openRightDrawer', 'closeRightDrawer']),
+        ...mapActions(useUxDrawersStore, ['openRightDrawer', 'closeRightDrawer']),
         onClick () {
             this.openRightDrawer({ component: markRaw(NotificationsDrawer) })
         }

frontend/src/components/PageHeader.vue

@@ -102,9 +102,9 @@
 </template>
 <script>
 import { AcademicCapIcon, AdjustmentsIcon, CogIcon, CursorClickIcon, LogoutIcon, MenuIcon, PlusIcon, QuestionMarkCircleIcon, XIcon } from '@heroicons/vue/solid'
-import { mapActions } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import { ref } from 'vue'
-import { mapGetters, mapState, mapActions as mapVuexActions } from 'vuex'
+import { mapGetters, mapState as mapVuexState } from 'vuex'
 
 import usePermissions from '../composables/Permissions.js'
 
@@ -119,6 +119,7 @@ import NotificationsButton from './NotificationsButton.vue'
 import TeamSelection from './TeamSelection.vue'
 import GlobalSearch from './global-search/GlobalSearch.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 import { useUxToursStore } from '@/stores/ux-tours.js'
 
 export default {
@@ -128,10 +129,9 @@ export default {
         Roles () {
             return Roles
         },
-        ...mapState('account', ['user', 'team', 'teams']),
-        ...mapState('ux/drawers', ['leftDrawer']),
+        ...mapState(useUxDrawersStore, ['leftDrawer', 'hiddenLeftDrawer']),
+        ...mapVuexState('account', ['user', 'team', 'teams']),
         ...mapGetters('account', ['notifications', 'hasAvailableTeams', 'defaultUserTeam', 'canCreateTeam', 'isTrialAccount', 'featuresCheck']),
-        ...mapGetters('ux/drawers', ['hiddenLeftDrawer']),
         navigationOptions () {
             return [
                 {
@@ -205,7 +205,6 @@ export default {
     setup () {
         const open = ref(false)
         const { hasPermission, hasAMinimumTeamRoleOf } = usePermissions()
-
         return {
             open,
             plusIcon: PlusIcon,
@@ -214,7 +213,7 @@ export default {
         }
     },
     methods: {
-        ...mapVuexActions('ux/drawers', ['toggleLeftDrawer']),
+        ...mapActions(useUxDrawersStore, ['toggleLeftDrawer']),
         ...mapActions(useUxToursStore, ['openModal', 'resetTours', 'presentTour']),
         openEducationModal () {
             this.openModal('education')

frontend/src/components/drawers/LeftDrawer.vue

@@ -12,21 +12,23 @@
 </template>
 
 <script>
+import { mapActions, mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapActions, mapState } from 'vuex'
 
 import MainNav from './navigation/MainNav.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default {
     name: 'LeftDrawer',
     computed: {
-        ...mapState('ux/drawers', ['leftDrawer', 'mainNav'])
+        ...mapState(useUxDrawersStore, ['leftDrawer'])
     },
     mounted () {
         this.setLeftDrawer(markRaw(MainNav))
     },
     methods: {
-        ...mapActions('ux/drawers', ['setLeftDrawer', 'closeLeftDrawer']),
+        ...mapActions(useUxDrawersStore, ['setLeftDrawer', 'closeLeftDrawer']),
         handleClickOutside () {
             this.$nextTick(() => this.closeLeftDrawer)
         }

frontend/src/components/drawers/RightDrawer.vue

@@ -42,7 +42,9 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
+
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 const DRAWER_MIN_WIDTH = 310
 const DRAWER_DEFAULT_WIDTH = 400
@@ -74,7 +76,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('ux/drawers', ['rightDrawer']),
+        ...mapState(useUxDrawersStore, ['rightDrawer']),
         shouldAllowPinning () {
             return this.viewportWidth >= VIEWPORT_PIN_THRESHOLD
         },
@@ -175,7 +177,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions('ux/drawers', ['closeRightDrawer', 'togglePinDrawer']),
+        ...mapActions(useUxDrawersStore, ['closeRightDrawer', 'togglePinDrawer']),
         closeDrawer () {
             if (this.rightDrawer.state && this.rightDrawer.closeOnClickOutside) {
                 this.closeRightDrawer()

frontend/src/components/drawers/expert/ExpertDrawer.vue

@@ -41,12 +41,15 @@
 
 <script>
 import { LockClosedIcon, LockOpenIcon, XIcon } from '@heroicons/vue/solid'
-import { mapActions, mapState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
+import { mapActions as mapVuexActions, mapState as mapVuexState } from 'vuex'
 
 import ToggleButtonGroup from '../../elements/ToggleButtonGroup.vue'
 
 import ExpertPanel from '../../expert/Expert.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default {
     name: 'ExpertDrawer',
     components: {
@@ -58,8 +61,8 @@ export default {
     },
     inject: ['togglePinWithWidth', 'shouldAllowPinning'],
     computed: {
-        ...mapState('ux/drawers', ['rightDrawer']),
-        ...mapState('product/expert', ['agentMode']),
+        ...mapState(useUxDrawersStore, ['rightDrawer']),
+        ...mapVuexState('product/expert', ['agentMode']),
         agentModeButtons () {
             return [
                 { title: 'Support', value: 'ff-agent' },
@@ -85,8 +88,8 @@ export default {
         }, 350)
     },
     methods: {
-        ...mapActions('ux/drawers', ['closeRightDrawer']),
-        ...mapActions('product/expert', ['setAgentMode']),
+        ...mapActions(useUxDrawersStore, ['closeRightDrawer']),
+        ...mapVuexActions('product/expert', ['setAgentMode']),
         closeDrawer () {
             this.closeRightDrawer()
         },

frontend/src/components/drawers/navigation/MainNav.vue

@@ -34,6 +34,7 @@ import { mapGetters, mapState as mapVuexState } from 'vuex'
 
 import NavItem from '../../NavItem.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 import { useUxNavigationStore } from '@/stores/ux-navigation.js'
 
 export default {
@@ -126,9 +127,10 @@ export default {
         team: 'setBackButton'
     },
     methods: {
+        ...mapActions(useUxDrawersStore, ['closeLeftDrawer']),
         ...mapActions(useUxNavigationStore, ['setMainNavContext', 'setMainNavBackButton']),
         onMenuItemClick () {
-            this.$store.dispatch('ux/drawers/closeLeftDrawer')
+            this.closeLeftDrawer()
         },
         setBackButton () {
             if (this.team) {

frontend/src/components/drawers/notifications/NotificationsDrawer.vue

@@ -74,16 +74,20 @@
 
 <script>
 import { XIcon } from '@heroicons/vue/solid'
+import { mapActions } from 'pinia'
 import { markRaw } from 'vue'
-import { mapActions, mapGetters } from 'vuex'
+import { mapGetters, mapActions as mapVuexActions } from 'vuex'
 
 import userAPI from '../../../api/user.js'
 
 import alerts from '../../../services/alerts.js'
 import GenericNotification from '../../notifications/Generic.vue'
+
 import TeamInvitationAcceptedNotification from '../../notifications/invitations/Accepted.vue'
 import TeamInvitationReceivedNotification from '../../notifications/invitations/Received.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default {
     name: 'NotificationsDrawer',
     components: {
@@ -121,8 +125,8 @@ export default {
         this.selections = []
     },
     methods: {
-        ...mapActions('account', ['setNotifications']),
-        ...mapActions('ux/drawers', ['closeRightDrawer']),
+        ...mapActions(useUxDrawersStore, ['closeRightDrawer']),
+        ...mapVuexActions('account', ['setNotifications']),
         closeDrawer () {
             this.closeRightDrawer()
         },

frontend/src/components/drawers/snapshots/SnapshotDetailsDrawer.vue

@@ -155,8 +155,8 @@ import {
     SaveAsIcon,
     TrashIcon
 } from '@heroicons/vue/outline'
+import { mapActions } from 'pinia'
 import { defineComponent } from 'vue'
-import { mapActions } from 'vuex'
 
 import DeviceApi from '../../../api/devices.js'
 
@@ -171,6 +171,8 @@ import AssetCompareDialog from '../../dialogs/AssetCompareDialog.vue'
 import FlowViewer from '../../flow-viewer/FlowViewer.vue'
 import InformationWell from '../../wells/InformationWell.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default defineComponent({
     name: 'SnapshotDetailsDrawer',
     components: {
@@ -231,6 +233,7 @@ export default defineComponent({
 
         return {
             hasPermission
+
         }
     },
     data () {
@@ -283,7 +286,7 @@ export default defineComponent({
             })
     },
     methods: {
-        ...mapActions('ux/drawers', ['setRightDrawerHeader']),
+        ...mapActions(useUxDrawersStore, ['setRightDrawerHeader']),
         deployDeviceSnapshot () {
             const snapshot = this.snapshot
             const currentTargetSnapshot = this.instance.targetSnapshot?.id

frontend/src/components/expert/Expert.vue

@@ -113,8 +113,9 @@
 </template>
 
 <script>
+import { mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { mapActions, mapGetters, mapState as mapVuexState } from 'vuex'
 
 import ToggleButtonGroup from '../elements/ToggleButtonGroup.vue'
 
@@ -126,6 +127,8 @@ import ExpertRichResources from './ExpertRichResources.vue'
 import ExpertToolCall from './ExpertToolCall.vue'
 import UpdateBanner from './components/UpdateBanner.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default {
     name: 'ExpertPanel',
     components: {
@@ -167,7 +170,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('product/expert', [
+        ...mapVuexState('product/expert', [
             'isGenerating',
             'autoScrollEnabled',
             'abortController',
@@ -185,9 +188,9 @@ export default {
             'isOperatorAgent',
             'hasSelectedCapabilities'
         ]),
-        isPinned () {
-            return this.$store.state.ux.drawers.rightDrawer.fixed
-        },
+        ...mapState(useUxDrawersStore, {
+            isPinned: state => state.rightDrawer.fixed
+        }),
         isEditorContext () {
             // In editor context, the route name includes 'editor'
             return this.$route?.name?.includes('editor') || false

frontend/src/components/notifications/Notification.vue

@@ -28,12 +28,14 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapActions } from 'pinia'
 
 import userApi from '../../api/user.js'
 
 import NotificationMessageMixin from '../../mixins/NotificationMessage.js'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default {
     name: 'NotificationBase',
     mixins: [NotificationMessageMixin],
@@ -69,7 +71,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions('ux/drawers', ['closeRightDrawer']),
+        ...mapActions(useUxDrawersStore, ['closeRightDrawer']),
         go (to) {
             this.closeRightDrawer()
             this.markAsRead()

frontend/src/layouts/Platform.vue

@@ -91,7 +91,6 @@ export default {
         ...mapState(useUxDialogStore, ['dialog']),
         ...mapState(useUxStore, ['overlay']),
         ...mapVuexState('product', ['interview']),
-        ...mapVuexState('ux/drawers', ['leftDrawer']),
         ...mapGetters('account', ['hasAvailableTeams'])
     },
     watch: {