Fix sessions page after react upgrade

Author: krausvo1

openam-ui/openam-ui-ria/src/main/js/components/EmphasizedText.jsx

@@ -0,0 +1,57 @@
+/*
+ * The contents of this file are subject to the terms of the Common Development and
+ * Distribution License (the License). You may not use this file except in compliance with the
+ * License.
+ *
+ * You can obtain a copy of the License at legal/CDDLv1.0.txt. See the License for the
+ * specific language governing permission and limitations under the License.
+ *
+ * When distributing Covered Software, include this CDDL Header Notice in each file and include
+ * the License file at legal/CDDLv1.0.txt. If applicable, add the following below the CDDL
+ * Header, with the fields enclosed by brackets [] replaced by your own identifying
+ * information: "Portions copyright [year] [name of copyright owner]".
+ *
+ * Copyright 2017-2019 ForgeRock AS.
+ */
+
+import { map, uniqueId } from "lodash";
+import PropTypes from "prop-types";
+import React from "react";
+
+/**
+ * This function creates an array of snippets, with the odd array snippets being the ones with matched characters,
+ * and the even snippets being the characters inbetween. The matched snippets are then wrapped in the <strong> element.
+ * @param {string} children The string to which the emphasized text will be applied.
+ * @param {string} match The characters of the string to emphasize.
+ * @returns {Array<string|ReactElement>} An array of alternating strings and react elements.
+ * @example
+ * Given the string "/applications",
+ *      a match of "a" will return the snippet array ["/", "a", "pplic", "a", "tions"]
+ *      a match of "/AP" will return the snippet array ["", "/ap", "plications"]
+ */
+function emphasizeMatchingText (children, match) {
+    const isOdd = (number) => (number % 2) === 1;
+    const snippets = children.split(new RegExp(`(${match})`, "gi"));
+    return map(snippets, (snippet, index) => {
+        const key = uniqueId(`emphasizedText${snippet}`);
+        return isOdd(index) ? <strong key={ key }>{snippet}</strong> : snippet;
+    });
+}
+
+const EmphasizedText = ({ children, match }) => {
+    if (!children) {
+        return "";
+    }
+    if (match) {
+        return <span>{ emphasizeMatchingText(children, match) }</span>;
+    } else {
+        return <span>{ children }</span>;
+    }
+};
+
+EmphasizedText.propTypes = {
+    children: PropTypes.string,
+    match: PropTypes.string
+};
+
+export default EmphasizedText;

openam-ui/openam-ui-ria/src/main/js/components/inputs/select/AsyncSingleSelect.jsx

@@ -0,0 +1,52 @@
+/*
+ * The contents of this file are subject to the terms of the Common Development and
+ * Distribution License (the License). You may not use this file except in compliance with the
+ * License.
+ *
+ * You can obtain a copy of the License at legal/CDDLv1.0.txt. See the License for the
+ * specific language governing permission and limitations under the License.
+ *
+ * When distributing Covered Software, include this CDDL Header Notice in each file and include
+ * the License file at legal/CDDLv1.0.txt. If applicable, add the following below the CDDL
+ * Header, with the fields enclosed by brackets [] replaced by your own identifying
+ * information: "Portions copyright [year] [name of copyright owner]".
+ *
+ * Copyright 2019 ForgeRock AS.
+ * Portions copyright 2025 Wren Security.
+ */
+
+import { isEmpty } from "lodash";
+import { t } from "i18next";
+import { Async } from "react-select";
+import PropTypes from "prop-types";
+import React from "react";
+
+import DropdownIndicator from "./components/DropdownIndicator";
+import Option from "./components/options/DefaultOption";
+import styles from "./components/styles";
+
+const noOptionsMessage = ({ inputValue }) => {
+    if (isEmpty(inputValue)) {
+        return t("common.form.searchPrompt");
+    }
+};
+const hideLoadingMessage = () => null;
+
+const AsyncSingleSelect = (props) => (
+    <Async
+        components={ { DropdownIndicator, Option } }
+        isClearable
+        isLoading
+        loadingMessage={ hideLoadingMessage }
+        noOptionsMessage={ noOptionsMessage }
+        styles={ styles }
+        { ...props }
+    />
+);
+
+AsyncSingleSelect.propTypes = {
+    inputId: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired
+};
+
+export default AsyncSingleSelect;

