feat: view and download Computed Config Profile (with resolved snippets)

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.2.27",
+    "@remnawave/backend-contract": "2.2.28",
     "@simplewebauthn/browser": "^13.2.2",
     "@stablelib/base64": "^2.0.1",
     "@stablelib/x25519": "^2.0.1",

package.json

@@ -49,7 +49,10 @@
         "save-changes": "Save changes",
         "remove": "Remove",
         "add": "Add",
-        "select": "Select"
+        "select": "Select",
+        "loading": "Loading",
+        "success": "Success",
+        "download": "Download"
     },
     "bandwidth-metrics": {
         "current-year": "Current year",
@@ -1219,6 +1222,12 @@
     "config-profile-card": {
         "shared": {
             "active-on-nodes": "Active on nodes"
+        },
+        "widget": {
+            "loading-computed-config-profile": "Loading computed config profile...",
+            "computed-config-profile-loaded-successfully": "Computed config profile loaded successfully",
+            "the-computed-config-profile-description": "The computed config profile shows the final configuration after all snippets have been applied.",
+            "view-computed": "View Computed"
         }
     },
     "flat-inbound-checkbox-card": {
@@ -1744,4 +1753,4 @@
             "token-name": "Token Name"
         }
     }
-}
+}

public/locales/en/remnawave.json

@@ -1,4 +1,5 @@
 import {
+    GetComputedConfigProfileByUuidCommand,
     GetConfigProfileByUuidCommand,
     GetConfigProfilesCommand,
     GetInboundsByProfileUuidCommand
@@ -17,6 +18,9 @@ export const configProfilesQueryKeys = createQueryKeys('configProfiles', {
     getConfigProfile: (route: GetConfigProfileByUuidCommand.Request) => ({
         queryKey: [route]
     }),
+    getComputedConfigProfile: (route: GetComputedConfigProfileByUuidCommand.Request) => ({
+        queryKey: [route]
+    }),
     getConfigProfileInbounds: (route: GetConfigProfileByUuidCommand.Request) => ({
         queryKey: [route]
     })
@@ -74,3 +78,20 @@ export const useGetConfigProfileInbounds = createGetQueryHook({
         })
     }
 })
+
+export const useGetComputedConfigProfile = createGetQueryHook({
+    endpoint: GetComputedConfigProfileByUuidCommand.TSQ_url,
+    responseSchema: GetComputedConfigProfileByUuidCommand.ResponseSchema,
+    routeParamsSchema: GetComputedConfigProfileByUuidCommand.RequestSchema,
+    getQueryKey: ({ route }) => configProfilesQueryKeys.getComputedConfigProfile(route!).queryKey,
+    rQueryParams: {
+        enabled: false
+    },
+    errorHandler: (error) => {
+        notifications.show({
+            title: `Get Computed Config Profile`,
+            message: error instanceof Error ? error.message : `Request failed with unknown error.`,
+            color: 'red'
+        })
+    }
+})

src/shared/api/hooks/config-profiles/config-profiles.query.hooks.ts

@@ -5,23 +5,27 @@ import {
     Button,
     Card,
     CopyButton,
+    Divider,
     Group,
+    Loader,
     Menu,
     Stack,
     Text,
     Tooltip
 } from '@mantine/core'
+import { TbCheck, TbChevronDown, TbCpu2, TbDownload, TbEdit, TbEye } from 'react-icons/tb'
 import { PiCheck, PiCopy, PiCpu, PiPencil, PiTag, PiTrashDuotone } from 'react-icons/pi'
-import { TbChevronDown, TbDownload, TbEdit, TbEye } from 'react-icons/tb'
 import { GetConfigProfilesCommand } from '@remnawave/backend-contract'
 import { githubDarkTheme, JsonEditor } from 'json-edit-react'
 import { generatePath, useNavigate } from 'react-router-dom'
