Skip to content

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

Merged
johbaxter merged 5 commits intodevfrom
146-feat-step-1-update-create-new-app-modal-and-make-small-updates-to-app-details
Feb 26, 2025
Merged

feat(client): Added meta fields and implemented SetProjectMetaData on NewAppModal#615
johbaxter merged 5 commits intodevfrom
146-feat-step-1-update-create-new-app-modal-and-make-small-updates-to-app-details

Conversation

@j-arias-dev
Copy link
Copy Markdown
Contributor

@j-arias-dev j-arias-dev commented Feb 21, 2025

  • 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
image

image

@github-actions
Copy link
Copy Markdown

@CodiumAI-Agent /describe

@QodoAI-Agent
Copy link
Copy Markdown

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."
image

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
    Copy link
    Copy Markdown

    @CodiumAI-Agent /review

    @j-arias-dev j-arias-dev self-assigned this Feb 21, 2025
    @QodoAI-Agent
    Copy link
    Copy Markdown

    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
    Copy link
    Copy Markdown

    @CodiumAI-Agent /improve

    @QodoAI-Agent
    Copy link
    Copy Markdown

    QodoAI-Agent commented Feb 21, 2025

    PR Code Suggestions ✨

    Latest suggestions up to 1ff127a

    CategorySuggestion                                                                                                                                    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
    CategorySuggestion                                                                                                                                    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

    @j-arias-dev j-arias-dev marked this pull request as ready for review February 25, 2025 19:27
    @j-arias-dev j-arias-dev requested a review from a team as a code owner February 25, 2025 19:27
    @j-arias-dev j-arias-dev changed the title feat(client): added meta fields to NewAppModal and AddAppModal feat(client): added meta fields to NewAppModal Feb 25, 2025
    @j-arias-dev j-arias-dev changed the title feat(client): added meta fields to NewAppModal feat(client): added meta fields and Implemented SetProjectMetaData on NewAppModal Feb 25, 2025
    @j-arias-dev j-arias-dev changed the title feat(client): added meta fields and Implemented SetProjectMetaData on NewAppModal feat(client): Added meta fields and implemented SetProjectMetaData on NewAppModal Feb 25, 2025
    Copy link
    Copy Markdown
    Contributor

    @johbaxter johbaxter left a comment

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    image

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

    @j-arias-dev
    Copy link
    Copy Markdown
    Contributor Author

    j-arias-dev commented Feb 26, 2025

    @johbaxter implemented a metadata check in order to run SetProjectMetadata

    image

    @johbaxter johbaxter merged commit 5bcdca5 into dev Feb 26, 2025
    2 checks passed
    @johbaxter johbaxter deleted the 146-feat-step-1-update-create-new-app-modal-and-make-small-updates-to-app-details branch February 26, 2025 21:21
    @github-actions
    Copy link
    Copy Markdown

    @CodiumAI-Agent /update_changelog

    @QodoAI-Agent
    Copy link
    Copy Markdown

    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'

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

    Labels

    None yet

    Projects

    None yet

    Development

    Successfully merging this pull request may close these issues.

    Update Create App experience and make small updates to app details

    3 participants