[Shared UX] Fix redirect app links fill vertical space (#141656)

Author: rshen91

packages/shared-ux/card/no_data/impl/src/__snapshots__/no_data_card.test.tsx.snap

@@ -53,6 +53,8 @@ RUNTIME_DEPS = [
   "@npm//react",
   "@npm//rxjs",
   "//packages/kbn-shared-ux-utility",
+  "@npm//@emotion/react",
+  "@npm//@emotion/css",
 ]
 
 # In this array place dependencies necessary to build the types, which will include the
@@ -74,6 +76,8 @@ TYPES_DEPS = [
   "//packages/kbn-ambient-ui-types",
   "//packages/shared-ux/link/redirect_app/types",
   "//packages/kbn-shared-ux-utility:npm_module_types",
+  "@npm//@emotion/css",
+  "@npm//@emotion/react",
 ]
 
 jsts_transpiler(

packages/shared-ux/link/redirect_app/impl/BUILD.bazel

@@ -11,6 +11,7 @@ import React, { FC, useRef, MouseEventHandler, useCallback } from 'react';
 import type { RedirectAppLinksComponentProps } from '@kbn/shared-ux-link-redirect-app-types';
 
 import { navigateToUrlClickHandler } from './click_handler';
+import { redirectAppLinksStyles } from './redirect_app_links.styles';
 
 /**
  * Utility component that will intercept click events on children anchor (`<a>`) elements to call
@@ -28,7 +29,6 @@ export const RedirectAppLinks: FC<RedirectAppLinksComponentProps> = ({
   children,
   navigateToUrl,
   currentAppId,
-  className,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -45,7 +45,7 @@ export const RedirectAppLinks: FC<RedirectAppLinksComponentProps> = ({
 
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    <div ref={containerRef} onClick={handleClick} className={className}>
+    <div onClick={handleClick} ref={containerRef} css={redirectAppLinksStyles}>
       {children}
     </div>
   );

packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.component.tsx

@@ -22,8 +22,6 @@ import { RedirectAppLinks as Component } from './redirect_app_links.component';
  * </RedirectAppLinks>
  * ```
  */
-export const RedirectAppLinks: FC<{ className?: string }> = ({ className, children }) => (
-  <Component {...useServices()} className={className}>
-    {children}
-  </Component>
+export const RedirectAppLinks: FC<{}> = ({ children }) => (
+  <Component {...useServices()}>{children}</Component>
 );

packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.container.tsx

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+export const redirectAppLinksStyles = css({
+  display: 'flex',
+  flex: '1',
+});

packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.styles.ts

@@ -24,10 +24,8 @@ const isKibanaContract = (services: any): services is RedirectAppLinksKibanaDepe
  * `RedirectAppLinksKibanaProvider` based on the services provided, creating a single component
  * with which consumers can wrap their components or solutions.
  */
-export const RedirectAppLinks: FC<RedirectAppLinksProps> = ({ children, className, ...props }) => {
-  const container = (
-    <RedirectAppLinksContainer className={className}>{children}</RedirectAppLinksContainer>
-  );
+export const RedirectAppLinks: FC<RedirectAppLinksProps> = ({ children, ...props }) => {
+  const container = <RedirectAppLinksContainer>{children}</RedirectAppLinksContainer>;
 
   if (isKibanaContract(props)) {
     const { coreStart } = props;

packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.tsx

@@ -8,7 +8,8 @@
       "jest",
       "node",
       "react",
-      "@kbn/ambient-ui-types"
+      "@kbn/ambient-ui-types",
+      "@emotion/react/types/css-prop"
     ]
   },
   "include": [

packages/shared-ux/link/redirect_app/impl/tsconfig.json

@@ -32,10 +32,7 @@ export interface RedirectAppLinksKibanaDependencies {
 }
 
 /** Props for the `RedirectAppLinks` component. */
-export type RedirectAppLinksProps = { className?: string } & (
-  | RedirectAppLinksServices
-  | RedirectAppLinksKibanaDependencies
-);
+export type RedirectAppLinksProps = RedirectAppLinksServices | RedirectAppLinksKibanaDependencies;
 
 /** Props for the `RedirectAppLinksComponent`. */
 export interface RedirectAppLinksComponentProps

packages/shared-ux/link/redirect_app/types/index.d.ts

@@ -14,7 +14,6 @@ import { Storage } from '@kbn/kibana-utils-plugin/public';
 import { RouteRenderer, RouterProvider } from '@kbn/typed-react-router-config';
 
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
-import { css } from '@emotion/react';
 import { ProfilingDependenciesContextProvider } from './components/contexts/profiling_dependencies/profiling_dependencies_context';
 import { RedirectWithDefaultDateRange } from './components/redirect_with_default_date_range';
 import { profilingRouter } from './routing';
@@ -33,11 +32,6 @@ interface Props {
   history: AppMountParameters['history'];
 }
 
-const redirectAppLinksCss = css`
-  display: flex;
-  flex-grow: 1;
-`;
-
 const storage = new Storage(localStorage);
 
 function App({
@@ -69,11 +63,7 @@ function App({
     <KibanaThemeProvider theme$={theme$}>
       <KibanaContextProvider services={{ ...coreStart, ...pluginsStart, storage }}>
         <i18nCore.Context>
-          <RedirectAppLinks
-            coreStart={coreStart}
-            currentAppId="profiling"
-            css={redirectAppLinksCss}
-          >
+          <RedirectAppLinks coreStart={coreStart} currentAppId="profiling">
             <RouterProvider router={profilingRouter as any} history={history}>
               <TimeRangeContextProvider>
                 <ProfilingDependenciesContextProvider value={profilingDependencies}>

x-pack/plugins/profiling/public/app.tsx

@@ -75,7 +75,9 @@ describe('SecurityNavControlService', () => {
 
     expect(target).toMatchInlineSnapshot(`
       <div>
-        <div>
+        <div
+          css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
+        >
           <div
             class="euiPopover emotion-euiPopover"
             id="headerUserMenu"