refactor: internal squad drawer

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.10",
+    "@remnawave/backend-contract": "2.3.11",
     "@simplewebauthn/browser": "^13.2.2",
     "@stablelib/base64": "^2.0.1",
     "@stablelib/x25519": "^2.0.1",
@@ -87,7 +87,7 @@
     "json-edit-react": "^1.29.0",
     "lodash": "^4.17.21",
     "lottie-react": "^2.4.1",
-    "mantine-datatable": "8.3.6",
+    "mantine-datatable": "8.3.8",
     "mantine-form-zod-resolver": "^1.3.0",
     "mantine-react-table": "^2.0.0-beta.9",
     "monaco-editor": "^0.52.2",
@@ -104,6 +104,7 @@
     "react-layout-masonry": "^2.0.0",
     "react-markdown": "^10.1.0",
     "react-router-dom": "6.27.0",
+    "react-virtuoso": "^4.14.1",
     "recharts": "^2.15.3",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",

package.json

@@ -1,7 +1,6 @@
 import {
     GetConfigProfilesCommand,
     GetInfraProvidersCommand,
-    GetInternalSquadsCommand,
     UpdateHostCommand
 } from '@remnawave/backend-contract'
 
@@ -48,7 +47,9 @@ export interface ModalInternalStates {
     INTERNAL_SQUAD_ACCESSIBLE_NODES_DRAWER: {
         squadUuid: string
     }
-    INTERNAL_SQUAD_SHOW_INBOUNDS: GetInternalSquadsCommand.Response['response']['internalSquads'][number]
+    INTERNAL_SQUAD_SHOW_INBOUNDS: {
+        squadUuid: string
+    }
     RENAME_SQUAD_OR_CONFIG_PROFILE_MODAL: {
         name: string
         uuid: string

src/entities/dashboard/modal-store/modal-states.ts

@@ -58,7 +58,9 @@ export const InternalSquadsHeaderActionButtonsFeature = (props: IProps) => {
                 nameField.reset()
                 handleUpdate()
 
-                openModalWithData(MODALS.INTERNAL_SQUAD_SHOW_INBOUNDS, data)
+                openModalWithData(MODALS.INTERNAL_SQUAD_SHOW_INBOUNDS, {
+                    squadUuid: data.uuid
+                })
             },
 
             onError: (error) => {

src/features/ui/dashboard/internal-squads/header-action-buttons/header-action-buttons.feature.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { ConfigProfilesSpotlightWidget } from '@widgets/dashboard/config-profiles/config-profiles-spotlight/config-profiles-spotlight'
 import { ConfigProfilesGridWidget } from '@widgets/dashboard/config-profiles/config-profiles-grid/config-profiles-grid.widget'
 import { ConfigProfilesHeaderActionButtonsFeature } from '@features/ui/dashboard/config-profiles/header-action-buttons'
+import { InternalSquadsDrawerWithStore } from '@widgets/dashboard/users/internal-squads-drawer-with-store'
 import { PageHeaderShared } from '@shared/ui/page-header/page-header.shared'
 import { RenameModalShared } from '@shared/ui/modals/rename-modal.shared'
 import { XrayLogo } from '@shared/ui/logos'
@@ -35,6 +36,7 @@ export const ConfigPageComponent = (props: Props) => {
             )}
 
             <RenameModalShared key="rename-config-profile-modal" renameFrom="configProfile" />
+            <InternalSquadsDrawerWithStore key="internal-squads-drawer-with-store" />
         </Page>
     )
 }

src/pages/dashboard/config-profiles/components/config-profiles.page.component.tsx

@@ -6,6 +6,7 @@ import { Stack } from '@mantine/core'
 
 import { UserAccessibleNodesModalWidget } from '@widgets/dashboard/users/user-accessible-nodes-modal/user-accessible-nodes.modal.widget'
 import { DetailedUserInfoDrawerWidget } from '@widgets/dashboard/users/detailed-user-info-drawer/detailed-user-info-drawer.widget'
+import { InternalSquadsDrawerWithStore } from '@widgets/dashboard/users/internal-squads-drawer-with-store'
 import { MobileWarningOverlay } from '@shared/ui/mobile-warning-overlay/mobile-warning-overlay'
 import { CreateUserModalWidget } from '@widgets/dashboard/users/create-user-modal'
 import { ViewUserModal } from '@widgets/dashboard/users/view-user-modal'
