feat(ui): insert message "no tests found" in ui (#7366)

Author: DevJoaoLopes

packages/ui/client/components/ProgressBar.vue

@@ -4,15 +4,10 @@ import { explorerTree } from '~/composables/explorer'
 
 const { width } = useWindowSize()
 const classes = computed(() => {
-  // if there are no files, then in progress and gray
-  if (explorerTree.summary.files === 0) {
-    return '!bg-gray-4 !dark:bg-gray-7 in-progress'
-  }
-  else if (!finished.value) {
-    return 'in-progress'
-  }
-
-  return null
+  return [
+    explorerTree.summary.files === 0 && '!bg-gray-4 !dark:bg-gray-7',
+    !finished.value && 'in-progress',
+  ].filter(Boolean).join(' ')
 })
 
 const widthPass = computed(() => {

packages/ui/client/components/dashboard/TestsFilesContainer.vue

@@ -1,10 +1,18 @@
+<script setup lang="ts">
+import { finished } from '~/composables/client/state'
+import { explorerTree } from '~/composables/explorer'
+</script>
+
 <template>
   <div gap-0 flex="~ col gap-4" h-full justify-center items-center>
-    <!-- <div bg-header rounded-lg p="y4 x2"> -->
+    <template v-if="explorerTree.summary.files === 0 && finished">
+      <div class="text-gray-5">
+        No tests found
+      </div>
+    </template>
     <section aria-labelledby="tests" m="y-4 x-2">
       <TestsEntry />
     </section>
     <TestFilesEntry />
-    <!-- </div> -->
   </div>
 </template>