Merge pull request #275 from GovStackWorkingGroup/release-24.07.03

Release 24.07.03

Author: mdulko-soldevelo

frontend/LICENSE LICENSE.txtfrontend/LICENSE renamed to LICENSE.txt

@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright [yyyy] [name of copyright owner]
+   Copyright 2024 - Deutsche Gesellschaft für Internationale Zusammenarbeit (GIZ) GmbH
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

README.md

@@ -19,6 +19,15 @@ To configure and run the application, navigate to project directory - 'frontend'
 cd frontend
 ```
 
+#### Setup
+
+Create an copy of example.env file.
+
+```bash
+# Use default environmental variables, which can be adjusted if necessary
+mv .env.example .env
+```
+
 and run the following commands:
 
 ```

frontend/components/shared/combined/RequirementSpecificationSelectBB.tsx

@@ -1,5 +1,6 @@
-import { RefObject, useEffect, useImperativeHandle, useState } from 'react';
+import { RefObject, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { useRouter } from 'next/router';
+import classNames from 'classnames';
 import Pill from '../Pill';
 import SelectInput from '../inputs/SelectInput';
 import { ComplianceRequirementsType, SoftwareDetailsDataType, } from '../../../service/types';
@@ -9,6 +10,7 @@ import { REQUIREMENT_SPEC_STORAGE_NAME } from '../../../service/constants';
 import IRSCFunctionalTable from '../../table/IRSC/IRSCFunctionalTable';
 import IRSCCrossCuttingTableType from '../../table/IRSC/IRSCCrossCuttingTable';
 import IRSCKeyDigitalFunctionalitiesTableType from '../../table/IRSC/IRSCKeyDigitalFunctionalitiesTable';
+import { handleSelectFocus } from '../../../hooks/utilities';
 
 export type IRSCRequirementsFormRef = {
   validate: () => boolean;
@@ -63,6 +65,9 @@ const RequirementSpecificationSelectBBs = ({
     draftUUID: (draftUUID as string) || undefined,
   });
 
+  const selectRef = useRef<HTMLDivElement>(null);
+  const [isSelectFocused, setIsSelectFocused] = useState(false);
+
   useEffect(() => {
     handleAlreadySavedData();
   }, [draftData, savedInLocalStorage, interfaceRequirementsData]);
@@ -292,6 +297,7 @@ const RequirementSpecificationSelectBBs = ({
   }) => {
     setOptions([...options.filter(({ label }) => label !== value.label)]);
     setSelectedItems([...selectedItems, value.value]);
+    setIsSelectFocused(false);
   };
 
   const handleOnRemovePill = (item: {
@@ -468,14 +474,21 @@ const RequirementSpecificationSelectBBs = ({
   return (
     <div className="main-block">
       {!readOnlyView && (
-        <SelectInput
-          placeholder="Select Building Block(s)"
-          className="input-select"
-          onChange={handleOnSelect}
-          // @ts-ignore
-          options={options}
-          handleSetOptions={handleSetOptions}
-        />
+        <div ref={selectRef}>
+          <SelectInput
+            placeholder="Select Building Block(s)"
+            className="input-select"
+            onChange={handleOnSelect}
+            options={options}
+            handleSetOptions={handleSetOptions}
+            onFocus={() => handleSelectFocus({
+              items: selectedItems,
+              ref: selectRef,
+              setIsSelectFocused
+            })}
+            onBlur={() => setIsSelectFocused(false)}
+          />
+        </div>
       )}
       {selectedItems.length > 0 ? (
         <div>
@@ -498,7 +511,7 @@ const RequirementSpecificationSelectBBs = ({
           {displayTable}
         </div>
       ) : (
-        <div>
+        <div className={classNames({ 'height-150': (isSelectFocused && selectedItems.length === 0) })}>
           {format('app.view_report_details.noInformation',
             { section: `${format('table.requirement_specification_compliance.label')}` })}
         </div>

frontend/components/shared/combined/SelectBBs.tsx

@@ -1,5 +1,6 @@
-import { RefObject, useEffect, useImperativeHandle, useState } from 'react';
+import { RefObject, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { useRouter } from 'next/router';
+import classNames from 'classnames';
 import Pill from '../Pill';
 import SelectInput from '../inputs/SelectInput';
 import {
@@ -11,6 +12,7 @@ import IRSCInterfaceTable from '../../table/IRSC/IRSCInterfaceTable';
 import useTranslations from '../../../hooks/useTranslation';
 import useGetDraftData from '../../../hooks/useGetDraftDetail';
 import { INTERFACE_COMPLIANCE_STORAGE_NAME } from '../../../service/constants';
+import { handleSelectFocus } from '../../../hooks/utilities';
 
 export type IRSCFormRef = {
   validate: () => boolean;
@@ -54,6 +56,9 @@ const SelectBBs = ({
     draftUUID: (draftUUID as string) || undefined,
   });
 
+  const selectRef = useRef<HTMLDivElement>(null);
+  const [isSelectFocused, setIsSelectFocused] = useState(false);
+
   useEffect(() => {
     handleAlreadySavedData();
   }, [draftData, interfaceRequirementsData, readOnlyData]);
@@ -401,14 +406,21 @@ const SelectBBs = ({
   return (
     <div className="main-block">
       {!readOnlyView && (
-        <SelectInput
-          placeholder="Select Building Block(s)"
-          className="input-select"
-          onChange={handleOnSelect}
-          // @ts-ignore
-          options={options}
-          handleSetOptions={handleSetOptions}
-        />
+        <div ref={selectRef}>
+          <SelectInput
+            placeholder="Select Building Block(s)"
+            className="input-select"
+            onChange={handleOnSelect}
+            options={options}
+            handleSetOptions={handleSetOptions}
+            onFocus={() => handleSelectFocus({
+              items: selectedItems,
+              ref: selectRef,
+              setIsSelectFocused
+            })}
+            onBlur={() => setIsSelectFocused(false)}
+          />
+        </div>
       )}
       {selectedItems.length > 0 ? (
         <div>
@@ -430,7 +442,7 @@ const SelectBBs = ({
           {displayTable}
         </div>
       ) : (
-        <div>
+        <div className={classNames({ 'height-150': (isSelectFocused && selectedItems.length === 0) })}>
           {format('app.view_report_details.noInformation',
             { section: `${format('table.interface_compliance.label')}` })}
         </div>

frontend/components/shared/inputs/Inputs.less

@@ -249,6 +249,10 @@ margin-right: 20px;
   width: min-content;
 }
 
+.height-150 {
+  height: 150px;
+}
+
 .dropdown-circle {
 
 font-family: 'Arial';

frontend/components/shared/inputs/SelectInput.tsx

@@ -7,16 +7,16 @@ import { InputOptionsProps } from '../../../service/types';
 type SelectProps = {
   onChange: (args0: any) => void;
   onBlur?: () => void;
+  onFocus?: () => void;
   placeholder: string;
   className?: string;
-  options:
-    | OptionsOrGroups<InputOptionsProps[], GroupBase<InputOptionsProps[]>>
-    | undefined;
+  options: InputOptionsProps[];
   handleSetOptions: () => void;
 };
 
 const SelectInput = ({
   onBlur,
+  onFocus,
   placeholder,
   className,
   onChange,
@@ -34,6 +34,7 @@ const SelectInput = ({
       onBlur={onBlur}
       classNamePrefix="react-select"
       className={classNames(className)}
+      onFocus={onFocus}
     />
   );
 };

frontend/components/table/IRSC/IRSCCrossCuttingTable.tsx

@@ -7,6 +7,7 @@ import {
   FaCircleXmark,
   FaRegCircleXmark,
 } from 'react-icons/fa6';
+import { RiArrowDownSLine, RiArrowUpSLine } from 'react-icons/ri';
 import {
   ComplianceRequirementsType,
   IRSCTableType,
@@ -34,6 +35,9 @@ const IRSCCrossCuttingTableType = ({
   const [filledRequired, setFilledRequired] = useState<number>(0);
   const [filledRecommended, setFilledRecommended] = useState<number>(0);
   const [filledOptional, setFilledOptional] = useState<number>(0);
+  const [isRequirementExpanded, setIsRequirementExpanded] = useState<boolean>(false);
+
+  const handleRequirementExpand = () => setIsRequirementExpanded(!isRequirementExpanded);
 
   useEffect(() => {
     setUpdatedData(data);
@@ -257,13 +261,15 @@ const IRSCCrossCuttingTableType = ({
                   {...row.getRowProps()}
                   key={`row-${indexKey}`}
                   className={`irsc-table-rows ${
-                    !isTableValid &&
-                    (row.values.fulfillment === undefined ||
-                      row.values.fulfillment === null ||
-                      row.values.fulfillment === -1)
-                      ? 'irsc-invalid-row'
-                      : ''
-                  }`}
+                        !isTableValid &&
+                        (row.values.fulfillment === undefined ||
+                            row.values.fulfillment === null ||
+                            row.values.fulfillment === -1)
+                          ? 'irsc-invalid-row'
+                          : ''
+                    }
+                  ${(!isRequirementExpanded) ? 'irsc-table-row-collapse' : ''}
+                  `}
                 >
                   <TableCells row={row}/>
                 </tr>
@@ -272,7 +278,12 @@ const IRSCCrossCuttingTableType = ({
           })}
           {rows.some((item) => item.original.status === 1) && (
             <tr>
-              <td className="irsc-table-header-required" colSpan={3}>
+              <td className={classNames(
+                'irsc-table-header-required',
+                { 'irsc-table-row-collapse': !isRequirementExpanded }
+              )}
+              colSpan={3}
+              >
                 {`${format('table.recommended_not_required.label')} ${filledRecommended}/${recommendedNumber}`}
               </td>
             </tr>
@@ -284,7 +295,10 @@ const IRSCCrossCuttingTableType = ({
                 <tr
                   {...row.getRowProps()}
                   key={`row-${indexKey}`}
-                  className="irsc-table-rows"
+                  className={classNames(
+                    'irsc-table-rows',
+                    { 'irsc-table-row-collapse': !isRequirementExpanded }
+                  )}
                 >
                   <TableCells row={row}/>
                 </tr>
@@ -293,7 +307,12 @@ const IRSCCrossCuttingTableType = ({
           })}
           {rows.some((item) => item.original.status === 2) && (
             <tr>
-              <td className="irsc-table-header-required" colSpan={3}>
+              <td className={classNames(
+                'irsc-table-header-required',
+                { 'irsc-table-row-collapse': !isRequirementExpanded }
+              )}
+              colSpan={3}
+              >
                 {`${format('table.optional_not_required.label')} ${filledOptional}/${optionalNumber}`}
               </td>
             </tr>
@@ -305,13 +324,38 @@ const IRSCCrossCuttingTableType = ({
                 <tr
                   {...row.getRowProps()}
                   key={`row-${indexKey}`}
-                  className="irsc-table-rows"
+                  className={classNames(
+                    'irsc-table-rows',
+                    { 'irsc-table-row-collapse': !isRequirementExpanded }
+                  )}
                 >
                   <TableCells row={row}/>
                 </tr>
               );
             }
           })}
+          <tr>
+            <td
+              colSpan={3}
+              className="irsc-table-header-required irsc-table-collapse-expand"
+              onClick={handleRequirementExpand}
+            >
+              {isRequirementExpanded
+                ? <div className='irsc-table-collapse-expand-body'>
+                  <span className='irsc-table-arrow'>
+                    <RiArrowUpSLine/>
+                  </span>
+                  {format('table.collapse_requirements.label')}
+                </div>
+                : <div className='irsc-table-collapse-expand-body'>
+                  <span className='irsc-table-arrow'>
+                    <RiArrowDownSLine/>
+                  </span>
+                  {format('table.expand_requirements.label')}
+                </div>
+              }
+            </td>
+          </tr>
         </tbody>
       </table>
     </div>