Consolidate ExitFullScreenButton (#170404)

## Summary

close https://github.com/elastic/kibana/issues/168696

- Remove old copy from `kibana_react`
- Remove -types and -mocks packages, move them into a single package
(not needed since we don't use bazel now)

### Risks

No Risks, since old copy was not used
This commit is contained in:
Anton Dosov 2023-11-03 09:50:02 +01:00 committed by GitHub
parent 9b6edea13b
commit c2f6fc4336
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
39 changed files with 30 additions and 406 deletions

4
.github/CODEOWNERS vendored
View file

@ -676,9 +676,7 @@ examples/share_examples @elastic/appex-sharedux
src/plugins/share @elastic/appex-sharedux
packages/kbn-shared-svg @elastic/apm-ui
packages/shared-ux/avatar/solution @elastic/appex-sharedux
packages/shared-ux/button/exit_full_screen/impl @elastic/appex-sharedux
packages/shared-ux/button/exit_full_screen/mocks @elastic/appex-sharedux
packages/shared-ux/button/exit_full_screen/types @elastic/appex-sharedux
packages/shared-ux/button/exit_full_screen @elastic/appex-sharedux
packages/shared-ux/button_toolbar @elastic/appex-sharedux
packages/shared-ux/card/no_data/impl @elastic/appex-sharedux
packages/shared-ux/card/no_data/mocks @elastic/appex-sharedux

View file

@ -679,9 +679,7 @@
"@kbn/share-plugin": "link:src/plugins/share",
"@kbn/shared-svg": "link:packages/kbn-shared-svg",
"@kbn/shared-ux-avatar-solution": "link:packages/shared-ux/avatar/solution",
"@kbn/shared-ux-button-exit-full-screen": "link:packages/shared-ux/button/exit_full_screen/impl",
"@kbn/shared-ux-button-exit-full-screen-mocks": "link:packages/shared-ux/button/exit_full_screen/mocks",
"@kbn/shared-ux-button-exit-full-screen-types": "link:packages/shared-ux/button/exit_full_screen/types",
"@kbn/shared-ux-button-exit-full-screen": "link:packages/shared-ux/button/exit_full_screen",
"@kbn/shared-ux-button-toolbar": "link:packages/shared-ux/button_toolbar",
"@kbn/shared-ux-card-no-data": "link:packages/shared-ux/card/no_data/impl",
"@kbn/shared-ux-card-no-data-mocks": "link:packages/shared-ux/card/no_data/mocks",

View file

@ -6,6 +6,6 @@
* Side Public License, v 1.
*/
export { ExitFullScreenButtonKibanaProvider, ExitFullScreenButtonProvider } from './src/services';
export { ExitFullScreenButton as ExitFullScreenButtonComponent } from './src/exit_full_screen_button.component';
export { ExitFullScreenButtonKibanaProvider } from './src/services';
export { ExitFullScreenButton } from './src/exit_full_screen_button';
export type { ExitFullScreenButtonProps, ExitFullScreenButtonKibanaDependencies } from './types';

View file

@ -8,6 +8,6 @@
module.exports = {
preset: '@kbn/test',
rootDir: '../../../../..',
roots: ['<rootDir>/packages/shared-ux/button/exit_full_screen/impl'],
rootDir: '../../../..',
roots: ['<rootDir>/packages/shared-ux/button/exit_full_screen'],
};

View file

@ -1,3 +0,0 @@
# @kbn/shared-ux-button-exit-full-screen-mocks
TODO: clintandrewhall

View file

@ -9,7 +9,7 @@
export {
getKibanaDependenciesMock as getExitFullScreenButtonKibanaDependenciesMock,
getServicesMock as getExitFullScreenButtonServicesMock,
} from './src/jest';
} from './jest';
export { StorybookMock as ExitFullScreenButtonStorybookMock } from './src/storybook';
export type { Params as ExitFullScreenButtonStorybookParams } from './src/storybook';
export { StorybookMock as ExitFullScreenButtonStorybookMock } from './storybook';
export type { Params as ExitFullScreenButtonStorybookParams } from './storybook';

View file

@ -6,11 +6,11 @@
* Side Public License, v 1.
*/
import {
import { of } from 'rxjs';
import type {
ExitFullScreenButtonKibanaDependencies,
ExitFullScreenButtonServices,
} from '@kbn/shared-ux-button-exit-full-screen-types';
import { of } from 'rxjs';
} from '../types';
/**
* Return a Jest mock of the services for the `ExitFullScreenButton` component.

View file

@ -1,5 +0,0 @@
{
"type": "shared-common",
"id": "@kbn/shared-ux-button-exit-full-screen-mocks",
"owner": "@elastic/appex-sharedux"
}

View file

@ -1,6 +0,0 @@
{
"name": "@kbn/shared-ux-button-exit-full-screen-mocks",
"private": true,
"version": "1.0.0",
"license": "SSPL-1.0 OR Elastic License 2.0"
}

View file

@ -8,11 +8,8 @@
import { action } from '@storybook/addon-actions';
import { AbstractStorybookMock, ArgumentParams } from '@kbn/shared-ux-storybook-mock';
import type {
ExitFullScreenButtonProps as Props,
ExitFullScreenButtonServices,
} from '@kbn/shared-ux-button-exit-full-screen-types';
import { of } from 'rxjs';
import type { ExitFullScreenButtonProps as Props, ExitFullScreenButtonServices } from '../types';
type PropArguments = Pick<Props, 'toggleChrome'>;

View file

@ -1,21 +0,0 @@
{
"extends": "../../../../../tsconfig.base.json",
"compilerOptions": {
"outDir": "target/types",
"types": [
"jest",
"node",
"react"
]
},
"include": [
"**/*.ts"
],
"kbn_references": [
"@kbn/shared-ux-button-exit-full-screen-types",
"@kbn/shared-ux-storybook-mock"
],
"exclude": [
"target/**/*",
]
}

