refactor: new data import flow

frontend/src/components/DesktopLayout.vue

@@ -9,5 +9,5 @@
 	</div>
 </template>
 <script setup>
-import AppSidebar from './AppSidebar.vue'
+import AppSidebar from '@/components/Sidebar/AppSidebar.vue'
 </script>

frontend/src/components/Settings/Settings.vue

@@ -70,9 +70,8 @@
 import { Dialog, createDocumentResource } from 'frappe-ui'
 import { computed, markRaw, ref, watch } from 'vue'
 import { useSettings } from '@/stores/settings'
-import { DataImport } from 'frappe-ui/frappe'
 import SettingDetails from '@/components/Settings/SettingDetails.vue'
-import SidebarLink from '@/components/SidebarLink.vue'
+import SidebarLink from '@/components/Sidebar/SidebarLink.vue'
 import Members from '@/components/Settings/Members.vue'
 import Evaluators from '@/components/Settings/Evaluators.vue'
 import Categories from '@/components/Settings/Categories.vue'
@@ -160,11 +159,6 @@ const tabsStructure = computed(() => {
 						},
 					],
 				},
-				{
-					label: 'Data Import',
-					icon: 'Database',
-					template: markRaw(DataImport),
-				},
 				{
 					label: 'Contact Us',
 					icon: 'Phone',

frontend/src/components/Sidebar/AppSidebar.vue

@@ -181,19 +181,9 @@
 </template>
 
 <script setup>
-import UserDropdown from '@/components/UserDropdown.vue'
+import UserDropdown from '@/components/Sidebar/UserDropdown.vue'
 import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
-import SidebarLink from '@/components/SidebarLink.vue'
-import {
-	ref,
-	onMounted,
-	inject,
-	watch,
-	reactive,
-	markRaw,
-	h,
-	onUnmounted,
-} from 'vue'
+import SidebarLink from '@/components/Sidebar/SidebarLink.vue'
 import { getSidebarLinks } from '@/utils'
 import { usersStore } from '@/stores/user'
 import { sessionStore } from '@/stores/session'
@@ -204,7 +194,17 @@ import PageModal from '@/components/Modals/PageModal.vue'
 import { capture } from '@/telemetry'
 import LMSLogo from '@/components/Icons/LMSLogo.vue'
 import { useRouter } from 'vue-router'
-import InviteIcon from './Icons/InviteIcon.vue'
+import InviteIcon from '@/components/Icons/InviteIcon.vue'
+import {
+	ref,
+	onMounted,
+	inject,
+	watch,
+	reactive,
+	markRaw,
+	h,
+	onUnmounted,
+} from 'vue'
 import {
 	BookOpen,
 	CircleAlert,

frontend/src/components/Sidebar/Apps.vue

@@ -1,11 +1,10 @@
 <template>
-	<Popover placement="right-start" class="flex w-full">
+	<Popover placement="right-start" trigger="hover" class="flex w-full">
 		<template #target="{ togglePopover }">
 			<button
 				:class="[
 					'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-ink-gray-7 hover:bg-surface-gray-2',
 				]"
-				@click.prevent="togglePopover()"
 			>
 				<div class="flex gap-2">
 					<LayoutGrid class="size-4 stroke-1.5" />

frontend/src/components/Sidebar/Configuration.vue

@@ -0,0 +1,40 @@
+<template>
+	<Popover placement="right-start" class="flex w-full" trigger="hover">
+		<template #target="{ togglePopover }">
+			<button
+				:class="[
+					'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-ink-gray-7 hover:bg-surface-gray-2',
+				]"
+			>
+				<div class="flex gap-2">
+					<Wrench class="size-4 stroke-1.5 text-ink-gray-7" />
+					<span class="whitespace-nowrap">
+						{{ __('Configuration') }}
+					</span>
+				</div>
+				<ChevronRight class="h-4 w-4 stroke-1.5" />
+			</button>
+		</template>
+		<template #body-main>
+			<div class="text-base p-2">
+                <router-link :to="{
+                    name: 'DataImportList',
+                    query: {
+                        step: 'list'
+                    }
+                }">
+                    <div class="flex items-center space-x-2 hover:bg-surface-gray-2 px-2 py-1 rounded-sm">
+                        <ArrowDownToLine class="size-4 stroke-1.5 text-ink-gray-7"/>
+                        <div class="text-sm text-ink-gray-7">
+                            {{ __("Data Import") }}
+                        </div>
+                    </div>
+                </router-link>
+            </div>
+		</template>
+	</Popover>
+</template>
+<script setup>
+import { Popover } from 'frappe-ui'
+import { ArrowDownToLine, ChevronRight, Wrench } from 'lucide-vue-next'
+</script>

frontend/src/components/Sidebar/UserDropdown.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="p-2">
 		<Dropdown :options="userDropdownOptions">
-			<template v-slot="{ open }">
+			<template v-slot="{ open, close }">
 				<button
 					class="flex h-12 py-2 items-center rounded-md duration-300 ease-in-out"
 					:class="
@@ -64,18 +64,19 @@
 </template>
 
 <script setup>
-import LMSLogo from '@/components/Icons/LMSLogo.vue'
 import { sessionStore } from '@/stores/session'
 import { Dropdown } from 'frappe-ui'
-import Apps from '@/components/Apps.vue'
 import { useRouter } from 'vue-router'
 import { convertToTitleCase } from '@/utils'
 import { usersStore } from '@/stores/user'
 import { useSettings } from '@/stores/settings'
 import { markRaw, watch, ref, onMounted, computed } from 'vue'
 import { createDialog } from '@/utils/dialogs'
-import SettingsModal from '@/components/Settings/Settings.vue'
+import Apps from '@/components/Sidebar/Apps.vue'
+import Configuration from '@/components/Sidebar/Configuration.vue'
 import FrappeCloudIcon from '@/components/Icons/FrappeCloudIcon.vue'
+import LMSLogo from '@/components/Icons/LMSLogo.vue'
+import SettingsModal from '@/components/Settings/Settings.vue'
 import {
 	ChevronDown,
 	LogIn,
@@ -168,6 +169,12 @@ const userDropdownOptions = computed(() => {
 						return userResource.data?.is_moderator
 					},
 				},
+				{
+					component: markRaw(Configuration),
+					condition: () => {
+						return userResource.data?.is_moderator
+					},
+				},
 				{
 					icon: FrappeCloudIcon,
 					label: 'Login to Frappe Cloud',