feat(back-button): add 'backButtonDefaultHref' property to Ionic Config (#20491)

closes #19305

Co-authored-by: Brandy Carney <brandy@ionic.io>

angular/src/directives/navigation/ion-back-button.ts

@@ -1,5 +1,6 @@
 import { Directive, HostListener, Optional } from '@angular/core';
 
+import { Config } from '../../providers/config';
 import { NavController } from '../../providers/nav-controller';
 
 import { IonRouterOutlet } from './ion-router-outlet';
@@ -14,7 +15,8 @@ export class IonBackButtonDelegate {
 
   constructor(
     @Optional() private routerOutlet: IonRouterOutlet,
-    private navCtrl: NavController
+    private navCtrl: NavController,
+    private config: Config
   ) {}
 
   /**
@@ -22,11 +24,13 @@ export class IonBackButtonDelegate {
    */
   @HostListener('click', ['$event'])
   onClick(ev: Event) {
+    const defaultHref = this.defaultHref || this.config.get('backButtonDefaultHref');
+
     if (this.routerOutlet && this.routerOutlet.canGoBack()) {
       this.routerOutlet.pop();
       ev.preventDefault();
-    } else if (this.defaultHref != null) {
+    } else if (defaultHref != null) {
-      this.navCtrl.navigateBack(this.defaultHref);
+      this.navCtrl.navigateBack(defaultHref);
       ev.preventDefault();
     }
   }

core/src/components/back-button/back-button.tsx

@@ -31,7 +31,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
   /**
    * The url to navigate back to by default when there is no history.
    */
-  @Prop() defaultHref?: string;
+  @Prop({ mutable: true }) defaultHref?: string;
 
   /**
    * If `true`, the user cannot interact with the button.
@@ -53,6 +53,12 @@ export class BackButton implements ComponentInterface, ButtonInterface {
    */
   @Prop() type: 'submit' | 'reset' | 'button' = 'button';
 
+  componentWillLoad() {
+    if (this.defaultHref === undefined) {
+      this.defaultHref = config.get('backButtonDefaultHref');
+    }
+  }
+
   get backButtonIcon() {
     const icon = this.icon;
     if (icon != null) {

core/src/components/back-button/test/back-button.spec.ts

@@ -70,4 +70,37 @@ describe('back button', () => {
 
   });
 
+  describe('backButtonDefaultHref', () => {
+
+    it('set custom defaultHref in the config', async () => {
+      config.reset({
+        backButtonDefaultHref: 'custom-default-href-config'
+      });
+      const bb = await newBackButton();
+      expect(bb.defaultHref).toBe('custom-default-href-config');
+    });
+
+    it('set custom defaultHref on the instance', async () => {
+      const bb = await newBackButton();
+      bb.defaultHref = 'custom-default-href';
+      expect(bb.defaultHref).toBe('custom-default-href');
+    });
+
+    it('set custom defaultHref on the instance, override config', async () => {
+      const bb = await newBackButton();
+      bb.defaultHref = 'custom-default-href';
+
+      config.reset({
+        backButtonDefaultHref: 'custom-default-href-config'
+      });
+
+      expect(bb.defaultHref).toBe('custom-default-href');
+
+      const bb2 = await newBackButton();
+      bb2.defaultHref = 'custom-default-href-second';
+      expect(bb2.defaultHref).toBe('custom-default-href-second');
+    });
+
+  });
+
 });

core/src/utils/config.ts

@@ -40,6 +40,11 @@ export interface IonicConfig {
    */
   backButtonText?: string;
 
+  /**
+   * Overrides the default defaultHref in all `<ion-back-button>` components.
+   */
+  backButtonDefaultHref?: string;
+
   /**
    * Overrides the default icon in all `<ion-menu-button>` components.
    */

packages/react-router/src/ReactRouter/Router.tsx

@@ -448,6 +448,9 @@ export class RouteManager extends React.Component<RouteManagerProps, RouteManage
   }
 
   navigateBack(defaultHref?: string) {
+    const config = getConfig();
+    defaultHref = defaultHref ? defaultHref : config && config.get('backButtonDefaultHref');
+
     const { view: leavingView } = this.state.viewStacks.findViewInfoById(this.activeIonPageId);
     if (leavingView) {
       if (leavingView.id === leavingView.prevId) {