exit_full_screen_button 👉 New Platform (#43414)

* refactor: 💡 move ExitFullScreenButtonUi to src/plugins

* refactor: 💡 move ExitFullScreenButtonUi to src/plugins

* refactor: 💡 use <ExitFullScreenButton> button from src/plugins

* test: 💍 fix exit_full_screen_button tests

* refactor: 💡 import _index.scss from main SCSS file

* feat: 🎸 port translations to a NP plugin

* test: 💍 update Jest snapshot

.i18nrc.json

@@ -25,7 +25,8 @@
     "visTypeTagCloud": "src/legacy/core_plugins/vis_type_tagcloud",
     "tsvb": "src/legacy/core_plugins/metrics",
     "kbnESQuery": "packages/kbn-es-query",
-    "inspector": "src/plugins/inspector"
+    "inspector": "src/plugins/inspector",
+    "kibana-react": "src/plugins/kibana_react"
   },
   "exclude": ["src/legacy/ui/ui_render/ui_render_mixin.js"],
   "translations": []

src/legacy/ui/public/exit_full_screen/_index.scss

@@ -1 +1 @@
-@import 'exit_full_screen_button';
+@import '../../../../plugins/kibana_react/public/exit_full_screen_button/index';

src/legacy/ui/public/exit_full_screen/exit_full_screen_button.test.js

