From 56c0ed4a045e6aaafa7ff536cffee616bb6a0748 Mon Sep 17 00:00:00 2001
From: Itai Spiegel <itai.spiegel@gmail.com>
Date: Sun, 11 Oct 2026 16:19:55 +0300
Subject: [PATCH] feat(config-ui): add a Teams page for org data management

DevLake's team dashboards (DORA by Team, Engineering Throughput - Team
View, Copilot by Team) join through `teams`, `team_users` and
`user_accounts`, but config-ui offered no way to populate them: the org
plugin's four CSV endpoints were reachable only by hand-crafting a
multipart upload. On a fresh install those tables stay empty and every
team dashboard renders blank.

Adds a Teams page with three tabs backed by the existing org endpoints,
so no backend change is required:

- Teams: id, name, alias, sorting index, and parent team as a select of
  the other teams rather than a raw id.
- Members: id, name, email, and team membership as a multi-select that
  serialises back to the `;`-delimited TeamIds cell.
- Account Mapping: every collected tool account, with its identity
  columns read-only and a select to map it to a member. Rows cannot be
  added or removed here because accounts come from data collection.

Each tab round-trips a whole CSV file, matching the endpoints' existing
delete-all-then-save semantics; the page says so in an alert, since a
save overwrites rows added elsewhere since the page loaded. Columns the
UI does not edit (AvatarUrl, CreatedDate, Status) are preserved by
keeping the server's header order and writing back untouched cells.

The CSV helpers cover the subset of RFC 4180 that gocsv emits - quoted
delimiters, doubled quotes, embedded newlines, CRLF - and are unit
tested for round-trip stability.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 config-ui/src/api/index.ts                   |   2 +
 config-ui/src/api/org/index.ts               |  43 ++++
 config-ui/src/app/router.tsx                 |   5 +
 config-ui/src/routes/index.ts                |   1 +
 config-ui/src/routes/layout/config.tsx       |   6 +
 config-ui/src/routes/team/editable-table.tsx | 122 ++++++++++
 config-ui/src/routes/team/index.ts           |  19 ++
 config-ui/src/routes/team/team.tsx           | 238 +++++++++++++++++++
 config-ui/src/utils/csv.test.ts              |  73 ++++++
 config-ui/src/utils/csv.ts                   | 119 ++++++++++
 config-ui/src/utils/index.ts                 |   1 +
 11 files changed, 629 insertions(+)
 create mode 100644 config-ui/src/api/org/index.ts
 create mode 100644 config-ui/src/routes/team/editable-table.tsx
 create mode 100644 config-ui/src/routes/team/index.ts
 create mode 100644 config-ui/src/routes/team/team.tsx
 create mode 100644 config-ui/src/utils/csv.test.ts
 create mode 100644 config-ui/src/utils/csv.ts

diff --git a/config-ui/src/api/index.ts b/config-ui/src/api/index.ts
index 378ba14777e..f69c8cb13ca 100644
--- a/config-ui/src/api/index.ts
+++ b/config-ui/src/api/index.ts
@@ -22,6 +22,7 @@ import * as apiKey from './api-key';
 import * as auth from './auth';
 import * as blueprint from './blueprint';
 import * as connection from './connection';
+import * as org from './org';
 import * as pipeline from './pipeline';
 import plugin from './plugin';
 import * as project from './project';
