Improve UX when editing an alert

elastic · Sep 7, 2020 · 11f824b · 11f824b
1 parent 6b1b32b
commit 11f824b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/x-pack/plugins/actions/server/builtin_action_types/jira/api.test.ts b/x-pack/plugins/actions/server/builtin_action_types/jira/api.test.ts
@@ -360,7 +360,7 @@ describe('api', () => {
     });
 
     describe('fieldsByIssueType', () => {
-      test('it returns the issue types correctly', async () => {
+      test('it returns the fields correctly', async () => {
         const res = await api.fieldsByIssueType({
           externalService,
           params: { id: '10006' },

diff --git a/...iggers_actions_ui/public/application/components/builtin_action_types/jira/jira_params.tsx b/...iggers_actions_ui/public/application/components/builtin_action_types/jira/jira_params.tsx
@@ -33,13 +33,20 @@ const JiraParamsFields: React.FunctionComponent<ActionParamsProps<JiraActionPara
     actionParams.subActionParams || {};
 
   const [issueTypesSelectOptions, setIssueTypesSelectOptions] = useState<EuiSelectOption[]>([]);
+  const [firstLoad, setFirstLoad] = useState(false);
   const [prioritiesSelectOptions, setPrioritiesSelectOptions] = useState<EuiSelectOption[]>([]);
   const { http, toastNotifications } = useAppDependencies();
+
+  useEffect(() => {
+    setFirstLoad(true);
+  }, []);
+
   const { isLoading: isLoadingIssueTypes, issueTypes } = useGetIssueTypes({
     http,
     toastNotifications,
     actionConnector,
   });
+
   const { isLoading: isLoadingFields, fields } = useGetFieldsByIssueType({
     http,
     toastNotifications,
@@ -90,15 +97,27 @@ const JiraParamsFields: React.FunctionComponent<ActionParamsProps<JiraActionPara
 
   // Reset parameters when changing connector
   useEffect(() => {
+    if (!firstLoad) {
+      return;
+    }
+
     setIssueTypesSelectOptions([]);
-    editAction('subActionParams', { savedObjectId }, index);
+    editAction('subActionParams', { title, comments, description: '', savedObjectId }, index);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [actionConnector]);
 
   // Reset fields when changing connector or issue type
   useEffect(() => {
+    if (!firstLoad) {
+      return;
+    }
+
     setPrioritiesSelectOptions([]);
-    editAction('subActionParams', { issueType, savedObjectId }, index);
+    editAction(
+      'subActionParams',
+      { title, issueType, comments, description: '', savedObjectId },
+      index
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [issueType, savedObjectId]);
 
@@ -121,15 +140,15 @@ const JiraParamsFields: React.FunctionComponent<ActionParamsProps<JiraActionPara
 
   // Set default issue type
   useEffect(() => {
-    if (issueTypesSelectOptions.length > 0) {
+    if (!issueType && issueTypesSelectOptions.length > 0) {
       editSubActionProperty('issueType', issueTypesSelectOptions[0].value as string);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [issueTypes, issueTypesSelectOptions]);
 
   // Set default priority
   useEffect(() => {
-    if (prioritiesSelectOptions.length > 0) {
+    if (!priority && prioritiesSelectOptions.length > 0) {
       editSubActionProperty('priority', prioritiesSelectOptions[0].value as string);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps