[8.19] [Search][Query Rules UI] Create ruleset flow (#219674) (#220225)

kibanamachine · JoseLuisGJ · elasticmachine · web-flow · commit 4b8b5cff2027 · 2025-05-06T14:52:30.000+02:00
# Backport This will backport the following commits from `main` to `8.19`: - [[Search][Query Rules UI] Create ruleset flow (#219674)](#219674)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: José Luis González <joseluisgj@gmail.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
diff --git a/x-pack/solutions/search/plugins/search_query_rules/common/api_routes.ts b/x-pack/solutions/search/plugins/search_query_rules/common/api_routes.ts
@@ -9,5 +9,5 @@ export const PLUGIN_ROUTE_ROOT = '/app/elasticsearch/query_rules';
 
 export enum APIRoutes {
   QUERY_RULES_SETS = '/internal/search_query_rules/query_rules_sets',
-  QUERY_RULES_RULESET_FETCH = '/internal/search_query_rules/ruleset/{ruleset_id}',
+  QUERY_RULES_RULESET_ID = '/internal/search_query_rules/ruleset/{ruleset_id}',
 }
diff --git a/x-pack/solutions/search/plugins/search_query_rules/common/constants.ts b/x-pack/solutions/search/plugins/search_query_rules/common/constants.ts
@@ -29,9 +29,15 @@ PUT /_query_rules/my-ruleset
         }
       ],
       "actions": {
-        "ids": [
-          "id1",
-          "id2"
+        "docs": [
+          {
+            "_index": "my-index-000001",
+            "_id": "id1"
+          },
+          {
+            "_index": "my-index-000002",
+            "_id": "id2"
+          }
         ]
       }
     },
