Fix radio button null element default prop to use correct input (#10510)

Previously, radio buttons always had the first element that referred to `props.spot.spotType`: ``` <RadioField id=... name=... defaultValue=... defaultChecked={!props.spot?.spotType} className="rw-input" errorClassName="rw-input rw-input-error" /> ``` In actuality, instead of "spot" and "spotType" we should be using the actual name of the model and column! --------- Co-authored-by: Josh GM Walker <56300765+Josh-Walker-GM@users.noreply.github.com>
redwoodjs · May 8, 2024 · 8ee646b · 8ee646b
1 parent 1dd4e45
commit 8ee646b
Show file tree

Hide file tree

Showing 5 changed files with 370 additions and 1 deletion.
diff --git a/.changesets/10510.md b/.changesets/10510.md
@@ -0,0 +1,3 @@
+- Fix radio button null element default prop to use correct input (#10510) by @jason-curtis
+
+This change fixes an issue with the `defaultChecked` field when using the scaffold generator with an enum. You should now see correct code generated to determine if the default is checked or unchecked. 
diff --git a/packages/cli/src/commands/generate/scaffold/__tests__/__snapshots__/scaffold.test.js.snap b/packages/cli/src/commands/generate/scaffold/__tests__/__snapshots__/scaffold.test.js.snap
@@ -1722,6 +1722,160 @@ export default PostsList
 "
 `;
 
+exports[`in javascript (default) mode > generated form matches expectations 1`] = `
+"import {
+  Form,
+  FormError,
+  FieldError,
+  Label,
+  RadioField,
+  Submit,
+} from '@redwoodjs/forms'
+
+const PixelForm = (props) => {
+  const onSubmit = (data) => {
+    if (data.geometry === '') {
+      data.geometry = null
+    }
+
+    props.onSave(data, props?.pixel?.id)
+  }
+
+  return (
+    <div className="rw-form-wrapper">
+      <Form onSubmit={onSubmit} error={props.error}>
+        <FormError
+          error={props.error}
+          wrapperClassName="rw-form-error-wrapper"
+          titleClassName="rw-form-error-title"
+          listClassName="rw-form-error-list"
+        />
+
+        <Label
+          name="color"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Color
+        </Label>
+
+        <div className="rw-check-radio-items">
+          <RadioField
+            id="pixel-color-0"
+            name="color"
+            defaultValue="RED"
+            defaultChecked={props.pixel?.color?.includes('RED')}
+            className="rw-input"
+            errorClassName="rw-input rw-input-error"
+          />
+
+          <div>Red</div>
+        </div>
+
+        <div className="rw-check-radio-items">
+          <RadioField
+            id="pixel-color-1"
+            name="color"
+            defaultValue="GREEN"
+            defaultChecked={props.pixel?.color?.includes('GREEN')}
+            className="rw-input"
+            errorClassName="rw-input rw-input-error"
+          />
+
+          <div>Green</div>
+        </div>
+
+        <div className="rw-check-radio-items">
+          <RadioField
+            id="pixel-color-2"
+            name="color"
+            defaultValue="BLUE"
+            defaultChecked={props.pixel?.color?.includes('BLUE')}
+            className="rw-input"
+            errorClassName="rw-input rw-input-error"
+          />
+
+          <div>Blue</div>
+        </div>
+
+        <FieldError name="color" className="rw-field-error" />
+
+        <Label
+          name="geometry"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Geometry
+        </Label>
+
+        <div className="rw-check-radio-items">
+          <RadioField
+            id="pixel-geometry-none"
+            name="geometry"
+            defaultValue=""
+            defaultChecked={!props.pixel?.geometry}
+            className="rw-input"
+            errorClassName="rw-input rw-input-error"
+          />
+
+          <div className="rw-check-radio-item-none">None</div>
+        </div>
+
+        <div className="rw-check-radio-items">
+          <RadioField
+            id="pixel-geometry-0"
+            name="geometry"
+            defaultValue="TRIANGULAR"
+            defaultChecked={props.pixel?.geometry?.includes('TRIANGULAR')}
+            className="rw-input"
+            errorClassName="rw-input rw-input-error"
+          />
+
+          <div>Triangular</div>
+        </div>
+
+        <div className="rw-check-radio-items">
+          <RadioField
+            id="pixel-geometry-1"
+            name="geometry"
+            defaultValue="STRIPES"
+            defaultChecked={props.pixel?.geometry?.includes('STRIPES')}
+            className="rw-input"
+            errorClassName="rw-input rw-input-error"
+          />
+
+          <div>Stripes</div>
+        </div>
+
+        <div className="rw-check-radio-items">
+          <RadioField
+            id="pixel-geometry-2"
+            name="geometry"
+            defaultValue="DIAGONAL"
+            defaultChecked={props.pixel?.geometry?.includes('DIAGONAL')}
+            className="rw-input"
+            errorClassName="rw-input rw-input-error"
+          />
+
+          <div>Diagonal</div>
+        </div>
+
+        <FieldError name="geometry" className="rw-field-error" />
+
+        <div className="rw-button-group">
+          <Submit disabled={props.loading} className="rw-button rw-button-blue">
+            Save
+          </Submit>
+        </div>
+      </Form>
+    </div>
+  )
+}
+
+export default PixelForm
+"
+`;
+
 exports[`in typescript mode > creates a edit page 1`] = `
 "import EditPostCell from 'src/components/Post/EditPostCell'
 
@@ -3421,6 +3575,165 @@ export default PostsList
 "
 `;
 
+exports[`in typescript mode > generated form matches expectations 1`] = `
+"import type { EditPixelById, UpdatePixelInput } from 'types/graphql'
+
+import type { RWGqlError } from '@redwoodjs/forms'
+import {
+  Form,
+  FormError,
+  FieldError,
+  Label,
+  RadioField,
+  Submit,
+} from '@redwoodjs/forms'
+
+type FormPixel = NonNullable<EditPixelById['pixel']>
+
+interface PixelFormProps {
+  pixel?: EditPixelById['pixel']
+  onSave: (data: UpdatePixelInput, id?: FormPixel['id']) => void
+  error: RWGqlError
+  loading: boolean
+}
+
+const PixelForm = (props: PixelFormProps) => {
+  const onSubmit = (data: FormPixel) => {
+    if (data.geometry === '') {
+      data.geometry = null
+    }
+
+    props.onSave(data, props?.pixel?.id)
+  }
+
+  return (
+    <div className="rw-form-wrapper">
+      <Form<FormPixel> onSubmit={onSubmit} error={props.error}>
+        <FormError
+          error={props.error}
+          wrapperClassName="rw-form-error-wrapper"
+          titleClassName="rw-form-error-title"
+          listClassName="rw-form-error-list"
+        />
+
+        <Label
+          name="color"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Color
+        </Label>
+
+        <div className="rw-check-radio-items">
+          <RadioField
+            id="pixel-color-0"
+            name="color"
+            defaultValue="RED"
+            defaultChecked={props.pixel?.color?.includes('RED')}
+            className="rw-input"
+            errorClassName="rw-input rw-input-error"
+          />
+          <div>Red</div>
+        </div>
+
+        <div className="rw-check-radio-items">
+          <RadioField
+            id="pixel-color-1"
+            name="color"
+            defaultValue="GREEN"
+            defaultChecked={props.pixel?.color?.includes('GREEN')}
+            className="rw-input"
+            errorClassName="rw-input rw-input-error"
+          />
+          <div>Green</div>
+        </div>
+
+        <div className="rw-check-radio-items">
+          <RadioField
+            id="pixel-color-2"
+            name="color"
+            defaultValue="BLUE"
+            defaultChecked={props.pixel?.color?.includes('BLUE')}
+            className="rw-input"
+            errorClassName="rw-input rw-input-error"
+          />
+          <div>Blue</div>
+        </div>
+
+        <FieldError name="color" className="rw-field-error" />
+
+        <Label
+          name="geometry"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Geometry
+        </Label>
+
+        <div className="rw-check-radio-items">
+          <RadioField
+            id="pixel-geometry-none"
+            name="geometry"
+            defaultValue=""
+            defaultChecked={!props.pixel?.geometry}
+            className="rw-input"
+            errorClassName="rw-input rw-input-error"
+          />
+          <div className="rw-check-radio-item-none">None</div>
+        </div>
+
+        <div className="rw-check-radio-items">
+          <RadioField
+            id="pixel-geometry-0"
+            name="geometry"
+            defaultValue="TRIANGULAR"
+            defaultChecked={props.pixel?.geometry?.includes('TRIANGULAR')}
+            className="rw-input"
+            errorClassName="rw-input rw-input-error"
+          />
+          <div>Triangular</div>
+        </div>
+
+        <div className="rw-check-radio-items">
+          <RadioField
+            id="pixel-geometry-1"
+            name="geometry"
+            defaultValue="STRIPES"
+            defaultChecked={props.pixel?.geometry?.includes('STRIPES')}
+            className="rw-input"
+            errorClassName="rw-input rw-input-error"
+          />
+          <div>Stripes</div>
+        </div>
+
+        <div className="rw-check-radio-items">
+          <RadioField
+            id="pixel-geometry-2"
+            name="geometry"
+            defaultValue="DIAGONAL"
+            defaultChecked={props.pixel?.geometry?.includes('DIAGONAL')}
+            className="rw-input"
+            errorClassName="rw-input rw-input-error"
+          />
+          <div>Diagonal</div>
+        </div>
+
+        <FieldError name="geometry" className="rw-field-error" />
+
+        <div className="rw-button-group">
+          <Submit disabled={props.loading} className="rw-button rw-button-blue">
+            Save
+          </Submit>
+        </div>
+      </Form>
+    </div>
+  )
+}
+
+export default PixelForm
+"
+`;
+
 exports[`tailwind flag > set to \`false\` generates a scaffold.css with raw CSS 1`] = `
 "/*
   normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css

diff --git a/packages/cli/src/commands/generate/scaffold/__tests__/fixtures/schema.prisma b/packages/cli/src/commands/generate/scaffold/__tests__/fixtures/schema.prisma
@@ -77,3 +77,21 @@ model CustomIdField {
   uuid String @id @default(uuid())
   name String
 }
+
+model Pixel {
+  id       Int    @id @default(autoincrement())
+  color    PixelColor
+  geometry PixelGeometry?
+}
+
+enum PixelColor {
+  RED
+  GREEN
+  BLUE
+}
+
+enum PixelGeometry {
+  TRIANGULAR
+  STRIPES
+  DIAGONAL
+}