TypeScript: convert edit rules modal (#5543)

.cursor/rules/commands.mdc

@@ -0,0 +1,12 @@
+---
+alwaysApply: true
+---
+
+When running yarn commands - always run them in the root directory. Do not run them in child workspaces.
+
+The following commands can be useful:
+
+- `yarn typecheck` to run typechecker
+- `yarn lint` to run the code linter and formatter
+- `yarn lint:fix` to fix some of the code lint issues (running this is preferred over `yarn lint`)
+- `yarn test` to run all the tests

.cursor/rules/pull-request.mdc

@@ -1,24 +0,0 @@
----
-description: 
-globs: 
-alwaysApply: true
----
-Before pushing code changes or opening a pull request, follow these steps:
-
-1. Check if your branch already has a changelog file in the "upcoming-release-notes" folder.
-2. If there is no changelog file for your branch:
-   a. Find the number of the most recent (highest-numbered) open issue or pull request on GitHub.
-   b. Increment that number by 1. Use this as the filename for your new changelog file.
-   c. Create a new markdown file in the "upcoming-release-notes" folder with the following format:
-
-```
----
-category: Features OR Maintenance OR Enhancements OR Bugfix
-authors: [$GithubUsername]
----
-
-$Description
-```
-
-3. Commit the new changelog file.
-4. Proceed with your push or pull request.

.cursor/rules/typescript.mdc

@@ -30,3 +30,7 @@ Syntax and Formatting
 - Use the "function" keyword for pure functions.
 - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
 - Use declarative JSX, keeping JSX minimal and readable.
+
+Change validation
+
+- Run `yarn typecheck` in the root directory to validate that the generated TypeScript code is correct

packages/desktop-client/src/components/modals/EditRuleModal.tsx

@@ -3,6 +3,8 @@ import { useTranslation } from 'react-i18next';
 
 import { theme } from '@actual-app/components/theme';
 
+import type { RuleEntity, NewRuleEntity } from 'loot-core/types/models';
+
 import {
   Modal,
   ModalCloseButton,
@@ -10,10 +12,15 @@ import {
 } from '@desktop-client/components/common/Modal';
 import { RuleEditor } from '@desktop-client/components/rules/RuleEditor';
 
+type EditRuleModalProps = {
+  rule: RuleEntity | NewRuleEntity;
+  onSave?: (rule: RuleEntity) => void;
+};
+
 export function EditRuleModal({
   rule: defaultRule,
-  onSave: originalOnSave = undefined,
-}) {
+  onSave = undefined,
+}: EditRuleModalProps) {
   const { t } = useTranslation();
 
   return (
@@ -26,7 +33,7 @@ export function EditRuleModal({
           />
           <RuleEditor
             rule={defaultRule}
-            onSave={originalOnSave}
+            onSave={onSave}
             onCancel={close}
             style={{
               maxWidth: '100%',

packages/desktop-client/src/components/rules/RuleEditor.tsx

@@ -893,7 +893,7 @@ const conditionFields = [
 
 type RuleEditorProps = {
   rule: RuleEntity | NewRuleEntity;
-  onSave: (rule: RuleEntity | NewRuleEntity) => Promise<void>;
+  onSave?: (rule: RuleEntity) => void;
   onCancel?: () => void;
   style?: CSSProperties;
 };

upcoming-release-notes/5543.md

@@ -0,0 +1,7 @@
+---
+category: Enhancements
+authors: [MatissJanis]
+---
+
+Convert EditRuleModal to TypeScript, enhancing type safety and updating save function behavior.
+