chore: integrate tags functionality in node forms

Author: kastov

package-lock.json

@@ -59,7 +59,7 @@
     "@monaco-editor/react": "^4.7.0",
     "@noble/post-quantum": "^0.5.2",
     "@paralleldrive/cuid2": "2.2.2",
-    "@remnawave/backend-contract": "2.3.11",
+    "@remnawave/backend-contract": "2.3.14",
     "@simplewebauthn/browser": "^13.2.2",
     "@stablelib/base64": "^2.0.1",
     "@stablelib/x25519": "^2.0.1",

package.json

@@ -5,7 +5,13 @@ import {
     useNodesStoreCreateModalIsOpen,
     useNodesStoreEditModalIsOpen
 } from '@entities/dashboard/nodes/nodes-store'
-import { nodesQueryKeys, QueryKeys, useGetConfigProfiles, useGetNodes } from '@shared/api/hooks'
+import {
+    nodesQueryKeys,
+    QueryKeys,
+    useGetConfigProfiles,
+    useGetNodes,
+    useGetNodesTags
+} from '@shared/api/hooks'
 import { queryClient } from '@shared/api'
 
 import NodesPageComponent from '../components/nodes.page.component'
@@ -18,6 +24,7 @@ export function NodesPageConnector() {
 
     const { data: nodes, isLoading } = useGetNodes()
     const { isLoading: isConfigProfilesLoading } = useGetConfigProfiles()
+    useGetNodesTags()
 
     useEffect(() => {
         ;(async () => {

src/pages/dashboard/nodes/ui/connectors/nodes.page.connector.tsx

@@ -1,5 +1,6 @@
 import {
     GetAllNodesCommand,
+    GetAllNodesTagsCommand,
     GetNodesRealtimeUsageCommand,
     GetNodesUsageByRangeCommand,
     GetNodeUserUsageByRangeCommand,
@@ -33,6 +34,9 @@ export const nodesQueryKeys = createQueryKeys('nodes', {
     }),
     getNodeUserUsageByRange: {
         queryKey: null
+    },
+    getAllTags: {
+        queryKey: null
     }
 })
 
@@ -107,3 +111,13 @@ export const useGetNodesRealtimeUsage = createGetQueryHook({
     },
     errorHandler: (error) => errorHandler(error, 'Get Nodes Realtime Usage')
 })
+
+export const useGetNodesTags = createGetQueryHook({
+    endpoint: GetAllNodesTagsCommand.TSQ_url,
+    responseSchema: GetAllNodesTagsCommand.ResponseSchema,
+    getQueryKey: () => nodesQueryKeys.getAllTags.queryKey,
+    rQueryParams: {
+        staleTime: 0
+    },
+    errorHandler: (error) => errorHandler(error, 'Get All Nodes Tags')
+})

src/shared/api/hooks/nodes/nodes.query.hooks.ts

@@ -8,17 +8,19 @@ import {
     rem,
     Stack,
     Switch,
+    TagsInput,
     Text,
     Title
 } from '@mantine/core'
 import { CreateNodeCommand, UpdateNodeCommand } from '@remnawave/backend-contract'
 import { ForwardRefComponent, HTMLMotionProps, Variants } from 'motion/react'
-import { PiCheckDuotone, PiXDuotone } from 'react-icons/pi'
+import { PiCheckDuotone, PiTagDuotone, PiXDuotone } from 'react-icons/pi'
 import { TbChartBar, TbChartLine } from 'react-icons/tb'
 import { UseFormReturnType } from '@mantine/form'
 import { useTranslation } from 'react-i18next'
 
 import { SelectInfraProviderShared } from '@shared/ui/infra-billing/select-infra-provider/select-infra-provider.shared'
+import { useGetNodesTags } from '@shared/api/hooks'
 
 interface IProps<T extends CreateNodeCommand.Request | UpdateNodeCommand.Request> {
     advancedOpened: boolean
@@ -34,6 +36,7 @@ export const NodeTrackingAndBillingCard = <
     props: IProps<T>
 ) => {
     const { t } = useTranslation()
+    const { data: nodesTags } = useGetNodesTags()
     const { cardVariants, form, motionWrapper, setAdvancedOpened, advancedOpened } = props
 
     const MotionWrapper = motionWrapper
@@ -166,6 +169,24 @@ export const NodeTrackingAndBillingCard = <
                             </Stack>
                         </Collapse>
                     </Stack>
+
+                    <TagsInput
+                        clearable
+                        data={nodesTags?.tags || []}
+                        key={form.key('tags')}
+                        label="Tags"
+                        leftSection={<PiTagDuotone size="16px" />}
+                        maxTags={10}
+                        placeholder="Enter tags (comma, space, semicolon)"
+                        splitChars={[',', ' ', ';']}
+                        {...form.getInputProps('tags')}
+                        error={
+                            Object.keys(form.errors)
+                                .filter((key) => key.startsWith('tags.'))
+                                .map((key) => form.errors[key])
+                                .join(', ') || form.getInputProps('tags').error
+                        }
+                    />
                 </Stack>
             </Fieldset>
         </MotionWrapper>

src/shared/ui/forms/nodes/base-node-form/node-tracking-and-billing.card.tsx

@@ -103,7 +103,8 @@ export const EditNodeModalConnectorWidget = () => {
                         node.configProfile.activeInbounds.map((inbound) => inbound.uuid) ?? []
                 },
 
-                providerUuid: node.providerUuid ?? undefined
+                providerUuid: node.providerUuid ?? undefined,
+                tags: node.tags ?? []
             })
         }
     }, [node])