openam-ui/openam-ui-ria/src/main/js/components/inputs/select/components/DropdownIndicator.jsx

@@ -0,0 +1,47 @@
+/*
+ * The contents of this file are subject to the terms of the Common Development and
+ * Distribution License (the License). You may not use this file except in compliance with the
+ * License.
+ *
+ * You can obtain a copy of the License at legal/CDDLv1.0.txt. See the License for the
+ * specific language governing permission and limitations under the License.
+ *
+ * When distributing Covered Software, include this CDDL Header Notice in each file and include
+ * the License file at legal/CDDLv1.0.txt. If applicable, add the following below the CDDL
+ * Header, with the fields enclosed by brackets [] replaced by your own identifying
+ * information: "Portions copyright [year] [name of copyright owner]".
+ *
+ * Copyright 2019 ForgeRock AS.
+ */
+
+import { components } from "react-select";
+import classnames from "classnames";
+import PropTypes from "prop-types";
+import React from "react";
+
+/*
+ * This custom DropdownIndicator component wraps the default react-select v2 componet with one that looks and behaves
+ * in the same manner as our other selectors. The react-select v2 DropdownIndicator is styled to look like bootstrap 4,
+ * and so looks out of place within our design. For more information @see https://react-select.com/components
+ */
+const DropdownIndicator = (props) => (
+    <components.DropdownIndicator { ...props }>
+        <i
+            className={
+                classnames({
+                    "fa": true,
+                    "fa-caret-down": !props.selectProps.menuIsOpen,
+                    "fa-caret-up": props.selectProps.menuIsOpen
+                })
+            }
+        />
+    </components.DropdownIndicator>
+);
+
+DropdownIndicator.propTypes = {
+    selectProps: PropTypes.shape({
+        menuIsOpen: PropTypes.bool.isRequired
+    }).isRequired
+};
+
+export default DropdownIndicator;

openam-ui/openam-ui-ria/src/main/js/components/inputs/select/components/options/DefaultOption.jsx

@@ -0,0 +1,66 @@
+/*
+ * The contents of this file are subject to the terms of the Common Development and
+ * Distribution License (the License). You may not use this file except in compliance with the
+ * License.
+ *
+ * You can obtain a copy of the License at legal/CDDLv1.0.txt. See the License for the
+ * specific language governing permission and limitations under the License.
+ *
+ * When distributing Covered Software, include this CDDL Header Notice in each file and include
+ * the License file at legal/CDDLv1.0.txt. If applicable, add the following below the CDDL
+ * Header, with the fields enclosed by brackets [] replaced by your own identifying
+ * information: "Portions copyright [year] [name of copyright owner]".
+ *
+ * Copyright 2019 ForgeRock AS.
+ * Portions copyright 2025 Wren Security.
+ */
+
+import { components } from "react-select";
+import classnames from "classnames";
+import PropTypes from "prop-types";
+import React from "react";
+
+import EmphasizedText from "components/EmphasizedText";
+
+/*
+ * This custom DefaultOption component wraps the default react-select v2 componet and adds classNames to the options
+ * which  are then targeted within our functional tests. For more information @see https://react-select.com/components
+ */
+
+const DefaultOption = ({ children, ...props }) => {
+    const isNewOption = props.data.__isNew__;
+
+    const optionText = isNewOption ? children : (
+        <EmphasizedText match={ props.selectProps.inputValue }>
+            { children }
+        </EmphasizedText>
+    );
+
+    return (
+        components.Option && (
+            <components.Option
+                className={
+                    classnames({
+                        "react-select-menu-option": !isNewOption,
+                        "react-select-menu-create": isNewOption
+                    })
+                }
+                { ...props }
+            >
+                { optionText }
+            </components.Option>
+        )
+    );
+};
+
+DefaultOption.propTypes = {
+    children: PropTypes.node,
+    data: PropTypes.shape({
+        __isNew__: PropTypes.bool
+    }).isRequired,
+    selectProps: PropTypes.shape({
+        inputValue: PropTypes.string
+    })
+};
+
+export default DefaultOption;

