Issue 239 - Implement host text input settings

Implement the Text inputs on the host settings page.
Had to implement the entire CI layer, but it will make the other
components easier to add.

Signed-off-by: Mark Reynolds <mreynolds@redhat.com>

src/components/Form/IpaTextArea.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+// PatternFly
+import { TextArea } from "@patternfly/react-core";
+import {
+  IPAParamDefinition,
+  getParamProperties,
+  convertToString,
+} from "src/utils/ipaObjectUtils";
+
+const IpaTextArea = (props: IPAParamDefinition) => {
+  const { required, readOnly, value, onChange } = getParamProperties(props);
+
+  return (
+    <TextArea
+      id={props.name}
+      name={props.name}
+      value={convertToString(value)}
+      onChange={(_event, value) => onChange(value)}
+      aria-label={props.name}
+      isRequired={required}
+      readOnlyVariant={readOnly ? "plain" : undefined}
+      autoResize
+    />
+  );
+};
+
+export default IpaTextArea;

src/components/HostsSections/AllowedCreateKeytab.tsx

@@ -10,19 +10,23 @@ import CreateKeytabHostGroupsTable from "../tables/HostsSettings/CreateKeytabHos
 import { Host } from "src/utils/datatypes/globalDataTypes";
 
 interface PropsToAllowCreateKeytab {
-  host: Host;
+  host: Partial<Host>;
 }
 
 const AllowedCreateKeytab = (props: PropsToAllowCreateKeytab) => {
+  let fqdn = "";
+  if (props.host.fqdn !== undefined) {
+    fqdn = props.host.fqdn;
+  }
   return (
     <Flex direction={{ default: "column", lg: "row" }}>
       <FlexItem flex={{ default: "flex_1" }}>
-        <CreateKeytabUsersTable host={props.host.fqdn} />
-        <CreateKeytabHostsTable host={props.host.fqdn} />
+        <CreateKeytabUsersTable host={fqdn} />
+        <CreateKeytabHostsTable host={fqdn} />
       </FlexItem>
       <FlexItem flex={{ default: "flex_1" }}>
-        <CreateKeytabUserGroupsTable host={props.host.fqdn} />
-        <CreateKeytabHostGroupsTable host={props.host.fqdn} />
+        <CreateKeytabUserGroupsTable host={fqdn} />
+        <CreateKeytabHostGroupsTable host={fqdn} />
       </FlexItem>
     </Flex>
   );

src/components/HostsSections/AllowedRetrieveKeytab.tsx

@@ -10,19 +10,23 @@ import RetrieveKeytabHostGroupsTable from "../tables/HostsSettings/RetrieveKeyta
 import { Host } from "src/utils/datatypes/globalDataTypes";
 
 interface PropsToAllowRetrieveKeytab {
-  host: Host;
+  host: Partial<Host>;
 }
 
 const AllowedRetrieveKeytab = (props: PropsToAllowRetrieveKeytab) => {
+  let fqdn = "";
+  if (props.host.fqdn !== undefined) {
+    fqdn = props.host.fqdn;
+  }
   return (
     <Flex direction={{ default: "column", lg: "row" }}>
       <FlexItem flex={{ default: "flex_1" }}>
-        <RetrieveKeytabUsersTable host={props.host.fqdn} />
-        <RetrieveKeytabHostsTable host={props.host.fqdn} />
+        <RetrieveKeytabUsersTable host={fqdn} />
+        <RetrieveKeytabHostsTable host={fqdn} />
       </FlexItem>
       <FlexItem flex={{ default: "flex_1" }}>
-        <RetrieveKeytabUserGroupsTable host={props.host.fqdn} />
-        <RetrieveKeytabHostGroupsTable host={props.host.fqdn} />
+        <RetrieveKeytabUserGroupsTable host={fqdn} />
+        <RetrieveKeytabHostGroupsTable host={fqdn} />
       </FlexItem>
     </Flex>
   );