Merge pull request #3399 from LiteFarmOrg/FIX_ICONS

Fix icons

packages/shared/locales/de/sensorCSV.json

@@ -14,4 +14,4 @@
     "soil_water_potential": "Boden_Wasser_Potenzial",
     "temperature": "Temperatur"
   }
-}
+}

packages/shared/locales/en/sensorCSV.json

@@ -14,4 +14,4 @@
     "soil_water_potential": "soil_water_potential",
     "temperature": "temperature"
   }
-}
+}

packages/shared/locales/es/sensorCSV.json

@@ -14,4 +14,4 @@
     "soil_water_potential": "potencial_hídrico_del_suelo",
     "temperature": "temperatura"
   }
-}
+}

packages/shared/locales/fr/sensorCSV.json

@@ -14,4 +14,4 @@
     "soil_water_potential": "potentiel_hydrique_du_sol",
     "temperature": "température"
   }
-}
+}

packages/shared/locales/pt/sensorCSV.json

@@ -14,4 +14,4 @@
     "soil_water_potential": "potencial_de_água_do_solo",
     "temperature": "temperatura"
   }
-}
+}

packages/shared/validation/csv.js

@@ -50,24 +50,24 @@ const parseCsv = (
   lang,
   validators,
   headerTranslations,
-  missingColumnsErrorKey = 'MISSING_COLUMNS',
+  missingColumnsErrorKey = "MISSING_COLUMNS",
   validateUniqueDataKeys = true,
   getDataKeyFromRow = (r) => r[validators[0].key],
   maxRows = null,
-  delimiter = ',',
+  delimiter = ","
 ) => {
   // regex checks for delimiters that are not contained within quotation marks
-  const regex = new RegExp(`(?!\\B"[^"]*)${delimiter}(?![^"]*"\\B)`)
+  const regex = new RegExp(`(?!\\B"[^"]*)${delimiter}(?![^"]*"\\B)`);
 
   // check if the length of the string is 0 or if the string contains no line returns
   if (csvString.length === 0 || !/\r\b|\r|\n/.test(csvString)) {
     return { data: [], errors: [] };
   }
 
-  const rows = csvString.split(/\r\n|\r|\n/).filter((elem) => elem !== '');
+  const rows = csvString.split(/\r\n|\r|\n/).filter((elem) => elem !== "");
 
   if (rows.length === 0) {
-    return { data: [], errors: []}
+    return { data: [], errors: [] };
   }
 
   const headers = rows[0].split(regex).map((h) => h.trim());
@@ -77,7 +77,11 @@ const parseCsv = (
   const headerErrors = [];
   requiredHeaders.forEach((header) => {
     if (!headers.includes(header)) {
-      headerErrors.push({ row: 1, column: header, translation_key: missingColumnsErrorKey });
+      headerErrors.push({
+        row: 1,
+        column: header,
+        translation_key: missingColumnsErrorKey,
+      });
     }
   });
   if (headerErrors.length > 0) {
@@ -96,17 +100,21 @@ const parseCsv = (
         {
           row: 1,
           column: "N/A",
-          translation_key: 'FARM_MAP.BULK_UPLOAD_SENSORS.VALIDATION.FILE_ROW_LIMIT_EXCEEDED',
-          value: ""
-        }
-      ]
-    }
+          translation_key:
+            "FARM_MAP.BULK_UPLOAD_SENSORS.VALIDATION.FILE_ROW_LIMIT_EXCEEDED",
+          value: "",
+        },
+      ],
+    };
   }
   // Set to keep track of the unique keys - used to make sure only one data entry is uploaded
   // with a particular key defined by getDataKeyFromRow if duplicates are in the file
   const uniqueDataKeys = new Set();
 
