feat: kanban group editing (#2322)

* feat: support opening property menu directly on options panel

* refactor: expose group-by property from useKanbanColumns

* feat: rename kanban group by clicking column name

* feat: edit group-by property from kanban column menu

* fix: license-gate base and kanban inserts

* fix: add missing bases strings to en-US translation file
This commit is contained in:
Philip Okugbe
2026-07-03 11:35:26 +01:00
committed by GitHub
parent 6ff7f69137
commit 8a2c457ab9
15 changed files with 484 additions and 52 deletions
@@ -1,6 +1,6 @@
import { FC } from "react";
import type { Editor } from "@tiptap/react";
import { ActionIcon, Menu, Tooltip } from "@mantine/core";
import { ActionIcon, Badge, Menu, Tooltip } from "@mantine/core";
import {
IconAppWindow,
IconCalendar,
@@ -32,6 +32,9 @@ import {
} from "@/components/icons";
import { useTranslation } from "react-i18next";
import { insertBaseEmbedBlock } from "@/features/editor/components/base-embed/insert-base-embed";
import { useHasFeature } from "@/ee/hooks/use-feature";
import { Feature } from "@/ee/features";
import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
interface Props {
editor: Editor;
@@ -40,6 +43,8 @@ interface Props {
export const MoreInsertsGroup: FC<Props> = ({ editor, templateMode }) => {
const { t, i18n } = useTranslation();
const hasBases = useHasFeature(Feature.BASES);
const upgradeLabel = useUpgradeLabel();
const setEmbed = (provider: string) =>
editor.chain().focus().setEmbed({ provider }).run();
@@ -106,20 +111,48 @@ export const MoreInsertsGroup: FC<Props> = ({ editor, templateMode }) => {
</Menu.Item>
)}
{!templateMode && (
<Menu.Item
leftSection={<IconTable size={16} />}
onClick={() => insertBaseEmbedBlock(editor)}
>
{t("Base (Inline)")}
</Menu.Item>
<Tooltip label={upgradeLabel} disabled={hasBases} position="right">
<Menu.Item
leftSection={<IconTable size={16} />}
aria-disabled={!hasBases}
closeMenuOnClick={hasBases}
style={{ opacity: hasBases ? undefined : 0.7 }}
rightSection={
!hasBases && (
<Badge size="xs" variant="light" color="gray">
{t("Upgrade")}
</Badge>
)
}
onClick={() => {
if (hasBases) insertBaseEmbedBlock(editor);
}}
>
{t("Base (Inline)")}
</Menu.Item>
</Tooltip>
)}
{!templateMode && (
<Menu.Item
leftSection={<IconLayoutKanban size={16} />}
onClick={() => insertBaseEmbedBlock(editor, { template: "kanban" })}
>
{t("Kanban")}
</Menu.Item>
<Tooltip label={upgradeLabel} disabled={hasBases} position="right">
<Menu.Item
leftSection={<IconLayoutKanban size={16} />}
aria-disabled={!hasBases}
closeMenuOnClick={hasBases}
style={{ opacity: hasBases ? undefined : 0.7 }}
rightSection={
!hasBases && (
<Badge size="xs" variant="light" color="gray">
{t("Upgrade")}
</Badge>
)
}
onClick={() => {
if (hasBases) insertBaseEmbedBlock(editor, { template: "kanban" });
}}
>
{t("Kanban")}
</Menu.Item>
</Tooltip>
)}
<Menu.Divider />