Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Numeric range field added (#799) #800

Merged
merged 8 commits into from
Dec 13, 2023
Merged

Conversation

burnettk
Copy link
Contributor

@burnettk burnettk commented Dec 11, 2023

originally from: #799

Implements #647.

Added a custom field to handle numeric ranges. The field checks for the first key in the properties of the schema and will add min and max to it when the values are put in.

Summary by CodeRabbit

  • New Features

    • Introduced a NumericRangeField component for inputting numeric ranges in forms.
    • Updated form validation to include custom checks for new field types.
  • Style

    • Adjusted color values, margins, and padding across various CSS elements for improved visual presentation.
    • Enhanced styling for rjsf components, including font size, width, and color adjustments.
  • Documentation

    • Added documentation for the new NumericRangeField feature, including usage examples and validation details.
  • Bug Fixes

    • Temporarily disabled certain backend calls and form button disabling logic for smoother user experience.

Added a custom field to handle numeric ranges. The field checks for the first key in the properties of the schema and will add min and max to it when the values are put in.
Copy link
Contributor

coderabbitai bot commented Dec 11, 2023

Walkthrough

The spiffworkflow-frontend project has been updated with a new NumericRangeField component, enhancing forms to allow users to input numeric ranges. This feature includes front-end validations and updates to the UI's look and feel. Some backend-related code has been commented out, possibly for debugging or refactoring purposes, and documentation has been updated to reflect the new feature.

Changes

File Path Change Summary
.../CustomForm.tsx Added RegistryFieldsType import, a fields object, and updated checkFieldsWithCustomValidations function.
.../index.css Updated color values, margins, and padding for various elements.
.../NumericRangeField/NumericRangeField.tsx Added new NumericRangeField component for numeric range input.
.../carbon_theme/index.css Adjusted font sizes, widths, margins, and colors for rjsf components.
.../routes/TaskShow.tsx Commented out code related to form button disabling and backend calls.
docs/Building_Diagrams/Forms.md Documented the new NumericRangeField feature with examples and validation details.

🐇✨
In the land of code, where the front-end hops,
A new field blooms, and the input box pops.
Ranges set forth, from min to max,
A rabbit's touch, no bug can relax. 🌱🔢

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on X ?


Tips

Chat with CodeRabbit Bot (@coderabbitai)

  • You can reply to a review comment from CodeRabbit.
  • You can also chat with CodeRabbit bot directly around the specific lines of code or files in the PR by tagging @coderabbitai in a new comment.
  • You can tag @coderabbitai in a PR comment and ask questions about the PR and the codebase.

CodeRabbit Commands (invoked as PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • The JSON schema for the configuration file is available here.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Review Status

Actionable comments generated: 6

Configuration used: CodeRabbit UI

Commits Files that changed from the base of the PR and between 4c10ec4 and 1143c92.
Files ignored due to filter (1)
  • spiffworkflow-frontend/package-lock.json
Files selected for processing (3)
  • spiffworkflow-frontend/src/components/CustomForm.tsx (3 hunks)
  • spiffworkflow-frontend/src/index.css (24 hunks)
  • spiffworkflow-frontend/src/rjsf/custom_widgets/NumericRangeField/NumericRangeField.tsx (1 hunks)
Files skipped from review due to trivial changes (1)
  • spiffworkflow-frontend/src/index.css
Additional comments: 5
spiffworkflow-frontend/src/components/CustomForm.tsx (4)
  • 8-9: The import statements for NumericRangeField and RegistryFieldsType are correctly added to support the new numeric range field functionality.

  • 41-43: The fields object with the numeric_range property is correctly set to NumericRangeField, which is necessary for the new feature.

  • 273-273: The fields prop is correctly passed to the Form component, ensuring the NumericRangeField is available for use in forms.

  • 38-47: > Note: This review was outside the patches, so it was mapped to the patch with the greatest overlap. Original lines [5-276]

No further issues or improvements are identified in the rest of the file. The existing code remains unchanged and the new feature integration appears to be isolated and well-contained.

spiffworkflow-frontend/src/rjsf/custom_widgets/NumericRangeField/NumericRangeField.tsx (1)
  • 51-53: The logic to determine identifierToUse assumes that schema.properties will always have at least one key. Verify that this assumption holds true in all cases where NumericRangeField is used, or consider adding a fallback or error handling for cases where schema.properties might be empty or undefined.

@burnettk
Copy link
Contributor Author

please run npm run lint in the spiffworkflow-frontend directory. you can normally run npm run lint:fix` to autofix some stuff, but i already did that and committed it to this branch.

@burnettk
Copy link
Contributor Author

burnettk commented Dec 11, 2023

@Kayvon-Martinez can you supply a sample process model or otherwise describe or give examples of what the json schema and ui schema should look like? we were having some issues figuring out how to use it and it was giving us validation errors when submitting the form. when you have some time, feel free to hit us up as well and we can go over it together.

@Kayvon-Martinez
Copy link
Collaborator

Hi @burnettk. I will attach examples of the schema and uischema below. I am also about to upload a test process and will link that when I do.

image.png

image-1.png

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Review Status

Actionable comments generated: 9

Configuration used: CodeRabbit UI

Commits Files that changed from the base of the PR and between b684d1e and 04f0524.
Files ignored due to filter (1)
  • spiffworkflow-frontend/package-lock.json
Files selected for processing (5)
  • spiffworkflow-frontend/src/components/CustomForm.tsx (5 hunks)
  • spiffworkflow-frontend/src/index.css (23 hunks)
  • spiffworkflow-frontend/src/rjsf/carbon_theme/index.css (1 hunks)
  • spiffworkflow-frontend/src/rjsf/custom_widgets/NumericRangeField/NumericRangeField.tsx (1 hunks)
  • spiffworkflow-frontend/src/routes/TaskShow.tsx (1 hunks)
Files skipped from review due to trivial changes (2)
  • spiffworkflow-frontend/src/index.css
  • spiffworkflow-frontend/src/rjsf/carbon_theme/index.css
Additional comments: 4
spiffworkflow-frontend/src/components/CustomForm.tsx (1)
  • 297-297: The addition of the fields prop to the Form component is in line with the PR objectives to integrate the NumericRangeField.
spiffworkflow-frontend/src/routes/TaskShow.tsx (3)
  • 204-226: The PR overview does not mention changes to exported or public entities, and the hunk does not show any such changes. Confirm that this aligns with the PR's objectives and that no public API changes are required for the new NumericRangeField component.

  • 226-226: Error handling is still in place for the handleSignalSubmit function, which is good practice. Ensure that all other necessary error handling is also maintained throughout the codebase.

  • 204-226: The verification scripts have confirmed the presence of the NumericRangeField.tsx file within the spiffworkflow-frontend/src/rjsf/custom_widgets/NumericRangeField directory. However, there were no matches found for NumericRangeField in either index.css or carbon_theme/index.css, which suggests that the CSS changes might not be directly related to the NumericRangeField by name or they might be using a different class or ID for styling.

Given this information, I can confirm that the NumericRangeField component has been added to the codebase as intended by the PR. The absence of direct references to NumericRangeField in the CSS files does not necessarily indicate an issue, as the CSS changes could be using different selectors or could be more general and not specific to the NumericRangeField.

Analysis chain

The hunk does not show the addition of the NumericRangeField component or CSS changes. Verify that these changes are present elsewhere in the codebase and that they align with the PR's objectives.

Scripts Executed

The following scripts were executed for the analysis:


Script:

#!/bin/bash
# Verify that the NumericRangeField component has been added
fd 'NumericRangeField.tsx' --exec grep -Hn 'NumericRangeField'

# Verify that CSS changes have been made
fd 'index.css' --exec grep -Hn 'NumericRangeField'
fd 'carbon_theme/index.css' --exec grep -Hn 'NumericRangeField'

Length of output: 307

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits Files that changed from the base of the PR and between 04f0524 and f82e660.
Files selected for processing (3)
  • spiffworkflow-frontend/src/components/CustomForm.tsx (5 hunks)
  • spiffworkflow-frontend/src/rjsf/carbon_theme/index.css (1 hunks)
  • spiffworkflow-frontend/src/rjsf/custom_widgets/NumericRangeField/NumericRangeField.tsx (1 hunks)
Files skipped from review due to trivial changes (2)
  • spiffworkflow-frontend/src/rjsf/carbon_theme/index.css
  • spiffworkflow-frontend/src/rjsf/custom_widgets/NumericRangeField/NumericRangeField.tsx
Files skipped from review as they are similar to previous changes (1)
  • spiffworkflow-frontend/src/components/CustomForm.tsx

@burnettk
Copy link
Contributor Author

@coderabbitai hey, can you write some documentation about how this feature works and how to use it (how to write json files and whatnot) in markdown format?

Copy link
Contributor

coderabbitai bot commented Dec 12, 2023

# Numeric Range Field Documentation

## Overview

The `NumericRangeField` component is a new feature in the `spiffworkflow-frontend` that allows users to input numeric ranges. This component is designed to work with JSON schemas and provides two text inputs for users to enter minimum and maximum values for a given numeric range.

## Integration into Forms

To integrate the `NumericRangeField` into a form, you need to import the component and include it in the `fields` object within `CustomForm.tsx`. The `NumericRangeField` is then passed as a prop to the form component where it can be used like any other field.

```tsx
import NumericRangeField from './path-to-NumericRangeField';

// In CustomForm.tsx
const fields = {
  ...otherFields,
  numericRange: NumericRangeField,
};

// Usage in a form component
<Form fields={fields} ... />

JSON Schema Example

Below is an example JSON schema that includes the numeric range field:

{
  "title": "Example Schema",
  "type": "object",
  "properties": {
    "numericRange": {
      "type": "object",
      "title": "Numeric Range",
      "properties": {
        "min": {
          "type": "number",
          "title": "Minimum Value"
        },
        "max": {
          "type": "number",
          "title": "Maximum Value"
        }
      },
      "required": ["min", "max"]
    }
  }
}

This schema defines a numeric range object with min and max properties, both of which are required.

UI Options and Validation

The NumericRangeField component supports various UI options and will support validation logic. Currently, the validation logic is planned for future implementation and may be commented out in CustomForm.tsx. When implemented, it will ensure that the min value is less than or equal to the max value and that both values are within any specified constraints.

Styling

Styling for the NumericRangeField can be customized via CSS. Updates to index.css and carbon_theme/index.css include visual presentation adjustments for the numeric range field.

For more detailed styling options, refer to the CSS files mentioned above.


@burnettk, I've drafted a basic documentation outline for the `NumericRangeField` component in markdown format. This should provide an overview of the feature, how to integrate it into forms, an example JSON schema, and notes on UI options and validation. Please let me know if there are specific details or sections you would like to expand upon or if there are any other aspects of the feature you would like documented.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits Files that changed from the base of the PR and between f82e660 and 662ec21.
Files selected for processing (2)
  • spiffworkflow-frontend/src/components/CustomForm.tsx (5 hunks)
  • spiffworkflow-frontend/src/rjsf/custom_widgets/NumericRangeField/NumericRangeField.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (2)
  • spiffworkflow-frontend/src/components/CustomForm.tsx
  • spiffworkflow-frontend/src/rjsf/custom_widgets/NumericRangeField/NumericRangeField.tsx

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Review Status

Actionable comments generated: 4

Configuration used: CodeRabbit UI

Commits Files that changed from the base of the PR and between 662ec21 and cc1838c.
Files selected for processing (3)
  • docs/Building_Diagrams/Forms.md (1 hunks)
  • spiffworkflow-frontend/src/components/CustomForm.tsx (5 hunks)
  • spiffworkflow-frontend/src/rjsf/custom_widgets/NumericRangeField/NumericRangeField.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (1)
  • spiffworkflow-frontend/src/components/CustomForm.tsx
Additional comments: 6
docs/Building_Diagrams/Forms.md (4)
  • 234-277: The documentation for the NumericRangeField component is clear and provides a good overview, JSON schema example, UI schema example, and validation information. This should help users understand how to implement and use the new feature in their forms.

  • 240-260: The JSON schema example for the NumericRangeField is correctly structured, with appropriate types and titles for the minimum and maximum values.

  • 267-272: The UI schema example correctly associates the numericRange property with a custom UI field, indicating that there is a custom component designed to handle the numeric range input.

  • 275-277: The validation rule that ensures the maximum value cannot be less than the minimum value is crucial and is correctly documented, which is essential for the correct functioning of the numeric range field.

spiffworkflow-frontend/src/rjsf/custom_widgets/NumericRangeField/NumericRangeField.tsx (2)
  • 60-64: The formatNumberString function correctly formats the number with commas. This is a good use of regex for readability.

  • 30-155: The NumericRangeField component is structured well and follows React best practices for component creation and export.

Comment on lines +67 to +68
const parseNumberString = (numberString: string) =>
Number(numberString.replace(/,/g, ''));
Copy link
Contributor

Choose a reason for hiding this comment

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

The parseNumberString function has been updated to remove commas, but it still lacks error handling for non-numeric input, which could lead to NaN issues if the input is not a valid number. Consider adding validation to ensure the input is a valid number before attempting to parse it.

onChangeLocal('min', values);
}}
invalid={commonAttributes.invalid}
defaultValue="0"
Copy link
Contributor

