feat(PageHeader): Can pass all UPageHeader props directly via PageHea…

…der with pageHeaderProps props

packages/gaas-ui/app/components/PageHeader.vue

@@ -1,18 +1,19 @@
 <script setup lang="ts">
 import type { BreadcrumbItem } from '@nuxt/ui'
+import type { PageHeaderProps } from '@nuxt/ui-pro'
 
 interface Props {
-  title: string
-  description?: string | undefined
   breadcrumbsItems?: BreadcrumbItem[] | undefined
-  icon?: string | undefined
+  pageHeaderProps?: PageHeaderProps
+  icon?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  title: 'Title',
-  description: undefined,
+  pageHeaderProps: () => ({
+    title: 'Title',
+    description: 'A description',
+  }),
   breadcrumbsItems: undefined,
-  icon: undefined,
 
 })
 
@@ -24,6 +25,6 @@ const { breadcrumbsItems } = toRefs(props)
     <div v-if="breadcrumbsItems" class="py-4">
       <UBreadcrumb :items="breadcrumbsItems" />
     </div>
-    <UPageHeader :description :title />
+    <UPageHeader v-bind="pageHeaderProps" />
   </div>
 </template>

packages/gaas-ui/app/pages/admin/index.vue

@@ -37,12 +37,22 @@ const adminItems = ref([
 function goToAdminPanel(name: string) {
   router.push(`/admin/${name}`)
 }
+
+const pageHeaderProps = computed(() => {
+  return {
+    title: 'Admin panel',
+    description: 'Manage your web application',
+  }
+})
 </script>
 
 <template>
   <div>
     <div v-if="userRole === 'admin'">
-      <PageHeader title="Admin panel" description="Manage your web application" :breadcrumbs-items="breadcrumbsItems" />
+      <PageHeader
+        :page-header-props
+        :breadcrumbs-items
+      />
 
       <div class="grid grid-flow-col gap-5 p-2">
         <UCard

packages/gaas-ui/app/pages/admin/users.vue

@@ -46,16 +46,23 @@ const { data: listUsers } = await useAsyncData('list-app-users', async () => {
 
   return users
 })
+
+const pageHeaderProps = computed(() => {
+  return {
+    title: 'Users and roles',
+    description: 'Manage the user and roles of the web application',
+  }
+})
 </script>
 
 <template>
   <div>
     <div v-if="userRole === 'admin'" class="my-5">
       <PageHeader
-        title="Manage users and roles" description="Manage the user and roles of the web application"
+        :page-header-props
         :breadcrumbs-items="computedBreadcrumbsItems"
       />
-      <div v-if="noUsers">
+      <div v-if="noUsers" class="my-3 p-2">
         <UAlert
           title="Permissions" description="You don't have the permissions to display the list of all users"
           icon="i-lucide:user-x" color="error" variant="soft"

packages/gaas-ui/app/pages/admin/workflows.vue

@@ -176,14 +176,22 @@ const { data: galaxyInstance } = await useAsyncData(
     }
   },
 )
+
+const pageHeaderProps = computed(() => {
+  return {
+    title: 'Workflows',
+    description: 'Manage the workflows that are available for this web application',
+
+  }
+})
 </script>
 
 <template>
   <div v-if="userRole === 'admin'">
     <div v-if="galaxyInstance">
       <PageHeader
-        title="Manage workflows"
-        description="Manage the workflows that are available for this web application" icon="i-lucide:workflow"
+        :page-header-props
+        icon="i-lucide:workflow"
         :breadcrumbs-items="computedBreadcrumbsItems"
       >
         <template #trailing-content>

packages/gaas-ui/app/pages/analyses/[analysisId].vue

@@ -356,6 +356,21 @@ function useOutputs() {
   return { outputs }
 }
 
