[7.x] [ILM] Add links to "Snapshot and Restore" from ILM "wait for snapshot policy" (#72473)

x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.helpers.tsx

@@ -40,6 +40,9 @@ const testBedConfig: TestBedConfig = {
     initialEntries: [`/policies/edit/${POLICY_NAME}`],
     componentRoutePath: `/policies/edit/:policyName`,
   },
+  defaultProps: {
+    getUrlForApp: () => {},
+  },
 };
 
 const initTestBed = registerTestBed(EditPolicy, testBedConfig);

x-pack/plugins/index_lifecycle_management/__jest__/components/edit_policy.test.js

@@ -120,7 +120,7 @@ describe('edit policy', () => {
     store = indexLifecycleManagementStore();
     component = (
       <Provider store={store}>
-        <EditPolicy />
+        <EditPolicy getUrlForApp={() => {}} />
       </Provider>
     );
     store.dispatch(fetchedPolicies(policies));
@@ -155,7 +155,7 @@ describe('edit policy', () => {
     test('should show error when trying to save as new policy but using the same name', () => {
       component = (
         <Provider store={store}>
-          <EditPolicy match={{ params: { policyName: 'testy0' } }} />
+          <EditPolicy match={{ params: { policyName: 'testy0' } }} getUrlForApp={() => {}} />
         </Provider>
       );
       const rendered = mountWithIntl(component);

x-pack/plugins/index_lifecycle_management/public/application/app.tsx

@@ -17,9 +17,11 @@ import { trackUiMetric } from './services/ui_metric';
 export const App = ({
   history,
   navigateToApp,
+  getUrlForApp,
 }: {
   history: ScopedHistory;
   navigateToApp: ApplicationStart['navigateToApp'];
+  getUrlForApp: ApplicationStart['getUrlForApp'];
 }) => {
   useEffect(() => trackUiMetric(METRIC_TYPE.LOADED, UIM_APP_LOAD), []);
 
@@ -32,7 +34,10 @@ export const App = ({
           path={`/policies`}
           render={(props) => <PolicyTable {...props} navigateToApp={navigateToApp} />}
         />
-        <Route path={`/policies/edit/:policyName?`} component={EditPolicy} />
+        <Route
+          path={`/policies/edit/:policyName?`}
+          render={(props) => <EditPolicy {...props} getUrlForApp={getUrlForApp} />}
+        />
       </Switch>
     </Router>
   );

x-pack/plugins/index_lifecycle_management/public/application/index.tsx

@@ -17,12 +17,13 @@ export const renderApp = (
   element: Element,
   I18nContext: I18nStart['Context'],
   history: ScopedHistory,
-  navigateToApp: ApplicationStart['navigateToApp']
+  navigateToApp: ApplicationStart['navigateToApp'],
+  getUrlForApp: ApplicationStart['getUrlForApp']
 ): UnmountCallback => {
   render(
     <I18nContext>
       <Provider store={indexLifecycleManagementStore()}>
-        <App history={history} navigateToApp={navigateToApp} />
+        <App history={history} navigateToApp={navigateToApp} getUrlForApp={getUrlForApp} />
       </Provider>
     </I18nContext>,
     element

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/delete_phase/delete_phase.js

@@ -123,6 +123,7 @@ export class DeletePhase extends PureComponent {
               <SnapshotPolicies
                 value={phaseData[PHASE_WAIT_FOR_SNAPSHOT_POLICY]}
                 onChange={(value) => setPhaseData(PHASE_WAIT_FOR_SNAPSHOT_POLICY, value)}
+                getUrlForApp={this.props.getUrlForApp}
               />
             </EuiFormRow>
           </EuiDescribedFormGroup>

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/snapshot_policies/snapshot_policies.tsx

@@ -8,12 +8,14 @@ import React, { Fragment } from 'react';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import { ApplicationStart } from 'kibana/public';
 
 import {
   EuiButtonIcon,
   EuiCallOut,
   EuiComboBox,
   EuiComboBoxOptionOption,
+  EuiLink,
   EuiSpacer,
 } from '@elastic/eui';
 
@@ -22,8 +24,13 @@ import { useLoadSnapshotPolicies } from '../../../../services/api';
 interface Props {
   value: string;
   onChange: (value: string) => void;
+  getUrlForApp: ApplicationStart['getUrlForApp'];
 }
-export const SnapshotPolicies: React.FunctionComponent<Props> = ({ value, onChange }) => {
+export const SnapshotPolicies: React.FunctionComponent<Props> = ({
+  value,
+  onChange,
+  getUrlForApp,
+}) => {
   const { error, isLoading, data, sendRequest } = useLoadSnapshotPolicies();
 
   const policies = data.map((name: string) => ({
@@ -43,14 +50,19 @@ export const SnapshotPolicies: React.FunctionComponent<Props> = ({ value, onChan
     onChange(newValue);
   };
 
+  const getUrlForSnapshotPolicyWizard = () => {
+    return getUrlForApp('management', {
+      path: `data/snapshot_restore/add_policy`,
+    });
+  };
+
   let calloutContent;
   if (error) {
     calloutContent = (
       <Fragment>
         <EuiSpacer size="m" />
         <EuiCallOut
           data-test-subj="policiesErrorCallout"
-          size="s"
           iconType="help"
           color="warning"
           title={
@@ -99,7 +111,19 @@ export const SnapshotPolicies: React.FunctionComponent<Props> = ({ value, onChan
         >
           <FormattedMessage
             id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.noPoliciesCreatedMessage"
-            defaultMessage="Create a snapshot lifecycle policy to automate the creation and deletion of cluster snapshots."
+            defaultMessage="{link} to automate the creation and deletion of cluster snapshots."
+            values={{
+              link: (
+                <EuiLink href={getUrlForSnapshotPolicyWizard()} target="_blank">
+                  {i18n.translate(
+                    'xpack.indexLifecycleMgmt.editPolicy.deletePhase.noPoliciesCreatedLink',
+                    {
+                      defaultMessage: 'Create a snapshot lifecycle policy',
+                    }
+                  )}
+                </EuiLink>
+              ),
+            }}
           />
         </EuiCallOut>
       </Fragment>
@@ -110,7 +134,6 @@ export const SnapshotPolicies: React.FunctionComponent<Props> = ({ value, onChan
         <EuiSpacer size="m" />
         <EuiCallOut
           data-test-subj="customPolicyCallout"
-          size="s"
           iconType="help"
           color="warning"
           title={
@@ -122,7 +145,19 @@ export const SnapshotPolicies: React.FunctionComponent<Props> = ({ value, onChan
         >
           <FormattedMessage
             id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.customPolicyMessage"
-            defaultMessage="Enter the name of an existing snapshot policy, or create a new policy with this name."
+            defaultMessage="Enter the name of an existing snapshot policy, or {link} with this name."
+            values={{
+              link: (
+                <EuiLink href={getUrlForSnapshotPolicyWizard()} target="_blank">
+                  {i18n.translate(
+                    'xpack.indexLifecycleMgmt.editPolicy.deletePhase.customPolicyLink',
+                    {
+                      defaultMessage: 'create a new policy',
+                    }
+                  )}
+                </EuiLink>
+              ),
+            }}
           />
         </EuiCallOut>
       </Fragment>

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.js

@@ -308,6 +308,7 @@ export class EditPolicy extends Component {
               <DeletePhase
                 errors={errors[PHASE_DELETE]}
                 isShowingErrors={isShowingErrors && !!findFirstError(errors[PHASE_DELETE], false)}
+                getUrlForApp={this.props.getUrlForApp}
               />
 
               <EuiHorizontalRule />

x-pack/plugins/index_lifecycle_management/public/plugin.tsx

@@ -47,7 +47,7 @@ export class IndexLifecycleManagementPlugin {
             chrome: { docTitle },
             i18n: { Context: I18nContext },
             docLinks: { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION },
-            application: { navigateToApp },
+            application: { navigateToApp, getUrlForApp },
           } = coreStart;
 
           docTitle.change(PLUGIN.TITLE);
@@ -58,7 +58,14 @@ export class IndexLifecycleManagementPlugin {
           );
 
           const { renderApp } = await import('./application');
-          const unmountAppCallback = renderApp(element, I18nContext, history, navigateToApp);
+
+          const unmountAppCallback = renderApp(
+            element,
+            I18nContext,
+            history,
+            navigateToApp,
+            getUrlForApp
+          );
 
           return () => {
             docTitle.reset();