feat: add a modal to show node qrcode

package.json

@@ -81,6 +81,7 @@
     "nanostores": "^0.9.2",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.3.0",
+    "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^13.0.0",

src/components/ConfigFormModal.tsx

@@ -122,7 +122,7 @@ const InputList = <T extends z.infer<typeof schema>>({
   )
 }
 
-export type ConfigFormDrawerRef = {
+export type ConfigFormModalRef = {
   form: UseFormReturnType<z.infer<typeof schema>>
   setEditingID: (id: string) => void
   initOrigins: (origins: z.infer<typeof schema>) => void

src/components/GroupFormModal.tsx

@@ -16,7 +16,7 @@ const schema = z.object({
   policy: z.nativeEnum(Policy),
 })
 
-export type GroupFormDrawerRef = {
+export type GroupFormModalRef = {
   form: UseFormReturnType<z.infer<typeof schema>>
   setEditingID: (id: string) => void
   initOrigins: (origins: z.infer<typeof schema>) => void

src/components/NodeQRCodeModal.tsx

@@ -0,0 +1,33 @@
+import { Center, Modal } from '@mantine/core'
+import { QRCodeSVG } from 'qrcode.react'
+import { forwardRef, useImperativeHandle, useState } from 'react'
+
+type Props = {
+  name: string
+  link: string
+}
+
+export type QRCodeModalRef = {
+  props: Props
+  setProps: (props: Props) => void
+}
+
+export const QRCodeModal = forwardRef(({ opened, onClose }: { opened: boolean; onClose: () => void }, ref) => {
+  const [props, setProps] = useState<Props>({
+    name: '',
+    link: '',
+  })
+
+  useImperativeHandle(ref, () => ({
+    props,
+    setProps,
+  }))
+
+  return (
+    <Modal opened={opened} onClose={onClose} title={props.name}>
+      <Center>
+        <QRCodeSVG size={320} value={props.link} />
+      </Center>
+    </Modal>
+  )
+})

src/pages/Orchestrate/Config.tsx

@@ -7,7 +7,7 @@ import { Fragment, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { useConfigsQuery, useRemoveConfigMutation, useSelectConfigMutation } from '~/apis'
-import { ConfigFormDrawer, ConfigFormDrawerRef } from '~/components/ConfigFormModal'
+import { ConfigFormDrawer, ConfigFormModalRef } from '~/components/ConfigFormModal'
 import { RenameFormModal, RenameFormModalRef } from '~/components/RenameFormModal'
 import { Section } from '~/components/Section'
 import { SimpleCard } from '~/components/SimpleCard'
@@ -23,7 +23,7 @@ export const Config = () => {
   const { data: configsQuery } = useConfigsQuery()
   const selectConfigMutation = useSelectConfigMutation()
   const removeConfigMutation = useRemoveConfigMutation()
-  const updateConfigFormDrawerRef = useRef<ConfigFormDrawerRef>(null)
+  const updateConfigFormModalRef = useRef<ConfigFormModalRef>(null)
 
   const [openedRenameFormModal, { open: openRenameFormModal, close: closeRenameFormModal }] = useDisclosure(false)
   const renameFormModalRef = useRef<RenameFormModalRef>(null)
@@ -60,14 +60,14 @@ export const Config = () => {
               <ActionIcon
                 size="xs"
                 onClick={() => {
-                  updateConfigFormDrawerRef.current?.setEditingID(config.id)
+                  updateConfigFormModalRef.current?.setEditingID(config.id)
 
                   const { checkInterval, checkTolerance, sniffingTimeout, logLevel, ...global } = config.global
 
                   const logLevelSteps = GET_LOG_LEVEL_STEPS(t)
                   const logLevelNumber = logLevelSteps.findIndex(([, l]) => l === logLevel)
 
-                  updateConfigFormDrawerRef.current?.initOrigins({
+                  updateConfigFormModalRef.current?.initOrigins({
                     name: config.name,
                     logLevelNumber,
                     checkIntervalSeconds: deriveTime(checkInterval, 's'),
@@ -93,7 +93,7 @@ export const Config = () => {
 
       <ConfigFormDrawer opened={openedCreateConfigFormDrawer} onClose={closeCreateConfigFormDrawer} />
       <ConfigFormDrawer
-        ref={updateConfigFormDrawerRef}
+        ref={updateConfigFormModalRef}
         opened={openedUpdateConfigFormDrawer}
         onClose={closeUpdateConfigFormDrawer}
       />

src/pages/Orchestrate/Group.tsx

@@ -14,7 +14,7 @@ import {
 } from '~/apis'
 import { DraggableResourceBadge } from '~/components/DraggableResourceBadge'
 import { DroppableGroupCard } from '~/components/DroppableGroupCard'
-import { GroupFormDrawerRef, GroupFormModal } from '~/components/GroupFormModal'
+import { GroupFormModal, GroupFormModalRef } from '~/components/GroupFormModal'
 import { RenameFormModal, RenameFormModalRef } from '~/components/RenameFormModal'
 import { Section } from '~/components/Section'
 import { DraggableResourceType, RuleType } from '~/constants'
@@ -34,7 +34,7 @@ export const GroupResource = ({ highlight }: { highlight?: boolean }) => {
   const groupDelSubscriptionsMutation = useGroupDelSubscriptionsMutation()
   const [droppableGroupCardAccordionValues, setDroppableGroupCardAccordionValues] = useState<string[]>([])
   const renameFormModalRef = useRef<RenameFormModalRef>(null)
-  const updateGroupFormModalRef = useRef<GroupFormDrawerRef>(null)
+  const updateGroupFormModalRef = useRef<GroupFormModalRef>(null)
   const { data: subscriptionsQuery } = useSubscriptionsQuery()
 
   return (

src/pages/Orchestrate/Node.tsx

@@ -1,20 +1,24 @@
-import { Spoiler, Text, useMantineTheme } from '@mantine/core'
+import { ActionIcon, Spoiler, Text, useMantineTheme } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
-import { IconCloud } from '@tabler/icons-react'
+import { IconCloud, IconDetails } from '@tabler/icons-react'
+import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { useImportNodesMutation, useNodesQuery, useRemoveNodesMutation } from '~/apis'
 import { DraggableResourceCard } from '~/components/DraggableResourceCard'
 import { ImportResourceFormModal } from '~/components/ImportResourceFormModal'
+import { QRCodeModal, QRCodeModalRef } from '~/components/NodeQRCodeModal'
 import { Section } from '~/components/Section'
 import { DraggableResourceType } from '~/constants'
 
 export const NodeResource = () => {
   const { t } = useTranslation()
   const theme = useMantineTheme()
 
+  const [openedQRCodeModal, { open: openQRCodeModal, close: closeQRCodeModal }] = useDisclosure(false)
   const [openedImportNodeFormModal, { open: openImportNodeFormModal, close: closeImportNodeFormModal }] =
     useDisclosure(false)
+  const qrCodeModalRef = useRef<QRCodeModalRef>(null)
   const { data: nodesQuery } = useNodesQuery()
   const removeNodesMutation = useRemoveNodesMutation()
   const importNodesMutation = useImportNodesMutation()
@@ -33,9 +37,23 @@ export const NodeResource = () => {
               {protocol}
             </Text>
           }
+          actions={
+            <ActionIcon
+              size="xs"
+              onClick={() => {
+                qrCodeModalRef.current?.setProps({
+                  name: name || tag!,
+                  link,
+                })
+                openQRCodeModal()
+              }}
+            >
+              <IconDetails />
+            </ActionIcon>
+          }
           onRemove={() => removeNodesMutation.mutate([id])}
         >
-          <Text fw={600} color={theme.primaryColor}>
+          <Text fw={600} color={theme.primaryColor} sx={{ wordBreak: 'break-all' }}>
             {name}
           </Text>
 
@@ -56,6 +74,8 @@ export const NodeResource = () => {
         </DraggableResourceCard>
       ))}
 
+      <QRCodeModal ref={qrCodeModalRef} opened={openedQRCodeModal} onClose={closeQRCodeModal} />
+
       <ImportResourceFormModal
         title={t('node')}
         opened={openedImportNodeFormModal}

src/pages/Orchestrate/Subscription.tsx

@@ -1,7 +1,8 @@
 import { Accordion, ActionIcon, Group, Spoiler, Text } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
-import { IconCloudComputing, IconDownload } from '@tabler/icons-react'
+import { IconCloudComputing, IconDetails, IconDownload } from '@tabler/icons-react'
 import dayjs from 'dayjs'
+import { Fragment, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -13,16 +14,20 @@ import {
 import { DraggableResourceBadge } from '~/components/DraggableResourceBadge'
 import { DraggableResourceCard } from '~/components/DraggableResourceCard'
 import { ImportResourceFormModal } from '~/components/ImportResourceFormModal'
+import { QRCodeModal, QRCodeModalRef } from '~/components/NodeQRCodeModal'
 import { Section } from '~/components/Section'
 import { UpdateSubscriptionAction } from '~/components/UpdateSubscriptionAction'
 import { DraggableResourceType } from '~/constants'
 
 export const SubscriptionResource = () => {
   const { t } = useTranslation()
+
+  const [openedQRCodeModal, { open: openQRCodeModal, close: closeQRCodeModal }] = useDisclosure(false)
   const [
     openedImportSubscriptionFormModal,
     { open: openImportSubscriptionFormModal, close: closeImportSubscriptionFormModal },
   ] = useDisclosure(false)
+  const qrCodeModalRef = useRef<QRCodeModalRef>(null)
   const { data: subscriptionsQuery } = useSubscriptionsQuery()
   const removeSubscriptionsMutation = useRemoveSubscriptionsMutation()
   const importSubscriptionsMutation = useImportSubscriptionsMutation()
@@ -55,7 +60,23 @@ export const SubscriptionResource = () => {
           subscriptionID={subscriptionID}
           type={DraggableResourceType.subscription}
           name={tag || link}
-          actions={<UpdateSubscriptionAction id={subscriptionID} loading={updateSubscriptionsMutation.isLoading} />}
+          actions={
+            <Fragment>
+              <ActionIcon
+                size="xs"
+                onClick={() => {
+                  qrCodeModalRef.current?.setProps({
+                    name: tag!,
+                    link,
+                  })
+                  openQRCodeModal()
+                }}
+              >
+                <IconDetails />
+              </ActionIcon>
+              <UpdateSubscriptionAction id={subscriptionID} loading={updateSubscriptionsMutation.isLoading} />
+            </Fragment>
+          }
           onRemove={() => removeSubscriptionsMutation.mutate([subscriptionID])}
         >
           <Text fw={600}>{dayjs(updatedAt).format('YYYY-MM-DD HH:mm:ss')}</Text>
@@ -101,6 +122,8 @@ export const SubscriptionResource = () => {
         </DraggableResourceCard>
       ))}
 
+      <QRCodeModal ref={qrCodeModalRef} opened={openedQRCodeModal} onClose={closeQRCodeModal} />
+
       <ImportResourceFormModal
         title={t('subscription')}
         opened={openedImportSubscriptionFormModal}