[ResponseOps][Actions] Don't show rule.tags for test mode (#145001)

This PR fixes a bug where the `rule.tags` were shown as an option in the
connector test mode. The test mode doesn't provide variables so it
shouldn't be shown.


### Rule Form
Still available when in the rule flow


![image](https://user-images.githubusercontent.com/56361221/201150790-0d23f0f7-4fb8-4fe1-973a-e4afde297192.png)


### Test Mode
Not available in the test mode


![image](https://user-images.githubusercontent.com/56361221/201150621-52e07b7f-ef97-42d9-80f1-eced195b7a9a.png)

x-pack/plugins/stack_connectors/public/connector_types/stack/opsgenie/create_alert/index.tsx

@@ -44,6 +44,7 @@ const FormView: React.FC<FormViewProps> = ({
   messageVariables,
   subActionParams,
   showSaveError,
+  executionMode,
 }) => {
   const isMessageInvalid =
     (errors['subActionParams.message'] !== undefined &&
@@ -72,7 +73,11 @@ const FormView: React.FC<FormViewProps> = ({
       <EuiSpacer size={'m'} />
       <EuiFlexGroup>
         <EuiFlexItem>
-          <Tags values={subActionParams?.tags ?? []} onChange={editOptionalSubAction} />
+          <Tags
+            values={subActionParams?.tags ?? []}
+            onChange={editOptionalSubAction}
+            executionMode={executionMode}
+          />
         </EuiFlexItem>
         <EuiFlexItem>
           <Priority priority={subActionParams?.priority} onChange={editOptionalSubAction} />
@@ -104,7 +109,7 @@ FormView.displayName = 'FormView';
 
 export type CreateAlertProps = Pick<
   ActionParamsProps<OpsgenieActionParams>,
-  'errors' | 'index' | 'messageVariables' | 'editAction'
+  'errors' | 'index' | 'messageVariables' | 'editAction' | 'executionMode'
 > & {
   subActionParams?: Partial<OpsgenieCreateAlertParams>;
   editSubAction: EditActionCallback;
@@ -121,6 +126,7 @@ const CreateAlertComponent: React.FC<CreateAlertProps> = ({
   messageVariables,
   subActionParams,
   showSaveError,
+  executionMode,
 }) => {
   const [showingMoreOptions, setShowingMoreOptions] = useState<boolean>(false);
   const [showJsonEditor, setShowJsonEditor] = useState<boolean>(false);

x-pack/plugins/stack_connectors/public/connector_types/stack/opsgenie/create_alert/tags.test.tsx

@@ -9,13 +9,15 @@ import React from 'react';
 import { screen, render, waitFor, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Tags } from './tags';
+import { ActionConnectorMode } from '@kbn/triggers-actions-ui-plugin/public';
 
 describe('Tags', () => {
   const onChange = jest.fn();
 
   const options = {
     values: [],
     onChange,
+    executionMode: ActionConnectorMode.ActionForm,
   };
 
   beforeEach(() => jest.clearAllMocks());
@@ -74,9 +76,7 @@ describe('Tags', () => {
       expect(screen.getByTestId('comboBoxSearchInput')).not.toBeDisabled();
     });
 
-    act(() => {
-      userEvent.click(screen.getByTestId('comboBoxSearchInput'));
-    });
+    userEvent.click(screen.getByTestId('comboBoxSearchInput'));
 
     userEvent.type(screen.getByTestId('comboBoxSearchInput'), 'awesome{enter}');
 
@@ -99,9 +99,7 @@ describe('Tags', () => {
       expect(screen.getByTestId('comboBoxSearchInput')).not.toBeDisabled();
     });
 
-    act(() => {
-      userEvent.click(screen.getByTestId('comboBoxSearchInput'));
-    });
+    userEvent.click(screen.getByTestId('comboBoxSearchInput'));
 
     await waitFor(() => {
       expect(screen.getByTestId('opsgenie-tags-rule-tags')).toBeInTheDocument();
@@ -116,9 +114,7 @@ describe('Tags', () => {
       expect(screen.getByTestId('comboBoxSearchInput')).not.toBeDisabled();
     });
 
-    act(() => {
-      userEvent.click(screen.getByTestId('comboBoxSearchInput'));
-    });
+    userEvent.click(screen.getByTestId('comboBoxSearchInput'));
 
     await waitFor(() => {
       expect(screen.getByTestId('opsgenie-tags-rule-tags')).toBeInTheDocument();
@@ -140,4 +136,19 @@ describe('Tags', () => {
     `)
     );
   });
+
+  it('does not contain the rule.tags option when in test mode', async () => {
+    render(<Tags {...{ ...options, executionMode: ActionConnectorMode.Test }} />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('comboBoxSearchInput')).not.toBeDisabled();
+    });
+
+    userEvent.click(screen.getByTestId('comboBoxSearchInput'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('opsgenie-tags-rule-tags')).not.toBeInTheDocument();
+      expect(screen.queryByText('The tags of the rule.')).not.toBeInTheDocument();
+    });
+  });
 });

x-pack/plugins/stack_connectors/public/connector_types/stack/opsgenie/create_alert/tags.tsx

@@ -17,13 +17,16 @@ import {
   EuiTextColor,
 } from '@elastic/eui';
 
+import { ActionConnectorMode, ActionParamsProps } from '@kbn/triggers-actions-ui-plugin/public';
+import type { OpsgenieActionParams } from '../../../../../server/connector_types/stack';
 import { RULE_TAGS_TEMPLATE } from '../../../../../common/opsgenie';
 import * as i18n from './translations';
 import { EditActionCallback } from '../types';
 
 interface TagsProps {
   onChange: EditActionCallback;
   values: string[];
+  executionMode: ActionParamsProps<OpsgenieActionParams>['executionMode'];
 }
 
 const options: Array<EuiComboBoxOptionOption<string>> = [
@@ -35,7 +38,7 @@ const options: Array<EuiComboBoxOptionOption<string>> = [
   },
 ];
 
-const TagsComponent: React.FC<TagsProps> = ({ onChange, values }) => {
+const TagsComponent: React.FC<TagsProps> = ({ onChange, values, executionMode }) => {
   const tagOptions = useMemo(() => values.map((value) => getTagAsOption(value)), [values]);
 
   const onCreateOption = useCallback(
@@ -85,7 +88,7 @@ const TagsComponent: React.FC<TagsProps> = ({ onChange, values }) => {
         rowHeight={50}
         fullWidth
         isClearable
-        options={options}
+        options={executionMode === ActionConnectorMode.ActionForm ? options : undefined}
         selectedOptions={tagOptions}
         onCreateOption={onCreateOption}
         onChange={onTagsChange}