Add functionality for Selectors

The Select[1] components need to be adapted to take data from the metadata. This will be applied for the fields 'Radius proxy configuration' and 'External IdP configuration'. [1]- http://v4-archive.patternfly.org/v4/components/select Signed-off-by: Carla Martinez <[email protected]>
freeipa · Aug 23, 2023 · 1c6b8fb · 1c6b8fb
1 parent 7297518
commit 1c6b8fb
Show file tree

Hide file tree

Showing 10 changed files with 359 additions and 71 deletions.
diff --git a/src/components/Form/IpaSelect.tsx b/src/components/Form/IpaSelect.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+// PatternFly
+import { Select, SelectOption, SelectVariant } from "@patternfly/react-core";
+// Utils
+import {
+  IPAParamDefinitionSelect,
+  getParamPropertiesSelect,
+} from "src/utils/ipaObjectUtils";
+
+const IpaSelect = (props: IPAParamDefinitionSelect) => {
+  const { required, readOnly, value } = getParamPropertiesSelect(props);
+
+  let valueSelected = "";
+  if (value !== undefined && value && value !== "") {
+    valueSelected = value.toString();
+  }
+
+  return (
+    <Select
+      id={props.id}
+      name={props.name}
+      variant={props.variant || SelectVariant.single}
+      aria-label={props.name}
+      onToggle={props.onToggle}
+      onSelect={props.onSelect}
+      selections={valueSelected}
+      isOpen={props.isOpen}
+      aria-labelledby={props.ariaLabelledBy || props.id}
+      readOnly={readOnly}
+      isDisabled={readOnly}
+      required={required}
+    >
+      {props.elementsOptions.map((option, index) => {
+        return <SelectOption key={index} value={option} />;
+      })}
+    </Select>
+  );
+};
+
+export default IpaSelect;
diff --git a/src/components/UserSettings.tsx b/src/components/UserSettings.tsx
@@ -16,7 +16,12 @@ import {
 // Icons
 import OutlinedQuestionCircleIcon from "@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon";
 // Data types
-import { Metadata, User } from "src/utils/datatypes/globalDataTypes";
+import {
+  Metadata,
+  User,
+  IDPServer,
+  RadiusServer,
+} from "src/utils/datatypes/globalDataTypes";
 // Layouts
 import ToolbarLayout from "src/components/layouts/ToolbarLayout";
 import TitleLayout from "src/components/layouts/TitleLayout";
@@ -53,6 +58,8 @@ export interface PropsToUserSettings {
   isDataLoading?: boolean;
   modifiedValues: () => Partial<User>;
   onResetValues: () => void;
+  radiusProxyData?: RadiusServer[];
+  idpData?: IDPServer[];
   from: "active-users" | "stage-users" | "preserved-users";
 }
 
@@ -254,6 +261,8 @@ const UserSettings = (props: PropsToUserSettings) => {
                 onUserChange={props.onUserChange}
                 metadata={props.metadata}
                 onRefresh={props.onRefresh}
+                radiusProxyConf={props.radiusProxyData || []}
+                idpConf={props.idpData || []}
               />
               <TitleLayout
                 key={2}

diff --git a/src/components/UsersSections/UsersAccountSettings.tsx b/src/components/UsersSections/UsersAccountSettings.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 // PatternFly
 import {
   Flex,
@@ -8,15 +8,17 @@ import {
   FormGroup,
   TextInput,
   Checkbox,
-  Select,
-  SelectVariant,
-  SelectOption,
   DropdownItem,
   CalendarMonth,
   Button,
 } from "@patternfly/react-core";
 // Data types
-import { IDPServer, Metadata, User } from "src/utils/datatypes/globalDataTypes";
+import {
+  IDPServer,
+  Metadata,
+  User,
+  RadiusServer,
+} from "src/utils/datatypes/globalDataTypes";
 // Layouts
 import SecondaryButton from "src/components/layouts/SecondaryButton";
 import DataTimePickerLayout from "src/components/layouts/Calendar/DataTimePickerLayout";
@@ -27,15 +29,18 @@ import ModalWithTextAreaLayout from "src/components/layouts/ModalWithTextAreaLay
 // Modals
 import CertificateMappingDataModal from "src/components/modals/CertificateMappingDataModal";
 // Utils
-import { asRecord } from "src/utils/userUtils";
+import { asRecord, updateIpaObject } from "src/utils/userUtils";
 // Form
 import IpaTextInput from "src/components/Form/IpaTextInput";
+import IpaSelect from "../Form/IpaSelect";
 
 interface PropsToUsersAccountSettings {
   user: Partial<User>;
   onUserChange: (element: Partial<User>) => void;
   metadata: Metadata;
   onRefresh: () => void;
+  radiusProxyConf: RadiusServer[];
+  idpConf: IDPServer[];
 }
 
 // Generic data to pass to the Textbox adder
@@ -51,6 +56,66 @@ const UsersAccountSettings = (props: PropsToUsersAccountSettings) => {
     props.onUserChange
   );
 
+  // Dropdown 'Radius proxy configuration'
+  const [isRadiusConfOpen, setIsRadiusConfOpen] = useState(false);
+  const [radiusConfSelected, setRadiusConfSelected] = useState(
+    ipaObject.ipatokenradiusconfiglink
+  );
+  const [radiusConfOptions, setRadiusConfOptions] = useState<string[]>([]);
+  const radiusConfOnToggle = (isOpen: boolean) => {
+    setIsRadiusConfOpen(isOpen);
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const radiusConfOnSelect = (selection: any) => {
+    setRadiusConfSelected(selection.target.textContent as string);
+    updateIpaObject(
+      ipaObject,
+      recordOnChange,
+      selection.target.textContent as string,
+      "ipatokenradiusconfiglink"
+    );
+    setIsRadiusConfOpen(false);
+  };
+
+  useEffect(() => {
+    const radiusProxyList: string[] = [];
+    props.radiusProxyConf.map((item) => {
+      const itemString = item.cn.toString();
+      radiusProxyList.push(itemString);
+    });
+    setRadiusConfOptions(radiusProxyList);
+  }, [props.radiusProxyConf]);
+
+  // Dropdown 'External IdP configuration'
+  const [isIdpConfOpen, setIsIdpConfOpen] = useState(false);
+  const [idpConfSelected, setIdpConfSelected] = useState("");
+  const [idpConfOptions, setIdpConfOptions] = useState<string[]>([]);
+
+  const idpConfOnToggle = (isOpen: boolean) => {
+    setIsIdpConfOpen(isOpen);
+  };
+
+  const idpConfOnSelect = (selection: any) => {
+    setIdpConfSelected(selection.target.textContent as string);
+    updateIpaObject(
+      ipaObject,
+      recordOnChange,
+      selection.target.textContent as string,
+      "ipaidpconfiglink"
+    );
+    setIsIdpConfOpen(false);
+  };
+
+  useEffect(() => {
+    const idpList: string[] = [];
+    props.idpConf.map((item) => {
+      const itemString = item.cn.toString();
+      idpList.push(itemString);
+    });
+    setIdpConfOptions(idpList);
+  }, [props.idpConf]);
+
   const [principalAliasList, setPrincipalAliasList] = useState<ElementData[]>([
     {
       id: 0,
@@ -412,38 +477,6 @@ const UsersAccountSettings = (props: PropsToUsersAccountSettings) => {
     />
   );
 
-  // Dropdown 'Radius proxy configuration'
-  const [isRadiusConfOpen, setIsRadiusConfOpen] = useState(false);
-  const [radiusConfSelected, setRadiusConfSelected] = useState("");
-  const radiusConfOptions = [
-    { value: "Option 1", disabled: false },
-    { value: "Option 2", disabled: false },
-    { value: "Option 3", disabled: false },
-  ];
-  const radiusConfOnToggle = (isOpen: boolean) => {
-    setIsRadiusConfOpen(isOpen);
-  };
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const radiusConfOnSelect = (selection: any) => {
-    setRadiusConfSelected(selection.target.textContent);
-    setIsRadiusConfOpen(false);
-  };
-
-  // Dropdown 'External IdP configuration'
-  const [isIdpConfOpen, setIsIdpConfOpen] = useState(false);
-  const [idpConfSelected, setIdpConfSelected] = useState("");
-  const [idpConfOptions] = useState<IDPServer[]>([]);
-
-  const idpConfOnToggle = (isOpen: boolean) => {
-    setIsIdpConfOpen(isOpen);
-  };
-
-  const idpConfOnSelect = (selection: any) => {
-    setIdpConfSelected(selection.target.textContent);
-    setIsIdpConfOpen(false);
-  };
-
   // Messages for the popover
   const certificateMappingDataMessage = () => (
     <div>
@@ -699,26 +732,18 @@ const UsersAccountSettings = (props: PropsToUsersAccountSettings) => {
               label="Radius proxy configuration"
               fieldId="radius-proxy-configuration"
             >
-              <Select
+              <IpaSelect
                 id="radius-proxy-configuration"
                 name="ipatokenradiusconfiglink"
-                variant={SelectVariant.single}
-                placeholderText=" "
-                aria-label="Select Input with descriptions"
                 onToggle={radiusConfOnToggle}
                 onSelect={radiusConfOnSelect}
-                selections={radiusConfSelected}
+                elementsOptions={radiusConfOptions}
                 isOpen={isRadiusConfOpen}
-                aria-labelledby="radius-proxy-conf"
-              >
-                {radiusConfOptions.map((option, index) => (
-                  <SelectOption
-                    isDisabled={option.disabled}
-                    key={index}
-                    value={option.value}
-                  />
-                ))}
-              </Select>
+                ipaObject={ipaObject}
+                objectName="user"
+                metadata={props.metadata}
+                value={radiusConfSelected}
+              />
             </FormGroup>
             <FormGroup
               label="Radius proxy username"
@@ -736,22 +761,18 @@ const UsersAccountSettings = (props: PropsToUsersAccountSettings) => {
               label="External IdP configuration"
               fieldId="external-idp-configuration"
             >
-              <Select
+              <IpaSelect
                 id="external-idp-configuration"
                 name="ipaidpconfiglink"
-                variant={SelectVariant.single}
-                placeholderText=" "
-                aria-label="Select Input with descriptions"
                 onToggle={idpConfOnToggle}
                 onSelect={idpConfOnSelect}
-                selections={idpConfSelected}
+                elementsOptions={idpConfOptions}
                 isOpen={isIdpConfOpen}
-                aria-labelledby="external-idp-conf"
-              >
-                {idpConfOptions.map((option, index) => (
-                  <SelectOption key={index} value={option.cn} />
-                ))}
-              </Select>
+                ipaObject={ipaObject}
+                objectName="user"
+                metadata={props.metadata}
+                value={idpConfSelected}
+              />
             </FormGroup>
             <FormGroup
               label="External IdP user identifier"