LF-4631 (1): Implement sensor addition UI flow

[SayakaOno]

Description

Rough implementation of the sensor addition flow. The goal is to set up the basic structure and functionality to prevent a large PR later.

• Update ContextForm:
  • Add a SIMPLE_HEADER variant (story), which might not be used.
  • Display a loading view when needed (story). The loading icon could be implemented properly.
  • (TODO: Some adjustments including hiding "Previous" button and the header styling)
• Add PostSensor container (/create_location/sensor)
  • I don't think the URL perfectly matches the content at this point, but I followed the convention for future feature expansion.

NOTE:

• The routes file was formatted differently... Please let me know if my setting is different from yours.
• I used ContextForm for better scalability, expecting that we may eventually support sensors from other manufacturers or custom sensors.

Jira link: https://lite-farm.atlassian.net/browse/LF-4631
New ticket: https://lite-farm.atlassian.net/browse/LF-4691

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]

This looks good -- I love the little mock 'loading' 😂

Regarding the linting of the routes file -- I don't think I was the last one to format those lines but yes, my formatter is in agreement with integration (i.e. it will try to revert the changes on this branch).

It looks like my prettier config is in alignment with prettierrc.json, but I also don't think any of these properties can create the diff here anyway! 🤔 My prettier extension version is 11.0.0.

{
  "parser": "babel",
  "printWidth": 100,
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

We might have to do some sleuthing in tech daily. FWIW I think prefer how the arrow functions are arranged here with whatever your settings are!

[kathyavini]

I think this route should also be in the other admin code block (manager / extension officer)... unless was this described as something only the farm owner should be permitted to do?

[kathyavini]

It's not really my sense that sensors would ever (even when we expand the functionallity) become a real location in the previous way again, so I think I would be in favour of both files and routes centering around e.g. farm_addon (to match the backend).

But I guess this depends on how we think expansion is going to work (whether it will be like reviving the old flow) so I'd like to check this with Anto! Also I don't think the decision has to be made yet.

[kathyavini]

Maybe background-color: transparent would be a better default for this one? Just in case the parent container doesn't get a white background? There was a bit of that white-offwhite clash in Storybook which I'm probably being too picky about... 😝