[PLA-1758] fix fuel tank

[zlayine]

PR Type

enhancement, bug_fix

---

Description

• Updated the userId field to be optional in ConsumptionFuelTankSlideover.vue, enhancing flexibility in user ID handling.
• Refactored and enhanced the validation schemas in MutateFuelTankSlideover.vue, including changes to boolean fields and array handling for whitelistedCallers.
• Improved data formatting for token IDs and caller lists, ensuring better data integrity and error handling.

---

Changes walkthrough 📝

Relevant files

Enhancement

ConsumptionFuelTankSlideover.vue Update validation schema for ConsumptionFuelTank                  resources/js/components/slideovers/fueltank/ConsumptionFuelTankSlideover.vue Changed the schema for userId from required to not required. +1/-1      MutateFuelTankSlideover.vue Refactor and enhance validation in MutateFuelTankSlideover resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue Introduced new schema imports for boolean and string validations. Updated the validation schema for various fields like tankId, providesDeposit, and whitelistedCallers. Enhanced data formatting for whitelistedCallers and tokenId in the mutateFuelTank function. +19/-9

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[github-actions]

PR Description updated to latest commit (407f9d0)

[github-actions]

PR Review 🔍

⏱️ Estimated effort to review [1-5]	2, because the changes are localized to two Vue component files with specific updates to validation schemas and data formatting. The changes are straightforward and well-documented, making the review process less complex.
🧪 Relevant tests	No
⚡ Possible issues	Possible Bug: The formatData function is used to format whitelistedCallers but its implementation is not shown in the PR. If this function does not handle data correctly, it could lead to incorrect data being sent to the server.
🔒 Security concerns	No

Code feedback:

---

relevant file	resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue
suggestion	Ensure that the formatData function properly handles different data types and formats, especially since it is used to format user inputs which can be unpredictable. Consider adding error handling or validation within this function to prevent malformed data submissions. [important]
relevant line	whitelistedCallers: formatData(whitelistedCallers.value.map((item: any) => item.caller)),

---

relevant file	resources/js/components/slideovers/fueltank/ConsumptionFuelTankSlideover.vue
suggestion	Since userId has been changed to not required, ensure that all backend services that consume this field handle its absence correctly. This might involve updating backend validation logic or database schema to accept null values. [important]
relevant line	userId: stringNotRequiredSchema,

---

relevant file	resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue
suggestion	For the array validation of whitelistedCallers, ensure that the schema correctly handles cases where the array might be empty or contain invalid types. This might involve adding more specific validation rules or default values. [medium]
relevant line	whitelistedCallers: yup.array().of(

---

relevant file	resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue
suggestion	Consider adding a cleanup or removal function for whitelistedCallers to manage state properly when callers are removed or modified. This function can help maintain the integrity of the state, especially in complex user interactions. [medium]
relevant line	whitelistedCallers: yup.array().of(

---

[github-actions]

PR Code Suggestions ✨

Category	Suggestions
Enhancement	Add a type error message to the userId schema for clearer validation errors. Consider adding a type error message to the userId schema to maintain consistency with other fields and provide clearer error feedback. resources/js/components/slideovers/fueltank/ConsumptionFuelTankSlideover.vue [113] -userId: stringNotRequiredSchema, +userId: stringNotRequiredSchema.typeError('User ID must be a string'),
	Add regex validation for tokenId and collectionId to ensure they are in the correct format. Consider adding a validation check for the tokenId and collectionId to ensure they meet specific format requirements, enhancing data integrity. resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue [184-185] -tokenId: stringNotRequiredSchema, -collectionId: stringNotRequiredSchema, +tokenId: stringNotRequiredSchema.matches(/^[0-9a-fA-F]+$/, 'Token ID must be a valid hex'), +collectionId: stringNotRequiredSchema.matches(/^[0-9a-fA-F]+$/, 'Collection ID must be a valid hex'),
Best practice	Ensure the caller field in whitelistedCallers is explicitly marked as required. For the whitelistedCallers array schema, consider specifying that the caller field is required to ensure data integrity and avoid potential runtime errors. resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue [179-182] whitelistedCallers: yup.array().of( yup.object({ - caller: stringRequiredSchema, + caller: stringRequiredSchema.required(), }) ),
	Clarify the requirement state of reservesExistentialDeposit and reservesAccountCreationDeposit. To avoid potential bugs and ensure that the reservesExistentialDeposit and reservesAccountCreationDeposit are explicitly required or not, define their schema more clearly. resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue [176-177] -reservesExistentialDeposit: booleanNotRequiredSchema, -reservesAccountCreationDeposit: booleanNotRequiredSchema, +reservesExistentialDeposit: booleanNotRequiredSchema.required(false), +reservesAccountCreationDeposit: booleanNotRequiredSchema.required(false),
Maintainability	Extract complex mapping logic into a separate function for better readability and maintainability. To improve code readability and maintainability, consider extracting the complex mapping logic inside the mutateFuelTank function into a separate function. resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue [203] -whitelistedCallers: formatData(whitelistedCallers.value.map((item: any) => item.caller)), +whitelistedCallers: formatWhitelistedCallers(whitelistedCallers.value), +function formatWhitelistedCallers(callers) { + return formatData(callers.map((item: any) => item.caller)); +} +