@@ -39,6 +40,7 @@ export const API = {
   auth,
   blueprint,
   connection,
+  org,
   pipeline,
   plugin,
   project,
diff --git a/config-ui/src/api/org/index.ts b/config-ui/src/api/org/index.ts
new file mode 100644
index 00000000000..deb5cc98328
--- /dev/null
+++ b/config-ui/src/api/org/index.ts
@@ -0,0 +1,43 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { request } from '@/utils';
+
+// The org plugin stores teams, users and their account mapping as whole CSV files:
+// every PUT replaces the entire table (deleteAll + save), so the UI always sends
+// back the complete set of rows rather than a delta.
+const upload = (path: string, csv: string, filename: string) => {
+  const data = new FormData();
+  data.append('file', new Blob([csv], { type: 'text/csv' }), filename);
+  return request(path, { method: 'put', data });
+};
+
+export const getTeams = (): Promise<string> => request('/plugins/org/teams.csv');
+
+export const updateTeams = (csv: string) => upload('/plugins/org/teams.csv', csv, 'teams.csv');
+
+export const getUsers = (): Promise<string> => request('/plugins/org/users.csv');
+
+export const updateUsers = (csv: string) => upload('/plugins/org/users.csv', csv, 'users.csv');
+
+// Returns every known account (one per connected tool identity) with the UserId it
+// is currently mapped to, not only the accounts that already have one.
+export const getUserAccountMapping = (): Promise<string> => request('/plugins/org/user_account_mapping.csv');
+
+export const updateUserAccountMapping = (csv: string) =>
+  upload('/plugins/org/user_account_mapping.csv', csv, 'user_account_mapping.csv');
diff --git a/config-ui/src/app/router.tsx b/config-ui/src/app/router.tsx
index c9ffe5f235c..e7f1a9043f3 100644
--- a/config-ui/src/app/router.tsx
+++ b/config-ui/src/app/router.tsx
@@ -35,6 +35,7 @@ import {
   Pipelines,
   Pipeline,
   ApiKeys,
+  Team,
   NotFound,
 } from '@/routes';
 
@@ -112,6 +113,10 @@ export const router = createBrowserRouter([
           },
         ],
       },
+      {
+        path: 'teams',
+        element: <Team />,
+      },
       {
         path: 'keys',
         element: <ApiKeys />,
diff --git a/config-ui/src/routes/index.ts b/config-ui/src/routes/index.ts
index 12e9f77bafe..8550e0a0f9d 100644
--- a/config-ui/src/routes/index.ts
+++ b/config-ui/src/routes/index.ts
@@ -27,3 +27,4 @@ export * from './not-found';
 export * from './onboard';
 export * from './pipeline';
 export * from './project';
+export * from './team';
diff --git a/config-ui/src/routes/layout/config.tsx b/config-ui/src/routes/layout/config.tsx
index ae6ac5dbf17..862d9529ab2 100644
--- a/config-ui/src/routes/layout/config.tsx
+++ b/config-ui/src/routes/layout/config.tsx
@@ -21,6 +21,7 @@ import {
   ProjectOutlined,
   ExperimentOutlined,
   KeyOutlined,
+  TeamOutlined,
   DashboardOutlined,
   FileSearchOutlined,
   ApiOutlined,
@@ -66,6 +67,11 @@ export const menuItems: MenuItem[] = [
       },
     ],
   },