@@ -37,7 +37,7 @@ import { keyCodes } from '@elastic/eui';
 
 test('is rendered', () => {
   const component = renderWithIntl(
-    <ExitFullScreenButton.WrappedComponent onExitFullScreenMode={() => {}}/>
+    <ExitFullScreenButton onExitFullScreenMode={() => {}}/>
   );
 
   expect(component)
@@ -49,7 +49,7 @@ describe('onExitFullScreenMode', () => {
     const onExitHandler = sinon.stub();
 
     const component = mountWithIntl(
-      <ExitFullScreenButton.WrappedComponent onExitFullScreenMode={onExitHandler} />
+      <ExitFullScreenButton onExitFullScreenMode={onExitHandler} />
     );
 
     component.find('button').simulate('click');
@@ -60,7 +60,7 @@ describe('onExitFullScreenMode', () => {
   test('is called when the ESC key is pressed', () => {
     const onExitHandler = sinon.stub();
 
-    mountWithIntl(<ExitFullScreenButton.WrappedComponent onExitFullScreenMode={onExitHandler} />);
+    mountWithIntl(<ExitFullScreenButton onExitFullScreenMode={onExitHandler} />);
 
     const escapeKeyEvent = new KeyboardEvent('keydown', { keyCode: keyCodes.ESCAPE });
     document.dispatchEvent(escapeKeyEvent);
@@ -74,7 +74,7 @@ describe('chrome.setVisible', () => {
     chrome.setVisible = sinon.stub();
 
     const component = mountWithIntl(
-      <ExitFullScreenButton.WrappedComponent onExitFullScreenMode={() => {}} />
+      <ExitFullScreenButton onExitFullScreenMode={() => {}} />
     );
 
     component.find('button').simulate('click');
@@ -85,7 +85,7 @@ describe('chrome.setVisible', () => {
 
   test('is called with true the component is unmounted', () => {
     const component = mountWithIntl(
-      <ExitFullScreenButton.WrappedComponent onExitFullScreenMode={() => {}} />
+      <ExitFullScreenButton onExitFullScreenMode={() => {}} />
     );
 
     chrome.setVisible = sinon.stub();

src/legacy/ui/public/exit_full_screen/exit_full_screen_button.tsx

@@ -17,75 +17,29 @@
  * under the License.
  */
 
-import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 import React, { PureComponent } from 'react';
 import chrome from 'ui/chrome';
+import { ExitFullScreenButton as ExitFullScreenButtonUi } from '../../../../plugins/kibana_react/public';
 
-// @ts-ignore
-import { KuiButton } from '@kbn/ui-framework/components';
+/**
+ * DO NOT USE THIS COMPONENT, IT IS DEPRECATED.
+ * Use the one in `src/plugins/kibana_react`.
+ */
 
-import { EuiScreenReaderOnly, keyCodes } from '@elastic/eui';
-
-interface Props extends ReactIntl.InjectedIntlProps {
+interface Props {
   onExitFullScreenMode: () => void;
 }
 
-class ExitFullScreenButtonUi extends PureComponent<Props> {
-  public onKeyDown = (e: KeyboardEvent) => {
-    if (e.keyCode === keyCodes.ESCAPE) {
-      this.props.onExitFullScreenMode();
-    }
-  };
-
+export class ExitFullScreenButton extends PureComponent<Props> {
   public componentWillMount() {
-    document.addEventListener('keydown', this.onKeyDown, false);
     chrome.setVisible(false);
   }
 
   public componentWillUnmount() {
-    document.removeEventListener('keydown', this.onKeyDown, false);
     chrome.setVisible(true);
   }
 
   public render() {
-    const { intl } = this.props;
-
-    return (
-      <div className="hideInPercy">
-        <EuiScreenReaderOnly>
-          <p aria-live="polite">
-            <FormattedMessage
-              id="common.ui.exitFullScreenButton.fullScreenModeDescription"
-              defaultMessage="In full screen mode, press ESC to exit."
-            />
-          </p>
-        </EuiScreenReaderOnly>
-        <div className="dshExitFullScreenButton">
-          <KuiButton
-            type="hollow"
-            aria-label={intl.formatMessage({
-              id: 'common.ui.exitFullScreenButton.exitFullScreenModeButtonAreaLabel',
-              defaultMessage: 'Exit full screen mode',
-            })}
-            className="dshExitFullScreenButton__mode"
-            onClick={this.props.onExitFullScreenMode}
-          >
-            <span
-              className="dshExitFullScreenButton__logo"
-              data-test-subj="exitFullScreenModeLogo"
-            />
-            <span className="dshExitFullScreenButton__text" data-test-subj="exitFullScreenModeText">
-              <FormattedMessage
-                id="common.ui.exitFullScreenButton.exitFullScreenModeButtonLabel"
-                defaultMessage="Exit full screen"
-              />
-              <span className="kuiIcon fa fa-angle-left" />
-            </span>
-          </KuiButton>
-        </div>
-      </div>
-    );
+    return <ExitFullScreenButtonUi onExitFullScreenMode={this.props.onExitFullScreenMode} />;
   }
 }
-
-export const ExitFullScreenButton = injectI18n(ExitFullScreenButtonUi);

src/plugins/kibana_react/public/exit_full_screen_button/__snapshots__/exit_full_screen_button.test.tsx.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`is rendered 1`] = `
+<ExitFullScreenButtonUi
+  onExitFullScreenMode={[Function]}
+>
+  <div
+    className="hideInPercy"
+  >
+    <EuiScreenReaderOnly>
+      <p
+        aria-live="polite"
+        className="euiScreenReaderOnly"
+      >
+        In full screen mode, press ESC to exit.
+      </p>
+    </EuiScreenReaderOnly>
+    <div
+      className="dshExitFullScreenButton"
+    >
+      <KuiButton
+        aria-label="Exit full screen mode"
+        className="dshExitFullScreenButton__mode"
+        onClick={[Function]}
+        type="hollow"
+      >
+        <button
+          aria-label="Exit full screen mode"
+          className="kuiButton dshExitFullScreenButton__mode"
+          onClick={[Function]}
+          type="hollow"
+        >
+          <ContentWithIcon
+            iconPosition="left"
+          >
+            <span
+              className="kuiButton__inner"
+            >
+              <span>
+                <span
+                  className="dshExitFullScreenButton__logo"
+                  data-test-subj="exitFullScreenModeLogo"
+                />
+                <span
+                  className="dshExitFullScreenButton__text"
+                  data-test-subj="exitFullScreenModeText"
+                >
+                  Exit full screen
+                  <span
+                    className="kuiIcon fa fa-angle-left"
+                  />
+                </span>
+              </span>
+            </span>
+          </ContentWithIcon>
+        </button>
+      </KuiButton>
+    </div>
+  </div>
+</ExitFullScreenButtonUi>
+`;

src/plugins/kibana_react/public/exit_full_screen_button/_index.scss

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

src/plugins/kibana_react/public/exit_full_screen_button/exit_full_screen_button.test.tsx

@@ -0,0 +1,53 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import sinon from 'sinon';
+import { ExitFullScreenButton } from './exit_full_screen_button';
+import { keyCodes } from '@elastic/eui';
+import { mount } from 'enzyme';
+
+test('is rendered', () => {
+  const component = mount(<ExitFullScreenButton onExitFullScreenMode={() => {}} />);
+
+  expect(component).toMatchSnapshot();
+});
+
+describe('onExitFullScreenMode', () => {
+  test('is called when the button is pressed', () => {
+    const onExitHandler = sinon.stub();
+
+    const component = mount(<ExitFullScreenButton onExitFullScreenMode={onExitHandler} />);
+
+    component.find('button').simulate('click');
+
+    sinon.assert.calledOnce(onExitHandler);
+  });
+
+  test('is called when the ESC key is pressed', () => {
+    const onExitHandler = sinon.stub();
+
+    mount(<ExitFullScreenButton onExitFullScreenMode={onExitHandler} />);
+
+    const escapeKeyEvent = new KeyboardEvent('keydown', { keyCode: keyCodes.ESCAPE } as any);
+    document.dispatchEvent(escapeKeyEvent);
+
+    sinon.assert.calledOnce(onExitHandler);
+  });
+});

src/plugins/kibana_react/public/exit_full_screen_button/exit_full_screen_button.tsx

@@ -0,0 +1,85 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { i18n } from '@kbn/i18n';
+import React, { PureComponent } from 'react';
+import { EuiScreenReaderOnly, keyCodes } from '@elastic/eui';
+
+// @ts-ignore
+import { KuiButton } from '@kbn/ui-framework/components';
+
+interface Props {
+  onExitFullScreenMode: () => void;
+}
+
+class ExitFullScreenButtonUi extends PureComponent<Props> {
+  public onKeyDown = (e: KeyboardEvent) => {
+    if (e.keyCode === keyCodes.ESCAPE) {
+      this.props.onExitFullScreenMode();
+    }
+  };
+
+  public componentWillMount() {
+    document.addEventListener('keydown', this.onKeyDown, false);
+  }
+
+  public componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeyDown, false);
+  }
+
+  public render() {
+    return (
+      <div className="hideInPercy">
+        <EuiScreenReaderOnly>
+          <p aria-live="polite">
+            {i18n.translate('kibana-react.exitFullScreenButton.fullScreenModeDescription', {
+              defaultMessage: 'In full screen mode, press ESC to exit.',
+            })}
+          </p>
+        </EuiScreenReaderOnly>
+        <div className="dshExitFullScreenButton">
+          <KuiButton
+            type="hollow"
+            aria-label={i18n.translate(
+              'kibana-react.exitFullScreenButton.exitFullScreenModeButtonAreaLabel',
+              {
+                defaultMessage: 'Exit full screen mode',
+              }
+            )}
+            className="dshExitFullScreenButton__mode"
+            onClick={this.props.onExitFullScreenMode}
+          >
+            <span
+              className="dshExitFullScreenButton__logo"
+              data-test-subj="exitFullScreenModeLogo"
+            />
+            <span className="dshExitFullScreenButton__text" data-test-subj="exitFullScreenModeText">
+              {i18n.translate('kibana-react.exitFullScreenButton.exitFullScreenModeButtonLabel', {
+                defaultMessage: 'Exit full screen',
+              })}
+              <span className="kuiIcon fa fa-angle-left" />
+            </span>
+          </KuiButton>
+        </div>
+      </div>
+    );
+  }
+}
+
+export const ExitFullScreenButton = ExitFullScreenButtonUi;

src/plugins/kibana_react/public/exit_full_screen_button/index.tsx

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { ExitFullScreenButton } from './exit_full_screen_button';

src/plugins/kibana_react/public/index.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+export * from './exit_full_screen_button';
 export * from './context';
 export * from './overlays';
 export * from './ui_settings';

x-pack/plugins/translations/translations/ja-JP.json

@@ -330,9 +330,9 @@
     "common.ui.errorUrlOverflow.howTofixError.removeStuffFromDashboardText": "ダッシュボードからいくつか項目を取り除きましょう。これにより URL が短くなり、IE の動作が改善されます。",
     "common.ui.errorUrlOverflow.howTofixErrorDescription": "これは大抵大規模で複雑なダッシュボードで起こるため、いくつかのオプションがあります。",
     "common.ui.errorUrlOverflow.howTofixErrorTitle": "どうすれば良いのでしょう？",
-    "common.ui.exitFullScreenButton.exitFullScreenModeButtonAreaLabel": "全画面モードを終了",
-    "common.ui.exitFullScreenButton.exitFullScreenModeButtonLabel": "全画面を終了",
-    "common.ui.exitFullScreenButton.fullScreenModeDescription": "ESC キーで全画面モードを修了します。",
+    "kibana-react.exitFullScreenButton.exitFullScreenModeButtonAreaLabel": "全画面モードを終了",
+    "kibana-react.exitFullScreenButton.exitFullScreenModeButtonLabel": "全画面を終了",
+    "kibana-react.exitFullScreenButton.fullScreenModeDescription": "ESC キーで全画面モードを修了します。",
     "common.ui.fieldEditor.actions.cancelButton": "キャンセル",
     "common.ui.fieldEditor.actions.createButton": "フィールドを作成",
     "common.ui.fieldEditor.actions.deleteButton": "削除",

x-pack/plugins/translations/translations/zh-CN.json

@@ -330,9 +330,9 @@
     "common.ui.errorUrlOverflow.howTofixError.removeStuffFromDashboardText": "从您的仪表板中删除一些内容。这回减小 URL 的长度，使 IE 能够处理它。",
     "common.ui.errorUrlOverflow.howTofixErrorDescription": "通常只有较大的、复杂的仪表板会发生此问题，因此您会有一些选项：",
     "common.ui.errorUrlOverflow.howTofixErrorTitle": "那么，我如何解决此问题？",
-    "common.ui.exitFullScreenButton.exitFullScreenModeButtonAreaLabel": "退出全屏模式",
-    "common.ui.exitFullScreenButton.exitFullScreenModeButtonLabel": "退出全屏",
-    "common.ui.exitFullScreenButton.fullScreenModeDescription": "在全屏模式下，按 ESC 键可退出。",
+    "kibana-react.exitFullScreenButton.exitFullScreenModeButtonAreaLabel": "退出全屏模式",
+    "kibana-react.exitFullScreenButton.exitFullScreenModeButtonLabel": "退出全屏",
+    "kibana-react.exitFullScreenButton.fullScreenModeDescription": "在全屏模式下，按 ESC 键可退出。",
     "common.ui.fieldEditor.actions.cancelButton": "取消",
     "common.ui.fieldEditor.actions.createButton": "创建字段",
     "common.ui.fieldEditor.actions.deleteButton": "删除",