Added file name visualization in file select (#289)

* Added missing validations in add tenant modal

* Added file name visualization in file selector

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>

portal-ui/src/screens/Console/Common/CredentialsPrompt/CredentialsPrompt.tsx

@@ -15,6 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
+import get from "lodash/get";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { NewServiceAccount } from "./types";
 import { Button } from "@material-ui/core";
@@ -67,6 +68,8 @@ const CredentialsPrompt = ({
     return null;
   }
 
+  const consoleCreds = get(newServiceAccount, "console", null);
+
   return (
     <ModalWrapper
       modalOpen={open}
@@ -87,6 +90,21 @@ const CredentialsPrompt = ({
                 <b>Secret Key:</b> {newServiceAccount.secretKey}
               </li>
             </ul>
+            {consoleCreds && (
+              <React.Fragment>
+                <Grid item xs={12}>
+                  <strong>Console Credentials</strong>
+                  <ul>
+                    <li>
+                      <b>Access Key:</b> {consoleCreds.accessKey}
+                    </li>
+                    <li>
+                      <b>Secret Key:</b> {consoleCreds.secretKey}
+                    </li>
+                  </ul>
+                </Grid>
+              </React.Fragment>
+            )}
             <Typography
               component="p"
               variant="body1"
@@ -99,11 +117,23 @@ const CredentialsPrompt = ({
           <Grid item xs={12} className={classes.buttonContainer}>
             <Button
               onClick={() => {
+                let consoleExtras = {};
+
+                if (consoleCreds) {
+                  consoleExtras = {
+                    console: {
+                      access_key: consoleCreds.accessKey,
+                      secret_key: consoleCreds.secretKey,
+                    },
+                  };
+                }
+
                 download(
                   "credentials.json",
                   JSON.stringify({
                     access_key: newServiceAccount.accessKey,
                     secret_key: newServiceAccount.secretKey,
+                    ...consoleExtras,
                   })
                 );
               }}

portal-ui/src/screens/Console/Common/CredentialsPrompt/types.ts

@@ -17,4 +17,10 @@
 export interface NewServiceAccount {
   accessKey: string;
   secretKey: string;
+  console?: ConsoleSA;
+}
+
+export interface ConsoleSA {
+  accessKey: string;
+  secretKey: string;
 }

portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx

@@ -14,8 +14,12 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React from "react";
+import React, { useState } from "react";
+import get from "lodash/get";
 import { Grid, InputLabel, Tooltip } from "@material-ui/core";
+import IconButton from "@material-ui/core/IconButton";
+import AttachFileIcon from "@material-ui/icons/AttachFile";
+import CancelIcon from "@material-ui/icons/Cancel";
 import HelpIcon from "@material-ui/icons/Help";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
@@ -24,7 +28,7 @@ import { fileProcess } from "./utils";
 interface InputBoxProps {
   label: string;
   classes: any;
-  onChange: (e: string) => void;
+  onChange: (e: string, i: string) => void;
   id: string;
   name: string;
   disabled?: boolean;
@@ -32,6 +36,7 @@ interface InputBoxProps {
   required?: boolean;
   error?: string;
   accept?: string;
+  value?: string;
 }
 
 const styles = (theme: Theme) =>
@@ -41,6 +46,7 @@ const styles = (theme: Theme) =>
     textBoxContainer: {
       flexGrow: 1,
       position: "relative",
+      flexDirection: "column",
     },
     errorState: {
       color: "#b53b4b",
@@ -49,6 +55,27 @@ const styles = (theme: Theme) =>
       top: 7,
       right: 7,
     },
+    errorText: {
+      margin: "0",
+      fontSize: "0.75rem",
+      marginTop: 3,
+      textAlign: "left",
+      fontFamily: "Lato,sans-serif",
+      fontWeight: 400,
+      lineHeight: "1.66",
+      color: "#dc1f2e",
+    },
+    valueString: {
+      maxWidth: 350,
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      marginTop: 2,
+    },
+    fileReselect: {
+      display: "flex",
+      alignItems: "center",
+    },
   });
 
 const FileSelector = ({
@@ -62,7 +89,10 @@ const FileSelector = ({
   required,
   error = "",
   accept = "",
+  value = "",
 }: InputBoxProps) => {
+  const [showFileSelector, setShowSelector] = useState(false);
+
   return (
     <React.Fragment>
       <Grid
@@ -92,19 +122,62 @@ const FileSelector = ({
             )}
           </InputLabel>
         )}
-        <div className={classes.textBoxContainer}>
+
-          <input
+        {showFileSelector || value === "" ? (
-            type="file"
+          <div className={classes.textBoxContainer}>
-            name={name}
+            <input
-            onChange={(e) => {
+              type="file"
-              fileProcess(e, (data: any) => {
+              name={name}
-                onChange(data);
+              onChange={(e) => {
-              });
+                const fileName = get(e, "target.files[0].name", "");
-            }}
+                fileProcess(e, (data: any) => {
-            accept={accept}
+                  onChange(data, fileName);
-            required
+                });
-          />
+              }}
-        </div>
+              accept={accept}
+              required={required}
+              disabled={disabled}
+            />
+
+            {value !== "" && (
+              <IconButton
+                color="primary"
+                aria-label="upload picture"
+                component="span"
+                onClick={() => {
+                  setShowSelector(false);
+                }}
+                disableRipple={false}
+                disableFocusRipple={false}
+              >
+                <CancelIcon />
+              </IconButton>
+            )}
+
+            {error !== "" && (
+              <React.Fragment>
+                <br />
+                <span className={classes.errorText}>{error}</span>
+              </React.Fragment>
+            )}
+          </div>
+        ) : (
+          <div className={classes.fileReselect}>
+            <div className={classes.valueString}>{value}</div>
+            <IconButton
+              color="primary"
+              aria-label="upload picture"
+              component="span"
+              onClick={() => {
+                setShowSelector(true);
+              }}
+              disableRipple={false}
+              disableFocusRipple={false}
+            >
+              <AttachFileIcon />
+            </IconButton>
+          </div>
+        )}
       </Grid>
     </React.Fragment>
   );

portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx

@@ -52,13 +52,12 @@ import {
   ICapacity,
   ITenantCreator,
 } from "../../../../common/types";
-import { NewTenantCredential } from "./TenantCredentialsPrompt/types";
 
 interface IAddTenantProps {
   open: boolean;
   closeModalAndRefresh: (
     reloadData: boolean,
-    res: NewTenantCredential | null
+    res: NewServiceAccount | null
   ) => any;
   classes: any;
 }
@@ -178,6 +177,9 @@ const AddTenant = ({
   const [nameTenantValid, setNameTenantValid] = useState<boolean>(false);
   const [configValid, setConfigValid] = useState<boolean>(false);
   const [configureValid, setConfigureValid] = useState<boolean>(false);
+  const [idpValid, setIdpValid] = useState<boolean>(false);
+  const [securityValid, setSecurityValid] = useState<boolean>(false);
+  const [encryptionValid, setEncryptionValid] = useState<boolean>(false);
 
   // Custom Elements
   const [customDockerhub, setCustomDockerhub] = useState<boolean>(false);
@@ -198,6 +200,20 @@ const AddTenant = ({
     gemaltoCA: "",
   });
 
+  // Files States
+  const [tlsKeyVal, setTlsKeyVal] = useState<string>("");
+  const [tlsCertVal, setTlsCertVal] = useState<string>("");
+  const [consoleKeyVal, setConsoleKeyVal] = useState<string>("");
+  const [consoleCertVal, setConsoleCertVal] = useState<string>("");
+  const [serverKeyVal, setServerKeyVal] = useState<string>("");
+  const [serverCertVal, setServerCertVal] = useState<string>("");
+  const [clientKeyVal, setClientKeyVal] = useState<string>("");
+  const [clientCertVal, setClientCertVal] = useState<string>("");
+  const [vaultKeyVal, setVaultKeyVal] = useState<string>("");
+  const [vaultCertVal, setVaultCertVal] = useState<string>("");
+  const [vaultCAVal, setVaultCAVal] = useState<string>("");
+  const [gemaltoCAVal, setGemaltoCAVal] = useState<string>("");
+
   /*Debounce functions*/
 
   // Storage Quotas
@@ -351,6 +367,14 @@ const AddTenant = ({
           pattern: /^((.*?)\/(.*?):(.+))$/,
           customPatternMessage: "Format must be of form: 'minio/minio:VERSION'",
         },
+        {
+          fieldKey: "consoleImage",
+          required: true,
+          value: consoleImage,
+          pattern: /^((.*?)\/(.*?):(.+))$/,
+          customPatternMessage:
+            "Format must be of form: 'minio/console:VERSION'",
+        },
       ];
     }
 
@@ -359,7 +383,302 @@ const AddTenant = ({
     setConfigureValid(Object.keys(commonVal).length === 0);
 
     setValidationErrors(commonVal);
-  }, [customDockerhub, imageName]);
+  }, [customDockerhub, imageName, consoleImage]);
+
+  useEffect(() => {
+    let customIDPValidation: IValidation[] = [];
+
+    if (idpSelection === "none") {
+      setIdpValid(true);
+      setValidationErrors({});
+
+      return;
+    }
+
+    if (idpSelection === "OpenID") {
+      customIDPValidation = [
+        ...customIDPValidation,
+        {
+          fieldKey: "openID_URL",
+          required: true,
+          value: openIDURL,
+        },
+        {
+          fieldKey: "openID_clientID",
+          required: true,
+          value: openIDClientID,
+        },
+        {
+          fieldKey: "openID_secretID",
+          required: true,
+          value: openIDSecretID,
+        },
+      ];
+    }
+
+    if (idpSelection === "AD") {
+      customIDPValidation = [
+        ...customIDPValidation,
+        {
+          fieldKey: "AD_URL",
+          required: true,
+          value: ADURL,
+        },
+        {
+          fieldKey: "ad_userNameFilter",
+          required: true,
+          value: ADUserNameFilter,
+        },
+        {
+          fieldKey: "ad_groupBaseDN",
+          required: true,
+          value: ADGroupBaseDN,
+        },
+        {
+          fieldKey: "ad_groupSearchFilter",
+          required: true,
+          value: ADGroupSearchFilter,
+        },
+        {
+          fieldKey: "ad_nameAttribute",
+          required: true,
+          value: ADNameAttribute,
+        },
+      ];
+    }
+
+    const commonVal = commonFormValidation(customIDPValidation);
+
+    setIdpValid(Object.keys(commonVal).length === 0);
+
+    setValidationErrors(commonVal);
+  }, [
+    idpSelection,
+    openIDURL,
+    openIDClientID,
+    openIDSecretID,
+    ADURL,
+    ADUserNameFilter,
+    ADGroupBaseDN,
+    ADGroupSearchFilter,
+    ADNameAttribute,
+  ]);
+
+  useEffect(() => {
+    let securityValidation: IValidation[] = [];
+
+    if (!enableTLS) {
+      setSecurityValid(true);
+      setValidationErrors({});
+      return;
+    }
+
+    if (tlsType === "autocert") {
+      setSecurityValid(true);
+      setValidationErrors({});
+      return;
+    }
+
+    securityValidation = [
+      ...securityValidation,
+      {
+        fieldKey: "tlsKey",
+        required: true,
+        value: filesBase64.tlsKey,
+      },
+      {
+        fieldKey: "tlsCert",
+        required: true,
+        value: filesBase64.tlsCert,
+      },
+      {
+        fieldKey: "consoleKey",
+        required: true,
+        value: filesBase64.consoleKey,
+      },
+      {
+        fieldKey: "consoleCert",
+        required: true,
+        value: filesBase64.consoleCert,
+      },
+    ];
+
+    const commonVal = commonFormValidation(securityValidation);
+
+    setSecurityValid(Object.keys(commonVal).length === 0);
+
+    setValidationErrors(commonVal);
+  }, [enableTLS, filesBase64, tlsType]);
+
+  useEffect(() => {
+    let encryptionValidation: IValidation[] = [];
+
+    if (enableEncryption) {
+      if (enableTLS && tlsType !== "autocert") {
+        encryptionValidation = [
+          ...encryptionValidation,
+          {
+            fieldKey: "serverKey",
+            required: true,
+            value: filesBase64.serverKey,
+          },
+          {
+            fieldKey: "serverCert",
+            required: true,
+            value: filesBase64.serverCert,
+          },
+          {
+            fieldKey: "clientKey",
+            required: true,
+            value: filesBase64.clientKey,
+          },
+          {
+            fieldKey: "clientCert",
+            required: true,
+            value: filesBase64.clientCert,
+          },
+        ];
+      }
+
+      if (encryptionType === "vault") {
+        encryptionValidation = [
+          ...encryptionValidation,
+          {
+            fieldKey: "vault_endpoint",
+            required: true,
+            value: vaultEndpoint,
+          },
+          {
+            fieldKey: "vault_engine",
+            required: true,
+            value: vaultEngine,
+          },
+          {
+            fieldKey: "vault_id",
+            required: true,
+            value: vaultId,
+          },
+          {
+            fieldKey: "vault_secret",
+            required: true,
+            value: vaultSecret,
+          },
+          {
+            fieldKey: "vault_key",
+            required: true,
+            value: filesBase64.vaultKey,
+          },
+          {
+            fieldKey: "vault_cert",
+            required: true,
+            value: filesBase64.vaultCert,
+          },
+          {
+            fieldKey: "vault_ca",
+            required: true,
+            value: filesBase64.vaultCA,
+          },
+          {
+            fieldKey: "vault_ping",
+            required: true,
+            value: vaultPing,
+            customValidation: parseInt(vaultPing) < 0,
+            customValidationMessage: "Value needs to be 0 or greater",
+          },
+          {
+            fieldKey: "vault_retry",
+            required: true,
+            value: vaultRetry,
+            customValidation: parseInt(vaultRetry) < 0,
+            customValidationMessage: "Value needs to be 0 or greater",
+          },
+        ];
+      }
+
+      if (encryptionType === "aws") {
+        encryptionValidation = [
+          ...encryptionValidation,
+          {
+            fieldKey: "aws_endpoint",
+            required: true,
+            value: awsEndpoint,
+          },
+          {
+            fieldKey: "aws_region",
+            required: true,
+            value: awsRegion,
+          },
+          {
+            fieldKey: "aws_accessKey",
+            required: true,
+            value: awsAccessKey,
+          },
+          {
+            fieldKey: "aws_secretKey",
+            required: true,
+            value: awsSecretKey,
+          },
+        ];
+      }
+
+      if (encryptionType === "gemalto") {
+        encryptionValidation = [
+          ...encryptionValidation,
+          {
+            fieldKey: "gemalto_endpoint",
+            required: true,
+            value: gemaltoEndpoint,
+          },
+          {
+            fieldKey: "gemalto_token",
+            required: true,
+            value: gemaltoToken,
+          },
+          {
+            fieldKey: "gemalto_domain",
+            required: true,
+            value: gemaltoDomain,
+          },
+          {
+            fieldKey: "gemalto_retry",
+            required: true,
+            value: gemaltoRetry,
+            customValidation: parseInt(gemaltoRetry) < 0,
+            customValidationMessage: "Value needs to be 0 or greater",
+          },
+          {
+            fieldKey: "gemalto_ca",
+            required: true,
+            value: filesBase64.gemaltoCA,
+          },
+        ];
+      }
+    }
+
+    const commonVal = commonFormValidation(encryptionValidation);
+
+    setEncryptionValid(Object.keys(commonVal).length === 0);
+
+    setValidationErrors(commonVal);
+  }, [
+    enableEncryption,
+    encryptionType,
+    filesBase64,
+    vaultEndpoint,
+    vaultEngine,
+    vaultId,
+    vaultSecret,
+    vaultPing,
+    vaultRetry,
+    awsEndpoint,
+    awsRegion,
+    awsSecretKey,
+    awsAccessKey,
+    gemaltoEndpoint,
+    gemaltoToken,
+    gemaltoDomain,
+    gemaltoRetry,
+  ]);
 
   const clearValidationError = (fieldKey: string) => {
     const newValidationElement = { ...validationErrors };
@@ -583,7 +902,7 @@ const AddTenant = ({
       api
         .invoke("POST", `/api/v1/tenants`, dataSend)
         .then((res) => {
-          const newSrvAcc: NewTenantCredential = {
+          const newSrvAcc: NewServiceAccount = {
             accessKey: res.access_key,
             secretKey: res.secret_key,
             console: {
@@ -971,7 +1290,7 @@ const AddTenant = ({
       buttons: [
         cancelButton,
         { label: "Back", type: "back", enabled: true },
-        { label: "Next", type: "next", enabled: true },
+        { label: "Next", type: "next", enabled: idpValid },
       ],
     },
     {
@@ -1021,50 +1340,66 @@ const AddTenant = ({
                   <h5>MinIO TLS Certs</h5>
                   <Grid item xs={12}>
                     <FileSelector
-                      onChange={(encodedValue) => {
+                      onChange={(encodedValue, fileName) => {
                         storeCertInObject("tlsKey", encodedValue);
+                        setTlsKeyVal(fileName);
+                        clearValidationError("tlsKey");
                       }}
                       accept=".key,.pem"
                       id="tlsKey"
                       name="tlsKey"
                       label="Key"
+                      error={validationErrors["tlsKey"] || ""}
+                      value={tlsKeyVal}
                       required
                     />
                   </Grid>
                   <Grid item xs={12}>
                     <FileSelector
-                      onChange={(encodedValue) => {
+                      onChange={(encodedValue, fileName) => {
                         storeCertInObject("tlsCert", encodedValue);
+                        setTlsCertVal(fileName);
+                        clearValidationError("tlsCert");
                       }}
                       accept=".cer,.crt,.cert,.pem"
                       id="tlsCert"
                       name="tlsCert"
                       label="Cert"
+                      error={validationErrors["tlsCert"] || ""}
+                      value={tlsCertVal}
                       required
                     />
                   </Grid>
                   <h5>Console TLS Certs</h5>
                   <Grid item xs={12}>
                     <FileSelector
-                      onChange={(encodedValue) => {
+                      onChange={(encodedValue, fileName) => {
                         storeCertInObject("consoleKey", encodedValue);
+                        setConsoleKeyVal(fileName);
+                        clearValidationError("consoleKey");
                       }}
                       accept=".key,.pem"
                       id="consoleKey"
                       name="consoleKey"
                       label="Key"
+                      error={validationErrors["consoleKey"] || ""}
+                      value={consoleKeyVal}
                       required
                     />
                   </Grid>
                   <Grid item xs={12}>
                     <FileSelector
-                      onChange={(encodedValue) => {
+                      onChange={(encodedValue, fileName) => {
                         storeCertInObject("consoleCert", encodedValue);
+                        setConsoleCertVal(fileName);
+                        clearValidationError("consoleCert");
                       }}
                       accept=".cer,.crt,.cert,.pem"
                       id="consoleCert"
                       name="consoleCert"
                       label="Cert"
+                      error={validationErrors["consoleCert"] || ""}
+                      value={consoleCertVal}
                       required
                     />
                   </Grid>
@@ -1077,7 +1412,7 @@ const AddTenant = ({
       buttons: [
         cancelButton,
         { label: "Back", type: "back", enabled: true },
-        { label: "Next", type: "next", enabled: true },
+        { label: "Next", type: "next", enabled: securityValid },
       ],
     },
     {
@@ -1129,50 +1464,66 @@ const AddTenant = ({
                   <h5>Server</h5>
                   <Grid item xs={12}>
                     <FileSelector
-                      onChange={(encodedValue) => {
+                      onChange={(encodedValue, fileName) => {
                         storeCertInObject("serverKey", encodedValue);
+                        setServerKeyVal(fileName);
+                        clearValidationError("serverKey");
                       }}
                       accept=".key,.pem"
                       id="serverKey"
                       name="serverKey"
                       label="Key"
+                      error={validationErrors["serverKey"] || ""}
+                      value={serverKeyVal}
                       required
                     />
                   </Grid>
                   <Grid item xs={12}>
                     <FileSelector
-                      onChange={(encodedValue) => {
+                      onChange={(encodedValue, fileName) => {
                         storeCertInObject("serverCert", encodedValue);
+                        setServerCertVal(fileName);
+                        clearValidationError("serverCert");
                       }}
                       accept=".cer,.crt,.cert,.pem"
                       id="serverCert"
                       name="serverCert"
                       label="Cert"
+                      error={validationErrors["serverCert"] || ""}
+                      value={serverCertVal}
                       required
                     />
                   </Grid>
                   <h5>Client</h5>
                   <Grid item xs={12}>
                     <FileSelector
-                      onChange={(encodedValue) => {
+                      onChange={(encodedValue, fileName) => {
                         storeCertInObject("clientKey", encodedValue);
+                        setClientKeyVal(fileName);
+                        clearValidationError("clientKey");
                       }}
                       accept=".key,.pem"
                       id="clientKey"
                       name="clientKey"
                       label="Key"
+                      error={validationErrors["clientKey"] || ""}
+                      value={clientKeyVal}
                       required
                     />
                   </Grid>
                   <Grid item xs={12}>
                     <FileSelector
-                      onChange={(encodedValue) => {
+                      onChange={(encodedValue, fileName) => {
                         storeCertInObject("clientCert", encodedValue);
+                        setClientCertVal(fileName);
+                        clearValidationError("clientCert");
                       }}
                       accept=".cer,.crt,.cert,.pem"
                       id="clientCert"
                       name="clientCert"
                       label="Cert"
+                      error={validationErrors["clientCert"] || ""}
+                      value={clientCertVal}
                       required
                     />
                   </Grid>
@@ -1201,9 +1552,11 @@ const AddTenant = ({
                       name="vault_engine"
                       onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                         setVaultEngine(e.target.value);
+                        clearValidationError("vault_engine");
                       }}
                       label="Engine"
                       value={vaultEngine}
+                      error={validationErrors["vault_engine"] || ""}
                       required
                     />
                   </Grid>
@@ -1263,7 +1616,7 @@ const AddTenant = ({
                         setVaultSecret(e.target.value);
                         clearValidationError("vault_secret");
                       }}
-                      label="Id"
+                      label="Secret"
                       value={vaultSecret}
                       error={validationErrors["vault_secret"] || ""}
                       required
@@ -1277,46 +1630,60 @@ const AddTenant = ({
                       name="vault_retry"
                       onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                         setVaultRetry(e.target.value);
+                        clearValidationError("vault_retry");
                       }}
                       label="Retry"
                       value={vaultRetry}
+                      error={validationErrors["vault_retry"] || ""}
                       required
                     />
                   </Grid>
                   <h5>TLS</h5>
                   <Grid item xs={12}>
                     <FileSelector
-                      onChange={(encodedValue) => {
+                      onChange={(encodedValue, fileName) => {
                         storeCertInObject("vaultKey", encodedValue);
+                        setVaultKeyVal(fileName);
+                        clearValidationError("vault_key");
                       }}
                       accept=".key,.pem"
                       id="vault_key"
                       name="vault_key"
                       label="Key"
+                      error={validationErrors["vault_key"] || ""}
+                      value={vaultKeyVal}
                       required
                     />
                   </Grid>
                   <Grid item xs={12}>
                     <FileSelector
-                      onChange={(encodedValue) => {
+                      onChange={(encodedValue, fileName) => {
                         storeCertInObject("vaultCert", encodedValue);
+                        setVaultCertVal(fileName);
+                        clearValidationError("vault_cert");
                       }}
                       accept=".cer,.crt,.cert,.pem"
                       id="vault_cert"
                       name="vault_cert"
                       label="Cert"
+                      error={validationErrors["vault_cert"] || ""}
+                      value={vaultCertVal}
                       required
                     />
                   </Grid>
                   <Grid item xs={12}>
                     <FileSelector
-                      onChange={(encodedValue) => {
+                      onChange={(encodedValue, fileName) => {
                         storeCertInObject("vaultCA", encodedValue);
+                        setVaultCAVal(fileName);
+                        clearValidationError("vault_ca");
                       }}
                       accept=".cer,.crt,.cert,.pem"
                       id="vault_ca"
                       name="vault_ca"
                       label="CA"
+                      error={validationErrors["vault_ca"] || ""}
+                      value={vaultCAVal}
                       required
                     />
                   </Grid>
@@ -1329,9 +1696,11 @@ const AddTenant = ({
                       name="vault_ping"
                       onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                         setVaultPing(e.target.value);
+                        clearValidationError("vault_ping");
                       }}
                       label="Ping"
                       value={vaultPing}
+                      error={validationErrors["vault_ping"] || ""}
                       required
                     />
                   </Grid>
@@ -1443,11 +1812,11 @@ const AddTenant = ({
                       name="gemalto_token"
                       onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                         setGemaltoToken(e.target.value);
-                        clearValidationError("gemalto_endpoint");
+                        clearValidationError("gemalto_token");
                       }}
                       label="Token"
                       value={gemaltoToken}
-                      error={validationErrors["gemalto_endpoint"] || ""}
+                      error={validationErrors["gemalto_token"] || ""}
                       required
                     />
                   </Grid>
@@ -1473,6 +1842,7 @@ const AddTenant = ({
                       name="gemalto_retry"
                       onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                         setGemaltoRetry(e.target.value);
+                        clearValidationError("gemalto_retry");
                       }}
                       label="Domain"
                       value={gemaltoRetry}
@@ -1482,13 +1852,17 @@ const AddTenant = ({
                   <h5>TLS</h5>
                   <Grid item xs={12}>
                     <FileSelector
-                      onChange={(encodedValue) => {
+                      onChange={(encodedValue, fileName) => {
                         storeCertInObject("gemaltoCA", encodedValue);
+                        setGemaltoCAVal(fileName);
+                        clearValidationError("gemalto_ca");
                       }}
                       accept=".cer,.crt,.cert,.pem"
                       id="gemalto_ca"
                       name="gemalto_ca"
                       label="CA"
+                      error={validationErrors["gemalto_ca"] || ""}
+                      value={gemaltoCAVal}
                       required
                     />
                   </Grid>
@@ -1501,7 +1875,7 @@ const AddTenant = ({
       buttons: [
         cancelButton,
         { label: "Back", type: "back", enabled: true },
-        { label: "Next", type: "next", enabled: true },
+        { label: "Next", type: "next", enabled: encryptionValid },
       ],
     },
     {

portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx

@@ -34,8 +34,6 @@ import { NewServiceAccount } from "../../Common/CredentialsPrompt/types";
 import CredentialsPrompt from "../../Common/CredentialsPrompt/CredentialsPrompt";
 import history from "../../../../history";
 import RefreshIcon from "@material-ui/icons/Refresh";
-import TenantCredentialsPrompt from "./TenantCredentialsPrompt/TenantCredentialsPrompt";
-import { NewTenantCredential } from "./TenantCredentialsPrompt/types";
 
 interface ITenantsList {
   classes: any;
@@ -100,11 +98,11 @@ const ListTenants = ({ classes }: ITenantsList) => {
   const [
     createdAccount,
     setCreatedAccount,
-  ] = useState<NewTenantCredential | null>(null);
+  ] = useState<NewServiceAccount | null>(null);
 
   const closeAddModalAndRefresh = (
     reloadData: boolean,
-    res: NewTenantCredential | null
+    res: NewServiceAccount | null
   ) => {
     setCreateTenantOpen(false);
 
@@ -238,7 +236,7 @@ const ListTenants = ({ classes }: ITenantsList) => {
         />
       )}
       {showNewCredentials && (
-        <TenantCredentialsPrompt
+        <CredentialsPrompt
           newServiceAccount={createdAccount}
           open={showNewCredentials}
           closeModal={() => {

portal-ui/src/utils/validationFunctions.ts

@@ -19,7 +19,7 @@ export interface IValidation {
   required: boolean;
   pattern?: RegExp;
   customPatternMessage?: string;
-  customValidation?: boolean;
+  customValidation?: boolean; // The validation to trigger the error
   customValidationMessage?: string;
   value: string;
 }