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

app/portainer/error.ts

@@ -1,9 +1,9 @@
 export default class PortainerError extends Error {
-  err?: Error;
+  err?: unknown;
 
   isPortainerError = true;
 
-  constructor(msg: string, err?: Error) {
+  constructor(msg: string, err?: unknown) {
     super(msg);
     this.err = err;
   }

app/portainer/react/components/file-upload-field.ts

@@ -10,4 +10,5 @@ export const fileUploadField = r2a(FileUploadField, [
   'accept',
   'inputId',
   'color',
+  'name',
 ]);

app/portainer/react/components/settings.ts

@@ -8,6 +8,7 @@ import { withReactQuery } from '@/react-tools/withReactQuery';
 import { withUIRouter } from '@/react-tools/withUIRouter';
 import { ApplicationSettingsPanel } from '@/react/portainer/settings/SettingsView/ApplicationSettingsPanel';
 import { KubeSettingsPanel } from '@/react/portainer/settings/SettingsView/KubeSettingsPanel';
+import { HelmCertPanel } from '@/react/portainer/settings/SettingsView/HelmCertPanel';
 
 export const settingsModule = angular
   .module('portainer.app.react.components.settings', [])
@@ -24,6 +25,7 @@ export const settingsModule = angular
     'applicationSettingsPanel',
     r2a(withReactQuery(ApplicationSettingsPanel), ['onSuccess'])
   )
+  .component('helmCertPanel', r2a(withReactQuery(HelmCertPanel), []))
   .component(
     'kubeSettingsPanel',
     r2a(withUIRouter(withReactQuery(KubeSettingsPanel)), [])

app/portainer/services/axios.ts

@@ -57,14 +57,14 @@ axios.interceptors.request.use(agentInterceptor);
  * @returns A PortainerError with the parsed error message and details.
  */
 export function parseAxiosError(
-  err: Error,
+  err: unknown,
   msg = '',
   parseError = defaultErrorParser
 ) {
   let resultErr = err;
   let resultMsg = msg;
 
-  if ('isAxiosError' in err) {
+  if (isAxiosError(err)) {
     const { error, details } = parseError(err as AxiosError);
     resultErr = error;
     if (msg && details) {

app/portainer/settings/general/index.js

@@ -1,6 +1,5 @@
 import angular from 'angular';
 
 import { sslCertificate } from './ssl-certificate';
-import { sslCaFileSettings } from './ssl-ca-file-settings';
 
-export default angular.module('portainer.settings.general', []).component('sslCertificateSettings', sslCertificate).component('sslCaFileSettings', sslCaFileSettings).name;
+export default angular.module('portainer.settings.general', []).component('sslCertificateSettings', sslCertificate).name;

app/portainer/settings/general/ssl-ca-file-settings/index.js

@@ -1,6 +0,0 @@
-import controller from './ssl-ca-file-settings-controller.js';
-
-export const sslCaFileSettings = {
-  templateUrl: './ssl-ca-file-settings.html',
-  controller,
-};

app/portainer/settings/general/ssl-ca-file-settings/ssl-ca-file-settings-controller.js

@@ -1,9 +0,0 @@
-import { FeatureId } from '@/react/portainer/feature-flags/enums';
-class SslCaFileSettingsController {
-  /* @ngInject */
-  constructor() {
-    this.limitedFeature = FeatureId.CA_FILE;
-  }
-}
-
-export default SslCaFileSettingsController;

app/portainer/settings/general/ssl-ca-file-settings/ssl-ca-file-settings.html

@@ -1,43 +0,0 @@
-<div class="be-indicator-container limited-be">
-  <div class="overlay">
-    <div class="limited-be-link vertical-center"
-      ><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator
-      ><portainer-tooltip message="'This feature is currently limited to Business Edition users only. '"></portainer-tooltip
-    ></div>
-    <div class="limited-be-content">
-      <rd-widget>
-        <rd-widget-header icon="key" title-text="Certificate Authority file for Kubernetes Helm repositories"></rd-widget-header>
-        <rd-widget-body>
-          <form class="form-horizontal" name="$ctrl.sslForm">
-            <span class="small text-muted vertical-center mb-3">
-              <pr-icon icon="'info'" mode="'primary'"></pr-icon>
-              Provide an additional CA file containing certificate(s) for HTTPS connections to Helm repositories.
-            </span>
-
-            <!-- SSL Cert -->
-            <div class="form-group">
-              <div class="col-sm-12 flex items-center">
-                <span class="space-right control-label col-sm-3 col-lg-2 !p-0 text-left">
-                  CA File
-                  <portainer-tooltip message="'Select a CA file containing your X.509 certificate(s), commonly a crt, cer or pem file.'"></portainer-tooltip>
-                </span>
-                <button class="btn btn-sm btn-primary !ml-0"> Select a file </button>
-                <span class="ml-1 flex h-full items-center">
-                  <pr-icon icon="'x-circle'" class-name="'icon-danger'"></pr-icon>
-                </span>
-              </div>
-            </div>
-
-            <div class="form-group">
-              <div class="col-sm-12">
-                <button type="button" class="btn btn-primary btn-sm !ml-0">
-                  <span>Apply changes</span>
-                </button>
-              </div>
-            </div>
-          </form>
-        </rd-widget-body>
-      </rd-widget>
-    </div>
-  </div>
-</div>

app/portainer/user-activity/activity-logs-view/activity-logs-view.html

@@ -1,6 +1,6 @@
 <page-header title="'User Activity'" breadcrumbs="['Activity Logs']" reload="true"> </page-header>
 
-<div class="be-indicator-container limited-be">
+<div class="be-indicator-container limited-be mx-4">
   <div class="overlay">
     <div class="limited-be-link vertical-center"
       ><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator
@@ -33,7 +33,7 @@
   </div>
 </div>
 
-<div class="be-indicator-container limited-be">
+<div class="be-indicator-container limited-be mx-4">
   <div class="overlay">
     <div class="limited-be-link vertical-center"
       ><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator

app/portainer/user-activity/auth-logs-view/auth-logs-view.html

@@ -1,6 +1,6 @@
 <page-header title="'User Activity'" breadcrumbs="['User authentication activity']" reload="true"> </page-header>
 
-<div class="be-indicator-container limited-be">
+<div class="be-indicator-container limited-be mx-4">
   <div class="overlay">
     <div class="limited-be-link vertical-center"
       ><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator
@@ -32,7 +32,7 @@
   </div>
 </div>
 
-<div class="be-indicator-container limited-be">
+<div class="be-indicator-container limited-be mx-4">
   <div class="overlay">
     <div class="limited-be-link vertical-center"
       ><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator

app/portainer/views/settings/settings.html

@@ -4,7 +4,8 @@
 
 <kube-settings-panel></kube-settings-panel>
 
-<ssl-ca-file-settings></ssl-ca-file-settings>
+<helm-cert-panel></helm-cert-panel>
+
 <ssl-certificate-settings ng-show="state.showHTTPS"></ssl-certificate-settings>
 
 <div class="row">