Merge branch 'main' into table-local-url-params

client/public/locales/en/translation.json

@@ -87,8 +87,8 @@
     "noDataStateBody": "Create a new {{what}} to start seeing data here.",
     "noDataStateTitle": "No {{what}} available",
     "Nquestions": "{{n}} questions",
-    "ofTotalApplications": "Of {{count}} application",
-    "ofTotalApplications_plural": "Of {{count}} applications",
+    "ofTotalAssessments": "Of {{count}} assessment",
+    "ofTotalAssessments_plural": "Of {{count}} assessments",
     "selectMany": "Select {{what}}",
     "selectOne": "Select a {{what}}",
     "selectAn": "Select an {{what}}",

client/public/locales/es/translation.json

@@ -68,8 +68,6 @@
     "noDataStateBody": "Cree un(a) nuevo(a) {{what}} para empezar a ver datos acá.",
     "noDataStateTitle": "No existen {{what}} disponibles",
     "Nquestions": "{{n}} preguntas",
-    "ofTotalApplications": "De {{count}} aplicación",
-    "ofTotalApplications_plural": "De {{count}} aplicaciones",
     "selectMany": "Seleccione {{what}}",
     "selectOne": "Seleccione un {{what}}",
     "selectAn": "Seleccione una {{what}}",

client/src/app/api/models.ts