+const pageHeaderProps = computed(() => {
+  const analysisVal = toValue(analysis)
+  const props = {
+    title: 'Analysis',
+    description: 'Analysis perform with workflow',
+    ui: {
+      root: 'relative border-b-0 border-[var(--ui-border)] py-8',
+    },
+  }
+  if (analysisVal) {
+    return { ...props, title: analysisVal.name }
+  }
+  return props
+})
+
 onMounted(() => {
   const dbAnalysisVal = toValue(analysis) as Record<string, any>
 
@@ -369,38 +384,39 @@ await useFetch('/sync')
 </script>
 
 <template>
+  <PageHeader
+    v-if="analysis" :page-header-props="pageHeaderProps"
+    :breadcrumbs-items="computedBreadcrumbsItems"
+    icon="i-streamline:code-analysis"
+  >
+    <template #description="{ description }">
+      <div class="text-lg text-[var(--ui-text-muted)] mt-4">
+        {{ description }}
+        <UBadge variant="subtle">
+          {{
+            workflowRun?.galaxyWorkflow.name
+          }}
+        </UBadge>
+      </div>
+    </template>
+    <template #trailing-content>
+      <div v-if="history">
+        <GalaxyStatus :state="history.state" :size="40" />
+      </div>
+    </template>
+  </PageHeader>
   <div>
-    <PageHeader
-      v-if="analysis" :title="analysis.name" description="Analysis perform with workflow"
-      icon="i-streamline:code-analysis" :breadcrumbs-items="computedBreadcrumbsItems"
-    >
-      <template #description="{ description }">
-        <div class="text-lg text-[var(--ui-text-muted)] mt-4">
-          {{ description }}
-          <UBadge variant="subtle">
-            {{
-              workflowRun?.galaxyWorkflow.name
-            }}
-          </UBadge>
-        </div>
-      </template>
-      <template #trailing-content>
-        <div v-if="history">
-          <GalaxyStatus :state="history.state" :size="40" />
-        </div>
-      </template>
-    </PageHeader>
-    <USeparator icon="i-lucide:file" />
+    <USeparator :id="`input-${analysisId}`" icon="i-lucide:file" />
     <div class="py-4">
       <h2 class="text-lg font-bold">
         Inputs
       </h2>
       <GalaxyAnalysisIoDatasets :items="inputs" />
     </div>
 
-    <USeparator icon="i-mdi:tools" />
+    <USeparator :id="`job-${analysisId}`" icon="i-mdi:tools" />
 
-    <div v-if="jobs" name="job">
+    <div v-if="jobs">
       <div class="py-4">
         <h2 class="text-lg font-bold">
           Jobs
@@ -468,7 +484,7 @@ await useFetch('/sync')
     </div>
 
     <!-- outputs -->
-    <USeparator icon="i-lucide:file" />
+    <USeparator :id="`output-${analysisId}`" icon="i-lucide:file" />
     <div v-if="outputs">
       <div class="py-4">
         <h2 class="text-lg font-bold">

packages/gaas-ui/app/pages/analyses/[analysisId]/rerun.vue

@@ -71,13 +71,27 @@ const workflowId = computed(() => {
   const analysisVal = toValue(analysis)
   return analysisVal?.workflows.id
 })
+
+const pageHeaderProps = computed(() => {
+  const analysisVal = toValue(analysis)
+  const props = {
+    title: 'Rerun analysis',
+    description: 'Rerun the analysis',
+
+  }
+  if (analysisVal) {
+    return { ...props, title: analysisVal.name }
+  }
+  return props
+})
 </script>
 
 <template>
   <div v-if="workflowId && analysis">
     <PageHeader
-      :title="analysis.name" description="Rerun the analysis" icon="i-streamline:code-analysis"
+      :page-header-props
       :breadcrumbs-items="computedBreadcrumbsItems"
+      icon="i-streamline:code-analysis"
     />
 
     <GalaxyWorkflowInvokeForm v-if="analysisId && workflowId" :workflow-id="workflowId" :analysis-id="analysisId" />

packages/gaas-ui/app/pages/analyses/index.vue

@@ -244,19 +244,32 @@ async function editAnalysisName(id: number) {
   }
 }
 await useFetch('/sync')
+
+const pageHeaderProps = computed(() => {
+  return {
+    title: 'Analysis',
+    description: 'All analyses that has been run',
+    ui: {
+      root: 'relative border-b-0 border-[var(--ui-border)] py-8',
+    },
+
+  }
+})
 </script>
 
 <template>
   <div>
     <PageHeader
-      title="Analysis" description="All analyses that has been run" icon="i-streamline:code-analysis"
+      :page-header-props
       :breadcrumbs-items="breadcrumbsItems"
+      icon="i-streamline:code-analysis"
     >
       <template #trailing-content>
         <UButton icon="i-mdi:plus" to="/workflows" size="xl" />
       </template>
     </PageHeader>
-    <div class="flex flex-col flex-1 w-full">
+
+    <div class="flex flex-col flex-1 w-full ring ring-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] my-3">
       <!-- <div class="flex px-4 py-3.5 border-b border-[var(--ui-border-accented)]">
         <UInput v-model="globalFilter" class="max-w-sm" placeholder="Filter..." />
       </div> -->

packages/gaas-ui/app/pages/datasets/index.vue

@@ -165,18 +165,25 @@ const columns = ref<TableColumn<Dataset>[]>([
     },
   },
 ])