-  const headerMapping = getHeaderToValidatorMapping(validators, headerTranslations);
+  const headerMapping = getHeaderToValidatorMapping(
+    validators,
+    headerTranslations
+  );
 
   const { data, errors } = dataRows.reduce(
     (previous, row, rowIndex) => {
@@ -115,16 +123,24 @@ const parseCsv = (
         const currentValidator = validators[headerMapping[current]];
         if (allowedHeaders.includes(current)) {
           // remove any surrounding quotation marks
-          const val = values[index].replace(/^(["'])(.*)\1$/, '$2');
-          const parsedVal = currentValidator.parse(values[index].replace(/^(["'])(.*)\1$/, '$2'), lang);
+          const val = values[index].replace(/^(["'])(.*)\1$/, "$2");
+          const parsedVal = currentValidator.parse(
+            values[index].replace(/^(["'])(.*)\1$/, "$2"),
+            lang
+          );
           if (currentValidator.validate(parsedVal)) {
             previousObj[currentValidator.key] = parsedVal;
           } else {
             previous.errors.push({
               row: rowIndex + 2,
               column: current,
               translation_key: currentValidator.errorTranslationKey,
-              variables: { [currentValidator.key]: currentValidator.key.useParsedValForError ? parsedVal : val },
+              variables: {
+                [currentValidator.key]: currentValidator.key
+                  .useParsedValForError
+                  ? parsedVal
+                  : val,
+              },
             });
           }
         }
@@ -142,7 +158,7 @@ const parseCsv = (
       }
       return previous;
     },
-    { data: [], errors: [] },
+    { data: [], errors: [] }
   );
 
   return { data, errors };

packages/shared/validation/sensorCSV.js

@@ -17,20 +17,26 @@ import parseCsv from "./csv.js";
 
 // Sensor bulk upload error translation keys
 export const sensorErrors = {
-  FILE_ROW_LIMIT_EXCEEDED: "FARM_MAP.BULK_UPLOAD_SENSORS.VALIDATION.FILE_ROW_LIMIT_EXCEEDED",
+  FILE_ROW_LIMIT_EXCEEDED:
+    "FARM_MAP.BULK_UPLOAD_SENSORS.VALIDATION.FILE_ROW_LIMIT_EXCEEDED",
   MISSING_COLUMNS: "FARM_MAP.BULK_UPLOAD_SENSORS.VALIDATION.MISSING_COLUMNS",
   EXTERNAL_ID: "FARM_MAP.BULK_UPLOAD_SENSORS.VALIDATION.EXTERNAL_ID",
   SENSOR_NAME: "FARM_MAP.BULK_UPLOAD_SENSORS.VALIDATION.SENSOR_NAME",
   SENSOR_LATITUDE: "FARM_MAP.BULK_UPLOAD_SENSORS.VALIDATION.SENSOR_LATITUDE",
   SENSOR_LONGITUDE: "FARM_MAP.BULK_UPLOAD_SENSORS.VALIDATION.SENSOR_LONGITUDE",
-  SENSOR_READING_TYPES: "FARM_MAP.BULK_UPLOAD_SENSORS.VALIDATION.SENSOR_READING_TYPES",
+  SENSOR_READING_TYPES:
+    "FARM_MAP.BULK_UPLOAD_SENSORS.VALIDATION.SENSOR_READING_TYPES",
   SENSOR_DEPTH: "FARM_MAP.BULK_UPLOAD_SENSORS.VALIDATION.SENSOR_DEPTH",
   SENSOR_BRAND: "FARM_MAP.BULK_UPLOAD_SENSORS.VALIDATION.SENSOR_BRAND",
   SENSOR_MODEL: "FARM_MAP.BULK_UPLOAD_SENSORS.VALIDATION.SENSOR_MODEL",
-  SENSOR_HARDWARE_VERSION: "FARM_MAP.BULK_UPLOAD_SENSORS.VALIDATION.SENSOR_HARDWARE_VERSION",
-  SENSOR_ALREADY_OCCUPIED: "FARM_MAP.BULK_UPLOAD_SENSORS.SENSOR_CLAIM_ERROR.ALREADY_OCCUPIED",
-  SENSOR_DOES_NOT_EXIST: "FARM_MAP.BULK_UPLOAD_SENSORS.SENSOR_CLAIM_ERROR.DOES_NOT_EXIST",
-  INTERNAL_ERROR: "FARM_MAP.BULK_UPLOAD_SENSORS.SENSOR_CLAIM_ERROR.INTERNAL_ERROR",
+  SENSOR_HARDWARE_VERSION:
+    "FARM_MAP.BULK_UPLOAD_SENSORS.VALIDATION.SENSOR_HARDWARE_VERSION",
+  SENSOR_ALREADY_OCCUPIED:
+    "FARM_MAP.BULK_UPLOAD_SENSORS.SENSOR_CLAIM_ERROR.ALREADY_OCCUPIED",
+  SENSOR_DOES_NOT_EXIST:
+    "FARM_MAP.BULK_UPLOAD_SENSORS.SENSOR_CLAIM_ERROR.DOES_NOT_EXIST",
+  INTERNAL_ERROR:
+    "FARM_MAP.BULK_UPLOAD_SENSORS.SENSOR_CLAIM_ERROR.INTERNAL_ERROR",
 };
 
 const sensorCsvValidators = (translations) => {
@@ -71,14 +77,24 @@ const sensorCsvValidators = (translations) => {
       key: "reading_types",
       parse: (val, lang) => {
         const rawReadingTypes = val.replaceAll(" ", "").split(",");
-        return getReadableValuesForReadingTypes(lang, rawReadingTypes, translations);
+        return getReadableValuesForReadingTypes(
+          lang,
+          rawReadingTypes,
+          translations
+        );
       },
       validate: (val) => {
         if (!val.length || (val.length === 1 && val[0] === "")) {
           return false;
         }
-        const allowedReadingTypes = ["soil_water_potential", "soil_water_content", "temperature"];
-        return val.every((readingType) => allowedReadingTypes.includes(readingType));
+        const allowedReadingTypes = [
+          "soil_water_potential",
+          "soil_water_content",
+          "temperature",
+        ];
+        return val.every((readingType) =>
+          allowedReadingTypes.includes(readingType)
+        );
       },
       required: true,
       errorTranslationKey: sensorErrors.SENSOR_READING_TYPES,
@@ -113,7 +129,9 @@ const sensorCsvValidators = (translations) => {
 
 // Returns the readable values to save in the database based on the given translated reading types
 const getReadableValuesForReadingTypes = (lang, readingTypes, translations) => {
-  const translationEntries = Object.entries(translations.READING_TYPE_TRANSLATIONS);
+  const translationEntries = Object.entries(
+    translations.READING_TYPE_TRANSLATIONS
+  );
   return readingTypes.map((rt) => {
     const entryWithReadableValue = translationEntries.find((e) => e[1] === rt);
     return entryWithReadableValue ? entryWithReadableValue[0] : null;
@@ -137,7 +155,7 @@ export const parseSensorCsv = (csvString, lang, translations) => {
     sensorErrors.MISSING_COLUMNS,
     true,
     generateSensorKey,
-    100,
+    100
   );
 };
 

packages/webapp/public/locales/de/crop_nutrients.json

@@ -25,4 +25,4 @@
   "VITAMIN_B12": "Vitamin B12",
   "MAX_ROOTING": "Maximale Wurzelentwicklung",
   "NUTRIENT_CREDITS": "Nährstoffgutschriften"
-}
+}

packages/webapp/public/locales/hi/crop_nutrients.json

@@ -25,4 +25,4 @@
   "VITAMIN_B12": "विटामिन B12",
   "MAX_ROOTING": "अधिकतम जड़न",
   "NUTRIENT_CREDITS": "पोषक तत्व क्रेडिट"
-}
+}

packages/webapp/public/locales/pa/crop_nutrients.json

@@ -25,4 +25,4 @@
   "VITAMIN_B12": "ਵਿਟਾਮਿਨ ਬੀ 12",
   "MAX_ROOTING": "ਅਧਿਕਤਮ ਰੀਫਲੈਕਸ",
   "NUTRIENT_CREDITS": "ਪੌਸ਼ਟਿਕ ਕ੍ਰੈਡਿਟ"
-}
+}

packages/webapp/src/assets/mixin.scss

@@ -53,6 +53,7 @@
 }
 
 // Custom icons from figma use a variety of strokes and fills
+// Does not work with multi-color icons or icons with background color (ex. BATCH)
 @mixin svgColorFill($newColor) {
   svg {
     path {

packages/webapp/src/components/ActionMenu/index.tsx

@@ -16,16 +16,16 @@
 import { ReactNode } from 'react';
 import clsx from 'clsx';
 import TextButton from '../Form/Button/TextButton';
-import Icon from '../Icons';
+import Icon, { IconName } from '../Icons';
 import styles from './styles.module.scss';
 
 interface action {
   label: string;
   onClick: () => void;
 }
 
-interface iconAction extends action {
-  iconName: string;
+export interface iconAction extends action {
+  iconName: IconName;
 }
 
 export interface ActionMenuProps {

packages/webapp/src/components/Animals/AddAnimalsForm/AnimalFormHeaderItem/index.tsx

@@ -23,11 +23,12 @@ import { IconLink, Main } from '../../../Typography';
 import Icon from '../../../Icons';
 import TextButton from '../../../Form/Button/TextButton';
 import { ReactComponent as TrashIcon } from '../../../../assets/images/animals/trash_icon_new.svg';
+import { AnimalTypeIconKey } from '../../../Icons/icons';
 
 type BaseFormHeader = {
   type: string;
   breed?: string;
-  iconKey: string;
+  iconKey: AnimalTypeIconKey;
   number: number;
   totalCount: number;
   showRemove?: boolean;

packages/webapp/src/components/Animals/AddAnimalsForm/MoreAnimalsCard.tsx

@@ -16,7 +16,7 @@
 import clsx from 'clsx';
 import styles from './styles.module.scss';
 import { useTranslation } from 'react-i18next';
-import Icon, { Icons } from '../../Icons';
+import Icon, { Icons, IconProps } from '../../Icons';
 import Button from '../../Form/Button';
 
 type MoreAnimalCardProps = {
@@ -27,8 +27,8 @@ type MoreAnimalCardProps = {
 export const MoreAnimalsCard = ({ className, onClick }: MoreAnimalCardProps) => {
   const { t } = useTranslation();
 
-  const iconDetails = [
-    { iconName: 'PIG' },
+  const iconDetails: IconProps[] = [
+    { iconName: 'PIGS' },
     { iconName: 'CHICKEN' },
     { iconName: 'RABBIT' },
     { iconName: 'SHEEP' },

packages/webapp/src/components/Animals/AddAnimalsSummaryCard/index.tsx

@@ -20,9 +20,9 @@ import { ReactComponent as RelaxedFarmer } from '../../../assets/images/animals/
 import { ReactComponent as ChevronRight } from '../../../assets/images/buttons/chevron-right.svg';
 import Button from '../../Form/Button';
 import { IconSummary } from './IconSummary';
-import { iconNames } from '../../../containers/Animals/constants';
 import { AnimalSummary, BatchSummary } from './types';
 import { useMediaQuery, useTheme } from '@mui/material';
+import { isAnimalTypeIconKey } from '../../Icons/icons';
 
 interface AddAnimalsSummaryCardProps {
   onContinue: () => void;
@@ -101,14 +101,12 @@ const IconSummaryAndButton = ({
     <div className={styles.iconSummaryAndButtonContainer}>
       <div className={styles.iconSummaryContainer}>
         {animalsInfo.map((animal, index) => {
-          const animalIconKey =
-            iconNames[animal.iconKey as keyof typeof iconNames] || iconNames[''];
           return (
             <IconSummary
               key={index}
               isBatch={false}
               sexDetails={animal.sexDetails}
-              iconKey={animalIconKey}
+              iconKey={isAnimalTypeIconKey(animal.iconKey) ? animal.iconKey : 'CUSTOM_ANIMAL'}
               type={animal.type}
               breed={animal.breed}
               count={animal.count}

packages/webapp/src/components/Animals/AddAnimalsSummaryCard/types.ts

@@ -13,6 +13,8 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
+import { AnimalTypeIconKey } from '../../Icons/icons';
+
 export interface AnimalSexCountSummary {
   [key: string]: number | undefined;
 }
@@ -21,7 +23,7 @@ export interface AnimalSummary {
   type: string; // Translated, to display in the card
   breed?: string;
   sexDetails: AnimalSexCountSummary;
-  iconKey: string;
+  iconKey: AnimalTypeIconKey;
   count: number;
 }