@@ -646,7 +646,7 @@ export interface Questionnaire {
   revision: number;
   questions: number;
   rating: string;
-  dateImported: string;
+  createTime: string;
   required: boolean;
   system: boolean;
   sections: Section[];
@@ -687,10 +687,12 @@ export interface Answer {
   selected?: boolean;
 }
 export interface Thresholds {
-  red: number;
-  unknown: number;
-  yellow: number;
+  red?: number;
+  unknown?: number;
+  yellow?: number;
+  green?: number;
 }
+
 export type AssessmentStatus = "empty" | "started" | "complete";
 export type Risk = "green" | "yellow" | "red" | "unknown";
 

client/src/app/components/FilterToolbar/FilterToolbar.tsx

@@ -1,15 +1,14 @@
 import * as React from "react";
 import {
+  Dropdown,
+  DropdownItem,
+  DropdownGroup,
+  DropdownList,
+  MenuToggle,
   SelectOptionProps,
   ToolbarToggleGroup,
   ToolbarItem,
 } from "@patternfly/react-core";
-import {
-  Dropdown,
-  DropdownItem,
-  DropdownGroup,
-  DropdownToggle,
-} from "@patternfly/react-core/deprecated";
 import FilterIcon from "@patternfly/react-icons/dist/esm/icons/filter-icon";
 
 import { FilterControl } from "./FilterControl";
@@ -29,7 +28,7 @@ export interface OptionPropsWithKey extends SelectOptionProps {
 
 export interface IBasicFilterCategory<
   TItem, // The actual API objects we're filtering
-  TFilterCategoryKey extends string // Unique identifiers for each filter category (inferred from key properties if possible)
+  TFilterCategoryKey extends string, // Unique identifiers for each filter category (inferred from key properties if possible)
 > {
   key: TFilterCategoryKey; // For use in the filterValues state object. Must be unique per category.
   title: string;
@@ -42,7 +41,7 @@ export interface IBasicFilterCategory<
 
 export interface IMultiselectFilterCategory<
   TItem,
-  TFilterCategoryKey extends string
+  TFilterCategoryKey extends string,
 > extends IBasicFilterCategory<TItem, TFilterCategoryKey> {
   selectOptions: OptionPropsWithKey[];
   placeholderText?: string;
@@ -70,7 +69,7 @@ export type IFilterValues<TFilterCategoryKey extends string> = Partial<
 
 export const getFilterLogicOperator = <
   TItem,
-  TFilterCategoryKey extends string
+  TFilterCategoryKey extends string,
 >(
   filterCategory?: FilterCategory<TItem, TFilterCategoryKey>,
   defaultOperator: "AND" | "OR" = "OR"
@@ -131,24 +130,26 @@ export const FilterToolbar = <TItem, TFilterCategoryKey extends string>({
   );
 
   const renderDropdownItems = () => {
-    if (!!filterGroups.length) {
+    if (filterGroups.length) {
       return filterGroups.map((filterGroup) => (
         <DropdownGroup label={filterGroup} key={filterGroup}>
-          {filterCategories
-            .filter(
-              (filterCategory) => filterCategory.filterGroup === filterGroup
-            )
-            .map((filterCategory) => {
-              return (
-                <DropdownItem
-                  id={`filter-category-${filterCategory.key}`}
-                  key={filterCategory.key}
-                  onClick={() => onCategorySelect(filterCategory)}
-                >
-                  {filterCategory.title}
-                </DropdownItem>
-              );
-            })}
+          <DropdownList>
+            {filterCategories
+              .filter(
+                (filterCategory) => filterCategory.filterGroup === filterGroup
+              )
+              .map((filterCategory) => {
+                return (
+                  <DropdownItem
+                    id={`filter-category-${filterCategory.key}`}
+                    key={filterCategory.key}
+                    onClick={() => onCategorySelect(filterCategory)}
+                  >
+                    {filterCategory.title}
+                  </DropdownItem>
+                );
+              })}
+          </DropdownList>
         </DropdownGroup>
       ));
     } else {
@@ -177,21 +178,22 @@ export const FilterToolbar = <TItem, TFilterCategoryKey extends string>({
         {!showFiltersSideBySide && (
           <ToolbarItem>
             <Dropdown
-              isGrouped={!!filterGroups.length}
-              toggle={
-                <DropdownToggle
+              toggle={(toggleRef) => (
+                <MenuToggle
                   id="filtered-by"
-                  onToggle={() =>
+                  ref={toggleRef}
+                  onClick={() =>
                     setIsCategoryDropdownOpen(!isCategoryDropdownOpen)
                   }
                   isDisabled={isDisabled}
                 >
                   <FilterIcon /> {currentFilterCategory?.title}
-                </DropdownToggle>
-              }
+                </MenuToggle>
+              )}
               isOpen={isCategoryDropdownOpen}
-              dropdownItems={renderDropdownItems()}
-            />
+            >
+              {renderDropdownItems()}
+            </Dropdown>
           </ToolbarItem>
         )}
 

client/src/app/components/KebabDropdown.tsx

@@ -1,27 +1,43 @@
 import React, { useState } from "react";
 
-import { Dropdown, KebabToggle } from "@patternfly/react-core/deprecated";
+import {
+  Dropdown,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+} from "@patternfly/react-core";
+import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon";
 
 export interface IKebabDropdownProps {
   dropdownItems?: React.ReactNode[];
+  ariaLabel?: string;
 }
 
 export const KebabDropdown: React.FC<IKebabDropdownProps> = ({
   dropdownItems,
+  ariaLabel,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const onKebabToggle = (isOpen: boolean) => {
-    setIsOpen(isOpen);
-  };
-
   return (
     <Dropdown
-      toggle={<KebabToggle onToggle={(_, isOpen) => onKebabToggle(isOpen)} />}
+      popperProps={{ position: "right" }}
       isOpen={isOpen}
-      isPlain
-      position="right"
-      dropdownItems={dropdownItems}
-    />
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          isExpanded={isOpen}
+          onClick={() => setIsOpen(!isOpen)}
+          variant="plain"
+          aria-label={ariaLabel || "Table toolbar actions kebab toggle"}
+          isDisabled={!dropdownItems || dropdownItems.length === 0}
+        >
+          <EllipsisVIcon aria-hidden="true" />
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>{dropdownItems}</DropdownList>
+    </Dropdown>
   );
 };

client/src/app/components/MenuActions.tsx

@@ -2,9 +2,9 @@ import React, { useState } from "react";
 import {
   Dropdown,
   DropdownItem,
-  DropdownToggle,
-} from "@patternfly/react-core/deprecated";
-import CaretDownIcon from "@patternfly/react-icons/dist/esm/icons/caret-down-icon";
+  DropdownList,
+  MenuToggle,
+} from "@patternfly/react-core";
 
 export interface MenuActionsProps {
   actions: { label: string; callback: () => void }[];
@@ -17,23 +17,26 @@ export const MenuActions: React.FC<MenuActionsProps> = ({ actions }) => {
     <Dropdown
       isOpen={isOpen}
       onSelect={() => {
-        setIsOpen(!isOpen);
+        setIsOpen(false);
       }}
-      toggle={
-        <DropdownToggle
-          onToggle={(_, isOpen) => {
-            setIsOpen(isOpen);
-          }}
-          toggleIndicator={CaretDownIcon}
+      toggle={(toggleRef) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={() => setIsOpen(!isOpen)}
+          isExpanded={isOpen}
         >
           Actions
-        </DropdownToggle>
-      }
-      dropdownItems={actions.map((element, index) => (
-        <DropdownItem key={index} component="button" onClick={element.callback}>
-          {element.label}
-        </DropdownItem>
-      ))}
-    />
+        </MenuToggle>
+      )}
+      shouldFocusToggleOnSelect
+    >
+      <DropdownList>
+        {actions.map((item, index) => (
+          <DropdownItem key={index} onClick={item.callback}>
+            {item.label}
+          </DropdownItem>
+        ))}
+      </DropdownList>
+    </Dropdown>
   );
 };

client/src/app/components/TargetCard.tsx

@@ -6,6 +6,7 @@ import {
   EmptyStateVariant,
   Card,
   CardBody,
+  DropdownItem,
   Text,
   Flex,
   FlexItem,
@@ -17,7 +18,6 @@ import {
   PanelMainBody,
   Panel,
 } from "@patternfly/react-core";
-import { DropdownItem } from "@patternfly/react-core/deprecated";
 import {
   Select,
   SelectOption,

client/src/app/components/ToolbarBulkSelector.tsx

@@ -1,12 +1,15 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, PaginationProps, ToolbarItem } from "@patternfly/react-core";
 import {
+  Button,
   Dropdown,
   DropdownItem,
-  DropdownToggle,
-  DropdownToggleCheckbox,
-} from "@patternfly/react-core/deprecated";
+  DropdownList,
+  MenuToggle,
+  MenuToggleCheckbox,
+  PaginationProps,
+  ToolbarItem,
+} from "@patternfly/react-core";
 
 import AngleDownIcon from "@patternfly/react-icons/dist/esm/icons/angle-down-icon";
 import AngleRightIcon from "@patternfly/react-icons/dist/esm/icons/angle-right-icon";
@@ -67,7 +70,6 @@ export const ToolbarBulkSelector = <T,>({
     }
     return state;
   };
-  const [bulkSelectOpen, setBulkSelectOpen] = React.useState(false);
   const handleSelectAll = (checked: boolean) => {
     onSelectAll(!!checked);
   };
@@ -113,31 +115,33 @@ export const ToolbarBulkSelector = <T,>({
       {isExpandable && <ToolbarItem>{collapseAllBtn()}</ToolbarItem>}
       <ToolbarItem>
         <Dropdown
-          toggle={
-            <DropdownToggle
-              splitButtonItems={[
-                <DropdownToggleCheckbox
-                  id="bulk-selected-items-checkbox"
-                  key="bulk-select-checkbox"
-                  aria-label="Select all"
-                  onChange={() => {
-                    if (getBulkSelectState() !== false) {
-                      onSelectAll(false);
-                    } else {
-                      onSelectAll(true);
-                    }
-                  }}
-                  isChecked={getBulkSelectState()}
-                />,
-              ]}
-              onToggle={(_, isOpen) => {
-                setBulkSelectOpen(isOpen);
+          isOpen={isOpen}
+          toggle={(toggleRef) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={() => setIsOpen(!isOpen)}
+              splitButtonOptions={{
+                items: [
+                  <MenuToggleCheckbox
+                    id="bulk-selected-items-checkbox"
+                    key="bulk-select-checkbox"
+                    aria-label="Select all"
+                    onChange={() => {
+                      if (getBulkSelectState() !== false) {
+                        onSelectAll(false);
+                      } else {
+                        onSelectAll(true);
+                      }
+                    }}
+                    isChecked={getBulkSelectState()}
+                  />,
+                ],
               }}
             />
-          }
-          isOpen={bulkSelectOpen}
-          dropdownItems={dropdownItems}
-        ></Dropdown>
+          )}
+        >
+          <DropdownList>{dropdownItems}</DropdownList>
+        </Dropdown>
       </ToolbarItem>
     </>
   );