Project/good practice updates 2024 01

app/Base/Page/index.tsx

@@ -63,6 +63,7 @@ function useYear(clientCode: string) {
 }
 
 function CountryProfileWithYear(props: Omit<CountryProfileProps, 'endYear'> & { clientCode: string }) {
+    // eslint-disable-next-line react/destructuring-assignment
     const { loading, year } = useYear(props.clientCode);
     if (loading || !year) {
         return null;
@@ -76,6 +77,7 @@ function CountryProfileWithYear(props: Omit<CountryProfileProps, 'endYear'> & {
 }
 
 function GiddWithYear(props: Omit<GiddProps, 'endYear'>) {
+    // eslint-disable-next-line react/destructuring-assignment
     const { loading, year } = useYear(props.clientCode);
     if (loading || !year) {
         return null;
@@ -89,6 +91,7 @@ function GiddWithYear(props: Omit<GiddProps, 'endYear'>) {
 }
 
 function ConflictWidgetWithYear(props: Omit<ConflictWidgetProps, 'endYear'>) {
+    // eslint-disable-next-line react/destructuring-assignment
     const { loading, year } = useYear(props.clientCode);
     if (loading || !year) {
         return null;
@@ -102,6 +105,7 @@ function ConflictWidgetWithYear(props: Omit<ConflictWidgetProps, 'endYear'>) {
 }
 
 function DisasterWidgetWithYear(props: Omit<DisasterWidgetProps, 'endYear'>) {
+    // eslint-disable-next-line react/destructuring-assignment
     const { loading, year } = useYear(props.clientCode);
     if (loading || !year) {
         return null;

app/Base/configs/lang.ts

@@ -97,6 +97,10 @@ export const goodPracticesDashboard = {
         en: 'Stage',
         fr: 'Organiser',
     },
+    successFactorLabel: {
+        en: 'Success Factors',
+        fr: 'Facteurs de réussite',
+    },
     clearButtonLabel: {
         en: 'Clear All Filters',
         fr: 'Effacer tous les filtres',
@@ -222,12 +226,12 @@ export const goodPracticesDashboard = {
         fr: 'liens médias et ressources',
     },
     descriptionLabel: {
-        en: 'Description of the project (max 10,000 characters)',
-        fr: 'Description du projet (max 10 000 caractères)',
+        en: 'Description of the project',
+        fr: 'Description du projet',
     },
     descriptionsFrLabel: {
-        en: 'Description du projet (max 10 000 caractères)',
-        fr: 'Description du projet (max 10 000 caractères)',
+        en: 'Description du projet',
+        fr: 'Description du projet',
     },
     titleLabel: {
         en: 'Name of project',

app/components/FigureAnalysis/styles.css

@@ -20,10 +20,6 @@
         border: var(--tui-width-separator-thin) solid var(--tui-color-separator);
         border-top: 0;
 
-        .separator {
-            border-bottom: var(--tui-width-separator-thin) solid var(--tui-color-separator);
-        }
-
         .details {
             .collapsible-children {
                 padding-bottom: var(--tui-spacing-medium);

app/components/NumberBlock/styles.css

@@ -14,45 +14,4 @@
         color: var(--tui-color-text-label);
         font-size: var(--tui-font-size-small);
     }
-
-    &.conflict {
-        .label,
-        .value {
-            color: var(--color-conflict);
-        }
-    }
-
-    &.disaster {
-        .label,
-        .value {
-            color: var(--color-disaster);
-        }
-    }
-
-    &.medium {
-        .value {
-            font-size: var(--tui-font-size-super-large);
-        }
-    }
-
-    &.large {
-        .value {
-            font-size: var(--tui-font-size-massive-large);
-        }
-    }
-
-    &.small {
-        .value {
-            font-size: var(--tui-font-size-large);
-        }
-    }
-
-    &.xsmall {
-        .value {
-            font-size: var(--tui-font-size-medium);
-        }
-        .label {
-            font-size: var(--tui-font-size-small);
-        }
-    }
 }

app/components/ProgressLine/styles.css

@@ -12,10 +12,6 @@
         .title {
             flex-grow :1;
         }
-
-        .numeral {
-            flex-shrink: 0;
-        }
     }
 
     .bottom {

app/components/Tabs/Tab/styles.css

@@ -38,7 +38,6 @@
     }
 
     &.secondary {
-        /* border-radius: calc(1em + #{var(--tui-spacing-medium)}); */
         border-radius: 0.25rem;
 
         background-color: var(--tui-color-background);

app/components/TinyMceEditorInput/index.tsx

@@ -1,15 +1,11 @@
 import React, { useState, useCallback } from 'react';
-import { _cs } from '@togglecorp/fujs';
+import { isDefined, isNotDefined, _cs } from '@togglecorp/fujs';
 import { InputContainer } from '@togglecorp/toggle-ui';
 import { Editor } from '@tinymce/tinymce-react';
 
 import useTranslation from '#hooks/useTranslation';
-import {
-    goodPracticesDashboard,
-} from '#base/configs/lang';
-import {
-    TINY_MCE_KEY,
-} from '#base/configs/tinyMceEditor';
+import { goodPracticesDashboard } from '#base/configs/lang';
+import { TINY_MCE_KEY } from '#base/configs/tinyMceEditor';
 
 import styles from './styles.css';
 
@@ -37,21 +33,18 @@ function TinyMceEditorInput<N extends string>(props: Props<N>) {
     } = props;
 
     const strings = useTranslation(goodPracticesDashboard);
-
-    const sizeLimit = textLimit ?? 10000;
     const [length, setLength] = useState(0);
-    const lengthExceeded = length >= sizeLimit;
 
     const handleChange = useCallback((newText: string | undefined, editor) => {
         const textLength = editor.getContent({ format: 'text' }).length;
-        if (textLength <= sizeLimit) {
+        if (isNotDefined(textLimit) || textLength <= textLimit) {
             onChange(newText, name);
             setLength(textLength);
         }
     }, [
         onChange,
         name,
-        sizeLimit,
+        textLimit,
     ]);
 
     return (
@@ -72,17 +65,18 @@ function TinyMceEditorInput<N extends string>(props: Props<N>) {
                         init={{ menubar: 'edit insert format' }}
                         toolbar="undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link"
                     />
-                    {value && (
+                    {isDefined(value) && isDefined(textLimit) && (
                         <div className={styles.textLengthSection}>
-                            {lengthExceeded && (
+                            { /* Note: only run when existed form exceed the text limit */ }
+                            {length > textLimit && (
                                 <span className={styles.textLimit}>
                                     {strings.textLimitExceeded}
                                 </span>
                             )}
                             <span>
-                                {sizeLimit - length}
+                                {textLimit - length}
                                 /
-                                {sizeLimit}
+                                {textLimit}
                             </span>
                         </div>
                     )}

app/components/tableHelpers/index.tsx

@@ -47,7 +47,6 @@ export function createExternalLinkColumn<D, K>(
             filterType: options?.filterType,
             orderable: options?.orderable,
             hideable: options?.hideable,
-            titleClassName: styles.title,
         },
         cellRenderer: ExternalLink,
         cellRendererParams: (_: K, datum: D): ExternalLinkProps => {
@@ -93,7 +92,6 @@ export function createTextColumn<D, K>(
             filterType: options?.filterType,
             orderable: options?.orderable,
             hideable: options?.hideable,
-            titleClassName: styles.title,
         },
         cellRenderer: Text,
         columnWidth: options?.columnWidth,
@@ -137,7 +135,6 @@ export function createNumberColumn<D, K>(
             filterType: options?.filterType,
             orderable: options?.orderable,
             hideable: options?.hideable,
-            titleClassName: styles.title,
         },
         cellRenderer: Numeral,
         columnWidth: options?.columnWidth,

app/components/tableHelpers/styles.css

@@ -4,14 +4,6 @@
         font-size: var(--tui-font-size-medium)!important;
     }
 
-    &.conflict {
-        color: var(--color-conflict);
-    }
-
-    &.disaster {
-        color: var(--color-disaster);
-    }
-
     &.number-header {
         * {
             justify-content: flex-end;

app/views/GoodPractices/AddGoodPractice/index.tsx

@@ -192,7 +192,6 @@ function AddGoodPractice(props: Props) {
         error: riskyError,
         setFieldValue,
         validate,
-        // setValue,
         setError,
     } = useForm(
         schema,
@@ -516,6 +515,7 @@ function AddGoodPractice(props: Props) {
                     value={value?.whatMakesThisPromisingPractice}
                     error={error?.whatMakesThisPromisingPractice}
                     onChange={setFieldValue}
+                    textLimit={2000}
                 />
                 <TinyMceEditorInput
                     className={styles.input}
@@ -529,6 +529,7 @@ function AddGoodPractice(props: Props) {
                     value={value?.descriptionOfKeyLessonsLearned}
                     error={error?.descriptionOfKeyLessonsLearned}
                     onChange={setFieldValue}
+                    textLimit={2000}
                 />
                 {!value?.isFrench && (
                     <TinyMceEditorInput