[Automatic Import] Fixing only show cel generation flow when user sel…

…ects cel input (elastic#196356) ## Summary Fixing the Automatic Import flow so that cel generation only occurs when user selects the CEL input in the dropdown. (cherry picked from commit cb30988)
kibanamachine · Oct 15, 2024 · f8a18ac · f8a18ac
1 parent f0ec68a
commit f8a18ac
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 31 deletions.
diff --git a/...nts/create_integration/create_integration_assistant/create_integration_assistant.test.tsx b/...nts/create_integration/create_integration_assistant/create_integration_assistant.test.tsx
@@ -17,6 +17,7 @@ export const defaultInitialState: State = {
   connector: undefined,
   integrationSettings: undefined,
   isGenerating: false,
+  hasCelInput: false,
   result: undefined,
 };
 const mockInitialState = jest.fn((): State => defaultInitialState);
@@ -168,9 +169,9 @@ describe('CreateIntegration with generateCel enabled', () => {
     } as never);
   });
 
-  describe('when step is 5', () => {
+  describe('when step is 5 and has celInput', () => {
     beforeEach(() => {
-      mockInitialState.mockReturnValueOnce({ ...defaultInitialState, step: 5 });
+      mockInitialState.mockReturnValueOnce({ ...defaultInitialState, step: 5, hasCelInput: true });
     });
 
     it('should render cel input', () => {
@@ -184,9 +185,24 @@ describe('CreateIntegration with generateCel enabled', () => {
     });
   });
 
+  describe('when step is 5 and does not have celInput', () => {
+    beforeEach(() => {
+      mockInitialState.mockReturnValueOnce({ ...defaultInitialState, step: 5 });
+    });
+
+    it('should render deploy', () => {
+      const result = renderIntegrationAssistant();
+      expect(result.queryByTestId('deployStepMock')).toBeInTheDocument();
+    });
+  });
+
   describe('when step is 6', () => {
     beforeEach(() => {
-      mockInitialState.mockReturnValueOnce({ ...defaultInitialState, step: 6 });
+      mockInitialState.mockReturnValueOnce({
+        ...defaultInitialState,
+        step: 6,
+        celInputResult: { program: 'program', stateSettings: {}, redactVars: [] },
+      });
     });
 
     it('should render review', () => {

diff --git a/...mponents/create_integration/create_integration_assistant/create_integration_assistant.tsx b/...mponents/create_integration/create_integration_assistant/create_integration_assistant.tsx
@@ -44,6 +44,9 @@ export const CreateIntegrationAssistant = React.memo(() => {
       setIsGenerating: (payload) => {
         dispatch({ type: 'SET_IS_GENERATING', payload });
       },
+      setHasCelInput: (payload) => {
+        dispatch({ type: 'SET_HAS_CEL_INPUT', payload });
+      },
       setResult: (payload) => {
         dispatch({ type: 'SET_GENERATED_RESULT', payload });
       },
@@ -93,7 +96,7 @@ export const CreateIntegrationAssistant = React.memo(() => {
             />
           )}
           {state.step === 5 &&
-            (isGenerateCelEnabled ? (
+            (isGenerateCelEnabled && state.hasCelInput ? (
               <CelInputStep
                 integrationSettings={state.integrationSettings}
                 connector={state.connector}
@@ -107,7 +110,7 @@ export const CreateIntegrationAssistant = React.memo(() => {
               />
             ))}
 
-          {isGenerateCelEnabled && state.step === 6 && (
+          {isGenerateCelEnabled && state.celInputResult && state.step === 6 && (
             <ReviewCelStep
               isGenerating={state.isGenerating}
               celInputResult={state.celInputResult}
@@ -125,6 +128,7 @@ export const CreateIntegrationAssistant = React.memo(() => {
         <Footer
           currentStep={state.step}
           isGenerating={state.isGenerating}
+          hasCelInput={state.hasCelInput}
           isNextStepEnabled={isNextStepEnabled}
         />
       </KibanaPageTemplate>

diff --git a/.../public/components/create_integration/create_integration_assistant/footer/footer.test.tsx b/.../public/components/create_integration/create_integration_assistant/footer/footer.test.tsx
@@ -42,9 +42,12 @@ describe('Footer', () => {
   describe('when rendered', () => {
     let result: RenderResult;
     beforeEach(() => {
-      result = render(<Footer currentStep={1} isGenerating={false} isNextStepEnabled />, {
-        wrapper,
-      });
+      result = render(
+        <Footer currentStep={1} isGenerating={false} hasCelInput={false} isNextStepEnabled />,
+        {
+          wrapper,
+        }
+      );
     });
     it('should render footer buttons component', () => {
       expect(result.queryByTestId('buttonsFooter')).toBeInTheDocument();
@@ -66,9 +69,12 @@ describe('Footer', () => {
   describe('when step is 1', () => {
     let result: RenderResult;
     beforeEach(() => {
-      result = render(<Footer currentStep={1} isGenerating={false} isNextStepEnabled />, {
-        wrapper,
-      });
+      result = render(
+        <Footer currentStep={1} isGenerating={false} hasCelInput={false} isNextStepEnabled />,
+        {
+          wrapper,
+        }
+      );
     });
 
     describe('when next button is clicked', () => {
@@ -112,9 +118,12 @@ describe('Footer', () => {
   describe('when step is 2', () => {
     let result: RenderResult;
     beforeEach(() => {
-      result = render(<Footer currentStep={2} isGenerating={false} isNextStepEnabled />, {
-        wrapper,
-      });
+      result = render(
+        <Footer currentStep={2} isGenerating={false} hasCelInput={false} isNextStepEnabled />,
+        {
+          wrapper,
+        }
+      );
     });
 
     describe('when next button is clicked', () => {
@@ -159,9 +168,12 @@ describe('Footer', () => {
     describe('when it is not generating', () => {
       let result: RenderResult;
       beforeEach(() => {
-        result = render(<Footer currentStep={3} isGenerating={false} isNextStepEnabled />, {
-          wrapper,
-        });
+        result = render(
+          <Footer currentStep={3} isGenerating={false} hasCelInput={false} isNextStepEnabled />,
+          {
+            wrapper,
+          }
+        );
       });
 
       describe('when next button is clicked', () => {
@@ -205,9 +217,12 @@ describe('Footer', () => {
     describe('when it is generating', () => {
       let result: RenderResult;
       beforeEach(() => {
-        result = render(<Footer currentStep={3} isGenerating={true} isNextStepEnabled />, {
-          wrapper,
-        });
+        result = render(
+          <Footer currentStep={3} isGenerating={true} hasCelInput={false} isNextStepEnabled />,
+          {
+            wrapper,
+          }
+        );
       });
 
       it('should render the loader', () => {
@@ -219,9 +234,12 @@ describe('Footer', () => {
   describe('when step is 4', () => {
     let result: RenderResult;
     beforeEach(() => {
-      result = render(<Footer currentStep={4} isGenerating={false} isNextStepEnabled />, {
-        wrapper,
-      });
+      result = render(
+        <Footer currentStep={4} isGenerating={false} hasCelInput={false} isNextStepEnabled />,
+        {
+          wrapper,
+        }
+      );
     });
 
     describe('when next button is clicked', () => {
@@ -265,7 +283,7 @@ describe('Footer', () => {
   describe('when next step is disabled', () => {
     let result: RenderResult;
     beforeEach(() => {
-      result = render(<Footer currentStep={1} isGenerating={false} />, {
+      result = render(<Footer currentStep={1} isGenerating={false} hasCelInput={false} />, {
         wrapper,
       });
     });

diff --git a/...stant/public/components/create_integration/create_integration_assistant/footer/footer.tsx b/...stant/public/components/create_integration/create_integration_assistant/footer/footer.tsx
@@ -45,11 +45,12 @@ AnalyzeCelButtonText.displayName = 'AnalyzeCelButtonText';
 interface FooterProps {
   currentStep: State['step'];
   isGenerating: State['isGenerating'];
+  hasCelInput: State['hasCelInput'];
   isNextStepEnabled?: boolean;
 }
 
 export const Footer = React.memo<FooterProps>(
-  ({ currentStep, isGenerating, isNextStepEnabled = false }) => {
+  ({ currentStep, isGenerating, hasCelInput, isNextStepEnabled = false }) => {
     const telemetry = useTelemetry();
     const { setStep, setIsGenerating } = useActions();
     const navigate = useNavigate();
@@ -77,18 +78,18 @@ export const Footer = React.memo<FooterProps>(
       if (currentStep === 3) {
         return <AnalyzeButtonText isGenerating={isGenerating} />;
       }
-      if (currentStep === 4 && !isGenerateCelEnabled) {
+      if (currentStep === 4 && (!isGenerateCelEnabled || !hasCelInput)) {
         return i18n.ADD_TO_ELASTIC;
       }
-      if (currentStep === 5 && isGenerateCelEnabled) {
+      if (currentStep === 5 && isGenerateCelEnabled && hasCelInput) {
         return <AnalyzeCelButtonText isGenerating={isGenerating} />;
       }
       if (currentStep === 6 && isGenerateCelEnabled) {
         return i18n.ADD_TO_ELASTIC;
       }
-    }, [currentStep, isGenerating, isGenerateCelEnabled]);
+    }, [currentStep, isGenerating, hasCelInput, isGenerateCelEnabled]);
 
-    if (currentStep === 7 || (currentStep === 5 && !isGenerateCelEnabled)) {
+    if (currentStep === 7 || (currentStep === 5 && (!isGenerateCelEnabled || !hasCelInput))) {
       return <ButtonsFooter cancelButtonText={i18n.CLOSE} />;
     }
     return (

diff --git a/...ssistant/public/components/create_integration/create_integration_assistant/mocks/state.ts b/...ssistant/public/components/create_integration/create_integration_assistant/mocks/state.ts
@@ -423,6 +423,7 @@ export const mockState: State = {
     logSamples: rawSamples,
   },
   isGenerating: false,
+  hasCelInput: false,
   result,
 };
 
@@ -431,6 +432,7 @@ export const mockActions: Actions = {
   setConnector: jest.fn(),
   setIntegrationSettings: jest.fn(),
   setIsGenerating: jest.fn(),
+  setHasCelInput: jest.fn(),
   setResult: jest.fn(),
   setCelInputResult: jest.fn(),
 };
diff --git a/...tion_assistant/public/components/create_integration/create_integration_assistant/state.ts b/...tion_assistant/public/components/create_integration/create_integration_assistant/state.ts
@@ -13,6 +13,7 @@ export interface State {
   connector?: AIConnector;
   integrationSettings?: IntegrationSettings;
   isGenerating: boolean;
+  hasCelInput: boolean;
   result?: {
     pipeline: Pipeline;
     docs: Docs;
@@ -26,6 +27,7 @@ export const initialState: State = {
   connector: undefined,
   integrationSettings: undefined,
   isGenerating: false,
+  hasCelInput: false,
   result: undefined,
 };
 
@@ -34,6 +36,7 @@ type Action =
   | { type: 'SET_CONNECTOR'; payload: State['connector'] }
   | { type: 'SET_INTEGRATION_SETTINGS'; payload: State['integrationSettings'] }
   | { type: 'SET_IS_GENERATING'; payload: State['isGenerating'] }
+  | { type: 'SET_HAS_CEL_INPUT'; payload: State['hasCelInput'] }
   | { type: 'SET_GENERATED_RESULT'; payload: State['result'] }
   | { type: 'SET_CEL_INPUT_RESULT'; payload: State['celInputResult'] };
 
@@ -52,6 +55,8 @@ export const reducer = (state: State, action: Action): State => {
       return { ...state, integrationSettings: action.payload };
     case 'SET_IS_GENERATING':
       return { ...state, isGenerating: action.payload };
+    case 'SET_HAS_CEL_INPUT':
+      return { ...state, hasCelInput: action.payload };
     case 'SET_GENERATED_RESULT':
       return {
         ...state,
@@ -70,6 +75,7 @@ export interface Actions {
   setConnector: (payload: State['connector']) => void;
   setIntegrationSettings: (payload: State['integrationSettings']) => void;
   setIsGenerating: (payload: State['isGenerating']) => void;
+  setHasCelInput: (payload: State['hasCelInput']) => void;
   setResult: (payload: State['result']) => void;
   setCelInputResult: (payload: State['celInputResult']) => void;
 }

diff --git a/...eate_integration/create_integration_assistant/steps/data_stream_step/data_stream_step.tsx b/...eate_integration/create_integration_assistant/steps/data_stream_step/data_stream_step.tsx
@@ -53,7 +53,8 @@ interface DataStreamStepProps {
 }
 export const DataStreamStep = React.memo<DataStreamStepProps>(
   ({ integrationSettings, connector, isGenerating }) => {
-    const { setIntegrationSettings, setIsGenerating, setStep, setResult } = useActions();
+    const { setIntegrationSettings, setIsGenerating, setHasCelInput, setStep, setResult } =
+      useActions();
     const { isLoading: isLoadingPackageNames, packageNames } = useLoadPackageNames(); // this is used to avoid duplicate names
 
     const [name, setName] = useState<string>(integrationSettings?.name ?? '');
@@ -99,9 +100,13 @@ export const DataStreamStep = React.memo<DataStreamStepProps>(
           setIntegrationValues({ dataStreamDescription: e.target.value }),
         inputTypes: (options: EuiComboBoxOptionOption[]) => {
           setIntegrationValues({ inputTypes: options.map((option) => option.value as InputType) });
+          setHasCelInput(
+            // the cel value here comes from the input type options defined above
+            options.map((option) => option.value as InputType).includes('cel' as InputType)
+          );
         },
       };
-    }, [setIntegrationValues, setInvalidFields, packageNames]);
+    }, [setIntegrationValues, setInvalidFields, setHasCelInput, packageNames]);
 
     useEffect(() => {
       // Pre-populates the name from the title set in the previous step.