[SR] Add tooltips for disabled fields on managed SLM repository and p…

…olicy (#196565) ## Summary Closes #173124 (comment) by adding tooltips details when hovering the disabled SLM repository or policy fields. ### Screenshots **SLM managed repository** ![Screenshot 2024-10-16 at 1 38 19](https://github.com/user-attachments/assets/3bd11ea5-f846-433f-8615-b51de184336b) **SLM managed policy** ![Screenshot 2024-10-16 at 1 37 57](https://github.com/user-attachments/assets/d11757bd-bda5-4b4f-8c1e-e795e01b1fa2) ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels) - [x] This will appear in the **Release Notes** and follow the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: Elena Stoeva <[email protected]>
elastic · Oct 25, 2024 · 3ce8b74 · 3ce8b74
1 parent 8b02c0d
commit 3ce8b74
Show file tree

Hide file tree

Showing 5 changed files with 247 additions and 125 deletions.
diff --git a/x-pack/plugins/snapshot_restore/public/application/components/disable_tooltip.tsx b/x-pack/plugins/snapshot_restore/public/application/components/disable_tooltip.tsx
@@ -0,0 +1,52 @@
+/*
+ * 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 React, { ReactElement } from 'react';
+import { EuiToolTip } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export const MANAGED_REPOSITORY_TOOLTIP_MESSAGE = i18n.translate(
+  'xpack.snapshotRestore.repositoryForm.disableToolTip',
+  {
+    defaultMessage: 'This field is disabled because you are editing a managed repository.',
+  }
+);
+
+export const MANAGED_POLICY_TOOLTIP_MESSAGE = i18n.translate(
+  'xpack.snapshotRestore.policyForm.disableToolTip',
+  {
+    defaultMessage: 'This field is disabled because you are editing a managed policy.',
+  }
+);
+
+interface Props {
+  isManaged?: boolean;
+  tooltipMessage: string;
+  component: ReactElement;
+}
+
+/**
+ * Component that wraps a given component (disabled field) with a tooltip if a repository
+ * or policy is managed (isManaged === true).
+ *
+ * @param {boolean} isManaged - Determines if the tooltip should be displayed.
+ * @param {string} tooltipMessage - The message to display inside the tooltip.
+ * @param {React.ReactElement} component - The component to wrap with the tooltip.
+ */
+export const DisableToolTip: React.FunctionComponent<Props> = ({
+  isManaged,
+  tooltipMessage,
+  component,
+}) => {
+  return isManaged ? (
+    <EuiToolTip content={tooltipMessage} display="block">
+      {component}
+    </EuiToolTip>
+  ) : (
+    component
+  );
+};
diff --git a/...ugins/snapshot_restore/public/application/components/policy_form/steps/step_logistics.tsx b/...ugins/snapshot_restore/public/application/components/policy_form/steps/step_logistics.tsx
@@ -33,6 +33,7 @@ import { useLoadRepositories } from '../../../services/http';
 import { linkToAddRepository } from '../../../services/navigation';
 import { InlineLoading } from '../..';
 import { StepProps } from '.';
+import { DisableToolTip, MANAGED_POLICY_TOOLTIP_MESSAGE } from '../../disable_tooltip';
 
 export const PolicyStepLogistics: React.FunctionComponent<StepProps> = ({
   policy,
@@ -258,22 +259,28 @@ export const PolicyStepLogistics: React.FunctionComponent<StepProps> = ({
     }
 
     return (
-      <EuiSelect
-        options={repositories.map(({ name }: Repository) => ({
-          value: name,
-          text: name,
-        }))}
-        hasNoInitialSelection={!doesRepositoryExist}
-        value={!doesRepositoryExist ? '' : policy.repository}
-        onBlur={() => setTouched({ ...touched, repository: true })}
-        onChange={(e) => {
-          updatePolicy({
-            repository: e.target.value,
-          });
-        }}
-        fullWidth
-        data-test-subj="repositorySelect"
-        disabled={policy?.isManagedPolicy && isEditing}
+      <DisableToolTip
+        isManaged={policy?.isManagedPolicy}
+        tooltipMessage={MANAGED_POLICY_TOOLTIP_MESSAGE}
+        component={
+          <EuiSelect
+            options={repositories.map(({ name }: Repository) => ({
+              value: name,
+              text: name,
+            }))}
+            hasNoInitialSelection={!doesRepositoryExist}
+            value={!doesRepositoryExist ? '' : policy.repository}
+            onBlur={() => setTouched({ ...touched, repository: true })}
+            onChange={(e) => {
+              updatePolicy({
+                repository: e.target.value,
+              });
+            }}
+            fullWidth
+            data-test-subj="repositorySelect"
+            disabled={policy?.isManagedPolicy && isEditing}
+          />
+        }
       />
     );
   };
@@ -325,25 +332,31 @@ export const PolicyStepLogistics: React.FunctionComponent<StepProps> = ({
         }
         fullWidth
       >
-        <EuiFieldText
-          defaultValue={policy.snapshotName}
-          fullWidth
-          onChange={(e) => {
-            updatePolicy({
-              snapshotName: e.target.value,
-            });
-          }}
-          onBlur={() => setTouched({ ...touched, snapshotName: true })}
-          placeholder={i18n.translate(
-            'xpack.snapshotRestore.policyForm.stepLogistics.policySnapshotNamePlaceholder',
-            {
-              defaultMessage: `'<daily-snap-{now/d}>'`,
-              description:
-                'Example date math snapshot name. Keeping the same syntax is important: <SOME-TRANSLATION-{now/d}>',
-            }
-          )}
-          data-test-subj="snapshotNameInput"
-          disabled={policy?.isManagedPolicy && isEditing}
+        <DisableToolTip
+          isManaged={policy?.isManagedPolicy}
+          tooltipMessage={MANAGED_POLICY_TOOLTIP_MESSAGE}
+          component={
+            <EuiFieldText
+              defaultValue={policy.snapshotName}
+              fullWidth
+              onChange={(e) => {
+                updatePolicy({
+                  snapshotName: e.target.value,
+                });
+              }}
+              onBlur={() => setTouched({ ...touched, snapshotName: true })}
+              placeholder={i18n.translate(
+                'xpack.snapshotRestore.policyForm.stepLogistics.policySnapshotNamePlaceholder',
+                {
+                  defaultMessage: `'<daily-snap-{now/d}>'`,
+                  description:
+                    'Example date math snapshot name. Keeping the same syntax is important: <SOME-TRANSLATION-{now/d}>',
+                }
+              )}
+              data-test-subj="snapshotNameInput"
+              disabled={policy?.isManagedPolicy && isEditing}
+            />
+          }
         />
       </EuiFormRow>
     </EuiDescribedFormGroup>

diff --git a/...ot_restore/public/application/components/repository_form/type_settings/azure_settings.tsx b/...ot_restore/public/application/components/repository_form/type_settings/azure_settings.tsx
@@ -18,6 +18,7 @@ import {
 import { AzureRepository, Repository } from '../../../../../common/types';
 import { RepositorySettingsValidation } from '../../../services/validation';
 import { ChunkSizeField, MaxSnapshotsField, MaxRestoreField } from './common';
+import { DisableToolTip, MANAGED_REPOSITORY_TOOLTIP_MESSAGE } from '../../disable_tooltip';
 
 interface Props {
   repository: AzureRepository;
@@ -94,16 +95,22 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
           isInvalid={Boolean(hasErrors && settingErrors.client)}
           error={settingErrors.client}
         >
-          <EuiFieldText
-            defaultValue={client || ''}
-            fullWidth
-            onChange={(e) => {
-              updateRepositorySettings({
-                client: e.target.value,
-              });
-            }}
-            data-test-subj="clientInput"
-            disabled={isManagedRepository}
+          <DisableToolTip
+            isManaged={isManagedRepository}
+            tooltipMessage={MANAGED_REPOSITORY_TOOLTIP_MESSAGE}
+            component={
+              <EuiFieldText
+                defaultValue={client || ''}
+                fullWidth
+                onChange={(e) => {
+                  updateRepositorySettings({
+                    client: e.target.value,
+                  });
+                }}
+                data-test-subj="clientInput"
+                disabled={isManagedRepository}
+              />
+            }
           />
         </EuiFormRow>
       </EuiDescribedFormGroup>
@@ -139,16 +146,22 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
           isInvalid={Boolean(hasErrors && settingErrors.container)}
           error={settingErrors.container}
         >
-          <EuiFieldText
-            defaultValue={container || ''}
-            fullWidth
-            onChange={(e) => {
-              updateRepositorySettings({
-                container: e.target.value,
-              });
-            }}
-            data-test-subj="containerInput"
-            disabled={isManagedRepository}
+          <DisableToolTip
+            isManaged={isManagedRepository}
+            tooltipMessage={MANAGED_REPOSITORY_TOOLTIP_MESSAGE}
+            component={
+              <EuiFieldText
+                defaultValue={container || ''}
+                fullWidth
+                onChange={(e) => {
+                  updateRepositorySettings({
+                    container: e.target.value,
+                  });
+                }}
+                data-test-subj="containerInput"
+                disabled={isManagedRepository}
+              />
+            }
           />
         </EuiFormRow>
       </EuiDescribedFormGroup>
@@ -184,16 +197,22 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
           isInvalid={Boolean(hasErrors && settingErrors.basePath)}
           error={settingErrors.basePath}
         >
-          <EuiFieldText
-            defaultValue={basePath || ''}
-            fullWidth
-            onChange={(e) => {
-              updateRepositorySettings({
-                basePath: e.target.value,
-              });
-            }}
-            data-test-subj="basePathInput"
-            disabled={isManagedRepository}
+          <DisableToolTip
+            isManaged={isManagedRepository}
+            tooltipMessage={MANAGED_REPOSITORY_TOOLTIP_MESSAGE}
+            component={
+              <EuiFieldText
+                defaultValue={basePath || ''}
+                fullWidth
+                onChange={(e) => {
+                  updateRepositorySettings({
+                    basePath: e.target.value,
+                  });
+                }}
+                data-test-subj="basePathInput"
+                disabled={isManagedRepository}
+              />
+            }
           />
         </EuiFormRow>
       </EuiDescribedFormGroup>

diff --git a/...shot_restore/public/application/components/repository_form/type_settings/gcs_settings.tsx b/...shot_restore/public/application/components/repository_form/type_settings/gcs_settings.tsx
@@ -12,6 +12,7 @@ import { EuiDescribedFormGroup, EuiFieldText, EuiFormRow, EuiSwitch, EuiTitle }
 import { GCSRepository, Repository } from '../../../../../common/types';
 import { RepositorySettingsValidation } from '../../../services/validation';
 import { ChunkSizeField, MaxSnapshotsField, MaxRestoreField } from './common';
+import { DisableToolTip, MANAGED_REPOSITORY_TOOLTIP_MESSAGE } from '../../disable_tooltip';
 
 interface Props {
   repository: GCSRepository;
@@ -82,16 +83,22 @@ export const GCSSettings: React.FunctionComponent<Props> = ({
           isInvalid={Boolean(hasErrors && settingErrors.client)}
           error={settingErrors.client}
         >
-          <EuiFieldText
-            defaultValue={client || ''}
-            fullWidth
-            onChange={(e) => {
-              updateRepositorySettings({
-                client: e.target.value,
-              });
-            }}
-            data-test-subj="clientInput"
-            disabled={isManagedRepository}
+          <DisableToolTip
+            isManaged={isManagedRepository}
+            tooltipMessage={MANAGED_REPOSITORY_TOOLTIP_MESSAGE}
+            component={
+              <EuiFieldText
+                defaultValue={client || ''}
+                fullWidth
+                onChange={(e) => {
+                  updateRepositorySettings({
+                    client: e.target.value,
+                  });
+                }}
+                data-test-subj="clientInput"
+                disabled={isManagedRepository}
+              />
+            }
           />
         </EuiFormRow>
       </EuiDescribedFormGroup>
@@ -127,16 +134,22 @@ export const GCSSettings: React.FunctionComponent<Props> = ({
           isInvalid={Boolean(hasErrors && settingErrors.bucket)}
           error={settingErrors.bucket}
         >
-          <EuiFieldText
-            defaultValue={bucket || ''}
-            fullWidth
-            onChange={(e) => {
-              updateRepositorySettings({
-                bucket: e.target.value,
-              });
-            }}
-            data-test-subj="bucketInput"
-            disabled={isManagedRepository}
+          <DisableToolTip
+            isManaged={isManagedRepository}
+            tooltipMessage={MANAGED_REPOSITORY_TOOLTIP_MESSAGE}
+            component={
+              <EuiFieldText
+                defaultValue={bucket || ''}
+                fullWidth
+                onChange={(e) => {
+                  updateRepositorySettings({
+                    bucket: e.target.value,
+                  });
+                }}
+                data-test-subj="bucketInput"
+                disabled={isManagedRepository}
+              />
+            }
           />
         </EuiFormRow>
       </EuiDescribedFormGroup>
@@ -172,16 +185,22 @@ export const GCSSettings: React.FunctionComponent<Props> = ({
           isInvalid={Boolean(hasErrors && settingErrors.basePath)}
           error={settingErrors.basePath}
         >
-          <EuiFieldText
-            defaultValue={basePath || ''}
-            fullWidth
-            onChange={(e) => {
-              updateRepositorySettings({
-                basePath: e.target.value,
-              });
-            }}
-            data-test-subj="basePathInput"
-            disabled={isManagedRepository}
+          <DisableToolTip
+            isManaged={isManagedRepository}
+            tooltipMessage={MANAGED_REPOSITORY_TOOLTIP_MESSAGE}
+            component={
+              <EuiFieldText
+                defaultValue={basePath || ''}
+                fullWidth
+                onChange={(e) => {
+                  updateRepositorySettings({
+                    basePath: e.target.value,
+                  });
+                }}
+                data-test-subj="basePathInput"
+                disabled={isManagedRepository}
+              />
+            }
           />
         </EuiFormRow>
       </EuiDescribedFormGroup>