+
+const pageHeaderProps = computed(() => {
+  return {
+    title: 'Datasets',
+    description: 'From here you can upload a dataset and have the list of all the datasets available.',
+
+  }
+})
 </script>
 
 <template>
   <div>
     <PageHeader
-      title="Datasets"
-      description="From here you can upload a dataset and have the list of all the datasets available."
-      icon="i-lucide-files"
+      :page-header-props
       :breadcrumbs-items="breadcrumbsItems"
+      icon="i-lucide-files"
     />
 
-    <div class="grid grid-flow-row auto-rows-max gap-6">
+    <div class="grid grid-flow-row auto-rows-max gap-6 mt-6">
       <div>
         <!-- <h2 class="text-xl font-bold mb-2 mt-4">Upload</h2> -->
         <div>
@@ -204,7 +211,7 @@ const columns = ref<TableColumn<Dataset>[]>([
           </UForm>
         </div>
       </div>
-      <div v-if="datasets" class="mt-5">
+      <div v-if="datasets">
         <!-- <h2 class="text-xl font-bold mb-3 mt-4">Datasets</h2> -->
         <UTable
           :data="datasets"

packages/gaas-ui/app/pages/galaxy/histories/index.vue

@@ -17,15 +17,21 @@ const breadcrumbsItems = ref([
     to: '/galaxy/histories',
   },
 ])
+
+const pageHeaderProps = computed(() => {
+  return {
+    title: 'Galaxy Histories',
+    description: 'All histories that has been used to run analysis',
+  }
+})
 </script>
 
 <template>
   <div>
     <PageHeader
-      title="Galaxy Histories"
-      description="All histories that has been used to run analysis"
-      icon="i-lucide:history"
+      :page-header-props
       :breadcrumbs-items="breadcrumbsItems"
+      icon="i-lucide:history'"
     />
 
     <div class="grid grid-flow-row auto-rows-max gap-8">

packages/gaas-ui/app/pages/galaxy/index.vue

@@ -13,17 +13,22 @@ const breadcrumbsItems = ref([
     to: '/galaxy',
   },
 ])
+const pageHeaderProps = computed(() => {
+  return {
+    title: 'Galaxy',
+    description: 'Description of the Galaxy instance the web application is connected to.',
 
+  }
+})
 const { data: galaxyInstanceDetails } = await useFetch<GalaxyTypes.GalaxyInstanceDetails>('/api/galaxy/instance')
 </script>
 
 <template>
   <div>
     <PageHeader
-      title="Galaxy"
-      description="Description of the Galaxy instance the web application is connected to."
-      icon="i-file-icons:galaxy"
+      :page-header-props
       :breadcrumbs-items="breadcrumbsItems"
+      icon="i-file-icons:galaxy"
     />
     <UAlert
       v-if="galaxyInstanceDetails"

packages/gaas-ui/app/pages/galaxy/workflows/index.vue

@@ -18,13 +18,23 @@ const breadcrumbsItems = ref([
 ])
 
 const { data: workflows } = await useFetch('/api/galaxy/workflows')
+
+const pageHeaderProps = computed(() => {
+  const title = 'Galaxy Workflows'
+  const description = 'All workflows available on the galaxy instance'
+  const props = {
+    title,
+    description,
+
+  }
+  return props
+})
 </script>
 
 <template>
   <div>
     <PageHeader
-      title="Galaxy Workflows"
-      description="All workflows available on the galaxy instance"
+      :page-header-props
       icon="i-lucide:workflow"
       :breadcrumbs-items="breadcrumbsItems"
     />