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

apps/client/src/ee/base/components/kanban/base-kanban.tsx

@@ -30,7 +30,7 @@ type BaseKanbanProps = {
 
 export function BaseKanban({ base, view, pageId, embedded, editable, viewFilter }: BaseKanbanProps) {
   const { t } = useTranslation();
-  const { groupByPropertyId, columns, hasValidGroupBy } = useKanbanColumns(base, view);
+  const { groupByPropertyId, groupByProperty, columns, hasValidGroupBy } = useKanbanColumns(base, view);
   const updateView = useUpdateViewMutation();
   const moveCard = useKanbanMoveCardMutation();
   const { openRow } = useRowDetailModal(pageId);
@@ -201,6 +201,7 @@ export function BaseKanban({ base, view, pageId, embedded, editable, viewFilter
           column={column}
           viewFilter={viewFilter}
           groupByPropertyId={groupByPropertyId!}
+          groupByProperty={groupByProperty}
           canEdit={editable}
           onOpenRow={handleOpenRow}
           onHide={hideColumn}

apps/client/src/ee/base/components/kanban/kanban-column-header.tsx

@@ -1,24 +1,27 @@
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { ActionIcon, Menu, Text } from "@mantine/core";
-import { IconDots, IconPlus, IconGripVertical } from "@tabler/icons-react";
+import { ActionIcon, Text } from "@mantine/core";
+import { IconPlus, IconGripVertical } from "@tabler/icons-react";
 import clsx from "clsx";
-import { KanbanColumn } from "@/ee/base/types/base.types";
+import { IBaseProperty, KanbanColumn } from "@/ee/base/types/base.types";
 import { choiceColor } from "@/ee/base/components/cells/choice-color";
 import { useKanbanColumnDnd } from "@/ee/base/hooks/use-kanban-column-dnd";
 import { BaseDropEdgeIndicator } from "@/ee/base/components/grid/base-drop-edge-indicator";
+import { KanbanColumnTitle } from "@/ee/base/components/kanban/kanban-column-title";
+import { KanbanColumnMenu } from "@/ee/base/components/kanban/kanban-column-menu";
 import classes from "@/ee/base/styles/kanban.module.css";
 
 type KanbanColumnHeaderProps = {
   column: KanbanColumn;
   pageId: string;
+  property: IBaseProperty | undefined;
   count?: string;
   canEdit: boolean;
   onHide: () => void;
   onAddCard: () => void;
 };
 
-export function KanbanColumnHeader({ column, pageId, count, canEdit, onHide, onAddCard }: KanbanColumnHeaderProps) {
+export function KanbanColumnHeader({ column, pageId, property, count, canEdit, onHide, onAddCard }: KanbanColumnHeaderProps) {
   const { t } = useTranslation();
   const dotColor = column.color
     ? choiceColor(column.color).color as string
@@ -49,22 +52,13 @@ export function KanbanColumnHeader({ column, pageId, count, canEdit, onHide, onA
           background: dotColor,
         }}
       />
-      <Text fw={600} size="sm" flex={1} truncate>
-        {column.isNoValue ? t("No value") : column.name}
-      </Text>
+      <KanbanColumnTitle column={column} property={property} pageId={pageId} canEdit={canEdit} />
       {count !== undefined && <Text className={classes.count}>{count}</Text>}
       {canEdit && (
         <>
-          <Menu position="bottom-end" withinPortal>
-            <Menu.Target>
-              <ActionIcon variant="subtle" size="sm" color="gray" aria-label={t("Column options")}>
-                <IconDots size={14} />
-              </ActionIcon>
-            </Menu.Target>
-            <Menu.Dropdown>
-              <Menu.Item onClick={onHide}>{t("Hide group")}</Menu.Item>
-            </Menu.Dropdown>
-          </Menu>
+          {property && (
+            <KanbanColumnMenu property={property} pageId={pageId} onHide={onHide} />
+          )}
           <ActionIcon variant="subtle" size="sm" color="gray" aria-label={t("Add card")} onClick={onAddCard}>
             <IconPlus size={14} />
           </ActionIcon>

apps/client/src/ee/base/components/kanban/kanban-column-menu.tsx

@@ -0,0 +1,119 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ActionIcon, Popover, Stack } from "@mantine/core";
+import { IconDots, IconEyeOff, IconSettings } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import {
+  propertyMenuCloseRequestAtomFamily,
+  propertyMenuDirtyAtomFamily,
+} from "@/ee/base/atoms/base-atoms";
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import {
+  MenuItem,
+  PropertyMenuContent,
+} from "@/ee/base/components/property/property-menu";
+
+type KanbanColumnMenuProps = {
+  property: IBaseProperty;
+  pageId: string;
+  onHide: () => void;
+};
+
+export function KanbanColumnMenu({ property, pageId, onHide }: KanbanColumnMenuProps) {
+  const { t } = useTranslation();
+  const [opened, setOpened] = useState(false);
+  const [view, setView] = useState<"menu" | "property">("menu");
+  const [dirty, setDirty] = useAtom(propertyMenuDirtyAtomFamily(pageId)) as unknown as [boolean, (val: boolean) => void];
+  const [closeRequest, setCloseRequest] = useAtom(propertyMenuCloseRequestAtomFamily(pageId)) as unknown as [number, (val: number) => void];
+
+  const handleClose = useCallback(() => {
+    setOpened(false);
+    setView("menu");
+  }, []);
+
+  const wasOpenedRef = useRef(opened);
+  useEffect(() => {
+    if (wasOpenedRef.current && !opened) setDirty(false);
+    wasOpenedRef.current = opened;
+  }, [opened, setDirty]);
+
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (next) return;
+      if (dirty) {
+        setCloseRequest(closeRequest + 1);
+      } else {
+        handleClose();
+      }
+    },
+    [dirty, closeRequest, setCloseRequest, handleClose],
+  );
+
+  const toggle = useCallback(() => {
+    if (opened) {
+      handleOpenChange(false);
+    } else if (!dirty) {
+      setOpened(true);
+    }
+  }, [opened, dirty, handleOpenChange]);
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={handleOpenChange}
+      onClose={handleClose}
+      position="bottom-end"
+      shadow="md"
+      width={260}
+      trapFocus
+      returnFocus
+      withinPortal
+      closeOnClickOutside
+      closeOnEscape
+    >
+      <Popover.Target>
+        <ActionIcon
+          variant="subtle"
+          size="sm"
+          color="gray"
+          aria-label={t("Column options")}
+          onClick={toggle}
+        >
+          <IconDots size={14} />
+        </ActionIcon>
+      </Popover.Target>
+      <Popover.Dropdown
+        p={0}
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => e.stopPropagation()}
+      >
+        {view === "menu" ? (
+          <Stack gap={0} p={4}>
+            <MenuItem
+              icon={<IconSettings size={14} />}
+              label={t("Edit property")}
+              onClick={() => setView("property")}
+            />
+            <MenuItem
+              icon={<IconEyeOff size={14} />}
+              label={t("Hide group")}
+              onClick={() => {
+                handleClose();
+                onHide();
+              }}
+            />
+          </Stack>
+        ) : (
+          <PropertyMenuContent
+            property={property}
+            opened={opened}
+            onClose={handleClose}
+            onDirtyChange={setDirty}
+            pageId={pageId}
+            initialPanel={property.pendingType ? "main" : "options"}
+          />
+        )}
+      </Popover.Dropdown>
+    </Popover>
+  );
+}

apps/client/src/ee/base/components/kanban/kanban-column-title.tsx

@@ -0,0 +1,113 @@
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button, Group, Popover, Text, TextInput, UnstyledButton } from "@mantine/core";
+import { IBaseProperty, KanbanColumn, SelectTypeOptions } from "@/ee/base/types/base.types";
+import { useUpdatePropertyMutation } from "@/ee/base/queries/base-property-query";
+import classes from "@/ee/base/styles/kanban.module.css";
+
+type KanbanColumnTitleProps = {
+  column: KanbanColumn;
+  property: IBaseProperty | undefined;
+  pageId: string;
+  canEdit: boolean;
+};
+
+export function KanbanColumnTitle({ column, property, pageId, canEdit }: KanbanColumnTitleProps) {
+  const { t } = useTranslation();
+  const [opened, setOpened] = useState(false);
+  const [draft, setDraft] = useState("");
+  const updateProperty = useUpdatePropertyMutation();
+
+  const commit = useCallback(() => {
+    setOpened(false);
+    const name = draft.trim();
+    const options = property?.typeOptions as SelectTypeOptions | undefined;
+    if (!property || !options || !name || name === column.name) return;
+    if (!options.choices.some((c) => c.id === column.key)) return;
+    updateProperty.mutate({
+      propertyId: property.id,
+      pageId,
+      typeOptions: {
+        ...options,
+        choices: options.choices.map((c) =>
+          c.id === column.key ? { ...c, name } : c,
+        ),
+      },
+    });
+  }, [draft, property, column.name, column.key, pageId, updateProperty]);
+
+  const toggle = useCallback(() => {
+    if (opened) {
+      commit();
+    } else {
+      setDraft(column.name);
+      setOpened(true);
+    }
+  }, [opened, commit, column.name]);
+
+  const cancel = useCallback(() => setOpened(false), []);
+
+  if (!canEdit || column.isNoValue || !property) {
+    return (
+      <Text fw={600} size="sm" flex={1} truncate>
+        {column.isNoValue ? t("No value") : column.name}
+      </Text>
+    );
+  }
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={(next) => {
+        if (!next) commit();
+      }}
+      position="bottom-start"
+      shadow="md"
+      width={240}
+      withinPortal
+      trapFocus
+      returnFocus
+      closeOnClickOutside
+      closeOnEscape={false}
+    >
+      <Popover.Target>
+        <UnstyledButton className={classes.columnTitleButton} onClick={toggle}>
+          <Text fw={600} size="sm" truncate flex={1} ta="left">
+            {column.name}
+          </Text>
+        </UnstyledButton>
+      </Popover.Target>
+      <Popover.Dropdown
+        p="xs"
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            cancel();
+          }
+        }}
+      >
+        <Group gap="xs" wrap="nowrap">
+          <TextInput
+            size="xs"
+            flex={1}
+            value={draft}
+            data-autofocus
+            onFocus={(e) => e.currentTarget.select()}
+            onChange={(e) => setDraft(e.currentTarget.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                commit();
+              }
+            }}
+          />
+          <Button size="xs" onClick={commit}>
+            {t("Done")}
+          </Button>
+        </Group>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}

