[APM] [Labs] Adding bottom bar (#140992)

* adding bottom save bar

* addressing pr changes

x-pack/plugins/apm/public/components/app/settings/agent_configurations/agent_configuration_create_edit/settings_page/settings_page.tsx

@@ -6,24 +6,20 @@
  */
 
 import {
-  EuiBottomBar,
   EuiButton,
-  EuiButtonEmpty,
   EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
   EuiForm,
-  EuiHealth,
+  EuiHorizontalRule,
   EuiLoadingSpinner,
   EuiSpacer,
   EuiStat,
-  EuiText,
-  EuiHorizontalRule,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { useUiTracker } from '@kbn/observability-plugin/public';
 import React, { useMemo, useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { useUiTracker } from '@kbn/observability-plugin/public';
 import { getOptionLabel } from '../../../../../../../common/agent_configuration/all_option';
 import { AgentConfigurationIntake } from '../../../../../../../common/agent_configuration/configuration_types';
 import {
@@ -34,6 +30,7 @@ import {
 import { AgentName } from '../../../../../../../typings/es_schemas/ui/fields/agent';
 import { useApmPluginContext } from '../../../../../../context/apm_plugin/use_apm_plugin_context';
 import { FETCH_STATUS } from '../../../../../../hooks/use_fetcher';
+import { BottomBarActions } from '../../../bottom_bar_actions';
 import { saveConfig } from './save_config';
 import { SettingFormRow } from './setting_form_row';
 
@@ -190,53 +187,16 @@ export function SettingsPage({
 
       {/* Bottom bar with save button */}
       {unsavedChangesCount > 0 && (
-        <EuiBottomBar paddingSize="s">
+        <BottomBarActions
-          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-            <EuiFlexItem
-              grow={false}
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-              }}
-            >
-              <EuiHealth color="warning" />
-              <EuiText color="ghost">
-                {i18n.translate('xpack.apm.unsavedChanges', {
-                  defaultMessage:
-                    '{unsavedChangesCount, plural, =0{0 unsaved changes} one {1 unsaved change} other {# unsaved changes}} ',
-                  values: { unsavedChangesCount },
-                })}
-              </EuiText>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiFlexGroup justifyContent="flexEnd">
-                <EuiFlexItem grow={false}>
-                  <EuiButtonEmpty color="ghost" onClick={resetSettings}>
-                    {i18n.translate(
-                      'xpack.apm.agentConfig.settingsPage.discardChangesButton',
-                      { defaultMessage: 'Discard changes' }
-                    )}
-                  </EuiButtonEmpty>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiButton
-                    onClick={handleSubmitEvent}
-                    fill
           isLoading={isSaving}
-                    isDisabled={!isFormValid}
+          onDiscardChanges={resetSettings}
-                    color="success"
+          onSave={handleSubmitEvent}
-                    iconType="check"
+          saveLabel={i18n.translate(
-                  >
-                    {i18n.translate(
             'xpack.apm.agentConfig.settingsPage.saveButton',
             { defaultMessage: 'Save configuration' }
           )}
-                  </EuiButton>
+          unsavedChangesCount={unsavedChangesCount}
-                </EuiFlexItem>
+        />
-              </EuiFlexGroup>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiBottomBar>
       )}
     </>
   );

x-pack/plugins/apm/public/components/app/settings/bottom_bar_actions/index.tsx

@@ -0,0 +1,81 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import {
+  EuiBottomBar,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHealth,
+  EuiText,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+
+interface Props {
+  unsavedChangesCount: number;
+  isLoading: boolean;
+  onDiscardChanges: () => void;
+  onSave: () => void;
+  saveLabel: string;
+}
+
+export function BottomBarActions({
+  isLoading,
+  onDiscardChanges,
+  onSave,
+  unsavedChangesCount,
+  saveLabel,
+}: Props) {
+  return (
+    <EuiBottomBar paddingSize="s">
+      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+        <EuiFlexItem
+          grow={false}
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <EuiHealth color="warning" />
+          <EuiText color="ghost">
+            {i18n.translate('xpack.apm.bottomBarActions.unsavedChanges', {
+              defaultMessage:
+                '{unsavedChangesCount, plural, =0{0 unsaved changes} one {1 unsaved change} other {# unsaved changes}} ',
+              values: { unsavedChangesCount },
+            })}
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty color="ghost" onClick={onDiscardChanges}>
+                {i18n.translate(
+                  'xpack.apm.bottomBarActions.discardChangesButton',
+                  {
+                    defaultMessage: 'Discard changes',
+                  }
+                )}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                onClick={onSave}
+                fill
+                isLoading={isLoading}
+                color="success"
+                iconType="check"
+              >
+                {saveLabel}
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiBottomBar>
+  );
+}

x-pack/plugins/apm/public/components/app/settings/general_settings/index.tsx

@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { EuiButton } from '@elastic/eui';
 import { LazyField } from '@kbn/advanced-settings-plugin/public';
 import { i18n } from '@kbn/i18n';
 import {
@@ -20,6 +19,7 @@ import { isEmpty } from 'lodash';
 import React from 'react';
 import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
 import { useApmEditableSettings } from '../../../../hooks/use_apm_editable_settings';
+import { BottomBarActions } from '../bottom_bar_actions';
 
 const apmSettingsKeys = [
   enableComparisonByDefault,
@@ -38,6 +38,7 @@ export function GeneralSettings() {
     unsavedChanges,
     saveAll,
     isSaving,
+    cleanUnsavedChanges,
   } = useApmEditableSettings(apmSettingsKeys);
 
   async function handleSave() {
@@ -76,16 +77,17 @@ export function GeneralSettings() {
           />
         );
       })}
-      <EuiButton
+      {!isEmpty(unsavedChanges) && (
-        fill
+        <BottomBarActions
           isLoading={isSaving}
-        disabled={isEmpty(unsavedChanges)}
+          onDiscardChanges={cleanUnsavedChanges}
-        onClick={handleSave}
+          onSave={handleSave}
-      >
+          saveLabel={i18n.translate('xpack.apm.apmSettings.saveButton', {
-        {i18n.translate('xpack.apm.labs.reload', {
+            defaultMessage: 'Save changes',
-          defaultMessage: 'Reload to apply changes',
           })}
-      </EuiButton>
+          unsavedChangesCount={Object.keys(unsavedChanges).length}
+        />
+      )}
     </>
   );
 }

x-pack/plugins/translations/translations/fr-FR.json

@@ -6561,7 +6561,6 @@
     "xpack.apm.tutorial.specProvider.longDescription": "Le monitoring des performances applicatives (APM) collecte les indicateurs et les erreurs de performance approfondies depuis votre application. Cela vous permet de monitorer les performances de milliers d'applications en temps réel. [Learn more]({learnMoreLink}).",
     "xpack.apm.tutorial.windowsServerInstructions.textPost": "Remarque : si l'exécution du script est désactivée dans votre système, vous devez définir la politique d'exécution de la session en cours de sorte que l'exécution du script soit autorisée. Par exemple : {command}.",
     "xpack.apm.tutorial.windowsServerInstructions.textPre": "1. Téléchargez le fichier zip APM Server Windows depuis [Download page]({downloadPageLink}).\n2. Extrayez le contenu du fichier zip dans {zipFileExtractFolder}.\n3. Renommez le répertoire {apmServerDirectory} en \"APM-Server\".\n4. Ouvrez une invite PowerShell en tant qu'administrateur (faites un clic droit sur l'icône PowerShell et sélectionnez **Exécuter en tant qu'administrateur**). Si vous exécutez Windows XP, vous devrez peut-être télécharger et installer PowerShell.\n5. Dans l'invite PowerShell, exécutez les commandes suivantes pour installer le serveur APM en tant que service Windows :",
-    "xpack.apm.unsavedChanges": "{unsavedChangesCount, plural, =0{0 modification non enregistrée} one {1 modification non enregistrée} other {# modifications non enregistrées}} ",
     "xpack.apm.waterfall.errorCount": "{errorCount, plural, one {Afficher l'erreur liée} other {Afficher # erreurs liées}}",
     "xpack.apm.waterfall.spanLinks.badge": "{total} {total, plural, one {lien d'intervalle} other {liens d'intervalle}}",
     "xpack.apm.waterfall.spanLinks.tooltip.linkedChildren": "{linkedChildren} entrants",
@@ -6635,7 +6634,6 @@
     "xpack.apm.agentConfig.servicePage.service.fieldLabel": "Nom de service",
     "xpack.apm.agentConfig.servicePage.service.placeholder": "Sélectionner une option",
     "xpack.apm.agentConfig.servicePage.service.title": "Service",
-    "xpack.apm.agentConfig.settingsPage.discardChangesButton": "Abandonner les modifications",
     "xpack.apm.agentConfig.settingsPage.notFound.message": "La configuration demandée n'existe pas",
     "xpack.apm.agentConfig.settingsPage.notFound.title": "Désolé, une erreur est survenue",
     "xpack.apm.agentConfig.settingsPage.saveButton": "Enregistrer la configuration",

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

@@ -6549,7 +6549,6 @@
     "xpack.apm.tutorial.specProvider.longDescription": "アプリケーションパフォーマンスモニタリング（APM）は、アプリケーション内から詳細なパフォーマンスメトリックやエラーを収集します。何千ものアプリケーションのパフォーマンスをリアルタイムで監視できます。[詳細]（{learnMoreLink}）。",
     "xpack.apm.tutorial.windowsServerInstructions.textPost": "注：システムでスクリプトの実行が無効な場合、スクリプトを実行するために現在のセッションの実行ポリシーの設定が必要となります。例：{command}。",
     "xpack.apm.tutorial.windowsServerInstructions.textPre": "1.[ダウンロードページ]（{downloadPageLink}）から APM Server Windows zip ファイルをダウンロードします。\n2.zip ファイルの内容を {zipFileExtractFolder} に抽出します。\n3.「{apmServerDirectory} ディレクトリの名前を「APM-Server」に変更します。\n4.管理者としてPowerShellプロンプトを開きます（PowerShellアイコンを右クリックして「管理者として実行」を選択します）。Windows XPをご使用の場合、PowerShellのダウンロードとインストールが必要な場合があります。\n5.PowerShell プロンプトで次のコマンドを実行し、APM Server を Windows サービスとしてインストールします。",
-    "xpack.apm.unsavedChanges": "{unsavedChangesCount, plural, other  {# 未保存変更}} ",
     "xpack.apm.waterfall.errorCount": "{errorCount, plural, one {関連するエラーを表示} other {View # 件の関連するエラーを表示}}",
     "xpack.apm.waterfall.spanLinks.badge": "{total} {total, plural, other {個のスパンリンク}}",
     "xpack.apm.waterfall.spanLinks.tooltip.linkedChildren": "{linkedChildren}受信",
@@ -6623,7 +6622,6 @@
     "xpack.apm.agentConfig.servicePage.service.fieldLabel": "サービス名",
     "xpack.apm.agentConfig.servicePage.service.placeholder": "オプションを選択",
     "xpack.apm.agentConfig.servicePage.service.title": "サービス",
-    "xpack.apm.agentConfig.settingsPage.discardChangesButton": "変更を破棄",
     "xpack.apm.agentConfig.settingsPage.notFound.message": "リクエストされた構成が存在しません",
     "xpack.apm.agentConfig.settingsPage.notFound.title": "申し訳ございません、エラーが発生しました",
     "xpack.apm.agentConfig.settingsPage.saveButton": "構成を保存",

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

@@ -6562,7 +6562,6 @@
     "xpack.apm.tutorial.specProvider.longDescription": "应用程序性能监测 (APM) 从您的应用程序内收集深入全面的性能指标和错误。其允许您实时监测数以千计的应用程序的性能。[了解详情]({learnMoreLink})。",
     "xpack.apm.tutorial.windowsServerInstructions.textPost": "注意：如果您的系统禁用了脚本执行，则需要为当前会话设置执行策略，以允许脚本运行。示例：{command}。",
     "xpack.apm.tutorial.windowsServerInstructions.textPre": "1.从[下载页面]({downloadPageLink})下载 APM Server Windows zip 文件。\n2.将 zip 文件的内容解压缩到 {zipFileExtractFolder}。\n3.将 {apmServerDirectory} 目录重命名为 `APM-Server`。\n4.以管理员身份打开 PowerShell 提示符（右键单击 PowerShell 图标，然后选择**以管理员身份运行**）。如果运行的是 Windows XP，则可能需要下载并安装 PowerShell。\n5.从 PowerShell 提示符处，运行以下命令以将 APM Server 安装为 Windows 服务：",
-    "xpack.apm.unsavedChanges": "{unsavedChangesCount, plural, =0{0 个未保存更改} one {1 个未保存更改} other {# 个未保存更改}} ",
     "xpack.apm.waterfall.errorCount": "{errorCount, plural, one {查看相关错误} other {查看 # 个相关错误}}",
     "xpack.apm.waterfall.spanLinks.badge": "{total} 个{total, plural, other {跨度链接}}",
     "xpack.apm.waterfall.spanLinks.tooltip.linkedChildren": "{linkedChildren} 传入",
@@ -6636,7 +6635,6 @@
     "xpack.apm.agentConfig.servicePage.service.fieldLabel": "服务名称",
     "xpack.apm.agentConfig.servicePage.service.placeholder": "选择选项",
     "xpack.apm.agentConfig.servicePage.service.title": "服务",
-    "xpack.apm.agentConfig.settingsPage.discardChangesButton": "放弃更改",
     "xpack.apm.agentConfig.settingsPage.notFound.message": "请求的配置不存在",
     "xpack.apm.agentConfig.settingsPage.notFound.title": "抱歉，有错误",
     "xpack.apm.agentConfig.settingsPage.saveButton": "保存配置",