Merge branch 'feature/release-fixes' into develop

Author: tnagorra

src/App/PageError/index.tsx

@@ -2,8 +2,7 @@ import { useEffect } from 'react';
 import { useRouteError } from 'react-router-dom';
 
 import useBooleanState from '#hooks/useBooleanState';
-import Button from '#components/Button';
-import Link from '#components/Link';
+import Button, { useButtonFeatures } from '#components/Button';
 
 import styles from './styles.module.css';
 
@@ -25,6 +24,9 @@ function PageError() {
             toggle: toggleFullErrorVisibility,
         },
     ] = useBooleanState(false);
+    const {
+        className: containerClassName,
+    } = useButtonFeatures({});
 
     return (
         <div className={styles.pageError}>
@@ -63,13 +65,14 @@ function PageError() {
                     )}
                 </div>
                 <div className={styles.footer}>
-                    <Link
-                        to="home"
-                        variant="primary"
+                    {/* NOTE: using the anchor element as it will refresh the page */}
+                    <a
+                        className={containerClassName}
+                        href="/"
                     >
                         {/* FIXME: use translations */}
                         Go back to homepage
-                    </Link>
+                    </a>
                 </div>
             </div>
         </div>

src/components/Modal/index.tsx

@@ -27,6 +27,7 @@ export interface Props extends Omit<ContainerProps, 'withInternalPadding' | 'wit
     closeOnEscape?: boolean;
     onClose?: () => void;
     overlayClassName?: string;
+    modalContainerClassName?: string;
     size?: SizeType;
     withoutCloseButton?: boolean;
 }
@@ -43,6 +44,7 @@ function Modal(props: Props) {
         className,
         actions,
         childrenContainerClassName,
+        modalContainerClassName,
 
         ...containerProps
     } = props;
@@ -78,7 +80,7 @@ function Modal(props: Props) {
     return (
         <BodyOverlay className={_cs(styles.overlay, overlayClassName)}>
             <FocusOn
-                className={_cs(styles.modalContainer, sizeStyle)}
+                className={_cs(styles.modalContainer, modalContainerClassName, sizeStyle)}
                 onClickOutside={handleClickOutside}
                 onEscapeKey={handleEscape}
                 gapMode="padding"

src/components/Navbar/index.tsx

@@ -332,20 +332,6 @@ function Navbar(props: Props) {
                                 >
                                     {strings.userMenuCreateEarlyActionFieldReport}
                                 </DropdownMenuItem>
-                                <DropdownMenuItem
-                                    type="link"
-                                    to={undefined}
-                                    variant="secondary"
-                                >
-                                    {strings.userMenuSubmitEAPActivation}
-                                </DropdownMenuItem>
-                                <DropdownMenuItem
-                                    type="link"
-                                    to={undefined}
-                                    variant="secondary"
-                                >
-                                    {strings.userMenuSubmitEAPFinalReport}
-                                </DropdownMenuItem>
                                 <DropdownMenuItem
                                     type="link"
                                     to="flashUpdateFormNew"

src/components/SearchSelectInput/index.tsx

@@ -45,6 +45,7 @@ export type Props<
         ) => OPTION[];
         onSearchValueChange?: (value: string | undefined) => void;
         onShowDropdownChange?: (value: boolean) => void;
+        onEnterWithoutOption?: (value: string | undefined) => void;
 
         selectedOnTop: boolean;
     }, OMISSION>
@@ -74,6 +75,7 @@ export type Props<
         | 'hasValue'
         | 'hideOptionFilter'
         | 'onSelectAllButtonClick'
+        | 'onEnterWithoutOption'
         | OMISSION
     >
     & ({
@@ -211,10 +213,14 @@ function SearchSelectInput<
         if (onShowDropdownChange) {
             onShowDropdownChange(false);
         }
+        setSearchInputValue(undefined);
+        if (onSearchValueChange) {
+            onSearchValueChange(undefined);
+        }
         if (onEnterWithoutOption) {
-            onEnterWithoutOption();
+            onEnterWithoutOption(searchInputValue);
         }
-    }, [onShowDropdownChange, onEnterWithoutOption]);
+    }, [searchInputValue, onShowDropdownChange, onEnterWithoutOption, onSearchValueChange]);
 
     const handleChangeDropdown = useCallback(
         (myVal: boolean) => {

src/components/SelectInputContainer/index.tsx

@@ -63,6 +63,7 @@ export type SelectInputContainerProps<
         onClearButtonClick: () => void;
         onSelectAllButtonClick?: () => void;
         onEnterWithoutOption?: () => void;
+        dropdownHidden?: boolean;
     }, OMISSION>
         & Omit<InputContainerProps, 'input'>
     );
@@ -126,6 +127,7 @@ function SelectInputContainer<
         required,
         variant,
         errorOnTooltip,
+        dropdownHidden,
     } = props;
 
     const options = optionsFromProps ?? (emptyList as OPTION[]);
