feat(client): Added meta fields and implemented SetProjectMetaData on NewAppModal

[j-arias-dev]

• Added description and tag meta fields to NewAppModal.

• Implemented setProjectMetadata on submit in NewAppModal.

• For NewAppModal: Waiting to find out how long it will take to update the CreateAppFromBlocks and CreateProject reactors to pass the metadata."

NewAppModal

[github-actions]

@CodiumAI-Agent /describe

[QodoAI-Agent]

Title

feat(client): added meta fields to NewAppModal and AddAppModal

---

User description

Added meta fields to NewAppModal and AddAppModal.

• For AddAppModal: Waiting on Shivansh to finish the ImportApp to be able to pass in the metadata.
• For NewAppModal: Waiting to find out how long it will take to update the CreateAppFromBlocks and CreateProject reactors to pass the metadata."

---

PR Type

Enhancement

---

Description

• Added metadata fields (APP_DESCRIPTION, APP_TAGS) to NewAppModal.

• Updated NewAppModal UI with styled content and new input fields.

• Included placeholder for metadata integration in AddAppModal.

• Adjusted logic for creating apps to accommodate metadata.

---

Changes walkthrough 📝

Relevant files

Enhancement

NewAppModal.tsx Add metadata fields and UI updates to NewAppModal                packages/client/src/components/app/NewAppModal.tsx Added APP_DESCRIPTION and APP_TAGS fields to the form. Introduced styled modal content using StyledModalContent. Updated UI to include a description text area and tags autocomplete. Adjusted logic for app creation to consider metadata handling. +62/-4    AddAppModal.tsx Prepare AddAppModal for metadata integration                          packages/client/src/components/app/save-app/AddAppModal.tsx Added placeholder comment for metadata integration with ImportApp. Updated form steps variable from addAppFormSteps to projectZipFormSteps. +2/-1

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

@CodiumAI-Agent /review

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Possible Issue The APP_TAGS field uses an Autocomplete component with an empty options array. This might lead to unexpected behavior or confusion for users. Ensure that this is intentional or populate the options array with relevant data. name={'APP_TAGS'} control={control} rules={{}} render={({ field }) => { return ( <Autocomplete value={(field.value as string[]) || []} fullWidth multiple onChange={(_, newValue) => { field.onChange(newValue); }} options={[]} freeSolo renderInput={(params) => ( <TextField {...params} variant="outlined" placeholder='Press "Enter" to add tag' /> )} /> ); }} Metadata Handling The comments indicate that metadata handling is pending updates to reactors (CreateAppFromBlocks and CreateProject). Ensure that these dependencies are resolved before merging, as they are critical for the functionality. // Waiting on how long it will take to update the CreateAppFromBlocks reactor to pass the metadata. If it takes too long, we plan to call an additional reactor, SetProjectMeta. const { errors, pixelReturn } = await monolithStore.runQuery< [AppMetadata] >( `CreateAppFromBlocks ( project = [ "${ data.APP_NAME }" ] , json =[${JSON.stringify(state)}] ) ;`, ); if (errors.length > 0) { throw new Error(errors.join(',')); } appId = pixelReturn[0].output.project_id; } else if (type === 'code') { // create the pixel // Waiting on how long it will take to update the CreateProject reactor to pass the metadata. If it takes too long, we plan to call an additional reactor, SetProjectMeta. const pixel = `CreateProject(project=["${data.APP_NAME}"], portal=[true], projectType=["CODE"]);`; Incomplete Feature The AddAppModal contains a comment about waiting for the ImportApp reactor to be ready. Ensure this dependency is addressed before merging to avoid incomplete functionality. // *** Waiting on the ImportApp reactor to be ready so that we can hook up the metadata ****. const resp = await monolithStore.runQuery(

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Code Suggestions ✨

Latest suggestions up to 1ff127a

