build(deps): upgrade to Patternfly 5

.gitignore

@@ -13,3 +13,7 @@ coverage
 storybook-static
 .build_cache
 .eslintcache
+.cache*
+
+# Old locale files
+locales/**/*_old.json

TESTING.md

@@ -39,6 +39,8 @@ In order to render the component under test into its HTML DOM representation and
 
 * To search for a localized text, for example, with `getByText`, use `testTranslate` function from `@test/Common.tsx` to return a translated text. Tests are configued to use `en` locale as default.
 
+* If any of the test codes cause the changes in React states (e.g. open/close a action menu or modal), wrap them in [`act`](https://testing-library.com/docs/react-testing-library/api/#act) function, imported from `@testing-library/react`. The `act` function allows flushing all pending state changes.
+
 ## MOCKING
 
 ### Overview
@@ -83,6 +85,8 @@ Where the `-u` flag tells Jest to update the snapshot and the `-t` flag specifie
 
 * Some PatternFly components use random, dynamic strings as `ids` which will then be displayed as elements in the rendered React virtual DOM. These strings change upon every render, causing snapshots to fail even though the component under test is still functionally the same. This can be remedied by supplying [custom `ids` as props](https://github.com/patternfly/patternfly-react/issues/3518) to the culprit PatternFly child components inside the source file of the component under test. 
 
+* Since `react-test-renderer` does not support the use of `ref` (see [reference](https://github.com/facebook/react/issues/7740)), the tests might fail if any third-party codes use `ref` unsafely (without checking `null`). To workaround that, use [`createNodeMock`](https://legacy.reactjs.org/docs/test-renderer.html#ideas) to construct a mock `ref` when calling `renderSnapshot`. 
+
 
 ## INTEGRATION TESTING
 
@@ -107,6 +111,7 @@ This will automatically start a Mirage dev server, run the integration tests on
 
 ### Tips
 * Running the integration tests will open a Firefox browser and simulate any actions that you instruct the browser to perform. That means we must first navigate to the local Cryostat Web page, before performing any useful testing.
+
 * In our `beforeAll` jest declaration, we setup our web driver with the [default configurations](src/itest/util.ts)), and then use that driver to create our first **Page Object**. A Page Object is an abstraction that acts as an interface to your web pages. For more info on the **Page Object Model** in Selenium, see https://www.selenium.dev/documentation/test_practices/encouraged/page_object_models/.
 ```ts
  beforeAll(async function () {
@@ -135,4 +140,4 @@ Add more methods to each PO, to test more actions. The point is, we want to abst
 In the code, we first tell the driver to wait, until an element is located by the css selector ('button[data-action="skip"]'), and assign it to a variable. If not found, we assign null. Then if the variable is non-null, we click it. To find a good query to use, it is recommended to use the [Selenium IDE](https://addons.mozilla.org/en-CA/firefox/addon/selenium-ide/) extension on your browser. The extension allows you to easily see queries that can be used to select an element you want. 
 * Integration tests are found in [src/itest](src/itest).
 * All code is asynchronous which entails the use of the `async/await` pattern.
-* Follow the Selenium testing practices when writing integration tests: https://www.selenium.dev/documentation/test_practices/.
+* Follow the Selenium testing practices when writing integration tests: https://www.selenium.dev/documentation/test_practices/.

jest.config.js

@@ -58,7 +58,9 @@ module.exports = {
 
   // An array of regexp pattern strings that are matched against all source file paths before transformation. 
   // If the file path matches any of the patterns, it will not be transformed.
-  transformIgnorePatterns: ["/node_modules/(?!@patternfly)"],
+  transformIgnorePatterns: [
+    "/node_modules/(?!@patternfly|d3|d3-array|internmap|delaunator|robust-predicates)",
+  ],
 
   roots: ['<rootDir>/src']
 };

locales/en/common.json

@@ -1,64 +1,94 @@
 {
+  "ADD": "Add",
+  "ARCHIVAL_PERIOD": "Archival Period",
   "AriaLabels": {
     "MAXIMUM_AGE": "Maximum age value",
     "MAXIMUM_AGE_UNITS_INPUT": "Maximum age units input",
     "MAXIMUM_SIZE": "Maximum size value",
     "MAXIMUM_SIZE_UNITS_INPUT": "Maximum size units input"
   },
-  "BETA": "BETA",
+  "AUTOMATED_RULES": "Automated Rules",
+  "BETA": "Beta",
   "CANCEL": "Cancel",
   "CARD_TYPE": "Card type",
+  "CAUTION": "Caution",
+  "CLEAN": "Clean",
   "CLEAR": "Clear",
   "CLEAR_FILTERS": "Clear all filters",
   "CLEAR_RECENT": "Clear recent",
   "CLOSE": "Close",
+  "COPIED": "Copied",
+  "COPY": "Copy",
   "CREATE": "Create",
   "CREATING": "Creating",
   "CRITICAL": "CRITICAL",
   "CRYOSTAT_TRADEMARK": "Copyright The Cryostat Authors, The Apache License, Version 2.0",
   "DATE": "Date",
   "DELETE": "Delete",
   "DESCRIPTION": "Description",
-  "DEVELOPMENT": "DEVELOPMENT",
+  "DEVELOPMENT": "Development",
+  "DISABLE": "Disable",
+  "DONOT_ASK_AGAIN": "Don't ask me again",
   "DOWNLOAD": "Download",
+  "DURATION": "Duration",
   "EDIT": "Edit",
+  "ENABLED": "Enabled",
+  "EVENT_SPECIFIER": "Event Specifier",
   "FILTER_NAME": "Name",
   "FILTER_TOPIC": "Topic",
+  "FROM": "From",
   "HELP": "Help",
   "HOUR": "Hour",
   "HOUR_one": "Hour",
   "HOUR_other": "Hours",
-  "MAXIMUM_AGE": "Maximum age",
+  "HOUR_compact": "h",
+  "INITIAL_DELAY": "Initial Delay",
+  "LABEL": "Label",
+  "MATCH_EXPRESSION": "Match Expression",
+  "MAXIMUM_AGE": "Maximum Age",
   "MAXIMUM_AGE_HELPER_TEXT": "The maximum age of Recording data stored to disk.",
-  "MAXIMUM_SIZE": "Maximum size",
+  "MAXIMUM_SIZE": "Maximum Size",
   "MAXIMUM_SIZE_HELPER_TEXT": "The maximum size of Recording data saved to disk.",
   "MERIDIEM_AM": "AM",
   "MERIDIEM_PM": "PM",
+  "MILLISECOND_other": "Milliseconds",
   "MINUTE": "Minute",
   "MINUTE_one": "Minute",
   "MINUTE_other": "Minutes",
+  "MINUTE_compact": "m",
   "N/A": "N/A",
   "NAME": "Name",
+  "NO_DESCRIPTION": "No description",
   "OK": "OK",
-  "PRODUCTION": "PRODUCTION",
+  "PRESERVED_ARCHIVES": "Preserved Archives",
+  "PRODUCTION": "Production",
+  "REFRESH": "Refresh",
   "REMOVE": "Remove",
   "RENAME": "Rename",
   "RESET": "Reset",
   "RETRY": "Retry",
+  "SAVE": "Save",
   "SCORE": "Score",
   "SECOND": "Second",
   "SECOND_one": "Second",
   "SECOND_other": "Seconds",
+  "SECOND_compact": "s",
   "SELECT": "Select",
   "SHOW_LESS": "Show less",
   "SHOW_MORE": "Show more",
   "SOMETHING_WENT_WRONG": "Something went wrong",
+  "STATE": "State",
+  "STATUS": "Status",
   "SUBMIT": "Submit",
   "SUBMITTING": "Submitting",
   "SUGGESTED": "Suggested",
+  "TARGET": "Target",
   "TEMPLATE": "Template",
+  "TEST": "Test",
   "TIME": "Time",
-  "UPLOAD": "Upload",
+  "TIMEZONE": "Timezone",
+  "TO": "To",
+  "UNKNOWN_ERROR": "Unknown error",
   "USER_SUBMITTED": "User-submitted",
   "VIEW": "View",
   "VIEW_MORE": "View more",