+import { notifications } from '@mantine/notifications'
 import { useDisclosure } from '@mantine/hooks'
 import { useTranslation } from 'react-i18next'
 import { modals } from '@mantine/modals'
 import { motion } from 'framer-motion'
 import clsx from 'clsx'
 
+import { useGetComputedConfigProfile } from '@shared/api/hooks/config-profiles/config-profiles.query.hooks'
 import { MODALS, useModalsStoreOpenWithData } from '@entities/dashboard/modal-store'
 import { formatInt } from '@shared/utils/misc'
 import { XrayLogo } from '@shared/ui/logos'
@@ -58,6 +62,87 @@ export function ConfigProfileCardWidget(props: IProps) {
         )
     }
 
+    const { refetch: refetchComputedConfigProfile, isLoading: isLoadingComputedConfigProfile } =
+        useGetComputedConfigProfile({
+            route: {
+                uuid: configProfile.uuid
+            }
+        })
+
+    const handleViewComputedConfigProfile = async () => {
+        notifications.show({
+            id: 'view-computed-config-profile',
+            loading: true,
+            title: t('common.loading'),
+            message: t('config-profile-card.widget.loading-computed-config-profile'),
+            autoClose: false,
+            withCloseButton: false
+        })
+
+        const computedConfigProfile = await refetchComputedConfigProfile()
+
+        if (computedConfigProfile && computedConfigProfile.data) {
+            notifications.update({
+                id: 'view-computed-config-profile',
+                loading: false,
+                title: t('common.success'),
+                message: t(
+                    'config-profile-card.widget.computed-config-profile-loaded-successfully'
+                ),
+                icon: <TbCheck size={18} />,
+                autoClose: 3000
+            })
+
+            modals.openConfirmModal({
+                children: (
+                    <>
+                        <Text size="sm">
+                            {t(
+                                'config-profile-card.widget.the-computed-config-profile-description'
+                            )}
+                        </Text>
+                        <Divider my="md" />
+                        <JsonEditor
+                            data={computedConfigProfile.data.config as object}
+                            indent={4}
+                            maxWidth="100%"
+                            rootName=""
+                            theme={githubDarkTheme}
+                            viewOnly
+                        />
+                    </>
+                ),
+                cancelProps: {
+                    variant: 'subtle',
+                    color: 'gray'
+                },
+                confirmProps: {
+                    color: 'teal'
+                },
+                labels: {
+                    confirm: t('common.download'),
+                    cancel: t('common.cancel')
+                },
+                size: 'xl',
+                title: computedConfigProfile.data.name,
+                onConfirm: () => {
+                    const jsonString = JSON.stringify(computedConfigProfile.data.config, null, 2)
+                    const blob = new Blob([jsonString], {
+                        type: 'application/json'
+                    })
+                    const url = URL.createObjectURL(blob)
+                    const a = document.createElement('a')
+                    a.href = url
+                    a.download = `${computedConfigProfile.data.name}.json`
+                    document.body.appendChild(a)
+                    a.click()
+                    document.body.removeChild(a)
+                    URL.revokeObjectURL(url)
+                }
+            })
+        }
+    }
+
     return (
         <motion.div
             animate={{ opacity: 1, y: 0 }}
@@ -225,6 +310,22 @@ export function ConfigProfileCardWidget(props: IProps) {
                                     {t('config-profiles-grid.widget.quick-view')}
                                 </Menu.Item>
 
+                                <Menu.Item
+                                    leftSection={
+                                        isLoadingComputedConfigProfile ? (
+                                            <Loader size={18} />
+                                        ) : (
+                                            <TbCpu2 size={18} />
+                                        )
+                                    }
+                                    onClick={(e) => {
+                                        e.stopPropagation()
+                                        handleViewComputedConfigProfile()
+                                    }}
+                                >
+                                    {t('config-profile-card.widget.view-computed')}
+                                </Menu.Item>
+
                                 <Menu.Item
                                     leftSection={<TbDownload size={18} />}
                                     onClick={(e) => {