WEB-368 The UI must not offer to edit or delete the relationship column of a (custom) Data Table

[devvaansh]

Description

This change prevents users from editing or deleting system-generated columns when editing a custom Data Table. When a Data Table is created and linked to an entity (e.g., m_office, m_client, m_loan), Fineract automatically generates several columns including a foreign key relationship column (office_id, client_id, loan_id, etc.), along with created_at and updated_at timestamps. Previously, the UI displayed edit and delete buttons for all columns including these system-generated ones, which would result in backend errors if users attempted to modify them.

The fix identifies and marks these system-generated columns (id, created_at, updated_at, and the relationship column) with a system: true flag in the constructor. The existing template conditional (*ngIf="!column.system") then hides the edit and delete buttons for these protected columns, making them read-only like they should be. Only user-defined custom columns now display the edit and delete buttons.

A helper method getRelationshipColumnName() was added to map entity types to their corresponding relationship column names, and the initData() method was updated to properly handle the id column removal while preserving the relationship column as a visible but locked field.

Related issues and discussion

#WEB-368

Screenshots, if any

BEFORE

AFTER

WHEN DIFFERENT ENTITY TYPE (loan product)

Checklist

Please make sure these boxes are checked before submitting your pull request - thanks!

• If you have multiple commits please combine them into one commit by squashing them.

• Read and understood the contribution guidelines at web-app/.github/CONTRIBUTING.md.

Summary by CodeRabbit

• Refactor
  • Improved internal handling of relationship columns in data table management to better distinguish system columns from user-defined columns.
  • Enhanced column identification logic to more accurately process data table structures during initialization.

[coderabbitai]

Walkthrough

The EditDataTableComponent is enhanced with a new method to map application table names to relationship column names. Constructor and initialization logic are updated to conditionally treat relationship columns as system columns and to only remove the 'id' column if it's actually the first column.

Changes

Cohort / File(s)	Summary
EditDataTableComponent updates src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.ts	Adds getRelationshipColumnName() helper method for mapping table names. Updates constructor to compute and apply relationship column name in system-marking logic. Modifies initData() to conditionally remove the 'id' column only when it's the first column.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Areas requiring attention:
  • Verify the getRelationshipColumnName() mapping logic correctly handles all application table name cases
  • Confirm the conditional 'id' column removal doesn't break existing data table scenarios
  • Validate that relationship columns are consistently marked as system across all code paths

Suggested reviewers

• gkbishnoi07

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The pull request title "WEB-368 The UI must not offer to edit or delete the relationship column of a (custom) Data Table" directly and clearly describes the primary objective of the changeset. The implementation confirms this intent by adding a helper method to identify relationship columns, marking them as system-protected columns in the constructor, and leveraging the existing *ngIf="!column.system" template conditional to hide edit and delete buttons for these columns. The title is concise, specific, and contains no vague terms; it communicates exactly what the change accomplishes without unnecessary noise or file listings.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.ts (1)

179-195: Move the table mapping to a class-level constant.

The tableToColumnMap object is recreated on every method call. Moving it to a class-level constant would improve performance and make it easier to maintain.

Apply this diff to refactor:

+  /** Mapping of application table names to relationship column names */
+  private static readonly TABLE_TO_COLUMN_MAP: { [key: string]: string } = {
+    m_client: 'client_id',
+    m_group: 'group_id',
+    m_center: 'center_id',
+    m_office: 'office_id',
+    m_loan: 'loan_id',
+    m_savings_account: 'savings_account_id',
+    m_savings_account_transaction: 'savings_transaction_id',
+    m_product_loan: 'product_loan_id',
+    m_savings_product: 'savings_product_id',
+    m_share_product: 'share_product_id'
+  };
+
   /**
    * Gets the relationship column name.
    * @param {string} appTableName Application table name.
    * @returns {string} Relationship column name.
    */
   getRelationshipColumnName(appTableName: string): string {
-    // Map application table names to their relationship column names
-    const tableToColumnMap: { [key: string]: string } = {
-      m_client: 'client_id',
-      m_group: 'group_id',
-      m_center: 'center_id',
-      m_office: 'office_id',
-      m_loan: 'loan_id',
-      m_savings_account: 'savings_account_id',
-      m_savings_account_transaction: 'savings_transaction_id',
-      m_product_loan: 'product_loan_id',
-      m_savings_product: 'savings_product_id',
-      m_share_product: 'share_product_id'
-    };
-
-    return tableToColumnMap[appTableName] || '';
+    return EditDataTableComponent.TABLE_TO_COLUMN_MAP[appTableName] || '';
   }

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 61f30c8 and fd53a91.

📒 Files selected for processing (1)

• src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.ts (2 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

src/app/**

⚙️ CodeRabbit configuration file

src/app/**: For Angular code: verify component separation, trackBy on *ngFor,
strict type safety, and clean observable patterns.

Files:

• src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Run Lint, Build and Deploy

🔇 Additional comments (4)

src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.ts (4)

158-159: LGTM!

The relationship column name computation is correctly positioned and clearly implemented.

---

161-168: LGTM!

The system column marking logic correctly identifies and protects both standard system columns (id, created_at, updated_at) and the entity-specific relationship column.

---

222-226: LGTM!

The conditional check properly guards against removing the wrong column. The improvement from unconditional removal to checking for the 'id' column name is a solid defensive coding practice.

---

179-195: All application table names are properly mapped.

Verification confirms that all 10 tables from appTableData (m_client, m_group, m_center, m_office, m_loan, m_savings_account, m_product_loan, m_savings_account_transaction, m_savings_product, m_share_product) are included in the tableToColumnMap. The mapping is complete and covers all application tables.

[devvaansh]

@gkbishnoi07 plz take a look

[IOhacker]

LGTM

[gkbishnoi07]

thanks for the PR