diff --git a/x-pack/solutions/search/plugins/search_query_rules/public/components/overview/overview.tsx b/x-pack/solutions/search/plugins/search_query_rules/public/components/overview/overview.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 import {
@@ -25,11 +25,13 @@ import { ErrorPrompt } from '../error_prompt/error_prompt';
 import { isPermissionError } from '../../utils/query_rules_utils';
 import queryRulesBackground from '../../assets/query-rule-background.svg';
 import { QueryRulesSets } from '../query_rules_sets/query_rules_sets';
+import { CreateRulesetModal } from '../query_rules_sets/create_ruleset_modal';
+
 import { QueryRulesPageTemplate } from '../../layout/query_rules_page_template';
 
 export const QueryRulesOverview = () => {
   const { data: queryRulesData, isInitialLoading, isError, error } = useFetchQueryRulesSets();
-
+  const [isCreateModalVisible, setIsCreateModalVisible] = useState(false);
   const backgroundProps = css({
     backgroundImage: `url(${queryRulesBackground})`,
     backgroundSize: 'contain',
@@ -68,12 +70,12 @@ export const QueryRulesOverview = () => {
                   fill
                   iconType="plusInCircle"
                   onClick={() => {
-                    // Logic to create a new query rule set
+                    setIsCreateModalVisible(true);
                   }}
                 >
                   <FormattedMessage
                     id="xpack.queryRules.queryRulesSetDetail.createButton"
-                    defaultMessage="Create"
+                    defaultMessage="Create ruleset"
                   />
                 </EuiButton>
               </EuiFlexItem>
@@ -97,6 +99,13 @@ export const QueryRulesOverview = () => {
               : backgroundProps,
         }}
       >
+        {isCreateModalVisible && (
+          <CreateRulesetModal
+            onClose={() => {
+              setIsCreateModalVisible(false);
+            }}
+          />
+        )}
         {isInitialLoading && <EuiLoadingSpinner />}
         {isError && (
           <ErrorPrompt errorType={isPermissionError(error) ? 'missingPermissions' : 'generic'} />
@@ -109,7 +118,7 @@ export const QueryRulesOverview = () => {
             <EuiFlexItem>
               <EmptyPrompt
                 getStartedAction={() => {
-                  // Logic to create a new query rule set
+                  setIsCreateModalVisible(true);
                 }}
               />
             </EuiFlexItem>
diff --git a/x-pack/solutions/search/plugins/search_query_rules/public/components/query_rules_sets/create_ruleset_modal.tsx b/x-pack/solutions/search/plugins/search_query_rules/public/components/query_rules_sets/create_ruleset_modal.tsx
@@ -0,0 +1,147 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState } from 'react';
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiCheckbox,
+  EuiFieldText,
+  EuiForm,
+  EuiFormRow,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiSpacer,
+  useGeneratedHtmlId,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
+import { formatRulesetName } from '../../utils/query_rules_utils';
+import { usePutRuleset } from '../../hooks/use_put_query_rules_ruleset';
+interface CreateRulesetModalProps {
+  onClose: () => void;
+}
+export const CreateRulesetModal = ({ onClose }: CreateRulesetModalProps) => {
+  const titleId = useGeneratedHtmlId({ prefix: 'createRulesetModalTitle' });
+  const formId = useGeneratedHtmlId({ prefix: 'createRulesetModalForm' });
+  const overwriteId = useGeneratedHtmlId({ prefix: 'createRulesetModalOverwrite' });
+
+  const [name, setName] = useState('');
+  const [rawName, setRawName] = useState('');
+  const [conflictError, setConflictError] = useState(false);
+  const [forceWrite, setForceWrite] = useState(false);
+  const { mutate: createRuleset } = usePutRuleset(
+    () => {
+      onClose();
+    },
+    () => {
+      setConflictError(true);
+    }
+  );
+  return (
+    <EuiModal onClose={onClose}>
+      <EuiModalHeader>
+        <EuiModalHeaderTitle id={titleId}>
+          <FormattedMessage
+            id="xpack.queryRules.createRulesetModal.title"
+            defaultMessage="Create ruleset"
+          />
+        </EuiModalHeaderTitle>
+      </EuiModalHeader>
+
+      <EuiModalBody>
+        <EuiForm
+          id={formId}
+          component="form"
+          onSubmit={(e) => {
+            e.preventDefault();
+            createRuleset({ rulesetId: name, forceWrite });
+          }}
+        >
+          <EuiFormRow
+            fullWidth
+            label={i18n.translate('xpack.queryRules.createRulesetModal.nameLabel', {
+              defaultMessage: 'Ruleset ID',
+            })}
+            helpText={
+              !!rawName && !conflictError
+                ? i18n.translate('xpack.queryRules.createRulesetModal.nameHelpText', {
+                    defaultMessage: 'Your ruleset set will be named: {name}',
+                    values: { name },
+                  })
+                : undefined
+            }
+            isInvalid={conflictError}
+            error={
+              conflictError
+                ? i18n.translate('xpack.queryRules.createRulesetModal.nameErrorText', {
+                    defaultMessage: 'A ruleset with id {name} already exists.',
+                    values: { name },
+                  })
+                : undefined
+            }
+          >
+            <EuiFieldText
+              data-test-subj="searchRulesetCreateRulesetModalFieldText"
+              value={rawName}
+              onChange={(e) => {
+                setRawName(e.target.value);
+                setName(formatRulesetName(e.target.value));
+                setConflictError(false);
+                setForceWrite(false);
+              }}
+            />
+          </EuiFormRow>
+          {conflictError && (
+            <>
+              <EuiSpacer size="s" />
+              <EuiFormRow fullWidth>
+                <EuiCheckbox
+                  id={overwriteId}
+                  data-test-subj="searchRulesetCreateRulesetModalForceWrite"
+                  label={i18n.translate('xpack.queryRules.createRulesetModal.forceWrite', {
+                    defaultMessage: 'Overwrite the existing ruleset.',
+                  })}
+                  checked={forceWrite}
+                  onChange={() => setForceWrite(!forceWrite)}
+                />
+              </EuiFormRow>
+            </>
+          )}
+        </EuiForm>
+      </EuiModalBody>
+
+      <EuiModalFooter>
+        <EuiButtonEmpty
+          data-test-subj="searchRulesetCreateRulesetModalCancelButton"
+          onClick={onClose}
+        >
+          <FormattedMessage
+            id="xpack.queryRules.createRulesetModal.cancelButton"
+            defaultMessage="Cancel"
+          />
+        </EuiButtonEmpty>
+        <EuiButton
+          data-test-subj="searchRulesetCreateRulesetModalCreateButton"
+          form={formId}
+          fill
+          disabled={!name || (conflictError && !forceWrite)}
+          type="submit"
+        >
+          <FormattedMessage
+            id="xpack.queryRules.createRulesetModal.createButton"
+            defaultMessage="Create ruleset"
+          />
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+};
diff --git a/x-pack/solutions/search/plugins/search_query_rules/public/hooks/use_put_query_rules_ruleset.ts b/x-pack/solutions/search/plugins/search_query_rules/public/hooks/use_put_query_rules_ruleset.ts
@@ -0,0 +1,72 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { QueryRulesQueryRuleset } from '@elastic/elasticsearch/lib/api/types';
+import { i18n } from '@kbn/i18n';
+import { KibanaServerError } from '@kbn/kibana-utils-plugin/common';
+import {
+  QUERY_RULES_QUERY_RULESET_FETCH_KEY,
+  QUERY_RULES_SETS_QUERY_KEY,
+} from '../../common/constants';
+import { PLUGIN_ROUTE_ROOT } from '../../common/api_routes';
+import { useKibana } from './use_kibana';
+
+interface MutationArgs {
+  rulesetId: string;
+  forceWrite?: boolean;
+}
+
+export const usePutRuleset = (
+  onSuccess?: () => void,
+  onConflictError?: (error: KibanaServerError) => void
+) => {
+  const queryClient = useQueryClient();
+  const {
+    services: { http, notifications, application },
+  } = useKibana();
+
+  return useMutation(
+    async ({ rulesetId, forceWrite }: MutationArgs) => {
+      return await http.put<QueryRulesQueryRuleset>(
+        `/internal/search_query_rules/ruleset/${rulesetId}`,
+        {
+          query: { forceWrite },
+        }
+      );
+    },
+    {
+      onSuccess: (_, { rulesetId }) => {
+        queryClient.invalidateQueries([QUERY_RULES_QUERY_RULESET_FETCH_KEY]);
+        queryClient.invalidateQueries([QUERY_RULES_SETS_QUERY_KEY]);
+        notifications?.toasts?.addSuccess({
+          title: i18n.translate('xpack.queryRules.putRulesetSuccess', {
+            defaultMessage: 'Ruleset added',
+          }),
+        });
+        if (onSuccess) {
+          onSuccess();
+        }
+        application.navigateToUrl(
+          http.basePath.prepend(`${PLUGIN_ROUTE_ROOT}/ruleset/${rulesetId}`)
+        );
+      },
+      onError: (error: { body: KibanaServerError }) => {
+        if (onConflictError && error.body.statusCode === 409) {
+          onConflictError(error.body);
+        } else {
+          notifications?.toasts?.addError(new Error(error.body.message), {
+            title: i18n.translate('xpack.queryRules.putRulesetError', {
+              defaultMessage: 'Error putting ruleset',
+            }),
+            toastMessage: error.body.message,
+          });
+        }
+      },
+    }
+  );
+};
diff --git a/x-pack/solutions/search/plugins/search_query_rules/public/utils/query_rules_utils.ts b/x-pack/solutions/search/plugins/search_query_rules/public/utils/query_rules_utils.ts
@@ -14,3 +14,10 @@ export const isPermissionError = (error: { body: KibanaServerError }) => {
 export const isNotFoundError = (error: { body: KibanaServerError }) => {
   return error.body.statusCode === 404;
 };
+
+export const formatRulesetName = (rawName: string) =>
+  rawName
+    .trim()
+    .replace(/[^a-zA-Z0-9]+/g, '-') // Replace all special/non-alphanumerical characters with dashes
+    .replace(/^[-]+|[-]+$/g, '') // Strip all leading and trailing dashes
+    .toLowerCase();
diff --git a/x-pack/solutions/search/plugins/search_query_rules/server/lib/fetch_query_rules_ruleset.ts b/x-pack/solutions/search/plugins/search_query_rules/server/lib/fetch_query_rules_ruleset.ts
@@ -7,13 +7,17 @@
 
 import { QueryRulesQueryRuleset } from '@elastic/elasticsearch/lib/api/types';
 import { ElasticsearchClient } from '@kbn/core/server';
+import { isQueryRulesetExist } from './is_query_ruleset_exist';
 
 export const fetchQueryRulesRuleset = async (
   client: ElasticsearchClient,
   rulesetId: string
-): Promise<QueryRulesQueryRuleset> => {
-  const result = await client.queryRules.getRuleset({
-    ruleset_id: rulesetId,
-  });
-  return result;
+): Promise<QueryRulesQueryRuleset | null> => {
+  if (await isQueryRulesetExist(client, rulesetId)) {
+    const ruleset = await client.queryRules.getRuleset({
+      ruleset_id: rulesetId,
+    });
+    return ruleset;
+  }
+  return null;
 };
diff --git a/x-pack/solutions/search/plugins/search_query_rules/server/lib/is_query_ruleset_exist.ts b/x-pack/solutions/search/plugins/search_query_rules/server/lib/is_query_ruleset_exist.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { ElasticsearchClient } from '@kbn/core/server';
+
+export const isQueryRulesetExist = async (
+  client: ElasticsearchClient,
+  rulesetId: string
+): Promise<boolean> => {
+  try {
+    const ruleset = await client.queryRules.getRuleset({
+      ruleset_id: rulesetId,
+    });
+    if (ruleset) {
+      return true;
+    }
+    return false;
+  } catch (error) {
+    if (error.meta?.statusCode === 404) return false;
+    throw error;
+  }
+};
diff --git a/x-pack/solutions/search/plugins/search_query_rules/server/lib/put_query_rules_ruleset_set.ts b/x-pack/solutions/search/plugins/search_query_rules/server/lib/put_query_rules_ruleset_set.ts
diff --git a/x-pack/solutions/search/plugins/search_query_rules/server/routes.ts b/x-pack/solutions/search/plugins/search_query_rules/server/routes.ts

Original file line number	Diff line number	Diff line change
`@@ -9,5 +9,5 @@ export const PLUGIN_ROUTE_ROOT = '/app/elasticsearch/query_rules';`
`9`	`9`
`10`	`10`	`export enum APIRoutes {`
`11`	`11`	`QUERY_RULES_SETS = '/internal/search_query_rules/query_rules_sets',`
`12`		`- QUERY_RULES_RULESET_FETCH = '/internal/search_query_rules/ruleset/{ruleset_id}',`
	`12`	`+ QUERY_RULES_RULESET_ID = '/internal/search_query_rules/ruleset/{ruleset_id}',`
`13`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -29,9 +29,15 @@ PUT /_query_rules/my-ruleset`
`29`	`29`	`}`
`30`	`30`	`],`
`31`	`31`	`"actions": {`
`32`		`- "ids": [`
`33`		`- "id1",`
`34`		`- "id2"`
	`32`	`+ "docs": [`
	`33`	`+ {`
	`34`	`+ "_index": "my-index-000001",`
	`35`	`+ "_id": "id1"`
	`36`	`+ },`
	`37`	`+ {`
	`38`	`+ "_index": "my-index-000002",`
	`39`	`+ "_id": "id2"`
	`40`	`+ }`
`35`	`41`	`]`
`36`	`42`	`}`
`37`	`43`	`},`