Category	Suggestion	Impact
Security	Sanitize metadata inputs to prevent injection Validate that data['APP_TAGS'] and data['APP_DESCRIPTION'] are properly sanitized before being included in the SetProjectMetadata query to prevent potential injection attacks. packages/client/src/components/app/NewAppModal.tsx [100-105] +const sanitizedTags = data['APP_TAGS'].map(tag => sanitize(tag)); +const sanitizedDescription = sanitize(data['APP_DESCRIPTION']); `SetProjectMetadata(project=["${appId}"], meta=[${JSON.stringify( { - tag: data['APP_TAGS'], - description: data['APP_DESCRIPTION'], + tag: sanitizedTags, + description: sanitizedDescription, }, )}])`, Suggestion importance[1-10]: 9 __ Why: Sanitizing user inputs before including them in a query is essential for preventing injection attacks. This suggestion addresses a significant security concern and improves the safety of the application.	High
Possible issue	Add null checks for query response Ensure that the SetProjectMetadata query handles cases where pixelReturn or operationType might be undefined or null to avoid runtime errors. packages/client/src/components/app/NewAppModal.tsx [189-191] -const output = - setProjectMetadataResponse.pixelReturn[0].output; -const operationType = - setProjectMetadataResponse.pixelReturn[0].operationType; +const pixelReturn = setProjectMetadataResponse.pixelReturn?.[0]; +const output = pixelReturn?.output || ''; +const operationType = pixelReturn?.operationType || ''; Suggestion importance[1-10]: 8 __ Why: Adding null checks for pixelReturn and operationType ensures that the code does not throw runtime errors when these values are undefined or null. This is a critical improvement for robustness and error prevention.	Medium
	Add error handling for query failures Add error handling for cases where monolithStore.runQuery fails or throws an exception to ensure the application does not crash. packages/client/src/components/app/NewAppModal.tsx [179-187] -const setProjectMetadataResponse = - await monolithStore.runQuery( +let setProjectMetadataResponse; +try { + setProjectMetadataResponse = await monolithStore.runQuery( `SetProjectMetadata(project=["${appId}"], meta=[${JSON.stringify( { tag: data['APP_TAGS'], description: data['APP_DESCRIPTION'], }, )}])`, ); +} catch (error) { + notification.add({ + color: 'error', + message: 'Failed to set project metadata.', + }); + return; +} Suggestion importance[1-10]: 8 __ Why: Adding error handling for monolithStore.runQuery ensures that the application gracefully handles failures or exceptions, preventing crashes and improving user experience.	Medium
General	Populate autocomplete options dynamically Ensure that the Autocomplete component's options prop is populated with meaningful data or provide a fallback to avoid potential confusion for users. packages/client/src/components/app/NewAppModal.tsx [277] -options={[]} +options={availableTags || []} Suggestion importance[1-10]: 6 __ Why: Providing meaningful data or a fallback for the Autocomplete component's options prop enhances usability and avoids potential confusion for users. While not critical, it is a valuable improvement for user experience.	Low

---

Previous suggestions

Suggestions up to commit 372e400

Category	Suggestion	Impact
Possible issue	Add error handling for queries Include error handling for the monolithStore.runQuery calls to ensure that unexpected errors are caught and logged appropriately. packages/client/src/components/app/NewAppModal.tsx [82-85] -const { errors, pixelReturn } = await monolithStore.runQuery< - [AppMetadata] ->( - `CreateAppFromBlocks ( project = [ "${ +try { + const { errors, pixelReturn } = await monolithStore.runQuery< + [AppMetadata] + >( + `CreateAppFromBlocks ( project = [ "${ + if (errors) { + throw new Error(errors.join(',')); + } +} catch (error) { + console.error("Error creating app from blocks:", error); + throw error; +} Suggestion importance[1-10]: 9 __ Why: Including error handling for monolithStore.runQuery calls is crucial for maintaining application stability and providing meaningful feedback in case of unexpected errors. This suggestion addresses a potential issue effectively.	High
General	Add validation for APP_TAGS field Add validation rules for the APP_TAGS field to ensure proper input, such as limiting the number of tags or validating tag formats. packages/client/src/components/app/NewAppModal.tsx [209-234] <Controller name={'APP_TAGS'} control={control} - rules={{}} + rules={{ + validate: (tags) => tags.length <= 10 || "Maximum 10 tags allowed", + }} render={({ field }) => { return ( <Autocomplete value={(field.value as string[]) || []} fullWidth multiple onChange={(_, newValue) => { field.onChange(newValue); }} options={[]} freeSolo renderInput={(params) => ( <TextField {...params} variant="outlined" placeholder='Press "Enter" to add tag' /> )} /> ); }} /> Suggestion importance[1-10]: 8 __ Why: Adding validation rules for the APP_TAGS field ensures data integrity and prevents excessive or malformed input. This is a significant improvement to the form's robustness and usability.	Medium
	Populate Autocomplete options with data Ensure that the Autocomplete component's options prop is populated with meaningful data or a placeholder to avoid potential confusion or errors when users interact with it. packages/client/src/components/app/NewAppModal.tsx [215-231] <Autocomplete value={(field.value as string[]) || []} fullWidth multiple onChange={(_, newValue) => { field.onChange(newValue); }} - options={[]} + options={["ExampleTag1", "ExampleTag2"]} freeSolo renderInput={(params) => ( <TextField {...params} variant="outlined" placeholder='Press "Enter" to add tag' /> )} /> Suggestion importance[1-10]: 7 __ Why: Populating the Autocomplete options with meaningful data improves user experience and avoids potential confusion. The suggestion is actionable and directly enhances the functionality of the component.	Medium
	Validate steps prop consistency Ensure the steps prop in SaveAppModal is updated consistently and verify that projectZipFormSteps is defined and correctly implemented. packages/client/src/components/app/save-app/AddAppModal.tsx [271] -steps={projectZipFormSteps} +steps={projectZipFormSteps || addAppFormSteps} Suggestion importance[1-10]: 6 __ Why: Ensuring the steps prop is consistently updated and verifying the existence of projectZipFormSteps improves code reliability and prevents runtime errors. While beneficial, the impact is moderate compared to other suggestions.	Low

[johbaxter]

Is there a need to call SetProjectMeta, if we dont provide description and tags

[j-arias-dev]

@johbaxter implemented a metadata check in order to run SetProjectMetadata

[github-actions]

@CodiumAI-Agent /update_changelog

[QodoAI-Agent]

Changelog updates: 🔄

2025-02-26

Added

• Introduced meta fields (description and tags) to NewAppModal.
• Implemented functionality to set project metadata upon app creation in NewAppModal.

to commit the new content to the CHANGELOG.md file, please type:
'/update_changelog --pr_update_changelog.push_changelog_changes=true'