[8.x] hide kibana version in help menu on serverless (#193024) (#193572)

# Backport This will backport the following commits from `main` to `8.x`: - [hide kibana version in help menu on serverless (#193024)](https://github.com/elastic/kibana/pull/193024)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) \r\n\r\n### Visuals\r\n\r\n#### stateful\r\n<img width=\"1492\" alt=\"Screenshot 2024-09-18 at 17 52 19\"\r\nsrc=\"https://github.com/user-attachments/assets/9c2d83b3-0b3b-4a2a-a0df-246de58abfaf\">\r\n\r\n#### serverless\r\n<img width=\"1493\" alt=\"Screenshot 2024-09-18 at 18 01 31\"\r\nsrc=\"https://github.com/user-attachments/assets/83740070-e2ec-4b3c-953b-a4e5c3121375\">","sha":"fd9691183ec116ea8644640e6e81f5483cf06666","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:SharedUX","backport:prev-minor","v8.16.0"],"title":"hide kibana version in help menu on serverless","number":193024,"url":"https://github.com/elastic/kibana/pull/193024","mergeCommit":{"message":"hide kibana version in help menu on serverless (#193024)\n\n## Summary\r\n\r\nCloses #175909 and then some.\r\n\r\nThis PR introduces changes that hides the kibana version number from\r\nbeing displayed to the user in serverless, where it makes sense the\r\nversion number is entirely hidden in other cases, where the version\r\nnumber denotes the availability of specific feature the month of release\r\nis replaced with the version number.\r\n\r\n**P.S.**\r\nit's worth noting there are other usages of the kibana version number,\r\nbut they aren't displayed rather used as values for either link params\r\nor function invocations.\r\n\r\n\r\n### How to test;\r\n\r\n- Start up an ES serverless project of your choice; like so ` yarn es\r\nserverless --projectType oblt --license trial`\r\n- Start up an accomapnying kibana project that mirrors the ES project\r\nyou started choose, for our example we'd run; `yarn serverless-oblt`\r\n- Verify that the help menu no longer shows the version number in a\r\nserverless project.\r\n- Verify the version number is also still displayed in stateful kibana\r\n\r\n\r\n\r\n### Visuals\r\n\r\n#### stateful\r\n<img width=\"1492\" alt=\"Screenshot 2024-09-18 at 17 52 19\"\r\nsrc=\"https://github.com/user-attachments/assets/9c2d83b3-0b3b-4a2a-a0df-246de58abfaf\">\r\n\r\n#### serverless\r\n<img width=\"1493\" alt=\"Screenshot 2024-09-18 at 18 01 31\"\r\nsrc=\"https://github.com/user-attachments/assets/83740070-e2ec-4b3c-953b-a4e5c3121375\">","sha":"fd9691183ec116ea8644640e6e81f5483cf06666"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193024","number":193024,"mergeCommit":{"message":"hide kibana version in help menu on serverless (#193024)\n\n## Summary\r\n\r\nCloses #175909 and then some.\r\n\r\nThis PR introduces changes that hides the kibana version number from\r\nbeing displayed to the user in serverless, where it makes sense the\r\nversion number is entirely hidden in other cases, where the version\r\nnumber denotes the availability of specific feature the month of release\r\nis replaced with the version number.\r\n\r\n**P.S.**\r\nit's worth noting there are other usages of the kibana version number,\r\nbut they aren't displayed rather used as values for either link params\r\nor function invocations.\r\n\r\n\r\n### How to test;\r\n\r\n- Start up an ES serverless project of your choice; like so ` yarn es\r\nserverless --projectType oblt --license trial`\r\n- Start up an accomapnying kibana project that mirrors the ES project\r\nyou started choose, for our example we'd run; `yarn serverless-oblt`\r\n- Verify that the help menu no longer shows the version number in a\r\nserverless project.\r\n- Verify the version number is also still displayed in stateful kibana\r\n\r\n\r\n\r\n### Visuals\r\n\r\n#### stateful\r\n<img width=\"1492\" alt=\"Screenshot 2024-09-18 at 17 52 19\"\r\nsrc=\"https://github.com/user-attachments/assets/9c2d83b3-0b3b-4a2a-a0df-246de58abfaf\">\r\n\r\n#### serverless\r\n<img width=\"1493\" alt=\"Screenshot 2024-09-18 at 18 01 31\"\r\nsrc=\"https://github.com/user-attachments/assets/83740070-e2ec-4b3c-953b-a4e5c3121375\">","sha":"fd9691183ec116ea8644640e6e81f5483cf06666"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Eyo O. Eyo <7893459+eokoneyo@users.noreply.github.com>
2025-04-24 09:48:58 -04:00 · 2024-09-21 00:49:33 +10:00 · 2024-09-21 00:49:33 +10:00 · 2f79ea6a14
commit 2f79ea6a14
parent ac64f5216e
12 changed files with 83 additions and 46 deletions
--- a/packages/content-management/content_insights/content_insights_public/src/components/views_stats/views_stats.tsx
+++ b/packages/content-management/content_insights/content_insights_public/src/components/views_stats/views_stats.tsx
@ -86,7 +86,7 @@ const NoViewsTip = () => (
    content={
      <FormattedMessage
        id="contentManagement.contentEditor.viewsStats.noViewsTip"
-        defaultMessage="Views are counted everytime someone opens a dashboard (after version 8.16)"
+        defaultMessage="Views are counted every time someone opens a dashboard"
      />
    }
  />
--- a/packages/content-management/user_profiles/src/components/user_missing_tip.tsx
+++ b/packages/content-management/user_profiles/src/components/user_missing_tip.tsx
@ -16,7 +16,7 @@ export const NoCreatorTip = (props: { iconType?: IconType }) => (
    content={
      <FormattedMessage
        id="contentManagement.userProfiles.noCreatorTip"
-        defaultMessage="Creators are assigned when objects are created (after version 8.14)"
+        defaultMessage="Creators are assigned when objects are created"
      />
    }
    {...props}
@ -28,7 +28,7 @@ export const NoUpdaterTip = (props: { iconType?: string }) => (
    content={
      <FormattedMessage
        id="contentManagement.userProfiles.noUpdaterTip"
-        defaultMessage="Updated by is set when objects are updated (after version 8.14)"
+        defaultMessage="Updated by is set when objects are updated"
      />
    }
    {...props}
--- a/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx
@ -422,6 +422,7 @@ export class ChromeService {

            return (
              <ProjectHeader
+                isServerless={this.isServerless}
                application={application}
                globalHelpExtensionMenuLinks$={globalHelpExtensionMenuLinks$}
                actionMenu$={application.currentActionMenu$}
@ -452,6 +453,7 @@ export class ChromeService {

        return (
          <Header
+            isServerless={this.isServerless}
            loadingCount$={http.getLoadingCount$()}
            application={application}
            headerBanner$={headerBanner$.pipe(takeUntil(this.stop$))}
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header.test.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header.test.tsx
@ -96,6 +96,7 @@ describe('Header', () => {
        breadcrumbsAppendExtension$={breadcrumbsAppendExtension$}
        headerBanner$={headerBanner$}
        helpMenuLinks$={of([])}
+        isServerless={false}
      />
    );
    expect(component.find('EuiHeader').exists()).toBeTruthy();
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header.tsx
@ -77,6 +77,7 @@ export interface HeaderProps {
  loadingCount$: ReturnType<HttpStart['getLoadingCount$']>;
  onIsLockedUpdate: OnIsLockedUpdate;
  customBranding$: Observable<CustomBranding>;
+  isServerless: boolean;
 }

 export function Header({
@ -90,6 +91,7 @@ export function Header({
  breadcrumbsAppendExtension$,
  globalHelpExtensionMenuLinks$,
  customBranding$,
+  isServerless,
  ...observables
 }: HeaderProps) {
  const [isNavOpen, setIsNavOpen] = useState(false);
@ -152,6 +154,7 @@ export function Header({
                    <HeaderNavControls navControls$={observables.navControlsExtension$} />
                  </EuiHideFor>,
                  <HeaderHelpMenu
+                    isServerless={isServerless}
                    globalHelpExtensionMenuLinks$={globalHelpExtensionMenuLinks$}
                    helpExtension$={observables.helpExtension$}
                    helpSupportUrl$={observables.helpSupportUrl$}
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_help_menu.test.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_help_menu.test.tsx
@ -7,7 +7,7 @@
 * License v3.0 only", or the "Server Side Public License, v 1".
 */

-import React from 'react';
+import React, { type ComponentProps } from 'react';
 import { BehaviorSubject, of } from 'rxjs';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { applicationServiceMock } from '@kbn/core-application-browser-mocks';
@ -16,22 +16,32 @@ import { docLinksServiceMock } from '@kbn/core-doc-links-browser-mocks';
 import { HeaderHelpMenu } from './header_help_menu';

 describe('HeaderHelpMenu', () => {
-  test('it only renders the default content', () => {
-    const application = applicationServiceMock.createInternalStartContract();
-    const helpExtension$ = new BehaviorSubject(undefined);
-    const helpSupportUrl$ = new BehaviorSubject('');
+  const application = applicationServiceMock.createInternalStartContract();

+  const defaultComponentProps: Pick<
+    ComponentProps<typeof HeaderHelpMenu>,
+    | 'kibanaVersion'
+    | 'docLinks'
+    | 'navigateToUrl'
+    | 'defaultContentLinks$'
+    | 'helpExtension$'
+    | 'helpSupportUrl$'
+    | 'kibanaDocLink'
+    | 'isServerless'
+  > = {
+    navigateToUrl: application.navigateToUrl,
+    kibanaVersion: 'version',
+    docLinks: docLinksServiceMock.createStartContract(),
+    defaultContentLinks$: of([]),
+    helpExtension$: new BehaviorSubject(undefined),
+    helpSupportUrl$: new BehaviorSubject(''),
+    kibanaDocLink: '',
+    isServerless: false,
+  };
+
+  test('it only renders the default content', () => {
    const component = mountWithIntl(
-      <HeaderHelpMenu
-        navigateToUrl={application.navigateToUrl}
-        globalHelpExtensionMenuLinks$={of([])}
-        helpExtension$={helpExtension$}
-        helpSupportUrl$={helpSupportUrl$}
-        kibanaVersion={'version'}
-        kibanaDocLink={''}
-        docLinks={docLinksServiceMock.createStartContract()}
-        defaultContentLinks$={of([])}
-      />
+      <HeaderHelpMenu {...defaultComponentProps} globalHelpExtensionMenuLinks$={of([])} />
    );

    expect(component.find('EuiButtonEmpty').length).toBe(1); // only the toggle view on/off button
@ -48,14 +58,22 @@ describe('HeaderHelpMenu', () => {
    ]);
  });

-  test('it renders the global custom content + the default content', () => {
-    const application = applicationServiceMock.createInternalStartContract();
-    const helpExtension$ = new BehaviorSubject(undefined);
-    const helpSupportUrl$ = new BehaviorSubject('');
-
+  test("it doesn't render the version details when the prop isServerless is true", () => {
    const component = mountWithIntl(
      <HeaderHelpMenu
-        navigateToUrl={application.navigateToUrl}
+        {...defaultComponentProps}
+        isServerless={true}
+        globalHelpExtensionMenuLinks$={of([])}
+      />
+    );
+
+    expect(component.find('[data-test-subj="kbnVersionString"]').exists()).toBeFalsy();
+  });
+
+  test('it renders the global custom content + the default content', () => {
+    const component = mountWithIntl(
+      <HeaderHelpMenu
+        {...defaultComponentProps}
        globalHelpExtensionMenuLinks$={of([
          {
            linkType: 'custom',
@ -71,12 +89,6 @@ describe('HeaderHelpMenu', () => {
            priority: 100,
          },
        ])}
-        helpExtension$={helpExtension$}
-        helpSupportUrl$={helpSupportUrl$}
-        kibanaVersion={'version'}
-        kibanaDocLink={''}
-        docLinks={docLinksServiceMock.createStartContract()}
-        defaultContentLinks$={of([])}
      />
    );

--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_help_menu.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_help_menu.tsx
@ -81,6 +81,7 @@ interface Props {
  kibanaVersion: string;
  kibanaDocLink: string;
  docLinks: DocLinksStart;
+  isServerless: boolean;
 }

 interface State {
@ -174,13 +175,19 @@ export class HeaderHelpMenu extends Component<Props, State> {
                />
              </h2>
            </EuiFlexItem>
-            <EuiFlexItem grow={false} className="chrHeaderHelpMenu__version">
-              <FormattedMessage
-                id="core.ui.chrome.headerGlobalNav.helpMenuVersion"
-                defaultMessage="v {version}"
-                values={{ version: kibanaVersion }}
-              />
-            </EuiFlexItem>
+            {!this.props.isServerless && (
+              <EuiFlexItem
+                grow={false}
+                className="chrHeaderHelpMenu__version"
+                data-test-subj="kbnVersionString"
+              >
+                <FormattedMessage
+                  id="core.ui.chrome.headerGlobalNav.helpMenuVersion"
+                  defaultMessage="v {version}"
+                  values={{ version: kibanaVersion }}
+                />
+              </EuiFlexItem>
+            )}
          </EuiFlexGroup>
        </EuiPopoverTitle>

--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.test.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.test.tsx
@ -38,6 +38,7 @@ describe('Header', () => {
    isSideNavCollapsed$: Rx.of(false),
    prependBasePath: (str) => `hello/world/${str}`,
    toggleSideNav: jest.fn(),
+    isServerless: false,
  };

  it('renders', async () => {
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx
@ -33,7 +33,7 @@ import { MountPoint } from '@kbn/core-mount-utils-browser';
 import { i18n } from '@kbn/i18n';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import { Router } from '@kbn/shared-ux-router';
-import React, { useCallback } from 'react';
+import React, { useCallback, type ComponentProps } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { debounceTime, Observable } from 'rxjs';
 import type { CustomBranding } from '@kbn/core-custom-branding-common';
@ -111,7 +111,7 @@ const headerStrings = {
  },
 };

-export interface Props {
+export interface Props extends Pick<ComponentProps<typeof HeaderHelpMenu>, 'isServerless'> {
  headerBanner$: Observable<ChromeUserBanner | undefined>;
  breadcrumbs$: Observable<ChromeBreadcrumb[]>;
  actionMenu$: Observable<MountPoint | undefined>;
@ -227,6 +227,7 @@ export const ProjectHeader = ({
  docLinks,
  toggleSideNav,
  customBranding$,
+  isServerless,
  ...observables
 }: Props) => {
  const headerActionMenuMounter = useHeaderActionMenuMounter(observables.actionMenu$);
@ -293,6 +294,7 @@ export const ProjectHeader = ({

              <EuiHeaderSectionItem>
                <HeaderHelpMenu
+                  isServerless={isServerless}
                  globalHelpExtensionMenuLinks$={observables.globalHelpExtensionMenuLinks$}
                  helpExtension$={observables.helpExtension$}
                  helpSupportUrl$={observables.helpSupportUrl$}
--- a/src/plugins/newsfeed/public/components/flyout_list.tsx
+++ b/src/plugins/newsfeed/public/components/flyout_list.tsx
@ -30,10 +30,12 @@ import { NewsfeedItem } from '../types';
 import { NewsEmptyPrompt } from './empty_news';
 import { NewsLoadingPrompt } from './loading_news';

-export const NewsfeedFlyout = (props: Partial<EuiFlyoutProps> & { showPlainSpinner: boolean }) => {
+export const NewsfeedFlyout = (
+  props: Partial<EuiFlyoutProps> & { showPlainSpinner: boolean; isServerless: boolean }
+) => {
  const { newsFetchResult, setFlyoutVisible } = useContext(NewsfeedContext);
  const closeFlyout = useCallback(() => setFlyoutVisible(false), [setFlyoutVisible]);
-  const { showPlainSpinner, ...rest } = props;
+  const { showPlainSpinner, isServerless, ...rest } = props;
  return (
    <EuiPortal>
      <EuiFlyout
@ -90,7 +92,7 @@ export const NewsfeedFlyout = (props: Partial<EuiFlyoutProps> & { showPlainSpinn
              </EuiButtonEmpty>
            </EuiFlexItem>
            <EuiFlexItem grow={false}>
-              {newsFetchResult ? (
+              {newsFetchResult && !isServerless ? (
                <EuiText color="subdued" size="s">
                  <p>
                    <FormattedMessage
--- a/src/plugins/newsfeed/public/components/newsfeed_header_nav_button.tsx
+++ b/src/plugins/newsfeed/public/components/newsfeed_header_nav_button.tsx
@ -7,7 +7,7 @@
 * License v3.0 only", or the "Server Side Public License, v 1".
 */

-import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useMemo, useCallback, useRef, ComponentProps } from 'react';
 import { EuiHeaderSectionItemButton, EuiIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { Observable } from 'rxjs';
@ -23,12 +23,12 @@ export interface INewsfeedContext {

 export const NewsfeedContext = React.createContext({} as INewsfeedContext);

-export interface Props {
+export interface Props extends Pick<ComponentProps<typeof NewsfeedFlyout>, 'isServerless'> {
  newsfeedApi: NewsfeedApi;
  hasCustomBranding$: Observable<boolean>;
 }

-export const NewsfeedNavButton = ({ newsfeedApi, hasCustomBranding$ }: Props) => {
+export const NewsfeedNavButton = ({ newsfeedApi, hasCustomBranding$, isServerless }: Props) => {
  const [flyoutVisible, setFlyoutVisible] = useState<boolean>(false);
  const [newsFetchResult, setNewsFetchResult] = useState<FetchResult | null | void>(null);
  const hasCustomBranding = useObservable(hasCustomBranding$, false);
@ -78,6 +78,7 @@ export const NewsfeedNavButton = ({ newsfeedApi, hasCustomBranding$ }: Props) =>
        </EuiHeaderSectionItemButton>
        {flyoutVisible ? (
          <NewsfeedFlyout
+            isServerless={isServerless}
            focusTrapProps={{ shards: [buttonRef] }}
            showPlainSpinner={hasCustomBranding}
          />
--- a/src/plugins/newsfeed/public/plugin.tsx
+++ b/src/plugins/newsfeed/public/plugin.tsx
@ -24,11 +24,13 @@ export type NewsfeedPublicPluginStart = ReturnType<NewsfeedPublicPlugin['start']
 export class NewsfeedPublicPlugin
  implements Plugin<NewsfeedPublicPluginSetup, NewsfeedPublicPluginStart>
 {
+  private readonly isServerless: boolean;
  private readonly kibanaVersion: string;
  private readonly config: NewsfeedPluginBrowserConfig;
  private readonly stop$ = new Rx.ReplaySubject<void>(1);

  constructor(initializerContext: PluginInitializerContext<NewsfeedPluginBrowserConfig>) {
+    this.isServerless = initializerContext.env.packageInfo.buildFlavor === 'serverless';
    this.kibanaVersion = initializerContext.env.packageInfo.version;
    const config = initializerContext.config.get();
    this.config = Object.freeze({
@ -89,7 +91,11 @@ export class NewsfeedPublicPlugin
    const hasCustomBranding$ = core.customBranding.hasCustomBranding$;
    ReactDOM.render(
      <KibanaRenderContextProvider {...core}>
-        <NewsfeedNavButton newsfeedApi={api} hasCustomBranding$={hasCustomBranding$} />
+        <NewsfeedNavButton
+          newsfeedApi={api}
+          hasCustomBranding$={hasCustomBranding$}
+          isServerless={this.isServerless}
+        />
      </KibanaRenderContextProvider>,
      targetDomElement
    );