refactor(settings): migrate helm cert panel to react [EE-5505] (#9132)

app/react/components/form-components/FileUpload/FileUploadField.tsx

@@ -14,6 +14,7 @@ export interface Props {
   required?: boolean;
   inputId: string;
   color?: ComponentProps<typeof Button>['color'];
+  name?: string;
 }
 
 export function FileUploadField({
@@ -24,6 +25,7 @@ export function FileUploadField({
   required = false,
   inputId,
   color = 'primary',
+  name,
 }: Props) {
   const fileRef = createRef<HTMLInputElement>();
 
@@ -38,6 +40,7 @@ export function FileUploadField({
         className={styles.fileInput}
         onChange={changeHandler}
         aria-label="file-input"
+        name={name}
       />
       <Button
         size="small"

app/react/components/form-components/FormActions.tsx

@@ -0,0 +1,34 @@
+import { PropsWithChildren } from 'react';
+
+import { LoadingButton } from '@@/buttons';
+
+interface Props {
+  submitLabel: string;
+  loadingText: string;
+  isLoading: boolean;
+  isValid: boolean;
+}
+
+export function FormActions({
+  submitLabel = 'Save',
+  loadingText = 'Saving',
+  isLoading,
+  children,
+  isValid,
+}: PropsWithChildren<Props>) {
+  return (
+    <div className="form-group">
+      <div className="col-sm-12">
+        <LoadingButton
+          loadingText={loadingText}
+          isLoading={isLoading}
+          disabled={!isValid}
+        >
+          {submitLabel}
+        </LoadingButton>
+
+        {children}
+      </div>
+    </div>
+  );
+}

app/react/components/form-components/yup-file-validation.ts

@@ -22,3 +22,24 @@ export function withFileSize(fileValidation: FileSchema, maxSize: number) {
     return file.size <= maxSize;
   }
 }
+
+export function withFileExtension(
+  fileValidation: FileSchema,
+  allowedExtensions: string[]
+) {
+  return fileValidation.test(
+    'fileExtension',
+    'Selected file has invalid extension.',
+    validateFileExtension
+  );
+
+  function validateFileExtension(file?: File) {
+    if (!file) {
+      return true;
+    }
+
+    const fileExtension = file.name.split('.').pop();
+
+    return allowedExtensions.includes(fileExtension || '');
+  }
+}