@@ -54,6 +55,7 @@ export default function UsersPageComponent() {
             <CreateUserModalWidget key="create-user-widget" />
             <DetailedUserInfoDrawerWidget key="detailed-user-info-drawer" />
             <UserAccessibleNodesModalWidget key="user-accessible-nodes-modal" />
+            <InternalSquadsDrawerWithStore key="internal-squads-drawer-with-store" />
         </Page>
     )
 }

src/pages/dashboard/users/ui/components/users.page.component.tsx

@@ -30,7 +30,6 @@ export const ConfigProfileCardShared = memo((props: IProps) => {
         onInboundToggle,
         onSelectAllInbounds,
         onUnselectAllInbounds,
-
         isOpen
     } = props
 

src/shared/ui/config-profiles/config-profile-card/config-profile-card.shared.tsx

@@ -1,10 +1,9 @@
 import { Badge, Card, Group, Text } from '@mantine/core'
 import { TbCirclesRelation } from 'react-icons/tb'
 import { PiTag, PiUsers } from 'react-icons/pi'
-import { useDisclosure } from '@mantine/hooks'
 import { memo } from 'react'
 
-import { InternalSquadsDrawer } from '@widgets/dashboard/users/internal-squads-drawer'
+import { MODALS, useModalsStoreOpenWithData } from '@entities/dashboard/modal-store'
 import { formatInt } from '@shared/utils/misc'
 
 import classes from './Checkbox.module.css'
@@ -13,58 +12,49 @@ import { IProps } from './interfaces'
 export const InternalSquadCardShared = memo((props: IProps) => {
     const { internalSquad } = props
 
-    const [opened, handlers] = useDisclosure(false)
+    const openModalWithData = useModalsStoreOpenWithData()
+
+    const handleOpenEditModal = (squadUuid: string) => {
+        openModalWithData(MODALS.INTERNAL_SQUAD_SHOW_INBOUNDS, {
+            squadUuid
+        })
+    }
 
     if (!internalSquad) {
         return null
     }
 
     return (
-        <>
-            <Card
-                className={classes.compactRoot}
-                key={internalSquad.uuid}
-                onClick={() => {
-                    handlers.open()
-                }}
-            >
-                <Group align="center" gap="xs" justify="space-between" wrap="nowrap">
-                    <Group align="center" gap="xs" style={{ flex: 1, minWidth: 0 }} wrap="nowrap">
-                        <TbCirclesRelation size={20} />
-                        <Text className={classes.compactLabel} size="xs" truncate>
-                            {internalSquad.name}
-                        </Text>
-                    </Group>
-
-                    <Group gap="xs" wrap="nowrap">
-                        <Badge
-                            color="teal"
-                            leftSection={<PiUsers size="16" />}
-                            size="md"
-                            variant="light"
-                            visibleFrom="sm"
-                        >
-                            {formatInt(internalSquad.info.membersCount, {
-                                thousandSeparator: ','
-                            })}{' '}
-                        </Badge>
-                        <Badge
-                            color="blue"
-                            leftSection={<PiTag size="16" />}
-                            size="md"
-                            variant="light"
-                        >
-                            {internalSquad.info.inboundsCount}
-                        </Badge>
-                    </Group>
+        <Card
+            className={classes.compactRoot}
+            key={internalSquad.uuid}
+            onClick={() => handleOpenEditModal(internalSquad.uuid)}
+        >
+            <Group align="center" gap="xs" justify="space-between" wrap="nowrap">
+                <Group align="center" gap="xs" style={{ flex: 1, minWidth: 0 }} wrap="nowrap">
+                    <TbCirclesRelation size={20} />
+                    <Text className={classes.compactLabel} size="xs" truncate>
+                        {internalSquad.name}
+                    </Text>
                 </Group>
-            </Card>
 
-            <InternalSquadsDrawer
-                internalSquad={internalSquad}
-                onClose={handlers.close}
-                opened={opened}
-            />
-        </>
+                <Group gap="xs" wrap="nowrap">
+                    <Badge
+                        color="teal"
+                        leftSection={<PiUsers size="16" />}
+                        size="md"
+                        variant="light"
+                        visibleFrom="sm"
+                    >
+                        {formatInt(internalSquad.info.membersCount, {
+                            thousandSeparator: ','
+                        })}{' '}
+                    </Badge>
+                    <Badge color="blue" leftSection={<PiTag size="16" />} size="md" variant="light">
+                        {internalSquad.info.inboundsCount}
+                    </Badge>
+                </Group>
+            </Group>
+        </Card>
     )
 })