@@ -257,6 +259,8 @@ function SelectInputContainer<
         ? `${strings.infoMessageAnd} ${totalOptionsCount - optionsCount} ${strings.infoMessageMore}`
         : undefined;
 
+    const dropdownShownActual = dropdownShown && !dropdownHidden;
+
     return (
         <>
             <InputContainer
@@ -309,11 +313,11 @@ function SelectInputContainer<
                                 onClick={handleToggleDropdown}
                                 variant="tertiary"
                                 name={undefined}
-                                title={dropdownShown
+                                title={dropdownShownActual
                                     ? strings.buttonTitleClose
                                     : strings.buttonTitleOpen}
                             >
-                                {dropdownShown
+                                {dropdownShownActual
                                     ? <ArrowUpSmallFillIcon className={styles.icon} />
                                     : <ArrowDownSmallFillIcon className={styles.icon} />}
                             </Button>
@@ -338,7 +342,7 @@ function SelectInputContainer<
                     />
                 )}
             />
-            {dropdownShown && (
+            {dropdownShownActual && (
                 <Popup
                     elementRef={popupRef}
                     parentRef={inputSectionRef}

src/components/domain/DrefShareModal/index.tsx

@@ -89,6 +89,8 @@ function DrefShareModal(props: Props) {
 
     return (
         <Modal
+            overlayClassName={styles.overlay}
+            modalContainerClassName={styles.modalContainer}
             className={styles.drefShareModal}
             heading={strings.drefShareTitle}
             headerDescription={strings.drefShareDescription}

src/components/domain/DrefShareModal/styles.module.css

@@ -1,20 +1,29 @@
-.dref-share-modal {
+.overlay {
     display: flex;
-    flex-direction: column;
 
-    .content {
+    .modal-container {
         display: flex;
-        flex-direction: column;
-        gap: var(--go-ui-spacing-lg);
 
-        .user-list {
+        .dref-share-modal {
             display: flex;
-            flex-wrap: wrap;
-            gap: var(--go-ui-spacing-xs);
-        }
+            flex-direction: column;
+            min-height: 25rem;
+
+            .content {
+                display: flex;
+                flex-direction: column;
+                gap: var(--go-ui-spacing-lg);
+
+                .user-list {
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: var(--go-ui-spacing-xs);
+                }
 
-        .message {
-            flex-grow: 1;
+                .message {
+                    flex-grow: 1;
+                }
+            }
         }
     }
 }

src/components/domain/KeywordSearchSelectInput/index.tsx

@@ -278,23 +278,23 @@ function KeywordSearchSelectInput() {
         );
     }, [navigate]);
 
-    const handleSearchInputEnter = useCallback(() => {
+    const handleSearchInputEnter = useCallback((text: string | undefined) => {
         // NOTE: We are not deliberately not using debouncedSearchText here
-        const searchStringSafe = searchText?.trim() ?? '';
+        const searchStringSafe = text?.trim() ?? '';
         if (searchStringSafe.length > 0) {
             navigate(
                 'search',
-                { search: `${KEY_URL_SEARCH}=${searchText}` },
+                { search: `${KEY_URL_SEARCH}=${text}` },
             );
         }
     }, [
-        searchText,
         navigate,
     ]);
 
     return (
         <SearchSelectInput
             // eslint-disable-next-line react/jsx-props-no-spreading
+            dropdownHidden={isNotDefined(searchText) || searchText.trim().length <= 0}
             name="keyword"
             options={undefined}
             value={undefined}

src/components/domain/PerAssessmentSummary/index.tsx

@@ -139,7 +139,9 @@ function PerAssessmentSummary(props: Props) {
              *  "0"(not - reviewed") component values
              */
             const filteredComponents = areaResponse?.component_responses?.filter(
-                (component) => isDefined(component?.rating) && component.rating > 1,
+                (component) => isDefined(component?.rating_details)
+                    && isDefined(component.rating_details.value)
+                    && component.rating_details?.value > 1,
             ) ?? [];
 
             if (filteredComponents.length === 0) {

src/components/domain/UserSearchMultiSelectInput.tsx

@@ -29,6 +29,7 @@ function UserSearchMultiSelectInput<const NAME>(
 ) {
     const {
         className,
+        options,
         ...otherProps
     } = props;
 
@@ -40,7 +41,7 @@ function UserSearchMultiSelectInput<const NAME>(
         pending,
         response,
     } = useRequest({
-        skip: !dropdownShown,
+        skip: (debouncedSearchText?.length ?? 0) < 1 || !dropdownShown,
         url: '/api/v2/users/',
         query: {
             name: debouncedSearchText,
@@ -57,7 +58,8 @@ function UserSearchMultiSelectInput<const NAME>(
             keySelector={keySelector}
             labelSelector={getUserName}
             onSearchValueChange={setSearchText}
-            searchOptions={response?.results}
+            options={options}
+            searchOptions={response?.results ?? options}
             optionsPending={pending}
             totalOptionsCount={response?.count ?? 0}
             onShowDropdownChange={setShowDropdown}