feat(extraSidebarComponent): add import statement for getTagsIds function from storeUtils

The import statement for the `getTagsIds` function from `storeUtils` was added to the `extraSidebarComponent` file. This function is used to retrieve the IDs of tags based on their names.

fix(extraSidebarComponent): remove duplicate getTagsIds function

The duplicate `getTagsIds` function in the `extraSidebarComponent` file was removed to avoid conflicts and improve code organization.

feat(extraSidebarComponent): update saveFlowStore function call to use getTagsIds function

The `saveFlowStore` function call in the `extraSidebarComponent` file was updated to use the `getTagsIds` function instead of directly passing the selected tags array. This change ensures that the IDs of the selected tags are used in the function call.

feat(nodeToolbarComponent): add import statement for getTagsIds function from storeUtils

The import statement for the `getTagsIds` function from `storeUtils` was added to the `nodeToolbarComponent` file. This function is used to retrieve the IDs of tags based on their names.

fix(nodeToolbarComponent): remove duplicate getTagsIds function

The duplicate `getTagsIds` function in the `nodeToolbarComponent` file was removed to avoid conflicts and improve code organization.

feat(nodeToolbarComponent): update saveFlowStore function call to use getTagsIds function

The `saveFlowStore` function call in the `nodeToolbarComponent` file was updated to use the `getTagsIds` function instead of directly passing the selected tags array. This change ensures that the IDs of the selected tags are used in the function call.

feat(storeUtils): add getTagsIds function

The `getTagsIds` function was added to the `storeUtils` file. This function takes an array of tag names and a reference to the tag list with IDs, and returns an array of tag IDs based on the names. This function is used in the `extraSidebarComponent` and `nodeToolbarComponent` files to retrieve the IDs of selected tags.

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -16,6 +16,7 @@ import ConfirmationModal from "../../../../modals/ConfirmationModal";
 import ExportModal from "../../../../modals/exportModal";
 import { APIClassType, APIObjectType } from "../../../../types/api";
 import { FlowType } from "../../../../types/flow";
+import { getTagsIds } from "../../../../utils/storeUtils";
 import {
   nodeColors,
   nodeIconsLucide,
@@ -78,12 +79,6 @@ export default function ExtraSidebar(): JSX.Element {
     });
   }
 
-  function getTagsIds(tags: string[]) {
-    return tags
-      .map((tag) => tagListId.current.find((tagObj) => tagObj.name === tag))!
-      .map((tag) => tag!.id);
-  }
-
   // Handle showing components after use search input
   function handleSearchInput(e: string) {
     if (e === "") {
@@ -151,7 +146,7 @@ export default function ExtraSidebar(): JSX.Element {
     };
     saveFlowStore(
       saveFlow,
-      getTagsIds(Array.from(selectedTags)),
+      getTagsIds(Array.from(selectedTags), tagListId),
       sharePublic
     ).then(
       () => {

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -1,5 +1,5 @@
 import { cloneDeep } from "lodash";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { useReactFlow, useUpdateNodeInternals } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import IconComponent from "../../../../components/genericIconComponent";
@@ -13,7 +13,7 @@ import {
 } from "../../../../components/ui/select-custom";
 import { alertContext } from "../../../../contexts/alertContext";
 import { TabsContext } from "../../../../contexts/tabsContext";
-import { saveFlowStore } from "../../../../controllers/API";
+import { getStoreTags, saveFlowStore } from "../../../../controllers/API";
 import ConfirmationModal from "../../../../modals/ConfirmationModal";
 import EditNodeModal from "../../../../modals/EditNodeModal";
 import { nodeToolbarPropsType } from "../../../../types/components";
@@ -23,6 +23,7 @@ import {
   expandGroupNode,
   updateFlowPosition,
 } from "../../../../utils/reactflowUtils";
+import { getTagsIds } from "../../../../utils/storeUtils";
 import { classNames } from "../../../../utils/utils";
 
 export default function NodeToolbarComponent({
@@ -72,10 +73,14 @@ export default function NodeToolbarComponent({
   const [sharePublic, setSharePublic] = useState(true);
   const [tags, setTags] = useState<string[]>([]);
   const [selectedTags, setSelectedTags] = useState<Set<string>>(new Set());
+  const tagListId = useRef<{ id: string; name: string }[]>([]);
 
   useEffect(() => {
-    //TODO: get tags from api
-    setTags(["teste1", "teste2"]);
+    getStoreTags().then((res) => {
+      tagListId.current = res;
+      let tags = res.map((tag) => tag.name);
+      setTags(tags);
+    });
   }, []);
 
   function handleTagSelection(tag: string) {
@@ -95,7 +100,7 @@ export default function NodeToolbarComponent({
     saveComponent(componentFlow).then(() => {
       saveFlowStore(
         createFlowComponent(componentFlow),
-        Array.from(selectedTags),
+        getTagsIds(Array.from(selectedTags), tagListId),
         sharePublic
       ).then(
         (_) => {

src/frontend/src/utils/storeUtils.ts

@@ -12,3 +12,12 @@ export default function cloneFLowWithParent(
   childFLow.is_component = is_component;
   return childFLow;
 }
+
+export function getTagsIds(
+  tags: string[],
+  tagListId: { current: { name: string; id: string }[] }
+) {
+  return tags
+    .map((tag) => tagListId.current.find((tagObj) => tagObj.name === tag))!
+    .map((tag) => tag!.id);
+}