LF-4691: UI to connect to ensemble #3675

SayakaOno · 2025-01-31T22:15:09Z

Description

Implement the first screen of the add sensor flow.

Add Partners component (to be renamed to Addons or something similar later)
- The position of the cross icon for clearing error is off - this will be fixed in another ticket.
Update PostSensor container
- API integration (POST farmAddon, GET sensors)
- Remove white background colour from the form (Loïc confirmed!)
Add translations and colours (Includes translations and colours for LF-4693 and 4696 🙏)
Make Loading component fixed relative to viewport (The file is currently nested within ContextForm, but I plan to extract it in a future PR. Keeping it for now to avoid a bigger diff)
Implement ability to hide Previous button in WithStepperProgressBar
Add isCompactSideMenu prop to POST_SENSOR_URL route
Update Map component
- Navigate to the Add sensors form when "Sensor" is selected
- Remove sensor upload related code
Update ContextForm to accept formMode prop ("onBlur", "onChange" etc.)
~~Delete unused files and code for bulk sensor upload~~

Jira link: 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

* remove sensor upload related code

* send showPreviousButton prop to ContextForm

This reverts commit 108d707.

Duncan-Brain

Looking good!

Left a couple of inline questions ..nothing too important I don't think.

Empty scrollbar is present:

I am not sure if Loading should be under /ContextForm -- it seems like it should be for all of app or replace existing Loading animation if we are redesigning a new one.

Could consider creating a /Addon directory and placing Partners cards under it since may be shared between farm settings, add sensors and probably other addons like layers and pivots.

Duncan-Brain · 2025-02-04T19:29:20Z

packages/webapp/src/components/Sensor/v2/Partners.tsx

+  return uuidValidate(value) || errorMessage;
+};
+
+const PARTNERS = [{ name: 'Ensemble scientific', url: 'www.esci.io', logoPath: EsciLogo }];


Should this go in new constants file with the partner id in this object? in addon_partner table "scientific" is capitalized : 'Ensemble Scientific'

Duncan-Brain · 2025-02-05T01:18:56Z

packages/webapp/src/store/api/apiSlice.ts

@@ -277,4 +288,6 @@ export const {
  useAddSoilAmendmentProductMutation,
  useUpdateSoilAmendmentProductMutation,
  useGetSensorsQuery,
+  useLazyGetSensorsQuery,


Cool ! Is this to start requesting data faster than loading of next component?

Exactly! I'm not sure if I keep it with the updated design though...

Duncan-Brain · 2025-02-05T01:26:28Z

packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/PostSensor.tsx


+    // Proceed to sensors view
    onSuccess();


Should the form data be cleared here?

Currently when I press save, successfully reach next page, then press back button >>> entered data is still present in input. I think in the future when GET endpoint is ready it will check for existing addon -- so maybe that will handle the need to clear form or not.

Duncan-Brain · 2025-02-05T01:31:49Z

packages/webapp/src/components/Form/ContextForm/Loading.tsx

+          styles.loadingScreen,
+          isCompactSideMenu ? styles.withCompactSideMenu : styles.withExpandedSideMenu,
+        )}
+        style={style}


Is inline styles temporary?

No, it's permanent. This is the only way I know to use dynamic px values via props in CSS, but if you know a better way, please let me know!

Okay, I didn't see the props being used by any parents yet so thought maybe it was just for testing. Would a className not be able to override variables too?

Ah I see! It should be possible, but we'd have to do isCompactSideMenu ? styles.withCompactSideMenu : styles.withExpandedSideMenu in the parent component and write this much of CSS for a className, so using style seems more intuitive and simpler.

.className { height: calc(100vh - var(--global-navbar-height) - var(--vertical-margin) * 2); &.withCompactSideMenu { width: calc(100vw - var(--global-compact-side-menu-width) - var(--horizontal-margin) * 2); } &.withExpandedSideMenu { width: calc(100vw - var(--global-side-menu-width) - var(--horizontal-margin) * 2); } @include xs-breakpoint { &.withCompactSideMenu, &.withExpandedSideMenu { width: calc(100vw - var(--mobile-margin) * 2); height: calc(100vh - var(--global-navbar-height) - var(--mobile-margin) * 2); margin: var(--mobile-margin); } } }

Duncan-Brain · 2025-02-05T02:06:38Z

packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/PostSensor.tsx

-      FormContent: () => <div>Partner selection view</div>,
-      onContinueAction: linkOrganizationId,
+      FormContent: () => <Partners />,
+      onContinueAction: linkEsci,
    },
    { FormContent: () => <div>ESCI devices view</div> },


Is this temporary? I don't think ESCI devices view should be a step in the form. I see it looks that way in figma... but I am not sure its appropriate. If we are making a pattern similar to AnimalsSummary we should maybe reuse that instead and redirect to this page.

I believe it should've been implemented this way with the old header and the back button, and I was going to create another container for the sensor list page. It makes sense to redirect the user to the sensor list page with the updated design!

SayakaOno

Thank you @Duncan-Brain !
I'll try to fix the scrollbar. As for the file structure, I'll reorganize it later in a separate PR!

I'll re-open the PR once I apply the updated design. Thank you 🙏

SayakaOno · 2025-02-05T18:12:44Z

packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/PostSensor.tsx

-      FormContent: () => <div>Partner selection view</div>,
-      onContinueAction: linkOrganizationId,
+      FormContent: () => <Partners />,
+      onContinueAction: linkEsci,
    },
    { FormContent: () => <div>ESCI devices view</div> },


I believe it should've been implemented this way with the old header and the back button, and I was going to create another container for the sensor list page. It makes sense to redirect the user to the sensor list page with the updated design!

SayakaOno · 2025-02-05T18:18:24Z

packages/webapp/src/components/Form/ContextForm/Loading.tsx

+          styles.loadingScreen,
+          isCompactSideMenu ? styles.withCompactSideMenu : styles.withExpandedSideMenu,
+        )}
+        style={style}


No, it's permanent. This is the only way I know to use dynamic px values via props in CSS, but if you know a better way, please let me know!

SayakaOno · 2025-02-05T18:20:15Z

packages/webapp/src/store/api/apiSlice.ts

@@ -277,4 +288,6 @@ export const {
  useAddSoilAmendmentProductMutation,
  useUpdateSoilAmendmentProductMutation,
  useGetSensorsQuery,
+  useLazyGetSensorsQuery,


Exactly! I'm not sure if I keep it with the updated design though...

* accept showLoading instead of onContinueAction in steps * accept onAfterSave prop * avoid page transition blocking after form is saved * adjust stories

SayakaOno · 2025-02-06T00:45:06Z

Updates:

The sensors list is not part of the form anymore.
Update WithStepperProgressBar to:
- accept showLoading instead of onContinueAction in steps
- accept onAfterSave prop
- avoid page transition blocking after form is saved
- adjust stories
Fix capitalization in 'Ensemble Scientific'
Fix padding styling (it was weirdly scrollable)
Hide unnecessary scrollbar
PARTNERS constant cleanup

Thank you for re-reviewing! 🙏

SayakaOno · 2025-02-06T19:25:17Z

packages/webapp/src/util/siteMapConstants.ts

@@ -92,3 +92,6 @@ export const createCompleteTaskUrl = (id: string | number, hasAnimals: boolean):
 // Maps
 export const MAP_URL = '/map';
 export const POST_SENSOR_URL = '/create_location/sensor';
+
+// Sensors
+export const SENSORS = '/sensors';


/sensors?partner_id=1

/addon/1/sensors

I initially presented the first option to the team, but if we prioritize the addon over sensors as Duncan mentioned, we could probably go with something like the second one? Any thoughts?

Both would be good! The first one also adds flexibility if we ever decide we want to have a screen showing all sensors for all manufacturers, which would be /sensors, but Loïc said we wouldn't want to do that so maybe irrelevant.

Yeah this is tough, I agree both are good. You could choose either. I just want to keep /map out of it I think. It might make sense to eventually reach these multiple ways so I think you can choose!

So many thoughts -- but are they useful? haha

Just trying to think about how a farmer might set up an addon. Especially if that addon does multiple things like ESCI -- they provide us with both irrigation prescriptions and sensors. So I can see how navigating from /farm_setting to /addon makes sense. (option 2)

But I also understand that eventually (in the distant future) might be need for a /farm_equipment/ module where we would move access to /sensors or /irrigation_equipment and then configuring or viewing there. (option 1)

Same with /Insights/irrigation_prescriptions etc.

Since for some reason we are adding an esci addon (with both prescriptions and sensors) with the "add sensors" button it might make sense either way 🤷

antsgar

Sorry it took a while for me to review this! This looks soooo good, the loading screen with the animation is on point 🔥 it's so clean! Loving it ❤️

antsgar · 2025-02-07T18:31:00Z

packages/webapp/src/util/siteMapConstants.ts

@@ -92,3 +92,6 @@ export const createCompleteTaskUrl = (id: string | number, hasAnimals: boolean):
 // Maps
 export const MAP_URL = '/map';
 export const POST_SENSOR_URL = '/create_location/sensor';
+
+// Sensors
+export const SENSORS = '/sensors';


Both would be good! The first one also adds flexibility if we ever decide we want to have a screen showing all sensors for all manufacturers, which would be /sensors, but Loïc said we wouldn't want to do that so maybe irrelevant.

Duncan-Brain

Looking great I love how ContextForm is improving over time!

SayakaOno added enhancement New feature or request new translations New translations to be sent to CrowdIn are present labels Jan 31, 2025

SayakaOno self-assigned this Jan 31, 2025

SayakaOno added 27 commits January 31, 2025 16:37

LF-4691 Add translations

e63c9ef

LF-4691 Add esci logo

1eec16d

LF-4691 Add color codes to colors.scss

bd8b92e

LF-4691 Add Partners component

8136adb

LF-4691 Add Partners container

56207c1

LF-4691 Navigate to sensor connection flow on sensor menu click

c105c85

* remove sensor upload related code

LF-4691 Replace hard-coded post sensor URL with constant in Routes

d3cfdbc

LF-4691 Add showPreviousButton prop to WithStepperProgressBar

a8b47be

LF-4691 Style organization ID input properly

8889eef

LF-4691 Use Partners component in PostSensor

25c69e4

* send showPreviousButton prop to ContextForm

LF-4691 Impelment validation for ESCI organisation ID

07b5e28

LF-4691 Update ContextForm to accept formMode prop

f67034d

LF-4691 Add formMode prop to ContextForm in PostSensor

d5ef4a6

LF-4691 Correct organisation spelling

6c9cb8f

LF-4691 Adjust property names

7a97ea8

LF-4691 FarmAddon API setup for RTK query

9e9864e

LF-4691 Add/modify translations

49572a2

LF-4691 Integrate API POST /farm_addon

66d9fdc

LF-4691 Export useLazyGetSensorsQuery from apiSlice

2e1932c

LF-4691 'LazyGetSensors' in PostSensor onSave

c1a33bd

LF-4691 Add type for Add sensor form

14897dd

LF-4691 Use constants and types for Add sensors form

38de118

LF-4691 Remove background-color: white from formWrapper

728c6bf

LF-4691 Extract CSSLength type

7eedc50

LF-4691 Fix translation

aa18bc5

LF-4691 Update routes and PostSensor to send isCompactSideMenu

5536d2a

LF-4691 Make Loading component fixed relative to viewport

3ab9969

SayakaOno requested review from antsgar and Duncan-Brain and removed request for a team February 3, 2025 18:09

SayakaOno force-pushed the LF-4691/UI_to_connect_to_Ensemble branch from 607cb74 to c53bdf2 Compare February 3, 2025 18:11

SayakaOno added 3 commits February 3, 2025 10:29

LF-4691 Cleanup

ba93820

Revert "LF-4691 Delete unused files and code for bulk sensor upload"

b1d1182

This reverts commit 108d707.

LF-4691 Add constant for ESCI partner ID

1e4695d

Duncan-Brain previously approved these changes Feb 5, 2025

View reviewed changes

SayakaOno marked this pull request as draft February 5, 2025 17:53

SayakaOno commented Feb 5, 2025

View reviewed changes

SayakaOno added 5 commits February 5, 2025 14:51

LF-4691 Update WithStepperProgressBar

b6aba3a

* accept showLoading instead of onContinueAction in steps * accept onAfterSave prop * avoid page transition blocking after form is saved * adjust stories

LF-4691 Add sensors page URL

a559b2f

LF-4691 Adjust PostSensor

c6be0fb

LF-4691 Update PARTNERS constant

9e49b22

LF-4691 Fix capitalization in 'Ensemble Scientific'

8bf9d80

SayakaOno dismissed Duncan-Brain’s stale review via 8bf9d80 February 5, 2025 23:28

SayakaOno added 4 commits February 5, 2025 15:34

Merge branch 'integration' into LF-4691/UI_to_connect_to_Ensemble

18a70d5

LF-4691 Add classNames prop to PageTitle

76856ed

LF-4691 Set overflow-y to auto in FixedHeaderContainer

4df2984

LF-4691 Fix CSS for padding

43754f2

SayakaOno marked this pull request as ready for review February 6, 2025 00:45

SayakaOno commented Feb 6, 2025

View reviewed changes

antsgar approved these changes Feb 7, 2025

View reviewed changes

Duncan-Brain approved these changes Feb 7, 2025

View reviewed changes

Duncan-Brain added this pull request to the merge queue Feb 7, 2025

Merged via the queue into integration with commit 312f57c Feb 7, 2025
4 of 5 checks passed

Duncan-Brain deleted the LF-4691/UI_to_connect_to_Ensemble branch February 7, 2025 19:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

LF-4691: UI to connect to ensemble #3675

LF-4691: UI to connect to ensemble #3675

SayakaOno commented Jan 31, 2025 •

edited

Loading

Duncan-Brain left a comment

Duncan-Brain Feb 4, 2025

Duncan-Brain Feb 5, 2025

SayakaOno Feb 5, 2025

Duncan-Brain Feb 5, 2025

Duncan-Brain Feb 5, 2025

SayakaOno Feb 5, 2025

Duncan-Brain Feb 5, 2025

SayakaOno Feb 5, 2025

Duncan-Brain Feb 5, 2025

SayakaOno Feb 5, 2025

SayakaOno left a comment

SayakaOno Feb 5, 2025

SayakaOno Feb 5, 2025

SayakaOno Feb 5, 2025

SayakaOno commented Feb 6, 2025

SayakaOno Feb 6, 2025

antsgar Feb 7, 2025

Duncan-Brain Feb 7, 2025

antsgar left a comment

antsgar Feb 7, 2025

Duncan-Brain left a comment

LF-4691: UI to connect to ensemble #3675

LF-4691: UI to connect to ensemble #3675

Conversation

SayakaOno commented Jan 31, 2025 • edited Loading

Duncan-Brain left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SayakaOno left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SayakaOno commented Feb 6, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

antsgar left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Duncan-Brain left a comment

Choose a reason for hiding this comment

SayakaOno commented Jan 31, 2025 •

edited

Loading