Change position of generate with ai button in data schema

[wintonzheng]

Important

Repositioned 'Generate with AI' button in WorkflowDataSchemaInputGroup to improve UI layout and interaction flow.

• UI Changes:
  • Repositioned 'Generate with AI' button in WorkflowDataSchemaInputGroup.
  • Button now appears next to the checkbox when value is not 'null' and AI generation is inactive.
• Behavior:
  • Conditional rendering of the button based on value and generateWithAIActive state.

^{This description was created by for 093fce5. It will automatically update as commits are pushed.}

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to 093fce5 in 1 minute and 9 seconds

More details

• Looked at 129 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 6 drafted comments based on config settings.

1. skyvern-frontend/src/components/DataSchemaInputGroup/WorkflowDataSchemaInputGroup.tsx:64

• Draft comment:
  Ensure consistent vertical alignment between the label/checkbox group and the AI button. The new flex container with justify-between may need fine-tuning for different viewport sizes.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

2. skyvern-frontend/src/components/DataSchemaInputGroup/WorkflowDataSchemaInputGroup.tsx:79

• Draft comment:
  Consider adding aria-label/text to the 'Generate with AI' button for improved accessibility.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

3. skyvern-frontend/src/components/DataSchemaInputGroup/WorkflowDataSchemaInputGroup.tsx:95

• Draft comment:
  Verify that the condition 'value !== "null"' covers all valid cases. Using a string 'null' may be error-prone; consider using null values directly if possible.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50%
  The code is consistent in its use of "null" as a string. Since value is typed as string in Props, using an actual null would violate type safety. The component seems to handle JSON data, where "null" is a valid JSON string. This appears to be an intentional design choice rather than an error.
  The reviewer raises a valid point that using string literals as sentinels can be error-prone in some cases. There could be type safety benefits to using a discriminated union instead.
  However, given this is handling JSON data and the types are properly defined, the current approach is type-safe and consistent throughout the component.
  The comment should be deleted as it questions an intentional design choice that is consistently implemented and type-safe.

4. skyvern-frontend/src/components/DataSchemaInputGroup/WorkflowDataSchemaInputGroup.tsx:64

• Draft comment:
  Refactored layout groups the Label, HelpTooltip, Checkbox, and 'Generate with AI' button effectively—verify that the new positioning aligns with the intended UX design.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

5. skyvern-frontend/src/components/DataSchemaInputGroup/WorkflowDataSchemaInputGroup.tsx:112

• Draft comment:
  While the spinner indicates the mutation is pending, consider disabling the textarea (or inputs) during a pending state to avoid conflicting updates.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

6. skyvern-frontend/src/components/DataSchemaInputGroup/WorkflowDataSchemaInputGroup.tsx:70

• Draft comment:
  Inline arrow functions (e.g., in onCheckedChange) are re-created on every render; consider memoizing these handlers if performance issues arise.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

Workflow ID: wflow_wsRkGXbcZ6UhqTbS

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

❌ Changes requested. Incremental review on 093fce5 in 1 minute and 31 seconds

More details

• Looked at 129 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 5 drafted comments based on config settings.

1. skyvern-frontend/src/components/DataSchemaInputGroup/WorkflowDataSchemaInputGroup.tsx:64

• Draft comment:
  Ensure the use of fixed height (h-7) in the header aligns with overall design requirements, particularly on varying screen sizes.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

2. skyvern-frontend/src/components/DataSchemaInputGroup/WorkflowDataSchemaInputGroup.tsx:79

• Draft comment:
  The repositioned 'Generate with AI' button now renders conditionally based on generateWithAIActive and value !== 'null'. Verify that this matches expected UX and that no interaction is lost.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

3. skyvern-frontend/src/components/DataSchemaInputGroup/WorkflowDataSchemaInputGroup.tsx:64

• Draft comment:
  Using a fixed height (h-7) with justify-between helps align items, but double-check that all elements (labels, buttons) remain vertically centered and that the layout works well on all viewports.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

4. skyvern-frontend/src/components/DataSchemaInputGroup/WorkflowDataSchemaInputGroup.tsx:115

• Draft comment:
  Consider passing the current prompt value as an argument to mutate() instead of relying on closure state. This approach avoids potential stale state issues with react-query.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50%
  While the suggestion follows React best practices by recommending explicit state passing over closure access, there's no clear evidence that this is causing actual issues. The state is managed by useState and the mutation is defined in the same component scope. React Query handles most stale state issues automatically. This seems more like a theoretical improvement than a practical problem.
  The comment might be identifying a real potential issue with React's closure behaviors. Stale closures can be subtle and hard to debug.
  However, without evidence of actual problems, and given that React Query is designed to handle state management robustly, this seems like an overly cautious optimization.
  This comment should be removed as it suggests a theoretical optimization without clear evidence of an actual problem.

5. skyvern-frontend/src/components/DataSchemaInputGroup/WorkflowDataSchemaInputGroup.tsx:95

• Draft comment:
  Minor: You can simplify conditionally rendering the AI prompt block using the && operator (e.g. generateWithAIActive &&
  ...
  ) instead of the ternary operator returning null.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

Workflow ID: wflow_qi4rg5BCAIwaa7xK

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

Clickable icons (Cross2Icon and PaperPlaneIcon) should include accessible labels (e.g., aria-label) for improved accessibility.