From 0c8cfafcd027d871f6b88e95e8c6fd668a1b9ec7 Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Tue, 20 Jun 2023 10:36:15 +0800
Subject: [PATCH] feat(group): show subscription tag on node hover

---
 src/components/SortableResourceBadge.tsx |  42 +++--
 src/pages/Orchestrate.tsx                | 229 ++++++++++++-----------
 2 files changed, 140 insertions(+), 131 deletions(-)

diff --git a/src/components/SortableResourceBadge.tsx b/src/components/SortableResourceBadge.tsx
index c2359fc4..ab8c7593 100644
--- a/src/components/SortableResourceBadge.tsx
+++ b/src/components/SortableResourceBadge.tsx
@@ -1,6 +1,6 @@
 import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
-import { ActionIcon, Badge, Text } from '@mantine/core'
+import { ActionIcon, Badge, Text, Tooltip } from '@mantine/core'
 import { IconX } from '@tabler/icons-react'
 
 export const SortableResourceBadge = ({
@@ -8,11 +8,13 @@ export const SortableResourceBadge = ({
   name,
   onRemove,
   dragDisabled,
+  children,
 }: {
   id: string
   name: string
   onRemove: () => void
   dragDisabled?: boolean
+  children?: React.ReactNode
 }) => {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id,
@@ -20,23 +22,25 @@ export const SortableResourceBadge = ({
   })
 
   return (
-    <Badge
-      ref={setNodeRef}
-      pr={3}
-      rightSection={
-        <ActionIcon color="blue" size="xs" radius="xl" variant="transparent" onClick={onRemove}>
-          <IconX size={12} />
-        </ActionIcon>
-      }
-      style={{
-        transform: CSS.Transform.toString(transform),
-        transition,
-        zIndex: isDragging ? 10 : 0,
-      }}
-    >
-      <Text {...listeners} {...attributes} truncate>
-        {name}
-      </Text>
-    </Badge>
+    <Tooltip disabled={!children} label={children} withArrow>
+      <Badge
+        ref={setNodeRef}
+        pr={3}
+        rightSection={
+          <ActionIcon color="blue" size="xs" radius="xl" variant="transparent" onClick={onRemove}>
+            <IconX size={12} />
+          </ActionIcon>
+        }
+        style={{
+          transform: CSS.Transform.toString(transform),
+          transition,
+          zIndex: isDragging ? 10 : 0,
+        }}
+      >
+        <Text {...listeners} {...attributes} truncate>
+          {name}
+        </Text>
+      </Badge>
+    </Tooltip>
   )
 }
diff --git a/src/pages/Orchestrate.tsx b/src/pages/Orchestrate.tsx
index b6347e28..bcb4966f 100644
--- a/src/pages/Orchestrate.tsx
+++ b/src/pages/Orchestrate.tsx
@@ -416,122 +416,127 @@ export const OrchestratePage = () => {
             bordered
           >
             <Stack>
-              {groupsQuery?.groups.map(({ id: groupId, name, policy, nodes, subscriptions }) => (
-                <DroppableGroupCard
-                  key={groupId}
-                  id={groupId}
-                  name={name}
-                  onRemove={defaultGroupID !== groupId ? () => removeGroupMutation.mutate(groupId) : undefined}
-                  actions={
-                    <Fragment>
-                      <ActionIcon
-                        size="xs"
-                        onClick={() => {
-                          if (renameFormModalRef.current) {
-                            renameFormModalRef.current.setProps({
-                              id: groupId,
-                              type: RuleType.group,
-                              oldName: name,
+              {groupsQuery?.groups.map(
+                ({ id: groupId, name, policy, nodes: groupNodes, subscriptions: groupSubscriptions }) => (
+                  <DroppableGroupCard
+                    key={groupId}
+                    id={groupId}
+                    name={name}
+                    onRemove={defaultGroupID !== groupId ? () => removeGroupMutation.mutate(groupId) : undefined}
+                    actions={
+                      <Fragment>
+                        <ActionIcon
+                          size="xs"
+                          onClick={() => {
+                            if (renameFormModalRef.current) {
+                              renameFormModalRef.current.setProps({
+                                id: groupId,
+                                type: RuleType.group,
+                                oldName: name,
+                              })
+                            }
+                            openRenameFormModal()
+                          }}
+                        >
+                          <IconForms />
+                        </ActionIcon>
+
+                        <ActionIcon
+                          size="xs"
+                          onClick={() => {
+                            updateGroupFormModalRef.current?.setEditingID(groupId)
+
+                            updateGroupFormModalRef.current?.initOrigins({
+                              name,
+                              policy,
                             })
-                          }
-                          openRenameFormModal()
-                        }}
-                      >
-                        <IconForms />
-                      </ActionIcon>
-
-                      <ActionIcon
-                        size="xs"
-                        onClick={() => {
-                          updateGroupFormModalRef.current?.setEditingID(groupId)
-
-                          updateGroupFormModalRef.current?.initOrigins({
-                            name,
-                            policy,
-                          })
 
-                          openUpdateGroupFormModal()
-                        }}
-                      >
-                        <IconEdit />
-                      </ActionIcon>
-                    </Fragment>
-                  }
-                >
-                  <Text fz="sm" fw={600}>
-                    {policy}
-                  </Text>
+                            openUpdateGroupFormModal()
+                          }}
+                        >
+                          <IconEdit />
+                        </ActionIcon>
+                      </Fragment>
+                    }
+                  >
+                    <Text fz="sm" fw={600}>
+                      {policy}
+                    </Text>
 
-                  <Space h={10} />
+                    <Space h={10} />
 
-                  <Accordion
-                    variant="filled"
-                    value={droppableGroupCardAccordionValues}
-                    onChange={setDroppableGroupCardAccordionValues}
-                    multiple
-                  >
-                    {nodes.length > 0 && (
-                      <Accordion.Item value="node">
-                        <Accordion.Control fz="xs" px="xs">
-                          {t('node')} ({nodes.length})
-                        </Accordion.Control>
-
-                        <Accordion.Panel>
-                          <SimpleGrid cols={2}>
-                            <DndContext modifiers={[restrictToParentElement]}>
-                              <SortableContext items={nodes} strategy={rectSwappingStrategy}>
-                                {nodes.map(({ id: nodeId, tag, name }) => (
-                                  <SortableResourceBadge
-                                    key={nodeId}
-                                    id={nodeId}
-                                    name={tag || name}
-                                    onRemove={() =>
-                                      groupDelNodesMutation.mutate({
-                                        id: groupId,
-                                        nodeIDs: [nodeId],
-                                      })
-                                    }
-                                  />
-                                ))}
-                              </SortableContext>
-                            </DndContext>
-                          </SimpleGrid>
-                        </Accordion.Panel>
-                      </Accordion.Item>
-                    )}
-
-                    {subscriptions.length > 0 && (
-                      <Accordion.Item value="subscription">
-                        <Accordion.Control fz="xs" px="xs">
-                          {t('subscription')} ({subscriptions.length})
-                        </Accordion.Control>
-
-                        <Accordion.Panel>
-                          <SimpleGrid cols={2}>
-                            <DndContext modifiers={[restrictToParentElement]}>
-                              <SortableContext items={subscriptions} strategy={rectSwappingStrategy}>
-                                {subscriptions.map(({ id: subscriptionId, tag, link }) => (
-                                  <SortableResourceBadge
-                                    key={subscriptionId}
-                                    id={subscriptionId}
-                                    name={tag || link}
-                                    onRemove={() =>
-                                      groupDelSubscriptionsMutation.mutate({
-                                        id: groupId,
-                                        subscriptionIDs: [subscriptionId],
-                                      })
-                                    }
-                                  />
-                                ))}
-                              </SortableContext>
-                            </DndContext>
-                          </SimpleGrid>
-                        </Accordion.Panel>
-                      </Accordion.Item>
-                    )}
-                  </Accordion>
-                </DroppableGroupCard>
-              ))}
+                    <Accordion
+                      variant="filled"
+                      value={droppableGroupCardAccordionValues}
+                      onChange={setDroppableGroupCardAccordionValues}
+                      multiple
+                    >
+                      {groupNodes.length > 0 && (
+                        <Accordion.Item value="node">
+                          <Accordion.Control fz="xs" px="xs">
+                            {t('node')} ({groupNodes.length})
+                          </Accordion.Control>
+
+                          <Accordion.Panel>
+                            <SimpleGrid cols={2}>
+                              <DndContext modifiers={[restrictToParentElement]}>
+                                <SortableContext items={groupNodes} strategy={rectSwappingStrategy}>
+                                  {groupNodes.map(({ id: nodeId, tag, name, subscriptionID }) => (
+                                    <SortableResourceBadge
+                                      key={nodeId}
+                                      id={nodeId}
+                                      name={tag || name}
+                                      onRemove={() =>
+                                        groupDelNodesMutation.mutate({
+                                          id: groupId,
+                                          nodeIDs: [nodeId],
+                                        })
+                                      }
+                                    >
+                                      {subscriptionID &&
+                                        subscriptionsQuery?.subscriptions.find((s) => s.id === subscriptionID)?.tag}
+                                    </SortableResourceBadge>
+                                  ))}
+                                </SortableContext>
+                              </DndContext>
+                            </SimpleGrid>
+                          </Accordion.Panel>
+                        </Accordion.Item>
+                      )}
+
+                      {groupSubscriptions.length > 0 && (
+                        <Accordion.Item value="subscription">
+                          <Accordion.Control fz="xs" px="xs">
+                            {t('subscription')} ({groupSubscriptions.length})
+                          </Accordion.Control>
+
+                          <Accordion.Panel>
+                            <SimpleGrid cols={2}>
+                              <DndContext modifiers={[restrictToParentElement]}>
+                                <SortableContext items={groupSubscriptions} strategy={rectSwappingStrategy}>
+                                  {groupSubscriptions.map(({ id: subscriptionId, tag, link }) => (
+                                    <SortableResourceBadge
+                                      key={subscriptionId}
+                                      id={subscriptionId}
+                                      name={tag || link}
+                                      onRemove={() =>
+                                        groupDelSubscriptionsMutation.mutate({
+                                          id: groupId,
+                                          subscriptionIDs: [subscriptionId],
+                                        })
+                                      }
+                                    />
+                                  ))}
+                                </SortableContext>
+                              </DndContext>
+                            </SimpleGrid>
+                          </Accordion.Panel>
+                        </Accordion.Item>
+                      )}
+                    </Accordion>
+                  </DroppableGroupCard>
+                )
+              )}
             </Stack>
           </Section>