add autocomplete on revision

Author: petar-cvit

cyclops-ui/src/components/pages/TemplateStore/TemplateStore.tsx

@@ -16,6 +16,7 @@ import {
   Popover,
   Checkbox,
   Switch,
+  AutoComplete,
 } from "antd";
 import axios from "axios";
 import {
@@ -66,6 +67,9 @@ const TemplateStore = () => {
   const [templateSourceTypeFilter, setTemplateSourceTypeFilter] =
     useState<string[]>(sourceTypeFilter);
 
+  const [repoRevisions, setRepoRevisions] = useState<string[]>([]);
+  const [repoRevisionOptions, setRepoRevisionOptions] = useState([]);
+
   const [addForm] = Form.useForm();
   const [editForm] = Form.useForm();
   const [notificationApi, contextHolder] = notification.useNotification();
@@ -346,6 +350,27 @@ const TemplateStore = () => {
     );
   };
 
+  const fetchRepoRevisions = (e) => {
+    axios
+      .get(`/api/templates/revisions?repo=` + e.target.value)
+      .then((res) => {
+        setRepoRevisions(res.data);
+      })
+      .catch(() => {});
+  };
+
+  const handleRepoInput = (value) => {
+    if (repoRevisions.length === 0) {
+      setRepoRevisionOptions([]);
+      return;
+    }
+
+    const filtered = repoRevisions
+      .filter((item) => item.toLowerCase().includes(value.toLowerCase()))
+      .map((item) => ({ value: item }));
+    setRepoRevisionOptions(filtered);
+  };
+
   return (
     <div>
       {error.message.length !== 0 && (
@@ -636,7 +661,7 @@ const TemplateStore = () => {
             rules={[{ required: true, message: "Repo URL is required" }]}
             style={{ marginBottom: "12px" }}
           >
-            <Input />
+            <Input onBlur={fetchRepoRevisions} />
           </Form.Item>
 
           <Form.Item
@@ -653,7 +678,13 @@ const TemplateStore = () => {
             name={["ref", "version"]}
             style={{ marginBottom: "12px" }}
           >
-            <Input />
+            <AutoComplete
+              options={repoRevisionOptions}
+              onSearch={handleRepoInput}
+              allowClear
+            >
+              <Input />
+            </AutoComplete>
           </Form.Item>
 
           {advancedTemplateGitOpsWrite()}