Add basic rule management: edit + delete - #80655
Conversation
- Add RULES_MERCHANT_EDIT route for editing existing rules - Create EditMerchantRulePage component - Add deletePolicyCodingRule action - Add click handler on rule rows to navigate to edit page - Populate form with existing rule data on edit - Add delete button with confirmation modal - Add translations for edit and delete
This comment has been minimized.
This comment has been minimized.
Codecov Report❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.
|
…g new ones The setPolicyCodingRule function now properly handles the edit case by using UPDATE pending action and restoring the original rule on failure instead of deleting it.
The object spread {ruleID, ...rule} was causing the rule's ruleID property
to overwrite the key-based ruleID when the rule object had ruleID: undefined.
Swapped order to {...rule, ruleID} so the key always takes precedence.
🦜 Polyglot Parrot! 🦜Squawk! Looks like you added some shiny new English strings. Allow me to parrot them back to you in other tongues: View the translation diffdiff --git a/src/languages/de.ts b/src/languages/de.ts
index e33cde90..ae57a89e 100644
--- a/src/languages/de.ts
+++ b/src/languages/de.ts
@@ -761,15 +761,14 @@ const translations: TranslationDeepObject<typeof en> = {
},
revoke: {
revoke: 'Widerrufen',
- title: 'Gesichts-/Fingerabdruck & Passkeys',
+ title: 'Gesicht/Fingerabdruck & Passkeys',
explanation:
- 'Die Gesichts-/Fingerabdruck- oder Passkey-Verifizierung ist auf einem oder mehreren Geräten aktiviert. Das Widerrufen des Zugriffs erfordert beim nächsten Verifizierungsvorgang auf jedem Gerät einen Magic Code',
+ 'Die Gesichts-/Fingerabdruck- oder Passkey-Verifizierung ist auf einem oder mehreren Geräten aktiviert. Durch das Widerrufen des Zugriffs wird für die nächste Verifizierung auf jedem Gerät ein magischer Code erforderlich',
confirmationPrompt: 'Bist du sicher? Du benötigst einen magischen Code für die nächste Verifizierung auf jedem Gerät',
cta: 'Zugriff widerrufen',
- noDevices:
- 'Sie haben keine Geräte für Gesichts-/Fingerabdruck- oder Passkey-Verifizierung registriert. Wenn Sie welche registrieren, können Sie den Zugriff hier wieder entziehen.',
+ noDevices: 'Du hast keine Geräte für Gesichts-/Fingerabdruck- oder Passkey-Verifizierung registriert. Wenn du welche registrierst, kannst du den Zugriff hier widerrufen.',
dismiss: 'Verstanden',
- error: 'Anfrage fehlgeschlagen. Versuchen Sie es später erneut.',
+ error: 'Anfrage fehlgeschlagen. Versuchen Sie es später noch einmal.',
},
},
validateCodeModal: {
@@ -6362,6 +6361,9 @@ Fordere Spesendetails wie Belege und Beschreibungen an, lege Limits und Standard
confirmError: 'Geben Sie den Händler ein und nehmen Sie mindestens eine Änderung vor',
confirmErrorMerchant: 'Bitte geben Sie den Händler ein',
confirmErrorUpdate: 'Bitte wenden Sie mindestens eine Aktualisierung an',
+ editRuleTitle: 'Regel bearbeiten',
+ deleteRule: 'Regel löschen',
+ deleteRuleConfirmation: 'Sind Sie sicher, dass Sie diese Regel löschen möchten?',
},
},
planTypePage: {
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
index 18a82933..302b2a55 100644
--- a/src/languages/fr.ts
+++ b/src/languages/fr.ts
@@ -766,13 +766,13 @@ const translations: TranslationDeepObject<typeof en> = {
revoke: 'Révoquer',
title: 'Reconnaissance faciale/empreinte digitale et passkeys',
explanation:
- 'La vérification par reconnaissance faciale/empreinte digitale ou passkey est activée sur un ou plusieurs appareils. Révoquer l’accès nécessitera un code magique pour la prochaine vérification sur n’importe quel appareil',
+ 'La vérification par reconnaissance faciale/empreinte digitale ou par passkey est activée sur un ou plusieurs appareils. Révoquer l’accès exigera un code magique pour la prochaine vérification sur n’importe quel appareil',
confirmationPrompt: 'Êtes-vous sûr ? Vous aurez besoin d’un code magique pour la prochaine vérification sur n’importe quel appareil',
cta: 'Révoquer l’accès',
noDevices:
- 'Vous n’avez enregistré aucun appareil pour la vérification par reconnaissance faciale, empreinte digitale ou Passkey. Si vous en enregistrez, vous pourrez révoquer cet accès ici.',
+ 'Vous n’avez enregistré aucun appareil pour la vérification par reconnaissance faciale/empreinte digitale ou par passkey. Si vous en enregistrez, vous pourrez révoquer cet accès ici.',
dismiss: 'Compris',
- error: 'La demande a échoué. Veuillez réessayer plus tard.',
+ error: 'La requête a échoué. Veuillez réessayer plus tard.',
},
},
validateCodeModal: {
@@ -6372,6 +6372,9 @@ Exigez des informations de dépense comme les reçus et les descriptions, défin
confirmError: 'Saisissez un marchand et appliquez au moins une mise à jour',
confirmErrorMerchant: 'Veuillez saisir le commerçant',
confirmErrorUpdate: 'Veuillez appliquer au moins une mise à jour',
+ editRuleTitle: 'Modifier la règle',
+ deleteRule: 'Supprimer la règle',
+ deleteRuleConfirmation: 'Voulez-vous vraiment supprimer cette règle ?',
},
},
planTypePage: {
diff --git a/src/languages/it.ts b/src/languages/it.ts
index 7f8fd27e..d1bf3969 100644
--- a/src/languages/it.ts
+++ b/src/languages/it.ts
@@ -762,13 +762,13 @@ const translations: TranslationDeepObject<typeof en> = {
},
revoke: {
revoke: 'Revoca',
- title: 'Face/impronta digitale e passkey',
+ title: 'Riconoscimento facciale/impronta digitale & passkey',
explanation:
- 'La verifica tramite volto/impronta digitale o passkey è abilitata su uno o più dispositivi. La revoca dell’accesso richiederà un codice magico per la prossima verifica su qualsiasi dispositivo',
- confirmationPrompt: 'Sei sicuro? Avrai bisogno di un codice magico per la prossima verifica su qualsiasi dispositivo',
+ 'La verifica con volto/impronta digitale o passkey è abilitata su uno o più dispositivi. La revoca dell’accesso richiederà un codice magico per la prossima verifica su qualsiasi dispositivo',
+ confirmationPrompt: 'Sei sicuro? Ti servirà un codice magico per la prossima verifica su qualsiasi dispositivo',
cta: 'Revoca accesso',
- noDevices: 'Non hai alcun dispositivo registrato per la verifica con volto/impronta digitale o passkey. Se ne registri uno, potrai revocare tale accesso qui.',
- dismiss: 'Capito',
+ noDevices: 'Non hai alcun dispositivo registrato per la verifica con volto/impronta digitale o passkey. Se ne registri uno, potrai revocare tale accesso da qui.',
+ dismiss: 'Ho capito',
error: 'Richiesta non riuscita. Riprova più tardi.',
},
},
@@ -6344,6 +6344,9 @@ Richiedi dettagli di spesa come ricevute e descrizioni, imposta limiti e valori
confirmError: 'Inserisci l’esercente e applica almeno un aggiornamento',
confirmErrorMerchant: 'Per favore inserisci l’esercente',
confirmErrorUpdate: 'Applica almeno un aggiornamento',
+ editRuleTitle: 'Modifica regola',
+ deleteRule: 'Elimina regola',
+ deleteRuleConfirmation: 'Sei sicuro di voler eliminare questa regola?',
},
},
planTypePage: {
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
index a7b8f90e..ba1f86ce 100644
--- a/src/languages/ja.ts
+++ b/src/languages/ja.ts
@@ -761,12 +761,12 @@ const translations: TranslationDeepObject<typeof en> = {
},
revoke: {
revoke: '取り消す',
- title: '顔認証/指紋認証 & パスキー',
- explanation: '1 台以上のデバイスで、顔認証/指紋認証またはパスキー認証が有効になっています。アクセスを取り消すと、次回以降どのデバイスでも認証時にマジックコードが必要になります',
- confirmationPrompt: '本当に実行してもよろしいですか?今後、どのデバイスでの認証にもマジックコードが必要になります',
+ title: '顔/指紋 & パスキー',
+ explanation: '1 台以上のデバイスで顔 / 指紋またはパスキー認証が有効になっています。アクセスを取り消すと、今後どのデバイスでも次回の認証時にマジックコードが必要になります',
+ confirmationPrompt: '本当に実行しますか?次回、どのデバイスで確認する場合でも、マジックコードが必要になります',
cta: 'アクセスを取り消す',
- noDevices: '顔/指紋認証またはパスキー認証用に登録されたデバイスがありません。デバイスを登録すると、そのアクセスをここで取り消せるようになります。',
- dismiss: '了解しました',
+ noDevices: '顔認証 / 指紋認証 またはパスキー認証用に登録されているデバイスがありません。 \nいずれかを登録すると、ここでそのアクセスを取り消せるようになります。',
+ dismiss: '了解',
error: 'リクエストに失敗しました。後でもう一度お試しください。',
},
},
@@ -6300,6 +6300,9 @@ ${reportName}
confirmError: '支払先を入力し、少なくとも 1 つの更新を適用してください',
confirmErrorMerchant: '商人を入力してください',
confirmErrorUpdate: '少なくとも 1 件の更新を適用してください',
+ editRuleTitle: 'ルールを編集',
+ deleteRule: 'ルールを削除',
+ deleteRuleConfirmation: 'このルールを削除してもよろしいですか?',
},
},
planTypePage: {
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
index d3fbd320..f5f2217c 100644
--- a/src/languages/nl.ts
+++ b/src/languages/nl.ts
@@ -762,14 +762,14 @@ const translations: TranslationDeepObject<typeof en> = {
},
revoke: {
revoke: 'Intrekken',
- title: 'Gezichtsherkenning/vingerafdruk & passkeys',
+ title: 'Gezicht/vingerafdruk en passkeys',
explanation:
'Gezichts-/vingerafdruk- of passkeys-verificatie is ingeschakeld op één of meer apparaten. Toegang intrekken vereist een magische code voor de volgende verificatie op elk apparaat',
confirmationPrompt: 'Weet je het zeker? Je hebt een magische code nodig voor de volgende verificatie op elk apparaat',
cta: 'Toegang intrekken',
- noDevices: 'Je hebt geen apparaten geregistreerd voor gezichts-/vingerafdruk- of passkeys-verificatie. Als je er een registreert, kun je hier die toegang intrekken.',
+ noDevices: 'Je hebt geen apparaten geregistreerd voor gezichts-/vingerafdruk- of passkey-verificatie. Als je er een registreert, kun je die toegang hier intrekken.',
dismiss: 'Begrepen',
- error: 'Verzoek mislukt. Probeer het later opnieuw.',
+ error: 'Aanvraag mislukt. Probeer het later opnieuw.',
},
},
validateCodeModal: {
@@ -6331,6 +6331,9 @@ Vraag verplichte uitgavedetails zoals bonnetjes en beschrijvingen, stel limieten
confirmError: 'Voer een leverancier in en pas ten minste één wijziging toe',
confirmErrorMerchant: 'Voer handelaar in',
confirmErrorUpdate: 'Breng ten minste één wijziging aan alstublieft',
+ editRuleTitle: 'Regel bewerken',
+ deleteRule: 'Regel verwijderen',
+ deleteRuleConfirmation: 'Weet je zeker dat je deze regel wilt verwijderen?',
},
},
planTypePage: {
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
index 58b514c3..65bfccdc 100644
--- a/src/languages/pl.ts
+++ b/src/languages/pl.ts
@@ -762,13 +762,13 @@ const translations: TranslationDeepObject<typeof en> = {
},
revoke: {
revoke: 'Unieważnij',
- title: 'Rozpoznawanie twarzy/odcisku palca i klucze dostępu',
+ title: 'Rozpoznawanie twarzy/odcisk palca i klucze dostępu',
explanation:
- 'Weryfikacja twarzą/odciskiem palca lub kluczem dostępu jest włączona na jednym lub kilku urządzeniach. Odwołanie dostępu spowoduje, że przy następnej weryfikacji na dowolnym urządzeniu wymagany będzie magiczny kod',
- confirmationPrompt: 'Czy na pewno? Będziesz potrzebować magicznego kodu do kolejnej weryfikacji na każdym urządzeniu',
+ 'Weryfikacja za pomocą twarzy/odcisku palca lub klucza dostępu (passkey) jest włączona na jednym lub większej liczbie urządzeń. Cofnięcie dostępu spowoduje, że przy następnej weryfikacji na dowolnym urządzeniu wymagany będzie magiczny kod',
+ confirmationPrompt: 'Czy na pewno? Będziesz potrzebować magicznego kodu do następnej weryfikacji na dowolnym urządzeniu',
cta: 'Cofnij dostęp',
noDevices:
- 'Nie masz żadnych urządzeń zarejestrowanych do weryfikacji twarzą/odciskiem palca ani kluczem dostępu. Jeśli jakieś zarejestrujesz, będziesz mógł/mogła cofnąć ten dostęp tutaj.',
+ 'Nie masz żadnych urządzeń zarejestrowanych do weryfikacji twarzą, odciskiem palca ani kluczem dostępu. Jeśli jakieś zarejestrujesz, będziesz mógł/mogła cofnąć ten dostęp w tym miejscu.',
dismiss: 'Rozumiem',
error: 'Żądanie nie powiodło się. Spróbuj ponownie później.',
},
@@ -6325,6 +6325,9 @@ Wymagaj szczegółów wydatków, takich jak paragony i opisy, ustawiaj limity i
confirmError: 'Wprowadź sprzedawcę i zastosuj co najmniej jedną aktualizację',
confirmErrorMerchant: 'Wprowadź sprzedawcę',
confirmErrorUpdate: 'Proszę wprowadzić co najmniej jedną zmianę',
+ editRuleTitle: 'Edytuj regułę',
+ deleteRule: 'Usuń regułę',
+ deleteRuleConfirmation: 'Czy na pewno chcesz usunąć tę regułę?',
},
},
planTypePage: {
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
index 5779e314..0182f8d0 100644
--- a/src/languages/pt-BR.ts
+++ b/src/languages/pt-BR.ts
@@ -763,12 +763,12 @@ const translations: TranslationDeepObject<typeof en> = {
revoke: 'Revogar',
title: 'Rosto/digital & chaves de acesso',
explanation:
- 'Verificação por rosto/digital ou passkey está ativada em um ou mais dispositivos. Revogar o acesso exigirá um código mágico para a próxima verificação em qualquer dispositivo',
+ 'A verificação por rosto/digital ou chave de acesso está ativada em um ou mais dispositivos. Revogar o acesso exigirá um código mágico para a próxima verificação em qualquer dispositivo',
confirmationPrompt: 'Tem certeza? Você precisará de um código mágico para a próxima verificação em qualquer dispositivo',
cta: 'Revogar acesso',
- noDevices: 'Você não tem nenhum dispositivo registrado para verificação com rosto/digital ou passkey. Se você registrar algum, poderá revogar esse acesso aqui.',
+ noDevices: 'Você não tem nenhum dispositivo registrado para verificação por rosto/digital ou passkey. Se você registrar algum, poderá revogar esse acesso aqui.',
dismiss: 'Entendi',
- error: 'A solicitação falhou. Tente novamente mais tarde.',
+ error: 'Falha na solicitação. Tente novamente mais tarde.',
},
},
validateCodeModal: {
@@ -6325,6 +6325,9 @@ Exija detalhes de despesas como recibos e descrições, defina limites e padrõe
confirmError: 'Insira o estabelecimento e aplique pelo menos uma atualização',
confirmErrorMerchant: 'Insira o comerciante',
confirmErrorUpdate: 'Por favor, aplique pelo menos uma atualização',
+ editRuleTitle: 'Editar regra',
+ deleteRule: 'Excluir regra',
+ deleteRuleConfirmation: 'Tem certeza de que deseja excluir esta regra?',
},
},
planTypePage: {
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
index e9936a2b..0d09206e 100644
--- a/src/languages/zh-hans.ts
+++ b/src/languages/zh-hans.ts
@@ -757,13 +757,13 @@ const translations: TranslationDeepObject<typeof en> = {
},
revoke: {
revoke: '撤销',
- title: '面容/指纹和通行密钥',
- explanation: '在一台或多台设备上已启用面部/指纹或通行密钥验证。撤销访问权限后,下一次在任意设备上进行验证时都需要输入魔法验证码',
+ title: '面部识别/指纹识别与通行密钥',
+ explanation: '在一台或多台设备上已启用面部 / 指纹或通行密钥验证。撤销访问权限后,下次在任何设备上进行验证时都需要使用魔法验证码',
confirmationPrompt: '你确定吗?在任何设备上进行下一步验证时,你都需要一个魔法代码',
cta: '撤销访问权限',
noDevices: '您尚未注册任何用于人脸/指纹或通行密钥验证的设备。如果您注册了设备,您将可以在此撤销其访问权限。',
- dismiss: '知道了',
- error: '请求失败。请稍后再试。',
+ dismiss: '明白了',
+ error: '请求失败。请稍后重试。',
},
},
validateCodeModal: {
@@ -6190,6 +6190,9 @@ ${reportName}
confirmError: '输入商家并至少应用一项更新',
confirmErrorMerchant: '请输入商家',
confirmErrorUpdate: '请至少进行一次更新',
+ editRuleTitle: '编辑规则',
+ deleteRule: '删除规则',
+ deleteRuleConfirmation: '您确定要删除此规则吗?',
},
},
planTypePage: {
Note You can apply these changes to your branch by copying the patch to your clipboard, then running |
|
Updated |
To prevent this, I used ref in personal rule. App/src/pages/settings/Rules/RulePageBase.tsx Lines 80 to 81 in 154faea |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppAndroid: mWeb ChromeiOS: HybridAppios.moviOS: mWeb SafariMacOS: Chrome / Safariweb.mov |
|
Updated! Removed offline indicator in wide screens |
|
@Julesssss Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e566e0ac8c
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| return Object.entries(codingRules) | ||
| .map(([ruleID, rule]) => ({ruleID, ...rule})) | ||
| .map(([ruleID, rule]) => ({...rule, ruleID})) |
There was a problem hiding this comment.
Guard against null entries in merchant rules list
When a rule is deleted, deletePolicyCodingRule merges codingRules[ruleID]: null into the policy, so codingRules can contain a null entry during the optimistic delete. The spread in Object.entries(codingRules).map(([ruleID, rule]) => ({...rule, ruleID})) will throw a TypeError when rule is null, which will crash the merchant rules list right after a delete (or any optimistic delete). Filtering out falsy rules before spreading (or defaulting to an empty object) avoids this runtime failure.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
I'll address this in a follow up
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Deployed to staging by https://github.com/luacmartins in version: 9.3.11-0 🚀
|
|
Hi @luacmartins merchant section is missing in Gmail and Expensifail accounts. Is there another precondition? 80655.mp4 |
|
@IuliiaHerets this page is not available in staging yet. Sorry, I should have marked this as no QA |
|
🚀 Deployed to production by https://github.com/Julesssss in version: 9.3.12-1 🚀
|
| const hasCategories = () => { | ||
| if (!policy?.areCategoriesEnabled) { | ||
| return false; | ||
| } | ||
| return Object.keys(policyCategories ?? {}).length > 0; | ||
| }; |
There was a problem hiding this comment.
Coming from #83131, this isn't handling the scenario when policy data can be missing, like after clearing cache.


Explanation of Change
Adds the ability to edit and delete merchant rules.
Fixed Issues
$ #80521
Tests
Pre-condition: Rules are enabled in the workspace
Workspace > Rules > MerchantEdit ruleRHPDelete ruleOffline tests
N/A
QA Steps
Same as tests
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps./** comment above it */thisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor)thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick)Screenshots/Videos
Screen.Recording.2026-01-27.at.2.56.55.PM.mov
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari