From 781bdbd864d700f126b84cf7bb8a5b4f7f3e662f Mon Sep 17 00:00:00 2001
From: Paul Schreiber <paul@techmatters.org>
Date: Wed, 24 Jul 2024 09:34:50 -0400
Subject: [PATCH] fix: on slope data screen, hide edit buttons from viewers and
 limit percentage input (#1834)

* fix: add maximum for slope steepness

* fix: hide slope data entry buttons from viewers

* fix: add maxLength attribute to steepness text input fields
---
 .../SlopeScreen/SlopeSteepnessScreen.tsx      | 112 ++++++++++--------
 .../components/ManualSteepnessModal.tsx       |   5 +-
 dev-client/src/translations/en.json           |   2 +-
 3 files changed, 70 insertions(+), 49 deletions(-)

diff --git a/dev-client/src/screens/SlopeScreen/SlopeSteepnessScreen.tsx b/dev-client/src/screens/SlopeScreen/SlopeSteepnessScreen.tsx
index c7539776c..2987ccedb 100644
--- a/dev-client/src/screens/SlopeScreen/SlopeSteepnessScreen.tsx
+++ b/dev-client/src/screens/SlopeScreen/SlopeSteepnessScreen.tsx
@@ -43,6 +43,8 @@ import {
   Row,
   Text,
 } from 'terraso-mobile-client/components/NativeBaseAdapters';
+import {RestrictBySiteRole} from 'terraso-mobile-client/components/RestrictByRole';
+import {SiteRoleContextProvider} from 'terraso-mobile-client/context/SiteRoleContext';
 import {AppBar} from 'terraso-mobile-client/navigation/components/AppBar';
 import {useNavigation} from 'terraso-mobile-client/navigation/hooks/useNavigation';
 import {ScreenScaffold} from 'terraso-mobile-client/screens/ScreenScaffold';
@@ -123,57 +125,73 @@ export const SlopeSteepnessScreen = ({siteId}: Props) => {
 
   return (
     <ScreenScaffold AppBar={<AppBar title={name} />} BottomNavigation={null}>
-      <ScrollView
-        bg="primary.contrast"
-        _contentContainerStyle={styles.scrollContentContainer}>
-        <Column>
-          <Column p="15px" bg="primary.contrast">
-            <Heading variant="h6">{t('slope.steepness.long_title')}</Heading>
+      <SiteRoleContextProvider siteId={siteId}>
+        <ScrollView
+          bg="primary.contrast"
+          _contentContainerStyle={styles.scrollContentContainer}>
+          <Column>
+            <Column p="15px" bg="primary.contrast">
+              <Heading variant="h6">{t('slope.steepness.long_title')}</Heading>
+            </Column>
           </Column>
-        </Column>
-        <Column p="15px" bg="grey.300">
-          <Text variant="body1">{t('slope.steepness.description')}</Text>
-          <Box height="30px" />
-          <Row justifyContent="space-between">
-            <Modal
-              trigger={onOpen => (
+          <Column p="15px" bg="grey.300">
+            <RestrictBySiteRole
+              role={[
+                {kind: 'site', role: 'OWNER'},
+                {kind: 'project', role: 'MANAGER'},
+                {kind: 'project', role: 'CONTRIBUTOR'},
+              ]}>
+              <Text variant="body1">{t('slope.steepness.description')}</Text>
+              <Box height="30px" />
+              <Row justifyContent="space-between">
+                <Modal
+                  trigger={onOpen => (
+                    <Button
+                      onPress={onOpen}
+                      _text={{textTransform: 'uppercase'}}
+                      rightIcon={<Icon name="chevron-right" />}>
+                      {t('slope.steepness.manual_label')}
+                    </Button>
+                  )}>
+                  <ManualSteepnessModal siteId={siteId} />
+                </Modal>
                 <Button
-                  onPress={onOpen}
                   _text={{textTransform: 'uppercase'}}
-                  rightIcon={<Icon name="chevron-right" />}>
-                  {t('slope.steepness.manual_label')}
+                  rightIcon={<Icon name="chevron-right" />}
+                  onPress={onMeter}>
+                  {t('slope.steepness.slope_meter')}
                 </Button>
-              )}>
-              <ManualSteepnessModal siteId={siteId} />
-            </Modal>
-            <Button
-              _text={{textTransform: 'uppercase'}}
-              rightIcon={<Icon name="chevron-right" />}
-              onPress={onMeter}>
-              {t('slope.steepness.slope_meter')}
-            </Button>
-          </Row>
-          <Box height="15px" />
-          <Text variant="body1" fontWeight={700} alignSelf="center">
-            {renderSteepness(t, soilData)}
-          </Text>
-        </Column>
-        <ConfirmModal
-          ref={confirmationModalRef}
-          title={t('slope.steepness.confirm_title')}
-          body={t('slope.steepness.confirm_body')}
-          actionName={t('general.change')}
-          handleConfirm={onConfirmSteepness}
-          isConfirmError={false}
-        />
-        <ImageRadio
-          value={soilData.slopeSteepnessSelect}
-          options={steepnessOptions as any}
-          onChange={onSteepnessOptionSelected}
-          minimumPerRow={2}
-        />
-      </ScrollView>
-      <DoneButton />
+              </Row>
+              <Box height="15px" />
+            </RestrictBySiteRole>
+            <Text variant="body1" fontWeight={700} alignSelf="center">
+              {renderSteepness(t, soilData)}
+            </Text>
+          </Column>
+          <ConfirmModal
+            ref={confirmationModalRef}
+            title={t('slope.steepness.confirm_title')}
+            body={t('slope.steepness.confirm_body')}
+            actionName={t('general.change')}
+            handleConfirm={onConfirmSteepness}
+            isConfirmError={false}
+          />
+          <ImageRadio
+            value={soilData.slopeSteepnessSelect}
+            options={steepnessOptions as any}
+            onChange={onSteepnessOptionSelected}
+            minimumPerRow={2}
+          />
+        </ScrollView>
+        <RestrictBySiteRole
+          role={[
+            {kind: 'project', role: 'MANAGER'},
+            {kind: 'project', role: 'CONTRIBUTOR'},
+            {kind: 'site', role: 'OWNER'},
+          ]}>
+          <DoneButton />
+        </RestrictBySiteRole>
+      </SiteRoleContextProvider>
     </ScreenScaffold>
   );
 };
diff --git a/dev-client/src/screens/SlopeScreen/components/ManualSteepnessModal.tsx b/dev-client/src/screens/SlopeScreen/components/ManualSteepnessModal.tsx
index 245e7e648..1658c8d16 100644
--- a/dev-client/src/screens/SlopeScreen/components/ManualSteepnessModal.tsx
+++ b/dev-client/src/screens/SlopeScreen/components/ManualSteepnessModal.tsx
@@ -64,7 +64,8 @@ export const ManualSteepnessModal = ({siteId}: Props) => {
           .nullable()
           .optional()
           .typeError(t('slope.steepness.percentage_help'))
-          .min(0, t('slope.steepness.percentage_help')),
+          .min(0, t('slope.steepness.percentage_help'))
+          .max(999, t('slope.steepness.percentage_help')),
         slopeSteepnessDegree: yup
           .number()
           .nullable()
@@ -139,6 +140,7 @@ export const ManualSteepnessModal = ({siteId}: Props) => {
                 helpText={t('slope.steepness.percentage_help')}
                 placeholder={t('slope.steepness.percentage_placeholder')}
                 textInputLabel={t('slope.steepness.percentage_placeholder')}
+                maxLength={3}
                 onChangeText={text => {
                   handleChange('slopeSteepnessPercent')(text);
                   setLastTouched('slopeSteepnessPercent');
@@ -164,6 +166,7 @@ export const ManualSteepnessModal = ({siteId}: Props) => {
                 helpText={t('slope.steepness.degree_help')}
                 placeholder={t('slope.steepness.degree_placeholder')}
                 textInputLabel={t('slope.steepness.degree_placeholder')}
+                maxLength={2}
                 onChangeText={text => {
                   handleChange('slopeSteepnessDegree')(text);
                   setLastTouched('slopeSteepnessDegree');
diff --git a/dev-client/src/translations/en.json b/dev-client/src/translations/en.json
index 324d1258b..2dd3f866e 100644
--- a/dev-client/src/translations/en.json
+++ b/dev-client/src/translations/en.json
@@ -833,7 +833,7 @@
       "confirm_title": "Change slope?",
       "confirm_body": "Are you sure you want to override the slope data?",
       "percentage_placeholder": "Percentage",
-      "percentage_help": "0% minimum",
+      "percentage_help": "0%–999%",
       "degree": "{{value}}°",
       "degree_help": "0°–89°",
       "degree_placeholder": "Degree",