Add functionality for text inputs with buttons

The functionality to take data directly from
the metadata needs to be implemented for the
Text inputs with buttons (list of text inputs).
This should be applied to the following
field: 'Principal alias' (`krbprincipalname`).

Signed-off-by: Carla Martinez <[email protected]>

src/components/Form/IpaTextInputFromList.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+// Patternfly
+import { Flex, FlexItem } from "@patternfly/react-core";
+// Layouts
+import SecondaryButton from "../layouts/SecondaryButton";
+// Data types
+import { Metadata } from "src/utils/datatypes/globalDataTypes";
+// Fields
+import IpaTextInputWithId from "./IpaTextInputWithId";
+// Hooks
+import useAlerts from "src/hooks/useAlerts";
+// ipaObject utils
+import { getParamProperties } from "src/utils/ipaObjectUtils";
+
+interface PropsToTextInputFromList {
+ name: string;
+ elementsList: string[];
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ ipaObject: Record<string, any>;
+ metadata: Metadata;
+ onOpenModal: () => void;
+ onRemove: (idx: number) => void;
+}
+
+const IpaTextInputFromList = (props: PropsToTextInputFromList) => {
+ const [elementsList, setElementsList] = React.useState(props.elementsList);
+
+ // Get 'readOnly' to determine if the field has permissions to be edited
+ const { readOnly } = getParamProperties({
+ name: props.name,
+ ipaObject: props.ipaObject,
+ objectName: "user",
+ metadata: props.metadata,
+ });
+
+ // Alerts to show in the UI
+ const alerts = useAlerts();
+
+ React.useEffect(() => {
+ setElementsList(props.elementsList);
+ }, [props.elementsList]);
+
+ return (
+ <>
+ <alerts.ManagedAlerts />
+ <Flex direction={{ default: "column" }} name={props.name}>
+ {elementsList !== undefined &&
+ elementsList.map((element, idx) => (
+ <Flex direction={{ default: "row" }} key={idx} name="value">
+ <FlexItem
+ key={idx}
+ flex={{ default: "flex_1" }}
+ className="pf-u-ml-lg"
+ >
+ <IpaTextInputWithId
+ id={props.name + "-" + idx}
+ value={element}
+ name={props.name}
+ ipaObject={props.ipaObject}
+ objectName="user"
+ metadata={props.metadata}
+ idx={idx}
+ readOnly={true} // This field is always read-only
+ />
+ </FlexItem>
+ <FlexItem
+ key={element + "-delete-button"}
+ order={{ default: "-1" }}
+ >
+ <SecondaryButton
+ name="remove"
+ onClickHandler={() => props.onRemove(idx)}
+ isDisabled={readOnly}
+ >
+ Delete
+ </SecondaryButton>
+ </FlexItem>
+ </Flex>
+ ))}
+ </Flex>
+ <SecondaryButton
+ classname="pf-u-mt-md"
+ name="add"
+ onClickHandler={props.onOpenModal}
+ isDisabled={readOnly}
+ >
+ Add
+ </SecondaryButton>
+ </>
+ );
+};
+
+export default IpaTextInputFromList;

src/components/Form/IpaTextInputWithId.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+// PatternFly
+import { TextInput } from "@patternfly/react-core";
+// Utils
+import {
+ IPAParamDefinitionWithIndex,
+ convertToString,
+ getParamPropertiesWithIndex,
+} from "src/utils/ipaObjectUtils";
+
+const IpaTextInputWithId = (props: IPAParamDefinitionWithIndex) => {
+ const { required, readOnly, value } = getParamPropertiesWithIndex(props);
+
+ const [paramValue, setParamValue] = React.useState("");
+
+ React.useEffect(() => {
+ if (props.value !== undefined) {
+ setParamValue(props.value);
+ } else {
+ setParamValue(convertToString(value));
+ }
+ }, [props.value, value]);
+
+ return (
+ <TextInput
+ key={props.idx}
+ id={props.id || props.name}
+ name={props.name}
+ value={paramValue}
+ type="text"
+ aria-label={props.name}
+ isRequired={required}
+ readOnlyVariant={readOnly ? "plain" : undefined}
+ />
+ );
+};
+
+export default IpaTextInputWithId;

src/components/UserSettings.tsx

@@ -38,7 +38,7 @@ import UsersMailingAddress from "src/components/UsersSections/UsersMailingAddres
 import UsersEmployeeInfo from "src/components/UsersSections/UsersEmployeeInfo";
 import UsersAttributesSMB from "src/components/UsersSections/UsersAttributesSMB";
 // RPC
-import { useSaveUserMutation } from "src/services/rpc";
+import { ErrorResult, useSaveUserMutation } from "src/services/rpc";
 // Hooks
 import useAlerts from "src/hooks/useAlerts";
 
@@ -121,13 +121,10 @@ const UserSettings = (props: PropsToUserSettings) => {
  alerts.addAlert("save-success", "User modified", "success");
  } else if (response.data.error) {
  // Show toast notification: error
- alerts.addAlert(
- "save-error",
- response.data.error || "Error when modifying user",
- "danger"
- );
+ const errorMessage = response.data.error as ErrorResult;
+ alerts.addAlert("save-error", errorMessage.message, "danger");
  }
- // TODO: Reset values. Disable 'revert' and 'save' buttons
+ // Reset values. Disable 'revert' and 'save' buttons
  props.onResetValues();
  }
  });