openam-ui/openam-ui-ria/src/main/js/components/inputs/select/components/styles.jsm

@@ -0,0 +1,90 @@
+/*
+ * The contents of this file are subject to the terms of the Common Development and
+ * Distribution License (the License). You may not use this file except in compliance with the
+ * License.
+ *
+ * You can obtain a copy of the License at legal/CDDLv1.0.txt. See the License for the
+ * specific language governing permission and limitations under the License.
+ *
+ * When distributing Covered Software, include this CDDL Header Notice in each file and include
+ * the License file at legal/CDDLv1.0.txt. If applicable, add the following below the CDDL
+ * Header, with the fields enclosed by brackets [] replaced by your own identifying
+ * information: "Portions copyright [year] [name of copyright owner]".
+ *
+ * Copyright 2019-2021 ForgeRock AS.
+ */
+
+/*
+ * Styled to look like our other selectors which are a themed bootstrap 3 mixed with react-select v1.0 or the jquery
+ * selectize plugin. For more information about stylying react-select v2 @see https://react-select.com/styles
+ */
+const styles = {
+    option: (base, state) => ({
+        ...base,
+        color: "#333",
+        backgroundColor: state.isSelected ? "#b9d4cf" : state.isFocused ? "#f1f7f6" : "#fff"
+    }),
+    clearIndicator: (base) => ({
+        ...base,
+        padding: 6
+    }),
+    control: (base, state) => ({
+        ...base,
+        border: state.isFocused && !state.menuIsOpen ? "1px solid #66afe9" : "1px solid #ccc",
+        ":hover": {
+            border: state.isFocused && !state.menuIsOpen ? "1px solid #66afe9" : "1px solid #ccc"
+        },
+        minHeight: 34,
+        outline: state.isFocused && !state.menuIsOpen ? 0 : base.outline,
+        boxShadow: state.isFocused && !state.menuIsOpen
+            ? "inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6)"
+            : 0
+    }),
+    groupHeading: (base) => ({
+        ...base,
+        color: "#457d78",
+        background: "#fff",
+        textTransform: "none",
+        fontSize: "1em"
+    }),
+    group: (base) => ({
+        ...base,
+        borderBottom: "1px solid #ccc"
+    }),
+    indicatorSeparator: (base, state) => ({
+        ...base,
+        visibility: state.hasValue && !state.selectProps.isClearable ? "hidden" : base.visibility
+    }),
+    valueContainer: (base, state) => ({
+        ...base,
+        padding: state.isMulti && state.hasValue ? "2px" : base.padding
+    }),
+    menu: (base) => ({
+        ...base,
+        zIndex: 3
+    }),
+    noOptionsMessage: (base) => ({
+        ...base,
+        textAlign: "left"
+    }),
+    multiValue: (base) => ({
+        ...base,
+        border: "1px solid rgba(81,147,135,.24)",
+        color: "#457d78",
+        background: "#f1f6f5"
+    }),
+    multiValueLabel: (base) => ({
+        ...base,
+        color: "#457d78"
+    }),
+    multiValueRemove: (base) => ({
+        ...base,
+        borderLeft: "1px solid #d5e5e2",
+        ":hover": {
+            background: "#e4edeb",
+            cursor: "pointer"
+        }
+    })
+};
+
+export default styles;