Choose a reason for hiding this comment

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

The TextInput components are using both defaultValue and value props, which can lead to conflicts as defaultValue is for uncontrolled components and value is for controlled ones. Ensure that the components are being used as intended and consider removing defaultValue if the components are controlled.

Also applies to: 139-139

Comment on lines +79 to +99
const onChangeLocal = (nameToChange: any, event: any) => {
event.preventDefault();
const numberValue = parseNumberString(event.target.value);
if (numberValue > maxNumber) {
return;
}
if (!disabled && !readonly) {
if (nameToChange === 'min' && numberValue > max) {
onChange({
...(formData || {}),
min: numberValue,
max: numberValue,
});
} else {
onChange({
...(formData || {}),
...{ max, min },
[nameToChange]: numberValue,
});
}
}
Copy link
Contributor

Choose a reason for hiding this comment

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

The onChangeLocal function uses the any type for its parameters, which is not type-safe. Consider specifying more accurate types for nameToChange (which should be a string) and event (which should be a React.ChangeEvent<HTMLInputElement> or similar).

@burnettk
Copy link
Contributor Author

@Kayvon-Martinez we made some updates. we made the auto-set min and max based on the other value (and switching min and max values) a little less magical. hopefully the result feels ok to you when you use it. because of that, we had to add validation logic, so that is now in place. and a few other things. please reach out if anything seems amiss or if you'd like to talk anything through; we are more than happy to do so. Please take a look at the coderabbit comments and update code if it seems worth updating and then click "Resolve conversation" when you are happy with those. we learned about ui:field from this change, and we'll probably update one of our ui:widgets to use this approach. thank you!

@burnettk burnettk force-pushed the main branch 2 times, most recently from 8e91ef5 to 8a14f4a Compare December 12, 2023 22:18
@Kayvon-Martinez Kayvon-Martinez merged commit 270b960 into main Dec 13, 2023
31 of 32 checks passed
@Kayvon-Martinez Kayvon-Martinez deleted the feature/numeric_range_field branch December 13, 2023 18:50
@Kayvon-Martinez
Copy link
Collaborator

I just tested it and I love the changes you made! Thank you! I have confirmed the merge. Thanks again!

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.

3 participants