[#5080] Added active state to fix indicator approval workflow

Active status helps MnE managers to identify updates of indicators that have an unlocked period still in progress.
the following what has to be done in order to finalize  this feature :
1. Update status description.
2. Add new icon history.
3. Create audit trail modal
4. Call /indicator_period_data_framework/ by period
   Pulling data audit trails from endpoint /indicator_period_data_framework/ by period ID of selected update.

akvo/rsr/spa/app/components/Icon.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Icon as AntIcon } from 'antd'
+import SVGInline from 'react-svg-inline'
+import get from 'lodash/get'
+import { icons } from '../utils/images'
+
+
+const Icon = ({ type, ...props }) => {
+  const customIcon = get(icons, type)
+  return customIcon
+    ? <SVGInline svg={customIcon} {...props} />
+    : <AntIcon type={type} {...props} />
+}
+
+export default Icon

akvo/rsr/spa/app/components/StatusIndicator.jsx

@@ -1,25 +1,14 @@
 import React from 'react'
 import { Col, Row, Typography } from 'antd'
+import { statusDescription } from '../utils/constants'
 
 const { Text } = Typography
 
-const StatusIndicator = ({ status }) => {
-  let description = 'No status yet'
-  if (status === 'D') {
-    description = 'Draft update created'
-  }
-  if (status === 'P') {
-    description = 'Update submitted'
-  }
-  if (status === 'R') {
-    description = 'Update declined'
-  }
-  if (status === 'A') {
-    description = 'Approved update reported'
-  }
+const StatusIndicator = ({ status, updateClass }) => {
+  const description = statusDescription[status] || statusDescription[updateClass] || statusDescription.NO_STATUS
   return (
-    <Row>
-      <Col style={{ display: 'flex', gap: 10 }}>
+    <Row className="header-status">
+      <Col style={{ display: 'flex', gap: 10 }} className={updateClass}>
         <Text strong>Status</Text>
         <Text>:&nbsp;{description}</Text>
       </Col>

akvo/rsr/spa/app/components/StatusPeriod.jsx

@@ -1,20 +1,23 @@
 import React from 'react'
 import SVGInline from 'react-svg-inline'
 import { Button } from 'antd'
+import { useTranslation } from 'react-i18next'
+
 import approvedSvg from '../images/status-approved.svg'
 import pendingSvg from '../images/status-pending.svg'
 import revisionSvg from '../images/status-revision.svg'
 import { DeclinePopup } from './DeclinePopup'
 
 const Aux = node => node.children
 
-export const StatusPeriod = ({ update, pinned, index, handleUpdateStatus, t }) => {
+export const StatusPeriod = ({ update, pinned, index, handleUpdateStatus }) => {
+  const { t: trans } = useTranslation()
   if (update.status === 'A') {
     return (
       <div className="status approved">
         <SVGInline svg={approvedSvg} />
         <div className="text">
-          {t('Approved')}
+          {trans('Approved')}
           {pinned === String(index) && [
             <Aux><br />{update.approvedBy && update.approvedBy.name && `by ${update.approvedBy.name}`}</Aux>
           ]}
@@ -26,13 +29,13 @@ export const StatusPeriod = ({ update, pinned, index, handleUpdateStatus, t }) =
     return [
       <div className="status pending" key="status-pending">
         <SVGInline svg={pendingSvg} />
-        <div className="text">{t('Pending')}</div>
+        <div className="text">{trans('Pending')}</div>
       </div>,
       handleUpdateStatus && String(pinned) === String(index) &&
       <div className="btns" key="status-btns">
-        <Button type="primary" size="small" onClick={(e) => handleUpdateStatus(update, 'A', undefined, e)}>{t('Approve')}</Button>
+        <Button type="primary" size="small" onClick={(e) => handleUpdateStatus(update, 'A', undefined, e)}>{trans('Approve')}</Button>
         <DeclinePopup onConfirm={(reviewNote) => handleUpdateStatus(update, 'R', reviewNote)}>
-          <Button type="link" size="small">{t('Decline')}</Button>
+          <Button type="link" size="small">{trans('Decline')}</Button>
         </DeclinePopup>
       </div>
     ]
@@ -41,7 +44,7 @@ export const StatusPeriod = ({ update, pinned, index, handleUpdateStatus, t }) =
     return (
       <div className="status returned">
         <SVGInline svg={revisionSvg} />
-        <div className="text">{t('Returned for revision')}</div>
+        <div className="text">{trans('Returned for revision')}</div>
       </div>
     )
   }

akvo/rsr/spa/app/components/index.js

@@ -5,3 +5,4 @@ export { MobileSlider } from './MobileSlider'
 export { PrevUpdate } from './PrevUpdate'
 export { DeclinePopup } from './DeclinePopup'
 export { IndicatorItem } from './IndicatorItem'
+export { default as Icon } from './Icon'