Skip to content

Commit

Permalink
feat(group): show subscription tag on node hover
Browse files Browse the repository at this point in the history
  • Loading branch information
@kunish
kunish committed Jun 20, 2023
1 parent 1a54ab7 commit 0c8cfaf
Show file tree
Hide file tree
Showing 2 changed files with 140 additions and 131 deletions.
42 changes: 23 additions & 19 deletions src/components/SortableResourceBadge.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,46 @@
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 = ({
id,
name,
onRemove,
dragDisabled,
children,
}: {
id: string
name: string
onRemove: () => void
dragDisabled?: boolean
children?: React.ReactNode
}) => {
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id,
disabled: dragDisabled,
})

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>
)
}
229 changes: 117 additions & 112 deletions src/pages/Orchestrate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down

0 comments on commit 0c8cfaf

Please sign in to comment.