Replace hardcoded ids with hook (#5444)

* refactor: replace hardcoded ids with hook

* refactor: replace hard coded ids with lodash id (class)

client/app/components/query-snippets/QuerySnippetDialog.jsx

@@ -5,6 +5,7 @@ import Button from "antd/lib/button";
 import Modal from "antd/lib/modal";
 import DynamicForm from "@/components/dynamic-form/DynamicForm";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
+import { useUniqueId } from "@/lib/hooks/useUniqueId";
 
 function QuerySnippetDialog({ querySnippet, dialog, readOnly }) {
   const handleSubmit = useCallback(
@@ -31,6 +32,8 @@ function QuerySnippetDialog({ querySnippet, dialog, readOnly }) {
     { name: "snippet", title: "Snippet", type: "ace", required: true },
   ].map(field => ({ ...field, readOnly, initialValue: get(querySnippet, field.name, "") }));
 
+  const querySnippetsFormId = useUniqueId("querySnippetForm");
+
   return (
     <Modal
       {...dialog.props}
@@ -46,7 +49,7 @@ function QuerySnippetDialog({ querySnippet, dialog, readOnly }) {
             disabled={readOnly || dialog.props.okButtonProps.disabled}
             htmlType="submit"
             type="primary"
-            form="querySnippetForm"
+            form={querySnippetsFormId}
             data-test="SaveQuerySnippetButton">
             {isEditing ? "Save" : "Create"}
           </Button>
@@ -55,7 +58,13 @@ function QuerySnippetDialog({ querySnippet, dialog, readOnly }) {
       wrapProps={{
         "data-test": "QuerySnippetDialog",
       }}>
-      <DynamicForm id="querySnippetForm" fields={formFields} onSubmit={handleSubmit} hideSubmitButton feedbackIcons />
+      <DynamicForm
+        id={querySnippetsFormId}
+        fields={formFields}
+        onSubmit={handleSubmit}
+        hideSubmitButton
+        feedbackIcons
+      />
     </Modal>
   );
 }