View file

@ -20,7 +20,7 @@ import { i18n } from '@kbn/i18n';
import { css } from '@emotion/react';
import cx from 'classnames';
import type { ExitFullScreenButtonComponentProps as Props } from '@kbn/shared-ux-button-exit-full-screen-types';
import type { ExitFullScreenButtonComponentProps as Props } from '../types';
import './exit_full_screen_button.scss';

View file

@ -7,8 +7,10 @@
*/
import React from 'react';
import { ExitFullScreenButtonStorybookMock } from '@kbn/shared-ux-button-exit-full-screen-mocks';
import type { ExitFullScreenButtonStorybookParams } from '@kbn/shared-ux-button-exit-full-screen-mocks';
import {
ExitFullScreenButtonStorybookMock,
type ExitFullScreenButtonStorybookParams,
} from '../mocks';
import { ExitFullScreenButtonProvider } from './services';
import { ExitFullScreenButton as Component } from './exit_full_screen_button';

View file

@ -13,7 +13,7 @@ import { keys } from '@elastic/eui';
import {
getExitFullScreenButtonServicesMock,
getExitFullScreenButtonKibanaDependenciesMock,
} from '@kbn/shared-ux-button-exit-full-screen-mocks';
} from '../mocks';
import { ExitFullScreenButton } from './exit_full_screen_button';
import { ExitFullScreenButtonKibanaProvider, ExitFullScreenButtonProvider } from './services';

View file

@ -10,10 +10,10 @@ import React, { useCallback, useEffect } from 'react';
import { useEuiTheme, keys } from '@elastic/eui';
import { css } from '@emotion/react';
import useMountedState from 'react-use/lib/useMountedState';
import type { ExitFullScreenButtonProps as Props } from '@kbn/shared-ux-button-exit-full-screen-types';
import useObservable from 'react-use/lib/useObservable';
import type { ExitFullScreenButtonProps as Props } from '../types';
import { ExitFullScreenButton as Component } from './exit_full_screen_button.component';
import { useServices } from './services';

View file

@ -12,7 +12,7 @@ import type {
Services,
ExitFullScreenButtonServices,
ExitFullScreenButtonKibanaDependencies,
} from '@kbn/shared-ux-button-exit-full-screen-types';
} from '../types';
const ExitFullScreenButtonContext = React.createContext<Services | null>(null);

View file

