feat: fyle-architect AI support #1389
Conversation
WalkthroughThis change set introduces extensive documentation and a new VS Code extension for managing translations in Angular projects within the Fyle ecosystem. It adds comprehensive architecture, development, integration, branding, and testing guidelines, as well as operational rules for an AI assistant. The new extension provides translation management features, including hover tooltips, inline previews, intelligent suggestions, and translation editing commands. Changes
Sequence Diagram(s)sequenceDiagram
participant Developer
participant VSCode
participant TranslocoHelperExt as Fyle Transloco Helper Extension
participant FileSystem
participant AngularProject
Developer->>VSCode: Opens Angular project
VSCode->>TranslocoHelperExt: Activate on HTML/TS/JSON files
TranslocoHelperExt->>FileSystem: Scan translation JSON files
TranslocoHelperExt->>AngularProject: Analyze source files for translation keys
Developer->>TranslocoHelperExt: Hovers over translation key
TranslocoHelperExt->>FileSystem: Fetch translation values (all themes)
TranslocoHelperExt-->>Developer: Show hover tooltip with values, edit links
Developer->>TranslocoHelperExt: Toggles inline preview
TranslocoHelperExt-->>Developer: Decorate editor with live translations
Developer->>TranslocoHelperExt: Edits/creates translation key
TranslocoHelperExt->>FileSystem: Update translation JSON
TranslocoHelperExt-->>Developer: Show suggestions, validate, update UI
Estimated code review effort4 (~90 minutes) Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 18
🔭 Outside diff range comments (3)
.fyle-architect/rules/ui-element-modification.mdc (1)
6-184: Remove the duplicate guide – it already exists under.cursor/rules/ui-element-modification.mdcMaintaining two identical copies in different folders will lead to rot and contradictory edits. Keep a single canonical copy and reference it from the other namespace via a symlink or a short “see …” stub.
.cursor/rules/ui-element-modification.mdc (1)
6-184: Consolidate with.fyle-architect/rules/ui-element-modification.mdcThis file is byte-for-byte identical to the one under
.fyle-architect. Choose one location and remove the other to avoid split-brain documentation..cursor/rules/architecture.mdc (1)
1-160: Duplicate of.fyle-architect/rules/architecture.mdcTwo almost-identical architecture docs live under different roots (
.cursor/and.fyle-architect/).
This will diverge quickly and confuse readers. Pick one canonical location and remove the other.
♻️ Duplicate comments (2)
.fyle-architect/rules/testing-patterns.mdc (1)
1-5: Same duplication issueConsolidate with
.cursor/rules/testing-patterns.mdcor reference one from the other..fyle-architect/rules/project-overview.mdc (1)
78-82: Mirror the broken link fix here as wellSame missing slash as in the
.cursorcopy.-Environment files are copied from [fyle-integrations-central](mdc:https:/github.com/fylein/fyle-integrations-central) repository: +Environment files are copied from [fyle-integrations-central](mdc:https://github.com/fylein/fyle-integrations-central) repository:
🧹 Nitpick comments (43)
.cursor/rules/component-hierarchy.mdc (2)
1-5: Add meaningful front-matter metadata
descriptionandglobsare empty. Populate them so editors / tooling that rely on the Cursor ruleset can properly scope or auto-apply this guide.description: Component hierarchy & navigation cheatsheet for Angular integrations globs: - "src/app/integrations/**/*.{ts,html}" - "src/app/shared/**/*.{ts,html}"
42-51: Minor rendering issue – code fence language missingWithout a language identifier the fenced block occasionally loses monospace formatting in some Markdown renderers.
Addhtmlafter the triple back-ticks.-```html +```html.fyle-architect/rules/theme-usage-patterns.mdc (1)
1-5: Fill in front-matter fieldsSame as other docs: provide a short description and applicable globs so the rule can be auto-discovered.
.cursor/rules/testing-patterns.mdc (1)
210-213: Out-of-date npm scriptAngular CLI now exposes coverage via
ng test --code-coverage. Update the command or mention both variants..fyle-architect/rules/theme-feature-flags.mdc (1)
1-5: Front-matter completenessPopulate
description/globsas done for other rule docs for consistency..fyle-architect/rules/ui-element-modification.mdc (1)
1-5: Add meaningful front-matter metadata
descriptionandglobsare left empty. Down-stream tooling (cursor / fyle-architect) relies on these fields for rule discovery. Either fill them or drop the front-matter entirely.description: UI element modification how-to globs: - "src/app/**/*.html".cursor/rules/ui-element-modification.mdc (1)
1-5: Populate front-matter or drop itSame metadata gap as the
.fyle-architectcopy. Either supply a description + glob patterns or delete the YAML block..fyle-architect/rules/component-hierarchy.mdc (2)
1-5: Fill in missing YAML attributesAn empty
description/globsblock reduces the usefulness of editor integrations that parse these docs. Provide short text and at least one glob for affected files.
47-50: Clarify PrimeNG button varietiesYou list “Standard HTML” and “PrimeNG Buttons” but the examples only show the
<button pButton>form. Either:
- add an example of
<p-button>(element selector)- or state that only the directive form is used in this codebase.
This prevents confusion for newcomers.
.cursor/rules/theme-feature-flags.mdc (2)
1-5: Front-matter placeholders should be completedSame metadata gap – please supply a concise description/globs.
40-47: DropfeatureFlags.prefix inside the “UI/UX Feature Flags” tableThe heading already states that the table lists keys under
featureFlags.
Including the prefix inside the cell values clutters the table and is inconsistent with the “Top-Level Brand Features” section that omits it..cursor/rules/branding-theme-system.mdc (2)
1-5: Complete or remove empty front-matter fieldsFor the sake of tooling that parses these docs, add a short description and one or more globs.
40-45: Minor wording tweak – “asterisk” not “asterik”Same typo appears here; align spelling with the corrected feature-flag key.
.fyle-architect/rules/branding-theme-system.mdc (1)
1-5: Populate the front-matter for better discoverability
descriptionandglobsare left blank. Several internal tooling systems rely on these fields to index rule docs.--- -description: -globs: +description: Multi-tenant branding rules (Fyle / Capital One) +globs: ["src/app/branding/**/*"] alwaysApply: false ---.cursor/rules/fyle-architect.mdc (2)
11-15: Typos & truncated header
Guidelin,arhictect, and “mcp” are misspelled. Small but harms credibility.-## AI Assistant Guidelin +## AI Assistant Guidelines -... If arhictect mcp tool is not available ... +... If architect-mcp tool is not available ...
16-30: Two parallel rule trees (.cursor vs .fyle-architect)Both
.cursor/rules/*and.fyle-architect/rules/*contain near-identical docs. Maintaining them in lock-step will drift quickly—consider picking one canonical location and aliasing the other..cursor/rules/project-overview.mdc (2)
78-82: Broken external link
https:/github.com/...is missing a second slash afterhttps:.-Environment files are copied from [fyle-integrations-central](mdc:https:/github.com/fylein/fyle-integrations-central) repository: +Environment files are copied from [fyle-integrations-central](mdc:https://github.com/fylein/fyle-integrations-central) repository:
1-115: Duplicate content with.fyle-architect/rules/project-overview.mdcMaintaining two copies of the same overview will diverge. Consolidate into one file and symlink or reference from the other.
.fyle-architect/rules/feature-verification-methodology.mdc (1)
47-66: Preferrgover baregrepfor fuzzy searches
ripgrep(rg) is already a dev-dependency and is orders of magnitude faster than recursivegrep. Improves DX for large workspaces.-grep -r "vendor.*create" +rg "vendor.*create".fyle-architect/rules/api-integration.mdc (1)
52-66: Cache decorators shown without package note
ts-cacheableis referenced but never introduced or listed in docs. Add a short blurb or link to the library (and ensure it is pinned inpackage.json) so new contributors understand where the decorators come from..cursor/rules/development-patterns.mdc (2)
1-5: Fill in front-matter metadata
descriptionandglobsare empty. Populating these helps downstream tooling (e.g., Cursor rules engine) decide when to surface this guide.
88-111: Missingof,catchError,finalizeimports in snippetReaders copy/pasting the snippet will hit TS compile errors. Add the required RxJS imports for completeness.
-import { Subject } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; +import { Subject, of } from 'rxjs'; +import { takeUntil, catchError, finalize } from 'rxjs/operators';.fyle-architect/rules/development-patterns.mdc (2)
1-5: Duplicate document – consider DRYingThis file is byte-for-byte identical to
.cursor/rules/development-patterns.mdc. Maintaining two copies will quickly diverge. Prefer a single canonical location and reference it from the other rules folder.
1-5: Front-matter placeholdersSame metadata gap as the
.cursorcopy—adddescription/globs..cursor/rules/api-integration.mdc (3)
20-44: Include missing imports in BaseApiService example
HttpClient,ApiService,Observable,HttpParams,HttpErrorResponse,catchError,throwErrorare referenced but not imported in the snippet. Readers may copy/paste directly—adding the import block prevents friction.+import { Injectable } from '@angular/core'; +import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http'; +import { Observable, throwError } from 'rxjs'; +import { catchError } from 'rxjs/operators';
69-101: JWT interceptor snippet omits essential RxJS/Angular importsAdd
HttpInterceptor,HttpRequest,HttpHandler,HttpEvent, and RxJSObservable,throwError,catchError.Keeping snippets self-contained improves copy-and-paste experience.
1-5: Describe rule scopeBlank
description/globsreduces discoverability by the rules engine—please fill..fyle-architect/rules/integration-development.mdc (2)
1-5: Missing front-matter metadataPopulate
description/globsto allow selective rule application.
112-134: Guard return type could includeUrlTreeAngular
CanActivategenerally returnsObservable<boolean | UrlTree>. Returning onlybooleanforces separate router navigation logic elsewhere. Consider:-canActivate(): Observable<boolean> { +canActivate(): Observable<boolean | UrlTree> {and return
this.router.parseUrl(...)directly in thecatchErrorbranch..cursor/rules/common-tasks.mdc (1)
1-5: Provide brief description for ruleEmpty
description/globsagain—fill these so the rule is indexable..cursor/rules/theme-usage-patterns.mdc (3)
301-319: Leverage optional-chaining to simplify null checksThe nested checks can be collapsed using
?.and nullish coalescing for readability:- if (exposeAppConfig[currentBrand] && - exposeAppConfig[currentBrand][currentEnv]) { - return !!exposeAppConfig[currentBrand][currentEnv][integrationName]; - } - return false; +return !!exposeAppConfig[currentBrand]?.[currentEnv]?.[integrationName];
325-343: Minor micro-optimisation for array construction
Object.keys(envConfig).forEach(…)allocates an intermediate array.
Iterating withfor (const key in envConfig)(guarded withhasOwnProperty) or usingObject.entriesdirectly keeps memory lower in large configs.
422-456: Consider optional-chaining to cut repetitive guardsSeveral deep property checks in
DocumentationServicecan be collapsed:return brandingKbArticles.onboardingArticles?.[integration]?.[articleType] ?? '';Same applies to
brandingDemoVideoLinks.
This keeps the docs concise and modern..cursor/rules/integration-development.mdc (1)
1000-1011: Hard-coded navigation string undermines reusabilityIn the unit-test example the expected navigation target is
'/integrations/integration/onboarding/configuration'Hard-coding
"integration"defeats the purpose of a generic guideline.
Suggest template literal or param:- ['/integrations/integration/onboarding/configuration'] + [`/integrations/${integrationKey}/onboarding/configuration`].fyle-architect/extensions/fyle-transloco-helper/.gitignore (2)
1-2: Simplify gitignore patternsThe
/*suffix is unnecessary for directory patterns in.gitignore.-node_modules/* -out/* +node_modules/ +out/
3-3: Remove extra blank lineThere's an unnecessary extra blank line at the end of the file. One newline at EOF is sufficient.
.fyle-architect/extensions/fyle-transloco-helper/tsconfig.json (1)
20-21: Remove extra blank lineThere's an unnecessary blank line at the end of the file.
.fyle-architect/extensions/fyle-transloco-helper/src/extension.ts (3)
52-53: Remove or implement unused checksum fieldThe
checksumfield is defined but never used in the codebase. Either implement checksum validation for robust change detection or remove this field.Would you like me to implement checksum-based file change detection or create an issue to track this enhancement?
1170-1203: Consider lazy initialization for large workspacesThe
scanWorkspaceForTranslationKeysmethod scans all HTML and TypeScript files in the workspace during initialization, which could be slow for large projects.Consider implementing:
- Lazy loading - scan files only when first accessed
- Progress reporting for better UX
- Configurable file limits or patterns
Example progress reporting:
await vscode.window.withProgress({ location: vscode.ProgressLocation.Notification, title: "Analyzing translations", cancellable: true }, async (progress, token) => { progress.report({ increment: 0, message: "Scanning files..." }); // ... scanning logic with progress updates });
1221-1277: Optimize regex patterns by pre-compilingThe regex patterns in extraction methods are recreated on every call. Pre-compile them for better performance.
+// At class level +private static readonly REGEX_PATTERNS = { + HTML_INTERPOLATION: /\{\{\s*['"]([^'"]+)['"]\s*\|\s*transloco[^}]*\}\}/g, + HTML_PROPERTY_BINDING: /\[[^\]]+\]\s*=\s*['"]([^'"]+)['"]\s*\|\s*transloco/g, + HTML_TRANSLOCO_DIRECTIVE: /\[transloco\]\s*=\s*['"]([^'"]+)['"]/g, + HTML_PARAMETERIZED: /['"]([^'"]+)['"]\s*\|\s*transloco\s*:\s*\{[^}]*\}/g, + TS_SERVICE: /(?:this\.)?translocoService\.translate\s*\(\s*['"]([^'"]+)['"](?:\s*,\s*\{[^}]*\})?\s*\)/g, + TS_TRANSLOCO: /(?:\w+\.)?transloco\.translate\s*\(\s*['"]([^'"]+)['"](?:\s*,\s*\{[^}]*\})?\s*\)/g, + TS_GENERIC: /\.translate\s*\(\s*['"]([^'"]+)['"](?:\s*,\s*\{[^}]*\})?\s*\)/g +}; private extractHtmlTranslationKeys(text: string, filePath: string): void { - const interpolationMatches = [...text.matchAll(/\{\{\s*['"]([^'"]+)['"]\s*\|\s*transloco[^}]*\}\}/g)]; + const interpolationMatches = [...text.matchAll(TranslocoHoverProvider.REGEX_PATTERNS.HTML_INTERPOLATION)]; // Apply similar changes to other patterns... }.fyle-architect/extensions/fyle-transloco-helper/README.md (3)
89-96: Add a direct Marketplace link for easier onboardingMost users will expect a one-click link rather than hunting for the extension in VS Code.
Consider embedding the Marketplace URL (or a.vsixinstallation note) right inside step 1.-1. **Install the extension** in VS Code +1. **Install the extension** from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=fyle-transloco-helper) or via `Extensions: Install from VSIX…`
55-67: Provide an accessible alternative to color-codingThe Visual Features section relies solely on color/emoji cues (🔄, 🔵, etc.).
To improve accessibility for color-blind users and screen readers, add short textual labels.Example:
-🔄 Fyle: "Save User Profile" +🔄 (Fyle override): "Save User Profile"Please ensure the extension’s hover content also exposes these textual labels.
111-118: Close the README with Licensing & Contribution infoA standard license / contribution section makes the project easier to adopt and contribute to.
| `Create Translation` | Add new translation with smart suggestions | --- ## 🔮 **Coming Soon** @@ - 🔍 **Advanced Search** - Find translations across all themes - 📈 **Usage Analytics** - Track which translations are most used + +--- + +## 📝 **License** + +Released under the MIT License. See [`LICENSE`](./LICENSE) for details. + +## 🙋 **Contributing** + +Pull requests are welcome! Please read our contributing guidelines in `CONTRIBUTING.md`.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
.fyle-architect/extensions/fyle-transloco-helper/images/transloco.pngis excluded by!**/*.png.fyle-architect/extensions/fyle-transloco-helper/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (33)
.cursor/rules/api-integration.mdc(1 hunks).cursor/rules/architecture.mdc(1 hunks).cursor/rules/branding-theme-system.mdc(1 hunks).cursor/rules/common-tasks.mdc(1 hunks).cursor/rules/component-hierarchy.mdc(1 hunks).cursor/rules/development-patterns.mdc(1 hunks).cursor/rules/feature-verification-methodology.mdc(1 hunks).cursor/rules/fyle-architect.mdc(1 hunks).cursor/rules/integration-development.mdc(1 hunks).cursor/rules/project-overview.mdc(1 hunks).cursor/rules/testing-patterns.mdc(1 hunks).cursor/rules/theme-feature-flags.mdc(1 hunks).cursor/rules/theme-usage-patterns.mdc(1 hunks).cursor/rules/ui-element-modification.mdc(1 hunks).fyle-architect/extensions/fyle-transloco-helper/.gitignore(1 hunks).fyle-architect/extensions/fyle-transloco-helper/.vscodeignore(1 hunks).fyle-architect/extensions/fyle-transloco-helper/README.md(1 hunks).fyle-architect/extensions/fyle-transloco-helper/package.json(1 hunks).fyle-architect/extensions/fyle-transloco-helper/src/extension.ts(1 hunks).fyle-architect/extensions/fyle-transloco-helper/tsconfig.json(1 hunks).fyle-architect/rules/api-integration.mdc(1 hunks).fyle-architect/rules/architecture.mdc(1 hunks).fyle-architect/rules/branding-theme-system.mdc(1 hunks).fyle-architect/rules/common-tasks.mdc(1 hunks).fyle-architect/rules/component-hierarchy.mdc(1 hunks).fyle-architect/rules/development-patterns.mdc(1 hunks).fyle-architect/rules/feature-verification-methodology.mdc(1 hunks).fyle-architect/rules/integration-development.mdc(1 hunks).fyle-architect/rules/project-overview.mdc(1 hunks).fyle-architect/rules/testing-patterns.mdc(1 hunks).fyle-architect/rules/theme-feature-flags.mdc(1 hunks).fyle-architect/rules/theme-usage-patterns.mdc(1 hunks).fyle-architect/rules/ui-element-modification.mdc(1 hunks)
🧠 Learnings (2)
.fyle-architect/rules/component-hierarchy.mdc (2)
Learnt from: ashwin1111
PR: #343
File: src/app/integrations/business-central/business-central-shared/business-central-export-settings/business-central-export-settings.component.html:0-0
Timestamp: 2024-10-08T15:51:28.972Z
Learning: The user ashwin1111 has confirmed the replacement of the 'intacct' keyword with the variable targetSystemName for dynamic system naming in the business-central-export-settings.component.html file.
Learnt from: ashwin1111
PR: #343
File: src/app/integrations/business-central/business-central-shared/business-central-export-settings/business-central-export-settings.component.html:0-0
Timestamp: 2024-06-10T19:13:15.470Z
Learning: The user ashwin1111 has confirmed the replacement of the 'intacct' keyword with the variable targetSystemName for dynamic system naming in the business-central-export-settings.component.html file.
.cursor/rules/integration-development.mdc (2)
Learnt from: ashwin1111
PR: #343
File: src/app/integrations/business-central/business-central-shared/business-central-export-settings/business-central-export-settings.component.html:0-0
Timestamp: 2024-10-08T15:51:28.972Z
Learning: The user ashwin1111 has confirmed the replacement of the 'intacct' keyword with the variable targetSystemName for dynamic system naming in the business-central-export-settings.component.html file.
Learnt from: ashwin1111
PR: #343
File: src/app/integrations/business-central/business-central-shared/business-central-export-settings/business-central-export-settings.component.html:0-0
Timestamp: 2024-06-10T19:13:15.470Z
Learning: The user ashwin1111 has confirmed the replacement of the 'intacct' keyword with the variable targetSystemName for dynamic system naming in the business-central-export-settings.component.html file.
🧰 Additional context used
🧠 Learnings (2)
.fyle-architect/rules/component-hierarchy.mdc (2)
Learnt from: ashwin1111
PR: #343
File: src/app/integrations/business-central/business-central-shared/business-central-export-settings/business-central-export-settings.component.html:0-0
Timestamp: 2024-10-08T15:51:28.972Z
Learning: The user ashwin1111 has confirmed the replacement of the 'intacct' keyword with the variable targetSystemName for dynamic system naming in the business-central-export-settings.component.html file.
Learnt from: ashwin1111
PR: #343
File: src/app/integrations/business-central/business-central-shared/business-central-export-settings/business-central-export-settings.component.html:0-0
Timestamp: 2024-06-10T19:13:15.470Z
Learning: The user ashwin1111 has confirmed the replacement of the 'intacct' keyword with the variable targetSystemName for dynamic system naming in the business-central-export-settings.component.html file.
.cursor/rules/integration-development.mdc (2)
Learnt from: ashwin1111
PR: #343
File: src/app/integrations/business-central/business-central-shared/business-central-export-settings/business-central-export-settings.component.html:0-0
Timestamp: 2024-10-08T15:51:28.972Z
Learning: The user ashwin1111 has confirmed the replacement of the 'intacct' keyword with the variable targetSystemName for dynamic system naming in the business-central-export-settings.component.html file.
Learnt from: ashwin1111
PR: #343
File: src/app/integrations/business-central/business-central-shared/business-central-export-settings/business-central-export-settings.component.html:0-0
Timestamp: 2024-06-10T19:13:15.470Z
Learning: The user ashwin1111 has confirmed the replacement of the 'intacct' keyword with the variable targetSystemName for dynamic system naming in the business-central-export-settings.component.html file.
🔇 Additional comments (13)
.fyle-architect/rules/theme-usage-patterns.mdc (1)
216-231: Default-value logic contradicts flag meaningYou patch
creditCardExpense = truewhen reimbursable expenses are not allowed.
Review business rules: is the intent to force credit-card export when reimbursables are disabled, or vice-versa? Clarify with PO/PM and adjust the example accordingly..fyle-architect/rules/theme-feature-flags.mdc (1)
52-58: Table data vs flag list mismatchThe table lists
isEmployeeMappingFixedas ❌ for Fyle and ✅ for CO, but earlier documentation intheme-usage-patterns.mdcshows the inverse in sample code. Ensure both docs reflect the authoritative configuration..fyle-architect/rules/branding-theme-system.mdc (1)
116-119: Verify that the referenced npm scripts exist
npm run start:fyleandnpm run start:c1are documented, but the scripts section is not part of this PR. Make sure they’re present inpackage.jsonor update the doc accordingly..cursor/rules/fyle-architect.mdc (1)
32-50: Angular version looks speculativeAngular 18 is not released at the time of writing (current LTS is 17). If you truly target a private 18.x build, leave a note; otherwise downgrade to the current stable to avoid confusion in community docs & CI images.
.cursor/rules/feature-verification-methodology.mdc (1)
1-220: Well-structured & actionable methodologyThe layered verification checklist and red-flag section are clear and exhaustive. No issues spotted.
.fyle-architect/rules/architecture.mdc (1)
114-122: OnPush + RxWeb validator mention may mislead
@rxweb/reactive-form-validatorsis not present inpackage.json. Either add the dependency or remove the reference to avoid broken copy-paste usage..cursor/rules/common-tasks.mdc (1)
36-48: Validate Angular configurations existDocs reference
ng serve --configuration=fyle/c1. Ensure those configurations are actually defined inangular.json; otherwise commands will fail for consumers..fyle-architect/extensions/fyle-transloco-helper/.vscodeignore (1)
1-9: LGTM!The
.vscodeignorepatterns correctly exclude development files, source code, and configuration files from the extension package, following VS Code extension best practices..fyle-architect/extensions/fyle-transloco-helper/src/extension.ts (4)
1-4: LGTM!Import statements are properly organized and include only necessary VS Code API and Node.js modules.
64-167: Well-structured extension activationThe activate function properly initializes all providers, commands, and watchers, and correctly tracks them for disposal. Good job on resource management!
2188-2336: Well-designed helper classesThe
TranslationSuggestionProviderandTranslationQuickActionProviderclasses are well-structured with clear responsibilities and good separation of concerns.
581-581: No manual JSON parsing in extension.ts – suggestion not applicableThe
editTranslationanddeleteTranslationcommands in.fyle-architect/extensions/fyle-transloco-helper/src/extension.tsrely on VS Code’s command API to decode theencodeURIComponent(JSON.stringify([key]))payload and pass it directly as the handler’s parameter. There’s no explicitJSON.parsein your extension, so wrapping it in a try/catch isn’t needed here.Likely an incorrect or invalid review comment.
.fyle-architect/extensions/fyle-transloco-helper/package.json (1)
64-74: Extension configuration looks goodThe scripts, dependencies, and command contributions are properly configured for a VS Code extension.
| { | ||
| path: '{integration_name}', | ||
| loadChildren: () => import('./{integration-name}/{integration-name}.module').then(m => m.IntegrationModule) | ||
| } | ||
| ``` |
There was a problem hiding this comment.
Router path placeholder is invalid Angular syntax
Angular route paths cannot contain curly-brace placeholders.
Use a param (:integrationName) or static segment:
- path: '{integration_name}',
+ path: ':integrationName',and access the param via ActivatedRoute.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| { | |
| path: '{integration_name}', | |
| loadChildren: () => import('./{integration-name}/{integration-name}.module').then(m => m.IntegrationModule) | |
| } | |
| ``` | |
| { | |
| path: ':integrationName', | |
| loadChildren: () => import('./{integration-name}/{integration-name}.module').then(m => m.IntegrationModule) | |
| } |
🤖 Prompt for AI Agents
In .cursor/rules/integration-development.mdc around lines 64 to 68, the route
path uses curly-brace placeholders which are invalid in Angular routing. Replace
the path string '{integration_name}' with a parameterized path using colon
syntax, e.g., ':integrationName'. Update the loadChildren import path
accordingly if needed, and ensure the integration name is accessed via
ActivatedRoute parameters in the component.
| private mapNetSuiteError(error: any): { title: string, message: string } { | ||
| // NetSuite-specific error handling | ||
| // ... | ||
| } | ||
| } |
There was a problem hiding this comment.
mapNetSuiteError lacks a return path
mapNetSuiteError is declared to return { title: string; message: string } but currently returns void, leading to a compile error in a real project.
Add a default mapping or delegate to generic handler:
private mapNetSuiteError(error: any): { title: string; message: string } {
// TODO: flesh out specific codes
return {
title: 'NetSuite Error',
message: error.message || 'An error occurred with your NetSuite connection.'
};
}🤖 Prompt for AI Agents
In .cursor/rules/integration-development.mdc around lines 837 to 841, the method
mapNetSuiteError is declared to return an object with title and message but
currently does not return anything, causing a compile error. Fix this by adding
a default return statement that returns an object with a title like 'NetSuite
Error' and a message derived from error.message or a generic fallback message.
This ensures the method always returns the expected type.
.cursor/rules/testing-patterns.mdc
Outdated
| --- | ||
| description: | ||
| globs: | ||
| alwaysApply: false | ||
| --- |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Duplicate content with .fyle-architect/rules/testing-patterns.mdc
Two identical documents live in different rule folders.
Pick a single canonical location to avoid diverging updates and reader confusion.
🤖 Prompt for AI Agents
In .cursor/rules/testing-patterns.mdc lines 1 to 5, there is duplicate content
identical to .fyle-architect/rules/testing-patterns.mdc. Choose one canonical
file location for this content and remove the duplicate from the other folder to
prevent divergence and confusion. Ensure all references and dependencies are
updated to point to the single chosen file.
| | `illustrationsAllowed` | Whether to display illustrations | ✅ | ❌ | | ||
| | `isGradientAllowed` | Allow gradient styles | ✅ | ❌ | | ||
| | `isIconsInsideButtonAllowed` | Show icons inside buttons | ✅ | ❌ | | ||
| | `exposeC1Apps` | Show Capital One specific apps | ❌ | ✅ | | ||
| | `isBackgroundColorAllowed` | Allow background colors | ❌ | ✅ | | ||
| | `isAsterikAllowed` | Use asterisk for required fields | ✅ | ❌ | | ||
| | `allowIntacctHelperDoc` | Show Intacct helper docs | ✅ | ❌ | | ||
| | `showMoreDropdownInMainMenu` | Show more dropdown in menu | ✅ | ❌ | | ||
| | `loginRedirectUri` | Use redirect URI for login | ❌ | ✅ | |
There was a problem hiding this comment.
Spelling & naming consistency
isAsterikAllowed → isAsteriskAllowed
The misspelling propagates into examples; fix once and regenerate any generated typings to avoid two different keys in the config objects.
-| `isAsterikAllowed` | Use asterisk for required fields | ✅ | ❌ |
+| `isAsteriskAllowed` | Use asterisk for required fields | ✅ | ❌ |📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| | `illustrationsAllowed` | Whether to display illustrations | ✅ | ❌ | | |
| | `isGradientAllowed` | Allow gradient styles | ✅ | ❌ | | |
| | `isIconsInsideButtonAllowed` | Show icons inside buttons | ✅ | ❌ | | |
| | `exposeC1Apps` | Show Capital One specific apps | ❌ | ✅ | | |
| | `isBackgroundColorAllowed` | Allow background colors | ❌ | ✅ | | |
| | `isAsterikAllowed` | Use asterisk for required fields | ✅ | ❌ | | |
| | `allowIntacctHelperDoc` | Show Intacct helper docs | ✅ | ❌ | | |
| | `showMoreDropdownInMainMenu` | Show more dropdown in menu | ✅ | ❌ | | |
| | `loginRedirectUri` | Use redirect URI for login | ❌ | ✅ | | |
| | `illustrationsAllowed` | Whether to display illustrations | ✅ | ❌ | | |
| | `isGradientAllowed` | Allow gradient styles | ✅ | ❌ | | |
| | `isIconsInsideButtonAllowed` | Show icons inside buttons | ✅ | ❌ | | |
| | `exposeC1Apps` | Show Capital One specific apps | ❌ | ✅ | | |
| | `isBackgroundColorAllowed` | Allow background colors | ❌ | ✅ | | |
| | `isAsteriskAllowed` | Use asterisk for required fields | ✅ | ❌ | | |
| | `allowIntacctHelperDoc` | Show Intacct helper docs | ✅ | ❌ | | |
| | `showMoreDropdownInMainMenu` | Show more dropdown in menu | ✅ | ❌ | | |
| | `loginRedirectUri` | Use redirect URI for login | ❌ | ✅ | |
🤖 Prompt for AI Agents
In .cursor/rules/theme-feature-flags.mdc around lines 25 to 33, the feature flag
key `isAsterikAllowed` is misspelled and should be corrected to
`isAsteriskAllowed`. Update all occurrences of this key in the file and
regenerate any related typings or config objects to ensure consistent naming and
avoid duplicate keys.
| | Reimbursable expenses allowed | Enabled | Disabled | | ||
|
|
There was a problem hiding this comment.
Duplicate row: “Reimbursable expenses”
Reimbursable expenses is listed twice (rows 49 and 54). Remove the second or rename if it represents a different toggle (e.g., “Allow reimbursable expenses”).
🤖 Prompt for AI Agents
In .fyle-architect/rules/branding-theme-system.mdc around lines 54 to 55, there
is a duplicate row labeled "Reimbursable expenses" that also appears at line 49.
Remove the second occurrence at line 54 if it is redundant, or rename it to a
distinct label if it represents a different toggle, such as "Allow reimbursable
expenses," to avoid confusion.
| --- | ||
| description: | ||
| globs: | ||
| alwaysApply: false | ||
| --- |
There was a problem hiding this comment.
Add mandatory front-matter metadata
description and globs are left blank. Several Fyle internal tools rely on these fields to decide when a rule should be surfaced.
Fill them in to avoid the rule being silently ignored.
-description:
-globs:
+description: Common local-dev tasks, CLI shortcuts and troubleshooting cookbook for integrations-app contributors
+globs: ["**/*"]📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| --- | |
| description: | |
| globs: | |
| alwaysApply: false | |
| --- | |
| --- | |
| description: Common local-dev tasks, CLI shortcuts and troubleshooting cookbook for integrations-app contributors | |
| globs: ["**/*"] | |
| alwaysApply: false | |
| --- |
🤖 Prompt for AI Agents
In .fyle-architect/rules/common-tasks.mdc at lines 1 to 5, the front-matter
metadata fields `description` and `globs` are empty, which causes internal tools
to ignore the rule. Provide meaningful values for `description` to summarize the
rule's purpose and for `globs` to specify the file patterns this rule applies
to, ensuring the rule is properly recognized and applied.
| # Common Development Tasks & Troubleshooting | ||
|
|
||
| ## Environment Setup | ||
|
|
||
| ### Initial Setup Steps | ||
| 1. **Clone Repository**: Clone the fyle-integrations-app repository | ||
| 2. **Install Dependencies**: | ||
| ```bash | ||
| npm install | ||
| ``` | ||
| 3. **Copy Environment Files** from fyle-integrations-central: | ||
| ```bash | ||
| # Base configuration | ||
| cp ../fyle-integrations-central/app-secrets/integrations-app/environment.json src/environments/ | ||
| cp ../fyle-integrations-central/app-secrets/integrations-app/config.json src/app/branding/ | ||
|
|
||
| # Fyle-specific configuration | ||
| cp ../fyle-integrations-central/app-secrets/integrations-app/fyle-environment.json src/environments/ | ||
| cp ../fyle-integrations-central/app-secrets/integrations-app/fyle-config.json src/app/branding/ | ||
|
|
||
| # Capital One configuration | ||
| cp ../fyle-integrations-central/app-secrets/integrations-app/c1-environment.json src/environments/ | ||
| cp ../fyle-integrations-central/app-secrets/integrations-app/c1-config.json src/app/branding/ | ||
| ``` | ||
|
|
||
| 4. **Start Development Server**: | ||
| ```bash | ||
| npm start # Default (port 4200) | ||
| ``` | ||
|
|
||
| ### Multi-tenant Development | ||
| - **Fyle Branded**: | ||
| ```bash | ||
| npm run start:fyle # Port 4201 | ||
| # OR | ||
| ng serve --configuration=fyle | ||
| ``` | ||
| - **Capital One Branded**: | ||
| ```bash | ||
| npm run start:c1 # Port 4202 | ||
| # OR | ||
| ng serve --configuration=c1 | ||
| ``` | ||
|
|
||
| ### Development URLs | ||
| - **Default**: http://localhost:4200 | ||
| - **Fyle**: http://localhost:4201 | ||
| - **Capital One**: http://localhost:4202 | ||
| - **Login**: http://localhost:4200/auth/redirect (for all configurations) | ||
|
|
||
| ## Key File Locations | ||
|
|
||
| ### Configuration Files | ||
| - **Angular Config**: [angular.json](mdc:angular.json) - Build and serve configurations | ||
| - **TypeScript Config**: [tsconfig.json](mdc:tsconfig.json) - Compiler settings | ||
| - **ESLint Config**: [.eslintrc.json](mdc:.eslintrc.json) - Code quality rules | ||
| - **TailwindCSS Config**: [tailwind.config.js](mdc:tailwind.config.js) - Styling configuration | ||
| - **Package Config**: [package.json](mdc:package.json) - Dependencies and scripts | ||
|
|
||
| ### Environment Files | ||
| - **Base Environment**: [src/environments/environment.json](mdc:src/environments/environment.json) | ||
| - **Fyle Environment**: [src/environments/fyle-environment.json](mdc:src/environments/fyle-environment.json) | ||
| - **C1 Environment**: [src/environments/c1-environment.json](mdc:src/environments/c1-environment.json) | ||
| - **Environment TS**: [src/environments/environment.ts](mdc:src/environments/environment.ts) | ||
|
|
||
| ### Branding Configuration | ||
| - **Base Config**: [src/app/branding/config.json](mdc:src/app/branding/config.json) | ||
| - **Fyle Config**: [src/app/branding/fyle-config.json](mdc:src/app/branding/fyle-config.json) | ||
| - **C1 Config**: [src/app/branding/c1-config.json](mdc:src/app/branding/c1-config.json) | ||
| - **Branding Service**: [src/app/core/services/common/branding.service.ts](mdc:src/app/core/services/common/branding.service.ts) | ||
|
|
||
| ### Core Application Files | ||
| - **App Module**: [src/app/app.module.ts](mdc:src/app/app.module.ts) - Root module with providers | ||
| - **Main Routing**: [src/app/app-routing.module.ts](mdc:src/app/app-routing.module.ts) - Top-level routes | ||
| - **Global Styles**: [src/styles.scss](mdc:src/styles.scss) - Application-wide styles | ||
| - **Error Handling**: [src/app/app.error-handling.ts](mdc:src/app/app.error-handling.ts) - Global error handler | ||
| - **Main Entry**: [src/main.ts](mdc:src/main.ts) - Application bootstrap | ||
|
|
||
| ### Integration Files | ||
| - **Integration Routing**: [src/app/integrations/integrations-routing.module.ts](mdc:src/app/integrations/integrations-routing.module.ts) | ||
| - **Shared Module**: [src/app/shared/shared.module.ts](mdc:src/app/shared/shared.module.ts) | ||
| - **Core Models**: [src/app/core/models/](mdc:src/app/core/models) - Data models | ||
| - **Core Services**: [src/app/core/services/](mdc:src/app/core/services) - Business logic | ||
|
|
||
| ## Development Commands Reference | ||
|
|
||
| ### Basic Commands | ||
| ```bash | ||
| # Development | ||
| npm start # Default server (port 4200) | ||
| npm run start:fyle # Fyle-branded (port 4201) | ||
| npm run start:c1 # Capital One-branded (port 4202) | ||
|
|
||
| # Testing | ||
| npm test # Unit tests with watch | ||
| npm run unit_test:ci # CI unit tests (headless) | ||
|
|
||
| # Code Quality | ||
| npm run lint # ESLint checks | ||
| npm run lint -- --fix # Auto-fix linting issues | ||
|
|
||
| # Build | ||
| npm run build # Production build | ||
| npm run watch # Development build with watch | ||
|
|
||
| # Utilities | ||
| npm run stop # Stop development server | ||
| npm run generate:svg-sprite # Generate SVG sprite | ||
| ``` | ||
|
|
||
| ### Storybook Commands | ||
| ```bash | ||
| npm run storybook # Start Storybook (port 6006) | ||
| npm run build-storybook # Build Storybook for deployment | ||
| ``` | ||
|
|
||
| ### Build Scripts | ||
| - **Environment Setup**: [scripts/setup_env.js](mdc:scripts/setup_env.js) - Environment variable processing | ||
| - **Branding Setup**: [scripts/setup_branding_config.js](mdc:scripts/setup_branding_config.js) - Branding configuration | ||
| - **Storybook Generation**: [scripts/generate_storybook.js](mdc:scripts/generate_storybook.js) - Storybook automation | ||
|
|
||
| ## Common Development Workflows | ||
|
|
||
| ### 1. Adding a New Integration | ||
|
|
||
| 1. **Create Integration Module Structure**: | ||
| ```bash | ||
| # Create base folders | ||
| mkdir -p src/app/integrations/new-integration/{new-integration-main,new-integration-onboarding,new-integration-shared} | ||
|
|
||
| # Create main component subfolders | ||
| mkdir -p src/app/integrations/new-integration/new-integration-main/{dashboard,configuration,export-log} | ||
|
|
||
| # Create onboarding subfolders | ||
| mkdir -p src/app/integrations/new-integration/new-integration-onboarding/{connector,configuration,advanced-settings,import-settings,export-settings,onboarding-done} | ||
|
|
||
| # Create shared components folder | ||
| mkdir -p src/app/integrations/new-integration/new-integration-shared/components | ||
| ``` | ||
|
|
||
| 2. **Create Core Module Files**: | ||
| - Module file: `src/app/integrations/new-integration/new-integration.module.ts` | ||
| - Routing file: `src/app/integrations/new-integration/new-integration-routing.module.ts` | ||
| - Component files: `src/app/integrations/new-integration/new-integration.component.{ts,html,scss}` | ||
|
|
||
| 3. **Update Integration Routing** in [src/app/integrations/integrations-routing.module.ts](mdc:src/app/integrations/integrations-routing.module.ts): | ||
| ```typescript | ||
| { | ||
| path: 'new-integration', | ||
| loadChildren: () => import('./new-integration/new-integration.module').then(m => m.NewIntegrationModule) | ||
| } | ||
| ``` | ||
|
|
||
| 4. **Create Models and Services**: | ||
| ```bash | ||
| mkdir -p src/app/core/models/new-integration/{mapping,configuration,db} | ||
| mkdir -p src/app/core/services/new-integration/{core,mappings,configuration} | ||
| ``` | ||
|
|
||
| 5. **Generate Guards**: | ||
| ```bash | ||
| ng generate guard core/guard/new-integration-token | ||
| ``` | ||
|
|
||
| ### 2. Adding a New Shared Component | ||
|
|
||
| 1. **Generate Component**: | ||
| ```bash | ||
| # Create shared component | ||
| ng generate component shared/components/category/shared-component-name --change-detection=OnPush | ||
| ``` | ||
|
|
||
| 2. **Add to Shared Module** in [src/app/shared/shared.module.ts](mdc:src/app/shared/shared.module.ts): | ||
| ```typescript | ||
| declarations: [ | ||
| // Add component to declarations | ||
| SharedComponentNameComponent | ||
| ], | ||
| exports: [ | ||
| // Export component | ||
| SharedComponentNameComponent | ||
| ] | ||
| ``` | ||
|
|
||
| ### 3. Implementing OAuth Authentication | ||
|
|
||
| 1. **Update Environment Configuration**: | ||
| Add OAuth settings to [src/environments/environment.json](mdc:src/environments/environment.json): | ||
| ```json | ||
| { | ||
| "integration_name_oauth_client_id": "client_id_value", | ||
| "integration_name_oauth_redirect_uri": "http://localhost:4200/oauth/integration-name/callback", | ||
| "integration_name_authorize_uri": "https://integration-auth-url.com/oauth/authorize" | ||
| } | ||
| ``` | ||
|
|
||
| 2. **Create OAuth Service**: | ||
| ```typescript | ||
| @Injectable({ | ||
| providedIn: 'root' | ||
| }) | ||
| export class IntegrationOAuthService { | ||
| constructor( | ||
| private apiService: ApiService, | ||
| private windowReference: WindowReference, | ||
| private router: Router | ||
| ) { } | ||
|
|
||
| connectIntegration(): void { | ||
| const authUri = this.getAuthUri(); | ||
| this.windowReference.nativeWindow.open(authUri, '_blank'); | ||
| } | ||
|
|
||
| private getAuthUri(): string { | ||
| const redirectUri = encodeURIComponent(environment.integration_name_oauth_redirect_uri); | ||
| const clientId = environment.integration_name_oauth_client_id; | ||
| const scope = encodeURIComponent('scope1 scope2'); | ||
|
|
||
| return `${environment.integration_name_authorize_uri}?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=code`; | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| 3. **Create OAuth Callback Component**: | ||
| Update [src/app/oauth/oauth-routing.module.ts](mdc:src/app/oauth/oauth-routing.module.ts): | ||
| ```typescript | ||
| { | ||
| path: 'integration-name/callback', | ||
| component: IntegrationOAuthCallbackComponent | ||
| } | ||
| ``` | ||
|
|
||
| ### 4. Adding a New Mapping Feature | ||
|
|
||
| 1. **Create Data Models**: | ||
| ```typescript | ||
| // src/app/core/models/integration-name/mapping/mapping.model.ts | ||
| export interface MappingModel { | ||
| id: number; | ||
| source_value: string; | ||
| destination_value: string; | ||
| created_at: Date; | ||
| updated_at: Date; | ||
| } | ||
|
|
||
| export interface SourceField { | ||
| value: string; | ||
| name: string; | ||
| } | ||
|
|
||
| export interface DestinationField { | ||
| value: string; | ||
| name: string; | ||
| } | ||
| ``` | ||
|
|
||
| 2. **Create Mapping Service**: | ||
| ```typescript | ||
| // src/app/core/services/integration-name/mappings/mapping.service.ts | ||
| @Injectable({ | ||
| providedIn: 'root' | ||
| }) | ||
| export class MappingService { | ||
| constructor( | ||
| private apiService: ApiService | ||
| ) { } | ||
|
|
||
| getMappings(): Observable<MappingModel[]> { | ||
| return this.apiService.get('/mappings/'); | ||
| } | ||
|
|
||
| getSourceFields(): Observable<SourceField[]> { | ||
| return this.apiService.get('/mappings/source-fields/'); | ||
| } | ||
|
|
||
| getDestinationFields(): Observable<DestinationField[]> { | ||
| return this.apiService.get('/mappings/destination-fields/'); | ||
| } | ||
|
|
||
| createMapping(mappingData: Partial<MappingModel>): Observable<MappingModel> { | ||
| return this.apiService.post('/mappings/', mappingData); | ||
| } | ||
|
|
||
| deleteMapping(id: number): Observable<void> { | ||
| return this.apiService.delete(`/mappings/${id}/`); | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| 3. **Create Mapping Component**: | ||
| ```typescript | ||
| // src/app/integrations/integration-name/integration-name-main/mappings/mappings.component.ts | ||
| @Component({ | ||
| selector: 'app-mappings', | ||
| templateUrl: './mappings.component.html', | ||
| styleUrls: ['./mappings.component.scss'], | ||
| changeDetection: ChangeDetectionStrategy.OnPush | ||
| }) | ||
| export class MappingsComponent implements OnInit, OnDestroy { | ||
| mappings$ = new BehaviorSubject<MappingModel[]>([]); | ||
| sourceFields$ = new BehaviorSubject<SourceField[]>([]); | ||
| destinationFields$ = new BehaviorSubject<DestinationField[]>([]); | ||
| isLoading = false; | ||
|
|
||
| private destroy$ = new Subject<void>(); | ||
|
|
||
| constructor( | ||
| private mappingService: MappingService, | ||
| private cdr: ChangeDetectorRef | ||
| ) { } | ||
|
|
||
| ngOnInit(): void { | ||
| this.loadData(); | ||
| } | ||
|
|
||
| ngOnDestroy(): void { | ||
| this.destroy$.next(); | ||
| this.destroy$.complete(); | ||
| } | ||
|
|
||
| // Component methods... | ||
| } | ||
| ``` | ||
|
|
||
| ### 5. Creating a Dynamic Form | ||
|
|
||
| 1. **Define Form Model**: | ||
| ```typescript | ||
| interface DynamicField { | ||
| key: string; | ||
| label: string; | ||
| type: 'text' | 'select' | 'checkbox' | 'radio'; | ||
| required: boolean; | ||
| options?: { label: string; value: any }[]; | ||
| validators?: ValidatorFn[]; | ||
| defaultValue?: any; | ||
| } | ||
| ``` | ||
|
|
||
| 2. **Create Form Component**: | ||
| ```typescript | ||
| @Component({ | ||
| selector: 'app-dynamic-form', | ||
| template: ` | ||
| <div [formGroup]="form"> | ||
| <div *ngFor="let field of fields"> | ||
| <div [ngSwitch]="field.type"> | ||
| <div *ngSwitchCase="'text'"> | ||
| <label>{{ field.label }}</label> | ||
| <input type="text" [formControlName]="field.key" pInputText> | ||
| </div> | ||
| <div *ngSwitchCase="'select'"> | ||
| <label>{{ field.label }}</label> | ||
| <p-dropdown [formControlName]="field.key" [options]="field.options"></p-dropdown> | ||
| </div> | ||
| <!-- Other field types --> | ||
| </div> | ||
| <div *ngIf="form.get(field.key).invalid && form.get(field.key).touched" class="text-red-500"> | ||
| Field is invalid | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ` | ||
| }) | ||
| export class DynamicFormComponent implements OnInit { | ||
| @Input() fields: DynamicField[] = []; | ||
| @Output() formChange = new EventEmitter<FormGroup>(); | ||
|
|
||
| form: FormGroup; | ||
|
|
||
| constructor(private fb: FormBuilder) {} | ||
|
|
||
| ngOnInit(): void { | ||
| this.createForm(); | ||
| } | ||
|
|
||
| private createForm(): void { | ||
| const formControls = {}; | ||
|
|
||
| this.fields.forEach(field => { | ||
| formControls[field.key] = [ | ||
| field.defaultValue ?? '', | ||
| field.validators || [] | ||
| ]; | ||
| }); | ||
|
|
||
| this.form = this.fb.group(formControls); | ||
| this.formChange.emit(this.form); | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## Debugging & Troubleshooting | ||
|
|
||
| ### Common Issues & Solutions | ||
|
|
||
| #### 1. Environment Configuration Issues | ||
| **Problem**: "Environment file not found" or API calls failing | ||
| **Solution**: | ||
| - Ensure environment files are copied from fyle-integrations-central | ||
| - Check API URLs in environment.json match your local setup | ||
| - Verify branding config.json exists for the selected configuration | ||
|
|
||
| #### 2. Authentication Issues | ||
| **Problem**: "Unauthorized" errors or login redirects | ||
| **Solution**: | ||
| - Clear browser localStorage: `localStorage.clear()` | ||
| - Check JWT token in localStorage | ||
| - Verify Fyle client ID in environment configuration | ||
| - Ensure auth service is running on correct port | ||
|
|
||
| Steps to debug: | ||
| 1. Open browser DevTools (F12) and check Console for error messages | ||
| 2. In Application tab, examine LocalStorage for `access_token` value | ||
| 3. Verify auth configuration in environment file: | ||
| ```typescript | ||
| // Debugging auth configuration | ||
| console.log('Auth config:', { | ||
| clientId: environment.fyle_client_id, | ||
| redirectUri: environment.fyle_callback_uri, | ||
| serverUrl: environment.api_url | ||
| }); | ||
| ``` | ||
|
|
||
| #### 3. CORS Issues | ||
| **Problem**: Cross-origin request blocked | ||
| **Solution**: | ||
| - Check API URLs in environment configuration | ||
| - Ensure backend services are running | ||
| - Verify CORS configuration on backend services | ||
|
|
||
| Debugging steps: | ||
| 1. Check Network tab in DevTools for failed requests with CORS errors | ||
| 2. Verify API URL configuration: | ||
| ```typescript | ||
| console.log('API URLs:', { | ||
| apiUrl: environment.api_url, | ||
| fyleApiUrl: environment.fyle_api_url | ||
| }); | ||
| ``` | ||
|
|
||
| #### 4. Module Loading Issues | ||
| **Problem**: "Cannot resolve module" errors | ||
| **Solution**: | ||
| - Run `npm install` to ensure all dependencies are installed | ||
| - Clear Angular cache: `rm -rf .angular/cache` | ||
| - Check import paths in TypeScript files | ||
|
|
||
| Error patterns to look for: | ||
| ``` | ||
| ERROR in ./src/app/module-name/service.ts | ||
| Module not found: Error: Can't resolve 'some-package' in '/path/to/project' | ||
| ``` | ||
|
|
||
| #### 5. Styling Issues | ||
| **Problem**: Styles not applying or TailwindCSS classes not working | ||
| **Solution**: | ||
| - Check [tailwind.config.js](mdc:tailwind.config.js) configuration | ||
| - Verify CSS variables are defined in branding configurations | ||
| - Ensure PrimeNG styles are imported correctly | ||
|
|
||
| Common style debugging techniques: | ||
| ```typescript | ||
| // Check if TailwindCSS is working | ||
| const element = document.createElement('div'); | ||
| element.classList.add('bg-red-500', 'text-white', 'p-4'); | ||
| element.innerHTML = 'TailwindCSS Test'; | ||
| document.body.appendChild(element); | ||
|
|
||
| // Test CSS variables | ||
| console.log('CSS Variable test:', | ||
| getComputedStyle(document.documentElement).getPropertyValue('--primary-color')); | ||
| ``` | ||
|
|
||
| #### 6. Build Issues | ||
| **Problem**: Build failures or compilation errors | ||
| **Solution**: | ||
| - Check TypeScript errors: `npx tsc --noEmit` | ||
| - Verify all imports are correct | ||
| - Check [tsconfig.json](mdc:tsconfig.json) configuration | ||
| - Clear node_modules and reinstall: `rm -rf node_modules && npm install` | ||
|
|
||
| #### 7. API Integration Issues | ||
| **Problem**: API calls failing or returning unexpected data | ||
| **Solution**: | ||
| - Check Network tab in DevTools for response details | ||
| - Verify JWT token is valid and not expired | ||
| - Check HTTP headers and request parameters | ||
| - Add detailed error logging: | ||
|
|
||
| ```typescript | ||
| // Enhanced error logging | ||
| this.apiService.getData().pipe( | ||
| catchError(error => { | ||
| console.error('API Error Details:', { | ||
| status: error.status, | ||
| statusText: error.statusText, | ||
| url: error.url, | ||
| error: error.error, | ||
| message: error.message | ||
| }); | ||
| return throwError(() => error); | ||
| }) | ||
| ).subscribe(); | ||
| ``` | ||
|
|
||
| #### 8. Performance Issues | ||
| **Problem**: Slow rendering or unresponsive UI | ||
| **Solution**: | ||
| - Use Chrome Performance tab to profile app | ||
| - Check for memory leaks (improper unsubscribing) | ||
| - Use OnPush change detection | ||
| - Add trackBy to ngFor loops: | ||
|
|
||
| ```html | ||
| <div *ngFor="let item of items; trackBy: trackById"> | ||
| {{ item.name }} | ||
| </div> | ||
| ``` | ||
|
|
||
| ```typescript | ||
| trackById(index: number, item: any): number { | ||
| return item.id; | ||
| } | ||
| ``` | ||
|
|
||
| #### 9. Integration-specific Issues | ||
|
|
||
| **QBO Integration Issues**: | ||
| - OAuth redirect not working: Check QBO OAuth configuration in environment | ||
| - Connection errors: Verify QBO credentials and permissions | ||
| - Invalid realm: Ensure QBO realm ID is correct | ||
|
|
||
| **NetSuite Integration Issues**: | ||
| - Token authentication: Verify NetSuite token and user credentials | ||
| - Subsidiary errors: Check NetSuite subsidiary configuration | ||
| - Custom segment not appearing: Verify segment configuration in NetSuite | ||
|
|
||
| **Xero Integration Issues**: | ||
| - OAuth errors: Check Xero app configuration and callback URLs | ||
| - Multiple organization selection: Ensure proper organization ID is stored | ||
|
|
||
| ### Development Tools | ||
|
|
||
| #### Browser Extensions | ||
| - **Angular DevTools**: For component inspection and debugging | ||
| - **Redux DevTools**: For state management debugging (if applicable) | ||
| - **Sentry**: Error tracking in development | ||
|
|
||
| #### IDE Setup | ||
| - **VSCode Extensions**: Angular Language Service, ESLint, Prettier | ||
| - **Debugging**: Use browser developer tools for debugging | ||
| - **Network Inspection**: Monitor API calls in Network tab | ||
|
|
||
| #### Logging & Monitoring | ||
| - **Console Logging**: Use `console.error()` for debugging (allowed by ESLint) | ||
| - **Sentry Integration**: Automatic error reporting in development | ||
| - **Performance Monitoring**: Angular DevTools for performance analysis | ||
|
|
||
| ## Testing Guidelines | ||
|
|
||
| ### Running Tests | ||
| ```bash | ||
| # Unit tests with watch mode | ||
| npm test | ||
|
|
||
| # CI tests (headless Chrome) | ||
| npm run unit_test:ci | ||
|
|
||
| # Test with coverage | ||
| npm test -- --code-coverage | ||
|
|
||
| # Run specific test file | ||
| npm test -- --include="**/component-name.spec.ts" | ||
| ``` | ||
|
|
||
| ### Test File Locations | ||
| - **Component Tests**: `*.component.spec.ts` files alongside components | ||
| - **Service Tests**: `*.service.spec.ts` files alongside services | ||
| - **Mock Data**: [src/app/core/services/mock.data.ts](mdc:src/app/core/services/mock.data.ts) | ||
| - **Test Configuration**: [karma.conf.js](mdc:karma.conf.js) | ||
|
|
||
| ### Coverage Reports | ||
| 1. Run tests with coverage: `npm test -- --code-coverage` | ||
| 2. Open coverage report: `coverage/index.html` | ||
| 3. Right-click and select "Reveal in Finder" (macOS) or equivalent | ||
| 4. Open in browser to view detailed coverage | ||
|
|
||
| ### Mocking Services for Tests | ||
| ```typescript | ||
| // Basic service mock | ||
| const mockService = jasmine.createSpyObj('ServiceName', ['method1', 'method2']); | ||
| mockService.method1.and.returnValue(of({ data: 'mock data' })); | ||
|
|
||
| // Mock with dynamic response | ||
| mockService.method2.and.callFake((param: string) => { | ||
| if (param === 'valid') { | ||
| return of({ success: true }); | ||
| } else { | ||
| return throwError(() => new Error('Invalid parameter')); | ||
| } | ||
| }); | ||
|
|
||
| // Mock HTTP with HttpTestingController | ||
| let httpMock: HttpTestingController; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| imports: [HttpClientTestingModule], | ||
| providers: [YourService] | ||
| }); | ||
| service = TestBed.inject(YourService); | ||
| httpMock = TestBed.inject(HttpTestingController); | ||
| }); | ||
|
|
||
| it('should call API and return data', () => { | ||
| const mockData = { id: 1, name: 'test' }; | ||
|
|
||
| service.getData().subscribe(result => { | ||
| expect(result).toEqual(mockData); | ||
| }); | ||
|
|
||
| const req = httpMock.expectOne('api/data'); | ||
| expect(req.request.method).toBe('GET'); | ||
| req.flush(mockData); | ||
| }); | ||
| ``` | ||
|
|
||
| ## Build & Deployment | ||
|
|
||
| ### Build Process | ||
| The build process includes several automated steps: | ||
| 1. **Environment Setup**: Process environment variables | ||
| 2. **Branding Configuration**: Set up brand-specific configs | ||
| 3. **Angular Build**: Compile and bundle the application | ||
| 4. **Source Maps**: Generate source maps for Sentry | ||
|
|
||
| ### Build Configurations | ||
| - **Development**: Optimized for development with source maps | ||
| - **Production**: Optimized for production with minification | ||
| - **Fyle**: Fyle-branded build with specific configurations | ||
| - **C1**: Capital One-branded build with specific configurations | ||
|
|
||
| ### Deployment Preparation | ||
| ```bash | ||
| # Production build | ||
| npm run build | ||
|
|
||
| # Check bundle sizes | ||
| npx webpack-bundle-analyzer dist/fyle-integrations-app/main.*.js | ||
|
|
||
| # Test production build locally | ||
| npx http-server dist/fyle-integrations-app | ||
| ``` | ||
|
|
||
| ### Production Build Verification Checklist | ||
| 1. **Bundle Size**: Check main.js size is reasonable (<1MB ideally) | ||
| 2. **Environment Config**: Verify production URLs are correct | ||
| 3. **Branding**: Ensure correct branding is applied | ||
| 4. **Basic Functionality**: Test login and core features | ||
| 5. **Performance**: Verify load time is acceptable | ||
| 6. **Error Tracking**: Confirm Sentry is reporting errors correctly | ||
|
|
||
| ## Code Quality & Standards | ||
|
|
||
| ### Linting | ||
| ```bash | ||
| # Run ESLint | ||
| npm run lint | ||
|
|
||
| # Fix auto-fixable issues | ||
| npm run lint -- --fix | ||
|
|
||
| # Check specific files | ||
| npx eslint src/app/component-name.ts | ||
| ``` | ||
|
|
||
| ### Code Formatting | ||
| - **EditorConfig**: [.editorconfig](mdc:.editorconfig) - Consistent formatting rules | ||
| - **ESLint**: Automatic formatting and code quality checks | ||
| - **Prettier**: (if configured) Additional formatting rules | ||
|
|
||
| ### Git Workflow | ||
| - **Husky Hooks**: Pre-commit linting and formatting checks | ||
| - **Commit Messages**: Follow conventional commit format | ||
| - **Branch Naming**: Use descriptive branch names | ||
| - **Pull Requests**: Required for code review | ||
|
|
||
| ## Performance Monitoring | ||
|
|
||
| ### Bundle Analysis | ||
| ```bash | ||
| # Analyze bundle size | ||
| npm run build -- --stats-json | ||
| npx webpack-bundle-analyzer dist/fyle-integrations-app/stats.json | ||
| ``` | ||
|
|
||
| ### Performance Optimization | ||
| - **Lazy Loading**: All integration modules are lazy-loaded | ||
| - **OnPush Strategy**: Used throughout for change detection optimization | ||
| - **Caching**: API responses cached using ts-cacheable | ||
| - **Tree Shaking**: Unused code eliminated during build | ||
|
|
||
| ### Monitoring Tools | ||
| - **Angular DevTools**: Performance profiling | ||
| - **Lighthouse**: Web performance auditing | ||
| - **Sentry**: Runtime performance monitoring | ||
|
|
||
| ## Coding FAQs | ||
|
|
||
| ### How to add a new environment variable? | ||
| 1. Add to environment files: `environment.json`, `fyle-environment.json`, etc. | ||
| 2. Update environment interface in [src/environments/environment.ts](mdc:src/environments/environment.ts) | ||
| 3. Use in code via `environment.yourVariableName` | ||
|
|
||
| ### How to add a new route with guard? | ||
| ```typescript | ||
| // In {feature}-routing.module.ts | ||
| const routes: Routes = [ | ||
| { | ||
| path: 'feature-path', | ||
| component: FeatureComponent, | ||
| canActivate: [AuthGuard, FeatureGuard] | ||
| } | ||
| ]; | ||
| ``` | ||
|
|
||
| ### How to create a custom form validator? | ||
| ```typescript | ||
| // Custom validator function | ||
| export function customValidator(): ValidatorFn { | ||
| return (control: AbstractControl): ValidationErrors | null => { | ||
| const value = control.value; | ||
|
|
||
| if (!value) { | ||
| return null; | ||
| } | ||
|
|
||
| // Custom validation logic | ||
| if (value.includes('invalid')) { | ||
| return { custom: { message: 'Value contains invalid text' } }; | ||
| } | ||
|
|
||
| return null; | ||
| }; | ||
| } | ||
|
|
||
| // Usage in form | ||
| this.form = this.formBuilder.group({ | ||
| field: ['', [Validators.required, customValidator()]] | ||
| }); | ||
| ``` | ||
|
|
||
| ### How to implement API caching? | ||
| ```typescript | ||
| import { Cacheable, CacheEvict } from 'ts-cacheable'; | ||
|
|
||
| // Cacheable GET method | ||
| @Cacheable({ | ||
| maxAge: 5 * 60 * 1000 // 5 minutes | ||
| }) | ||
| getData(): Observable<Data[]> { | ||
| return this.http.get<Data[]>('/api/data'); | ||
| } | ||
|
|
||
| // Cache eviction on update | ||
| @CacheEvict({ | ||
| isAll: false, | ||
| fnParams: (id) => [id] | ||
| }) | ||
| updateData(id: number, data: Partial<Data>): Observable<Data> { | ||
| return this.http.put<Data>(`/api/data/${id}`, data); | ||
| } | ||
|
|
||
| // Clear all cache | ||
| @CacheEvict({ isAll: true }) | ||
| clearAllData(): Observable<void> { | ||
| return this.http.post<void>('/api/clear', {}); | ||
| } | ||
| ``` | ||
|
|
||
| ### How to handle multi-tenant branding? | ||
| ```typescript | ||
| // In component | ||
| constructor(private brandingService: BrandingService) {} | ||
|
|
||
| ngOnInit(): void { | ||
| this.currentBrand = this.brandingService.getBrand(); | ||
| this.brandingConfig = this.brandingService.getBrandingConfig(); | ||
|
|
||
| // Use branding config | ||
| this.logoUrl = this.brandingConfig.logoUrl; | ||
| this.primaryColor = this.brandingConfig.colors.primary; | ||
| } | ||
| ``` | ||
|
|
||
| ### How to implement a global error handler? | ||
| ```typescript | ||
| // Custom error handler | ||
| @Injectable() | ||
| export class GlobalErrorHandler implements ErrorHandler { | ||
| constructor( | ||
| private messageService: MessageService, | ||
| private sentryService: SentryService | ||
| ) {} | ||
|
|
||
| handleError(error: any): void { | ||
| // Log to Sentry | ||
| this.sentryService.captureException(error); | ||
|
|
||
| // Show user friendly message | ||
| this.messageService.add({ | ||
| severity: 'error', | ||
| summary: 'Error', | ||
| detail: 'An unexpected error occurred. Please try again later.' | ||
| }); | ||
|
|
||
| // Console error (for development) | ||
| console.error('Global error handler caught:', error); | ||
| } | ||
| } | ||
|
|
||
| // Register in app.module.ts | ||
| providers: [ | ||
| { provide: ErrorHandler, useClass: GlobalErrorHandler } | ||
| ] | ||
| ``` | ||
|
|
||
|
|
||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Document is too monolithic – split for maintainability
At ~800 lines the guide is hard to scan and will age unevenly (e.g. Debugging vs Storybook updates).
Recommend extracting into focused files (environment-setup.mdc, troubleshooting.mdc, testing.mdc, etc.) and auto-generate a TOC from rule metadata.
🤖 Prompt for AI Agents
In the file .fyle-architect/rules/common-tasks.mdc spanning lines 6 to 835, the
document is excessively long and monolithic, making it difficult to navigate and
maintain. To fix this, split the content into multiple smaller, focused markdown
files such as environment-setup.mdc, troubleshooting.mdc, testing.mdc, etc.,
each covering a specific topic. Then update the main documentation to include or
link these separate files and implement an auto-generated table of contents
(TOC) based on rule metadata to improve discoverability and maintainability.
| --- | ||
| description: | ||
| globs: | ||
| alwaysApply: false | ||
| --- |
There was a problem hiding this comment.
Missing front-matter metadata
Same issue as above – populate description and globs or the rule will never be picked up by the architect CLI.
🤖 Prompt for AI Agents
In .fyle-architect/rules/feature-verification-methodology.mdc at lines 1 to 5,
the front-matter metadata fields `description` and `globs` are empty, causing
the rule to be ignored by the architect CLI. Populate the `description` field
with a brief summary of the rule's purpose and the `globs` field with
appropriate file patterns that this rule should apply to, ensuring the rule is
recognized and executed by the CLI.
| ```typescript | ||
| // Business Logic: Use specific feature flags | ||
| if (!this.brandingFeatureConfig.featureFlags.exportSettings.isReimbursableExpensesAllowed) { | ||
| this.exportSettingsForm.patchValue({ | ||
| creditCardExpense: true | ||
| }); | ||
| } | ||
|
|
||
| // UI Rendering: Use feature flags in templates | ||
| <div *ngIf="brandingFeatureConfig.featureFlags.exportSettings.reimbursableExpenses" | ||
| class="reimbursable-options"> | ||
| <!-- Reimbursable expenses configuration --> | ||
| </div> | ||
|
|
||
| // Component Property: Use feature flags for conditional properties | ||
| get showNameInJournalOptions(): boolean { | ||
| return this.brandingFeatureConfig.featureFlags.exportSettings.nameInJournalEntry; | ||
| } | ||
| ``` |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Flag naming / semantics drift
isReimbursableExpensesAllowed is used to disable reimbursable options but the flag name suggests the opposite.
Either rename the flag or invert the condition to avoid future misuse.
-if (!this.brandingFeatureConfig.featureFlags.exportSettings.isReimbursableExpensesAllowed) {
+if (!this.brandingFeatureConfig.featureFlags.exportSettings.reimbursableExpenses) {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ```typescript | |
| // Business Logic: Use specific feature flags | |
| if (!this.brandingFeatureConfig.featureFlags.exportSettings.isReimbursableExpensesAllowed) { | |
| this.exportSettingsForm.patchValue({ | |
| creditCardExpense: true | |
| }); | |
| } | |
| // UI Rendering: Use feature flags in templates | |
| <div *ngIf="brandingFeatureConfig.featureFlags.exportSettings.reimbursableExpenses" | |
| class="reimbursable-options"> | |
| <!-- Reimbursable expenses configuration --> | |
| </div> | |
| // Component Property: Use feature flags for conditional properties | |
| get showNameInJournalOptions(): boolean { | |
| return this.brandingFeatureConfig.featureFlags.exportSettings.nameInJournalEntry; | |
| } | |
| ``` | |
| // Business Logic: Use specific feature flags | |
| -if (!this.brandingFeatureConfig.featureFlags.exportSettings.isReimbursableExpensesAllowed) { | |
| +if (!this.brandingFeatureConfig.featureFlags.exportSettings.reimbursableExpenses) { | |
| this.exportSettingsForm.patchValue({ | |
| creditCardExpense: true | |
| }); | |
| } | |
| // UI Rendering: Use feature flags in templates | |
| <div *ngIf="brandingFeatureConfig.featureFlags.exportSettings.reimbursableExpenses" | |
| class="reimbursable-options"> | |
| <!-- Reimbursable expenses configuration --> | |
| </div> | |
| // Component Property: Use feature flags for conditional properties | |
| get showNameInJournalOptions(): boolean { | |
| return this.brandingFeatureConfig.featureFlags.exportSettings.nameInJournalEntry; | |
| } |
🤖 Prompt for AI Agents
In .fyle-architect/rules/theme-usage-patterns.mdc around lines 34 to 52, the
feature flag named isReimbursableExpensesAllowed is used in a negated condition
to disable reimbursable options, which conflicts with its positive naming. To
fix this, either rename the flag to something like
isReimbursableExpensesDisabled to match its usage or invert the condition to use
the flag positively by removing the negation, ensuring the flag name and its
usage semantics align clearly.
| @@ -0,0 +1,117 @@ | |||
| # Fyle Transloco Helper | |||
|
|
|||
There was a problem hiding this comment.
add instructions to setup in local
| cp ../fyle-integrations-central/app-secrets/integrations-app/environment.json src/environments/ | ||
| cp ../fyle-integrations-central/app-secrets/integrations-app/config.json src/app/branding/ | ||
|
|
||
| # Fyle-specific configuration | ||
| cp ../fyle-integrations-central/app-secrets/integrations-app/fyle-environment.json src/environments/ | ||
| cp ../fyle-integrations-central/app-secrets/integrations-app/fyle-config.json src/app/branding/ | ||
|
|
||
| # Capital One configuration | ||
| cp ../fyle-integrations-central/app-secrets/integrations-app/c1-environment.json src/environments/ | ||
| cp ../fyle-integrations-central/app-secrets/integrations-app/c1-config.json src/app/branding/ |
There was a problem hiding this comment.
this is outdated after transloco changes, we should update this and readme
| - **TailwindCSS Config**: [tailwind.config.js](mdc:tailwind.config.js) - Styling configuration | ||
| - **Package Config**: [package.json](mdc:package.json) - Dependencies and scripts | ||
|
|
||
| ### Environment Files |
| mkdir -p src/app/integrations/new-integration/{new-integration-main,new-integration-onboarding,new-integration-shared} | ||
|
|
||
| # Create main component subfolders | ||
| mkdir -p src/app/integrations/new-integration/new-integration-main/{dashboard,configuration,export-log} | ||
|
|
||
| # Create onboarding subfolders | ||
| mkdir -p src/app/integrations/new-integration/new-integration-onboarding/{connector,configuration,advanced-settings,import-settings,export-settings,onboarding-done} | ||
|
|
||
| # Create shared components folder | ||
| mkdir -p src/app/integrations/new-integration/new-integration-shared/components |
There was a problem hiding this comment.
update these with angular commands
| export interface SourceField { | ||
| value: string; | ||
| name: string; | ||
| } | ||
|
|
||
| export interface DestinationField { | ||
| value: string; | ||
| name: string; |
| - Provide text alternatives for non-text content | ||
|
|
||
|
|
||
|
|
There was a problem hiding this comment.
see if it's useful, else remove
| - Complex Integration (NetSuite): 5-8 weeks | ||
| - Feature Additions: 1-2 weeks per feature | ||
| - Testing and QA: 1-2 weeks | ||
|
|
There was a problem hiding this comment.
review and remove unnecessary parts
| <label>Reimbursable Expense</label> | ||
| <p-inputSwitch formControlName="reimbursableExpense"></p-inputSwitch> | ||
| </div> | ||
|
|
There was a problem hiding this comment.
theme, usage, feature flag, branding - if we can combine / have less files that would be good
| @@ -0,0 +1,183 @@ | |||
| --- | |||
| @@ -0,0 +1,9 @@ | |||
| .vscode/** | |||
vignesh05904
changed the title
🔁 Code Duplication Report - Angular
📊 No significant change in code duplication. |
|
2 participants
Description
fyle-architect AI support
Clickup
https://app.clickup.com
Summary by CodeRabbit
New Features
Documentation
Chores
.gitignore/.vscodeignorefiles..gitignoreto exclude specific directories from version control.