feat: add tooltip for projects and units forms

Chia-Network · Jun 10, 2022 · 2c5e708 · 2c5e708
1 parent 3495b77
commit 2c5e708
Show file tree

Hide file tree

Showing 16 changed files with 124 additions and 29 deletions.
diff --git a/src/components/blocks/ComponentRepeater.js b/src/components/blocks/ComponentRepeater.js
@@ -5,6 +5,8 @@ import _ from 'lodash';
 
 import { Body } from '../typography';
 import { FormattedMessage } from 'react-intl';
+import { ToolTipContainer } from '.';
+import { DescriptionIcon } from '..';
 
 const StyledRepeatedComponentContainer = styled('div')`
   display: flex;
@@ -22,6 +24,7 @@ const ComponentRepeater = ({
   initialValue,
   addIcon,
   removeIcon,
+  useToolTip,
   maxRepetitions = 2,
   minRepetitions = 0,
 }) => {
@@ -76,6 +79,11 @@ const ComponentRepeater = ({
           {addIcon}
           <Body color="#1890ff">
             <FormattedMessage id="click-to-add" />
+            {useToolTip && (
+              <ToolTipContainer tooltip={useToolTip}>
+                <DescriptionIcon height="14" width="20" />
+              </ToolTipContainer>
+            )}
           </Body>
         </StyledRepeatedComponentContainer>
       )}

diff --git a/src/components/forms/CoBenefitsRepeater.js b/src/components/forms/CoBenefitsRepeater.js
@@ -3,15 +3,20 @@ import { AddIcon, CloseIcon } from '..';
 import { CreateCoBenefitsForm } from '.';
 import { ComponentRepeater } from '..';
 
-function CoBenefitsRepeater({ coBenefitsState, setNewCoBenefitsState }) {
+function CoBenefitsRepeater({
+  coBenefitsState,
+  setNewCoBenefitsState,
+  useToolTip,
+}) {
   return (
     <div style={{ padding: '20px 30px' }}>
       <ComponentRepeater
+        useToolTip={useToolTip}
         maxRepetitions={100}
         values={coBenefitsState}
         updateValues={setNewCoBenefitsState}
         initialValue={{
-          cobenefit: ''
+          cobenefit: '',
         }}
         component={<CreateCoBenefitsForm />}
         addIcon={<AddIcon height={14} width={14} fill={'#1890FF'} />}

diff --git a/src/components/forms/CreateProjectForm.js b/src/components/forms/CreateProjectForm.js
@@ -124,8 +124,7 @@ const CreateProjectForm = ({ onClose, modalSizeAndPosition }) => {
                   <Step
                     key={index}
                     onClick={() => onChangeStep(index)}
-                    sx={{ cursor: 'pointer' }}
-                  >
+                    sx={{ cursor: 'pointer' }}>
                     <StepLabel>
                       {intl.formatMessage({
                         id: stepTranslationId,
@@ -138,15 +137,17 @@ const CreateProjectForm = ({ onClose, modalSizeAndPosition }) => {
               <TabPanel
                 style={{ paddingTop: '1.25rem' }}
                 value={tabValue}
-                index={0}
-              >
+                index={0}>
                 <ProjectDetailsForm
                   projectDetails={project}
                   setProjectDetails={setProject}
                 />
               </TabPanel>
               <TabPanel value={tabValue} index={1}>
                 <ProjectIssuancesRepeater
+                  useToolTip={intl.formatMessage({
+                    id: 'issuances-optional',
+                  })}
                   issuanceState={project?.issuances ?? []}
                   newIssuanceState={value =>
                     setProject(prev => ({
@@ -158,6 +159,9 @@ const CreateProjectForm = ({ onClose, modalSizeAndPosition }) => {
               </TabPanel>
               <TabPanel value={tabValue} index={2}>
                 <LocationsRepeater
+                  useToolTip={intl.formatMessage({
+                    id: 'locations-optional',
+                  })}
                   locationsState={project?.projectLocations ?? []}
                   setLocationsState={value =>
                     setProject(prev => ({
@@ -169,6 +173,9 @@ const CreateProjectForm = ({ onClose, modalSizeAndPosition }) => {
               </TabPanel>
               <TabPanel value={tabValue} index={3}>
                 <EstimationsRepeater
+                  useToolTip={intl.formatMessage({
+                    id: 'estimations-optional',
+                  })}
                   estimationsState={project?.estimations ?? []}
                   setEstimationsState={value =>
                     setProject(prev => ({
@@ -180,6 +187,9 @@ const CreateProjectForm = ({ onClose, modalSizeAndPosition }) => {
               </TabPanel>
               <TabPanel value={tabValue} index={4}>
                 <ProjectLabelsRepeater
+                  useToolTip={intl.formatMessage({
+                    id: 'labels-optional',
+                  })}
                   labelsState={project?.labels ?? []}
                   newLabelsState={value =>
                     setProject(prev => ({
@@ -191,6 +201,9 @@ const CreateProjectForm = ({ onClose, modalSizeAndPosition }) => {
               </TabPanel>
               <TabPanel value={tabValue} index={5}>
                 <RatingsRepeater
+                  useToolTip={intl.formatMessage({
+                    id: 'ratings-optional',
+                  })}
                   ratingsState={project?.projectRatings ?? []}
                   setRatingsState={value =>
                     setProject(prev => ({
@@ -202,6 +215,9 @@ const CreateProjectForm = ({ onClose, modalSizeAndPosition }) => {
               </TabPanel>
               <TabPanel value={tabValue} index={6}>
                 <CoBenefitsRepeater
+                  useToolTip={intl.formatMessage({
+                    id: 'cobenefits-optional',
+                  })}
                   coBenefitsState={project?.coBenefits ?? []}
                   setNewCoBenefitsState={value =>
                     setProject(prev => ({
@@ -213,6 +229,9 @@ const CreateProjectForm = ({ onClose, modalSizeAndPosition }) => {
               </TabPanel>
               <TabPanel value={tabValue} index={7}>
                 <RelatedProjectsRepeater
+                  useToolTip={intl.formatMessage({
+                    id: 'relatedprojects-optional',
+                  })}
                   relatedProjectsState={project?.relatedProjects ?? []}
                   setRelatedProjectsState={value =>
                     setProject(prev => ({

diff --git a/src/components/forms/CreateUnitsForm.js b/src/components/forms/CreateUnitsForm.js
@@ -13,7 +13,11 @@ import {
 } from '../../store/actions/climateWarehouseActions';
 import UnitIssuanceRepeater from './UnitIssuanceRepeater';
 import UnitLabelsRepeater from './UnitLabelsRepeater';
-import { TabPanel, Modal, modalTypeEnum } from '..';
+import {
+  TabPanel,
+  Modal,
+  modalTypeEnum,
+} from '..';
 import { unitsSchema } from '../../store/validations';
 import { UnitDetailsForm } from '.';
 import { cleanObjectFromEmptyFieldsOrArrays } from '../../utils/formatData';
@@ -140,8 +144,7 @@ const CreateUnitsForm = ({ onClose, modalSizeAndPosition }) => {
                   <Step
                     key={index}
                     onClick={() => onChangeStep(index)}
-                    sx={{ cursor: 'pointer' }}
-                  >
+                    sx={{ cursor: 'pointer' }}>
                     <StepLabel>
                       {intl.formatMessage({
                         id: step,
@@ -153,8 +156,7 @@ const CreateUnitsForm = ({ onClose, modalSizeAndPosition }) => {
             <TabPanel
               style={{ paddingTop: '1.25rem' }}
               value={tabValue}
-              index={0}
-            >
+              index={0}>
               <UnitDetailsForm unitDetails={unit} setUnitDetails={setUnit} />
             </TabPanel>
             <TabPanel value={tabValue} index={1}>
@@ -171,6 +173,9 @@ const CreateUnitsForm = ({ onClose, modalSizeAndPosition }) => {
             </TabPanel>
             <TabPanel value={tabValue} index={2}>
               <UnitLabelsRepeater
+                useToolTip={intl.formatMessage({
+                  id: 'labels-units-optional',
+                })}
                 labelsState={unit?.labels ?? []}
                 newLabelsState={value =>
                   setUnit(prev => ({

diff --git a/src/components/forms/EditProjectsForm.js b/src/components/forms/EditProjectsForm.js
@@ -125,8 +125,7 @@ const EditProjectsForm = ({
                   <Step
                     key={index}
                     onClick={() => onChangeStep(index)}
-                    sx={{ cursor: 'pointer' }}
-                  >
+                    sx={{ cursor: 'pointer' }}>
                     <StepLabel>
                       {intl.formatMessage({
                         id: stepTranslationId,
@@ -139,15 +138,17 @@ const EditProjectsForm = ({
               <TabPanel
                 style={{ paddingTop: '1.25rem' }}
                 value={tabValue}
-                index={0}
-              >
+                index={0}>
                 <ProjectDetailsForm
                   projectDetails={project}
                   setProjectDetails={setProject}
                 />
               </TabPanel>
               <TabPanel value={tabValue} index={1}>
                 <ProjectIssuancesRepeater
+                  useToolTip={intl.formatMessage({
+                    id: 'issuances-optional',
+                  })}
                   issuanceState={project?.issuances ?? []}
                   newIssuanceState={value =>
                     setProject(prev => ({
@@ -159,6 +160,9 @@ const EditProjectsForm = ({
               </TabPanel>
               <TabPanel value={tabValue} index={2}>
                 <LocationsRepeater
+                  useToolTip={intl.formatMessage({
+                    id: 'locations-optional',
+                  })}
                   locationsState={project?.projectLocations ?? []}
                   setLocationsState={value =>
                     setProject(prev => ({
@@ -170,6 +174,9 @@ const EditProjectsForm = ({
               </TabPanel>
               <TabPanel value={tabValue} index={3}>
                 <EstimationsRepeater
+                  useToolTip={intl.formatMessage({
+                    id: 'estimations-optional',
+                  })}
                   estimationsState={project?.estimations ?? []}
                   setEstimationsState={value =>
                     setProject(prev => ({
@@ -181,6 +188,9 @@ const EditProjectsForm = ({
               </TabPanel>
               <TabPanel value={tabValue} index={4}>
                 <ProjectLabelsRepeater
+                  useToolTip={intl.formatMessage({
+                    id: 'labels-optional',
+                  })}
                   labelsState={project?.labels ?? []}
                   newLabelsState={value =>
                     setProject(prev => ({
@@ -192,6 +202,9 @@ const EditProjectsForm = ({
               </TabPanel>
               <TabPanel value={tabValue} index={5}>
                 <RatingsRepeater
+                  useToolTip={intl.formatMessage({
+                    id: 'ratings-optional',
+                  })}
                   ratingsState={project?.projectRatings ?? []}
                   setRatingsState={value =>
                     setProject(prev => ({
@@ -204,6 +217,9 @@ const EditProjectsForm = ({
 
               <TabPanel value={tabValue} index={6}>
                 <CoBenefitsRepeater
+                  useToolTip={intl.formatMessage({
+                    id: 'cobenefits-optional',
+                  })}
                   coBenefitsState={project?.coBenefits ?? []}
                   setNewCoBenefitsState={value =>
                     setProject(prev => ({
@@ -216,6 +232,9 @@ const EditProjectsForm = ({
 
               <TabPanel value={tabValue} index={7}>
                 <RelatedProjectsRepeater
+                  useToolTip={intl.formatMessage({
+                    id: 'relatedprojects-optional',
+                  })}
                   relatedProjectsState={project?.relatedProjects ?? []}
                   setRelatedProjectsState={value =>
                     setProject(prev => ({

diff --git a/src/components/forms/EditUnitsForm.js b/src/components/forms/EditUnitsForm.js
@@ -139,8 +139,7 @@ const EditUnitsForm = ({ onClose, record, modalSizeAndPosition }) => {
                   <Step
                     key={index}
                     onClick={() => onChangeStep(index)}
-                    sx={{ cursor: 'pointer' }}
-                  >
+                    sx={{ cursor: 'pointer' }}>
                     <StepLabel>
                       {intl.formatMessage({
                         id: step,
@@ -152,8 +151,7 @@ const EditUnitsForm = ({ onClose, record, modalSizeAndPosition }) => {
             <TabPanel
               style={{ paddingTop: '1.25rem' }}
               value={tabValue}
-              index={0}
-            >
+              index={0}>
               <UnitDetailsForm unitDetails={unit} setUnitDetails={setUnit} />
             </TabPanel>
             <TabPanel value={tabValue} index={1}>
@@ -170,6 +168,9 @@ const EditUnitsForm = ({ onClose, record, modalSizeAndPosition }) => {
             </TabPanel>
             <TabPanel value={tabValue} index={2}>
               <UnitLabelsRepeater
+                useToolTip={intl.formatMessage({
+                  id: 'labels-units-optional',
+                })}
                 labelsState={unit.labels}
                 newLabelsState={value =>
                   setUnit(prev => ({

diff --git a/src/components/forms/EstimationsRepeater.js b/src/components/forms/EstimationsRepeater.js
@@ -6,10 +6,15 @@ import {
   CreateEstimationsForm,
 } from '..';
 
-function EstimationsRepeater({ estimationsState, setEstimationsState }) {
+function EstimationsRepeater({
+  estimationsState,
+  setEstimationsState,
+  useToolTip,
+}) {
   return (
     <div style={{ padding: '20px 30px' }}>
       <ComponentRepeater
+        useToolTip={useToolTip}
         maxRepetitions={100}
         values={estimationsState}
         updateValues={setEstimationsState}

diff --git a/src/components/forms/LocationsRepeater.js b/src/components/forms/LocationsRepeater.js
@@ -3,13 +3,11 @@ import { AddIcon, CloseIcon } from '..';
 import { CreateLocationsForm } from './CreateLocationsForm';
 import { ComponentRepeater } from '..';
 
-function LocationsRepeater({
-  locationsState,
-  setLocationsState,
-}) {
+function LocationsRepeater({ locationsState, setLocationsState, useToolTip }) {
   return (
     <div style={{ padding: '20px 30px' }}>
       <ComponentRepeater
+        useToolTip={useToolTip}
         maxRepetitions={100}
         values={locationsState}
         updateValues={setLocationsState}

diff --git a/src/components/forms/ProjectIssuancesRepeater.js b/src/components/forms/ProjectIssuancesRepeater.js
@@ -5,7 +5,12 @@ import { CreateProjectIssuancesForm } from '.';
 import { ComponentRepeater } from '..';
 import { getIssuances } from '../../store/actions/climateWarehouseActions';
 
-function ProjectIssuancesRepeater({ issuanceState, newIssuanceState, max = 30 }) {
+function ProjectIssuancesRepeater({
+  issuanceState,
+  newIssuanceState,
+  useToolTip,
+  max = 30,
+}) {
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -15,6 +20,7 @@ function ProjectIssuancesRepeater({ issuanceState, newIssuanceState, max = 30 })
   return (
     <div style={{ padding: '20px 30px' }}>
       <ComponentRepeater
+        useToolTip={useToolTip}
         maxRepetitions={max}
         values={issuanceState}
         updateValues={newIssuanceState}

diff --git a/src/components/forms/ProjectLabelsRepeater.js b/src/components/forms/ProjectLabelsRepeater.js
@@ -1,11 +1,11 @@
 import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { AddIcon, CloseIcon } from '..';
-import { CreateProjectLabelsForm } from '.'; 
+import { CreateProjectLabelsForm } from '.';
 import { ComponentRepeater } from '..';
 import { getLabels } from '../../store/actions/climateWarehouseActions';
 
-function ProjectLabelsRepeater({ labelsState, newLabelsState }) {
+function ProjectLabelsRepeater({ labelsState, newLabelsState, useToolTip }) {
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -15,6 +15,7 @@ function ProjectLabelsRepeater({ labelsState, newLabelsState }) {
   return (
     <div style={{ padding: '20px 30px' }}>
       <ComponentRepeater
+        useToolTip={useToolTip}
         maxRepetitions={100}
         values={labelsState}
         updateValues={newLabelsState}

diff --git a/src/components/forms/RatingsRepeater.js b/src/components/forms/RatingsRepeater.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import { AddIcon, CloseIcon, ComponentRepeater, CreateRatingsForm } from '..';
 
-function RatingsRepeater({ ratingsState, setRatingsState }) {
+function RatingsRepeater({ ratingsState, setRatingsState, useToolTip }) {
   return (
     <div style={{ padding: '20px 30px' }}>
       <ComponentRepeater
+        useToolTip={useToolTip}
         maxRepetitions={100}
         values={ratingsState}
         updateValues={setRatingsState}