github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Rachel Shen 2022-11-08 15:46:05 -07:00 • committed by GitHub
parent bf3ee9e393
commit 244ef02ff1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 46 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

20
packages/shared-ux/card/no_data/impl/src/__snapshots__/no_data_card.test.tsx.snap generated
View file

@ -1,7 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`NoDataCard props button 1`] = `
<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="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard emotion-euiPanel-grow-m-l-plain-hasShadow-isClickable-EuiCard"
>
@ -75,7 +77,9 @@ exports[`NoDataCard props button 1`] = `
`;
exports[`NoDataCard props extends EuiCardProps 1`] = `
<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="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard custom_class emotion-euiPanel-grow-m-l-plain-hasShadow-isClickable-EuiCard"
>
@ -149,7 +153,9 @@ exports[`NoDataCard props extends EuiCardProps 1`] = `
`;
exports[`NoDataCard props href 1`] = `
<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="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard emotion-euiPanel-grow-m-l-plain-hasShadow-isClickable-EuiCard"
>
@ -223,7 +229,9 @@ exports[`NoDataCard props href 1`] = `
`;
exports[`NoDataCard props no access to Fleet 1`] = `
<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="euiPanel euiPanel--subdued euiPanel--paddingLarge euiCard emotion-euiPanel-grow-m-l-subdued-EuiCard"
>
@ -282,7 +290,9 @@ exports[`NoDataCard props no access to Fleet 1`] = `
`;
exports[`NoDataCard renders 1`] = `
<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="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard emotion-euiPanel-grow-m-l-plain-hasShadow-isClickable-EuiCard"
>

4
packages/shared-ux/link/redirect_app/impl/BUILD.bazel
View file

@ -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(

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

@ -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>
);

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

@ -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>
);

14
packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.styles.ts Normal file
View file

@ -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',
});

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

@ -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;

3
packages/shared-ux/link/redirect_app/impl/tsconfig.json
View file

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

5
packages/shared-ux/link/redirect_app/types/index.d.ts vendored
View file

@ -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

12
x-pack/plugins/profiling/public/app.tsx
View file

@ -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}>

4
x-pack/plugins/security/public/nav_control/nav_control_service.test.ts
View file

@ -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"