[UX] Change name of expanded header config (#1802) (#1803)

`useExpandedHeader` instead of `useExpandedMenu`

fixes #1583

Signed-off-by: Josh Romero <rmerqg@amazon.com>
(cherry picked from commit 6ad5d08)

Co-authored-by: Josh Romero <rmerqg@amazon.com>

config/opensearch_dashboards.yml

@@ -175,7 +175,7 @@
 # darkModeUrl: ""
 # faviconUrl: ""
 # applicationTitle: ""
-# useExpandedMenu: false
+# useExpandedHeader: false
 
 # Set the value of this setting to true to capture region blocked warnings and errors
 # for your map rendering services.

src/core/public/chrome/ui/header/header.test.tsx

@@ -142,7 +142,7 @@ describe('Header', () => {
  logo: { defaultUrl: '/foo' },
  mark: { defaultUrl: '/foo' },
  applicationTitle: 'Foobar Dashboards',
- useExpandedMenu: false,
+ useExpandedHeader: false,
  };
  const props = {
  ...mockProps(),

src/core/public/chrome/ui/header/header.tsx

@@ -112,13 +112,13 @@ export function Header({
  const toggleCollapsibleNavRef = createRef<HTMLButtonElement & { euiAnimate: () => void }>();
  const navId = htmlIdGenerator()();
  const className = classnames('hide-for-sharing', 'headerGlobalNav');
- const { useExpandedMenu = true } = branding;
+ const { useExpandedHeader = true } = branding;
 
  return (
  <>
  <header className={className} data-test-subj="headerGlobalNav">
  <div id="globalHeaderBars">
- {useExpandedMenu && (
+ {useExpandedHeader && (
  <EuiHeader
  className="expandedHeader"
  theme="dark"

src/core/public/chrome/ui/header/home_icon.test.tsx

@@ -19,7 +19,7 @@ describe('Home button icon ', () => {
  mark: {},
  applicationTitle: 'custom title',
  assetFolderUrl: 'base/ui/default_branding',
- useExpandedMenu: false,
+ useExpandedHeader: false,
  };
  const component = mountWithIntl(<HomeIcon {...branding} />);
  const icon = component.find('EuiIcon');
@@ -35,7 +35,7 @@ describe('Home button icon ', () => {
  mark: {},
  applicationTitle: 'custom title',
  assetFolderUrl: 'base/ui/default_branding',
- useExpandedMenu: false,
+ useExpandedHeader: false,
  };
  const component = mountWithIntl(<HomeIcon {...branding} />);
  const icon = component.find('EuiIcon');
@@ -51,7 +51,7 @@ describe('Home button icon ', () => {
  mark: { defaultUrl: '/defaultModeMark' },
  applicationTitle: 'custom title',
  assetFolderUrl: 'base/ui/default_branding',
- useExpandedMenu: false,
+ useExpandedHeader: false,
  };
  const component = mountWithIntl(<HomeIcon {...branding} />);
  const icon = component.find('EuiIcon');
@@ -69,7 +69,7 @@ describe('Home button icon ', () => {
  mark: {},
  applicationTitle: 'custom title',
  assetFolderUrl: 'base/ui/default_branding',
- useExpandedMenu: false,
+ useExpandedHeader: false,
  };
  const component = mountWithIntl(<HomeIcon {...branding} />);
  const icon = component.find('EuiIcon');
@@ -85,7 +85,7 @@ describe('Home button icon ', () => {
  mark: {},
  applicationTitle: 'custom title',
  assetFolderUrl: 'base/ui/default_branding',
- useExpandedMenu: false,
+ useExpandedHeader: false,
  };
  const component = mountWithIntl(<HomeIcon {...branding} />);
  const icon = component.find('EuiIcon');
@@ -101,7 +101,7 @@ describe('Home button icon ', () => {
  mark: { defaultUrl: '/defaultModeMark' },
  applicationTitle: 'custom title',
  assetFolderUrl: 'base/ui/default_branding',
- useExpandedMenu: false,
+ useExpandedHeader: false,
  };
  const component = mountWithIntl(<HomeIcon {...branding} />);
  const icon = component.find('EuiIcon');
@@ -117,7 +117,7 @@ describe('Home button icon ', () => {
  mark: { defaultUrl: '/defaultModeMark', darkModeUrl: '/darkModeMark' },
  applicationTitle: 'custom title',
  assetFolderUrl: 'base/ui/default_branding',
- useExpandedMenu: false,
+ useExpandedHeader: false,
  };
  const component = mountWithIntl(<HomeIcon {...branding} />);
  const icon = component.find('EuiIcon');

src/core/public/chrome/ui/header/home_icon.tsx

@@ -21,7 +21,7 @@ export const HomeIcon = ({
  assetFolderUrl = '',
  mark,
  applicationTitle = 'opensearch dashboards',
- useExpandedMenu = true,
+ useExpandedHeader = true,
 }: ChromeBranding) => {
  const { defaultUrl: markUrl, darkModeUrl: darkMarkUrl } = mark ?? {};
 
@@ -31,10 +31,10 @@ export const HomeIcon = ({
  const getIconProps = () => {
  const iconType = customMark
  ? customMark
- : useExpandedMenu
+ : useExpandedHeader
  ? 'home'
  : `${assetFolderUrl}/${defaultMark}`;
- const testSubj = customMark ? 'customMark' : useExpandedMenu ? 'homeIcon' : 'defaultMark';
+ const testSubj = customMark ? 'customMark' : useExpandedHeader ? 'homeIcon' : 'defaultMark';
  const title = `${applicationTitle} home`;
  // marks look better at the large size, but the home icon should be medium to fit in with other icons
  const size = iconType === 'home' ? ('m' as const) : ('l' as const);

src/core/public/core_system.ts

@@ -260,12 +260,12 @@ export class CoreSystem {
 
  await this.plugins.start(core);
 
- const { useExpandedMenu = true } = injectedMetadata.getBranding() ?? {};
+ const { useExpandedHeader = true } = injectedMetadata.getBranding() ?? {};
 
  // ensure the rootDomElement is empty
  this.rootDomElement.textContent = '';
  this.rootDomElement.classList.add('coreSystemRootDomElement');
- if (useExpandedMenu) {
+ if (useExpandedHeader) {
  this.rootDomElement.classList.add('headerIsExpanded');
  }
  this.rootDomElement.appendChild(coreUiTargetDomElement);

src/core/server/opensearch_dashboards_config.ts

@@ -81,7 +81,7 @@ export const config = {
  applicationTitle: schema.string({
  defaultValue: '',
  }),
- useExpandedMenu: schema.boolean({
+ useExpandedHeader: schema.boolean({
  defaultValue: true,
  }),
  }),

src/core/server/rendering/rendering_service.tsx

@@ -151,7 +151,7 @@ export class RenderingService {
  },
  faviconUrl: brandingAssignment.favicon,
  applicationTitle: brandingAssignment.applicationTitle,
- useExpandedMenu: brandingAssignment.useExpandedMenu,
+ useExpandedHeader: brandingAssignment.useExpandedHeader,
  },
  },
  };
@@ -270,7 +270,7 @@ export class RenderingService {
  : DEFAULT_TITLE;
 
  // use expanded menu by default unless explicitly set to false
- const { useExpandedMenu = true } = branding;
+ const { useExpandedHeader = true } = branding;
 
  const brandingAssignment: BrandingAssignment = {
  logoDefault,
@@ -281,7 +281,7 @@ export class RenderingService {
  loadingLogoDarkmode,
  favicon,
  applicationTitle,
- useExpandedMenu,
+ useExpandedHeader,
  };
 
  return brandingAssignment;

src/core/server/rendering/types.ts

@@ -149,5 +149,5 @@ export interface BrandingAssignment {
  loadingLogoDarkmode?: string;
  favicon?: string;
  applicationTitle?: string;
- useExpandedMenu?: boolean;
+ useExpandedHeader?: boolean;
 }

src/core/types/custom_branding.ts

@@ -58,5 +58,5 @@ export interface Branding {
  /** Application title that will replace the default opensearch dashboard string */
  applicationTitle?: string;
  /** Whether to use expanded menu (true) or condensed menu (false) */
- useExpandedMenu?: boolean;
+ useExpandedHeader?: boolean;
 }

src/legacy/server/config/schema.js

@@ -245,7 +245,7 @@ export default () =>
  }),
  faviconUrl: Joi.any().default('/'),
  applicationTitle: Joi.any().default(''),
- useExpandedMenu: Joi.boolean().default(true),
+ useExpandedHeader: Joi.boolean().default(true),
  }),
  }).default(),