+  {
+    key: `${PATH_PREFIX}/teams`,
+    label: 'Teams',
+    icon: <TeamOutlined />,
+  },
   {
     key: `${PATH_PREFIX}/keys`,
     label: 'API Keys',
diff --git a/config-ui/src/routes/team/editable-table.tsx b/config-ui/src/routes/team/editable-table.tsx
new file mode 100644
index 00000000000..a6316df9507
--- /dev/null
+++ b/config-ui/src/routes/team/editable-table.tsx
@@ -0,0 +1,122 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { DeleteOutlined } from '@ant-design/icons';
+import { Table, Input, Select, Button, Tooltip } from 'antd';
+
+export type EditableRow = Record<string, string> & { _key: string };
+
+export type EditableField = {
+  key: string;
+  title: string;
+  type?: 'text' | 'select' | 'multiple';
+  width?: number;
+  placeholder?: string;
+  options?: Array<{ label: string; value: string }>;
+  // Multi-value fields are stored in the CSV as a single delimited cell.
+  separator?: string;
+  editable?: boolean;
+  invalid?: (row: EditableRow, rows: EditableRow[]) => string | undefined;
+};
+
+interface Props {
+  fields: EditableField[];
+  rows: EditableRow[];
+  onChange: (rows: EditableRow[]) => void;
+  removable?: boolean;
+  emptyText?: string;
+}
+
+export const EditableTable = ({ fields, rows, onChange, removable = true, emptyText }: Props) => {
+  const update = (key: string, field: string, value: string) =>
+    onChange(rows.map((row) => (row._key === key ? { ...row, [field]: value } : row)));
+
+  const columns = fields.map((field) => ({
+    title: field.title,
+    dataIndex: field.key,
+    width: field.width,
+    render: (value: string, row: EditableRow) => {
+      if (field.editable === false) {
+        return value || <span style={{ color: '#9ca3af' }}>—</span>;
+      }
+
+      if (field.type === 'select' || field.type === 'multiple') {
+        const separator = field.separator ?? ';';
+        const multiple = field.type === 'multiple';
+        return (
+          <Select
+            style={{ width: '100%' }}
+            mode={multiple ? 'multiple' : undefined}
+            allowClear
+            showSearch
+            optionFilterProp="label"
+            placeholder={field.placeholder}
+            options={field.options}
+            value={multiple ? (value ? value.split(separator).filter(Boolean) : []) : value || undefined}
+            onChange={(next) =>
+              update(
+                row._key,
+                field.key,
+                multiple ? ((next as string[]) ?? []).join(separator) : ((next as string) ?? ''),
+              )
+            }
+          />
+        );
+      }
+
+      const error = field.invalid?.(row, rows);
+      return (
+        <Tooltip title={error} open={error ? undefined : false}>
+          <Input
+            status={error ? 'error' : undefined}
+            placeholder={field.placeholder}
+            value={value}
+            onChange={(e) => update(row._key, field.key, e.target.value)}
+          />
+        </Tooltip>
+      );
+    },
+  }));
+
+  if (removable) {
+    columns.push({
+      title: '',
+      dataIndex: '_actions',
+      width: 50,
+      render: (_: string, row: EditableRow) => (
+        <Button
+          type="text"
+          icon={<DeleteOutlined />}
+          onClick={() => onChange(rows.filter((it) => it._key !== row._key))}
+        />
+      ),
+    });
+  }
+
+  return (
+    <Table
+      rowKey="_key"
+      size="small"
+      columns={columns}
+      dataSource={rows}
+      pagination={false}
+      locale={{ emptyText }}
+      scroll={{ x: true }}
+    />
+  );
+};
diff --git a/config-ui/src/routes/team/index.ts b/config-ui/src/routes/team/index.ts
new file mode 100644
index 00000000000..d26db93112c
--- /dev/null
+++ b/config-ui/src/routes/team/index.ts
@@ -0,0 +1,19 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+export * from './team';
diff --git a/config-ui/src/routes/team/team.tsx b/config-ui/src/routes/team/team.tsx
new file mode 100644
index 00000000000..0e9525f9217
--- /dev/null
+++ b/config-ui/src/routes/team/team.tsx
@@ -0,0 +1,238 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { useState, useMemo, useEffect } from 'react';
+import { PlusOutlined } from '@ant-design/icons';
+import { Flex, Tabs, Button, Alert } from 'antd';
+
+import API from '@/api';
+import { PageHeader } from '@/components';
+import { useRefreshData } from '@/hooks';
+import { operator, parseCSV, stringifyCSV } from '@/utils';
+import type { CSVTable } from '@/utils';
+
+import { EditableTable } from './editable-table';
+import type { EditableRow, EditableField } from './editable-table';
+
+type Resource = 'teams' | 'users' | 'accounts';
+
+let keySeed = 0;
+const nextKey = () => `row-${(keySeed += 1)}`;
+
+const withKeys = (table: CSVTable): EditableRow[] =>
+  table.rows.map((row) => ({ ...row, _key: nextKey() }) as EditableRow);
+
+const toCSV = (headers: string[], rows: EditableRow[]) =>
+  stringifyCSV({
+    headers,
+    rows: rows.map(({ _key, ...rest }) => rest),
+  });
+
+const required = (field: string, label: string) => (row: EditableRow) =>
+  row[field]?.trim() ? undefined : `${label} is required`;
+
+const uniqueId = (row: EditableRow, rows: EditableRow[]) => {
+  const id = row.Id?.trim();
+  if (!id) {
+    return 'Id is required';
+  }
+  return rows.filter((it) => it.Id?.trim() === id).length > 1 ? 'Id must be unique' : undefined;
+};
+
+export const Team = () => {
+  const [tab, setTab] = useState<Resource>('teams');
+  const [operating, setOperating] = useState(false);
+  const [version, setVersion] = useState(1);
+
+  const [teams, setTeams] = useState<EditableRow[]>([]);
+  const [users, setUsers] = useState<EditableRow[]>([]);
+  const [accounts, setAccounts] = useState<EditableRow[]>([]);
+  const [headers, setHeaders] = useState<Record<Resource, string[]>>({
+    teams: ['Id', 'Name', 'Alias', 'ParentId', 'SortingIndex'],
+    users: ['Id', 'Name', 'Email', 'TeamIds'],
+    accounts: [],
+  });
+
+  const { data, ready } = useRefreshData(
+    () =>
+      Promise.all([API.org.getTeams(), API.org.getUsers(), API.org.getUserAccountMapping()]).then(
+        ([teamsCSV, usersCSV, accountsCSV]) => ({
+          teams: parseCSV(teamsCSV),
+          users: parseCSV(usersCSV),
+          accounts: parseCSV(accountsCSV),
+        }),
+      ),
+    [version],
+  );
+
+  useEffect(() => {
+    if (!data) {
+      return;
+    }
+    setTeams(withKeys(data.teams));
+    setUsers(withKeys(data.users));
+    setAccounts(withKeys(data.accounts));
+    setHeaders({
+      teams: data.teams.headers.length ? data.teams.headers : headers.teams,
+      users: data.users.headers.length ? data.users.headers : headers.users,
+      accounts: data.accounts.headers,
+    });
+  }, [data]);
+
+  const teamOptions = useMemo(
+    () =>
+      teams
+        .filter((team) => team.Id?.trim())
+        .map((team) => ({ label: team.Name?.trim() || team.Id, value: team.Id.trim() })),
+    [teams],
+  );
+
+  const userOptions = useMemo(
+    () =>
+      users
+        .filter((user) => user.Id?.trim())
+        .map((user) => ({ label: user.Name?.trim() || user.Id, value: user.Id.trim() })),
+    [users],
+  );
+
+  const teamFields: EditableField[] = [
+    { key: 'Id', title: 'Id', width: 120, placeholder: 'e.g. 1', invalid: uniqueId },
+    { key: 'Name', title: 'Name', width: 220, placeholder: 'e.g. Platform', invalid: required('Name', 'Name') },
+    { key: 'Alias', title: 'Alias', width: 140, placeholder: 'e.g. PLT' },
+    {
+      key: 'ParentId',
+      title: 'Parent team',
+      width: 200,
+      type: 'select',
+      placeholder: 'No parent',
+      options: teamOptions,
+    },
+    { key: 'SortingIndex', title: 'Sorting index', width: 130, placeholder: '0' },
+  ];
+
+  const userFields: EditableField[] = [
+    { key: 'Id', title: 'Id', width: 140, placeholder: 'e.g. 1', invalid: uniqueId },
+    { key: 'Name', title: 'Name', width: 200, placeholder: 'Full name', invalid: required('Name', 'Name') },
+    { key: 'Email', title: 'Email', width: 240, placeholder: 'name@example.com' },
+    { key: 'TeamIds', title: 'Teams', type: 'multiple', placeholder: 'Select teams', options: teamOptions },
+  ];
+
+  const accountFields: EditableField[] = [
+    { key: 'Id', title: 'Account Id', width: 260, editable: false },
+    { key: 'UserName', title: 'Username', width: 160, editable: false },
+    { key: 'Email', title: 'Email', width: 220, editable: false },
+    { key: 'Organization', title: 'Organization', width: 160, editable: false },
+    { key: 'UserId', title: 'Mapped user', width: 220, type: 'select', placeholder: 'Unmapped', options: userOptions },
+  ];
+
+  const invalid = useMemo(() => {
+    const rows = tab === 'teams' ? teams : tab === 'users' ? users : [];
+    const fields = tab === 'teams' ? teamFields : tab === 'users' ? userFields : [];
+    return rows.some((row) => fields.some((field) => field.invalid?.(row, rows)));
+  }, [tab, teams, users]);
+
+  const handleAdd = () => {
+    if (tab === 'teams') {
+      setTeams([...teams, { _key: nextKey(), Id: '', Name: '', Alias: '', ParentId: '', SortingIndex: '0' }]);
+    } else if (tab === 'users') {
+      setUsers([...users, { _key: nextKey(), Id: '', Name: '', Email: '', TeamIds: '' }]);
+    }
+  };
+
+  const handleSave = async () => {
+    const payload = {
+      teams: () => API.org.updateTeams(toCSV(headers.teams, teams)),
+      users: () => API.org.updateUsers(toCSV(headers.users, users)),
+      accounts: () => API.org.updateUserAccountMapping(toCSV(headers.accounts, accounts)),
+    }[tab];
+
+    const [success] = await operator(payload, {
+      setOperating,
+      formatMessage: () => 'Saved. Re-run the project pipeline to refresh team metrics.',
+    });
+
+    if (success) {
+      setVersion(version + 1);
+    }
+  };
+
+  return (
+    <PageHeader
+      breadcrumbs={[{ name: 'Teams', path: '/teams' }]}
+      description="Define your teams, their members, and which tool accounts belong to each member. Team dashboards in Grafana read this data."
+    >
+      <Alert
+        style={{ marginBottom: 16 }}
+        type="info"
+        showIcon
+        message="Saving replaces the entire table"
+        description="The org plugin stores each of these as a whole file, so a save overwrites every row — including rows added by someone else since this page loaded."
+      />
+      <Tabs
+        activeKey={tab}
+        onChange={(key) => setTab(key as Resource)}
+        items={[
+          { key: 'teams', label: `Teams (${teams.length})` },
+          { key: 'users', label: `Members (${users.length})` },
+          { key: 'accounts', label: `Account Mapping (${accounts.length})` },
+        ]}
+      />
+      {tab === 'teams' && (
+        <EditableTable
+          fields={teamFields}
+          rows={teams}
+          onChange={setTeams}
+          emptyText={ready ? 'No teams yet. Add one to get started.' : 'Loading…'}
+        />
+      )}
+      {tab === 'users' && (
+        <EditableTable
+          fields={userFields}
+          rows={users}
+          onChange={setUsers}
+          emptyText={ready ? 'No members yet. Add one, then assign them to a team.' : 'Loading…'}
+        />
+      )}
+      {tab === 'accounts' && (
+        <EditableTable
+          fields={accountFields}
+          rows={accounts}
+          onChange={setAccounts}
+          removable={false}
+          emptyText={
+            ready
+              ? 'No accounts collected yet. Run a data collection first — accounts come from your connected tools.'
+              : 'Loading…'
+          }
+        />
+      )}
+      <Flex style={{ marginTop: 16 }} justify="space-between">
+        {tab === 'accounts' ? (
+          <span />
+        ) : (
+          <Button icon={<PlusOutlined />} onClick={handleAdd}>
+            Add {tab === 'teams' ? 'team' : 'member'}
+          </Button>
+        )}
+        <Button type="primary" loading={operating} disabled={!ready || invalid} onClick={handleSave}>
+          Save changes
+        </Button>
+      </Flex>
+    </PageHeader>
+  );
+};
diff --git a/config-ui/src/utils/csv.test.ts b/config-ui/src/utils/csv.test.ts
new file mode 100644
index 00000000000..3afc75d9b60
--- /dev/null
+++ b/config-ui/src/utils/csv.test.ts
@@ -0,0 +1,73 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { describe, it, expect } from 'vitest';
+
+import { parseCSV, stringifyCSV } from './csv';
+
+describe('parseCSV', () => {
+  it('parses the org plugin teams.csv shape', () => {
+    const { headers, rows } = parseCSV('Id,Name,Alias,ParentId,SortingIndex\n1,Platform,PLT,,0\n2,Payments,PAY,1,1\n');
+
+    expect(headers).toEqual(['Id', 'Name', 'Alias', 'ParentId', 'SortingIndex']);
+    expect(rows).toEqual([
+      { Id: '1', Name: 'Platform', Alias: 'PLT', ParentId: '', SortingIndex: '0' },
+      { Id: '2', Name: 'Payments', Alias: 'PAY', ParentId: '1', SortingIndex: '1' },
+    ]);
+  });
+
+  it('keeps quoted delimiters, escaped quotes and embedded newlines in one field', () => {
+    const { rows } = parseCSV('Id,Name\n1,"Platform, Core"\n2,"He said ""hi"""\n3,"two\nlines"\n');
+
+    expect(rows.map((row) => row.Name)).toEqual(['Platform, Core', 'He said "hi"', 'two\nlines']);
+  });
+
+  it('handles CRLF line endings and a header-only file', () => {
+    expect(parseCSV('Id,Name\r\n1,Platform\r\n').rows).toEqual([{ Id: '1', Name: 'Platform' }]);
+    expect(parseCSV('Id,Name\n').rows).toEqual([]);
+  });
+
+  it('pads rows that are missing trailing fields', () => {
+    expect(parseCSV('Id,Name,Email\n1,Platform\n').rows).toEqual([{ Id: '1', Name: 'Platform', Email: '' }]);
+  });
+});
+
+describe('stringifyCSV', () => {
+  it('round-trips a table unchanged', () => {
+    const csv = 'Id,Name,Email,TeamIds\nu1,Itai,itai@example.com,1;2\nu2,Dana,dana@example.com,2\n';
+
+    expect(stringifyCSV(parseCSV(csv))).toBe(csv);
+  });
+
+  it('quotes only the fields that need it', () => {
+    const csv = stringifyCSV({
+      headers: ['Id', 'Name'],
+      rows: [
+        { Id: '1', Name: 'Platform, Core' },
+        { Id: '2', Name: 'He said "hi"' },
+        { Id: '3', Name: 'plain' },
+      ],
+    });
+
+    expect(csv).toBe('Id,Name\n1,"Platform, Core"\n2,"He said ""hi"""\n3,plain\n');
+  });
+
+  it('writes an empty cell for a column the row does not carry', () => {
+    expect(stringifyCSV({ headers: ['Id', 'UserId'], rows: [{ Id: 'acc-1' }] })).toBe('Id,UserId\nacc-1,\n');
+  });
+});
diff --git a/config-ui/src/utils/csv.ts b/config-ui/src/utils/csv.ts
new file mode 100644
index 00000000000..986cf405aeb
--- /dev/null
+++ b/config-ui/src/utils/csv.ts
@@ -0,0 +1,119 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+export type CSVTable = {
+  // Kept in the order the server sent them: the org plugin's endpoints round-trip
+  // whole files, so columns the UI does not edit still have to be written back.
+  headers: string[];
+  rows: Array<Record<string, string>>;
+};
+
+// parseCSV implements the subset of RFC 4180 that gocsv (used by the org plugin)
+// emits: double quotes around fields containing a delimiter, quote or newline,
+// with embedded quotes doubled.
+export const parseCSV = (text: string): CSVTable => {
+  const records: string[][] = [];
+  let record: string[] = [];
+  let field = '';
+  let quoted = false;
+  let i = 0;
+
+  const endField = () => {
+    record.push(field);
+    field = '';
+  };
+
+  const endRecord = () => {
+    endField();
+    // A trailing newline must not produce a spurious empty record.
+    if (record.length > 1 || record[0] !== '') {
+      records.push(record);
+    }
+    record = [];
+  };
+
+  while (i < text.length) {
+    const char = text[i];
+
+    if (quoted) {
+      if (char === '"') {
+        if (text[i + 1] === '"') {
+          field += '"';
+          i += 2;
+          continue;
+        }
+        quoted = false;
+        i += 1;
+        continue;
+      }
+      field += char;
+      i += 1;
+      continue;
+    }
+
+    if (char === '"' && field === '') {
+      quoted = true;
+      i += 1;
+      continue;
+    }
+
+    if (char === ',') {
+      endField();
+      i += 1;
+      continue;
+    }
+
+    if (char === '\r' && text[i + 1] === '\n') {
+      endRecord();
+      i += 2;
+      continue;
+    }
+
+    if (char === '\n' || char === '\r') {
+      endRecord();
+      i += 1;
+      continue;
+    }
+
+    field += char;
+    i += 1;
+  }
+
+  if (field !== '' || record.length) {
+    endRecord();
+  }
+
+  const [headers = [], ...body] = records;
+
+  return {
+    headers,
+    rows: body.map((cells) =>
+      headers.reduce<Record<string, string>>((acc, header, index) => {
+        acc[header] = cells[index] ?? '';
+        return acc;
+      }, {}),
+    ),
+  };
+};
+
+const escapeField = (value: string) => (/[",\r\n]/.test(value) ? `"${value.replace(/"/g, '""')}"` : value);
+
+export const stringifyCSV = ({ headers, rows }: CSVTable): string =>
+  [headers, ...rows.map((row) => headers.map((header) => row[header] ?? ''))]
+    .map((cells) => cells.map((cell) => escapeField(cell)).join(','))
+    .join('\n') + '\n';
diff --git a/config-ui/src/utils/index.ts b/config-ui/src/utils/index.ts
index 9b21e33e202..d65cd8d6bb6 100644
--- a/config-ui/src/utils/index.ts
+++ b/config-ui/src/utils/index.ts
@@ -16,6 +16,7 @@
  *
  */
 
+export * from './csv';
 export * from './operator';
 export * from './request';
 export * from './time';