LF-4158: Create animal creation details cards for animal

[SayakaOno]

Description

Create a pure component for animal details view. This is such a huge PR... I would scan the code briefly and check stories if components look okay. Thank you for reviewing!

• Update Input component to validate input when the field is cleared.
• Create ImagePicker component and story. (it has MediaWithAuthentication container, so I made it a container, but does it mean a component that uses ImagePicker needs to be a container?)
  It is almost a copy of FarmImagePicker.tsx, but the major difference is a removal of isImageRemoved. Whether to show a preview depends on the existence of previewUrl, and unless previewUrl is updated, the preview is shown with MediaWithAuthentication.
  @navDhammu It would be appreciated if you could take a look at this component! 🙏
• Create details cards and stories. Some logic that should be in a container can be found in stories. Error messages should be shown for invalid inputs. (text max length)
  • General (animal, batch)
    • By selecting Sex "Male", an extra radio group shows up.
    • Inputs for sex for batch will be implemented in LF-4159 which is a ticket for batch's details view.
  • Origin (for both animal and batch)
    • Based on the selected radio button, the rest fields show up.
  • Origin (animal, batch)
  • Unique (for animal)
    • By selecting "Other" for tag type, an extra input shows up.
    • By selecting "Other" for tag placement, an extra input shows up.
    • (Tag placement options won't change depending on the selected tag type.)
• Create a AddAnimalsDetails component that holds the four details cards.
  • Only one card should be expanded at a time. (The story is just for testing this behaviour. Each card doesn't work)

NOTE:
I had to pass t to the four detail cards because doing useTranslation([...]) (especially with more than two namespaces) in mui's Collapse caused Maximum update depth exceeded error.

Jira link: https://lite-farm.atlassian.net/browse/LF-4158, a little bit of https://lite-farm.atlassian.net/browse/LF-4159

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

• Passes test case
• UI components visually reviewed on desktop view
• UI components visually reviewed on mobile view
• Other (please explain)

Checklist:

• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• The precommit and linting ran successfully
• I have added or updated language tags for text that's part of the UI
• I have added "MISSING" for all new language tags to languages I don't speak
• I have added the GNU General Public License to all new files

[kathyavini]

It looks GREAT!! (And huge!)

I left some minor comments but the only two vaguely important ones were:

1. The field named USED_FOR_PRODUCTION -- I think that one was meant to be USED_FOR_REPRODUCTION throughout
2. Whether writing for react-hook-form's <FormProvider /> to start with might be a better idea. That would clean up the prop drilling of formMethods and also future-proof for using MultiStepForm once that PR is merged

[kathyavini]

It's not a question for this PR, but regarding my backend ticket... 'I don't know' is just a frontend implementation of null, right? We don't have to add a key in the animal_sexes table for it?

Edit: I should also say, I prefer it to be merely a frontend implementation of null 😂

[SayakaOno]

Thank you for bringing this up!
I didn't think we would need to add a key in the table, but I started feeling we should differentiate "undefined" and "unknown"! If we didn't have the key, "sex" would be "I don't know" in the read-only view when the user didn't select anything.

Do you agree with adding unknown to animal_sex table?

Oh you edited your comment 😂

[kathyavini]

If we didn't have the key, "sex" would be "I don't know" in the read-only view when the user didn't select anything.

@SayakaOno yes, I think I prefer this!!

I think I also just saw something similar in another place on the AddAnimal flow -- maybe an "I don't know" breed? -- and I could have sworn we scrapped the idea of an UNKNOWN breed key at one point in discussion 😅 At least for sure they didn't make it into the tables.

Let's revisit after soil amendment!

[navDhammu]

@SayakaOno I don't think the ImagePicker should be a container because it's mainly a UI component. I think we might be able to refactor the MediaWithAuthenticaion out of it and have it accept the authenticated url as a prop maybe? I don't exactly remember how I implemented the farm image picker component but I'll have a closer look on Tuesday.

[SayakaOno]

@navDhammu!
I will leave refactoring of MediaWithAuthenticaion for later but moved ImagePicker to /component.
Thank you for your input and review!

[navDhammu]

This can probably be removed along with previewUrl === defaultUrl. The parent component can use the useMediaWithAuthentication hook to fetch the private image url and pass it as defaultUrl to ImagePicker.

[navDhammu]

Do we really need this decorator? The behavior isn't dependant on react hook form and it works without it.

[navDhammu]

Is it possible to just use args for these stories instead of the render method?

[SayakaOno]

@navDhammu Thank you so much for your input, the component and stories look much better now.
It would be appreciated if you could re-review!

[navDhammu]

This looks good! Although I didn't review all the files but the stories are working well. I left some minor comments to possibly clean up the stories a bit.

Note:- I created components for animal type and breed selects in (#3201) that could be used here maybe once that is approved. This is the file containing the inputs

[navDhammu]

It's not necessary to spread the common props in each story - you can just put them in the global meta object and they will be applied to every story

import * as commonProps from './mockData

const meta: Meta<GeneralDetailsProps> = {
    args: commonProps
     // other code
}

[navDhammu]

I think these render functions on stories can be removed if you have one render in the meta object, and then also the decorator can be removed. Like:

const meta: Meta<GeneralDetailsProps> = {
  title: 'Components/AddAnimalsDetails/General',
  component: GeneralDetails,
  render: (args) => {
    const { t } = useTranslation();
    const formMethods = useForm({ mode: 'onBlur' });
    const sex = formMethods.watch(DetailsFields.SEX);
    const isMaleSelected = sex === 1;

    return (
      <FormProvider {...formMethods}>
        <GeneralDetails {...args} t={t} isMaleSelected={isMaleSelected} />
      </FormProvider>
    );
  },
  args: commonProps,
  decorators: componentDecorators,
  // avoid "Maximum update depth exceeded" https://github.com/storybookjs/storybook/issues/12306
  parameters: { docs: { source: { type: 'code' } } },
};

[navDhammu]

Something else I noticed while using the stories - the Expandable component doesn't expand if you click on it - you have to click on the chevron down icon. Is that the expected behaviour? Normally as a user I would expect that it expands anywhere I click on it, and also that I can open it with just the keyboard by tabbing and pressing enter.

[SayakaOno]

@navDhammu Thank you for the comments!
I have a ticket for batch details, so I will replace type & breed selects and clean up stories when I work on it.
For the Expandable behaviour, I forgot to pass a prop! Thank you for catching. I will also create a ticket for accessibility improvement :)