Added PEM format for SAML (#3649)

apps/admin-ui/src/clients/keys/GenerateKeyDialog.tsx

@@ -34,15 +34,23 @@ type GenerateKeyDialogProps = {
 type KeyFormProps = {
   useFile?: boolean;
   isSaml?: boolean;
+  hasPem?: boolean;
 };
 
-export const KeyForm = ({ isSaml = false, useFile = false }: KeyFormProps) => {
+const CERT_PEM = "Certificate PEM" as const;
+
+export const KeyForm = ({
+  isSaml = false,
+  hasPem = false,
+  useFile = false,
+}: KeyFormProps) => {
   const { t } = useTranslation("clients");
 
   const [filename, setFilename] = useState<string>();
   const [openArchiveFormat, setOpenArchiveFormat] = useState(false);
 
-  const { control } = useFormContext<KeyStoreConfig>();
+  const { control, watch } = useFormContext<KeyStoreConfig>();
+  const format = watch("format");
 
   return (
     <Form className="pf-u-pt-lg">
@@ -73,13 +81,15 @@ export const KeyForm = ({ isSaml = false, useFile = false }: KeyFormProps) => {
               aria-label={t("archiveFormat")}
               isOpen={openArchiveFormat}
             >
-              {["JKS", "PKCS12"].map((option) => (
-                <SelectOption
-                  selected={option === value}
-                  key={option}
-                  value={option}
-                />
-              ))}
+              {["JKS", "PKCS12"]
+                .concat(hasPem ? CERT_PEM : [])
+                .map((option) => (
+                  <SelectOption
+                    selected={option === value}
+                    key={option}
+                    value={option}
+                  />
+                ))}
             </Select>
           )}
         />
@@ -114,7 +124,9 @@ export const KeyForm = ({ isSaml = false, useFile = false }: KeyFormProps) => {
           />
         </FormGroup>
       )}
-      <StoreSettings hidePassword={useFile} isSaml={isSaml} />
+      {format !== CERT_PEM && (
+        <StoreSettings hidePassword={useFile} isSaml={isSaml} />
+      )}
     </Form>
   );
 };

apps/admin-ui/src/clients/keys/SamlImportKeyDialog.tsx

@@ -49,7 +49,7 @@ export const SamlImportKeyDialog = ({
       }}
     >
       <FormProvider {...form}>
-        <KeyForm useFile />
+        <KeyForm useFile hasPem />
       </FormProvider>
     </ConfirmDialogModal>
   );