feat(arc): implement breadcrumb feature #128

vaibhavbhalla2505 · 2025-06-02T16:53:40Z

Description

This PR introduces a reusable breadcrumb component with both static and dynamic rendering support. The component helps users understand their navigation context and easily traverse application routes.

Fixes # (issue)

GH-126

Type of change

Please delete options that are not relevant.

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Intermediate change (work in progress)

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

Test A
Test B

Checklist:

Performed a self-review of my own code
npm test passes on your machine
New tests added or existing tests modified to cover all changes
Code conforms with the style guide
API Documentation in code was updated
Any dependent changes have been merged and published in downstream modules

devyaniofficial · 2025-06-12T12:57:38Z

...cts/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.component.ts

+  templateUrl: './user-title.component.html',
+})
+export class UserTitleComponent {
+  title: any;


devyaniofficial · 2025-06-12T12:59:41Z

...ects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.resolver.ts

+  id: string;
+  title: string;
+}
+@Injectable({providedIn: 'root'})


devyaniofficial · 2025-06-12T13:00:11Z

...ects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.resolver.ts

+import {Observable} from 'rxjs';
+import {TitleService} from './user-title.service';
+
+export interface Title {


create seperate interface folder

devyaniofficial · 2025-06-12T13:00:24Z

...ects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.resolver.ts

+    const id = route.paramMap.get('id');
+    return this.titleService.getTitleById(id);
+  }
+}


devyaniofficial · 2025-06-12T13:00:31Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.service.ts

+import {Injectable} from '@angular/core';
+import {Observable, of} from 'rxjs';
+
+@Injectable({providedIn: 'root'})


devyaniofficial · 2025-06-13T06:02:44Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user/user.component.ts

+  imports: [CommonModule, RouterModule],
+})
+export class UserComponent {
+  user: any;


devyaniofficial · 2025-06-13T06:03:01Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user/user.resolver.ts

+  id: string;
+  name: string;
+  email: string;
+}


create in separate file

devyaniofficial · 2025-06-13T06:03:52Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user/user.resolver.ts

+  name: string;
+  email: string;
+}
+@Injectable({providedIn: 'root'})


remove root from everywhere and add in appropriate modules

devyaniofficial · 2025-06-13T06:06:09Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.service.ts

+    }
+
+    return breadcrumbs;
+  }


modify this function to keep it clean, readable and remove if else if

devyaniofficial · 2025-06-13T06:06:30Z

projects/arc/src/app/app.module.ts

@@ -40,6 +40,7 @@ import {SidebarComponent} from '@project-lib/components/sidebar/sidebar.componen
    BrowserAnimationsModule,
    HeaderComponent,
    SidebarComponent,
+    BreadcrumbComponent,


resolve this

GH-126

devyaniofficial · 2025-06-16T05:05:51Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title.interface.ts

