[7.8] Refactoring nav links and header components (#66685)

docs/development/core/public/kibana-plugin-core-public.chromenavlink.euiicontype.md

@@ -4,7 +4,7 @@
 
 ## ChromeNavLink.euiIconType property
 
-A EUI iconType that will be used for the app's icon. This icon takes precendence over the `icon` property.
+A EUI iconType that will be used for the app's icon. This icon takes precedence over the `icon` property.
 
 <b>Signature:</b>
 

docs/development/core/public/kibana-plugin-core-public.chromenavlink.href.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [ChromeNavLink](./kibana-plugin-core-public.chromenavlink.md) &gt; [href](./kibana-plugin-core-public.chromenavlink.href.md)
+
+## ChromeNavLink.href property
+
+Settled state between `url`<!-- -->, `baseUrl`<!-- -->, and `active`
+
+<b>Signature:</b>
+
+```typescript
+readonly href?: string;
+```

docs/development/core/public/kibana-plugin-core-public.chromenavlink.md

@@ -20,8 +20,9 @@ export interface ChromeNavLink
 |  [category](./kibana-plugin-core-public.chromenavlink.category.md) | <code>AppCategory</code> | The category the app lives in |
 |  [disabled](./kibana-plugin-core-public.chromenavlink.disabled.md) | <code>boolean</code> | Disables a link from being clickable. |
 |  [disableSubUrlTracking](./kibana-plugin-core-public.chromenavlink.disablesuburltracking.md) | <code>boolean</code> | A flag that tells legacy chrome to ignore the link when tracking sub-urls |
-|  [euiIconType](./kibana-plugin-core-public.chromenavlink.euiicontype.md) | <code>string</code> | A EUI iconType that will be used for the app's icon. This icon takes precendence over the <code>icon</code> property. |
+|  [euiIconType](./kibana-plugin-core-public.chromenavlink.euiicontype.md) | <code>string</code> | A EUI iconType that will be used for the app's icon. This icon takes precedence over the <code>icon</code> property. |
 |  [hidden](./kibana-plugin-core-public.chromenavlink.hidden.md) | <code>boolean</code> | Hides a link from the navigation. |
+|  [href](./kibana-plugin-core-public.chromenavlink.href.md) | <code>string</code> | Settled state between <code>url</code>, <code>baseUrl</code>, and <code>active</code> |
 |  [icon](./kibana-plugin-core-public.chromenavlink.icon.md) | <code>string</code> | A URL to an image file used as an icon. Used as a fallback if <code>euiIconType</code> is not provided. |
 |  [id](./kibana-plugin-core-public.chromenavlink.id.md) | <code>string</code> | A unique identifier for looking up links. |
 |  [linkToLastSubUrl](./kibana-plugin-core-public.chromenavlink.linktolastsuburl.md) | <code>boolean</code> | Whether or not the subUrl feature should be enabled. |

docs/development/core/public/kibana-plugin-core-public.chromenavlinkupdateablefields.md

@@ -8,5 +8,5 @@
 <b>Signature:</b>
 
 ```typescript
-export declare type ChromeNavLinkUpdateableFields = Partial<Pick<ChromeNavLink, 'active' | 'disabled' | 'hidden' | 'url' | 'subUrlBase'>>;
+export declare type ChromeNavLinkUpdateableFields = Partial<Pick<ChromeNavLink, 'active' | 'disabled' | 'hidden' | 'url' | 'subUrlBase' | 'href'>>;
 ```

docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinput.md

@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-QueryStringInput: React.FC<Pick<Props, "query" | "placeholder" | "onChange" | "onSubmit" | "prepend" | "indexPatterns" | "disableAutoFocus" | "screenTitle" | "persistedLog" | "bubbleSubmitEvent" | "languageSwitcherPopoverAnchorPosition" | "dataTestSubj">>
+QueryStringInput: React.FC<Pick<Props, "query" | "placeholder" | "onChange" | "onSubmit" | "prepend" | "indexPatterns" | "dataTestSubj" | "screenTitle" | "disableAutoFocus" | "persistedLog" | "bubbleSubmitEvent" | "languageSwitcherPopoverAnchorPosition">>
 ```

docs/development/plugins/data/public/kibana-plugin-plugins-data-public.searchbar.md

@@ -7,7 +7,7 @@
 <b>Signature:</b>
 
 ```typescript
-SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "intl" | "indexPatterns" | "refreshInterval" | "screenTitle" | "dataTestSubj" | "customSubmitButton" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "onRefresh" | "timeHistory" | "onFiltersUpdated" | "onRefreshChange">, "query" | "isLoading" | "filters" | "indexPatterns" | "refreshInterval" | "screenTitle" | "dataTestSubj" | "customSubmitButton" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "onRefresh" | "timeHistory" | "onFiltersUpdated" | "onRefreshChange">, any> & {
-    WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "intl" | "indexPatterns" | "refreshInterval" | "screenTitle" | "dataTestSubj" | "customSubmitButton" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "onRefresh" | "timeHistory" | "onFiltersUpdated" | "onRefreshChange"> & ReactIntl.InjectedIntlProps>;
+SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "onRefresh" | "onRefreshChange" | "refreshInterval" | "intl" | "indexPatterns" | "dataTestSubj" | "customSubmitButton" | "screenTitle" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "timeHistory" | "onFiltersUpdated">, "query" | "isLoading" | "filters" | "onRefresh" | "onRefreshChange" | "refreshInterval" | "indexPatterns" | "dataTestSubj" | "customSubmitButton" | "screenTitle" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "timeHistory" | "onFiltersUpdated">, any> & {
+    WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "onRefresh" | "onRefreshChange" | "refreshInterval" | "intl" | "indexPatterns" | "dataTestSubj" | "customSubmitButton" | "screenTitle" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "timeHistory" | "onFiltersUpdated"> & ReactIntl.InjectedIntlProps>;
 }
 ```

src/core/public/chrome/chrome_service.tsx

@@ -36,7 +36,7 @@ import { ChromeDocTitle, DocTitleService } from './doc_title';
 import { ChromeNavControls, NavControlsService } from './nav_controls';
 import { ChromeNavLinks, NavLinksService } from './nav_links';
 import { ChromeRecentlyAccessed, RecentlyAccessedService } from './recently_accessed';
-import { Header, LoadingIndicator } from './ui';
+import { Header } from './ui';
 import { NavType } from './ui/header';
 import { ChromeHelpExtensionMenuLink } from './ui/header/header_help_menu';
 export { ChromeNavControls, ChromeRecentlyAccessed, ChromeDocTitle };
@@ -214,31 +214,29 @@ export class ChromeService {
       docTitle,
 
       getHeaderComponent: () => (
-        <React.Fragment>
-          <LoadingIndicator loadingCount$={http.getLoadingCount$()} />
-          <Header
-            application={application}
-            appTitle$={appTitle$.pipe(takeUntil(this.stop$))}
-            badge$={badge$.pipe(takeUntil(this.stop$))}
-            basePath={http.basePath}
-            breadcrumbs$={breadcrumbs$.pipe(takeUntil(this.stop$))}
-            kibanaDocLink={docLinks.links.kibana}
-            forceAppSwitcherNavigation$={navLinks.getForceAppSwitcherNavigation$()}
-            helpExtension$={helpExtension$.pipe(takeUntil(this.stop$))}
-            helpSupportUrl$={helpSupportUrl$.pipe(takeUntil(this.stop$))}
-            homeHref={http.basePath.prepend('/app/kibana#/home')}
-            isVisible$={this.isVisible$}
-            kibanaVersion={injectedMetadata.getKibanaVersion()}
-            legacyMode={injectedMetadata.getLegacyMode()}
-            navLinks$={navLinks.getNavLinks$()}
-            recentlyAccessed$={recentlyAccessed.get$()}
-            navControlsLeft$={navControls.getLeft$()}
-            navControlsRight$={navControls.getRight$()}
-            onIsLockedUpdate={setIsNavDrawerLocked}
-            isLocked$={getIsNavDrawerLocked$}
-            navType$={getNavType$}
-          />
-        </React.Fragment>
+        <Header
+          loadingCount$={http.getLoadingCount$()}
+          application={application}
+          appTitle$={appTitle$.pipe(takeUntil(this.stop$))}
+          badge$={badge$.pipe(takeUntil(this.stop$))}
+          basePath={http.basePath}
+          breadcrumbs$={breadcrumbs$.pipe(takeUntil(this.stop$))}
+          kibanaDocLink={docLinks.links.kibana}
+          forceAppSwitcherNavigation$={navLinks.getForceAppSwitcherNavigation$()}
+          helpExtension$={helpExtension$.pipe(takeUntil(this.stop$))}
+          helpSupportUrl$={helpSupportUrl$.pipe(takeUntil(this.stop$))}
+          homeHref={http.basePath.prepend('/app/kibana#/home')}
+          isVisible$={this.isVisible$}
+          kibanaVersion={injectedMetadata.getKibanaVersion()}
+          legacyMode={injectedMetadata.getLegacyMode()}
+          navLinks$={navLinks.getNavLinks$()}
+          recentlyAccessed$={recentlyAccessed.get$()}
+          navControlsLeft$={navControls.getLeft$()}
+          navControlsRight$={navControls.getRight$()}
+          onIsLockedUpdate={setIsNavDrawerLocked}
+          isLocked$={getIsNavDrawerLocked$}
+          navType$={getNavType$}
+        />
       ),
 
       setAppTitle: (appTitle: string) => appTitle$.next(appTitle),

src/core/public/chrome/nav_links/nav_link.ts

@@ -62,7 +62,7 @@ export interface ChromeNavLink {
 
   /**
    * A EUI iconType that will be used for the app's icon. This icon
-   * takes precendence over the `icon` property.
+   * takes precedence over the `icon` property.
    */
   readonly euiIconType?: string;
 
@@ -72,6 +72,14 @@ export interface ChromeNavLink {
    */
   readonly icon?: string;
 
+  /**
+   * Settled state between `url`, `baseUrl`, and `active`
+   *
+   * @internalRemarks
+   * This should be required once legacy apps are gone.
+   */
+  readonly href?: string;
+
   /** LEGACY FIELDS */
 
   /**
@@ -144,7 +152,7 @@ export interface ChromeNavLink {
 
 /** @public */
 export type ChromeNavLinkUpdateableFields = Partial<
-  Pick<ChromeNavLink, 'active' | 'disabled' | 'hidden' | 'url' | 'subUrlBase'>
+  Pick<ChromeNavLink, 'active' | 'disabled' | 'hidden' | 'url' | 'subUrlBase' | 'href'>
 >;
 
 export class NavLinkWrapper {
@@ -162,7 +170,7 @@ export class NavLinkWrapper {
 
   public update(newProps: ChromeNavLinkUpdateableFields) {
     // Enforce limited properties at runtime for JS code
-    newProps = pick(newProps, ['active', 'disabled', 'hidden', 'url', 'subUrlBase']);
+    newProps = pick(newProps, ['active', 'disabled', 'hidden', 'url', 'subUrlBase', 'href']);
     return new NavLinkWrapper({ ...this.properties, ...newProps });
   }
 }

src/core/public/chrome/nav_links/to_nav_link.ts

@@ -24,25 +24,38 @@ import { appendAppPath } from '../../application/utils';
 
 export function toNavLink(app: App | LegacyApp, basePath: IBasePath): NavLinkWrapper {
   const useAppStatus = app.navLinkStatus === AppNavLinkStatus.default;
-  const baseUrl = isLegacyApp(app) ? basePath.prepend(app.appUrl) : basePath.prepend(app.appRoute!);
+  const relativeBaseUrl = isLegacyApp(app)
+    ? basePath.prepend(app.appUrl)
+    : basePath.prepend(app.appRoute!);
+  const url = relativeToAbsolute(appendAppPath(relativeBaseUrl, app.defaultPath));
+  const baseUrl = relativeToAbsolute(relativeBaseUrl);
+
   return new NavLinkWrapper({
     ...app,
     hidden: useAppStatus
       ? app.status === AppStatus.inaccessible
       : app.navLinkStatus === AppNavLinkStatus.hidden,
     disabled: useAppStatus ? false : app.navLinkStatus === AppNavLinkStatus.disabled,
     legacy: isLegacyApp(app),
-    baseUrl: relativeToAbsolute(baseUrl),
+    baseUrl,
     ...(isLegacyApp(app)
       ? {}
       : {
-          url: relativeToAbsolute(appendAppPath(baseUrl, app.defaultPath)),
+          href: url,
+          url,
         }),
   });
 }
 
-function relativeToAbsolute(url: string) {
-  // convert all link urls to absolute urls
+/**
+ * @param {string} url - a relative or root relative url.  If a relative path is given then the
+ * absolute url returned will depend on the current page where this function is called from. For example
+ * if you are on page "http://www.mysite.com/shopping/kids" and you pass this function "adults", you would get
+ * back "http://www.mysite.com/shopping/adults".  If you passed this function a root relative path, or one that
+ * starts with a "/", for example "/account/cart", you would get back "http://www.mysite.com/account/cart".
+ * @return {string} the relative url transformed into an absolute url
+ */
+export function relativeToAbsolute(url: string) {
   const a = document.createElement('a');
   a.setAttribute('href', url);
   return a.href;

src/core/public/chrome/recently_accessed/recently_accessed_service.ts

@@ -76,7 +76,7 @@ export interface ChromeRecentlyAccessed {
    *
    * @param link a relative URL to the resource (not including the {@link HttpStart.basePath | `http.basePath`})
    * @param label the label to display in the UI
-   * @param id a unique string used to de-duplicate the recently accessed llist.
+   * @param id a unique string used to de-duplicate the recently accessed list.
    */
   add(link: string, label: string, id: string): void;