Merge pull request #2389 from frappe/mergify/bp/main-hotfix/pr-2367

feat: add empty states to settings (backport #2367)

Author: raizasafeel

frontend/src/App.vue

@@ -14,9 +14,9 @@ import { computed, onUnmounted, ref } from 'vue'
 import { useScreenSize } from './utils/composables'
 import { useSettings } from '@/stores/settings'
 import { useRouter } from 'vue-router'
-import DesktopLayout from './components/DesktopLayout.vue'
-import MobileLayout from './components/MobileLayout.vue'
-import NoSidebarLayout from './components/NoSidebarLayout.vue'
+import DesktopLayout from './components/Layouts/DesktopLayout.vue'
+import MobileLayout from './components/Layouts/MobileLayout.vue'
+import NoSidebarLayout from './components/Layouts/NoSidebarLayout.vue'
 import InstallPrompt from './components/InstallPrompt.vue'
 
 const { isMobile } = useScreenSize()

frontend/src/components/EmptyState.vue

@@ -0,0 +1,57 @@
+<template>
+	<div
+		class="flex min-h-[60vh] w-full flex-col items-center justify-center gap-3 px-4"
+	>
+		<component :is="icon" class="size-7.5 stroke-1 text-ink-gray-5" />
+		<div class="flex flex-col items-center gap-1" :class="widthClass">
+			<span class="text-lg font-medium text-ink-gray-8 text-center">
+				{{ computedTitle }}
+			</span>
+			<span class="text-center text-p-base text-ink-gray-6">
+				{{ computedDescription }}
+			</span>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { GraduationCap } from 'lucide-vue-next'
+import type { Component } from 'vue'
+import { computed } from 'vue'
+
+const props = withDefaults(
+	defineProps<{
+		name: string
+		title?: string
+		description?: string
+		icon?: Component
+		width?: 'sm' | 'md' | 'lg'
+	}>(),
+	{
+		icon: () => GraduationCap,
+		width: 'md',
+	}
+)
+
+const computedTitle = computed(
+	() => props.title || __('No {0} Found').format(props.name)
+)
+
+const computedDescription = computed(
+	() =>
+		props.description ||
+		__(
+			'There are no {0} currently. Keep an eye out, fresh learning experiences are on the way!'
+		).format(props.name?.toLowerCase())
+)
+
+const widthClass = computed(() => {
+	switch (props.width) {
+		case 'sm':
+			return 'w-2/12'
+		case 'lg':
+			return 'w-8/12'
+		default:
+			return 'w-4/12'
+	}
+})
+</script>

frontend/src/components/DesktopLayout.vue …src/components/Layouts/DesktopLayout.vuefrontend/src/components/DesktopLayout.vue renamed to frontend/src/components/Layouts/DesktopLayout.vue frontend/src/components/DesktopLayout.vue renamed to frontend/src/components/Layouts/DesktopLayout.vue

@@ -92,6 +92,12 @@
 				</ListRows>
 			</ListView>
 		</div>
+		<EmptyStateLayout
+			v-else
+			name="Badges"
+			:description="__('Add one to get started.')"
+			:icon="Award"
+		/>
 	</div>
 	<BadgeForm
 		v-model="showForm"
@@ -116,10 +122,11 @@ import {
 	toast,
 } from 'frappe-ui'
 import { computed, ref } from 'vue'
-import { Plus } from 'lucide-vue-next'
+import { Award, Plus } from 'lucide-vue-next'
 import { cleanError } from '@/utils'
 import BadgeForm from '@/components/Settings/BadgeForm.vue'
 import BadgeAssignments from '@/components/Settings/BadgeAssignments.vue'
+import EmptyStateLayout from '@/components/Layouts/EmptyStateLayout.vue'
 
 const showForm = ref<boolean>(false)
 const selectedBadge = ref<string | null>(null)

frontend/src/components/Layouts/EmptyStateLayout.vue

@@ -47,6 +47,7 @@
 		<div class="overflow-y-auto">
 			<div class="divide-y divide-outline-gray-modals space-y-2">
 				<div
+					v-if="categories.data?.length"
 					v-for="(cat, index) in categories.data"
 					:key="cat.name"
 					class="pt-2"
@@ -78,6 +79,12 @@
 						@keyup.enter="saveChanges(cat.name, editedValue)"
 					/>
 				</div>
+				<EmptyStateLayout
+					v-else
+					name="Categories"
+					:description="__('Add one to get started.')"
+					:icon="Network"
+				/>
 			</div>
 		</div>
 	</div>
@@ -91,9 +98,10 @@ import {
 	createResource,
 	toast,
 } from 'frappe-ui'
-import { Plus, Trash2, X } from 'lucide-vue-next'
+import { Plus, Trash2, X, Network } from 'lucide-vue-next'
 import { ref } from 'vue'
 import { cleanError } from '@/utils'
+import EmptyStateLayout from '@/components/Layouts/EmptyStateLayout.vue'
 
 const showForm = ref(false)
 const category = ref(null)

frontend/src/components/MobileLayout.vue …/src/components/Layouts/MobileLayout.vuefrontend/src/components/MobileLayout.vue renamed to frontend/src/components/Layouts/MobileLayout.vue frontend/src/components/MobileLayout.vue renamed to frontend/src/components/Layouts/MobileLayout.vue

@@ -78,9 +78,12 @@
 				</ListSelectBanner>
 			</ListView>
 		</div>
-		<div v-else class="text-center text-ink-gray-6 italic mt-40">
-			{{ __('No coupons created yet.') }}
-		</div>
+		<EmptyStateLayout
+			v-else
+			name="Coupons"
+			:description="__('Add one to get started.')"
+			:icon="Ticket"
+		/>
 	</div>
 </template>
 <script setup lang="ts">
@@ -100,8 +103,9 @@ import {
 	toast,
 } from 'frappe-ui'
 import { computed, getCurrentInstance, inject, ref } from 'vue'
-import { Plus, Trash2 } from 'lucide-vue-next'
+import { Plus, Trash2, Ticket } from 'lucide-vue-next'
 import type { Coupon, Coupons } from './types'
+import EmptyStateLayout from '@/components/Layouts/EmptyStateLayout.vue'
 
 const dayjs = inject('$dayjs') as typeof import('dayjs')
 const app = getCurrentInstance()

…ntend/src/components/NoSidebarLayout.vue …c/components/Layouts/NoSidebarLayout.vuefrontend/src/components/NoSidebarLayout.vue renamed to frontend/src/components/Layouts/NoSidebarLayout.vue frontend/src/components/NoSidebarLayout.vue renamed to frontend/src/components/Layouts/NoSidebarLayout.vue

@@ -70,6 +70,12 @@
 				</ListSelectBanner>
 			</ListView>
 		</div>
+		<EmptyStateLayout
+			v-else
+			name="Email Templates"
+			:description="__('Add one to get started.')"
+			:icon="MailPlus"
+		/>
 	</div>
 	<EmailTemplateModal
 		v-model="showForm"
@@ -92,8 +98,9 @@ import {
 	toast,
 } from 'frappe-ui'
 import { computed, ref } from 'vue'
-import { Plus, Trash2 } from 'lucide-vue-next'
+import { Plus, Trash2, MailPlus } from 'lucide-vue-next'
 import EmailTemplateModal from '@/components/Modals/EmailTemplateModal.vue'
+import EmptyStateLayout from '@/components/Layouts/EmptyStateLayout.vue'
 
 const props = defineProps({
 	label: {