@@ -0,0 +1,9 @@
+export interface User {


user model already exists in the library

done mam,i changed the name

devyaniofficial · 2025-06-16T08:25:31Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title.interface.ts

+  name: string;
+  email: string;
+}
+export interface Title {


use name id model in library core

devyaniofficial · 2025-06-16T08:25:53Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.service.ts

+export class TitleService {
+  private readonly titles = TITLES;
+
+  getTitleById(id: string): Observable<any> {


devyaniofficial · 2025-06-16T08:26:38Z

projects/saas-ui/src/app/on-boarding/components/add-tenant/add-tenant.component.ts

@@ -9,7 +9,7 @@ import { Lead } from '../../../shared/models';
 import { BillingPlanService } from '../../../shared/services/billing-plan-service';
 import { OnBoardingService } from '../../../shared/services/on-boarding-service';

-declare var Stripe: any;
+declare let Stripe: any;



I still see 13-14 places where any is used, fix them

devyaniofficial · 2025-06-16T08:29:29Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.service.ts

+      const paramName = route.routeConfig.path.slice(1);
+      return route.params[paramName] ?? paramName;
+    }
+    return this._toTitleCase(path);


remove so many ifs, use array instead

devyaniofficial · 2025-06-16T08:30:27Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.component.ts

+  expanded = false;
+  constructor(private readonly breadcrumbService: BreadcrumbService) {}
+  ngOnInit(): void {
+    this.breadcrumbs$.subscribe(breadcrumbs => {


destroy observable for all the observables

devyaniofficial · 2025-06-16T08:32:26Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/mock-data.constants.ts

+export const TITLES = [
+  {id: '1', title: 'Contract.pdf'},
+  {id: '2', title: 'Appointment.pdf'},
+];


use types here

Copilot

Pull Request Overview

This PR introduces a reusable breadcrumb component to improve user navigation by supporting both static and dynamic rendering, along with minor updates to existing components such as enhanced Stripe integration and form control refactoring. Key changes include:

Refactoring the add-tenant component for cleaner imports and updated Stripe integration.
Adding a new breadcrumb component and demonstration modules in both arc and arc-lib packages.
Updating routing and module declarations to incorporate breadcrumb routes and functionalities.

Reviewed Changes

Copilot reviewed 26 out of 27 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
projects/saas-ui/src/app/on-boarding/components/add-tenant/add-tenant.component.ts	Reorganized imports and refactored form control definitions for Stripe support.
projects/saas-ui/src/app/main/components/add-plan/add-plan.component.ts	Simplified subscription call by removing an unnecessary callback.
projects/arc/src/app/main/main.module.ts	Added BreadcrumbComponent to the module declarations.
projects/arc/src/app/main/main.component.html	Inserted the new element for navigation context.
projects/arc/src/app/main/main-routing.module.ts	Introduced new routes for dynamic breadcrumb generation with async loading.
projects/arc/src/app/main/introduction/introduction-routing.module.ts	Added a route for the breadcrumb demo component.
projects/arc/src/app/main/constants/components.constant.ts	Updated components constant with a new link for the breadcrumb demo.
projects/arc/src/app/main/bread-crumb-introduction/	New component files demonstrating breadcrumb usage.
projects/arc/src/app/app.module.ts & app-routing.module.ts	Updated module configuration with breadcrumb-related providers and route data.
projects/arc-lib/src/lib/components/breadcrumb/	Added new breadcrumb service, component, and demo files along with associated styles and interfaces.

Copilot · 2025-06-30T06:47:49Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.component.ts

+    this.destroy$.complete();
+  }
+  toggleExpand() {
+    this.expanded = true;


The toggleExpand method always sets 'expanded' to true instead of toggling its state, which prevents collapsing the expanded breadcrumb view. Consider updating it to: this.expanded = !this.expanded;

Suggested change

this.expanded = true;

this.expanded = !this.expanded;

GH-126

Chahat-Chugh · 2025-07-02T07:11:48Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.component.ts

+export class BreadcrumbComponent implements OnInit {
+  breadcrumbs$: Observable<Breadcrumb[]> = this.breadcrumbService.breadcrumbs;
+
+  @Input() staticBreadcrumbs = [];


where is this being used in component?

Chahat-Chugh · 2025-07-02T07:15:33Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.component.html

+      <ng-container *ngFor="let breadcrumb of breadcrumbs; let last = last">
+        <li class="breadcrumb-item" [class.active]="last">
+          <ng-container *ngIf="!breadcrumb.skipLink && !last; else noLink">
+            <a [routerLink]="breadcrumb.url">{{ breadcrumb.label }}</a>


what if a breacrumb label is too long? Shouldn't we trim it ?

Chahat-Chugh · 2025-07-02T07:18:59Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.component.scss

+  .breadcrumb-item {
+    display: flex;
+    align-items: center;
+    font-size: 14px;


Shouldn't we use rem for responsive design?

Chahat-Chugh · 2025-07-02T07:29:26Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.service.ts

+      const paramValue = params.get('id');
+      const fallback =
+        asyncConfig.fallbackLabel?.(params) || this._toTitleCase(path);
+      const loadingLabel = asyncConfig.loadingLabel || fallback;


Do we have a reusable loader service? If yes, then I think it will be better to show loader instead of a text

Chahat-Chugh · 2025-07-02T07:31:41Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.service.ts

+        asyncConfig.fallbackLabel?.(params) || this._toTitleCase(path);
+      const loadingLabel = asyncConfig.loadingLabel || fallback;
+
+      setTimeout(async () => {


why setTimeout?

Chahat-Chugh · 2025-07-02T07:38:18Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.service.ts

+    const asyncConfig = data?.asyncBreadcrumb;
+    if (asyncConfig?.service && asyncConfig?.method) {
+      const params = route.paramMap;
+      const paramValue = params.get('id');


id shouldn't be hardcoded.

Chahat-Chugh · 2025-07-02T07:57:30Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.service.ts

+      setTimeout(async () => {
+        try {
+          const serviceInstance = this.injector.get(asyncConfig.service);
+          const result$ = serviceInstance[asyncConfig.method](paramValue);


This seems a little restrictive as the method can only have 1 required argument of string type.

GH-126

vaibhavbhalla2505 requested a review from Tyagi-Sunny June 2, 2025 16:53

vaibhavbhalla2505 self-assigned this Jun 3, 2025

vaibhavbhalla2505 force-pushed the GH-126 branch 2 times, most recently from b0b35bd to 5c4bd27 Compare June 3, 2025 13:07

vaibhavbhalla2505 requested review from rohit-sourcefuse, Deepika516 and devyaniofficial June 3, 2025 13:08

vaibhavbhalla2505 force-pushed the GH-126 branch from 5c4bd27 to ff4a508 Compare June 9, 2025 05:34

rohit-sourcefuse added the breadcrumb label Jun 9, 2025

rohit-sourcefuse linked an issue Jun 9, 2025 that may be closed by this pull request

Implement Dynamic Breadcrumb Component #126

Open

vaibhavbhalla2505 force-pushed the GH-126 branch from ff4a508 to 8056c69 Compare June 10, 2025 05:48

vaibhavbhalla2505 requested a review from akshatdubeysf June 10, 2025 11:10

rohit-sourcefuse requested a review from Copilot June 10, 2025 12:01

This comment was marked as outdated.

Sign in to view

rohit-sourcefuse requested a review from Copilot June 10, 2025 12:04

This comment was marked as outdated.

Sign in to view

rohit-sourcefuse requested a review from Copilot June 10, 2025 12:09

This comment was marked as outdated.

Sign in to view

rohit-sourcefuse requested a review from Copilot June 10, 2025 12:10

This comment was marked as outdated.

Sign in to view

vaibhavbhalla2505 force-pushed the GH-126 branch 2 times, most recently from d38c74d to 30bb2c2 Compare June 11, 2025 05:56

rohit-sourcefuse requested a review from Copilot June 11, 2025 10:10

This comment was marked as outdated.

Sign in to view

vaibhavbhalla2505 force-pushed the GH-126 branch from 30bb2c2 to b10cd1c Compare June 12, 2025 06:32

devyaniofficial requested changes Jun 13, 2025

View reviewed changes

vaibhavbhalla2505 force-pushed the GH-126 branch from b10cd1c to a876cf9 Compare June 13, 2025 09:16

vaibhavbhalla2505 requested a review from devyaniofficial June 13, 2025 09:18

feat(arc): implement breadcrumb feature

3f9dda5

GH-126

vaibhavbhalla2505 force-pushed the GH-126 branch from a876cf9 to 3f9dda5 Compare June 13, 2025 09:24

devyaniofficial requested changes Jun 16, 2025

View reviewed changes

vaibhavbhalla2505 requested a review from devyaniofficial June 16, 2025 10:52

vaibhavbhalla2505 force-pushed the GH-126 branch 2 times, most recently from 9d7ac29 to 51af24a Compare June 16, 2025 11:04

devyaniofficial approved these changes Jun 20, 2025

View reviewed changes

rohit-sourcefuse requested a review from Copilot June 20, 2025 08:28

This comment was marked as outdated.

Sign in to view

vaibhavbhalla2505 requested review from ajay-prajapati07 and Chahat-Chugh and removed request for Tyagi-Sunny and akshatdubeysf June 20, 2025 09:05

vaibhavbhalla2505 force-pushed the GH-126 branch from 51af24a to 1c196b6 Compare June 23, 2025 10:58

vaibhavbhalla2505 removed the request for review from ajay-prajapati07 June 24, 2025 09:23

vaibhavbhalla2505 force-pushed the GH-126 branch 2 times, most recently from bd931a5 to 3d85028 Compare June 26, 2025 10:53

rohit-sourcefuse requested a review from Copilot June 30, 2025 06:47

Copilot AI reviewed Jun 30, 2025

View reviewed changes

feat(arc): implement breadcrumb feature

c57160d

GH-126

vaibhavbhalla2505 force-pushed the GH-126 branch from 3d85028 to c57160d Compare July 2, 2025 06:22

Chahat-Chugh reviewed Jul 2, 2025

View reviewed changes

feat(arc): implement breadcrumb feature

f6ba77b

GH-126

vaibhavbhalla2505 force-pushed the GH-126 branch from c24bdc0 to f6ba77b Compare July 8, 2025 08:11

vaibhavbhalla2505 requested a review from Chahat-Chugh July 8, 2025 08:21

feat(arc): implement breadcrumb feature #128

Are you sure you want to change the base?

feat(arc): implement breadcrumb feature #128

Uh oh!

Conversation

vaibhavbhalla2505 commented Jun 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

How Has This Been Tested?

Checklist:

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

vaibhavbhalla2505 commented Jun 2, 2025 •

edited

Loading