LF-4691 Impelment validation for ESCI organisation ID

packages/webapp/public/locales/en/translation.json

@@ -1807,7 +1807,8 @@
       "CURRENT_SUPPORT": "We currently only support sensors from \"Ensemble scientific \"",
       "ENSEMBLE_ESID": "Ensemble ESID",
       "ENTER_ID": "Enter you ensemble scientific ID",
-      "ORGANIZATION_ID": "ESCI organisation ID"
+      "ORGANIZATION_ID": "ESCI organisation ID",
+      "ORGANIZATION_ID_ERROR": "Invalid Organisation ID"
     },
     "EXTERNAL_IDENTIFIER": "External identifier",
     "HOURS_AGO": "{{time}} hour(s) ago",

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

@@ -15,7 +15,8 @@
 
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import Input from '../../Form/Input';
+import { validate as uuidValidate } from 'uuid';
+import Input, { getInputErrors } from '../../Form/Input';
 import InputBaseLabel from '../../Form/InputBase/InputBaseLabel';
 import { Main } from '../../Typography';
 import EsciLogo from '../../../assets/images/partners/esci_logo.png';
@@ -27,6 +28,10 @@ type PartnersProps = {
   };
 };
 
+const validateUuidFormat = (value: string, errorMessage: string) => {
+  return uuidValidate(value) || errorMessage;
+};
+
 const PARTNERS = [{ name: 'Ensemble scientific', url: 'www.esci.io', logoPath: EsciLogo }];
 
 const Partner = ({ name, url, logoPath }: { name: string; url: string; logoPath: string }) => {
@@ -47,7 +52,10 @@ const Partner = ({ name, url, logoPath }: { name: string; url: string; logoPath:
 
 const Partners = ({ hasActiveConnection }: PartnersProps) => {
   const { t } = useTranslation();
-  const { register } = useFormContext();
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
 
   return (
     <div className={styles.wrapper}>
@@ -66,7 +74,12 @@ const Partners = ({ hasActiveConnection }: PartnersProps) => {
             <Input
               placeholder={t('SENSOR.ESCI.ORGANIZATION_ID')}
               type="text"
-              hookFormRegister={register('partner.organization_uuid', { required: true })}
+              hookFormRegister={register('partner.organization_uuid', {
+                required: true,
+                validate: (value) =>
+                  validateUuidFormat(value, t('SENSOR.ESCI.ORGANIZATION_ID_ERROR')),
+              })}
+              errors={getInputErrors(errors, 'partner.organization_uuid')}
             />
           </div>
         </div>