Merge pull request #1183 from rowyio/ROWY-1062-row-id-customization

Persist id customization at table level

src/atoms/projectScope/ui.ts

@@ -147,10 +147,6 @@ export const tableSettingsDialogSchemaAtom = atom(async (get) => {
 /** Open the Get Started checklist from anywhere */
 export const getStartedChecklistAtom = atom(false);
 
-/** Persist the state of the add row ID type */
-export const tableAddRowIdTypeAtom = atomWithStorage<
-  "decrement" | "random" | "custom"
->("__ROWY__ADD_ROW_ID_TYPE", "decrement");
 /** Persist when the user dismissed the row out of order warning */
 export const tableOutOfOrderDismissedAtom = atomWithStorage(
   "__ROWY__OUT_OF_ORDER_TOOLTIP_DISMISSED",

src/components/Table/ContextMenu/MenuContents.tsx

@@ -21,7 +21,6 @@ import {
   projectIdAtom,
   userRolesAtom,
   altPressAtom,
-  tableAddRowIdTypeAtom,
   confirmDialogAtom,
 } from "@src/atoms/projectScope";
 import {
@@ -45,7 +44,6 @@ export default function MenuContents({ onClose }: IMenuContentsProps) {
   const [projectId] = useAtom(projectIdAtom, projectScope);
   const [userRoles] = useAtom(userRolesAtom, projectScope);
   const [altPress] = useAtom(altPressAtom, projectScope);
-  const [addRowIdType] = useAtom(tableAddRowIdTypeAtom, projectScope);
   const confirm = useSetAtom(confirmDialogAtom, projectScope);
   const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
   const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
@@ -59,6 +57,8 @@ export default function MenuContents({ onClose }: IMenuContentsProps) {
     tableScope
   );
 
+  const addRowIdType = tableSchema.idType || "decrement";
+
   if (!tableSchema.columns || !selectedCell) return null;
 
   const selectedColumn = tableSchema.columns[selectedCell.columnKey];

src/components/Table/FinalColumn/FinalColumn.tsx

@@ -10,7 +10,6 @@ import MenuIcon from "@mui/icons-material/MoreHoriz";
 import {
   projectScope,
   userRolesAtom,
-  tableAddRowIdTypeAtom,
   altPressAtom,
   confirmDialogAtom,
 } from "@src/atoms/projectScope";
@@ -20,6 +19,7 @@ import {
   addRowAtom,
   deleteRowAtom,
   contextMenuTargetAtom,
+  tableSchemaAtom,
 } from "@src/atoms/tableScope";
 
 export const FinalColumn = memo(function FinalColumn({
@@ -27,16 +27,19 @@ export const FinalColumn = memo(function FinalColumn({
   focusInsideCell,
 }: IRenderedTableCellProps) {
   const [userRoles] = useAtom(userRolesAtom, projectScope);
-  const [addRowIdType] = useAtom(tableAddRowIdTypeAtom, projectScope);
-  const confirm = useSetAtom(confirmDialogAtom, projectScope);
-
   const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
+  const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
   const addRow = useSetAtom(addRowAtom, tableScope);
   const deleteRow = useSetAtom(deleteRowAtom, tableScope);
   const setContextMenuTarget = useSetAtom(contextMenuTargetAtom, tableScope);
 
+  const confirm = useSetAtom(confirmDialogAtom, projectScope);
   const [altPress] = useAtom(altPressAtom, projectScope);
+
+  const addRowIdType = tableSchema.idType || "decrement";
+
   const handleDelete = () => deleteRow(row.original._rowy_ref.path);
+
   const handleDuplicate = () => {
     addRow({
       row: row.original,

src/components/TableToolbar/AddRow.tsx

@@ -16,33 +16,40 @@ import {
   ChevronDown as ArrowDropDownIcon,
 } from "@src/assets/icons";
 
-import {
-  projectScope,
-  userRolesAtom,
-  tableAddRowIdTypeAtom,
-} from "@src/atoms/projectScope";
+import { projectScope, userRolesAtom } from "@src/atoms/projectScope";
 import {
   tableScope,
   tableSettingsAtom,
   tableFiltersAtom,
   tableSortsAtom,
   addRowAtom,
+  tableSchemaAtom,
+  updateTableSchemaAtom,
 } from "@src/atoms/tableScope";
+import { TableIdType } from "@src/types/table";
 
 export default function AddRow() {
   const [userRoles] = useAtom(userRolesAtom, projectScope);
   const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
+  const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
   const [tableFilters] = useAtom(tableFiltersAtom, tableScope);
   const [tableSorts] = useAtom(tableSortsAtom, tableScope);
+  const [updateTableSchema] = useAtom(updateTableSchemaAtom, tableScope);
   const addRow = useSetAtom(addRowAtom, tableScope);
-  const [idType, setIdType] = useAtom(tableAddRowIdTypeAtom, projectScope);
-
   const anchorEl = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState(false);
   const [openIdModal, setOpenIdModal] = useState(false);
 
+  const idType = tableSchema.idType || "decrement";
   const forceRandomId = tableFilters.length > 0 || tableSorts.length > 0;
 
+  const handleSetIdType = async (idType: TableIdType) => {
+    // TODO(han): refactor atom - error handler
+    await updateTableSchema!({
+      idType,
+    });
+  };
+
   const handleClick = () => {
     if (idType === "random" || (forceRandomId && idType === "decrement")) {
       addRow({
@@ -118,7 +125,7 @@ export default function AddRow() {
         label="Row add position"
         style={{ display: "none" }}
         value={forceRandomId && idType === "decrement" ? "random" : idType}
-        onChange={(e) => setIdType(e.target.value as typeof idType)}
+        onChange={(e) => handleSetIdType(e.target.value as typeof idType)}
         MenuProps={{
           anchorEl: anchorEl.current,
           MenuListProps: { "aria-labelledby": "add-row-menu-button" },

src/types/table.d.ts

@@ -95,9 +95,12 @@ export type TableSettings = {
   readOnly?: boolean;
 };
 
+export type TableIdType = "decrement" | "random" | "custom";
+
 /** Table schema document loaded when table or table settings dialog is open */
 export type TableSchema = {
   columns?: Record<string, ColumnConfig>;
+  idType?: TableIdType;
   rowHeight?: number;
   filters?: TableFilter[];
   filtersOverridable?: boolean;