Add support for single manual steps to Upgrade Assistant. (elastic#11…

…3344)
sabarasaba · Oct 26, 2021 · 86991fe · 86991fe
1 parent e6ac0a3
commit 86991fe
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 21 deletions.
diff --git a/...upgrade_assistant/__jest__/client_integration/helpers/kibana_deprecations_service.mock.ts b/...upgrade_assistant/__jest__/client_integration/helpers/kibana_deprecations_service.mock.ts
@@ -10,7 +10,8 @@ import type { DeprecationsServiceStart, DomainDeprecationDetails } from 'kibana/
 const kibanaDeprecations: DomainDeprecationDetails[] = [
   {
     correctiveActions: {
-      manualSteps: ['Step 1', 'Step 2', 'Step 3'],
+      // Only has one manual step.
+      manualSteps: ['Step 1'],
       api: {
         method: 'POST',
         path: '/test',
@@ -24,6 +25,7 @@ const kibanaDeprecations: DomainDeprecationDetails[] = [
   },
   {
     correctiveActions: {
+      // Has multiple manual steps.
       manualSteps: ['Step 1', 'Step 2', 'Step 3'],
     },
     domainId: 'test_domain_2',

diff --git a/...istant/__jest__/client_integration/kibana_deprecations/deprecation_details_flyout.test.ts b/...istant/__jest__/client_integration/kibana_deprecations/deprecation_details_flyout.test.ts
@@ -40,22 +40,26 @@ describe('Kibana deprecation details flyout', () => {
   });
 
   describe('Deprecation with manual steps', () => {
-    test('renders flyout with manual steps only', async () => {
+    test('renders flyout with single manual step as a standalone paragraph', async () => {
       const { find, exists, actions } = testBed;
       const manualDeprecation = mockedKibanaDeprecations[1];
 
-      await actions.table.clickDeprecationAt(1);
+      await actions.table.clickDeprecationAt(0);
 
       expect(exists('kibanaDeprecationDetails')).toBe(true);
-      expect(exists('kibanaDeprecationDetails.warningDeprecationBadge')).toBe(true);
       expect(find('kibanaDeprecationDetails.flyoutTitle').text()).toBe(manualDeprecation.title);
-      expect(find('manualStepsList').find('li').length).toEqual(
-        manualDeprecation.correctiveActions.manualSteps.length
-      );
+      expect(find('manualStep').length).toBe(1);
+    });
 
-      // Quick resolve callout and button should not display
-      expect(exists('quickResolveCallout')).toBe(false);
-      expect(exists('resolveButton')).toBe(false);
+    test('renders flyout with multiple manual steps as a list', async () => {
+      const { find, exists, actions } = testBed;
+      const manualDeprecation = mockedKibanaDeprecations[1];
+
+      await actions.table.clickDeprecationAt(1);
+
+      expect(exists('kibanaDeprecationDetails')).toBe(true);
+      expect(find('kibanaDeprecationDetails.flyoutTitle').text()).toBe(manualDeprecation.title);
+      expect(find('manualStepsListItem').length).toBe(3);
     });
   });
 
@@ -71,9 +75,6 @@ describe('Kibana deprecation details flyout', () => {
       expect(find('kibanaDeprecationDetails.flyoutTitle').text()).toBe(
         quickResolveDeprecation.title
       );
-      expect(find('manualStepsList').find('li').length).toEqual(
-        quickResolveDeprecation.correctiveActions.manualSteps.length
-      );
 
       // Quick resolve callout and button should display
       expect(exists('quickResolveCallout')).toBe(true);

diff --git a/...ssistant/public/application/components/kibana_deprecations/deprecation_details_flyout.tsx b/...ssistant/public/application/components/kibana_deprecations/deprecation_details_flyout.tsx
@@ -203,16 +203,26 @@ export const DeprecationDetailsFlyout = ({
               <h3>{i18nTexts.manualFixTitle}</h3>
             </EuiTitle>
 
-            <EuiSpacer />
+            <EuiSpacer size="s" />
 
             <EuiText>
-              <ol data-test-subj="manualStepsList">
-                {correctiveActions.manualSteps.map((step, stepIndex) => (
-                  <li key={`step-${stepIndex}`} className="upgResolveStep eui-textBreakWord">
-                    {step}
-                  </li>
-                ))}
-              </ol>
+              {correctiveActions.manualSteps.length === 1 ? (
+                <p data-test-subj="manualStep" className="eui-textBreakWord">
+                  {correctiveActions.manualSteps[0]}
+                </p>
+              ) : (
+                <ol data-test-subj="manualStepsList">
+                  {correctiveActions.manualSteps.map((step, stepIndex) => (
+                    <li
+                      data-test-subj="manualStepsListItem"
+                      key={`step-${stepIndex}`}
+                      className="upgResolveStep eui-textBreakWord"
+                    >
+                      {step}
+                    </li>
+                  ))}
+                </ol>
+              )}
             </EuiText>
           </div>
         )}