@ -1,5 +1,5 @@
{
"extends": "../../../../../tsconfig.base.json",
"extends": "../../../../tsconfig.base.json",
"compilerOptions": {
"outDir": "target/types",
"types": [
@ -15,8 +15,8 @@
],
"kbn_references": [
"@kbn/i18n",
"@kbn/shared-ux-button-exit-full-screen-types",
"@kbn/shared-ux-button-exit-full-screen-mocks",
"@kbn/shared-ux-storybook-mock",
"@kbn/core-custom-branding-common"
],
"exclude": [
"target/**/*",

View file

@ -1,3 +0,0 @@
# @kbn/shared-ux-button-exit-full-screen-types
TODO: clintandrewhall

View file

@ -1,5 +0,0 @@
{
"type": "shared-common",
"id": "@kbn/shared-ux-button-exit-full-screen-types",
"owner": "@elastic/appex-sharedux"
}

View file

@ -1,6 +0,0 @@
{
"name": "@kbn/shared-ux-button-exit-full-screen-types",
"private": true,
"version": "1.0.0",
"license": "SSPL-1.0 OR Elastic License 2.0"
}

View file

@ -1,16 +0,0 @@
{
"extends": "../../../../../tsconfig.base.json",
"compilerOptions": {
"outDir": "target/types",
"types": []
},
"include": [
"*.d.ts"
],
"exclude": [
"target/**/*",
],
"kbn_references": [
"@kbn/core-custom-branding-common",
]
}

View file

@ -1,53 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<ExitFullScreenButton /> is rendered 1`] = `
<div>
<p
aria-live="polite"
class="emotion-euiScreenReaderOnly"
>
In full screen mode, press ESC to exit.
</p>
<div>
<button
aria-label="Exit full screen mode"
class="dshExitFullScreenButton"
data-test-subj="exitFullScreenModeLogo"
>
<span
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
data-euiicon-type="logoElastic"
/>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
data-test-subj="exitFullScreenModeText"
>
<div>
<div
class="euiText dshExitFullScreenButton__text emotion-euiText-s"
>
<p>
Exit full screen
</p>
</div>
</div>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
class="dshExitFullScreenButton__icon"
data-euiicon-type="fullScreen"
/>
</div>
</span>
</button>
</div>
</div>
`;

View file

@ -1,37 +0,0 @@
/**
* 1. override the z-index: 1 applied to all non-eui elements that are in :focus via kui
* - see packages/kbn-ui-framework/src/global_styling/reset/_reset.scss
*/
.dshExitFullScreenButton {
@include euiBottomShadow;
left: $euiSizeS;
bottom: $euiSizeS;
position: fixed;
display: block;
padding: $euiSizeXS $euiSizeS;
border: none;
background: none;
z-index: 5;
background: $euiColorFullShade;
border-radius: $euiBorderRadius;
text-align: left;
&:hover {
background: $euiColorFullShade;
.dshExitFullScreenButton__icon {
color: $euiColorEmptyShade;
}
}
}
.dshExitFullScreenButton__text {
line-height: 1.2;
color: makeHighContrastColor($euiColorMediumShade, $euiColorFullShade);
}
.dshExitFullScreenButton__icon {
color: makeHighContrastColor($euiColorMediumShade, $euiColorFullShade);
}

View file

@ -1,76 +0,0 @@
/*
* 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 React from 'react';
import { mount, ReactWrapper } from 'enzyme';
import { ExitFullScreenButton } from './exit_full_screen_button';
import { keys } from '@elastic/eui';
import type { ChromeStart } from '@kbn/core/public';
const MockChrome = {
setIsVisible: jest.fn(),
} as unknown as ChromeStart;
describe('<ExitFullScreenButton />', () => {
afterEach(() => {
jest.resetAllMocks();
});
test('is rendered', () => {
const component = mount(
<ExitFullScreenButton onExitFullScreenMode={jest.fn()} chrome={MockChrome} />
);
expect(component.render()).toMatchSnapshot();
});
test('passing `false` to toggleChrome does not toggle chrome', () => {
const component = mount(
<ExitFullScreenButton
onExitFullScreenMode={jest.fn()}
chrome={MockChrome}
toggleChrome={false}
/>
);
expect(MockChrome.setIsVisible).toHaveBeenCalledTimes(0);
component.unmount();
expect(MockChrome.setIsVisible).toHaveBeenCalledTimes(0);
});
describe('onExitFullScreenMode', () => {
const onExitHandler = jest.fn();
let component: ReactWrapper;
beforeEach(() => {
component = mount(
<ExitFullScreenButton onExitFullScreenMode={onExitHandler} chrome={MockChrome} />
);
});
test('is called when the button is pressed', () => {
expect(MockChrome.setIsVisible).toHaveBeenLastCalledWith(false);
component.find('button').simulate('click');
expect(onExitHandler).toHaveBeenCalledTimes(1);
component.unmount();
expect(MockChrome.setIsVisible).toHaveBeenLastCalledWith(true);
});
test('is called when the ESC key is pressed', () => {
expect(MockChrome.setIsVisible).toHaveBeenLastCalledWith(false);
const escapeKeyEvent = new KeyboardEvent('keydown', { key: keys.ESCAPE } as any);
document.dispatchEvent(escapeKeyEvent);
expect(onExitHandler).toHaveBeenCalledTimes(1);
component.unmount();
expect(MockChrome.setIsVisible).toHaveBeenLastCalledWith(true);
});
});
});

View file

@ -1,105 +0,0 @@
/*
* 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 { i18n } from '@kbn/i18n';
import React, { PureComponent } from 'react';
import { EuiScreenReaderOnly, keys } from '@elastic/eui';
import { EuiIcon, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
import type { ChromeStart } from '@kbn/core/public';
export interface ExitFullScreenButtonProps {
onExitFullScreenMode: () => void;
chrome: ChromeStart;
/**
* Optional argument that determines whether we toggle the chrome bar
* the button unmounts.
*
* @note The intended use for this prop is that it is either `true` or `false`
* for the lifetime of the button.
*
* @default true
*/
toggleChrome?: boolean;
}
import './index.scss';
class ExitFullScreenButtonUi extends PureComponent<ExitFullScreenButtonProps> {
static defaultProps = {
toggleChrome: true,
};
public onKeyDown = (e: KeyboardEvent) => {
if (e.key === keys.ESCAPE) {
this.props.onExitFullScreenMode();
}
};
public componentDidMount() {
if (this.props.toggleChrome) this.props.chrome.setIsVisible(false);
document.addEventListener('keydown', this.onKeyDown, false);
}
public componentWillUnmount() {
if (this.props.toggleChrome) this.props.chrome.setIsVisible(true);
document.removeEventListener('keydown', this.onKeyDown, false);
}
public render() {
return (
<div>
<EuiScreenReaderOnly>
<p aria-live="polite">
{i18n.translate('kibana-react.exitFullScreenButton.fullScreenModeDescription', {
defaultMessage: 'In full screen mode, press ESC to exit.',
})}
</p>
</EuiScreenReaderOnly>
<div>
<button
aria-label={i18n.translate(
'kibana-react.exitFullScreenButton.exitFullScreenModeButtonAriaLabel',
{
defaultMessage: 'Exit full screen mode',
}
)}
className="dshExitFullScreenButton"
onClick={this.props.onExitFullScreenMode}
data-test-subj="exitFullScreenModeLogo"
>
<EuiFlexGroup component="span" responsive={false} alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiIcon type="logoElastic" size="l" />
</EuiFlexItem>
<EuiFlexItem grow={false} data-test-subj="exitFullScreenModeText">
<div>
<EuiText size="s" className="dshExitFullScreenButton__text">
<p>
{i18n.translate(
'kibana-react.exitFullScreenButton.exitFullScreenModeButtonText',
{
defaultMessage: 'Exit full screen',
}
)}
</p>
</EuiText>
</div>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIcon type="fullScreen" className="dshExitFullScreenButton__icon" />
</EuiFlexItem>
</EuiFlexGroup>
</button>
</div>
</div>
);
}
}
/** @deprecated Use `ExitFullScreenButton` from `@kbn/shared-ux-button-exit-full-screen`. */
export const ExitFullScreenButton = ExitFullScreenButtonUi;

View file

@ -1 +0,0 @@
@import './exit_full_screen_button';

View file

@ -1,10 +0,0 @@
/*
* 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.
*/
export type { ExitFullScreenButtonProps } from './exit_full_screen_button';
export { ExitFullScreenButton } from './exit_full_screen_button';

View file

@ -21,9 +21,6 @@ export {
export type { UrlTemplateEditorVariable, UrlTemplateEditorProps } from './url_template_editor';
export { UrlTemplateEditor } from './url_template_editor';
export type { ExitFullScreenButtonProps } from './exit_full_screen_button';
export { ExitFullScreenButton } from './exit_full_screen_button';
export type { KibanaReactContext, KibanaReactContextValue, KibanaServices } from './context';
export {
context,

View file

@ -1346,12 +1346,8 @@
"@kbn/shared-svg/*": ["packages/kbn-shared-svg/*"],
"@kbn/shared-ux-avatar-solution": ["packages/shared-ux/avatar/solution"],
"@kbn/shared-ux-avatar-solution/*": ["packages/shared-ux/avatar/solution/*"],
"@kbn/shared-ux-button-exit-full-screen": ["packages/shared-ux/button/exit_full_screen/impl"],
"@kbn/shared-ux-button-exit-full-screen/*": ["packages/shared-ux/button/exit_full_screen/impl/*"],
"@kbn/shared-ux-button-exit-full-screen-mocks": ["packages/shared-ux/button/exit_full_screen/mocks"],
"@kbn/shared-ux-button-exit-full-screen-mocks/*": ["packages/shared-ux/button/exit_full_screen/mocks/*"],
"@kbn/shared-ux-button-exit-full-screen-types": ["packages/shared-ux/button/exit_full_screen/types"],
"@kbn/shared-ux-button-exit-full-screen-types/*": ["packages/shared-ux/button/exit_full_screen/types/*"],
"@kbn/shared-ux-button-exit-full-screen": ["packages/shared-ux/button/exit_full_screen"],
"@kbn/shared-ux-button-exit-full-screen/*": ["packages/shared-ux/button/exit_full_screen/*"],
"@kbn/shared-ux-button-toolbar": ["packages/shared-ux/button_toolbar"],
"@kbn/shared-ux-button-toolbar/*": ["packages/shared-ux/button_toolbar/*"],
"@kbn/shared-ux-card-no-data": ["packages/shared-ux/card/no_data/impl"],
@ -1729,4 +1725,4 @@
"@kbn/ambient-storybook-types"
],
}
}
}

View file

@ -4728,9 +4728,6 @@
"kibana-react.dualRangeControl.minInputAriaLabel": "Minimum de la plage",
"kibana-react.dualRangeControl.mustSetBothErrorMessage": "Les valeurs inférieure et supérieure doivent être définies.",
"kibana-react.dualRangeControl.upperValidErrorMessage": "La valeur supérieure doit être supérieure ou égale à la valeur inférieure.",
"kibana-react.exitFullScreenButton.exitFullScreenModeButtonAriaLabel": "Quitter le mode Plein écran",
"kibana-react.exitFullScreenButton.exitFullScreenModeButtonText": "Quitter le plein écran",
"kibana-react.exitFullScreenButton.fullScreenModeDescription": "En mode Plein écran, appuyez sur Échap pour quitter.",
"kibana-react.kbnOverviewPageHeader.addIntegrationsButtonLabel": "Ajouter des intégrations",
"kibana-react.kbnOverviewPageHeader.devToolsButtonLabel": "Outils de développement",
"kibana-react.kbnOverviewPageHeader.stackManagementButtonLabel": "Gérer",

View file

@ -4744,9 +4744,6 @@
"kibana-react.dualRangeControl.minInputAriaLabel": "範囲最小",
"kibana-react.dualRangeControl.mustSetBothErrorMessage": "下と上の値の両方を設定する必要があります",
"kibana-react.dualRangeControl.upperValidErrorMessage": "上の値は下の値以上でなければなりません",
"kibana-react.exitFullScreenButton.exitFullScreenModeButtonAriaLabel": "全画面モードを終了",
"kibana-react.exitFullScreenButton.exitFullScreenModeButtonText": "全画面を終了",
"kibana-react.exitFullScreenButton.fullScreenModeDescription": "ESC キーで全画面モードを終了します。",
"kibana-react.kbnOverviewPageHeader.addIntegrationsButtonLabel": "統合の追加",
"kibana-react.kbnOverviewPageHeader.devToolsButtonLabel": "開発ツール",
"kibana-react.kbnOverviewPageHeader.stackManagementButtonLabel": "管理",

View file

@ -4743,9 +4743,6 @@
"kibana-react.dualRangeControl.minInputAriaLabel": "范围最小值",
"kibana-react.dualRangeControl.mustSetBothErrorMessage": "下限值和上限值都须设置",
"kibana-react.dualRangeControl.upperValidErrorMessage": "上限值必须大于或等于下限值",
"kibana-react.exitFullScreenButton.exitFullScreenModeButtonAriaLabel": "退出全屏模式",
"kibana-react.exitFullScreenButton.exitFullScreenModeButtonText": "退出全屏",
"kibana-react.exitFullScreenButton.fullScreenModeDescription": "在全屏模式下,按 ESC 键可退出。",
"kibana-react.kbnOverviewPageHeader.addIntegrationsButtonLabel": "添加集成",
"kibana-react.kbnOverviewPageHeader.devToolsButtonLabel": "开发工具",
"kibana-react.kbnOverviewPageHeader.stackManagementButtonLabel": "管理",

View file

@ -5596,15 +5596,7 @@
version "0.0.0"
uid ""
"@kbn/shared-ux-button-exit-full-screen-mocks@link:packages/shared-ux/button/exit_full_screen/mocks":
version "0.0.0"
uid ""
"@kbn/shared-ux-button-exit-full-screen-types@link:packages/shared-ux/button/exit_full_screen/types":
version "0.0.0"
uid ""
"@kbn/shared-ux-button-exit-full-screen@link:packages/shared-ux/button/exit_full_screen/impl":
"@kbn/shared-ux-button-exit-full-screen@link:packages/shared-ux/button/exit_full_screen":
version "0.0.0"
uid ""