From 1e6a09f7b75ce7d6176d23e6089a516022808571 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 18 Feb 2025 21:54:49 +0100
Subject: [PATCH 1/6] Adds BreadcrumbHeading component

Introduces BreadcrumbHeading component for displaying breadcrumb navigation.
Utilizes Heading and RouterLink for structured and localized breadcrumb items.
Includes scoped styles for component layout.
---
 .../components/Common/BreadcrumbHeading.vue   | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 client/src/components/Common/BreadcrumbHeading.vue

diff --git a/client/src/components/Common/BreadcrumbHeading.vue b/client/src/components/Common/BreadcrumbHeading.vue
new file mode 100644
index 00000000000..7233e8d4429
--- /dev/null
+++ b/client/src/components/Common/BreadcrumbHeading.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { RouterLink } from "vue-router";
+
+import localize from "@/utils/localization";
+
+import Heading from "@/components/Common/Heading.vue";
+
+interface BreadcrumbItem {
+    title: string;
+    to?: string;
+    superText?: string;
+}
+
+interface Props {
+    items: BreadcrumbItem[];
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+    <div class="breadcrumb-heading">
+        <Heading h1 separator inline size="xl" class="breadcrumb-heading-header">
+            <template v-for="(item, index) in props.items">
+                <RouterLink v-if="item.to" :key="index" :to="item.to">
+                    {{ localize(item.title) }}
+                </RouterLink>
+                <span v-else :key="'else-' + index">
+                    {{ localize(item.title) }}
+                </span>
+
+                <template v-if="item.superText">
+                    <sup :key="'sup-' + index" class="breadcrumb-heading-header-beta">
+                        {{ localize(item.superText) }}
+                    </sup>
+                </template>
+
+                <template v-if="index < items.length - 1"> / </template>
+            </template>
+        </Heading>
+
+        <slot />
+    </div>
+</template>
+
+<style scoped lang="scss">
+.breadcrumb-heading {
+    display: flex;
+
+    .breadcrumb-heading-header {
+        flex-grow: 1;
+        margin-bottom: 0.5rem;
+
+        .breadcrumb-heading-header-beta {
+            color: #717273;
+        }
+    }
+}
+</style>

From 1370bb4d7d8107f6ddbc0157086c912bc6dc1f15 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 18 Feb 2025 21:56:51 +0100
Subject: [PATCH 2/6] Adds breadcrumb heading to WorkflowList

Replaces existing heading with BreadcrumbHeading for consistency in WorkflowList
---
 client/src/components/Workflow/List/WorkflowList.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Workflow/List/WorkflowList.vue b/client/src/components/Workflow/List/WorkflowList.vue
index fc9da560273..56dc22566c2 100644
--- a/client/src/components/Workflow/List/WorkflowList.vue
+++ b/client/src/components/Workflow/List/WorkflowList.vue
@@ -18,6 +18,7 @@ import { rethrowSimple } from "@/utils/simple-error";
 import type { SelectedWorkflow } from "./types";
 
 import WorkflowCardList from "./WorkflowCardList.vue";
+import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 import FilterMenu from "@/components/Common/FilterMenu.vue";
 import Heading from "@/components/Common/Heading.vue";
 import ListHeader from "@/components/Common/ListHeader.vue";
@@ -36,6 +37,8 @@ const props = withDefaults(defineProps<Props>(), {
     activeList: "my",
 });
 
+const breadcrumbItems = [{ title: "Workflows" }];
+
 const router = useRouter();
 const userStore = useUserStore();
 const { confirm } = useConfirmDialog();
@@ -352,11 +355,9 @@ onMounted(() => {
 <template>
     <div id="workflows-list" class="workflows-list">
         <div id="workflows-list-header" class="workflows-list-header mb-2">
-            <div class="d-flex flex-gapx-1">
-                <Heading h1 separator inline size="xl" class="flex-grow-1 mb-2">Workflows</Heading>
-
+            <BreadcrumbHeading :items="breadcrumbItems">
                 <WorkflowListActions />
-            </div>
+            </BreadcrumbHeading>
 
             <BNav pills justified class="mb-2">
                 <BNavItem id="my" :active="activeList === 'my'" :disabled="userStore.isAnonymous" to="/workflows/list">

From 65acc1e4cdad32cca21e1a0f7be3fa619524c6f9 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 18 Feb 2025 21:57:27 +0100
Subject: [PATCH 3/6] Adds breadcrumb navigation to StorageDashboard

Replaces main header with Heading component for consistency
Enhances user experience by making navigation clearer
---
 .../User/DiskUsage/StorageDashboard.vue         | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/client/src/components/User/DiskUsage/StorageDashboard.vue b/client/src/components/User/DiskUsage/StorageDashboard.vue
index 9cd672a8550..09c67730e3c 100644
--- a/client/src/components/User/DiskUsage/StorageDashboard.vue
+++ b/client/src/components/User/DiskUsage/StorageDashboard.vue
@@ -5,6 +5,8 @@ import { useRouter } from "vue-router/composables";
 import localize from "@/utils/localization";
 
 import DiskUsageSummary from "./DiskUsageSummary.vue";
+import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
+import Heading from "@/components/Common/Heading.vue";
 import IconCard from "@/components/IconCard.vue";
 
 const router = useRouter();
@@ -38,6 +40,8 @@ const texts = reactive({
     },
 });
 
+const breadcrumbItems = [{ title: "User Preferences", to: "/user" }, { title: texts.title }];
+
 function goToStorageManager() {
     router.push({ name: "StorageManager" });
 }
@@ -53,13 +57,14 @@ function goToObjectStoresOverview() {
 
 <template>
     <div>
-        <header class="main-header">
-            <h1 class="text-center my-3">
-                <b>{{ texts.title }}</b>
-            </h1>
-            <h2 class="text-center my-3 h-sm">{{ texts.subtitle }}</h2>
-        </header>
+        <BreadcrumbHeading :items="breadcrumbItems" />
+
+        <Heading h2 size="sm">
+            {{ texts.subtitle }}
+        </Heading>
+
         <DiskUsageSummary class="m-3" />
+
         <IconCard
             class="mx-auto mb-3"
             data-description="free space card"

From 6f85497b30cfc49bdbe163dcf823abb3cc073c78 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 18 Feb 2025 21:58:20 +0100
Subject: [PATCH 4/6] Adds breadcrumb navigation to StorageManager

Integrates BreadcrumbHeading component to replace the back link and header
Provides breadcrumb navigation items for better user experience
Removes scoped CSS for beta text styling
---
 .../DiskUsage/Management/StorageManager.vue   | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/client/src/components/User/DiskUsage/Management/StorageManager.vue b/client/src/components/User/DiskUsage/Management/StorageManager.vue
index a7834a85f30..e310d348c92 100644
--- a/client/src/components/User/DiskUsage/Management/StorageManager.vue
+++ b/client/src/components/User/DiskUsage/Management/StorageManager.vue
@@ -11,11 +11,18 @@ import type { CleanableItem, CleanupOperation, CleanupResult } from "./Cleanup/m
 import CleanupOperationSummary from "./Cleanup/CleanupOperationSummary.vue";
 import CleanupResultDialog from "./Cleanup/CleanupResultDialog.vue";
 import ReviewCleanupDialog from "./Cleanup/ReviewCleanupDialog.vue";
+import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 
 interface ModalDialog {
     openModal: () => void;
 }
 
+const breadcrumbItems = [
+    { title: "User Preferences", to: "/user" },
+    { title: "Storage Dashboard", to: "StorageDashboard" },
+    { title: "Manage your account storage", superText: "(Beta)" },
+];
+
 const { config } = useConfig();
 const { cleanupCategories } = useCleanupCategories();
 
@@ -50,11 +57,8 @@ async function onConfirmCleanupSelected(selectedItems: CleanableItem[]) {
 </script>
 
 <template>
-    <b-container fluid>
-        <b-link to="StorageDashboard">{{ localize("Back to Dashboard") }}</b-link>
-        <h2 class="text-center my-3">
-            <b>{{ localize("Manage your account storage") }}</b> <sup class="text-beta">(Beta)</sup>
-        </h2>
+    <div>
+        <BreadcrumbHeading :items="breadcrumbItems" />
 
         <b-row class="justify-content-md-center">
             <b-alert show dismissible variant="warning">
@@ -96,11 +100,5 @@ async function onConfirmCleanupSelected(selectedItems: CleanableItem[]) {
             @onConfirmCleanupSelectedItems="onConfirmCleanupSelected" />
 
         <CleanupResultDialog ref="resultModal" :result="cleanupResult" />
-    </b-container>
+    </div>
 </template>
-
-<style lang="css" scoped>
-.text-beta {
-    color: #717273;
-}
-</style>

From 540908266f13ded632a8f06545f5a0902e0b8661 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 18 Feb 2025 21:59:25 +0100
Subject: [PATCH 5/6] Add breadcrumb navigation to OverviewPage

Updates the UI to use BreadcrumbHeading for better navigation to enhance user experience
---
 .../DiskUsage/Visualizations/OverviewPage.vue  | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/client/src/components/User/DiskUsage/Visualizations/OverviewPage.vue b/client/src/components/User/DiskUsage/Visualizations/OverviewPage.vue
index 932742f5baf..e3f52fc3ddf 100644
--- a/client/src/components/User/DiskUsage/Visualizations/OverviewPage.vue
+++ b/client/src/components/User/DiskUsage/Visualizations/OverviewPage.vue
@@ -1,19 +1,23 @@
 <script setup lang="ts">
-import localize from "@/utils/localization";
-
-import Heading from "@/components/Common/Heading.vue";
+import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 
 interface Props {
     title: string;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+
+const breadcrumbItems = [
+    { title: "User Preferences", to: "/user" },
+    { title: "Storage Dashboard", to: "StorageDashboard" },
+    { title: props.title },
+];
 </script>
 
 <template>
-    <div class="mx-3">
-        <router-link :to="{ name: 'StorageDashboard' }">{{ localize("Back to Dashboard") }}</router-link>
-        <Heading h1 bold class="my-3">{{ localize(title) }}</Heading>
+    <div>
+        <BreadcrumbHeading :items="breadcrumbItems" />
+
         <slot />
     </div>
 </template>

From b8df344c0b0343da333e187fa7aa33851d8407d5 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 19 Feb 2025 18:12:34 +0100
Subject: [PATCH 6/6] Updates breadcrumb items for storage components

Removes "User Preferences" breadcrumb item from StorageManager, StorageDashboard, and OverviewPage components as they are not tied to the user preferences
---
 .../components/User/DiskUsage/Management/StorageManager.vue | 1 -
 client/src/components/User/DiskUsage/StorageDashboard.vue   | 2 +-
 .../User/DiskUsage/Visualizations/OverviewPage.vue          | 6 +-----
 3 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/client/src/components/User/DiskUsage/Management/StorageManager.vue b/client/src/components/User/DiskUsage/Management/StorageManager.vue
index e310d348c92..7a59e54f858 100644
--- a/client/src/components/User/DiskUsage/Management/StorageManager.vue
+++ b/client/src/components/User/DiskUsage/Management/StorageManager.vue
@@ -18,7 +18,6 @@ interface ModalDialog {
 }
 
 const breadcrumbItems = [
-    { title: "User Preferences", to: "/user" },
     { title: "Storage Dashboard", to: "StorageDashboard" },
     { title: "Manage your account storage", superText: "(Beta)" },
 ];
diff --git a/client/src/components/User/DiskUsage/StorageDashboard.vue b/client/src/components/User/DiskUsage/StorageDashboard.vue
index 09c67730e3c..4c7b7fa9a80 100644
--- a/client/src/components/User/DiskUsage/StorageDashboard.vue
+++ b/client/src/components/User/DiskUsage/StorageDashboard.vue
@@ -40,7 +40,7 @@ const texts = reactive({
     },
 });
 
-const breadcrumbItems = [{ title: "User Preferences", to: "/user" }, { title: texts.title }];
+const breadcrumbItems = [{ title: texts.title }];
 
 function goToStorageManager() {
     router.push({ name: "StorageManager" });
diff --git a/client/src/components/User/DiskUsage/Visualizations/OverviewPage.vue b/client/src/components/User/DiskUsage/Visualizations/OverviewPage.vue
index e3f52fc3ddf..604cbe5eaf2 100644
--- a/client/src/components/User/DiskUsage/Visualizations/OverviewPage.vue
+++ b/client/src/components/User/DiskUsage/Visualizations/OverviewPage.vue
@@ -7,11 +7,7 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const breadcrumbItems = [
-    { title: "User Preferences", to: "/user" },
-    { title: "Storage Dashboard", to: "StorageDashboard" },
-    { title: props.title },
-];
+const breadcrumbItems = [{ title: "Storage Dashboard", to: "StorageDashboard" }, { title: props.title }];
 </script>
 
 <template>