Merge pull request #19656 from itisAliRH/add-breadcrumb-heading-component

Add Breadcrumb Heading Component

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>

client/src/components/User/DiskUsage/Management/StorageManager.vue

@@ -11,11 +11,17 @@ 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: "Storage Dashboard", to: "StorageDashboard" },
+    { title: "Manage your account storage", superText: "(Beta)" },
+];
+
 const { config } = useConfig();
 const { cleanupCategories } = useCleanupCategories();
 
@@ -50,11 +56,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 +99,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>

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: 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"

client/src/components/User/DiskUsage/Visualizations/OverviewPage.vue

@@ -1,19 +1,19 @@
 <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: "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>

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">