Merge remote-tracking branch 'origin/dev' into Support-35518-Upgrade-…

…dependencies-for-React-18-attempt-2

eslint.config.mjs

@@ -30,7 +30,7 @@ const config = tseslint.config(
       "no-console": ["error", { allow: ["warn", "error"] }],
       "no-unused-vars": "off",
       "@typescript-eslint/no-unused-vars": [
-        "off",
+        "error",
         {
           "argsIgnorePattern": "^_[^_].*$|^_$",
           "varsIgnorePattern": "^_[^_].*$|^_$",

package.json

@@ -63,7 +63,7 @@
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": [
-      "eslint --fix --max-warnings=0 "
+      "eslint --fix "
     ],
     "*.{js,jsx,ts,tsx,css,json,md}": [
       "prettier --write "

packages/common-ui/lib/account/DevUserProvider.tsx

@@ -26,7 +26,7 @@ export function DevUserAccountProvider({
         setDevModeEnabled(response.data["devUserEnabled"]);
         setKeycloakEnabled(response.data["keycloakEnabled"]);
         setGroupRole(response.data["groupRole"]);
-      } catch (error) {
+      } catch {
         setDevModeEnabled(false);
         setKeycloakEnabled(true);
       }

packages/common-ui/lib/api-client/ApiClientContext.tsx

@@ -8,8 +8,8 @@ import Kitsu, {
   KitsuResourceLink,
   PersistedResource
 } from "kitsu";
-import { deserialise, error as kitsuError, query } from "kitsu-core";
-import { compact, flatMap, fromPairs, isEmpty, keys, omit } from "lodash";
+import { deserialise, error as kitsuError } from "kitsu-core";
+import { compact, fromPairs, isEmpty, keys, omit } from "lodash";
 import LRUCache from "lru-cache";
 import React, { PropsWithChildren, useContext, useMemo } from "react";
 import { v4 as uuidv4 } from "uuid";
@@ -22,7 +22,6 @@ import {
   SuccessfulOperation
 } from "./operations-types";
 import DataLoader from "dataloader";
-import { ResponseType } from "axios";
 
 export interface BulkGetOptions {
   apiBaseUrl?: string;

packages/common-ui/lib/api-client/useElasticSearchQuery.tsx

@@ -1,4 +1,4 @@
-import { useContext, useMemo } from "react";
+import { useMemo } from "react";
 import useSWR from "swr";
 import { useApiClient } from "./ApiClientContext";
 import { v4 as uuidv4 } from "uuid";

packages/common-ui/lib/api-client/useQuery.tsx

@@ -7,7 +7,6 @@ import { v4 as uuidv4 } from "uuid";
 import { LoadingSpinner } from "../loading-spinner/LoadingSpinner";
 import { ApiClientContext } from "./ApiClientContext";
 import { ClientSideJoiner, ClientSideJoinSpec } from "./client-side-join";
-import { ResponseType } from "axios";
 import Link from "next/link";
 
 /** Attributes that compose a JsonApi query. */

packages/common-ui/lib/filter-builder/__tests__/rsql.test.ts

@@ -1,4 +1,3 @@
-import { KitsuResource } from "kitsu";
 import { FilterGroupModel } from "../FilterGroup";
 import { rsql } from "../rsql";
 

packages/common-ui/lib/formik-connected/CheckBoxField.tsx

@@ -20,7 +20,7 @@ const checkboxProps = {
 };
 
 export function CheckBoxField(props: CheckBoxProps) {
-  const { onCheckBoxClick, disabled, type } = props;
+  const { onCheckBoxClick, disabled } = props;
   return (
     <FieldWrapper {...props} readOnlyRender={(value) => String(!!value)}>
       {({ setValue, value, formik }) => {

packages/common-ui/lib/formik-connected/CreatableSelectField.tsx

@@ -1,6 +1,6 @@
 import { FormikContextType } from "formik";
 import { find, isArray, castArray, compact } from "lodash";
-import { RefObject, useState } from "react";
+import { RefObject } from "react";
 import { StylesConfig } from "react-select";
 import { ReadOnlyValue } from "./FieldView";
 import { FieldWrapper, FieldWrapperProps } from "./FieldWrapper";

packages/common-ui/lib/formik-connected/FieldSet.tsx

@@ -36,7 +36,7 @@ export function FieldSet({
   ...formSectionProps
 }: FieldSetProps) {
   const context = useContext(DinaFormContext);
-  const { componentName, sectionName, isTemplate } = formSectionProps;
+  const { componentName, sectionName } = formSectionProps;
 
   // Check the section to see if it should be visible or not.
   const disableSection = useMemo(() => {

packages/common-ui/lib/formik-connected/FormattedTextField.tsx

@@ -16,9 +16,7 @@ export interface FormattedTextFieldProps extends FieldWrapperProps {
  */
 export function FormattedTextField(props: FormattedTextFieldProps) {
   const {
-    initialValue,
     readOnly,
-    multiLines,
     inputProps: inputPropsExternal,
     placeholder,
     ...labelWrapperProps

packages/common-ui/lib/formik-connected/GeoSuggestSearchBox.tsx

@@ -72,7 +72,7 @@ export function GeoSuggestSearchBox({
     try {
       const results = await fetchJson(url.toString());
       return results as NominatumApiSearchResult[];
-    } catch (error) {
+    } catch {
       return [];
     }
   }

packages/common-ui/lib/formik-connected/MetersField.tsx

@@ -163,6 +163,7 @@ export function toMeters(
   // Special case matcher for "x feet x inches" -formatted text:
   const feetInchMatch = FEET_INCH_REGEX.exec(text);
   if (feetInchMatch) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [_, feet, __, inches] = feetInchMatch;
     return toMeters(`${feet} feet + ${inches} inches`, maxDecimalPlaces);
   }
@@ -174,7 +175,7 @@ export function toMeters(
     return maxDecimalPlaces !== undefined
       ? inMeters.toFixed(clamp(decimalPlaces, maxDecimalPlaces))
       : String(inMeters);
-  } catch (error) {
+  } catch {
     // If the input contains a number:
     const containsNumbersMatch = CONTAINS_NUMBERS_REGEX.exec(text);
     if (containsNumbersMatch) {

packages/common-ui/lib/formik-connected/NumberField.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent, FocusEvent } from "react";
 import { useIntl } from "react-intl";
 import * as yup from "yup";
-import { TextField, TextFieldProps, useFieldLabels } from "..";
+import { TextField, TextFieldProps } from "..";
 
 export interface NumberFieldProps extends TextFieldProps {
   placeholder?: string;

packages/common-ui/lib/formik-connected/ResourceSelectField.tsx

@@ -40,7 +40,6 @@ export function ResourceSelectField<TData extends KitsuResource>(
   resourceSelectFieldProps: ResourceSelectFieldProps<TData>
 ) {
   const {
-    name,
     onChange,
     readOnlyRender,
     showGroupCategary = false,

packages/common-ui/lib/formik-connected/SelectFieldWithNav.tsx

@@ -1,7 +1,6 @@
 import { FormikProps } from "formik";
 import React, { useRef, useState } from "react";
 import { FaCaretLeft, FaCaretRight } from "react-icons/fa";
-import { GoCircleSlash } from "react-icons/go";
 import { SelectField, SelectOption } from "./SelectField";
 
 interface SelectFieldWithNavProps<T> {

packages/common-ui/lib/formik-connected/__tests__/FieldExtensionSelectField.test.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { mountWithAppContext } from "common-ui";
 import { DinaForm } from "../DinaForm";
 import { FieldExtensionSelectField } from "../FieldExtensionSelectField";
-import Select from "react-select/base";
 import "@testing-library/jest-dom";
 import { waitFor, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -43,7 +42,7 @@ const apiContext: any = {
 describe("FieldExtensionSelectField component", () => {
   it("Renders the FieldExtensionSelectField's options correctly.", async () => {
     // Render the component using the provided RTL wrapper function
-    const wrapper = mountWithAppContext(
+    mountWithAppContext(
       <DinaForm initialValues={{ cfia_ppc: undefined }}>
         {({ values: { cfia_ppc } }) => (
           <>

packages/common-ui/lib/formik-connected/__tests__/GroupedCheckBoxFields.test.tsx

@@ -50,7 +50,7 @@ describe("Grouped check boxes hook", () => {
   });
 
   it("Renders checkboxes.", () => {
-    const wrapper = mountWithAppContext(<TestComponent />);
+    mountWithAppContext(<TestComponent />);
     // Find all checkbox inputs
     const checkboxes = screen.getAllByRole("checkbox", { name: /select/i });
     // Assert that 5 checkboxes are rendered

packages/common-ui/lib/formik-connected/__tests__/MetersField.test.tsx

@@ -92,7 +92,7 @@ describe("MetersField component", () => {
   });
 
   it("Does the unit conversion onBlur.", async () => {
-    const wrapper = mountWithAppContext(
+    mountWithAppContext(
       <DinaForm initialValues={{}}>
         <MetersField name="length" />
       </DinaForm>
@@ -189,7 +189,7 @@ describe("MetersField component", () => {
   });
 
   it("Renders the initial value.", () => {
-    const wrapper = mountWithAppContext(
+    mountWithAppContext(
       <DinaForm
         initialValues={{ length: "10.00" }}
         onSubmit={({ submittedValues }) => mockSubmit(submittedValues)}
@@ -202,7 +202,7 @@ describe("MetersField component", () => {
   });
 
   it("Updates the input value when the form state changes.", () => {
-    const wrapper = mountWithAppContext(
+    mountWithAppContext(
       <DinaForm
         initialValues={{ length: "10.00" }}
         onSubmit={({ submittedValues }) => mockSubmit(submittedValues)}

packages/common-ui/lib/formik-connected/__tests__/NumberField.test.tsx

@@ -23,7 +23,7 @@ describe("NumberField component", () => {
   });
 
   it("Displays the field's label and value.", async () => {
-    const wrapper = getWrapper({ initialValues: { testField: 123.23 } });
+    getWrapper({ initialValues: { testField: 123.23 } });
 
     // Assert the label text
     expect(screen.getByLabelText("Test Field")).toBeInTheDocument();
@@ -70,7 +70,7 @@ describe("NumberField component", () => {
   });
 
   it("Shows a blank input when the formik value is undefined.", async () => {
-    const wrapper = getWrapper({ initialValues: {} });
+    getWrapper({ initialValues: {} });
     // Assert the input value
     const input = screen.getByRole("textbox");
     expect(input).toHaveValue("");

packages/common-ui/lib/formik-connected/__tests__/PlaceSectionsSelectionField.test.tsx

@@ -36,7 +36,7 @@ describe("PlaceSectionSelectionField component", () => {
   beforeEach(jest.clearAllMocks);
 
   it("Display Src Admin Levels to table.", async () => {
-    const wrapper = mountWithAppContext(
+    mountWithAppContext(
       <DinaForm initialValues={{ srcAdminLevels: TEST_SRC_ADMIN_LEVELS }}>
         <PlaceSectionsSelectionField
           name="srcAdminLevels"

packages/common-ui/lib/formik-connected/__tests__/QueryLogicSwitchField.test.tsx

@@ -3,12 +3,12 @@ import { mountWithAppContext } from "common-ui";
 import { DinaForm } from "../DinaForm";
 import { QueryLogicSwitchField } from "../QueryLogicSwitchField";
 import "@testing-library/jest-dom";
-import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 describe("QueryLogicSwitchField component", () => {
   it("Displays the field's label value.", () => {
-    const wrapper = mountWithAppContext(
+    mountWithAppContext(
       <DinaForm initialValues={{ testObject: { testField: "and" } }}>
         <QueryLogicSwitchField name="testObject.testField" />
       </DinaForm>
@@ -19,7 +19,7 @@ describe("QueryLogicSwitchField component", () => {
   });
 
   it("Changes the selected query logic will update the submitted value.", async () => {
-    const wrapper = mountWithAppContext(
+    mountWithAppContext(
       <DinaForm initialValues={{ testObject: { testField: "and" } }}>
         <QueryLogicSwitchField name="testObject.testField" />
       </DinaForm>

packages/common-ui/lib/formik-connected/__tests__/ResourceSelectField.test.tsx

@@ -1,11 +1,9 @@
 import { KitsuResource } from "kitsu";
-import lodash from "lodash";
-import Select from "react-select/base";
 import { ResourceSelectField } from "../../";
 import { mountWithAppContext } from "common-ui";
 import { DinaForm } from "../DinaForm";
 import "@testing-library/jest-dom";
-import { fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 interface TestGroup extends KitsuResource {
@@ -59,7 +57,7 @@ jest.mock("use-debounce", () => ({
 
 describe("ResourceSelectField component", () => {
   it("Displays the Formik field's value.", () => {
-    const wrapper = mountWithAppContext(
+    mountWithAppContext(
       <DinaForm
         initialValues={{ group: { id: "3", groupName: "Mat's Group" } }}
       >
@@ -133,7 +131,7 @@ describe("ResourceSelectField component", () => {
   it("Provides an onChange callback prop.", async () => {
     const mockOnChange = jest.fn();
 
-    const wrapper = mountWithAppContext(
+    mountWithAppContext(
       <DinaForm initialValues={{ group: { id: 3, groupName: "Mat's Group" } }}>
         <ResourceSelectField<TestGroup>
           name="group"

packages/common-ui/lib/formik-connected/__tests__/safeSubmit.test.tsx

@@ -4,8 +4,7 @@ import { mountWithAppContext } from "common-ui";
 import { ErrorViewer } from "../ErrorViewer";
 import { OnFormikSubmit, safeSubmit } from "../safeSubmit";
 import "@testing-library/jest-dom";
-import { fireEvent, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import { fireEvent } from "@testing-library/react";
 
 function getWrapper(customOnSubmit: OnFormikSubmit) {
   const onSubmit = safeSubmit(customOnSubmit);

packages/common-ui/lib/formik-connected/data-entry/DataBlock.tsx

@@ -1,6 +1,6 @@
 import { useFormikContext } from "formik";
 import { find } from "lodash";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import Button from "react-bootstrap/Button";
 import {
   CheckBoxField,

packages/common-ui/lib/formik-connected/data-entry/DataEntryField.tsx

@@ -1,5 +1,3 @@
-import { Dispatch } from "react";
-import { FieldWrapper } from "../..";
 import { DataEntry } from "./DataEntry";
 
 export interface DataEntryFieldProps {

packages/common-ui/lib/instance/__tests__/useInstanceContext.test.tsx

@@ -1,8 +1,6 @@
 import { InstanceContext, InstanceContextI } from "../InstanceContextProvider";
 
 import { render } from "@testing-library/react";
-import { ApiClientProvider } from "../../api-client/ApiClientContext";
-import { InstanceContextProvider } from "../InstanceContextProvider";
 import { useInstanceContext } from "../useInstanceContext";
 import "@testing-library/jest-dom";
 import { ReactNode } from "react";

packages/common-ui/lib/intl/IntlSupport.tsx

@@ -3,8 +3,7 @@ import { createContext, useContext, useEffect, useMemo } from "react";
 import {
   FormattedMessage as ReactFormattedMessage,
   IntlProvider as ReactIntlProvider,
-  useIntl as useReactIntl,
-  ReactIntlErrorCode
+  useIntl as useReactIntl
 } from "react-intl";
 
 interface MessageDictionary {

packages/common-ui/lib/intl/common-ui-intl.ts

@@ -7,7 +7,7 @@ const en = COMMON_UI_MESSAGES_ENGLISH;
 const fr = COMMON_UI_MESSAGES_FR;
 const de = COMMON_UI_MESSAGES_GERMAN;
 
-const { FormattedMessage, IntlProvider, useIntl } = getIntlSupport({
+const { FormattedMessage, IntlProvider } = getIntlSupport({
   defaultMessages: en,
   translations: { en, fr, de }
 });

packages/common-ui/lib/list-page-layout/bulk-buttons.tsx

@@ -186,7 +186,7 @@ export function DataExportButton<TData extends KitsuResource>({
   entityLink
 }: DataExportButtonProps<TData>) {
   const router = useRouter();
-  const [exportObjectIds, setExportObjectIds] = useSessionStorage<string[]>(
+  const [_exportObjectIds, setExportObjectIds] = useSessionStorage<string[]>(
     OBJECT_EXPORT_IDS_KEY,
     []
   );

packages/common-ui/lib/list-page/QueryPage.tsx

@@ -425,7 +425,7 @@ export function QueryPage<TData extends KitsuResource>({
   const sessionStorageLastUsedKeyTreeKey = uniqueName + "-last-used-tree";
   const localStorageLastUsedSavedSearchChangedKey =
     uniqueName + "-saved-search-changed";
-  const [sessionStorageQueryTree, setSessionStorageQueryTree] =
+  const [_sessionStorageQueryTree, setSessionStorageQueryTree] =
     useSessionStorage<JsonTree>(
       sessionStorageLastUsedKeyTreeKey,
       defaultJsonTree

packages/common-ui/lib/list-page/query-builder/query-builder-core-components/useQueryBetweenSupport.tsx

@@ -59,7 +59,7 @@ export const isBetweenStateString = (val: string): val is string => {
     // Check if the parsed object has the required properties
     // and is a valid BetweenStates object
     return isBetweenStateObject(parsedState);
-  } catch (error) {
+  } catch {
     // Not a valid BetweenStates string
     return false;
   }
@@ -83,7 +83,7 @@ export const convertStringToBetweenState = (val: string): BetweenStates => {
     } else {
       return DEFAULT_TYPE;
     }
-  } catch (error) {
+  } catch {
     return DEFAULT_TYPE; // Return default values on parsing error
   }
 };

packages/common-ui/lib/list-page/query-builder/query-builder-elastic-search/QueryBuilderElasticSearchValidator.tsx

@@ -116,20 +116,9 @@ export function validateEsRule(
     formattedValue = formattedValue.trim();
   }
 
-  // Edge case if nothing is provided for a date (unless operator is empty/not empty)
-  let operatorValue = operator;
-  if (
-    widgetName === "date" &&
-    formattedValue === "" &&
-    operator !== "empty" &&
-    operator !== "notEmpty"
-  ) {
-    operatorValue = "empty";
-  }
-
   // Retrieve the field name label
   const fieldLabel = formatMessage({
-    id: "field_" + config.fields?.[fieldName]?.label ?? fieldName
+    id: "field_" + (config.fields?.[fieldName]?.label ?? fieldName)
   });
 
   // For all the different widgets, a validate date function can be setup to do custom validation.