feat: add subpage config tab to external squads

Author: kastov

package-lock.json

@@ -59,8 +59,8 @@
     "@monaco-editor/react": "^4.7.0",
     "@noble/post-quantum": "^0.5.2",
     "@paralleldrive/cuid2": "2.2.2",
-    "@remnawave/backend-contract": "2.3.55",
-    "@remnawave/subscription-page-types": "0.0.6",
+    "@remnawave/backend-contract": "2.3.59",
+    "@remnawave/subscription-page-types": "0.1.0",
     "@simplewebauthn/browser": "^13.2.2",
     "@stablelib/base64": "^2.0.1",
     "@stablelib/x25519": "^2.0.1",

package.json

@@ -1815,5 +1815,15 @@
             "svg-code": "SVG Code",
             "preview": "Preview"
         }
+    },
+    "external-squads-subpage-config": {
+        "tab": {
+            "widget": {
+                "subscription-page-config": "Subscription Page Config",
+                "subscription-page-config-description": "You can override the subscription page configuration (Remnawave Subscription Page) for this external squad.",
+                "subpage-config": "Subpage Config",
+                "select-config": "Select config..."
+            }
+        }
     }
 }

public/locales/en/remnawave.json

@@ -1,13 +1,23 @@
-import { useGetExternalSquads, useGetSubscriptionTemplates } from '@shared/api/hooks'
+import {
+    useGetExternalSquads,
+    useGetSubscriptionPageConfigs,
+    useGetSubscriptionTemplates
+} from '@shared/api/hooks'
 import { LoadingScreen } from '@shared/ui'
 
 import { ExternalSquadsPageComponent } from '../components/external-squads.page.component'
 
 export function ExternalSquadsPageConnector() {
     const { data: externalSquads, isLoading: isExternalSquadsLoading } = useGetExternalSquads()
     const { isLoading: isTemplatesLoading } = useGetSubscriptionTemplates()
+    const { isLoading: isSubscriptionPageConfigsLoading } = useGetSubscriptionPageConfigs()
 
-    if (isExternalSquadsLoading || !externalSquads || isTemplatesLoading) {
+    if (
+        isExternalSquadsLoading ||
+        !externalSquads ||
+        isTemplatesLoading ||
+        isSubscriptionPageConfigsLoading
+    ) {
         return <LoadingScreen />
     }
     return <ExternalSquadsPageComponent externalSquads={externalSquads.externalSquads} />

src/pages/dashboard/external-squads/connectors/external-squads.page.connector.tsx

@@ -35,7 +35,7 @@ export const useGetSubscriptionPageConfigs = createGetQueryHook({
     getQueryKey: () => subpageConfigsQueryKeys.getSubscriptionPageConfigs.queryKey,
     rQueryParams: {
         refetchOnMount: false,
-        staleTime: sToMs(30)
+        staleTime: sToMs(15)
     },
     errorHandler: (error) => errorHandler(error, 'Get Subscription Page Configs')
 })

src/shared/api/hooks/subpage-configs/subpage-configs.query.hooks.ts

@@ -13,20 +13,32 @@ import {
     Tooltip,
     Transition
 } from '@mantine/core'
-import { TbFolder, TbListLetters, TbPrescription, TbSettings, TbWebhook } from 'react-icons/tb'
+import {
+    TbFolder,
+    TbListLetters,
+    TbPalette,
+    TbPrescription,
+    TbSettings,
+    TbWebhook
+} from 'react-icons/tb'
 import { PiCheck, PiCopy, PiIdentificationBadge, PiListChecks, PiUsers } from 'react-icons/pi'
 import { useTranslation } from 'react-i18next'
 import { memo, useState } from 'react'
 
+import {
+    useGetExternalSquad,
+    useGetSubscriptionPageConfigs,
+    useGetSubscriptionTemplates
+} from '@shared/api/hooks'
 import { MODALS, useModalClose, useModalState } from '@entities/dashboard/modal-store'
-import { useGetExternalSquad, useGetSubscriptionTemplates } from '@shared/api/hooks'
 import { LoaderModalShared } from '@shared/ui/loader-modal'
 import { formatInt } from '@shared/utils/misc'
 
 import {
     ExternalSquadsHostOverridesTabWidget,
     ExternalSquadsHwidSettingsTabWidget,
     ExternalSquadsSettingsTabWidget,
+    ExternalSquadsSubpageConfigTabWidget,
     ExternalSquadsTemplatesTabWidget
 } from './tabs'
 import { ExternalSquadsResponseHeadersTabWidget } from './tabs/external-squads-response-headers.widget'
@@ -39,7 +51,8 @@ const TAB_TYPE = {
     hosts: 'hosts',
     responseHeaders: 'responseHeaders',
     hwidSettings: 'hwidSettings',
-    customRemarks: 'customRemarks'
+    customRemarks: 'customRemarks',
+    subpageConfig: 'subpageConfig'
 } as const
 
 type TabType = (typeof TAB_TYPE)[keyof typeof TAB_TYPE]
@@ -54,6 +67,7 @@ export const ExternalSquadsDrawer = memo(() => {
     const close = useModalClose(MODALS.EXTERNAL_SQUAD_DRAWER)
 
     const { isLoading: isTemplatesLoading } = useGetSubscriptionTemplates()
+    const { isLoading: isSubpageConfigsLoading } = useGetSubscriptionPageConfigs()
 
     const { data: externalSquad, isLoading: isExternalSquadLoading } = useGetExternalSquad({
         route: {
@@ -200,6 +214,12 @@ export const ExternalSquadsDrawer = memo(() => {
                         >
                             {t('external-squads.drawer.widget.remarks')}
                         </Tabs.Tab>
+                        <Tabs.Tab
+                            leftSection={<TbPalette size={px('1.2rem')} />}
+                            value={TAB_TYPE.subpageConfig}
+                        >
+                            {t('constants.subscription-page')}
+                        </Tabs.Tab>
                     </Tabs.List>
 
                     <Tabs.Panel pt="xl" value={TAB_TYPE.templates}>
@@ -309,12 +329,29 @@ export const ExternalSquadsDrawer = memo(() => {
                             )}
                         </Transition>
                     </Tabs.Panel>
+
+                    <Tabs.Panel pt="xl" value={TAB_TYPE.subpageConfig}>
+                        <Transition
+                            duration={200}
+                            mounted={activeTab === TAB_TYPE.subpageConfig}
+                            timingFunction="linear"
+                            transition="fade"
+                        >
+                            {(styles) => (
+                                <Stack gap="lg" style={styles}>
+                                    <ExternalSquadsSubpageConfigTabWidget
+                                        externalSquad={externalSquad}
+                                    />
+                                </Stack>
+                            )}
+                        </Transition>
+                    </Tabs.Panel>
                 </Tabs>
             </Stack>
         )
     }
 
-    const isLoading = isTemplatesLoading || isExternalSquadLoading
+    const isLoading = isTemplatesLoading || isExternalSquadLoading || isSubpageConfigsLoading
 
     return (
         <Drawer
@@ -324,7 +361,7 @@ export const ExternalSquadsDrawer = memo(() => {
             overlayProps={{ backgroundOpacity: 0.6, blur: 0 }}
             padding="md"
             position="right"
-            size="540px"
+            size="600px"
             title={t('external-squads.drawer.widget.edit-external-squad')}
         >
             <Transition

src/widgets/dashboard/external-squads/external-squads-drawer/external-squads.drawer.widget.tsx

@@ -0,0 +1,92 @@
+import { GetExternalSquadByUuidCommand } from '@remnawave/backend-contract'
+import { Button, Paper, Select, Stack, Text } from '@mantine/core'
+import { IconPalette } from '@tabler/icons-react'
+import { TbDeviceFloppy } from 'react-icons/tb'
+import { useTranslation } from 'react-i18next'
+import { useState } from 'react'
+
+import { QueryKeys, useGetSubscriptionPageConfigs, useUpdateExternalSquad } from '@shared/api/hooks'
+import { queryClient } from '@shared/api'
+
+interface IProps {
+    externalSquad: GetExternalSquadByUuidCommand.Response['response']
+}
+
+export const ExternalSquadsSubpageConfigTabWidget = (props: IProps) => {
+    const { externalSquad } = props
+    const { t } = useTranslation()
+
+    const { data: subpageConfigs } = useGetSubscriptionPageConfigs()
+
+    const [selectedConfigUuid, setSelectedConfigUuid] = useState<null | string>(
+        externalSquad.subpageConfigUuid || null
+    )
+
+    const { mutate: updateExternalSquad, isPending: isUpdatingExternalSquad } =
+        useUpdateExternalSquad({
+            mutationFns: {
+                onSuccess: (data) => {
+                    queryClient.setQueryData(
+                        QueryKeys.externalSquads.getExternalSquad({
+                            uuid: data.uuid
+                        }).queryKey,
+                        data
+                    )
+                }
+            }
+        })
+
+    const handleSave = () => {
+        if (!externalSquad?.uuid) return
+
+        updateExternalSquad({
+            variables: {
+                subpageConfigUuid: selectedConfigUuid,
+                uuid: externalSquad.uuid
+            }
+        })
+    }
+
+    const configOptions =
+        subpageConfigs?.configs.map((config) => ({
+            label: config.name,
+            value: config.uuid
+        })) || []
+
+    return (
+        <Paper bg="dark.6" p="md" shadow="sm" withBorder>
+            <Stack gap="md">
+                <Text fw={600} size="md">
+                    {t('external-squads-subpage-config.tab.widget.subscription-page-config')}
+                </Text>
+                <Text c="dimmed" size="sm">
+                    {t(
+                        'external-squads-subpage-config.tab.widget.subscription-page-config-description'
+                    )}
+                </Text>
+
+                <Select
+                    clearable
+                    data={configOptions}
+                    label={t('external-squads-subpage-config.tab.widget.subpage-config')}
+                    leftSection={<IconPalette size={16} />}
+                    onChange={setSelectedConfigUuid}
+                    placeholder={t('external-squads-subpage-config.tab.widget.select-config')}
+                    value={selectedConfigUuid}
+                />
+
+                <Button
+                    color="teal"
+                    fullWidth
+                    leftSection={<TbDeviceFloppy size="1.2rem" />}
+                    loading={isUpdatingExternalSquad}
+                    onClick={handleSave}
+                    size="md"
+                    variant="light"
+                >
+                    {t('common.save')}
+                </Button>
+            </Stack>
+        </Paper>
+    )
+}

src/widgets/dashboard/external-squads/external-squads-drawer/tabs/external-squads-subpage-config.tab.widget.tsx

@@ -2,4 +2,5 @@ export * from './external-squad-overrides-tab.widget'
 export * from './external-squads-hosts.tab.widget'
 export * from './external-squads-hwid-settings.tab.widget'
 export * from './external-squads-settings.tab.widget'
+export * from './external-squads-subpage-config.tab.widget'
 export * from './external-squads-templates.tab.widget'