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

app/react/components/BEFeatureIndicator/BEFeatureIndicator.css

@@ -22,5 +22,4 @@
 
 .be-indicator-container {
   border: solid 1px var(--BE-only);
-  margin: 15px;
 }

app/react/components/BEFeatureIndicator/BEOverlay.tsx

@@ -0,0 +1,31 @@
+import { FeatureId } from '@/react/portainer/feature-flags/enums';
+import { isLimitedToBE } from '@/react/portainer/feature-flags/feature-flags.service';
+
+import { Tooltip } from '@@/Tip/Tooltip';
+
+import { BEFeatureIndicator } from '.';
+
+export function BEOverlay({
+  featureId,
+  children,
+}: {
+  featureId: FeatureId;
+  children: React.ReactNode;
+}) {
+  const isLimited = isLimitedToBE(featureId);
+  if (!isLimited) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div className="be-indicator-container limited-be">
+      <div className="overlay">
+        <div className="limited-be-link vertical-center">
+          <BEFeatureIndicator featureId={FeatureId.CA_FILE} />
+          <Tooltip message="This feature is currently limited to Business Edition users only. " />
+        </div>
+        <div className="limited-be-content">{children}</div>
+      </div>
+    </div>
+  );
+}

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 || '');
+  }
+}