apps/client/src/ee/base/components/kanban/kanban-column.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { generateJitteredKeyBetween } from "fractional-indexing-jittered";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { type IBase, type IBaseRow, type IBaseView, type FilterGroup, type KanbanColumn as KanbanColumnType, KANBAN_CARD_DRAG_TYPE } from "@/ee/base/types/base.types";
+import { type IBase, type IBaseProperty, type IBaseRow, type IBaseView, type FilterGroup, type KanbanColumn as KanbanColumnType, KANBAN_CARD_DRAG_TYPE } from "@/ee/base/types/base.types";
 import { buildColumnFilter } from "@/ee/base/services/kanban-column-filter";
 import { formatKanbanCount } from "@/ee/base/services/format-kanban-count";
 import { useKanbanColumnAutoScroll } from "@/ee/base/hooks/use-kanban-autoscroll";
@@ -19,6 +19,7 @@ type KanbanColumnProps = {
   column: KanbanColumnType;
   viewFilter: FilterGroup | undefined;
   groupByPropertyId: string;
+  groupByProperty: IBaseProperty | undefined;
   canEdit: boolean;
   onOpenRow: (rowId: string) => void;
   onHide: (columnKey: string) => void;
@@ -33,6 +34,7 @@ export function KanbanColumn({
   column,
   viewFilter,
   groupByPropertyId,
+  groupByProperty,
   canEdit,
   onOpenRow,
   onHide,
@@ -139,6 +141,7 @@ export function KanbanColumn({
       <KanbanColumnHeader
         column={column}
         pageId={pageId}
+        property={groupByProperty}
         count={count}
         canEdit={canEdit}
         onHide={() => onHide(column.key)}

apps/client/src/ee/base/components/property/property-menu.tsx

@@ -53,6 +53,7 @@ type PropertyMenuContentProps = {
   onDirtyChange?: (dirty: boolean) => void;
   onEditFormula?: () => void;
   pageId: string;
+  initialPanel?: "main" | "options";
 };
 
 type MenuPanel =
@@ -96,9 +97,10 @@ export function PropertyMenuContent({
   onDirtyChange,
   onEditFormula,
   pageId,
+  initialPanel,
 }: PropertyMenuContentProps) {
   const { t } = useTranslation();
-  const [panel, setPanel] = useState<MenuPanel>("main");
+  const [panel, setPanel] = useState<MenuPanel>(initialPanel ?? "main");
   const [renameValue, setRenameValue] = useState(property.name);
   const renameInputRef = useRef<HTMLInputElement>(null);
   const [optionsDirty, setOptionsDirty] = useState(false);
@@ -117,12 +119,12 @@ export function PropertyMenuContent({
 
   useEffect(() => {
     if (opened) {
-      setPanel("main");
+      setPanel(initialPanel ?? "main");
       setRenameValue(property.name);
       setOptionsDirty(false);
       setPendingTargetType(null);
     }
-  }, [opened, property.name]);
+  }, [opened, property.name, initialPanel]);
 
   useEffect(() => {
     if (panel === "rename") {
@@ -463,7 +465,7 @@ export function PropertyMenuContent({
 
 PropertyMenuContent.displayName = "PropertyMenuContent";
 
-function MenuItem({
+export function MenuItem({
   icon,
   label,
   rightIcon,

apps/client/src/ee/base/hooks/use-kanban-columns.ts

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { IBase, IBaseView, KanbanColumn, NO_VALUE_CHOICE_ID, SelectTypeOptions } from "@/ee/base/types/base.types";
+import { IBase, IBaseProperty, IBaseView, KanbanColumn, NO_VALUE_CHOICE_ID, SelectTypeOptions } from "@/ee/base/types/base.types";
 
 export type KanbanGroup = KanbanColumn & { hidden: boolean };
 
@@ -8,6 +8,7 @@ export function useKanbanColumns(
   view: IBaseView | undefined,
 ): {
   groupByPropertyId: string | undefined;
+  groupByProperty: IBaseProperty | undefined;
   columns: KanbanColumn[];
   allGroups: KanbanGroup[];
   hasValidGroupBy: boolean;
@@ -18,7 +19,7 @@ export function useKanbanColumns(
     const groupable = prop && (prop.type === "select" || prop.type === "status");
 
     if (!groupable || !prop || !view) {
-      return { groupByPropertyId, columns: [], allGroups: [], hasValidGroupBy: false };
+      return { groupByPropertyId, groupByProperty: undefined, columns: [], allGroups: [], hasValidGroupBy: false };
     }
 
     const typeOptions = prop.typeOptions as SelectTypeOptions;
@@ -47,6 +48,6 @@ export function useKanbanColumns(
     });
     const columns: KanbanColumn[] = allGroups.filter((g) => !g.hidden);
 
-    return { groupByPropertyId, columns, allGroups, hasValidGroupBy: true };
+    return { groupByPropertyId, groupByProperty: prop, columns, allGroups, hasValidGroupBy: true };
   }, [base, view]);
 }

apps/client/src/ee/base/styles/kanban.module.css

@@ -76,6 +76,21 @@
   cursor: grabbing;
 }
 
+.columnTitleButton {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  padding: 2px 6px;
+  margin: -2px -6px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.columnTitleButton:hover {
+  background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+}
+
 .cardList {
   display: flex;
   flex-direction: column;